/* ============================================================
   Detail Modals — المودالات التوأم لـ .odd-* (.cd/.nd/.ivd/.pdd/.acd/.rgd)
   شُقّ من order-details.css. يُحمَّل بعد order-add.css مباشرةً
   فترتيب الـcascade كما كان بالضبط.

   الفهرس:  .cd-  تفاصيل العميل      ·  .nd-  تفاصيل الملاحظة
            .ivd- تفاصيل المخزون     ·  .pdd- تفاصيل تكلفة الإنتاج
            .acd- تفاصيل الحملة      ·  .rgd- تفاصيل الإقليم

   كلها توأم بنيوي لـ .odd-*: هيرو متدرّج + شريط إحصاءات عائم +
   بطاقات أقسام + ملخّص + شريط إجراءات سفلي.
   ============================================================ */

/* ============================================================
   Customer Details — تفاصيل العميل (.cd-*)
   مستوحى من customer-details-redesign.html. هِرو متدرّج + شبكة
   إحصاءات + بطاقات أقسام + شريط إجراءات سفلي. يستخدم توكنز Meadows.
   ============================================================ */

#customerDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
    max-width: 640px;
    border-radius: 24px;
}
.cd-screen {
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
}

/* ===== HERO — مطابق .odd-hero =====
   هيرو مدمج بتدرّج ديناميكي يُضبط inline من JS حسب شريحة العميل
   (نشط/جديد/VIP) + دوائر بيضاء زخرفية + أيقونة دائرية بيضاء. النص أبيض
   بظلّ خفيف ليتبيّن فوق أي تدرّج. */
.cd-hero {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 14px;
}
.cd-hero::before,
.cd-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.cd-hero::before {
    top: -46px;
    inset-inline-end: -40px;
    width: 160px;
    height: 160px;
}
.cd-hero::after {
    bottom: -64px;
    inset-inline-start: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
}

.cd-hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.cd-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.cd-close:hover {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
}
.cd-hero-titleblock {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}
.cd-hero-id {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.cd-hero-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.cd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: var(--text-title);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.cd-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.cd-hero-main {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.cd-hero-ico {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.cd-hero-info {
    flex: 1;
    min-width: 0;
}
.cd-hero-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    word-break: break-word;
}
.cd-hero-status-sub {
    font-size: 11.5px;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.cd-profile-tags {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.cd-profile-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ===== STATS — بطاقة عائمة واحدة (مثل .odd-timeline-wrap) =====
   تطفو فوق حدود الهيرو/الجسم بهامش علوي سالب. ثلاثة أعمدة إحصاء داخل
   بطاقة واحدة مفصولة بخطوط فاصلة رفيعة، بدل ثلاث بطاقات منفصلة — مطابقة
   لروح بطاقة خط الزمن في تفاصيل الطلب. */
.cd-stats-grid {
    margin: -10px 12px 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 12px 8px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.cd-stat-card {
    text-align: center;
    padding: 0 6px;
    position: relative;
    min-width: 0;
}
.cd-stat-card + .cd-stat-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 64%;
    width: 1px;
    background: var(--border-main);
}
.cd-stat-val {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
}
.cd-stat-val .cd-cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
.cd-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 600;
}
.cd-stat-orders .cd-stat-val {
    color: var(--info, #3b82f6);
}
.cd-stat-spent .cd-stat-val {
    color: var(--ready-text, #059669);
}
.cd-stat-avg .cd-stat-val {
    color: var(--primary);
}

/* ===== BODY — مطابق .odd-body =====
   تمرير داخلي داخل .cd-screen (شريط الإجراءات يبقى مثبّتاً أسفله).
   فجوة موحّدة gap بدل margin-bottom على كل بطاقة. */
.cd-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px 100px;
    overflow-y: auto;
}
/* بطاقات أقسام العميل — مطابقة لبصمة .odd-card:
   ظلّ مرئي، حدود محايدة، شريط محايد رفيع على الحافة الافتتاحية. */
.cd-section {
    position: relative;
    background: var(--surface-solid, #ffffff);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 11px 14px;
    padding-inline-start: 18px;
    box-shadow: var(--shadow-sm);
    animation: oddIn 0.36s ease both;
}
.cd-section::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: 5px;
    width: 3px;
    border-radius: 999px;
    background: var(--border-main);
}
.cd-section:nth-child(2) {
    animation-delay: 0.07s;
}
.cd-section:nth-child(3) {
    animation-delay: 0.12s;
}
.cd-section:nth-child(4) {
    animation-delay: 0.17s;
}
.cd-section:nth-child(5) {
    animation-delay: 0.22s;
}

.cd-sec-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
.cd-sec-ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cd-sec-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-title);
    letter-spacing: -0.01em;
    flex: 1;
}
.cd-sec-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* CONTACT ROWS */
.cd-contact-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cd-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: var(--bg-main);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
}
.cd-contact-row:hover {
    background: var(--surface-solid);
    border-color: var(--border-main);
}
.cd-contact-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface-solid);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}
.cd-contact-row.is-wa .cd-contact-ico {
    color: var(--wa-primary);
    background: color-mix(in srgb, var(--wa-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--wa-primary) 24%, transparent);
}
.cd-contact-row.is-wa {
    background: color-mix(in srgb, var(--wa-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--wa-primary) 16%, transparent);
}
.cd-contact-info {
    flex: 1;
    min-width: 0;
}
.cd-contact-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.cd-contact-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
    letter-spacing: 0.01em;
    margin-top: 1px;
}
.cd-contact-action {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.cd-contact-action:hover {
    background: var(--border-light);
    color: var(--text-title);
}

/* TAGS */
.cd-tag-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cd-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}
.cd-tag.is-primary {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 22%, transparent);
}
.cd-tag.is-success {
    background: color-mix(in srgb, var(--ready-text, #059669) 12%, transparent);
    color: var(--ready-text, #059669);
    border-color: color-mix(in srgb, var(--ready-text, #059669) 22%, transparent);
}
.cd-tag.is-warning {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 24%, transparent);
}
.cd-tag.is-info {
    background: color-mix(in srgb, var(--info, #3b82f6) 12%, transparent);
    color: var(--info, #3b82f6);
    border-color: color-mix(in srgb, var(--info, #3b82f6) 22%, transparent);
}

/* NOTES */
.cd-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.cd-note:last-of-type {
    margin-bottom: 0;
}
.cd-note:hover {
    border-color: var(--border-main);
    background: var(--surface-solid);
}
.cd-note-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--info), color-mix(in srgb, var(--info) 45%, #000));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}
.cd-note-body {
    flex: 1;
    min-width: 0;
}
.cd-note-text {
    font-size: 12.5px;
    color: var(--text-title);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cd-note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 4px;
    flex-wrap: wrap;
}
.cd-note-author {
    font-weight: 700;
    color: var(--text-secondary);
}
.cd-add-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: 1.5px dashed color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 10px;
    cursor: pointer;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    margin-top: 8px;
    font-family: inherit;
    transition: all 0.15s;
}
.cd-add-note:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ORDER CARDS */
.cd-order-card {
    display: flex;
    align-items: stretch;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.cd-order-card:last-child {
    margin-bottom: 0;
}
.cd-order-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.cd-order-bar {
    width: 4px;
    flex-shrink: 0;
}
.cd-bar-new {
    background: var(--info, #3b82f6);
}
.cd-bar-ready,
.cd-bar-pending,
.cd-bar-review {
    background: var(--warning);
}
.cd-bar-delivering {
    background: var(--primary);
}
.cd-bar-completed,
.cd-bar-collected {
    background: var(--ready-text, #059669);
}
.cd-bar-cancelled {
    background: var(--danger, #dc2626);
}
.cd-order-body {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
}
.cd-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.cd-order-id {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.cd-order-date {
    font-size: 10.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.cd-order-mid {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.cd-order-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.cd-order-status .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.cd-st-new {
    background: color-mix(in srgb, var(--info, #3b82f6) 12%, transparent);
    color: var(--info, #3b82f6);
}
.cd-st-new .dot {
    background: var(--info, #3b82f6);
}
.cd-st-ready,
.cd-st-pending,
.cd-st-review {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
}
.cd-st-ready .dot,
.cd-st-pending .dot,
.cd-st-review .dot {
    background: var(--warning);
}
.cd-st-delivering {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.cd-st-delivering .dot {
    background: var(--primary);
}
.cd-st-completed,
.cd-st-collected {
    background: color-mix(in srgb, var(--ready-text, #059669) 12%, transparent);
    color: var(--ready-text, #059669);
}
.cd-st-completed .dot,
.cd-st-collected .dot {
    background: var(--ready-text, #059669);
}
.cd-st-cancelled {
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
    color: var(--danger, #dc2626);
}
.cd-st-cancelled .dot {
    background: var(--danger, #dc2626);
}
.cd-order-total {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    margin-inline-start: auto;
}
.cd-order-total .cd-cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
.cd-order-total.is-cancelled {
    text-decoration: line-through;
    color: var(--text-muted);
}
.cd-order-products {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}
.cd-op-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
.cd-op-name {
    font-size: 10.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    font-weight: 600;
}
.cd-op-more {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--surface-hover);
    padding: 1px 6px;
    border-radius: 5px;
    font-weight: 700;
}
.cd-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ===== SUMMARY — مطابق .odd-summary =====
   سطح مرفوع بلمسة أساسية خفيفة يلخّص قيمة العميل: إجمالي الصرف هو
   البطولة البصرية (أخضر ready-text) كمرساة نهائية، ومتوسط الطلب بجانبها.
   كل النصوص من التوكنز فتتكيّف مع الوضع الليلي والثيم تلقائياً. */
.cd-summary {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-solid));
    color: var(--text-title);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-main);
    animation: oddIn 0.36s ease both;
    animation-delay: 0.27s;
}
.cd-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.cd-sum-row .val {
    color: var(--text-title);
    font-weight: 700;
}
.cd-sum-row.total {
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid var(--border-main);
    margin-top: 6px;
    margin-bottom: 0;
}
.cd-sum-row.total .val {
    font-size: 18px;
    color: var(--ready-text);
    font-weight: 800;
}
.cd-sum-row .cur {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 2px;
}

/* ===== ACTION BAR — مطابق .odd-actionbar =====
   شريط إجراءات سفلي بأزرار pill (radius 999px) وتخطيط flex. زرّا الحذف
   والتعديل يأخذان عرضاً مرناً بالتساوي (مثل .odd-action.cancel/edit). */
.cd-action-bar {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-main);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
    flex-shrink: 0;
}
.cd-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.15s;
}
.cd-action.delete {
    flex: 1;
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
    color: var(--danger, #dc2626);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 22%, transparent);
}
.cd-action.delete:hover {
    background: var(--danger, #dc2626);
    color: #fff;
}
.cd-action.edit {
    flex: 1;
    background: var(--primary);
    color: var(--text-light);
}
.cd-action.edit:hover {
    background: var(--primary-hover);
}

@media (max-width: 480px) {
    .cd-hero {
        padding: 14px 14px 50px;
    }
    .cd-stats-grid {
        margin: -30px 12px 0;
    }
    .cd-page {
        padding: 14px 12px 90px;
    }
}
/* ترقية قاعدة ≤480 إلى ≤768 — الصفحة الرئيسية لتفاصيل العميل
   كانت تتلقّى padding 14px فقط تحت 480px، في حين كانت 16px+ على
   الشاشات الأكبر. توحيد الكثافة. */
@media (max-width: 768px) {
    .cd-hero {
        padding: 12px 12px 36px;
    }
    .cd-stats-grid {
        margin: -26px 10px 0;
        gap: 8px;
    }
    .cd-page {
        padding: 12px 10px 80px;
    }
    .cd-order-body {
        padding: 8px 10px;
    }
    #customerDetailsModal .modal-content {
        border-radius: 14px;
    }
}
@media (max-width: 420px) {
    #customerDetailsModal .modal-content {
        border-radius: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cd-section {
        animation: none;
    }
}

/* ============================================================
   Note Details — تفاصيل الملاحظة
   أعيد بناؤها على نمط تفاصيل الطلب نفسه (أغسطس ٢٠٢٦): تُستهلك أصناف
   .odd-* (الهيرو/البطاقات/الملخّص/شريط الإجراءات) و.ivd-stats-grid
   (شريط الإحصاءات العائم) حرفياً كما تستهلك صفحة التوصيل .oc-* — لا
   نسخ محلية. الهيرو يلوّنه تصنيف الملاحظة (نفس آلية «الحالة تلوّن
   هيرو الطلب») عبر _buildNdHero في notes-details.js. ما تبقّى هنا محصور
   في الخصوصيات: صندوق المحتوى، صفوف الاقتران داخل بطاقة «مرتبط بـ»،
   شارة التثبيت الذهبية، وتخصيص زرّي الحذف/التثبيت في شريط الإجراءات.
   ============================================================ */

#noteDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
    max-width: 640px;
    border-radius: 24px;
}
/* عنوان الملاحظة قد يطول (عناوين الطلبات قصيرة دائماً) — كسر كلمات كي
   لا يفيض خارج الهيرو. */
#noteDetailsModal .odd-hero-status {
    word-break: break-word;
}

/* شارة «مثبتة» الذهبية في ترويسة الهيرو — نظير شارة التصنيف .odd-pill. */
.nd-pill-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #4a2f08;
    background: linear-gradient(135deg, var(--tier-vip-soft) 0%, var(--tier-vip) 100%);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    flex-shrink: 0;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tier-vip) 30%, transparent);
}

/* صندوق المحتوى — النص الأساسي للملاحظة داخل بطاقة «المحتوى». */
.nd-content {
    white-space: pre-wrap;
    color: var(--text-main);
    line-height: 1.7;
    font-size: 14px;
    background: var(--bg-main);
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    word-break: break-word;
}
.nd-empty-body {
    color: var(--text-muted);
    font-style: italic;
    font-size: 13px;
}

/* صفوف الاقتران (العميل/الحملة) داخل بطاقة «مرتبط بـ» — محتوى داخلي
   كبطاقات الطلب الخاصة (odd-addr-row/odd-camp-row). */
.nd-meta-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nd-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: var(--bg-main);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}
.nd-meta-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface-solid);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}
.nd-meta-row.is-customer .nd-meta-ico {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}
.nd-meta-row.is-campaign .nd-meta-ico {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--warning) 24%, transparent);
}
.nd-meta-info {
    flex: 1;
    min-width: 0;
}
.nd-meta-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.nd-meta-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    margin-top: 1px;
    word-break: break-word;
}

/* ===== شريط الإجراءات — تخصيصات فوق .odd-action =====
   الحذف أيقونة فقط بعرض ثابت: .odd-action.cancel افتراضياً flex:1 (زر
   نصّي عريض يناسب «إلغاء الطلب» لا أيقونة سلة المهملات). */
#noteDetailsModal .odd-action.cancel {
    flex: 0 0 48px;
    padding-inline: 0;
}
/* زر التثبيت: تحذيري افتراضياً، وذهبي عند التفعيل (يعكس حالة الملاحظة). */
#noteDetailsModal .nd-pin-btn {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}
#noteDetailsModal .nd-pin-btn:hover {
    background: var(--warning);
    color: #fff;
}
#noteDetailsModal .nd-pin-btn.is-pinned {
    background: linear-gradient(135deg, var(--tier-vip-soft) 0%, var(--tier-vip) 100%);
    color: #4a2f08;
    border-color: transparent;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tier-vip) 30%, transparent);
}

@media (max-width: 768px) {
    #noteDetailsModal .modal-content {
        border-radius: 14px;
    }
}
@media (max-width: 420px) {
    #noteDetailsModal .modal-content {
        border-radius: 12px;
    }
}

/* ============================================================
   Inventory Details — تفاصيل المنتج/البكج/حركة المخزون (.ivd-*)
   توأم .odd-* مشترك بين مودالات المخزون الثلاثة (منتج/بكج/حركة):
   هيرو متدرّج يُشتقّ لحظة العرض من هوية الكيان (حالة المخزون للمنتج
   · نشاط البكج · نوع الحركة — كما تلوّن حالةُ الطلب هيروَه) + شريط
   إحصاءات عائم بنمط .cd-stats-grid + بطاقات أقسام بنمط .odd-card +
   ملخّص + شريط إجراءات سفلي بنمط .odd-actionbar. نسخة واحدة تخدم
   الثلاثة (وتورّثها تبويبة «غير متوفر» تلقائياً عبر نفس الدوال).
   ============================================================ */

#productDetailsModal .modal-content,
#packageDetailsModal .modal-content,
#movementDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
    max-width: 640px;
    border-radius: 24px;
}
.ivd-screen {
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
}

/* ===== HERO — مطابق .odd-hero (التدرّج والأيقونة inline من JS) ===== */
.ivd-hero {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 14px;
}
.ivd-hero::before,
.ivd-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.ivd-hero::before {
    top: -46px;
    inset-inline-end: -40px;
    width: 160px;
    height: 160px;
}
.ivd-hero::after {
    bottom: -64px;
    inset-inline-start: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
}
.ivd-hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.ivd-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.ivd-close:hover {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
}
.ivd-hero-titleblock {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}
.ivd-hero-id {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ivd-hero-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ivd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: var(--text-title);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.ivd-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.ivd-hero-main {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.ivd-hero-ico {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    overflow: hidden;
}
/* صورة الكيان (منتج/بكج/أول عنصر حركة) تحلّ محلّ الأيقونة داخل الدائرة
   البيضاء نفسها — البنية مطابقة، الهوية أوضح. */
.ivd-hero-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ivd-hero-info {
    flex: 1;
    min-width: 0;
}
.ivd-hero-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    word-break: break-word;
}
.ivd-hero-status-sub {
    font-size: 11.5px;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ===== STATS — بطاقة عائمة واحدة (نسخ .cd-stats-grid) ===== */
.ivd-stats-grid {
    margin: -10px 12px 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 12px 8px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.ivd-stat-card {
    text-align: center;
    padding: 0 6px;
    position: relative;
    min-width: 0;
}
.ivd-stat-card + .ivd-stat-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 64%;
    width: 1px;
    background: var(--border-main);
}
.ivd-stat-val {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
}
.ivd-stat-val .ivd-cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
.ivd-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 600;
}

/* ===== BODY — نسخ .odd-body/.odd-card ===== */
.ivd-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ivd-card {
    position: relative;
    background: var(--surface-solid, #ffffff);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 11px 14px;
    padding-inline-start: 18px;
    box-shadow: var(--shadow-sm);
    animation: oddIn 0.36s ease both;
}
.ivd-card::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: 5px;
    width: 3px;
    border-radius: 999px;
    background: var(--border-main);
}
.ivd-card:nth-child(1) {
    animation-delay: 0.02s;
}
.ivd-card:nth-child(2) {
    animation-delay: 0.07s;
}
.ivd-card:nth-child(3) {
    animation-delay: 0.12s;
}
.ivd-card:nth-child(4) {
    animation-delay: 0.17s;
}
.ivd-card:nth-child(5) {
    animation-delay: 0.22s;
}
.ivd-card:nth-child(6) {
    animation-delay: 0.27s;
}
.ivd-sec-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
.ivd-sec-ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ivd-sec-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-title);
    letter-spacing: -0.01em;
}
.ivd-sec-count {
    margin-inline-start: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* ===== إطار الصورة (منتج/بكج) ===== */
.ivd-img-wrap {
    display: flex;
    justify-content: center;
    background: var(--bg-main);
    border: 1px dashed var(--border-main);
    border-radius: 11px;
    padding: 12px;
}
.ivd-img {
    max-width: 100%;
    max-height: 230px;
    border-radius: 9px;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* ===== صفوف الألوان/العناصر — نسخ بصمة .odd-prod-row ===== */
.ivd-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
}
.ivd-row:first-of-type {
    padding-top: 1px;
}
.ivd-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.ivd-thumb {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
    background: var(--bg-main);
}
.ivd-thumb-ph {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-main);
    border: 1px dashed var(--border-main);
}
.ivd-thumb-ph svg {
    width: 16px;
    height: 16px;
}
.ivd-row-info {
    flex: 1;
    min-width: 0;
}
.ivd-row-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1.35;
    word-break: break-word;
}
.ivd-row-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.ivd-qty {
    font-size: 10.5px;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 1px 7px;
    border-radius: 6px;
    font-weight: 700;
    margin-top: 3px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}
.ivd-row-total {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-title);
    white-space: nowrap;
    text-align: end;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.ivd-row-total .cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
/* شارة حالة المخزون لكل لون/منتج (متوفر/منخفض/نفد) */
.ivd-state {
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ivd-state.is-in {
    color: var(--ready-text, #059669);
    background: color-mix(in srgb, var(--ready-text, #059669) 12%, transparent);
}
.ivd-state.is-low {
    color: var(--pending-text, #d97706);
    background: color-mix(in srgb, var(--pending-text, #d97706) 14%, transparent);
}
.ivd-state.is-out {
    color: var(--cancelled-text, #dc2626);
    background: color-mix(in srgb, var(--cancelled-text, #dc2626) 12%, transparent);
}

/* ===== الملاحظات/الوصف/السبب — نسخ .odd-notes ===== */
.ivd-notes {
    background: var(--notes-bg);
    border-radius: 11px;
    padding: 10px 12px;
}
.ivd-note-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--notes-text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.ivd-note-label .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}
.ivd-note-line {
    font-size: 12px;
    line-height: 1.5;
    color: var(--notes-text);
    word-break: break-word;
}

/* ===== SUMMARY — نسخ .odd-summary ===== */
.ivd-summary {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-solid));
    color: var(--text-title);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-main);
    animation: oddIn 0.36s ease both;
    animation-delay: 0.27s;
}
.ivd-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.ivd-sum-row .val {
    color: var(--text-title);
    font-weight: 700;
}
.ivd-sum-row.total {
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid var(--border-main);
    margin-top: 6px;
    margin-bottom: 0;
}
.ivd-sum-row.total .val {
    font-size: 18px;
    color: var(--ready-text);
    font-weight: 800;
}
.ivd-sum-row .cur {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 2px;
}

/* ===== ACTION BAR — نسخ .odd-actionbar ===== */
.ivd-actionbar {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-main);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}
.ivd-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.15s;
}
.ivd-action.danger {
    width: 48px;
    padding: 10px 0;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 22%, transparent);
    flex-shrink: 0;
}
.ivd-action.danger:hover {
    background: var(--danger);
    color: #fff;
}
.ivd-action.warn {
    flex: 1;
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 24%, transparent);
}
.ivd-action.warn:hover {
    background: var(--warning);
    color: #fff;
}
.ivd-action.restore {
    flex: 1;
    background: color-mix(in srgb, var(--ready-text, #059669) 12%, transparent);
    color: var(--ready-text, #059669);
    border-color: color-mix(in srgb, var(--ready-text, #059669) 24%, transparent);
}
.ivd-action.restore:hover {
    background: var(--ready-text, #059669);
    color: #fff;
}
.ivd-action.edit {
    flex: 1;
    background: var(--primary);
    color: var(--text-light);
}
.ivd-action.edit:hover {
    background: var(--primary-hover);
}

/* ===== تنسيقات ضيقة ===== */
@media (max-width: 768px) {
    .ivd-hero {
        padding: 12px 12px 16px;
    }
    .ivd-stats-grid {
        margin: -10px 8px 0;
    }
    .ivd-body {
        padding: 10px 8px;
    }
    .ivd-actionbar {
        padding: 10px;
    }
    #productDetailsModal .modal-content,
    #packageDetailsModal .modal-content,
    #movementDetailsModal .modal-content {
        border-radius: 14px;
    }
}
@media (max-width: 480px) {
    #productDetailsModal .modal-content,
    #packageDetailsModal .modal-content,
    #movementDetailsModal .modal-content {
        border-radius: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ivd-card,
    .ivd-summary {
        animation: none;
    }
}

/* ============================================================
   Production Cost Details — تفاصيل تكلفة الإنتاج (.pdd-*)
   توأم .odd-* و .cd-*: هيرو متدرّج يُشتقّ من حالة الربح/الخسارة
   (مصدر الهوية في هذه الصفحة، كسلوك حالة الطلب في تفاصيله) + شريط
   إحصاءات عائم + بطاقات أقسام (تفصيل التكاليف / ملاحظات) + ملخّص
   إيصال + شريط إجراءات سفلي.
   ============================================================ */

#productionCostDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
    max-width: 640px;
    border-radius: 24px;
}
.pdd-screen {
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
}

/* ===== HERO ===== — مطابق .odd-hero: التدرّج يُضبط inline من JS
   حسب الربح/الخسارة (توكنات profitable/losing-product-text). */
.pdd-hero {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 14px;
}
.pdd-hero::before,
.pdd-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.pdd-hero::before {
    top: -46px;
    inset-inline-end: -40px;
    width: 160px;
    height: 160px;
}
.pdd-hero::after {
    bottom: -64px;
    inset-inline-start: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
}
.pdd-hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.pdd-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.pdd-close:hover {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
}
.pdd-hero-titleblock {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}
.pdd-hero-id {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.pdd-hero-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.pdd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: var(--text-title);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.pdd-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.pdd-hero-main {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.pdd-hero-ico {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.pdd-hero-info {
    flex: 1;
    min-width: 0;
}
.pdd-hero-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    word-break: break-word;
}
.pdd-hero-status-sub {
    font-size: 11.5px;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    font-variant-numeric: tabular-nums;
}

/* ===== STATS — بطاقة عائمة رباعية (مثل .cd-stats-grid) ===== */
.pdd-stats-grid {
    margin: -10px 12px 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 12px 8px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.pdd-stat-card {
    text-align: center;
    padding: 0 4px;
    position: relative;
    min-width: 0;
}
.pdd-stat-card + .pdd-stat-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 64%;
    width: 1px;
    background: var(--border-main);
}
.pdd-stat-val {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.pdd-stat-val .cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
.pdd-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 600;
}
.pdd-stat-price .pdd-stat-val {
    color: var(--primary);
}
.pdd-stat-cost .pdd-stat-val {
    color: var(--warning);
}
.pdd-stat-profit.is-profit .pdd-stat-val {
    color: var(--profitable-product-text);
}
.pdd-stat-profit.is-loss .pdd-stat-val {
    color: var(--losing-product-text);
}
.pdd-stat-margin.is-profit .pdd-stat-val {
    color: var(--profitable-product-text);
}
.pdd-stat-margin.is-loss .pdd-stat-val {
    color: var(--losing-product-text);
}

/* ===== BODY — مطابق .odd-body ===== */
.pdd-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pdd-card {
    position: relative;
    background: var(--surface-solid, #ffffff);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 11px 14px;
    padding-inline-start: 18px;
    box-shadow: var(--shadow-sm);
    animation: oddIn 0.36s ease both;
}
.pdd-card::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: 5px;
    width: 3px;
    border-radius: 999px;
    background: var(--border-main);
}
.pdd-card:nth-child(1) {
    animation-delay: 0.02s;
}
.pdd-card:nth-child(2) {
    animation-delay: 0.07s;
}
.pdd-card:nth-child(3) {
    animation-delay: 0.12s;
}
.pdd-sec-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
.pdd-sec-ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pdd-sec-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-title);
    letter-spacing: -0.01em;
    flex: 1;
}
.pdd-sec-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* صفوف تفصيل التكاليف — نظير breakdown السابق بلغة .odd- */
.pdd-cost-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pdd-cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.pdd-cost-label {
    font-size: 12px;
    color: var(--text-main);
    font-weight: 500;
}
.pdd-cost-val {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pdd-cost-val .cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}

/* ملاحظات — نفس .odd-notes */
.pdd-notes {
    background: var(--notes-bg);
    border-radius: 11px;
    padding: 10px 12px;
}
.pdd-note-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--notes-text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.pdd-note-label .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}
.pdd-note-line {
    font-size: 12px;
    line-height: 1.5;
    color: var(--notes-text);
    word-break: break-word;
    white-space: pre-wrap;
}

/* ===== SUMMARY — مطابق .odd-summary؛ الإجمالي يتلوّن بالربح/الخسارة ===== */
.pdd-summary {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-solid));
    color: var(--text-title);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-main);
    animation: oddIn 0.36s ease both;
    animation-delay: 0.27s;
}
.pdd-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.pdd-sum-row .val {
    color: var(--text-title);
    font-weight: 700;
}
.pdd-sum-row.total {
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid var(--border-main);
    margin-top: 6px;
    margin-bottom: 0;
}
.pdd-sum-row.total .val {
    font-size: 18px;
    color: var(--profitable-product-text);
    font-weight: 800;
}
.pdd-sum-row.total.is-loss .val {
    color: var(--losing-product-text);
}
.pdd-sum-row .cur {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 2px;
}

/* ===== ACTION BAR — مطابق .odd-actionbar ===== */
.pdd-actionbar {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-main);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}
.pdd-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.15s;
}
.pdd-action.delete {
    width: 48px;
    /* نفس ارتفاع زر التعديل المجاور (نمط .ivd-action.danger) */
    padding: 10px 0;
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
    color: var(--danger, #dc2626);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 18%, transparent);
    flex-shrink: 0;
}
.pdd-action.delete:hover {
    background: var(--danger, #dc2626);
    color: #fff;
}
.pdd-action.edit {
    flex: 1;
    background: var(--primary);
    color: var(--text-light);
}
.pdd-action.edit:hover {
    background: var(--primary-hover);
}

@media (max-width: 768px) {
    .pdd-hero {
        padding: 12px 12px 16px;
    }
    .pdd-stats-grid {
        margin: -10px 8px 0;
    }
    .pdd-body {
        padding: 10px 8px;
    }
    .pdd-stat-val {
        font-size: 13px;
    }
    .pdd-stat-label {
        font-size: 9px;
    }
    #productionCostDetailsModal .modal-content {
        border-radius: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pdd-card,
    .pdd-summary {
        animation: none;
    }
}

/* ============================================================
   Campaign Details — تفاصيل الحملة الإعلانية (.acd-*)
   توأم .odd-* و .cd-*: الهوية اللونية للهيرو هي **المنصة** (مطابقة
   لبطاقة الحملة التي تجعل --ac-band هويتها) وثمرة الحملة (رابحة/
   خاسرة) تظهر كـ pill وكمجموع الملخّص. شريط إحصاءات رباعي (تكلفة/
   عائد/صافي/طلبات) + بطاقة فترة + ملاحظات + شريط إجراءات.
   ============================================================ */

#campaignDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
    max-width: 640px;
    border-radius: 24px;
}
.acd-screen {
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
}

/* ===== HERO ===== — التدرّج من لون المنصة (يُضبط inline من JS) */
.acd-hero {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 14px;
}
.acd-hero::before,
.acd-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.acd-hero::before {
    top: -46px;
    inset-inline-end: -40px;
    width: 160px;
    height: 160px;
}
.acd-hero::after {
    bottom: -64px;
    inset-inline-start: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
}
.acd-hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.acd-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.acd-close:hover {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
}
.acd-hero-titleblock {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}
.acd-hero-id {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.acd-hero-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.acd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: var(--text-title);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.acd-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.acd-hero-main {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.acd-hero-ico {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.acd-hero-info {
    flex: 1;
    min-width: 0;
}
.acd-hero-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    word-break: break-word;
}
.acd-hero-status-sub {
    font-size: 11.5px;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    font-variant-numeric: tabular-nums;
}

/* ===== STATS — بطاقة عائمة رباعية ===== */
.acd-stats-grid {
    margin: -10px 12px 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 12px 8px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.acd-stat-card {
    text-align: center;
    padding: 0 4px;
    position: relative;
    min-width: 0;
}
.acd-stat-card + .acd-stat-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 64%;
    width: 1px;
    background: var(--border-main);
}
.acd-stat-val {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.acd-stat-val .cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
.acd-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 600;
}
.acd-stat-cost .acd-stat-val {
    color: var(--warning);
}
.acd-stat-revenue .acd-stat-val {
    color: var(--info, #3b82f6);
}
.acd-stat-net.is-profit .acd-stat-val {
    color: var(--profitable-product-text);
}
.acd-stat-net.is-loss .acd-stat-val {
    color: var(--losing-product-text);
}
.acd-stat-orders .acd-stat-val {
    color: var(--primary);
}

/* ===== BODY ===== */
.acd-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.acd-card {
    position: relative;
    background: var(--surface-solid, #ffffff);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 11px 14px;
    padding-inline-start: 18px;
    box-shadow: var(--shadow-sm);
    animation: oddIn 0.36s ease both;
}
.acd-card::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: 5px;
    width: 3px;
    border-radius: 999px;
    background: var(--border-main);
}
.acd-card:nth-child(1) {
    animation-delay: 0.02s;
}
.acd-card:nth-child(2) {
    animation-delay: 0.07s;
}
.acd-card:nth-child(3) {
    animation-delay: 0.12s;
}
.acd-sec-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
.acd-sec-ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.acd-sec-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-title);
    letter-spacing: -0.01em;
    flex: 1;
}
.acd-sec-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* فترة الحملة — صفوف meta توأم .nd-meta-row */
.acd-meta-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.acd-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: var(--bg-main);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}
.acd-meta-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface-solid);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}
.acd-meta-row.is-start .acd-meta-ico {
    color: var(--info, #3b82f6);
    background: color-mix(in srgb, var(--info, #3b82f6) 12%, transparent);
    border-color: color-mix(in srgb, var(--info, #3b82f6) 24%, transparent);
}
.acd-meta-row.is-end .acd-meta-ico {
    color: var(--ready-text, #059669);
    background: color-mix(in srgb, var(--ready-text, #059669) 12%, transparent);
    border-color: color-mix(in srgb, var(--ready-text, #059669) 24%, transparent);
}
.acd-meta-info {
    flex: 1;
    min-width: 0;
}
.acd-meta-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.acd-meta-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}
.acd-meta-extra {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ملاحظات — نفس .odd-notes */
.acd-notes {
    background: var(--notes-bg);
    border-radius: 11px;
    padding: 10px 12px;
}
.acd-note-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--notes-text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.acd-note-label .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}
.acd-note-line {
    font-size: 12px;
    line-height: 1.5;
    color: var(--notes-text);
    word-break: break-word;
    white-space: pre-wrap;
}

/* ===== SUMMARY ===== */
.acd-summary {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-solid));
    color: var(--text-title);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-main);
    animation: oddIn 0.36s ease both;
    animation-delay: 0.27s;
}
.acd-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.acd-sum-row .val {
    color: var(--text-title);
    font-weight: 700;
}
.acd-sum-row.total {
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid var(--border-main);
    margin-top: 6px;
    margin-bottom: 0;
}
.acd-sum-row.total .val {
    font-size: 18px;
    color: var(--profitable-product-text);
    font-weight: 800;
}
.acd-sum-row.total.is-loss .val {
    color: var(--losing-product-text);
}
.acd-sum-row .cur {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 2px;
}

/* ===== ACTION BAR ===== */
.acd-actionbar {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-main);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}
.acd-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.15s;
}
.acd-action.delete {
    width: 48px;
    /* نفس ارتفاع زر التعديل المجاور (نمط .ivd-action.danger) */
    padding: 10px 0;
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
    color: var(--danger, #dc2626);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 18%, transparent);
    flex-shrink: 0;
}
.acd-action.delete:hover {
    background: var(--danger, #dc2626);
    color: #fff;
}
.acd-action.edit {
    flex: 1;
    background: var(--primary);
    color: var(--text-light);
}
.acd-action.edit:hover {
    background: var(--primary-hover);
}

@media (max-width: 768px) {
    .acd-hero {
        padding: 12px 12px 16px;
    }
    .acd-stats-grid {
        margin: -10px 8px 0;
    }
    .acd-body {
        padding: 10px 8px;
    }
    .acd-stat-val {
        font-size: 13px;
    }
    .acd-stat-label {
        font-size: 9px;
    }
    #campaignDetailsModal .modal-content {
        border-radius: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .acd-card,
    .acd-summary {
        animation: none;
    }
}

/* ============================================================
   Region Details — تفاصيل إقليم التوصيل (.rgd-*)
   توأم .odd-* و .cd-*: الهوية اللونية للهيرو هي حالة الإقليم
   (به مدن = delivering، خالٍ = pending — نفس دلالة شريط بطاقة
   الإقليم في القائمة). شريط إحصاءات ثلاثي (مدن/متوسط/نطاق) +
   بطاقة مدن بصفوف مصغّرة + ملخّص أقل/أعلى/متوسط + شريط إجراءات
   رباعي (حذف/إضافة مدينة/إدارة/تعديل).
   ============================================================ */

#regionDetailsModal .modal-content {
    padding: 0;
    overflow: hidden;
    max-width: 640px;
    border-radius: 24px;
}
.rgd-screen {
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
}

/* ===== HERO ===== */
.rgd-hero {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 14px;
}
.rgd-hero::before,
.rgd-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.rgd-hero::before {
    top: -46px;
    inset-inline-end: -40px;
    width: 160px;
    height: 160px;
}
.rgd-hero::after {
    bottom: -64px;
    inset-inline-start: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
}
.rgd-hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.rgd-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.rgd-close:hover {
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
}
.rgd-hero-titleblock {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}
.rgd-hero-id {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.rgd-hero-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.rgd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: var(--text-title);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.rgd-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.rgd-hero-main {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.rgd-hero-ico {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.rgd-hero-info {
    flex: 1;
    min-width: 0;
}
.rgd-hero-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    word-break: break-word;
}
.rgd-hero-status-sub {
    font-size: 11.5px;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    font-variant-numeric: tabular-nums;
}

/* ===== STATS — بطاقة عائمة ثلاثية (مثل .cd-stats-grid) ===== */
.rgd-stats-grid {
    margin: -10px 12px 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 12px 8px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.rgd-stat-card {
    text-align: center;
    padding: 0 6px;
    position: relative;
    min-width: 0;
}
.rgd-stat-card + .rgd-stat-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 64%;
    width: 1px;
    background: var(--border-main);
}
.rgd-stat-val {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.rgd-stat-val .cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
.rgd-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 600;
}
.rgd-stat-cities .rgd-stat-val {
    color: var(--info, #3b82f6);
}
.rgd-stat-avg .rgd-stat-val {
    color: var(--ready-text, #059669);
}
.rgd-stat-range .rgd-stat-val {
    color: var(--primary);
}

/* ===== BODY ===== */
.rgd-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.rgd-card {
    position: relative;
    background: var(--surface-solid, #ffffff);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 11px 14px;
    padding-inline-start: 18px;
    box-shadow: var(--shadow-sm);
    animation: oddIn 0.36s ease both;
}
.rgd-card::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: 5px;
    width: 3px;
    border-radius: 999px;
    background: var(--border-main);
}
.rgd-card:nth-child(1) {
    animation-delay: 0.02s;
}
.rgd-card:nth-child(2) {
    animation-delay: 0.07s;
}
.rgd-sec-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
.rgd-sec-ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rgd-sec-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-title);
    letter-spacing: -0.01em;
    flex: 1;
}
.rgd-sec-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* صفوف المدن — نظير .odd-prod-row: اسم وتاريخ + السعر (بلا أفاتار — طلب
   صريح: لا حرف أول ملوّن بجانب أسماء المدن). */
.rgd-city-list {
    display: flex;
    flex-direction: column;
}
.rgd-city-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
}
.rgd-city-row:first-of-type {
    padding-top: 1px;
}
.rgd-city-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.rgd-city-info {
    flex: 1;
    min-width: 0;
}
.rgd-city-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1.35;
    word-break: break-word;
}
.rgd-city-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.rgd-city-price {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-title);
    white-space: nowrap;
    text-align: end;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.rgd-city-price .cur {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 1px;
}
.rgd-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ===== SUMMARY — أقل/أعلى/متوسط أسعار التوصيل ===== */
.rgd-summary {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-solid));
    color: var(--text-title);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-main);
    animation: oddIn 0.36s ease both;
    animation-delay: 0.27s;
}
.rgd-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.rgd-sum-row .val {
    color: var(--text-title);
    font-weight: 700;
}
.rgd-sum-row.total {
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid var(--border-main);
    margin-top: 6px;
    margin-bottom: 0;
}
.rgd-sum-row.total .val {
    font-size: 18px;
    color: var(--ready-text, #059669);
    font-weight: 800;
}
.rgd-sum-row .cur {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-start: 2px;
}

/* ===== ACTION BAR — أربعة أزرار: حذف + إضافة مدينة + إدارة + تعديل ===== */
.rgd-actionbar {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-main);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}
.rgd-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    font: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.15s;
}
.rgd-action.delete {
    width: 48px;
    /* نفس ارتفاع أزرار شريط الإجراءات المجاورة (نمط .ivd-action.danger) */
    padding: 10px 0;
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
    color: var(--danger, #dc2626);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 18%, transparent);
    flex-shrink: 0;
}
.rgd-action.delete:hover {
    background: var(--danger, #dc2626);
    color: #fff;
}
/* إضافة مدينة — زر «+» منقّط بلون primary (نمط .cd-add-note) */
.rgd-action.add {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 26%, transparent);
    flex-shrink: 0;
}
.rgd-action.add:hover {
    background: var(--primary);
    color: #fff;
}
.rgd-action.manage {
    background: var(--surface-solid);
    color: var(--text-title);
    border-color: var(--border-main);
    flex-shrink: 0;
}
.rgd-action.manage:hover {
    background: var(--surface-hover);
}
.rgd-action.edit {
    flex: 1;
    background: var(--primary);
    color: var(--text-light);
}
.rgd-action.edit:hover {
    background: var(--primary-hover);
}

@media (max-width: 768px) {
    .rgd-hero {
        padding: 12px 12px 16px;
    }
    .rgd-stats-grid {
        margin: -10px 8px 0;
    }
    .rgd-body {
        padding: 10px 8px;
    }
    /* شريط رباعي على شاشة ضيّقة: الزرّان الثانويان يتنازلان عن النصّ الطويل */
    .rgd-action.manage {
        padding: 10px 10px;
    }
    #regionDetailsModal .modal-content {
        border-radius: 14px;
    }
}
@media (max-width: 420px) {
    .rgd-actionbar {
        flex-wrap: wrap;
    }
    .rgd-action.edit,
    .rgd-action.manage {
        flex: 1 1 calc(50% - 7px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .rgd-card,
    .rgd-summary {
        animation: none;
    }
}