/* ═══════════════════════════════════════════════════════════════════════════
   delivery.css — شاشات مندوب التوصيل على الجوّال

   ⚠️ ملفّ ساكن يُربط مباشرةً في App.razor، ولا يمرّ بـ Tailwind.
      السبب مقيس: app.css مُدخَل لا مخرَج (المربوط tailwind-output.css)، وملفّ
      .razor.css المرافق لا يُخدَم إطلاقاً في هذا التطبيق. فالمسار الوحيد الذي
      يصل المتصفّح بلا خطوة بناء هو هذا — نفس مسار shared.css وmobile-first.css.

   ⚠️ لا أصناف Tailwind بقيم حرّة في شاشات المندوب: إضافتها تُجبر إعادة توليد
      tailwind-output.css المُودَع، وتوليده يُسقط أصناف أخرى انجرفت عن المصدر.

   الأصناف كلّها ببادئة dlv- أو داخل .dlv، فلا تصطدم بشيء في اللوحة.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ الرموز على body لا على .dlv: لافتة إعادة الاتصال (#components-reconnect-modal)
   شقيقةٌ لـ.dlv لا ابنةٌ لها، فرمزٌ معرَّف على .dlv لا يصلها — ويسقط لونها إلى
   الشفافية بلا أي خطأ، فيشفّ ما خلفها. عُرِّفت هنا فتصل الاثنين. */
body:has(.dlv) {
    /* اللوحة — من رموز اللوحة نفسها (app.css) بنعومة أعلى تناسب الجوّال */
    --dlv-primary: 217 91% 40%;
    --dlv-primary-soft: 217 91% 96%;
    --dlv-on-primary: 0 0% 100%;
    --dlv-bg: 214 40% 96%;
    --dlv-card: 0 0% 100%;
    --dlv-ink: 222 47% 10%;
    --dlv-ink-2: 216 18% 38%;
    --dlv-ink-3: 216 14% 56%;
    --dlv-line: 214 30% 90%;
    --dlv-tint: 214 40% 94%;
    --dlv-success: 146 62% 32%;
    --dlv-warn: 34 90% 44%;
    --dlv-danger: 2 70% 48%;

    --dlv-st-processing: 174 78% 30%;
    --dlv-st-shipped: 160 74% 30%;
    --dlv-st-delivered: 146 70% 31%;

    --dlv-shadow: 0 1px 2px hsl(222 47% 10% / .04), 0 10px 30px -18px hsl(222 47% 10% / .18);

    /* ═══ الهوامش مائعة لا ثابتة ═══
       الثابت 16px يأخذ من هاتف 320 ضعف ما يأخذه من 430 نسبةً, والمندوب يقرأ رقم
       فاتورة واسم عميل على شاشة صغيرة — كل بكسل جانبيّ يُقتطع من النصّ.

       القيمة تتبع عرض الجهاز: 3.2vw للحافة و3.6vw لداخل البطاقة, محصورتين بحدّين
       فلا تلتصق على الضيّق ولا تتضخّم على العريض.

         320px -> حافة 10.2 · داخل 12.0     (المجموع 22 بدل 32)
         360px -> حافة 11.5 · داخل 13.0     (المجموع 25 بدل 32)
         390px -> حافة 12.5 · داخل 14.0
         430px -> حافة 13.8 · داخل 15.5
         500px+ -> حافة 16.0 · داخل 18.0     (تعود إلى مقاس Material للشاشة الأعرض)

       ⚠️ والحدّ الأدنى ليس صفراً عمداً: نصّ يلامس حافة الشاشة يُقصّ على الشاشات
          المنحنية, ولا تبقى للإصبع مساحة تمرير من الحافة. */
    --dlv-gutter: clamp(10px, 3.2vw, 16px);
    --dlv-pad: clamp(12px, 3.6vw, 18px);

    /* الهيكل: الأساس أغمق من tint ليبين على البطاقة البيضاء، واللمعة أفتح منه بفارق
       يُرى فعلاً — فارق 6% لا يُرى، و12% يُرى بلا صخب. */
    --dlv-skel-base: 214 30% 89%;
    --dlv-skel-hi: 210 55% 97%;
}

.dlv {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: hsl(var(--dlv-bg));
    color: hsl(var(--dlv-ink));
    font-size: 15px;
    line-height: 1.6;
    /* أعلى من لافتة تثبيت PWA (9000): شاشة المندوب ملء الشاشة، وأي لافتة تطفو
       فوقها تحجب شريط الفعل وتربكه. تُخفى صراحةً أدناه أيضاً. */
    z-index: 9500;
}

/* ⚠️ لافتات لوحة الإدارة لا تظهر على شاشة المندوب:
   لافتة تثبيت PWA نصّها يشرح «اختصارات التطبيق» وهو كلام لا يخصّ مندوباً في الطريق،
   وتطفو بـ z-index 9000 فوق شريط الفعل. تُخفى ما دامت شاشة المندوب معروضة. */
body:has(.dlv) #spwa-card,
body:has(.dlv) #spwa-backdrop,
body:has(.dlv) .spwa-card,
body:has(.dlv) .spwa-fab { display: none !important; }

/* الحاوية المُمرَّرة — في التخطيط وحده، لا في الصفحات.
   كتلة عادية لا flex: طول المحتوى يقرّره جذر الصفحة أدناه. */
.dlv-main {
    flex: 1;
    min-height: 0;            /* ⚠️ لازم داخل عمود flex: بدونه لا تنكمش الحاوية فلا تُمرَّر */
    overflow-y: auto;
    overscroll-behavior: contain;
    /* ⚠️ max مع env: الهاتف ذو الحافة المنحنية أو الشقّ يبلّغ منطقة آمنة أكبر
       من هامشنا في الوضع الأفقيّ — فيُؤخذ الأكبر, ولا يُجمع الاثنان. */
    padding-block: 8px 24px;
    padding-inline:
        max(var(--dlv-gutter), env(safe-area-inset-left))
        max(var(--dlv-gutter), env(safe-area-inset-right));
    scrollbar-width: none;
}
.dlv-main::-webkit-scrollbar { display: none; }

/* جذر كلّ صفحة داخل التخطيط.

   ⚠️ لا تُعطَ الصفحات .dlv-main: كانت كلّ صفحة تكرّر الصنف نفسه داخل
      <main class="dlv-main"> فينتج **حاويتا تمرير متداخلتان وحشوٌ مضاعف** —
      مقيس على 390px: عرض البطاقة 326 بدل 358، أي 64px ضائعة (16% من الشاشة).
      والتداخل يُنتج كذلك تسلسل تمرير (scroll chaining) على iOS. */
.dlv-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dlv-page > * { flex-shrink: 0; }

/* شريط الفعل ثابت أسفل الشاشة، فالمحتوى يترك له مكاناً.
   80 لا 104: الحاوية الأمّ تضيف 24 بالفعل. */
.dlv-page.has-action { padding-bottom: 80px; }

/* ───────────────────────── التنقّل السفلي ───────────────────────── */
/* الشريط مرفوع بظلّ لا مفصول بخطّ: الخطّ الصلب يقطع الشاشة نصفين، والظلّ يرفع
   الشريط فوق المحتوى فيُقرأ طبقةً لا حدّاً. ويبقى الخطّ الشعريّ للثيم الداكن
   حيث لا يبين الظلّ على خلفية داكنة.

   ⚠️ لا backdrop-filter هنا مهما أغرى الشكل: أيّ جدّ يحمله يصير الحاوي لكلّ
      position: fixed بداخله — وشريط الفعل في صفحة التفاصيل ثابت. موثّق في
      DeliveryLayout.razor ومقيس 874×70 بدل 1142×350. */
.dlv-nav {
    display: flex;
    gap: 4px;
    padding-block: 10px calc(10px + env(safe-area-inset-bottom));
    padding-inline:
        max(8px, env(safe-area-inset-left))
        max(8px, env(safe-area-inset-right));
    background: hsl(var(--dlv-card));
    border-top: 1px solid hsl(var(--dlv-line) / .6);
    box-shadow: 0 -1px 24px -12px hsl(222 47% 10% / .28);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.dlv .dlv-nav-item {
    flex: 1;
    min-height: 0;              /* ⚠️ min-height:44px العامّة تنفخ الشريط */
    min-width: 0;               /* ⚠️ بدونه تفيض التسمية الطويلة على 320px */
    border: 0;
    background: transparent;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 2px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: hsl(var(--dlv-ink-3));
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
}

/* الأيقونة في حبّة مستقلّة لا خلفية تملأ التبويب كلّه: الخلفية الممتدّة تجعل
   الأزرار الثلاثة تبدو مربّعات متلاصقة، والحبّة تُبرز الأيقونة وتترك التسمية حرّة. */
.dlv .dlv-nav-item .dlv-nav-pill {
    display: grid;
    place-items: center;
    width: 46px;
    height: 30px;
    border-radius: 999px;
    background: transparent;
    transition: background-color .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.dlv .dlv-nav-item svg {
    width: 21px;
    height: 21px;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

/* لمسة الإصبع: انطباع فوريّ قبل أن تُرسم الصفحة التالية */
.dlv .dlv-nav-item:active .dlv-nav-pill { transform: scale(.9); }

.dlv .dlv-nav-item.active {
    color: hsl(var(--dlv-primary));
    font-weight: 700;
}
.dlv .dlv-nav-item.active .dlv-nav-pill {
    background: hsl(var(--dlv-primary-soft));
}
.dlv .dlv-nav-item.active svg { transform: translateY(-1px); }

/* شرطة صغيرة تحت التبويب النشط — إشارة ثانية غير اللون، فمن لا يميّز الألوان
   يعرف موضعه أيضاً. */
.dlv .dlv-nav-item.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 16px;
    height: 3px;
    border-radius: 999px;
    background: hsl(var(--dlv-primary));
}

/* ⚠️ RTL: translateX(50%) يزيح يميناً في اتجاه المستند العربيّ، فالتوسيط
   ينقلب حين تُعرض الشاشة بالإنجليزية. الاتجاهان مصرَّحان لئلّا يعتمد على الافتراض. */
[dir="ltr"] .dlv .dlv-nav-item.active::after { transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
    .dlv .dlv-nav-item,
    .dlv .dlv-nav-item .dlv-nav-pill,
    .dlv .dlv-nav-item svg { transition: none; }
    .dlv .dlv-nav-item:active .dlv-nav-pill { transform: none; }
}

/* ───────────────────────── الترويسة والبحث ───────────────────────── */
.dlv-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 2px 0; gap: 12px; }
.dlv-head h2 { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0; }
.dlv-head .sub { font-size: 13px; color: hsl(var(--dlv-ink-2)); margin-top: 2px; }

.dlv-avatar {
    width: 40px; height: 40px; min-height: 0; border-radius: 50%; border: 0;
    background: hsl(var(--dlv-primary-soft)); color: hsl(var(--dlv-primary));
    display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}

.dlv-search {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 var(--dlv-pad);
    border-radius: 16px; background: hsl(var(--dlv-card)); box-shadow: var(--dlv-shadow);
}
.dlv-search svg { width: 20px; height: 20px; color: hsl(var(--dlv-ink-3)); flex-shrink: 0; }
.dlv .dlv-search input {
    flex: 1; min-width: 0; min-height: 0; border: 0; outline: 0;
    background: transparent; font: inherit; font-size: 15px; padding: 0;
}
/* حلقة التركيز حول الحبّة كلّها — أيقونةً وحقلاً — لا حول الحقل وحده. */
.dlv-search:focus-within {
    box-shadow: var(--dlv-shadow), 0 0 0 3px hsl(var(--dlv-primary) / .35);
}

/* ⚠️ إلغاء الحلقة العامّة على الحقل نفسه.
   في app.css قاعدة عامّة: :focus-visible { box-shadow: 0 0 0 2px الخلفية,
   0 0 0 4px --ring } — تُرسم على الحقل داخل الحبّة, فتظهر **حلقتان متداخلتان**:
   مستطيل أزرق حادّ داخل الحبّة البيضاء. رآه المستخدم على جهازه, وقيس:
   box-shadow المحسوب على الحقل = rgb(6,9,24) 0 0 0 2px, rgb(26,133,255) 0 0 0 4px.

   ولماذا تظهر أصلاً باللمس لا بلوحة المفاتيح: حقول النصّ تُطابق :focus-visible
   عند أيّ تركيز — حتى باللمس — بحكم المواصفة, بخلاف الأزرار.

   ⭐ ولا يضيع مؤشّر التركيز: حلقة الحاوية أعلاه تحلّ محلّها, فالعدد واحد لا صفر. */
.dlv .dlv-search input:focus,
.dlv .dlv-search input:focus-visible {
    outline: 0;
    box-shadow: none;
}

/* ───────── segmented control ─────────
   ⚠️ min-height: 0 إلزاميّ: القاعدة العامّة في app.css تفرض 44px على كل button،
      فترتفع الأزرار من 40 إلى 44 وتفيض عن حاوية 48px. محدّد الصنف يتغلّب على
      محدّد العنصر فيثبت الإلغاء. (نفس الإلغاء موثّق ثلاث مرّات في app.css.) */
.dlv-seg { display: flex; padding: 4px; border-radius: 16px; background: hsl(var(--dlv-tint)); }
.dlv .dlv-seg button {
    flex: 1; height: 40px; min-height: 0; border: 0; border-radius: 12px;
    background: transparent; font-size: 12.5px; font-weight: 600;
    color: hsl(var(--dlv-ink-2)); display: flex; align-items: center;
    justify-content: center; gap: 5px; white-space: nowrap; padding: 0 4px; cursor: pointer;
}
.dlv .dlv-seg button.active {
    background: hsl(var(--dlv-card)); color: hsl(var(--dlv-ink));
    box-shadow: 0 1px 3px hsl(222 47% 10% / .10);
}
.dlv-seg .count {
    font-size: 11px; font-weight: 700; min-width: 20px; padding: 0 6px;
    border-radius: 999px; line-height: 20px; background: hsl(var(--dlv-card) / .7);
    color: hsl(var(--dlv-ink-2)); font-variant-numeric: tabular-nums;
}
.dlv .dlv-seg button.active .count { background: hsl(var(--dlv-primary)); color: hsl(var(--dlv-on-primary)); }

/* ───────────────────────── البطاقات ───────────────────────── */
.dlv-card { background: hsl(var(--dlv-card)); border-radius: 20px; padding: var(--dlv-pad); box-shadow: var(--dlv-shadow); }

.dlv .dlv-ocard {
    display: flex; flex-direction: column; gap: 6px; width: 100%;
    text-align: start; border: 0; min-height: 0; cursor: pointer;
    color: inherit; transition: transform .12s;
}
.dlv .dlv-ocard:active { transform: scale(.985); }

/* ⚠️ min-width:0 على الصفّ وأبنائه: ابن flex عرضه الافتراضي auto فلا ينكمش دون
   محتواه — ورقم طلب طويل مثل ORD-20260802-3A9B65 كان يفيض 12px عند 320px. */
.dlv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
/* حين يلتفّ الرقم إلى سطرين تبقى الشارة محاذيةً لأوّله لا سابحةً في الوسط */
.dlv-ocard > .dlv-row:first-child { align-items: flex-start; }
.dlv-ocard > .dlv-row:first-child > .dlv-chip { margin-top: 2px; }
.dlv-row > * { min-width: 0; }

.dlv-inv { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dlv-inv .lbl { font-size: 12px; color: hsl(var(--dlv-ink-2)); font-weight: 600; flex-shrink: 0; }
.dlv-inv .no {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 22px; font-weight: 600; direction: ltr; unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    /* ⚠️ لا قصّ ولا «...» على رقم مرجعيّ: المندوب يقارنه بورقة مطبوعة، ورقمٌ ناقص
       أسوأ من رقمٍ في سطرين. رقم الطلب الطويل ORD-20260802-3A9B65 يلتفّ عند 320px،
       ورقم الفاتورة القصير يبقى سطراً واحداً. */
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

/* الشارة والمجموع لا ينكمشان — همّا آخر ما يُقصّ */
.dlv-row > .dlv-chip, .dlv-row > .dlv-total { flex-shrink: 0; }
.dlv-row > .dlv-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlv-cust { font-weight: 600; font-size: 16px; line-height: 1.4; }
.dlv-meta { font-size: 13px; color: hsl(var(--dlv-ink-2)); }
.dlv-total { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dlv-total small { font-size: 11.5px; font-weight: 600; color: hsl(var(--dlv-ink-2)); margin-inline-start: 3px; }

/* شارة الحالة — النصّ بلون الحبر واللون الدلاليّ في النقطة والتظليل.
   نفس عقد OrderStatusChip كي لا يختلف معجم الحالة بين الشاشتين. */
.dlv-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    color: hsl(var(--dlv-ink)); background: hsl(var(--dlv-c) / .12);
}
.dlv-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--dlv-c)); }
.dlv-chip.processing { --dlv-c: var(--dlv-st-processing); }
.dlv-chip.shipped { --dlv-c: var(--dlv-st-shipped); }
.dlv-chip.delivered { --dlv-c: var(--dlv-st-delivered); }

/* ───────────────────────── التفاصيل ───────────────────────── */
.dlv-topbar { display: flex; align-items: center; gap: 8px; padding: 2px 0 0; }
.dlv-topbar .title { flex: 1; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlv .dlv-iconbtn {
    width: 44px; height: 44px; min-height: 0; border-radius: 14px; border: 0;
    background: hsl(var(--dlv-card)); box-shadow: var(--dlv-shadow);
    display: grid; place-items: center; cursor: pointer; color: inherit;
}
.dlv .dlv-iconbtn svg { width: 22px; height: 22px; }

.dlv-sect { font-size: 12.5px; font-weight: 700; color: hsl(var(--dlv-ink-2)); display: flex; justify-content: space-between; align-items: center; padding: 0 4px; gap: 8px; }

.dlv-name { font-size: 18px; font-weight: 700; line-height: 1.35; }
.dlv-addr { font-size: 13.5px; color: hsl(var(--dlv-ink-2)); margin-top: 2px; line-height: 1.5; }

.dlv-pref { display: flex; gap: 10px; align-items: flex-start; background: hsl(var(--dlv-tint)); border-radius: 14px; padding: 10px 12px; margin-top: 12px; }
.dlv-pref svg { width: 20px; height: 20px; color: hsl(var(--dlv-ink-2)); flex-shrink: 0; margin-top: 2px; }
.dlv-pref .pt { flex: 1; min-width: 0; }
.dlv-pref .pl { display: block; font-size: 11.5px; font-weight: 700; color: hsl(var(--dlv-ink-2)); }
.dlv-pref .pv { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.45; margin-top: 1px; }
.dlv-pref .pv.muted { font-weight: 500; color: hsl(var(--dlv-ink-3)); }
.dlv .dlv-pedit { border: 0; min-height: 0; background: transparent; color: hsl(var(--dlv-primary)); font-size: 13px; font-weight: 700; padding: 6px 4px; flex-shrink: 0; align-self: center; cursor: pointer; }

.dlv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.dlv .dlv-tile {
    height: 60px; min-height: 0; border-radius: 14px; border: 0;
    background: hsl(var(--dlv-tint)); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    font-size: 12.5px; font-weight: 600; color: hsl(var(--dlv-ink));
    text-decoration: none; cursor: pointer;
}
.dlv .dlv-tile svg { width: 20px; height: 20px; color: hsl(var(--dlv-primary)); }
.dlv .dlv-tile.primary { background: hsl(var(--dlv-primary)); color: hsl(var(--dlv-on-primary)); }
.dlv .dlv-tile.primary svg { color: hsl(var(--dlv-on-primary)); }

.dlv-callout { display: flex; gap: 10px; align-items: flex-start; background: hsl(34 90% 50% / .10); border-radius: 16px; padding: 12px 14px; }
.dlv-callout svg { width: 20px; height: 20px; color: hsl(var(--dlv-warn)); flex-shrink: 0; margin-top: 2px; }
.dlv-callout .t { font-size: 12px; font-weight: 700; color: hsl(28 80% 30%); }
.dlv-callout .m { font-size: 14px; line-height: 1.5; }

.dlv-banner { display: flex; gap: 10px; align-items: flex-start; background: hsl(var(--dlv-st-delivered) / .10); border-radius: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; }
.dlv-banner svg { width: 20px; height: 20px; color: hsl(var(--dlv-st-delivered)); flex-shrink: 0; margin-top: 2px; }

/* الأصناف مجمّعة بالمستودع */
.dlv-wh { padding: 10px 0 2px; }
.dlv-wh + .dlv-wh { border-top: 1px solid hsl(var(--dlv-line)); margin-top: 4px; }
.dlv-wh-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.dlv-wh-head svg { width: 18px; height: 18px; color: hsl(var(--dlv-ink-3)); }
.dlv-wh-head .cnt { margin-inline-start: auto; font-size: 12px; color: hsl(var(--dlv-ink-2)); font-weight: 600; }

.dlv-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 12px; padding: 9px 0; align-items: center; }
.dlv-item + .dlv-item { border-top: 1px dashed hsl(var(--dlv-line)); }
.dlv-item .nm { grid-column: 1; grid-row: 1; font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.dlv-item .pn { grid-column: 1; grid-row: 2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: hsl(var(--dlv-ink-3)); direction: ltr; unicode-bidi: isolate; text-align: end; }
.dlv-item .qty { grid-column: 2; grid-row: 1 / span 2; justify-self: end; min-width: 44px; height: 36px; display: grid; place-items: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; background: hsl(var(--dlv-tint)); border-radius: 10px; padding: 0 8px; }

.dlv-totals { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: hsl(var(--dlv-ink-2)); border-top: 1px solid hsl(var(--dlv-line)); padding-top: 12px; margin-top: 10px; }
.dlv-totals b { color: hsl(var(--dlv-ink)); font-size: 16px; font-variant-numeric: tabular-nums; }

/* صفوف المرفقات والسجلّ */
/* صفّ المرفق زرٌّ يُفتح — أهدافه ≥ 44px وسهمٌ يقول إنه يُنقر */
.dlv .dlv-att {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 62px; padding: 10px 0;
    border: 0; background: transparent; color: inherit;
    text-align: start; cursor: pointer;
    border-radius: 12px;
    transition: background .14s;
}
.dlv .dlv-att:hover { background: hsl(var(--dlv-tint) / .5); }
.dlv .dlv-att:active { background: hsl(var(--dlv-tint)); }
.dlv .dlv-att + .dlv-att { border-top: 1px solid hsl(var(--dlv-line)); border-radius: 0; }
.dlv .dlv-att .go { flex-shrink: 0; color: hsl(var(--dlv-ink-3)); display: flex; }
.dlv .dlv-att .go svg { width: 18px; height: 18px; }
.dlv .dlv-att .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlv-att .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: hsl(var(--dlv-tint)); color: hsl(var(--dlv-ink-2)); flex-shrink: 0; }
.dlv-att .ic svg { width: 20px; height: 20px; }
.dlv-att .tx { flex: 1; min-width: 0; }
.dlv-att .m { font-size: 14px; line-height: 1.45; }
.dlv-att .w { font-size: 12px; color: hsl(var(--dlv-ink-2)); display: flex; gap: 6px; }

.dlv-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; }
.dlv-kv + .dlv-kv { border-top: 1px solid hsl(var(--dlv-line)); }
.dlv-kv .k { font-size: 13.5px; color: hsl(var(--dlv-ink-2)); }
.dlv-kv .v { font-size: 14.5px; font-weight: 600; text-align: end; }

/* ───────────────────────── شريط الفعل ───────────────────────── */
.dlv-actionbar {
    position: absolute; bottom: 74px; inset-inline: 0;
    padding-block: 14px 18px;
    padding-inline:
        max(var(--dlv-gutter), env(safe-area-inset-left))
        max(var(--dlv-gutter), env(safe-area-inset-right));
    background: linear-gradient(to top, hsl(var(--dlv-bg)) 65%, hsl(var(--dlv-bg) / 0));
}
.dlv .dlv-btn {
    width: 100%; height: 56px; min-height: 0; border-radius: 18px; border: 0;
    background: hsl(var(--dlv-primary)); color: hsl(var(--dlv-on-primary));
    font-size: 16px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; gap: 8px; cursor: pointer;
    box-shadow: 0 12px 24px -12px hsl(var(--dlv-primary) / .7);
}
.dlv .dlv-btn svg { width: 22px; height: 22px; }
.dlv .dlv-btn.success { background: hsl(var(--dlv-success)); box-shadow: 0 12px 24px -12px hsl(var(--dlv-success) / .7); }
.dlv .dlv-btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.dlv .dlv-btn-ghost { height: 52px; min-height: 0; border-radius: 16px; border: 0; background: hsl(var(--dlv-tint)); font-weight: 600; font-size: 14px; color: hsl(var(--dlv-ink)); cursor: pointer; }
.dlv .dlv-danger-btn { width: 100%; height: 50px; min-height: 0; border-radius: 14px; border: 0; background: hsl(var(--dlv-danger) / .10); color: hsl(var(--dlv-danger)); font-size: 15px; font-weight: 700; cursor: pointer; }

/* ───────────────────────── الورقة السفلية ───────────────────────── */
.dlv-scrim { position: absolute; inset: 0; background: hsl(222 47% 8% / .42); display: flex; align-items: flex-end; z-index: 20; }
.dlv-sheet { width: 100%; background: hsl(var(--dlv-card)); border-radius: 28px 28px 0 0; padding: 10px calc(var(--dlv-pad) + 2px) 24px; display: flex; flex-direction: column; gap: 14px; max-height: 88%; overflow-y: auto; }
.dlv-grip { width: 40px; height: 4px; border-radius: 2px; background: hsl(var(--dlv-line)); margin: 0 auto 2px; flex-shrink: 0; }
.dlv-sheet h3 { font-size: 19px; font-weight: 700; margin: 0; }
.dlv-sheet p { margin: 0; font-size: 14px; color: hsl(var(--dlv-ink-2)); line-height: 1.55; }
.dlv-sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }

.dlv-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dlv .dlv-opt {
    border: 0; min-height: 0; border-radius: 16px; background: hsl(var(--dlv-tint));
    padding: 14px 10px; display: flex; flex-direction: column; align-items: center;
    gap: 4px; text-align: center; cursor: pointer; color: inherit;
    box-shadow: inset 0 0 0 2px transparent;
}
.dlv .dlv-opt svg { width: 24px; height: 24px; color: hsl(var(--dlv-ink-2)); }
.dlv-opt .ttl { font-size: 14.5px; font-weight: 700; }
.dlv-opt .dsc { font-size: 12px; color: hsl(var(--dlv-ink-2)); line-height: 1.4; }
.dlv .dlv-opt.on { background: hsl(var(--dlv-primary-soft)); box-shadow: inset 0 0 0 2px hsl(var(--dlv-primary)); }
.dlv .dlv-opt.on svg, .dlv .dlv-opt.on .ttl { color: hsl(var(--dlv-primary)); }

.dlv-fw { display: flex; flex-direction: column; gap: 6px; }
.dlv-fl { font-size: 12.5px; font-weight: 600; color: hsl(var(--dlv-ink-2)); line-height: 1.45; }
.dlv-req { font-size: 11.5px; color: hsl(var(--dlv-danger)); font-weight: 700; }

/* نظير dlv-req للاختياريّ — بلا لون تحذير, فالغياب ليس خطأً.
   ⚠️ ولا يُستعمل dlv-opt: ذاك بطاقة اختيار طريقة الشحن, وسيرث تنسيقها كاملاً. */
.dlv-hint { font-size: 11.5px; color: hsl(var(--dlv-ink-3)); font-weight: 600; }

/* ⚠️ الشكل مربوط بالصنف .dlv-field, ونسيانُه يترك حقلاً عارياً لا يُرى — وقع
   فعلاً في حقلَي لوح الشحن والتوصيل معاً. لذا يأخذ كل حقل داخل اللوح الشكلَ نفسه
   ولو نُسي الصنف: العطل يصير مستحيلاً لا مُصلَحاً مرّة واحدة. */
.dlv .dlv-field,
.dlv .dlv-sheet textarea { border: 0; border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 15px; width: 100%; resize: none; min-height: 76px; background: hsl(var(--dlv-tint)); color: inherit; }
.dlv input.dlv-field,
.dlv .dlv-sheet input:not([type="file"]) { min-height: 0; height: 50px; resize: none; border: 0; border-radius: 14px; padding: 0 14px; font: inherit; font-size: 15px; width: 100%; background: hsl(var(--dlv-tint)); color: inherit; }
/* ═══ حلقة تركيز واحدة لكل حقل داخل شاشات المندوب ═══

   ⚠️ في app.css قاعدة عامّة لكل اللوحة:
        :focus-visible { box-shadow: 0 0 0 2px الخلفية, 0 0 0 4px --ring }
      وهي تُرسم على **الحقل نفسه**. فأيّ حقل هنا يرث إطاراً أزرق حادّاً لم يُصمَّم
      له, ومع حاوية ترسم حلقتها الخاصّة تظهر حلقتان متداخلتان.

   القاعدة أدناه تحسم الأمر لكل input و textarea داخل .dlv مرّةً واحدة, فلا يتكرّر
   العطل مع كل حقل جديد يُضاف. والحاويات التي ترسم حلقتها بنفسها تُلغي حلقة الحقل
   بمحدّد أقوى (انظر .dlv-search أعلاه). */
.dlv input:focus, .dlv input:focus-visible,
.dlv textarea:focus, .dlv textarea:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px hsl(var(--dlv-primary) / .35);
}

.dlv .dlv-capture {
    height: 128px; min-height: 0; border: 2px dashed hsl(214 30% 82%); border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: hsl(var(--dlv-ink-2)); font-size: 13.5px; font-weight: 600;
    background: transparent; width: 100%; cursor: pointer;
}
.dlv .dlv-capture svg { width: 28px; height: 28px; color: hsl(var(--dlv-primary)); }
.dlv .dlv-capture.done { border-style: solid; border-color: hsl(var(--dlv-success) / .5); background: hsl(var(--dlv-success) / .07); color: hsl(var(--dlv-ink)); }
.dlv .dlv-capture.done svg { color: hsl(var(--dlv-success)); }

.dlv-effect { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; background: hsl(var(--dlv-tint)); border-radius: 14px; padding: 10px 12px; line-height: 1.5; }
.dlv-effect svg { width: 20px; height: 20px; flex-shrink: 0; color: hsl(var(--dlv-success)); margin-top: 1px; }
.dlv-effect.pick { background: hsl(var(--dlv-primary-soft)); }
.dlv-effect.pick svg { color: hsl(var(--dlv-primary)); }
.dlv-effect.none svg { color: hsl(var(--dlv-ink-3)); }

/* ───────────────────────── حالات ───────────────────────── */
.dlv-empty { text-align: center; padding: 44px 12px; color: hsl(var(--dlv-ink-2)); font-size: 14px; }
.dlv-empty b { display: block; color: hsl(var(--dlv-ink)); font-size: 15.5px; margin-bottom: 4px; }
.dlv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.dlv-offline { display: flex; align-items: center; gap: 8px; background: hsl(34 90% 50% / .16); color: hsl(28 80% 26%); font-size: 12.5px; font-weight: 600; padding: 8px 16px; flex-shrink: 0; }
.dlv-offline svg { width: 16px; height: 16px; flex-shrink: 0; }

/* السجلّ */
.dlv-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dlv-sum .s { background: hsl(var(--dlv-card)); border-radius: 16px; padding: 12px 8px; text-align: center; box-shadow: var(--dlv-shadow); }
.dlv-sum .n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dlv-sum .l { font-size: 11.5px; color: hsl(var(--dlv-ink-2)); font-weight: 600; margin-top: 2px; }

/* حسابي */
.dlv-acc-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 4px; }
.dlv-acc-head .av { width: 68px; height: 68px; border-radius: 50%; background: hsl(var(--dlv-primary-soft)); color: hsl(var(--dlv-primary)); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.dlv-acc-head .nm { font-size: 19px; font-weight: 700; }
.dlv-acc-head .rl { font-size: 13px; color: hsl(var(--dlv-ink-2)); }
.dlv-ver { text-align: center; font-size: 12px; color: hsl(var(--dlv-ink-3)); padding-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   إعادة تلوين خيط الرسائل المشترك.

   ⭐ SupplierOrderChat.razor يُعاد كما هو بلا تعديل ولا معلمة Variant: كل أصنافه
      ببادئة soc-، فيكفي تجاوزها هنا مُنطاقةً تحت .dlv. منطق واحد، جلدان.
   ═══════════════════════════════════════════════════════════════════════════ */
.dlv .soc-bubble { border-radius: 14px; }
.dlv .soc-avatar { width: 30px; height: 30px; }

/* ⚠️ الحاوية بلا خلفية: خلفيةٌ عليها تصنع صندوقاً ثانياً خلف الحقل — والحقل نفسه
   له خلفيته وإطاره، فيظهران متداخلين. الشكل كلّه على الحقل وحده. */
.dlv .soc-composer { background: transparent; padding: 0; border: 0; }
.dlv .soc-composer-row { gap: 8px; }

.dlv .soc-input,
.dlv .soc-composer .form-input {
    background: hsl(var(--dlv-tint)) !important;
    border: 0 !important;
    border-radius: 14px !important;
    min-height: 46px;
    padding: 12px 14px !important;
    font-size: 15px;
    color: hsl(var(--dlv-ink)) !important;
    box-shadow: none !important;
}
.dlv .soc-input:focus,
.dlv .soc-composer .form-input:focus {
    outline: 0;
    box-shadow: 0 0 0 3px hsl(var(--dlv-primary) / .18) !important;
}

.dlv .soc-composer .btn-primary {
    min-height: 46px;
    height: 46px;
    border-radius: 14px;
    padding: 0 18px;
    background: hsl(var(--dlv-primary));
    color: hsl(var(--dlv-on-primary));
    border: 0;
    font-weight: 700;
}

/* ⚠️ الخيط على الحاسب صندوق بارتفاع أقصى 390px وتمرير داخليّ. على الجوّال هذا
   «تمرير داخل تمرير»: الإصبع تحرّك الخيط بدل الصفحة فيعلق المستخدم. الصفحة نفسها
   هي الممرّر هنا، والخيط يمتدّ بطوله. */
.dlv .soc-thread {
    gap: 10px;
    max-height: none !important;
    overflow-y: visible !important;
}

/* ⚠️ تلميح اختصارات لوحة المفاتيح (Enter إرسال · Shift+Enter سطر جديد) لا معنى له
   على جوّال بلا لوحة مفاتيح فيزيائية — وهو يشغل سطراً كاملاً تحت حقل الكتابة. */
.dlv .soc-hint { display: none !important; }

/* الوضع الداكن: اللوحة تقلب رموزها، وشاشة المندوب تتبعها */
body:has(.dlv).dark,
.dark body:has(.dlv) {
    --dlv-bg: 222 47% 8%;
    --dlv-card: 222 40% 12%;
    --dlv-ink: 210 40% 96%;
    --dlv-ink-2: 215 20% 70%;
    --dlv-ink-3: 215 16% 58%;
    --dlv-line: 217 30% 22%;
    --dlv-tint: 217 32% 17%;
    --dlv-primary: 217 91% 60%;
    --dlv-primary-soft: 217 50% 20%;
    --dlv-on-primary: 222 47% 8%;
    --dlv-shadow: 0 1px 2px hsl(0 0% 0% / .3), 0 10px 30px -18px hsl(0 0% 0% / .6);

    /* في الداكن تنقلب العلاقة: اللمعة **أفتح** من الأساس لا أغمق */
    --dlv-skel-base: 217 30% 20%;
    --dlv-skel-hi: 217 26% 32%;
}

/* الشريط السفليّ في الداكن: الظلّ الأسود لا يبين على خلفية سوداء، فيعود الخطّ
   الشعريّ ليفصل الشريط عن المحتوى — وإلّا ذاب أحدهما في الآخر. */
body:has(.dlv).dark .dlv-nav,
.dark body:has(.dlv) .dlv-nav {
    border-top-color: hsl(var(--dlv-line));
    box-shadow: none;
}


/* ═══════════════ حالة التحميل ═══════════════
   هيكل عظميّ بشكل المحتوى القادم لا كلمة «جارٍ التحميل»: العين تعرف أين سيقع
   كلّ شيء فلا تقفز الصفحة عند وصول البيانات.

   ⚠️ الوميض على خلفية السطر نفسه (background-position) لا على عنصر ::after فوقه:
      الطبقة الفوقية كانت تُلوَّن بلون البطاقة، وهو في الوضع الليلي **أغمق** من
      السطر — فتظهر بقعة داكنة تمرّ لا لمعة. واللون الآن رمزٌ مستقلّ أفتح من
      السطر في الثيمين معاً. */

.dlv-skel {
    border-radius: 20px;
    background: hsl(var(--dlv-card));
    box-shadow: var(--dlv-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlv-skel-line {
    height: 12px;
    border-radius: 6px;

    /* شريط لامع يعبر السطر: عرض الخلفية ثلاثة أضعاف الخانة، وموضعها هو ما يتحرّك */
    background-image: linear-gradient(
        90deg,
        hsl(var(--dlv-skel-base)) 0%,
        hsl(var(--dlv-skel-base)) 35%,
        hsl(var(--dlv-skel-hi)) 50%,
        hsl(var(--dlv-skel-base)) 65%,
        hsl(var(--dlv-skel-base)) 100%);
    background-size: 300% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;

    animation: dlv-shimmer 1.5s ease-in-out infinite;
}

.dlv-skel-line.w-40 { width: 40%; }
.dlv-skel-line.w-60 { width: 60%; }
.dlv-skel-line.w-80 { width: 80%; }
.dlv-skel-line.tall { height: 22px; }

/* تأخير متدرّج: الموجة تنزل من سطر لآخر بدل أن تومض الأسطر معاً */
.dlv-skel-line:nth-child(2) { animation-delay: .15s; }
.dlv-skel-line:nth-child(3) { animation-delay: .3s; }
.dlv-skel-line:nth-child(4) { animation-delay: .45s; }

@keyframes dlv-shimmer {
    to { background-position: -150% 0; }
}

/* البطاقات نفسها تتنفّس بخفّة فيبدو الانتظار حيّاً لا مجمَّداً */
.dlv-skel { animation: dlv-breathe 2.6s ease-in-out infinite; }
.dlv-skel:nth-of-type(2) { animation-delay: .2s; }
.dlv-skel:nth-of-type(3) { animation-delay: .4s; }
@keyframes dlv-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .88; } }

/* لمن طلب تقليل الحركة: لا مرور جانبيّ (هو ما يزعج الحسّ التوازنيّ)، لكن ليس
   سكوناً تامّاً — السكون يجعل الشاشة تبدو معلّقة. يبقى نبض إضاءة بطيء في مكانه
   يقول «ما زال يحمّل» بلا أي إزاحة.

   ⚠️ ويندوز يُبلغ المتصفّح بـreduce حين تُطفأ «إظهار الحركات في ويندوز»، وكثيرون
      يطفئونها للأداء بلا قصد — فالسكون التامّ هنا يصيب مستخدمين لم يطلبوه. */
@media (prefers-reduced-motion: reduce) {
    .dlv-skel-line {
        background-position: 50% 0;
        animation: dlv-skel-pulse 2s ease-in-out infinite;
    }
    .dlv-skel { animation: none; }
}

@keyframes dlv-skel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* دوّار صغير داخل الأزرار أثناء الإرسال */
.dlv-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid hsl(var(--dlv-on-primary) / .35); border-top-color: hsl(var(--dlv-on-primary)); animation: dlv-rot .7s linear infinite; }
@keyframes dlv-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dlv-spin { animation-duration: 2.4s; } }

/* ═══════════════ صفّ إعداد ═══════════════ */
.dlv .dlv-rowbtn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; min-height: 0; background: transparent; padding: 13px 0; font-size: 14.5px; font-weight: 600; text-align: start; color: inherit; cursor: pointer; }
.dlv .dlv-rowbtn + .dlv-rowbtn { border-top: 1px solid hsl(var(--dlv-line)); }
.dlv .dlv-rowbtn .val { font-size: 13px; font-weight: 600; color: hsl(var(--dlv-ink-2)); display: inline-flex; align-items: center; gap: 6px; }
.dlv .dlv-rowbtn svg { width: 18px; height: 18px; }

/* زرّ الخروج رابطٌ لا زرّ (مسار /logout المعتمد) فيحتاج محاذاة نصّه */
.dlv .dlv-logout { display: flex; align-items: center; justify-content: center; text-decoration: none; }


/* ═══════════════ رفع إيصال الشحن ═══════════════
   label لا button: الـ InputFile بداخله مخفيّ، والنقر على أي موضع يفتح الكاميرا. */
.dlv .dlv-capture {
    position: relative;
    min-height: 116px;
    border: 2px dashed hsl(214 30% 82%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    text-align: center;
    color: hsl(var(--dlv-ink-2));
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.dlv .dlv-capture svg { width: 28px; height: 28px; color: hsl(var(--dlv-primary)); }
.dlv .dlv-capture:hover { border-color: hsl(var(--dlv-primary) / .6); background: hsl(var(--dlv-primary) / .04); }

/* حقل الملف يغطّي المربّع كلّه شفّافاً: منطقة النقر هي المربّع لا زرّ المتصفّح */
.dlv .dlv-capture input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dlv .dlv-capture.done {
    border-style: solid;
    border-color: hsl(var(--dlv-success) / .55);
    background: hsl(var(--dlv-success) / .07);
    color: hsl(var(--dlv-ink));
}
.dlv .dlv-capture.done svg { color: hsl(var(--dlv-success)); }

.dlv .dlv-capture.busy { border-color: hsl(var(--dlv-primary) / .5); background: hsl(var(--dlv-primary) / .05); }
.dlv .dlv-capture.busy input[type=file] { pointer-events: none; }

/* دوّار داكن للاستعمال على خلفية فاتحة (داخل مربّع الرفع) */
.dlv-spin.dark {
    border-color: hsl(var(--dlv-primary) / .28);
    border-top-color: hsl(var(--dlv-primary));
}

.dark .dlv .dlv-capture { border-color: hsl(var(--dlv-line)); }


/* ═══════════════════════════════════════════════════════════════════════════
   لافتة إعادة الاتصال على شاشة المندوب

   ⚠️ في اللوحة تظهر أعلى الشاشة بعرض 600px — وعلى الجوّال تغطّي الترويسة والبحث
      والتبويبات فيفقد المندوب موضعه. هنا تنزل فوق شريط التنقّل: تُقرأ ولا تحجب.
   ═══════════════════════════════════════════════════════════════════════════ */

body:has(.dlv) .rc-panel {
    top: auto;
    /* 74 ارتفاع شريط التنقّل + هامش، ومعه الحافّة الآمنة على أجهزة الشقّ */
    bottom: calc(74px + 14px + env(safe-area-inset-bottom));
    width: calc(100vw - 32px);
    max-width: 520px;

    border: 0;
    border-radius: 20px;
    padding: 16px;
    gap: 10px;

    background: hsl(var(--dlv-card));
    color: hsl(var(--dlv-ink));
    box-shadow: 0 2px 6px hsl(222 47% 10% / .10), 0 18px 40px -12px hsl(222 47% 10% / .35);

    /* تدخل من الأسفل لا من الأعلى — من حيث ستستقرّ */
    transform: translateY(14px) scale(.98);
}
body:has(.dlv) #components-reconnect-modal.rc-verbose .rc-panel,
body:has(.dlv) #components-reconnect-modal.rc-fatal .rc-panel {
    transform: none;
}

body:has(.dlv) .rc-title { font-size: 15px; font-weight: 700; line-height: 1.4; }
body:has(.dlv) .rc-desc { font-size: 13px; line-height: 1.55; color: hsl(var(--dlv-ink-2)); }
body:has(.dlv) .rc-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
body:has(.dlv) .rc-meta { font-size: 12px; color: hsl(var(--dlv-ink-2)); }

body:has(.dlv) .rc-btn {
    min-height: 0;
    height: 48px;
    border-radius: 14px;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    width: 100%;
}
body:has(.dlv) .rc-btn--primary {
    background: hsl(var(--dlv-primary));
    color: hsl(var(--dlv-on-primary));
}
body:has(.dlv) .rc-actions { display: flex; gap: 8px; }

body:has(.dlv) .rc-close {
    width: 36px; height: 36px; min-height: 0;
    border-radius: 10px; border: 0;
    background: hsl(var(--dlv-tint)); color: hsl(var(--dlv-ink-2));
}

/* الشريط العلويّ الرفيع يبقى — هو الإشارة الأولى بلا حجب */
body:has(.dlv) .rc-bar { z-index: 99997; }


/* ═══════════════ حجم النصّ في خيط الرسائل ═══════════════
   ⚠️ مقيس على الشاشة: وقتُ الرسالة كان 9.75px ونصّ الحدث 10.5px — أصغر من أن
      يُقرأ على جوّال بذراع ممدودة. الحدّ الأدنى المعمول به 12px، والنصّ الأساسي 14. */
.dlv .soc-event-title { font-size: 13.5px; }
.dlv .soc-event-note,
.dlv .soc-daysep,
.dlv .soc-edited { font-size: 12px; }
.dlv .soc-time,
.dlv [class*="soc-"] time { font-size: 12px; }
.dlv .soc-bubble { font-size: 14px; line-height: 1.55; }
.dlv .soc-event { font-size: 12.5px; }


/* ═══════════════ صفّ السجلّ ═══════════════ */
.dlv .dlv-hrow {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 64px; padding: 11px 0;
    border: 0; background: transparent; color: inherit;
    text-align: start; cursor: pointer; border-radius: 12px;
    transition: background .14s;
}
.dlv .dlv-hrow:hover { background: hsl(var(--dlv-tint) / .5); }
.dlv .dlv-hrow + .dlv-hrow { border-top: 1px solid hsl(var(--dlv-line)); border-radius: 0; }

.dlv .dlv-hrow .hi {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center;
    background: hsl(var(--dlv-c) / .13); color: hsl(var(--dlv-c));
}
.dlv .dlv-hrow .hi svg { width: 18px; height: 18px; }

.dlv .dlv-hrow .ht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dlv .dlv-hrow .h1 { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.dlv .dlv-hrow .h2 { font-size: 12.5px; color: hsl(var(--dlv-ink-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlv .dlv-hrow .h3 { font-size: 13.5px; font-weight: 700; color: hsl(var(--dlv-ink-2)); font-variant-numeric: tabular-nums; flex-shrink: 0; }