/* ==== from index.html <style data-wadih-shell> (v435 split) ==== */
/* ==========================================================================
   App Shell — Bottom Navigation "Layered Depth" (Lovable handoff) — المرحلة 5.
   المصدر البصري الوحيد لشريط التنقّل على الجوال (<768px). قرار [أ2]: يحلّ محلّ تصميم
   v5 للجوال كليًا (لا طبقتين، لا دمج). قرار [ج1]: بلا مساس بالأيقونات/التسميات/الترتيب.
   الديسكتوب (>=768px) خارج النطاق تمامًا — يبقى Desktop Sidebar (v5) كما هو.
   تنفيذ بصري بحت: لا JS · لا منطق · لا id · لا Route · لا Handler · لا صلاحية · لا نص.
   مطابق حرفيًا لـ bottom-nav.tsx (SPEC 2-3) عبر رموز --wd-* الرسمية (نفس قيم الشاشات المجمّدة).
   ========================================================================== */
#tabs{
  --wd-background:oklch(0.99 0.003 250); --wd-primary:oklch(0.42 0.09 245);
  --wd-muted-fg:oklch(0.52 0.02 260); --wd-border:oklch(0.92 0.008 255);
  --wd-ring:oklch(0.55 0.09 245); --wd-e2:0 4px 12px oklch(0 0 0 / 0.06);
  --wd-radius-lg:20px; --wd-blur-glass:12px;
  --wd-space-1:4px; --wd-space-2:8px; --wd-space-3:12px;
  --wd-motion-fast:120ms; --wd-motion-base:180ms; --wd-ease:cubic-bezier(0.2,0,0,1);
}
[data-theme="dark"] #tabs{
  --wd-background:oklch(0.16 0.02 260); --wd-primary:oklch(0.72 0.10 240);
  --wd-muted-fg:oklch(0.72 0.02 260); --wd-border:oklch(1 0 0 / 8%);
  --wd-ring:oklch(0.72 0.10 240);
}
/* الجوال فقط (<768px): الديسكتوب Sidebar لا يُمَس. */
@media (max-width:767.98px){
  /* الحاوية (nav) — SPEC §2: زجاج، حد علوي، ظل e2، ممتد من الحافة للحافة */
  #tabs{
    background:color-mix(in oklab, var(--wd-background) 82%, transparent)!important;
    -webkit-backdrop-filter:saturate(140%) blur(var(--wd-blur-glass))!important;
    backdrop-filter:saturate(140%) blur(var(--wd-blur-glass))!important;
    border-top:1px solid var(--wd-border)!important; border-bottom:none!important;
    border-radius:0!important; box-shadow:var(--wd-e2)!important;
    padding:0 0 env(safe-area-inset-bottom,0px)!important;
  }
  /* القائمة (ul) — SPEC §2: max 820 وسط، شبكة 4 أعمدة، gap space-1، حشوة space-2 space-3 */
  #tabs .tabs-inner{
    max-width:820px!important; width:100%; margin:0 auto!important;
    display:grid!important; grid-template-columns:repeat(4,1fr)!important;
    gap:var(--wd-space-1)!important; padding:var(--wd-space-2) var(--wd-space-3)!important;
  }
  /* NavItem (Link) — SPEC §3: هدف لمس 44px، عمود، حشوة space-2 space-1، غير نشط muted */
  #tabs .tab{
    min-width:0; min-height:44px!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    background:transparent!important; border:none!important; box-shadow:none!important;
    border-radius:var(--wd-radius-lg)!important; padding:var(--wd-space-2) var(--wd-space-1)!important;
    color:var(--wd-muted-fg)!important; font-size:11px!important; font-weight:500!important; line-height:1;
    transition:background var(--wd-motion-fast) var(--wd-ease), transform var(--wd-motion-fast) var(--wd-ease);
  }
  #tabs .tab .tab-ar{
    display:flex!important; flex-direction:column!important; align-items:center!important;
    justify-content:center!important; gap:var(--wd-space-1)!important;
    font-size:11px!important; line-height:1.3; min-width:0; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* الأيقونة داخل حبّة 56x36 (padding مع content-box) — غير نشطة: شفافة، stroke 1.75 */
  #tabs .tab .tab-ar svg{
    width:20px!important; height:20px!important; margin:0!important; box-sizing:content-box!important;
    padding:8px 18px!important; border-radius:9999px!important; background:transparent;
    stroke-width:1.75; color:inherit;
    transition:background var(--wd-motion-base) var(--wd-ease), color var(--wd-motion-base) var(--wd-ease);
  }
  /* النشط — SPEC §3: لون primary، وزن 600، حبّة primary/12، stroke 2.25 */
  #tabs .tab.active{ color:var(--wd-primary)!important; font-weight:600!important; background:transparent!important; box-shadow:none!important; border-radius:var(--wd-radius-lg)!important; }
  #tabs .tab.active .tab-ar svg{
    background:color-mix(in oklab, var(--wd-primary) 12%, transparent)!important;
    color:var(--wd-primary)!important; stroke-width:2.25;
  }
  /* Pressed: scale(0.96) — Focus: حلقة 2px --ring */
  #tabs .tab:active{ transform:scale(.96); }
  #tabs .tab:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
}
/* ==== from index.html <style data-wadih-sheets> (v435 split) ==== */
/* ==========================================================================
   Bottom Sheets "Layered Depth" (Lovable handoff 6.1) — BottomSheet + AddFamilySheet.
   إعادة تصميم بصري لِـ#addFamSheet مطابقةً لـ bottom-sheet.tsx + add-family-sheet.tsx.
   رموز --wd-* الرسمية فقط (نفس قيم الشاشات المجمّدة). لا HEX. النطاق محصور بـ#addFamSheet.
   مطابقة الرموز غير الموجودة رسميًا (مُصرَّح بها): shadow-e4→--wd-e3 (أعمق ظل رسمي) ·
   blur-overlay→--wd-blur-glass (12px، الرمز الرسمي الوحيد) · space-4→16px (سلّم 4px الرسمي، سطر 670) ·
   z-modal→z الحالي للـoverlay (100002، دون تغيير). لا مساس بمنطق الحفظ/التخزين.
   ========================================================================== */
#addFamSheet{
  --wd-radius-sm:6px; --wd-radius-md:10px; --wd-radius-lg:14px; --wd-radius-xl:18px; --wd-radius-2xl:22px;
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-success:oklch(0.58 0.14 155); --wd-info:oklch(0.60 0.10 235);
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e3:0 12px 32px oklch(0 0 0 / 0.10);
  --wd-space-1:4px; --wd-space-2:8px; --wd-space-3:12px; --wd-space-4:16px; --wd-space-6:24px;
  --wd-blur-glass:12px;
  --wd-motion-fast:120ms; --wd-motion-base:180ms; --wd-motion-medium:240ms;
  --wd-ease:cubic-bezier(0.2,0,0,1); --wd-ease-emph:cubic-bezier(0.3,0,0,1);
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
[data-theme="dark"] #addFamSheet{
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 260);
  --wd-card:oklch(0.20 0.02 260); --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-success:oklch(0.72 0.15 155); --wd-info:oklch(0.72 0.11 235);
}
@media screen{
  /* Overlay (backdrop) — SPEC: tint background/40% + blur-overlay ; جوال: bottom sheet */
  #addFamSheet.ds-dialog-overlay{
    background:color-mix(in oklab, var(--wd-background) 40%, transparent)!important;
    -webkit-backdrop-filter:blur(var(--wd-blur-glass))!important; backdrop-filter:blur(var(--wd-blur-glass))!important;
    align-items:flex-end!important; justify-content:center!important; padding:0!important;
    font-family:var(--wd-font-arabic);
  }
  /* Content (sheet) — SPEC: card, border-top, radius-2xl علوي، shadow-e4(=e3)، max-h 92dvh، flex column */
  #addFamSheet .sheet.ds-sheet{
    background:var(--wd-card)!important; color:var(--wd-foreground)!important;
    width:100%!important; max-width:100%!important; margin:0!important;
    border:none!important; border-top:1px solid var(--wd-border)!important;
    border-radius:var(--wd-radius-2xl) var(--wd-radius-2xl) 0 0!important;
    box-shadow:var(--wd-e3)!important;
    max-height:92dvh!important; padding:0!important; overflow:hidden!important;
    display:flex!important; flex-direction:column!important;
    animation:sheetUp var(--wd-motion-medium) var(--wd-ease-emph)!important;
  }
  /* Handle — SPEC: 4×36، radius كامل، لون border، pt-2 */
  #addFamSheet .sheet-handle{
    flex:0 0 auto!important; width:36px!important; height:4px!important;
    border-radius:999px!important; background:var(--wd-border)!important; margin:8px auto 0!important;
  }
  /* Header — padding space-3/space-4، حد سفلي border/60% */
  #addFamSheet .sheet-head{
    flex:0 0 auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important;
    gap:var(--wd-space-3)!important; margin:0!important;
    padding:var(--wd-space-3) var(--wd-space-4)!important;
    border-bottom:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important;
  }
  #addFamSheet .sheet-title{
    min-width:0; font-size:15px!important; font-weight:700!important; color:var(--wd-foreground)!important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #addFamSheet .sheet-title .en{ display:inline!important; margin-inline-start:4px!important; font-size:11px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; opacity:1!important; font-family:var(--wd-font-arabic)!important; letter-spacing:0!important; }
  /* زر الإغلاق — 44×44، radius-md، hover muted، focus ring */
  #addFamSheet #closeAddFamSheet.icon-btn{
    width:44px!important; min-width:44px!important; height:44px!important; flex:0 0 auto!important;
    border-radius:var(--wd-radius-md)!important; background:transparent!important; border:none!important; box-shadow:none!important;
    color:var(--wd-muted-fg)!important; display:grid!important; place-items:center!important;
    transition:background var(--wd-motion-fast) var(--wd-ease)!important;
  }
  #addFamSheet #closeAddFamSheet.icon-btn:hover{ background:var(--wd-muted)!important; }
  #addFamSheet #closeAddFamSheet.icon-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  #addFamSheet #closeAddFamSheet.icon-btn svg{ width:16px!important; height:16px!important; stroke-width:1.75; }
  /* Body: menu (قائمة) — flex:1 scroll، padding space-4، gap space-3 عبر هوامش البطاقات */
  #addFamSheet #sheetMenu{
    flex:1 1 auto!important; min-height:0; overflow-y:auto!important; overscroll-behavior:contain;
    padding:var(--wd-space-4)!important;
  }
  #addFamSheet #sheetMenu .opt-card{ margin:0 0 var(--wd-space-3) 0!important; }
  #addFamSheet #sheetMenu .opt-card:last-child{ margin-bottom:0!important; }
  /* Body: panel — flex column: sf-body (scroll) + sf-foot (sticky) */
  #addFamSheet #sheetPanel{ flex:1 1 auto!important; min-height:0!important; flex-direction:column!important; padding:0!important; }
  #addFamSheet .sf-body{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain!important; padding:var(--wd-space-4)!important; }
  /* Footer — SPEC: يظهر فقط بإجراء رئيسي؛ حد علوي، خلفية، safe-area، محاذاة نهاية */
  #addFamSheet .sf-foot{
    flex:0 0 auto!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:var(--wd-space-2)!important;
    padding:var(--wd-space-3) var(--wd-space-4)!important;
    padding-bottom:calc(var(--wd-space-3) + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important;
    background:color-mix(in oklab, var(--wd-card) 92%, var(--wd-background))!important;
  }
  #addFamSheet .sf-foot .btn{ width:auto!important; margin:0!important; flex:0 0 auto!important; }
  #addFamSheet .sf-foot .btn.btn-block{ width:auto!important; }
  /* OptCard — radius-xl، border، shadow-e1، hover border-primary، active scale .99 */
  #addFamSheet .opt-card{
    display:flex!important; align-items:center!important; gap:var(--wd-space-3)!important;
    width:100%!important; text-align:right!important;
    background:var(--wd-card)!important; border:1px solid var(--wd-border)!important;
    border-radius:var(--wd-radius-xl)!important; padding:var(--wd-space-3)!important;
    box-shadow:var(--wd-e1)!important; cursor:pointer;
    transition:transform var(--wd-motion-base) var(--wd-ease), border-color var(--wd-motion-base) var(--wd-ease), box-shadow var(--wd-motion-base) var(--wd-ease)!important;
  }
  #addFamSheet .opt-card:hover{ border-color:var(--wd-primary)!important; box-shadow:var(--wd-e1)!important; }
  #addFamSheet .opt-card:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  #addFamSheet .opt-card:active{ transform:scale(.99)!important; }
  #addFamSheet .opt-card .opt-ic{
    width:44px!important; height:44px!important; flex:0 0 44px!important;
    border-radius:var(--wd-radius-lg)!important; display:grid!important; place-items:center!important;
  }
  #addFamSheet .opt-card[data-opt="single"] .opt-ic{ background:color-mix(in oklab, var(--wd-success) 14%, transparent)!important; color:var(--wd-success)!important; }
  #addFamSheet .opt-card[data-opt="photo"]  .opt-ic{ background:color-mix(in oklab, var(--wd-info) 14%, transparent)!important; color:var(--wd-info)!important; }
  #addFamSheet .opt-card[data-opt="bulk"]   .opt-ic{ background:color-mix(in oklab, var(--wd-primary) 14%, transparent)!important; color:var(--wd-primary)!important; }
  #addFamSheet .opt-card[data-opt="excel"]  .opt-ic{ background:color-mix(in oklab, var(--wd-success) 14%, transparent)!important; color:var(--wd-success)!important; }
  #addFamSheet .opt-card .opt-ic svg{ width:20px!important; height:20px!important; stroke-width:1.75; }
  #addFamSheet .opt-card .opt-txt{ flex:1 1 auto!important; min-width:0!important; }
  #addFamSheet .opt-card .opt-t{ font-size:14px!important; font-weight:700!important; color:var(--wd-foreground)!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #addFamSheet .opt-card .opt-d{ font-size:12px!important; font-weight:400!important; color:var(--wd-muted-fg)!important; margin-top:2px!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #addFamSheet .opt-card .opt-arrow{ width:16px!important; height:16px!important; flex:0 0 16px!important; color:var(--wd-muted-fg)!important; transition:transform var(--wd-motion-base) var(--wd-ease); }
  #addFamSheet .opt-card:hover .opt-arrow{ transform:translateX(-2px); }
  /* BackRow — primary، radius-md، chevron-right */
  #addFamSheet .sheet-back{
    display:inline-flex!important; align-items:center!important; gap:var(--wd-space-1)!important;
    margin:0 0 var(--wd-space-3) 0!important; padding:4px 8px!important;
    border-radius:var(--wd-radius-md)!important; background:transparent!important; border:none!important;
    color:var(--wd-primary)!important; font-size:12.5px!important; font-weight:600!important; cursor:pointer;
    transition:background var(--wd-motion-fast) var(--wd-ease)!important;
  }
  #addFamSheet .sheet-back:hover{ background:var(--wd-muted)!important; }
  #addFamSheet .sheet-back:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  #addFamSheet .sheet-back svg{ width:16px!important; height:16px!important; stroke-width:2; }
  /* Field / label / input — SPEC: label 12px/600، input h-11 radius-md border-input، focus ring */
  #addFamSheet .field{ display:flex!important; flex-direction:column!important; gap:var(--wd-space-1)!important; margin:0!important; }
  #addFamSheet .field[style*="margin-top"]{ margin-top:var(--wd-space-3)!important; }
  #addFamSheet .field label{ font-size:12px!important; font-weight:600!important; color:var(--wd-foreground)!important; display:block; padding:0!important; line-height:1.5!important; }
  #addFamSheet .field label svg{ width:14px!important; height:14px!important; }
  #addFamSheet .input{
    height:44px!important; min-height:44px!important; width:100%!important;
    border-radius:var(--wd-radius-md)!important; border:1px solid var(--wd-input)!important;
    background:var(--wd-background)!important; color:var(--wd-foreground)!important;
    padding:0 12px!important; font-size:14px!important; font-weight:500!important; box-shadow:none!important;
    transition:border-color var(--wd-motion-base) var(--wd-ease), box-shadow var(--wd-motion-base) var(--wd-ease)!important;
  }
  #addFamSheet textarea.input{ height:auto!important; min-height:auto!important; padding:10px 12px!important; line-height:1.9!important; resize:vertical!important; }
  #addFamSheet .input::placeholder{ color:var(--wd-muted-fg)!important; }
  #addFamSheet .input:focus{ outline:none!important; border-color:var(--wd-ring)!important; box-shadow:0 0 0 2px color-mix(in oklab, var(--wd-ring) 30%, transparent)!important; }
  #addFamSheet .hint{ font-size:11.5px!important; color:var(--wd-muted-fg)!important; margin-top:var(--wd-space-1)!important; }
  /* Buttons — Primary (13.5px/700، primary، shadow-e1، active scale .98) / Ghost (13.5px/600، border) */
  #addFamSheet .btn{
    min-height:44px!important; height:auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important;
    gap:var(--wd-space-2)!important; border-radius:var(--wd-radius-md)!important; padding:0 16px!important;
    font-size:13.5px!important; font-weight:700!important; border:none!important; box-shadow:none!important;
    transition:transform var(--wd-motion-fast) var(--wd-ease), background var(--wd-motion-fast) var(--wd-ease)!important;
  }
  #addFamSheet .btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  #addFamSheet .btn.btn-primary{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; box-shadow:var(--wd-e1)!important; }
  #addFamSheet .btn.btn-primary:active{ transform:scale(.98)!important; }
  #addFamSheet .btn.btn-ghost{ background:transparent!important; border:1px solid var(--wd-border)!important; color:var(--wd-foreground)!important; font-weight:600!important; }
  #addFamSheet .btn.btn-ghost:hover{ background:var(--wd-muted)!important; }
  #addFamSheet .btn.btn-block{ width:100%!important; }
  #addFamSheet .btn svg{ width:16px!important; height:16px!important; }
  /* Photo/Excel hero icon (opt-ic 64px داخل اللوحة) — radius-2xl */
  #addFamSheet .sf-body .opt-ic[style*="64px"]{ border-radius:var(--wd-radius-2xl)!important; }
  #addFamSheet .sf-body .opt-ic[style*="64px"][style*="dde9fb"]{ background:color-mix(in oklab, var(--wd-info) 14%, transparent)!important; color:var(--wd-info)!important; }
  #addFamSheet .sf-body .opt-ic[style*="64px"][style*="ok-soft"]{ background:color-mix(in oklab, var(--wd-success) 14%, transparent)!important; color:var(--wd-success)!important; }
  #addFamSheet .sf-body .opt-ic[style*="64px"] svg{ width:28px!important; height:28px!important; stroke-width:1.75; }
  #addFamSheet #sfEnhance{ accent-color:var(--wd-primary); width:16px!important; height:16px!important; }
  /* Desktop (≥640px) — SPEC: متمركز أفقيًا، bottom-6، max-w 560 */
  @media (min-width:640px){
    #addFamSheet.ds-dialog-overlay{ padding:0 0 var(--wd-space-6)!important; }
    #addFamSheet .sheet.ds-sheet{ max-width:560px!important; border-top:1px solid var(--wd-border)!important; }
  }
}
/* ==== from index.html <style data-wadih-branch-sheet> (v435 split) ==== */
/* ==========================================================================
   AddBranchSheet "Layered Depth" (Lovable handoff 6.2) — إعادة تصميم بصري لِنافذة
   addBranchPrompt() لتطابق BottomSheet المشترك (6.1). مطابقة لـ add-branch-sheet.tsx.
   النطاق محصور حصريًا بنافذة الفرع عبر :has(#nbCompany) — لا يمسّ باقي نوافذ _authShell.
   عرض بصري بحت: صفر JS · صفر تعديل ماركب · صفر مساس بـ addBranchPrompt/_authShell/الحفظ/
   التحقق/State/التخزين/المعرّفات/النصوص. رموز --wd-* الرسمية فقط (لا HEX). المطابقات المُصرَّح
   بها كما في 6.1: shadow-e4→--wd-e3 · blur-overlay→--wd-blur-glass(12px) · space-4→16px · z-modal→z الحالي.
   العنوان الإنجليزي «Add Branch» والمقبض يُقدَّمان عبر ::after/::before (تقديم بصري، بلا تعديل DOM).
   ========================================================================== */
.mdl-ov.ds-dialog-overlay:has(#nbCompany){
  --wd-radius-md:10px; --wd-radius-2xl:22px;
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-danger:oklch(0.57 0.20 27);
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e3:0 12px 32px oklch(0 0 0 / 0.10);
  --wd-space-1:4px; --wd-space-2:8px; --wd-space-3:12px; --wd-space-4:16px; --wd-space-6:24px;
  --wd-blur-glass:12px;
  --wd-motion-fast:120ms; --wd-motion-base:180ms; --wd-motion-medium:240ms;
  --wd-ease:cubic-bezier(0.2,0,0,1); --wd-ease-emph:cubic-bezier(0.3,0,0,1);
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
[data-theme="dark"] .mdl-ov.ds-dialog-overlay:has(#nbCompany){
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 260);
  --wd-card:oklch(0.20 0.02 260); --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-danger:oklch(0.70 0.19 27);
}
@media screen{
  /* Overlay (backdrop) — bottom sheet: tint background/40% + blur */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany){
    background:color-mix(in oklab, var(--wd-background) 40%, transparent)!important;
    -webkit-backdrop-filter:blur(var(--wd-blur-glass))!important; backdrop-filter:blur(var(--wd-blur-glass))!important;
    align-items:flex-end!important; justify-content:center!important; padding:0!important;
    font-family:var(--wd-font-arabic);
  }
  /* Content (sheet) — card, border-top, radius-2xl علوي، shadow-e4(=e3)، max-h 92dvh، انزلاق من الأسفل */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl{
    background:var(--wd-card)!important; color:var(--wd-foreground)!important;
    width:100%!important; max-width:100%!important; margin:0!important;
    border:none!important; border-top:1px solid var(--wd-border)!important;
    border-radius:var(--wd-radius-2xl) var(--wd-radius-2xl) 0 0!important;
    box-shadow:var(--wd-e3)!important; max-height:92dvh!important; overflow:hidden!important;
    display:flex!important; flex-direction:column!important;
    animation:sheetUp var(--wd-motion-medium) var(--wd-ease-emph)!important;
    font-family:var(--wd-font-arabic);
  }
  /* Handle (4×36) — تقديم بصري عبر ::before (لا تعديل DOM) */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl::before{
    content:""; flex:0 0 auto; width:36px; height:4px; margin:8px auto 0;
    border-radius:999px; background:var(--wd-border);
  }
  /* Header — عنوان 15px/700 + «Add Branch» muted (::after) + زر إغلاق 44×44 */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-head{
    flex:0 0 auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important;
    gap:var(--wd-space-3)!important; margin:0!important; padding:var(--wd-space-3) var(--wd-space-4)!important;
    border-bottom:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-head .t{
    flex:1 1 auto!important; min-width:0; font-size:15px!important; font-weight:700!important; color:var(--wd-foreground)!important;
    line-height:1.4!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-head .t::after{
    content:"Add Branch"; margin-inline-start:6px; font-size:11px; font-weight:500; color:var(--wd-muted-fg);
  }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-x{
    width:44px!important; min-width:44px!important; height:44px!important; flex:0 0 auto!important;
    border-radius:var(--wd-radius-md)!important; background:transparent!important; border:none!important; box-shadow:none!important;
    color:var(--wd-muted-fg)!important; display:grid!important; place-items:center!important;
    transition:background var(--wd-motion-fast) var(--wd-ease)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-x:hover{ background:var(--wd-muted)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-x:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-x svg{ width:16px!important; height:16px!important; stroke-width:1.75; }
  /* Body — scroll + padding space-4، الحقول بعمود بفراغ space-3 */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-body{
    flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain!important;
    padding:var(--wd-space-4)!important; display:flex!important; flex-direction:column!important; gap:var(--wd-space-3)!important;
  }
  /* Field / label(+icon 14px) / input h-11 */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .field{ display:flex!important; flex-direction:column!important; gap:var(--wd-space-1)!important; margin:0!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .field label{
    display:inline-flex!important; align-items:center!important; gap:6px!important;
    font-size:12px!important; font-weight:600!important; color:var(--wd-foreground)!important; padding:0!important; line-height:1.5!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .field label svg{ width:14px!important; height:14px!important; color:var(--wd-muted-fg)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .input{
    height:44px!important; min-height:44px!important; width:100%!important;
    border-radius:var(--wd-radius-md)!important; border:1px solid var(--wd-input)!important;
    background:var(--wd-background)!important; color:var(--wd-foreground)!important;
    padding:0 12px!important; font-size:14px!important; font-weight:500!important; box-shadow:none!important;
    transition:border-color var(--wd-motion-base) var(--wd-ease), box-shadow var(--wd-motion-base) var(--wd-ease)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .input::placeholder{ color:var(--wd-muted-fg)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .input:focus{ outline:none!important; border-color:var(--wd-ring)!important; box-shadow:0 0 0 2px color-mix(in oklab, var(--wd-ring) 30%, transparent)!important; }
  /* Error — destructive 12px bold (يبقى إظهار/إخفاء عبر JS كما هو) */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) #nbErr{ color:var(--wd-danger)!important; font-size:12px!important; font-weight:700!important; margin:0!important; }
  /* Footer — حد علوي، خلفية، safe-area، محاذاة نهاية، gap space-2 */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot{
    flex:0 0 auto!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:var(--wd-space-2)!important;
    padding:var(--wd-space-3) var(--wd-space-4)!important;
    padding-bottom:calc(var(--wd-space-3) + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important;
    background:color-mix(in oklab, var(--wd-card) 92%, var(--wd-background))!important;
  }
  /* Buttons — Primary (13.5/700 + shadow-e1 + active .98) / Ghost (13.5/600 + border) */
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot .btn{
    min-height:44px!important; height:auto!important; width:auto!important; flex:0 0 auto!important; margin:0!important;
    display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:var(--wd-space-2)!important;
    border-radius:var(--wd-radius-md)!important; padding:0 16px!important; font-size:13.5px!important; font-weight:700!important;
    border:none!important; box-shadow:none!important;
    transition:transform var(--wd-motion-fast) var(--wd-ease), background var(--wd-motion-fast) var(--wd-ease)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot .btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot .btn.btn-primary{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; box-shadow:var(--wd-e1)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot .btn.btn-primary:active{ transform:scale(.98)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot .btn.btn-ghost{ background:transparent!important; border:1px solid var(--wd-border)!important; color:var(--wd-foreground)!important; font-weight:600!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot .btn.btn-ghost:hover{ background:var(--wd-muted)!important; }
  .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl-foot .btn svg{ width:16px!important; height:16px!important; }
  /* Desktop (≥640px) — متمركز، bottom-6، max-w 560 */
  @media (min-width:640px){
    .mdl-ov.ds-dialog-overlay:has(#nbCompany){ padding:0 0 var(--wd-space-6)!important; }
    .mdl-ov.ds-dialog-overlay:has(#nbCompany) .mdl{ max-width:560px!important; }
  }
}
/* ==== from index.html <style data-wadih-employee-sheet> (v435 split) ==== */
/* ==========================================================================
   AddEmployeeSheet "Layered Depth" (Lovable handoff 6.3) — إعادة تصميم بصري لِـ
   openAddEmployee() (Wizard 4 خطوات) لتطابق BottomSheet المشترك. مطابقة لـ add-employee-sheet.tsx.
   النطاق محصور حصريًا بنافذة الموظف عبر :has(#wzSteps) — لا يمسّ باقي نوافذ _authShell.
   عرض بصري بحت: صفر JS · صفر تعديل ماركب · صفر مساس بـ openAddEmployee/_authShell/التحقق/
   الحفظ(doCreate)/pwStrength/_permCheckList/State/الصلاحيات/المعرّفات/النصوص/Handlers.
   أيقونات حقول العناوين تُقدَّم عبر CSS mask (مسارات lucide رسمية) — بلا تعديل DOM.
   مطابقات الرموز المُصرَّح بها (كما 6.1/6.2): e4→e3 · blur-overlay→blur-glass · space-4→16px · z-modal→z الحالي.
   ========================================================================== */
.mdl-ov.ds-dialog-overlay:has(#wzSteps){
  --wd-radius-sm:6px; --wd-radius-md:10px; --wd-radius-2xl:22px;
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-danger:oklch(0.57 0.20 27);
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e3:0 12px 32px oklch(0 0 0 / 0.10);
  --wd-space-1:4px; --wd-space-2:8px; --wd-space-3:12px; --wd-space-4:16px; --wd-space-6:24px;
  --wd-blur-glass:12px;
  --wd-motion-fast:120ms; --wd-motion-base:180ms; --wd-motion-medium:240ms;
  --wd-ease:cubic-bezier(0.2,0,0,1); --wd-ease-emph:cubic-bezier(0.3,0,0,1);
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
[data-theme="dark"] .mdl-ov.ds-dialog-overlay:has(#wzSteps){
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 260);
  --wd-card:oklch(0.20 0.02 260); --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-danger:oklch(0.70 0.19 27);
}
@media screen{
  /* ===== Shell (نفس BottomSheet — كما 6.2) ===== */
  .mdl-ov.ds-dialog-overlay:has(#wzSteps){
    background:color-mix(in oklab, var(--wd-background) 40%, transparent)!important;
    -webkit-backdrop-filter:blur(var(--wd-blur-glass))!important; backdrop-filter:blur(var(--wd-blur-glass))!important;
    align-items:flex-end!important; justify-content:center!important; padding:0!important; font-family:var(--wd-font-arabic);
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl{
    background:var(--wd-card)!important; color:var(--wd-foreground)!important;
    width:100%!important; max-width:100%!important; margin:0!important;
    border:none!important; border-top:1px solid var(--wd-border)!important;
    border-radius:var(--wd-radius-2xl) var(--wd-radius-2xl) 0 0!important; box-shadow:var(--wd-e3)!important;
    max-height:92dvh!important; padding:0!important; overflow:hidden!important;
    display:flex!important; flex-direction:column!important;
    animation:sheetUp var(--wd-motion-medium) var(--wd-ease-emph)!important; font-family:var(--wd-font-arabic);
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl::before{ content:""; flex:0 0 auto; width:36px; height:4px; margin:8px auto 0; border-radius:999px; background:var(--wd-border); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-head{
    flex:0 0 auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important;
    gap:var(--wd-space-3)!important; margin:0!important; padding:var(--wd-space-3) var(--wd-space-4)!important;
    border-bottom:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-head .t{ flex:1 1 auto!important; min-width:0; font-size:15px!important; font-weight:700!important; color:var(--wd-foreground)!important; line-height:1.4!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-head .t::after{ content:"Add Employee"; margin-inline-start:6px; font-size:11px; font-weight:500; color:var(--wd-muted-fg); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-x{
    width:44px!important; min-width:44px!important; height:44px!important; flex:0 0 auto!important;
    border-radius:var(--wd-radius-md)!important; background:transparent!important; border:none!important; box-shadow:none!important;
    color:var(--wd-muted-fg)!important; display:grid!important; place-items:center!important; transition:background var(--wd-motion-fast) var(--wd-ease)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-x:hover{ background:var(--wd-muted)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-x:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-x svg{ width:16px!important; height:16px!important; stroke-width:1.75; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-body{
    flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain!important;
    padding:var(--wd-space-4)!important; display:flex!important; flex-direction:column!important; gap:var(--wd-space-4)!important;
  }
  /* ===== Stepper ===== */
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzSteps{ display:flex!important; align-items:flex-start!important; margin:0!important; gap:0!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-step{ display:flex!important; flex-direction:column!important; align-items:center!important; gap:var(--wd-space-1)!important; flex:0 0 auto!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-dot{
    width:28px!important; height:28px!important; border-radius:999px!important; border:none!important;
    background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; font-size:11px!important; font-weight:700!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-dot.active{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; box-shadow:var(--wd-e1)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-dot.done{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-dot svg{ width:14px!important; height:14px!important; stroke-width:2.25; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-lbl{ font-size:10.5px!important; font-weight:600!important; color:var(--wd-muted-fg)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-lbl.on{ color:var(--wd-foreground)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-bar{ flex:1 1 auto!important; height:2px!important; background:color-mix(in oklab, var(--wd-border) 80%, transparent)!important; margin:14px 6px 0!important; border-radius:999px!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-bar.done{ background:var(--wd-primary)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-bar>i{ display:none!important; }
  /* ===== الحقول (hig-row → عمود + أيقونة + input h-11) ===== */
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-inset-group:has(.hig-row){ background:transparent!important; border:none!important; border-radius:0!important; margin:0!important; overflow:visible!important; display:flex!important; flex-direction:column!important; gap:var(--wd-space-3)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:var(--wd-space-1)!important; padding:0!important; min-height:0!important; background:transparent!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row + .hig-row{ border-top:none!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row__label{ flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; font-size:12px!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row__label::before{ content:""; display:inline-block; width:14px; height:14px; margin-inline-end:6px; flex:0 0 auto; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row:has(#wzName) .hig-row__label::before{ -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row:has(#wzEmail) .hig-row__label::before{ -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>"); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row:has(#wzPhone) .hig-row__label::before{ -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row:has(#wzJobTitle) .hig-row__label::before{ -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/><rect width='20' height='14' x='2' y='6' rx='2'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/><rect width='20' height='14' x='2' y='6' rx='2'/></svg>"); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row:has(#wzPass) .hig-row__label::before,
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row:has(#wzPass2) .hig-row__label::before{ -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-row:has(#wzRole) .hig-row__label::before{ -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/><circle cx='16.5' cy='7.5' r='.5' fill='black'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/><circle cx='16.5' cy='7.5' r='.5' fill='black'/></svg>"); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-input{
    height:44px!important; min-height:44px!important; width:100%!important; flex:0 0 auto!important;
    border:1px solid var(--wd-input)!important; border-radius:var(--wd-radius-md)!important;
    background:var(--wd-background)!important; color:var(--wd-foreground)!important;
    padding:0 12px!important; font-size:14px!important; font-weight:500!important; box-shadow:none!important;
    transition:border-color var(--wd-motion-base) var(--wd-ease), box-shadow var(--wd-motion-base) var(--wd-ease)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) select.hig-input{ padding:0 10px!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-input::placeholder{ color:var(--wd-muted-fg)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-input:focus{ outline:none!important; border-color:var(--wd-ring)!important; box-shadow:0 0 0 2px color-mix(in oklab, var(--wd-ring) 30%, transparent)!important; }
  /* ===== خطوة 2 — الدعوة + كلمة المرور ===== */
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzPane > .wz-pane > label:has(#wzInvite){
    display:flex!important; align-items:center!important; gap:var(--wd-space-2)!important;
    border:1px solid var(--wd-border)!important; border-radius:var(--wd-radius-md)!important;
    padding:10px 12px!important; margin:0 0 var(--wd-space-3) 0!important;
    font-size:13px!important; font-weight:600!important; color:var(--wd-foreground)!important; background:var(--wd-card)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzPane > .wz-pane > label:has(#wzInvite:checked){ background:color-mix(in oklab, var(--wd-primary) 8%, var(--wd-card))!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzInvite{ accent-color:var(--wd-primary); width:16px!important; height:16px!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzHint{ font-size:11.5px!important; }
  /* ===== خطوة 3 — الأدوات + الصلاحيات ===== */
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzPermsArea .hig-btn{
    min-height:36px!important; background:var(--wd-card)!important; border:1px solid var(--wd-border)!important;
    color:var(--wd-foreground)!important; border-radius:var(--wd-radius-md)!important; padding:0 12px!important;
    font-size:11.5px!important; font-weight:600!important; box-shadow:none!important; gap:6px!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzPermsArea .hig-btn:hover{ background:var(--wd-muted)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzPermsArea .hig-btn svg{ width:14px!important; height:14px!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .hig-inset-group:has(.perm-sw){ background:var(--wd-card)!important; border:1px solid var(--wd-border)!important; border-radius:var(--wd-radius-md)!important; padding:6px!important; margin:0!important; overflow:visible!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw{ min-height:0!important; padding:8px!important; border:none!important; border-bottom:none!important; margin:0!important; border-radius:var(--wd-radius-sm)!important; gap:var(--wd-space-2)!important; font-size:12.5px!important; color:var(--wd-foreground)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw + .perm-sw{ border-top:none!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw:hover{ background:var(--wd-muted)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw>span.lbl{ order:2; font-weight:500!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw .tk{ order:1; width:16px!important; height:16px!important; border-radius:4px!important; background:transparent!important; border:1.5px solid var(--wd-border)!important; box-shadow:none!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw .tk::after{ content:""!important; position:absolute; top:1px; right:4.5px; left:auto; width:4px; height:8px; border:solid var(--wd-primary-fg); border-width:0 2px 2px 0; border-radius:0; background:transparent!important; box-shadow:none!important; transform:rotate(45deg); opacity:0; transition:opacity var(--wd-motion-fast); }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw input:checked + .tk{ background:var(--wd-primary)!important; border-color:var(--wd-primary)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-sw input:checked + .tk::after{ opacity:1; right:4.5px; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .perm-count{ font-size:11.5px!important; color:var(--wd-muted-fg)!important; font-weight:600!important; text-align:right!important; margin-top:var(--wd-space-2)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) #wzPermsArea .acc-panel{ background:color-mix(in oklab, var(--wd-primary) 8%, var(--wd-card))!important; border:1px solid var(--wd-border)!important; border-radius:var(--wd-radius-md)!important; padding:12px!important; }
  /* ===== خطوة 4 — المراجعة ===== */
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .acc-panel:has(.wz-review-row){ background:var(--wd-card)!important; border:1px solid var(--wd-border)!important; border-radius:var(--wd-radius-md)!important; padding:0!important; overflow:hidden!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-review-row{ padding:10px 12px!important; border-bottom:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-review-row:last-child{ border-bottom:none!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-review-row .k{ font-size:13px!important; font-weight:600!important; color:var(--wd-muted-fg)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .wz-review-row .v{ font-size:13px!important; font-weight:700!important; color:var(--wd-foreground)!important; }
  /* ===== Footer ===== */
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot{
    flex:0 0 auto!important; display:flex!important; align-items:center!important; gap:var(--wd-space-2)!important;
    padding:var(--wd-space-3) var(--wd-space-4)!important; padding-bottom:calc(var(--wd-space-3) + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important;
    background:color-mix(in oklab, var(--wd-card) 92%, var(--wd-background))!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot .hig-btn{
    min-height:44px!important; border-radius:var(--wd-radius-md)!important; padding:0 16px!important;
    font-size:13.5px!important; font-weight:600!important; background:transparent!important; border:1px solid var(--wd-border)!important;
    color:var(--wd-foreground)!important; box-shadow:none!important; gap:var(--wd-space-2)!important;
    transition:transform var(--wd-motion-fast) var(--wd-ease), background var(--wd-motion-fast) var(--wd-ease)!important;
  }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot .hig-btn:hover{ background:var(--wd-muted)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot .hig-btn--primary{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; border:none!important; font-weight:700!important; box-shadow:var(--wd-e1)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot .hig-btn--primary:hover{ background:var(--wd-primary)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot .hig-btn--primary:active{ transform:scale(.98)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot .hig-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--wd-ring)!important; }
  .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl-foot .hig-btn svg{ width:16px!important; height:16px!important; }
  /* Desktop */
  @media (min-width:640px){
    .mdl-ov.ds-dialog-overlay:has(#wzSteps){ padding:0 0 var(--wd-space-6)!important; }
    .mdl-ov.ds-dialog-overlay:has(#wzSteps) .mdl{ max-width:560px!important; }
  }
}
/* ==== from index.html <style data-wadih-day-detail> (v435 split) ==== */
/* ==========================================================================
   DayDetailSheet "Layered Depth" (Lovable handoff 6.4) — إعادة تصميم بصري لِنافذة
   openDayProductsModal(di,fi) لتطابق BottomSheet المشترك. مطابقة لـ day-detail-sheet.tsx.
   النطاق محصور حصريًا بـ #dayProdOverlay — لا يمسّ أي نافذة أخرى.
   عرض بصري بحت: صفر مساس بأي حساب/بناء أصناف/تحقق/حفظ/تخزين/State/صلاحية/تقرير/ID/Handler/Route.
   التعديلات الوحيدة على الماركب = عرضية بحتة (رأس منظّم + Footer بزر «إغلاق» يستدعي آلية الإغلاق
   القائمة ov.remove) وفق القاعدة 6 (Display-only تنصّ عليه الحزمة)؛ زر الحفظ #dpSave نُقل كما هو
   بمعرّفه ونصّه ومعالجه دون تغيير. رموز --wd-* الرسمية فقط. مطابقات مُصرَّح بها: e4→e3 · space-4→16px.
   ========================================================================== */
#dayProdOverlay{
  --wd-radius-sm:6px; --wd-radius-md:10px; --wd-radius-2xl:22px;
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-warning:oklch(0.72 0.15 60); --wd-success:oklch(0.58 0.14 155); --wd-info:oklch(0.60 0.10 235);
  --wd-danger:oklch(0.57 0.20 27); --wd-accent:oklch(0.58 0.12 165);
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e3:0 12px 32px oklch(0 0 0 / 0.10);
  --wd-space-1:4px; --wd-space-2:8px; --wd-space-3:12px; --wd-space-4:16px; --wd-space-6:24px;
  --wd-blur-glass:12px; --wd-motion-fast:120ms; --wd-motion-base:180ms; --wd-motion-medium:240ms;
  --wd-ease:cubic-bezier(0.2,0,0,1); --wd-ease-emph:cubic-bezier(0.3,0,0,1);
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
[data-theme="dark"] #dayProdOverlay{
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 260);
  --wd-card:oklch(0.20 0.02 260); --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-warning:oklch(0.80 0.14 65); --wd-success:oklch(0.72 0.15 155); --wd-info:oklch(0.72 0.11 235);
  --wd-danger:oklch(0.70 0.19 27); --wd-accent:oklch(0.68 0.13 165);
}
@media screen{
  /* Overlay + Sheet + Handle */
  #dayProdOverlay{ background:color-mix(in oklab, var(--wd-background) 40%, transparent)!important; -webkit-backdrop-filter:blur(var(--wd-blur-glass))!important; backdrop-filter:blur(var(--wd-blur-glass))!important; align-items:flex-end!important; justify-content:center!important; padding:0!important; font-family:var(--wd-font-arabic); }
  #dayProdOverlay > div{
    background:var(--wd-card)!important; color:var(--wd-foreground)!important; width:100%!important; max-width:100%!important;
    border:none!important; border-top:1px solid var(--wd-border)!important; border-radius:var(--wd-radius-2xl) var(--wd-radius-2xl) 0 0!important;
    box-shadow:var(--wd-e3)!important; max-height:92dvh!important; padding:0 var(--wd-space-4) 0!important; overflow:auto!important; overscroll-behavior:contain;
    animation:sheetUp var(--wd-motion-medium) var(--wd-ease-emph)!important; font-family:var(--wd-font-arabic);
  }
  #dayProdOverlay > div::before{ content:""; display:block; width:36px; height:4px; margin:8px auto 0; border-radius:999px; background:var(--wd-border); }
  /* Header */
  #dayProdOverlay .dp-head-row{ margin:0!important; padding:var(--wd-space-3) 0!important; align-items:flex-start!important; gap:var(--wd-space-3); border-bottom:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important; position:sticky; top:0; z-index:2; background:var(--wd-card); }
  #dayProdOverlay .dp-title{ font-size:15px!important; font-weight:700!important; color:var(--wd-foreground)!important; line-height:1.4; }
  #dayProdOverlay .dp-title svg{ width:16px!important; height:16px!important; vertical-align:-3px; color:var(--wd-warning)!important; }
  #dayProdOverlay .dp-en{ margin-inline-start:6px; font-size:11px; font-weight:500; color:var(--wd-muted-fg); }
  #dayProdOverlay .dp-date{ margin-top:2px; font-size:12px; color:var(--wd-muted-fg); }
  #dayProdOverlay #dpClose.icon-btn{ width:44px!important; height:44px!important; min-width:44px!important; flex:0 0 auto; border-radius:var(--wd-radius-md)!important; background:transparent!important; border:none!important; color:var(--wd-muted-fg)!important; display:grid!important; place-items:center!important; }
  #dayProdOverlay #dpClose.icon-btn:hover{ background:var(--wd-muted)!important; }
  #dayProdOverlay #dpClose.icon-btn svg{ width:16px!important; height:16px!important; }
  /* Lock bar (شريط القفل — .prod-gap مباشر داخل الورقة) → warning */
  #dayProdOverlay > div > .prod-gap{ background:color-mix(in oklab, var(--wd-warning) 10%, var(--wd-card))!important; border:1px solid color-mix(in oklab, var(--wd-warning) 40%, var(--wd-border))!important; color:var(--wd-foreground)!important; border-radius:var(--wd-radius-md)!important; font-size:12.5px!important; font-weight:600!important; padding:8px 12px!important; margin:var(--wd-space-3) 0 0!important; }
  #dayProdOverlay > div > .prod-gap svg{ color:var(--wd-warning)!important; width:14px; height:14px; }
  /* Summary cards */
  #dayProdOverlay #dpSummary{ gap:var(--wd-space-1)!important; margin:var(--wd-space-3) 0 0!important; }
  #dayProdOverlay #dpSummary > div:not(:has(svg)){ background:var(--wd-muted)!important; border:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important; border-radius:var(--wd-radius-md)!important; padding:8px 6px!important; text-align:center; }
  #dayProdOverlay #dpSummary > div:not(:has(svg)) > div:first-child{ font-size:10px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; }
  #dayProdOverlay #dpSummary > div:not(:has(svg)) > div:last-child{ font-size:13px!important; font-weight:700!important; margin-top:2px; font-variant-numeric:tabular-nums; }
  #dayProdOverlay #dpSummary > div:nth-child(1) > div:last-child{ color:var(--wd-warning)!important; }
  #dayProdOverlay #dpSummary > div:nth-child(2) > div:last-child{ color:var(--wd-foreground)!important; }
  #dayProdOverlay #dpSummary > div:nth-child(3) > div:last-child{ color:var(--wd-info)!important; }
  #dayProdOverlay #dpSummary > div:nth-child(4) > div:last-child{ color:var(--wd-danger)!important; }
  #dayProdOverlay #dpSummary > div:nth-child(5) > div:last-child{ color:var(--wd-accent)!important; }
  #dayProdOverlay #dpSummary > div:nth-child(6) > div:last-child{ color:var(--wd-info)!important; }
  #dayProdOverlay #dpSummary > div:has(svg){ background:color-mix(in oklab, var(--wd-warning) 10%, var(--wd-card))!important; border:1px solid color-mix(in oklab, var(--wd-warning) 35%, var(--wd-border))!important; border-radius:var(--wd-radius-md)!important; padding:7px 10px!important; }
  #dayProdOverlay #dpSummary > div:has(svg) span{ color:var(--wd-warning)!important; font-size:11.5px!important; font-weight:600!important; }
  /* Item cards */
  #dayProdOverlay #dpBody{ display:flex!important; flex-direction:column!important; gap:var(--wd-space-2)!important; margin-top:var(--wd-space-3); }
  #dayProdOverlay .dp-card{ border:1px solid var(--wd-border)!important; border-radius:var(--wd-radius-md)!important; padding:0!important; margin:0!important; background:var(--wd-card)!important; overflow:hidden; }
  #dayProdOverlay .dp-card[style*="fffaf2"], #dayProdOverlay .dp-card[style*="f0c98a"]{ border-color:color-mix(in oklab, var(--wd-warning) 40%, var(--wd-border))!important; background:color-mix(in oklab, var(--wd-warning) 6%, var(--wd-card))!important; }
  #dayProdOverlay .dp-head{ gap:var(--wd-space-2)!important; padding:8px 12px!important; }
  #dayProdOverlay .dp-toggle.icon-btn{ width:24px!important; height:24px!important; border-radius:999px!important; background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; border:none!important; }
  #dayProdOverlay .dp-toggle svg{ width:14px!important; height:14px!important; }
  #dayProdOverlay .dp-head > div[style*="e65100"]{ font-size:13px!important; font-weight:700!important; color:var(--wd-warning)!important; }
  #dayProdOverlay .dp-manual-tag{ background:color-mix(in oklab, var(--wd-warning) 15%, var(--wd-card))!important; color:var(--wd-warning)!important; border:1px solid color-mix(in oklab, var(--wd-warning) 40%, transparent)!important; font-size:10.5px!important; font-weight:700!important; border-radius:var(--wd-radius-sm)!important; padding:2px 6px!important; }
  #dayProdOverlay .dp-mini-summary{ padding:0 12px 10px!important; gap:4px 14px!important; font-size:11.5px!important; color:var(--wd-muted-fg)!important; }
  #dayProdOverlay .dp-mini-summary b{ font-variant-numeric:tabular-nums; color:var(--wd-foreground); }
  #dayProdOverlay .dp-mini-summary b[style*="2e62c4"]{ color:var(--wd-info)!important; }
  #dayProdOverlay .dp-mini-summary b[style*="e65100"]{ color:var(--wd-warning)!important; }
  #dayProdOverlay .dp-mini-summary span[style*="e65100"]{ color:var(--wd-warning)!important; }
  #dayProdOverlay .dp-details{ border-top:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important; padding:12px!important; margin:0!important; }
  #dayProdOverlay .dp-details > div[style*="grid"]{ gap:8px!important; }
  #dayProdOverlay .mini label{ font-size:11px!important; font-weight:600!important; color:var(--wd-muted-fg)!important; }
  #dayProdOverlay .dp-details .input{ height:40px!important; min-height:40px!important; border:1px solid var(--wd-input)!important; border-radius:var(--wd-radius-md)!important; background:var(--wd-background)!important; color:var(--wd-foreground)!important; padding:0 12px!important; font-size:13.5px!important; box-shadow:none!important; font-variant-numeric:tabular-nums; }
  #dayProdOverlay .dp-details .input:focus{ outline:none!important; border-color:var(--wd-ring)!important; box-shadow:0 0 0 2px color-mix(in oklab, var(--wd-ring) 30%, transparent)!important; }
  #dayProdOverlay .dp-details .input[disabled], #dayProdOverlay .dp-details .input[style*="var(--bg)"]{ background:var(--wd-muted)!important; color:var(--wd-foreground)!important; }
  #dayProdOverlay .dp-details .input[data-out="carry"][style*="fff3e0"]{ background:color-mix(in oklab, var(--wd-warning) 12%, var(--wd-card))!important; color:var(--wd-warning)!important; }
  #dayProdOverlay .dp-details .input[data-out="sales"]{ color:var(--wd-info)!important; }
  #dayProdOverlay .dp-edit-carry.icon-btn{ border-radius:var(--wd-radius-md)!important; background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; border:none!important; }
  #dayProdOverlay .dp-edit-carry.icon-btn[style*="fff3e0"]{ background:color-mix(in oklab, var(--wd-warning) 12%, var(--wd-card))!important; color:var(--wd-warning)!important; }
  #dayProdOverlay .dp-manual-detail{ background:color-mix(in oklab, var(--wd-warning) 10%, var(--wd-card))!important; color:var(--wd-warning)!important; border-radius:var(--wd-radius-sm)!important; font-size:11px!important; }
  #dayProdOverlay .dp-err{ font-size:11px!important; color:var(--wd-danger)!important; }
  /* Status bars */
  #dayProdOverlay .dp-status .prod-ok{ background:color-mix(in oklab, var(--wd-success) 12%, var(--wd-card))!important; color:var(--wd-success)!important; border-radius:var(--wd-radius-sm)!important; font-size:11.5px!important; font-weight:700!important; padding:6px 10px!important; margin:0!important; }
  #dayProdOverlay .dp-status .prod-ok[style*="ede7f6"]{ background:color-mix(in oklab, var(--wd-accent) 12%, var(--wd-card))!important; color:var(--wd-accent)!important; }
  #dayProdOverlay .dp-status .prod-gap{ background:color-mix(in oklab, var(--wd-danger) 12%, var(--wd-card))!important; color:var(--wd-danger)!important; border-radius:var(--wd-radius-sm)!important; font-size:11.5px!important; font-weight:700!important; padding:6px 10px!important; margin:0!important; }
  /* Total (orange) */
  #dayProdOverlay #dpTotal{ background:color-mix(in oklab, var(--wd-warning) 12%, var(--wd-card))!important; border:1px solid color-mix(in oklab, var(--wd-warning) 30%, var(--wd-border))!important; border-radius:var(--wd-radius-md)!important; padding:12px 14px!important; margin:var(--wd-space-3) 0 0!important; font-size:13px!important; font-weight:700!important; }
  #dayProdOverlay #dpTotal span[style*="e65100"]{ color:var(--wd-warning)!important; }
  #dayProdOverlay #dpTotalVal{ color:var(--wd-foreground)!important; font-variant-numeric:tabular-nums; }
  /* Compare */
  #dayProdOverlay #dpCompare{ margin:var(--wd-space-2) 0 0!important; }
  #dayProdOverlay #dpCompare .prod-ok{ background:color-mix(in oklab, var(--wd-success) 10%, var(--wd-card))!important; border:1px solid color-mix(in oklab, var(--wd-success) 35%, var(--wd-border))!important; color:var(--wd-foreground)!important; border-radius:var(--wd-radius-md)!important; font-size:12.5px!important; font-weight:600!important; padding:9px 12px!important; margin:0!important; }
  #dayProdOverlay #dpCompare .prod-ok svg{ color:var(--wd-success)!important; }
  #dayProdOverlay #dpCompare .prod-gap{ background:color-mix(in oklab, var(--wd-danger) 10%, var(--wd-card))!important; border:1px solid color-mix(in oklab, var(--wd-danger) 35%, var(--wd-border))!important; color:var(--wd-foreground)!important; border-radius:var(--wd-radius-md)!important; font-size:12.5px!important; font-weight:600!important; padding:9px 12px!important; margin:0!important; }
  #dayProdOverlay #dpCompare .prod-gap svg{ color:var(--wd-danger)!important; }
  /* Add-more button */
  #dayProdOverlay #dpAddMore, #dayProdOverlay #dpAddFirst{ background:color-mix(in oklab, var(--wd-warning) 10%, var(--wd-card))!important; color:var(--wd-warning)!important; border:1.5px dashed color-mix(in oklab, var(--wd-warning) 40%, var(--wd-border))!important; border-radius:var(--wd-radius-md)!important; font-size:13px!important; font-weight:700!important; min-height:44px!important; }
  /* Footer (sticky) */
  #dayProdOverlay .dp-foot{ position:sticky; bottom:0; z-index:2; display:flex!important; align-items:center; gap:var(--wd-space-2)!important; margin:var(--wd-space-3) calc(-1 * var(--wd-space-4)) 0!important; padding:var(--wd-space-3) var(--wd-space-4)!important; padding-bottom:calc(var(--wd-space-3) + env(safe-area-inset-bottom,0px))!important; border-top:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important; background:color-mix(in oklab, var(--wd-card) 92%, var(--wd-background))!important; }
  #dayProdOverlay .dp-foot .btn{ min-height:44px!important; height:auto!important; margin:0!important; border-radius:var(--wd-radius-md)!important; padding:0 16px!important; font-size:13.5px!important; font-weight:700!important; box-shadow:none!important; display:inline-flex; align-items:center; justify-content:center; gap:var(--wd-space-2); }
  #dayProdOverlay .dp-foot .btn.btn-ghost{ flex:0 0 auto; width:auto!important; background:transparent!important; border:1px solid var(--wd-border)!important; color:var(--wd-foreground)!important; font-weight:600!important; }
  #dayProdOverlay .dp-foot .btn.btn-ghost:hover{ background:var(--wd-muted)!important; }
  #dayProdOverlay .dp-foot .btn.btn-primary{ flex:1 1 auto; width:auto!important; background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; border:none!important; box-shadow:var(--wd-e1)!important; }
  #dayProdOverlay .dp-foot .btn.btn-primary:active{ transform:scale(.98)!important; }
  #dayProdOverlay .dp-foot .btn svg{ width:16px!important; height:16px!important; }
  /* Desktop */
  @media (min-width:640px){
    #dayProdOverlay{ padding:0 0 var(--wd-space-6)!important; }
    #dayProdOverlay > div{ max-width:560px!important; }
  }
}
/* ==== from index.html <style data-wadih-settings> (v435 split) ==== */
/* ==========================================================================
   Settings "Layered Depth" handoff — Stage 1: foundation tokens + shared card/
   input/button/switch/group language. Scoped to #page-settings ONLY. Official
   oklch tokens (wd-namespace, light+dark). Presentation only — no JS, no logic,
   no id/data-attr/text change; all fields/switches/handlers/permissions kept.
   Hero (SPEC 0) and any layout work are later stages.
   ========================================================================== */
#page-settings{
  --wd-radius-sm:6px; --wd-radius-md:10px; --wd-radius-lg:14px; --wd-radius-xl:18px; --wd-radius-2xl:22px;
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-accent:oklch(0.58 0.12 165); --wd-accent-fg:oklch(0.99 0.003 250); --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-success:oklch(0.58 0.14 155); --wd-warning:oklch(0.75 0.14 80); --wd-danger:oklch(0.57 0.20 27); --wd-info:oklch(0.60 0.10 235);
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e2:0 4px 12px oklch(0 0 0 / 0.06);
  --wd-motion-medium:240ms; --wd-ease-emph:cubic-bezier(0.3,0,0,1);
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif; --wd-font-num:'Inter','Cairo',ui-sans-serif,system-ui,sans-serif;
}
[data-theme="dark"] #page-settings{
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 260);
  --wd-card:oklch(0.20 0.02 260); --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-accent:oklch(0.68 0.13 165); --wd-accent-fg:oklch(0.16 0.02 260); --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-success:oklch(0.72 0.15 155); --wd-warning:oklch(0.82 0.14 80); --wd-danger:oklch(0.70 0.19 27); --wd-info:oklch(0.72 0.11 235);
}
@media screen{
  #page-settings{ background:var(--wd-background); color:var(--wd-foreground); font-family:var(--wd-font-arabic); }
  /* ---- Cards (SettingsCard) ---- */
  #page-settings .card{ border-radius:var(--wd-radius-xl)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; background-image:none!important; box-shadow:var(--wd-e1)!important; backdrop-filter:none!important; }
  #page-settings .card > .card-title{ font-size:14px!important; font-weight:600!important; color:var(--wd-foreground)!important; display:flex; align-items:center; gap:12px; }
  #page-settings .card > .card-title > svg:first-child{ width:34px; height:34px; padding:8px; box-sizing:content-box; border-radius:999px; background:color-mix(in oklab,var(--wd-primary) 10%,transparent); color:var(--wd-primary); flex:0 0 auto; }
  #page-settings .card > .card-title .en{ font-size:10px!important; color:var(--wd-muted-fg)!important; font-weight:500; text-transform:uppercase; letter-spacing:.08em; }
  #page-settings .hint{ color:var(--wd-muted-fg)!important; }
  #page-settings .ios-sec-t{ color:var(--wd-muted-fg)!important; font-size:12px!important; font-weight:500!important; }
  #page-settings .ios-sec-t svg{ color:var(--wd-muted-fg); width:14px; height:14px; }
  /* ---- Group headers (set-group) ---- */
  #page-settings .set-group-ic{ background:color-mix(in oklab,var(--wd-primary) 10%,transparent)!important; border-radius:999px!important; color:var(--wd-primary)!important; }
  #page-settings .set-group-emoji{ filter:grayscale(0); }
  #page-settings .set-group-t{ color:var(--wd-foreground)!important; font-size:13px!important; font-weight:600!important; letter-spacing:-0.005em; }
  #page-settings .set-group-desc{ color:var(--wd-muted-fg)!important; font-size:11px!important; }
  #page-settings .set-group-chev{ color:var(--wd-muted-fg)!important; }
  #page-settings .set-group-danger .set-group-ic{ background:color-mix(in oklab,var(--wd-danger) 12%,transparent)!important; color:var(--wd-danger)!important; }
  #page-settings .set-group-danger .set-group-t{ color:var(--wd-danger)!important; }
  /* Group/Section container alignment (SPEC Section/SectionTitle + RESPONSIVE single-column):
     drop the redundant .set-group wrapper box so cards read as the bordered units under
     their section header; single column on desktop. Collapse behaviour untouched. */
  #page-settings .set-group{ border:none!important; background:transparent!important; box-shadow:none!important; border-radius:0!important; overflow:visible!important; }
  #page-settings .set-group-h{ padding:8px 2px!important; border-radius:var(--wd-radius-md); }
  #page-settings .set-group-h:hover{ background:transparent!important; }
  #page-settings .set-group-body{ padding:0!important; gap:12px!important; }
  #page-settings .set-groups{ gap:22px!important; }
  @media (min-width:768px){ #page-settings .set-groups{ grid-template-columns:1fr!important; } }
  /* ---- Inputs / selects ---- */
  #page-settings .input, #page-settings .select{ min-height:44px!important; border-radius:var(--wd-radius-md)!important; border:1px solid color-mix(in oklab,var(--wd-foreground) 18%,transparent)!important; background-color:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; color:var(--wd-foreground)!important; box-shadow:none!important; }
  #page-settings .input:focus, #page-settings .select:focus{ border-color:var(--wd-ring)!important; box-shadow:0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }
  #page-settings .input.num, #page-settings .num{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; }
  /* ---- SwitchRow (ios-tile) — SPEC SwitchRow ---- */
  #page-settings .ios-tile{ background:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-md)!important; }
  #page-settings .ios-tile .ios-title{ color:var(--wd-foreground)!important; font-size:13.5px!important; font-weight:600!important; }
  #page-settings .ios-tile .ios-desc{ color:var(--wd-muted-fg)!important; }
  #page-settings .ios-tile .ios-ic{ background:color-mix(in oklab,var(--wd-primary) 10%,transparent)!important; color:var(--wd-primary)!important; border-radius:999px!important; }
  #page-settings .ios-tile.cash-tile .ios-ic{ background:color-mix(in oklab,var(--wd-success) 12%,transparent)!important; color:var(--wd-success)!important; }
  #page-settings .ios-tile.mada-tile .ios-ic{ background:color-mix(in oklab,var(--wd-info) 12%,transparent)!important; color:var(--wd-info)!important; }
  #page-settings .ios-tile.vat-tile .ios-ic{ background:color-mix(in oklab,var(--wd-warning) 14%,transparent)!important; color:var(--wd-warning)!important; }
  #page-settings .ios-tile.is-off .ios-ic{ background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; }
  #page-settings .ios-tile.is-off .ios-title{ color:var(--wd-muted-fg)!important; }
  #page-settings .perm-sw .tk{ background:color-mix(in oklab,var(--wd-foreground) 20%,transparent)!important; }
  #page-settings .perm-sw input:checked + .tk{ background:var(--wd-primary)!important; }
  /* ---- Buttons ---- */
  #page-settings .btn.btn-primary{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; border-color:transparent!important; border-radius:var(--wd-radius-md)!important; box-shadow:var(--wd-e1), 0 6px 16px -12px color-mix(in oklab,var(--wd-primary) 55%,transparent), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 18%,transparent)!important; }
  #page-settings .btn.btn-accent{ background:var(--wd-accent)!important; color:var(--wd-accent-fg)!important; border-color:transparent!important; border-radius:var(--wd-radius-md)!important; box-shadow:var(--wd-e1)!important; }
  #page-settings .btn.btn-ghost, #page-settings .btn.btn-secondary{ background:var(--wd-card)!important; color:var(--wd-foreground)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-md)!important; }
  /* Danger-outline buttons (logout / wipe / clearTest / logo remove) — card bg + danger border/text */
  #page-settings #logoutBtn, #page-settings #wipeAllBtn, #page-settings #identLogoClear{ background:var(--wd-card)!important; color:var(--wd-danger)!important; border:1px solid color-mix(in oklab,var(--wd-danger) 30%,transparent)!important; border-radius:var(--wd-radius-md)!important; box-shadow:none!important; }
  #page-settings #logoutBtn:hover, #page-settings #wipeAllBtn:hover, #page-settings #identLogoClear:hover{ background:color-mix(in oklab,var(--wd-danger) 5%,var(--wd-card))!important; }
  /* ---- Danger card ---- */
  #page-settings #dangerCard{ border:1px solid color-mix(in oklab,var(--wd-danger) 30%,transparent)!important; }
  #page-settings #dangerCard > .card-title > svg:first-child{ background:color-mix(in oklab,var(--wd-danger) 10%,transparent)!important; color:var(--wd-danger)!important; }
  #page-settings #dangerCard > .card-title{ color:var(--wd-danger)!important; }

  /* ---- Settings Hero (SPEC section 0) — layered display card, --primary ---- */
  #page-settings .wd-set-hero{ position:relative; overflow:hidden; margin-bottom:16px; padding:20px; border-radius:var(--wd-radius-2xl); border:1px solid color-mix(in oklab,var(--wd-primary) 20%,transparent); background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab,var(--wd-primary) 85%,black)); color:var(--wd-primary-fg); box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 16%,transparent); }
  [data-theme="dark"] #page-settings .wd-set-hero{ background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab,var(--wd-primary) 80%,black)); box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 12%,transparent); }
  #page-settings .wd-set-hero > *{ position:relative; z-index:1; }
  #page-settings .wd-sh-glow{ position:absolute; z-index:0; border-radius:999px; pointer-events:none; }
  #page-settings .wd-sh-glow-a{ width:192px; height:192px; top:-48px; inset-inline-end:-48px; background:color-mix(in oklab,var(--wd-primary-fg) 5%,transparent); filter:blur(60px); }
  #page-settings .wd-sh-glow-b{ width:128px; height:128px; bottom:-40px; inset-inline-start:-40px; background:color-mix(in oklab,var(--wd-primary-fg) 4%,transparent); filter:blur(48px); }
  #page-settings .wd-sh-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  #page-settings .wd-sh-kicker{ font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:color-mix(in oklab,var(--wd-primary-fg) 70%,transparent); }
  #page-settings .wd-sh-pill{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--wd-radius-md); border:1px solid color-mix(in oklab,var(--wd-primary-fg) 20%,transparent); background:color-mix(in oklab,var(--wd-primary-fg) 10%,transparent); color:color-mix(in oklab,var(--wd-primary-fg) 85%,transparent); padding:4px 10px; font-size:11px; font-weight:500; flex:0 0 auto; }
  #page-settings .wd-sh-pill svg{ width:14px; height:14px; }
  #page-settings .wd-sh-name{ margin-top:20px; font-family:var(--wd-font-arabic); font-size:26px; line-height:1.05; letter-spacing:-0.02em; font-weight:640; color:var(--wd-primary-fg); }
  #page-settings .wd-sh-sub{ margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:color-mix(in oklab,var(--wd-primary-fg) 80%,transparent); }
  #page-settings .wd-sh-sub [data-hero="email"]{ direction:ltr; unicode-bidi:isolate; }
  #page-settings .wd-sh-dot{ opacity:.5; }

  /* ===================== Stage 3: card details (SPEC 1/12/13 + EmptyBlock) ===================== */
  /* §1 Account Row */
  #page-settings #accountCard .urow{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-lg)!important; background:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; }
  #page-settings #accountCard .uavatar{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; }
  #page-settings #accountCard .uname{ color:var(--wd-foreground)!important; }
  #page-settings #accountCard .umail{ color:var(--wd-muted-fg)!important; }
  #page-settings .ubadge-admin{ background:color-mix(in oklab,var(--wd-primary) 12%,transparent)!important; color:var(--wd-primary)!important; }
  #page-settings .ubadge-emp{ background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; }
  #page-settings .ubadge-on{ background:color-mix(in oklab,var(--wd-success) 14%,transparent)!important; color:var(--wd-success)!important; }
  #page-settings .ubadge-off{ background:color-mix(in oklab,var(--wd-danger) 12%,transparent)!important; color:var(--wd-danger)!important; }
  /* §2 branch rows / §9 saved-family rows: neutral hairline surfaces */
  #page-settings #branchesList .branch-row, #page-settings .ucard, #page-settings .gcard{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-lg)!important; background:var(--wd-card)!important; }
  /* §3 identity logo preview */
  #page-settings #identLogoPrev{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-lg)!important; background:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; }
  /* §12 Users toolbar + sub-sections */
  #page-settings .um-sec{ color:var(--wd-foreground)!important; font-size:13px!important; font-weight:600!important; border-top:1px solid color-mix(in oklab,var(--wd-border) 55%,transparent)!important; }
  #page-settings .um-sec svg{ color:var(--wd-muted-fg)!important; }
  #page-settings .um-search input{ border:1px solid color-mix(in oklab,var(--wd-foreground) 18%,transparent)!important; background-color:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; color:var(--wd-foreground)!important; border-radius:var(--wd-radius-md)!important; min-height:44px!important; }
  #page-settings .um-search input:focus{ border-color:var(--wd-ring)!important; box-shadow:0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }
  #page-settings .um-search > svg{ color:var(--wd-muted-fg)!important; }
  #page-settings .um-mini{ border:1px solid color-mix(in oklab,var(--wd-foreground) 18%,transparent)!important; background-color:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; color:var(--wd-foreground)!important; border-radius:var(--wd-radius-md)!important; min-height:44px!important; }
  #page-settings .um-mini:focus{ border-color:var(--wd-ring)!important; box-shadow:0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }
  /* §13 Audit collapsible (chevron rotates on OPEN per handoff) */
  #page-settings #auditCard .cc-head{ cursor:pointer; }
  #page-settings #auditCard .cc-head > svg:first-child{ width:34px; height:34px; padding:8px; box-sizing:content-box; border-radius:999px; background:color-mix(in oklab,var(--wd-primary) 10%,transparent); color:var(--wd-primary); flex:0 0 auto; }
  #page-settings #auditCard .cc-chev{ color:var(--wd-muted-fg)!important; }
  #page-settings #auditCard.is-coll .cc-chev{ transform:rotate(0deg)!important; }
  #page-settings #auditCard:not(.is-coll) .cc-chev{ transform:rotate(180deg)!important; }
  #page-settings .hm-refresh{ background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; border-radius:var(--wd-radius-md)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; }
  /* EmptyBlock (dashed placeholders) */
  #page-settings .ds-empty-state, #page-settings .an-ph{ border:1px dashed color-mix(in oklab,var(--wd-border) 80%,transparent)!important; border-radius:var(--wd-radius-lg)!important; background:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; }
  #page-settings .ds-empty-state svg, #page-settings .ds-empty-state .ds-empty-ic, #page-settings .an-ph-ic{ color:var(--wd-muted-fg)!important; opacity:.6; background:var(--wd-muted)!important; }
  #page-settings .ds-empty-state .ds-empty-title{ color:var(--wd-foreground)!important; }
  #page-settings .ds-empty-state .ds-empty-sub, #page-settings .an-ph-t{ color:var(--wd-muted-fg)!important; }

  @media (min-width:768px){
    #page-settings .wd-set-hero{ padding:28px; }
    #page-settings .wd-sh-name{ font-size:32px; }
    #page-settings .um-filters{ display:grid; grid-template-columns:repeat(3,1fr); }
  }
}
/* ==== from index.html <style data-wadih-archive> (v435 split) ==== */
/* ==========================================================================
   Archive / Monthly-Reports "Layered Depth" handoff — Stage 1: foundation tokens
   + shared card/input/button/collapsible language. Scoped to #page-archive ONLY.
   Official oklch tokens (wd-namespace, light+dark). Presentation only — no JS,
   no logic, no id or data-attr or text change; all fields/buttons/handlers kept.
   Hero (SPEC section 2) and layout split are later stages.
   ========================================================================== */
#page-archive{
  --wd-radius-sm:6px; --wd-radius-md:10px; --wd-radius-lg:14px; --wd-radius-xl:18px; --wd-radius-2xl:22px;
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-accent:oklch(0.58 0.12 165); --wd-accent-fg:oklch(0.99 0.003 250); --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-success:oklch(0.58 0.14 155); --wd-warning:oklch(0.75 0.14 80); --wd-danger:oklch(0.57 0.20 27); --wd-info:oklch(0.60 0.10 235);
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e2:0 4px 12px oklch(0 0 0 / 0.06);
  --wd-motion-medium:240ms; --wd-ease-emph:cubic-bezier(0.3,0,0,1);
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif; --wd-font-num:'Inter','Cairo',ui-sans-serif,system-ui,sans-serif;
}
[data-theme="dark"] #page-archive{
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 260);
  --wd-card:oklch(0.20 0.02 260); --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-accent:oklch(0.68 0.13 165); --wd-accent-fg:oklch(0.16 0.02 260); --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-success:oklch(0.72 0.15 155); --wd-warning:oklch(0.82 0.14 80); --wd-danger:oklch(0.70 0.19 27); --wd-info:oklch(0.72 0.11 235);
}
@media screen{
  #page-archive{ background:var(--wd-background); color:var(--wd-foreground); font-family:var(--wd-font-arabic); }
  /* ---- Cards (surface language) ---- */
  #page-archive .card{ border-radius:var(--wd-radius-xl)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; background-image:none!important; box-shadow:var(--wd-e1)!important; backdrop-filter:none!important; }
  #page-archive .card:not(.day-coll):hover{ box-shadow:var(--wd-e1)!important; }
  /* ---- Section / card titles ---- */
  #page-archive .card > .card-title{ font-size:13px!important; font-weight:600!important; letter-spacing:-0.005em; color:var(--wd-foreground)!important; }
  #page-archive .card > .card-title > svg:first-child{ color:var(--wd-muted-fg); }
  #page-archive .card > .card-title .en{ font-size:10px; color:var(--wd-muted-fg); font-weight:500; }
  /* ---- Collapsible report cards (SPEC section 7 ReportCard header) ---- */
  #page-archive .card.day-coll{ overflow:hidden; }
  #page-archive .card.day-coll > .card-title.day-coll-h{ cursor:pointer; padding:2px 0; transition:color var(--wd-motion-medium) ease; }
  #page-archive .card.day-coll > .card-title.day-coll-h > svg:first-child{ width:34px; height:34px; padding:8px; box-sizing:content-box; border-radius:999px; background:color-mix(in oklab,var(--wd-primary) 10%,transparent); color:var(--wd-primary); flex:0 0 auto; }
  #page-archive .card.day-coll > .card-title.day-coll-h .hm-chev{ margin-inline-start:auto!important; width:16px!important; height:16px!important; color:var(--wd-muted-fg)!important; transition:transform var(--wd-motion-medium) var(--wd-ease-emph); }
  #page-archive .card.day-coll.is-coll > .card-title.day-coll-h .hm-chev{ transform:rotate(0deg)!important; }
  #page-archive .card.day-coll:not(.is-coll) > .card-title.day-coll-h .hm-chev{ transform:rotate(180deg)!important; }
  /* ---- Inputs / selects / dates / labels (SPEC section 8) ---- */
  #page-archive .field label, #page-archive .period-date-lbl{ font-size:12px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; }
  #page-archive .field label svg{ width:14px; height:14px; color:var(--wd-muted-fg); }
  #page-archive .input, #page-archive .select, #page-archive .dd-toggle{ min-height:44px!important; border-radius:var(--wd-radius-md)!important; border:1px solid color-mix(in oklab,var(--wd-foreground) 18%,transparent)!important; background-color:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; color:var(--wd-foreground)!important; box-shadow:none!important; }
  #page-archive .input:focus, #page-archive .select:focus, #page-archive .dd-toggle:focus{ border-color:var(--wd-ring)!important; box-shadow:0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }
  #page-archive .input.num, #page-archive .num{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; }
  /* ---- Buttons (token variants) ---- */
  #page-archive .btn.btn-primary, #page-archive .ds-btn.ds-btn-primary{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; border-color:transparent!important; border-radius:var(--wd-radius-md)!important; box-shadow:var(--wd-e1), 0 6px 16px -12px color-mix(in oklab,var(--wd-primary) 55%,transparent), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 18%,transparent)!important; }
  #page-archive .btn.btn-accent{ background:var(--wd-accent)!important; color:var(--wd-accent-fg)!important; border-color:transparent!important; border-radius:var(--wd-radius-md)!important; box-shadow:var(--wd-e1)!important; }
  #page-archive .btn.btn-ghost{ background:var(--wd-card)!important; color:var(--wd-foreground)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-md)!important; }
  #page-archive #arPeriodClear, #page-archive #famResetDates{ background:var(--wd-card)!important; color:var(--wd-danger)!important; border:1px solid color-mix(in oklab,var(--wd-danger) 30%,transparent)!important; border-radius:var(--wd-radius-md)!important; box-shadow:none!important; }
  #page-archive #arPeriodClear:hover, #page-archive #famResetDates:hover{ background:color-mix(in oklab,var(--wd-danger) 5%,var(--wd-card))!important; }
  /* ---- Period filter card (SPEC section 4) ---- */
  #page-archive .period-card{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-xl)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; }
  #page-archive .period-card-ic{ background:color-mix(in oklab,var(--wd-primary) 10%,transparent)!important; color:var(--wd-primary)!important; }
  #page-archive .period-card-ic svg{ color:var(--wd-primary)!important; }
  #page-archive .period-card-t{ color:var(--wd-foreground)!important; font-weight:600; }
  #page-archive .period-card-d{ color:var(--wd-muted-fg)!important; }
  /* ---- Summary chips (SPEC section 2 archiveSummary) — calm token tiles ---- */
  #page-archive #archiveSummary .stat{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:color-mix(in oklab,var(--wd-foreground) 4%,var(--wd-card))!important; border-radius:var(--wd-radius-md)!important; box-shadow:none!important; }
  #page-archive #archiveSummary .stat::before, #page-archive .card .stat::before{ background:var(--wd-primary)!important; width:3px!important; }
  #page-archive #archiveSummary .stat.a::before{ background:var(--wd-accent)!important; }
  #page-archive #archiveSummary .stat.i::before{ background:var(--wd-info)!important; }
  #page-archive .stat .s-lbl{ font-size:11px!important; color:var(--wd-muted-fg)!important; font-weight:500!important; }
  #page-archive .stat .s-val{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; font-weight:640!important; color:var(--wd-foreground)!important; }
  /* ---- Statistics list rows ---- */
  #page-archive .dash-list-head{ color:var(--wd-foreground)!important; font-size:12.5px; font-weight:600; }
  #page-archive .dash-list-head svg{ color:var(--wd-muted-fg); }
  #page-archive .dash-viewall{ color:var(--wd-primary)!important; font-weight:600; }
  #page-archive .days-count-pill, #page-archive .ds-badge, #page-archive #archiveDaysCount{ background:color-mix(in oklab,var(--wd-muted) 100%,transparent)!important; color:var(--wd-muted-fg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; }

  /* ---- §6 أيام الشهر header (SPEC 6 — muted bubble) ---- */
  #page-archive .card.wd-arch-days > #archiveDaysToggle{ font-size:13.5px!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  #page-archive .card.wd-arch-days > #archiveDaysToggle > svg[data-lucide="calendar-days"]{ width:34px; height:34px; padding:8px; box-sizing:content-box; border-radius:999px; background:var(--wd-muted); color:var(--wd-muted-fg); flex:0 0 auto; }
  #page-archive .card.wd-arch-days > #archiveDaysToggle > svg#archiveDaysChevron{ width:16px; height:16px; color:var(--wd-muted-fg); }
  /* ---- §7.2 StatRow (dashTop / dashTopProd / dashTopRent) — token rows + primary rank bubble ---- */
  #page-archive #dashTop .move, #page-archive #dashTopProd .move, #page-archive #dashTopRent .move{ background:transparent!important; border:0!important; border-bottom:1px solid color-mix(in oklab,var(--wd-border) 55%,transparent)!important; border-radius:0!important; padding:10px 2px!important; margin:0!important; gap:12px; }
  #page-archive #dashTop .move:last-child, #page-archive #dashTopProd .move:last-child, #page-archive #dashTopRent .move:last-child{ border-bottom:0!important; }
  #page-archive #dashTop .m-ico, #page-archive #dashTopProd .m-ico, #page-archive #dashTopRent .m-ico{ width:28px!important; height:28px!important; border-radius:999px!important; background:color-mix(in oklab,var(--wd-primary) 10%,transparent)!important; flex:0 0 auto; box-shadow:none!important; }
  #page-archive #dashTop .m-ico span, #page-archive #dashTopProd .m-ico span, #page-archive #dashTopRent .m-ico span{ color:var(--wd-primary)!important; font-family:var(--wd-font-num)!important; font-size:12px!important; }
  #page-archive #dashTop .m-info .t, #page-archive #dashTopProd .m-info .t, #page-archive #dashTopRent .m-info .t{ font-size:13px; font-weight:600; color:var(--wd-foreground)!important; }
  #page-archive #dashTop .m-info .n, #page-archive #dashTopProd .m-info .n, #page-archive #dashTopRent .m-info .n{ font-size:11px; color:var(--wd-muted-fg)!important; }
  #page-archive #dashTop .move .num, #page-archive #dashTopProd .move .num, #page-archive #dashTopRent .move .num{ color:var(--wd-foreground)!important; font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; font-weight:640; }
  /* ---- Empty-state placeholders inside report cards ---- */
  #page-archive .an-ph{ border:1px dashed color-mix(in oklab,var(--wd-border) 80%,transparent)!important; border-radius:var(--wd-radius-lg)!important; background:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; }
  #page-archive .an-ph-ic{ background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; border-radius:var(--wd-radius-md)!important; }
  #page-archive .an-ph-t{ color:var(--wd-muted-fg)!important; }
  #page-archive .stmt-sel-wrap .stmt-clear{ color:var(--wd-muted-fg)!important; }
  #page-archive .days-count-pill{ }

  /* ---- Stage 3: top-section split (SPEC 3-5) — SectionTitle + layout ---- */
  #page-archive .wd-arch-sectitle{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 10px; }
  #page-archive .wd-arch-sect{ position:relative; font-size:13px; font-weight:600; letter-spacing:-0.005em; color:var(--wd-foreground); padding-bottom:6px; }
  #page-archive .wd-arch-sect::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:20px; height:1.5px; border-radius:999px; background:color-mix(in oklab,var(--wd-foreground) 12%,transparent); }
  #page-archive .wd-arch-hint{ font-size:11px; color:var(--wd-muted-fg); white-space:nowrap; }
  #page-archive .card.wd-arch-range{ border-radius:var(--wd-radius-lg)!important; }
  #page-archive .wd-arch-grid2{ display:grid; grid-template-columns:1fr; gap:16px; }
  /* Duplication handled per handoff: summary lives in the Hero; the in-card
     #archiveSummary is hidden (kept in DOM so the app still populates it and the
     hero mirror still reads it — no data/logic change). */
  #page-archive #archiveSummary{ display:none!important; }
  /* Period dates 2-col + month-report filters row on desktop (RESPONSIVE) */
  #page-archive .period-dates{ display:grid; grid-template-columns:1fr; gap:12px; }
  #page-archive .card.wd-arch-month .row-flex{ display:flex; flex-direction:column; gap:10px; }
  @media (min-width:768px){
    #page-archive .wd-arch-grid2{ grid-template-columns:repeat(2,1fr); }
    #page-archive .period-dates{ grid-template-columns:repeat(2,1fr); }
    #page-archive .card.wd-arch-month .row-flex{ flex-direction:row; }
  }

  /* ---- Reports Hero (SPEC section 2) — layered display card, --primary ---- */
  #page-archive .wd-arch-hero{ position:relative; overflow:hidden; margin-bottom:16px; padding:20px; border-radius:var(--wd-radius-2xl); border:1px solid color-mix(in oklab,var(--wd-primary) 20%,transparent); background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab,var(--wd-primary) 85%,black)); color:var(--wd-primary-fg); box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 16%,transparent); }
  [data-theme="dark"] #page-archive .wd-arch-hero{ background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab,var(--wd-primary) 80%,black)); box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 12%,transparent); }
  #page-archive .wd-arch-hero > *{ position:relative; z-index:1; }
  #page-archive .wd-ah-glow{ position:absolute; z-index:0; border-radius:999px; pointer-events:none; }
  #page-archive .wd-ah-glow-a{ width:192px; height:192px; top:-48px; inset-inline-end:-48px; background:color-mix(in oklab,var(--wd-primary-fg) 5%,transparent); filter:blur(60px); }
  #page-archive .wd-ah-glow-b{ width:128px; height:128px; bottom:-40px; inset-inline-start:-40px; background:color-mix(in oklab,var(--wd-primary-fg) 4%,transparent); filter:blur(48px); }
  #page-archive .wd-ah-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  #page-archive .wd-ah-kicker{ font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:color-mix(in oklab,var(--wd-primary-fg) 70%,transparent); }
  #page-archive .wd-ah-pill{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--wd-radius-md); border:1px solid color-mix(in oklab,var(--wd-primary-fg) 20%,transparent); background:color-mix(in oklab,var(--wd-primary-fg) 10%,transparent); color:color-mix(in oklab,var(--wd-primary-fg) 85%,transparent); padding:4px 10px; font-size:11px; font-weight:500; flex:0 0 auto; }
  #page-archive .wd-ah-pill svg{ width:14px; height:14px; }
  #page-archive .wd-ah-month{ margin-top:20px; font-family:var(--wd-font-arabic); font-size:28px; line-height:1; letter-spacing:-0.025em; font-weight:640; color:var(--wd-primary-fg); }
  #page-archive .wd-ah-sub{ margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:color-mix(in oklab,var(--wd-primary-fg) 80%,transparent); }
  #page-archive .wd-ah-dot{ opacity:.5; }
  #page-archive .wd-ah-divider{ margin-top:20px; height:1px; background:linear-gradient(to left, transparent, color-mix(in oklab,var(--wd-primary-fg) 12%,transparent), transparent); }
  #page-archive .wd-ah-chips{ margin-top:16px; display:grid; grid-template-columns:1fr; gap:10px; }
  #page-archive .wd-ah-chip{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:var(--wd-radius-md); border:1px solid color-mix(in oklab,var(--wd-primary-fg) 15%,transparent); background:color-mix(in oklab,var(--wd-primary-fg) 10%,transparent); padding:12px 14px; }
  #page-archive .wd-ah-chip-l{ font-size:11.5px; font-weight:500; color:color-mix(in oklab,var(--wd-primary-fg) 85%,transparent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #page-archive .wd-ah-chip-v{ font-family:var(--wd-font-num); font-variant-numeric:tabular-nums; font-weight:640; font-size:14px; color:var(--wd-primary-fg); direction:ltr; unicode-bidi:isolate; white-space:nowrap; flex:0 0 auto; }
  #page-archive .wd-ah-chip-v small{ font-size:10px; font-weight:500; color:color-mix(in oklab,var(--wd-primary-fg) 70%,transparent); margin-inline-start:2px; }
  @media (min-width:768px){
    #page-archive .wd-arch-hero{ padding:28px; }
    #page-archive .wd-ah-month{ font-size:36px; }
    #page-archive .wd-ah-chips{ grid-template-columns:repeat(3,1fr); }
  }
}
/* ==== from index.html <style data-wadih-daily> (v435 split) ==== */
/* ==========================================================================
   Daily Workspace "Layered Depth" handoff — Stage 1: foundation tokens + Session
   Inputs card (SPEC §5). Scoped to #page-daily ONLY. Official oklch tokens
   (--wd-*, light+dark). Presentation only — no JS/logic/id/data-attr/text
   change; all fields/buttons/handlers preserved.
   ========================================================================== */
#page-daily{
  --wd-radius-sm:6px; --wd-radius-md:10px; --wd-radius-lg:14px; --wd-radius-xl:18px; --wd-radius-2xl:22px;
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-accent:oklch(0.58 0.12 165); --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-success:oklch(0.58 0.14 155); --wd-warning:oklch(0.75 0.14 80); --wd-warning-fg:oklch(0.18 0.02 260); --wd-danger:oklch(0.57 0.20 27); --wd-info:oklch(0.60 0.10 235);
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e2:0 4px 12px oklch(0 0 0 / 0.06); --wd-e3:0 12px 32px oklch(0 0 0 / 0.10);
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif; --wd-font-num:'Inter','Cairo',ui-sans-serif,system-ui,sans-serif;
}
[data-theme="dark"] #page-daily{
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 250);
  --wd-card:oklch(0.20 0.02 260); --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-accent:oklch(0.68 0.13 165); --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-success:oklch(0.72 0.15 155); --wd-warning:oklch(0.82 0.14 80); --wd-warning-fg:oklch(0.16 0.02 260); --wd-danger:oklch(0.70 0.19 27); --wd-info:oklch(0.72 0.11 235);
}
@media screen{
  /* ---- Session Inputs card (SPEC §5): the card that holds #branch ---- */
  #page-daily .card:has(#branch){ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; background-image:none!important; box-shadow:var(--wd-e1)!important; padding:20px!important; backdrop-filter:none!important; }
  #page-daily .card:has(#branch) .card-title{ font-size:13px!important; font-weight:600!important; letter-spacing:-0.005em; color:var(--wd-foreground)!important; }
  #page-daily .card:has(#branch) .card-title > svg:first-child{ color:var(--wd-muted-fg); }
  #page-daily .card:has(#branch) .field label{ font-size:12px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; }
  #page-daily .card:has(#branch) .field label svg{ width:14px; height:14px; color:var(--wd-muted-fg); }
  #page-daily .card:has(#branch) .branch-row{ border:none!important; padding:0!important; margin:0!important; background:transparent!important; box-shadow:none!important; }
  #page-daily .card:has(#branch) .select, #page-daily .card:has(#branch) .dd-toggle, #page-daily .card:has(#branch) .input{ min-height:44px!important; border-radius:var(--wd-radius-md)!important; border:1px solid color-mix(in oklab,var(--wd-foreground) 18%, transparent)!important; background-color:color-mix(in oklab,var(--wd-foreground) 3%, var(--wd-card))!important; color:var(--wd-foreground)!important; box-shadow:none!important; }
  #page-daily .card:has(#branch) .select:focus, #page-daily .card:has(#branch) .dd-toggle:focus, #page-daily .card:has(#branch) .input:focus{ border-color:var(--wd-ring)!important; box-shadow:0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }
  #page-daily .card:has(#branch) .input.num{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; text-align:start!important; direction:ltr; }
  #page-daily .card:has(#branch) .hint{ font-size:11px!important; color:color-mix(in oklab,var(--wd-muted-fg) 80%,transparent)!important; }

  /* ---- Session Hero (SPEC §4): layered display card, --primary ---- */
  #page-daily .wd-daily-hero{ position:relative; overflow:hidden; margin-bottom:14px; padding:20px; border-radius:var(--wd-radius-2xl); border:1px solid color-mix(in oklab,var(--wd-primary) 20%,transparent); background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab,var(--wd-primary) 85%,black)); color:var(--wd-primary-fg); box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 16%,transparent); }
  [data-theme="dark"] #page-daily .wd-daily-hero{ background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab,var(--wd-primary) 80%,black)); box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 12%,transparent); }
  #page-daily .wd-daily-hero > *{ position:relative; z-index:1; }
  #page-daily .wd-dh-glow{ position:absolute; z-index:0; border-radius:999px; pointer-events:none; }
  #page-daily .wd-dh-glow-a{ width:220px; height:220px; top:-80px; inset-inline-start:-60px; background:color-mix(in oklab,var(--wd-primary-fg) 5%,transparent); filter:blur(60px); }
  #page-daily .wd-dh-glow-b{ width:180px; height:180px; bottom:-70px; inset-inline-end:-50px; background:color-mix(in oklab,var(--wd-primary-fg) 4%,transparent); filter:blur(48px); }
  #page-daily .wd-dh-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  #page-daily .wd-dh-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:color-mix(in oklab,var(--wd-primary-fg) 70%,transparent); }
  #page-daily .wd-dh-pill{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid color-mix(in oklab,var(--wd-primary-fg) 20%,transparent); background:color-mix(in oklab,var(--wd-primary-fg) 10%,transparent); color:color-mix(in oklab,var(--wd-primary-fg) 90%,transparent); }
  #page-daily .wd-dh-pill svg{ width:14px; height:14px; }
  #page-daily .wd-dh-month{ margin-top:14px; font-family:var(--wd-font-arabic); font-size:28px; line-height:1.05; font-weight:640; letter-spacing:-0.025em; color:var(--wd-primary-fg); }
  #page-daily .wd-dh-sub{ margin-top:6px; font-size:12px; color:color-mix(in oklab,var(--wd-primary-fg) 80%,transparent); }
  #page-daily .wd-dh-divider{ height:1px; margin:16px 0; background:linear-gradient(90deg, transparent, color-mix(in oklab,var(--wd-primary-fg) 12%,transparent), transparent); }
  #page-daily .wd-dh-chips{ display:grid; grid-template-columns:1fr; gap:10px; }
  #page-daily .wd-dh-bchip{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:12px 14px; border-radius:var(--wd-radius-md); border:1px solid color-mix(in oklab,var(--wd-primary-fg) 15%,transparent); background:color-mix(in oklab,var(--wd-primary-fg) 10%,transparent); }
  #page-daily .wd-dh-bchip-l{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:color-mix(in oklab,var(--wd-primary-fg) 85%,transparent); }
  #page-daily .wd-dh-bchip-l svg{ width:16px; height:16px; color:color-mix(in oklab,var(--wd-primary-fg) 70%,transparent); }
  #page-daily .wd-dh-bchip-v{ display:inline-flex; align-items:baseline; gap:4px; color:var(--wd-primary-fg); }
  #page-daily .wd-dh-bchip-v .num{ font-family:var(--wd-font-num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum","lnum"; font-size:16px; font-weight:640; direction:ltr; }
  #page-daily .wd-dh-cur{ font-size:11px; font-weight:500; color:color-mix(in oklab,var(--wd-primary-fg) 70%,transparent); }
  #page-daily .wd-dh-infochips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  #page-daily .wd-dh-ichip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--wd-radius-md); font-size:11.5px; font-weight:500; border:1px solid color-mix(in oklab,var(--wd-primary-fg) 15%,transparent); background:color-mix(in oklab,var(--wd-primary-fg) 8%,transparent); color:color-mix(in oklab,var(--wd-primary-fg) 88%,transparent); }
  #page-daily .wd-dh-ichip svg{ width:13px; height:13px; color:color-mix(in oklab,var(--wd-primary-fg) 70%,transparent); }

  /* ---- Tools (SPEC §6): square button-cards, no wrapper card ----
     #addDayBtn carries .ds-fab (position:fixed on mobile = the existing Mobile FAB,
     which belongs to §8 and is intentionally NOT touched here). So on mobile it is
     excluded and left as-is, and the 3 remaining tools fill a 3-col row; on desktop
     (>=768px, where .ds-fab turns static) add-day is styled as the 4th primary
     button and the grid becomes 4 columns per the handoff. */
  #page-daily .card:has(.tools-grid){ border:none!important; background:transparent!important; background-image:none!important; box-shadow:none!important; padding:0!important; backdrop-filter:none!important; margin-bottom:14px; }
  #page-daily .card:has(.tools-grid) .card-title{ font-size:13px!important; font-weight:600!important; letter-spacing:-0.005em; color:var(--wd-foreground)!important; margin-bottom:12px; }
  #page-daily .card:has(.tools-grid) .card-title svg{ color:var(--wd-muted-fg); }
  #page-daily .tools-grid{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:8px!important; }
  #page-daily .tools-grid .tool-btn:not(.ds-fab){ flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:10px!important; min-height:96px!important; padding:16px 10px!important; border-radius:var(--wd-radius-xl)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; color:var(--wd-foreground)!important; box-shadow:var(--wd-e1)!important; font-size:12px!important; font-weight:600!important; line-height:1.25!important; text-align:center; }
  #page-daily .tools-grid .tool-btn:not(.ds-fab) svg{ width:20px!important; height:20px!important; padding:9px; box-sizing:content-box; border-radius:999px; background:var(--wd-muted); color:var(--wd-muted-fg); }
  #page-daily .tools-grid .tool-btn:not(.ds-fab):hover{ box-shadow:var(--wd-e2)!important; }
  #page-daily .tools-grid .tool-btn:not(.ds-fab):active{ transform:scale(.96); }
  #page-daily .tools-grid .tool-btn:not(.ds-fab):focus-visible{ outline:none; box-shadow:var(--wd-e1), 0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }
  #page-daily .tools-grid .tool-btn.danger:not(.ds-fab){ background:var(--wd-card)!important; color:var(--wd-foreground)!important; border-color:color-mix(in oklab,var(--wd-danger) 25%,transparent)!important; box-shadow:var(--wd-e1)!important; }
  #page-daily .tools-grid .tool-btn.danger:not(.ds-fab) svg{ background:color-mix(in oklab,var(--wd-danger) 10%,transparent); color:var(--wd-danger); }
  #page-daily .tools-grid .tool-btn.danger:not(.ds-fab):hover{ background:color-mix(in oklab,var(--wd-danger) 5%,var(--wd-card))!important; box-shadow:var(--wd-e2)!important; }

  /* ===================== Days & Family (SPEC §7) — visual re-skin only ====================
     Applies the handoff visual language to the EXISTING day/family editor elements.
     No element hidden/removed; collapse mechanics (.is-coll display:none) left intact. */
  #page-daily #daysList .day.ds-card{ border-radius:var(--wd-radius-xl)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; overflow:hidden!important; margin-bottom:12px!important; transition:box-shadow var(--wd-motion-base,180ms) ease; }
  #page-daily #daysList .day.ds-card:hover{ box-shadow:var(--wd-e2)!important; }
  /* Day header (SPEC §7 Day Card header) */
  #page-daily .day-head{ display:flex!important; align-items:center!important; gap:12px!important; padding:16px!important; cursor:pointer; transition:background var(--wd-motion-base,180ms) ease; }
  #page-daily .day-head:hover{ background:color-mix(in oklab,var(--wd-foreground) 4%,transparent)!important; }
  #page-daily .day-num.v5-day-chip{ width:44px!important; height:44px!important; min-width:44px!important; border-radius:var(--wd-radius-md)!important; background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; display:flex!important; align-items:center; justify-content:center; box-shadow:0 0 0 4px color-mix(in oklab,var(--wd-background) 92%,transparent), var(--wd-e1)!important; }
  #page-daily .day-num.v5-day-chip svg{ width:18px!important; height:18px!important; color:var(--wd-primary-fg)!important; }
  #page-daily .day-title.v5-day-title{ flex:1!important; min-width:0; font-size:15px!important; font-weight:600!important; letter-spacing:-0.01em; color:var(--wd-foreground)!important; }
  #page-daily .day-title .dt-sub{ display:block; font-size:11.5px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; margin-top:2px; }
  #page-daily .day-badge.v5-day-net{ display:flex!important; flex-direction:column; align-items:flex-end; gap:2px; text-align:end; flex:0 0 auto; }
  #page-daily .day-badge.v5-day-net .db-lbl{ font-size:10.5px!important; color:var(--wd-muted-fg)!important; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
  #page-daily .day-badge.v5-day-net .db-lock{ width:12px; height:12px; }
  #page-daily .day-badge.v5-day-net .num{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; font-size:14px!important; font-weight:640!important; }
  #page-daily .day-badge .ds-text-success, #page-daily .day-body .ds-text-success{ color:var(--wd-success)!important; }
  #page-daily .day-badge .ds-text-danger, #page-daily .day-body .ds-text-danger{ color:var(--wd-danger)!important; }
  #page-daily .day-chev.v5-day-chev svg{ width:16px!important; height:16px!important; color:var(--wd-muted-fg)!important; transition:transform var(--wd-motion-medium,240ms) var(--wd-ease-emph,cubic-bezier(0.3,0,0,1)); }
  #page-daily .day.open .day-chev.v5-day-chev svg{ transform:rotate(180deg); }
  /* Day body + section headers */
  #page-daily .day-body{ padding:0 16px 16px!important; }
  #page-daily .day-body .section-h{ font-size:13px!important; font-weight:600!important; color:var(--wd-foreground)!important; display:flex; align-items:center; gap:8px; margin:16px 0 10px; }
  #page-daily .day-body .section-h > svg:first-child{ width:16px; height:16px; color:var(--wd-muted-fg); }
  #page-daily .day-body .section-h .en{ font-size:10px; color:var(--wd-muted-fg); font-weight:500; }
  /* Collapsible blocks (ملخص الأسر / إدارة النقد / إدارة مدى / ضريبة) — SPEC §7 CollapsibleBlock */
  #page-daily .day-body .day-coll{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-lg)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; overflow:hidden; margin-top:14px!important; }
  #page-daily .day-body .day-coll-h{ margin:0!important; padding:14px 16px!important; cursor:pointer; transition:background var(--wd-motion-base,180ms) ease; }
  #page-daily .day-body .day-coll-h:hover{ background:color-mix(in oklab,var(--wd-foreground) 4%,transparent)!important; }
  #page-daily .day-body .day-coll-h .hm-chev{ margin-inline-start:auto!important; width:16px!important; height:16px!important; color:var(--wd-muted-fg)!important; }
  #page-daily .day-body .day-coll > :not(.day-coll-h){ padding:0 16px 16px; }
  /* Family cards (SPEC §7 Family Card) */
  #page-daily [data-fams]{ display:grid; grid-template-columns:1fr; gap:12px; }
  #page-daily .day-body .fam{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-lg)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; padding:16px!important; transition:box-shadow var(--wd-motion-base,180ms) ease; }
  #page-daily .day-body .fam:hover{ box-shadow:var(--wd-e2)!important; }
  #page-daily .day-body .fam-no{ width:36px!important; height:36px!important; border-radius:999px!important; background:color-mix(in oklab,var(--wd-primary) 10%,transparent)!important; color:var(--wd-primary)!important; display:flex; align-items:center; justify-content:center; font-family:var(--wd-font-num); font-weight:640; font-size:13px; }
  #page-daily .day-body .fam-collapsed-summary .fcs-lbl{ color:var(--wd-muted-fg)!important; }
  /* Stat tiles (SPEC §7 DailyStat) */
  #page-daily .day-body .stat{ border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:color-mix(in oklab,var(--wd-foreground) 4%,var(--wd-card))!important; border-radius:var(--wd-radius-md)!important; padding:12px!important; box-shadow:none!important; }
  #page-daily .day-body .stat .s-lbl{ font-size:11px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; }
  #page-daily .day-body .stat .s-lbl svg{ width:13px; height:13px; }
  #page-daily .day-body .stat .s-val{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; font-weight:640!important; color:var(--wd-foreground)!important; }
  /* Stat accent bar (::before) recoloured from teal/gold to --wd tokens */
  #page-daily .day-body .stat::before{ background:var(--wd-primary)!important; width:3px!important; }
  #page-daily .day-body .stat.i::before{ background:var(--wd-info)!important; }
  #page-daily .day-body .stat.a::before{ background:var(--wd-accent)!important; }
  #page-daily .day-body .stat.g::before{ background:var(--wd-warning)!important; }
  #page-daily .day-body .stat.k::before{ background:var(--wd-success)!important; }
  #page-daily .day-body .stat.w::before{ background:var(--wd-warning)!important; }
  #page-daily .day-body .stat.r::before{ background:var(--wd-danger)!important; }
  /* Family calc tiles (.fam-calc .fc) — calm token tiles, semantic value colors */
  #page-daily .day-body .fam .fam-calc .fc{ background:color-mix(in oklab,var(--wd-foreground) 4%,var(--wd-card))!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-md)!important; box-shadow:none!important; }
  #page-daily .day-body .fam .fam-calc .fc .lbl{ color:var(--wd-muted-fg)!important; font-weight:500!important; }
  #page-daily .day-body .fam .fam-calc .fc .val{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; color:var(--wd-foreground)!important; }
  #page-daily .day-body .fam .fam-calc .fc.net{ background:color-mix(in oklab,var(--wd-success) 8%,var(--wd-card))!important; border-color:color-mix(in oklab,var(--wd-success) 22%,transparent)!important; }
  #page-daily .day-body .fam .fam-calc .fc.net .val{ color:var(--wd-success)!important; }
  #page-daily .day-body .fam .fam-calc .fc.month .val{ color:var(--wd-info)!important; }
  #page-daily .day-body .fam .fam-calc .fc.due .val{ color:var(--wd-warning)!important; }
  #page-daily .day-body .fam .fam-calc .fc.remain .val{ color:var(--wd-danger)!important; }
  /* Total field + product-manage button: token-based (override teal/gold) */
  #page-daily .day-body input.branch-total-input, #page-daily .day-body input.branch-total-input[readonly]{ color:var(--wd-foreground)!important; font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; background:color-mix(in oklab,var(--wd-primary) 8%,var(--wd-card))!important; border:1px solid color-mix(in oklab,var(--wd-primary) 22%,transparent)!important; }
  #page-daily .day-body .prod-manage-btn{ background:var(--wd-muted)!important; color:var(--wd-foreground)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; border-radius:var(--wd-radius-md)!important; }
  #page-daily .day-body .prod-manage-btn svg{ color:var(--wd-muted-fg)!important; }
  /* Inputs / labels inside the day (match §5 input language) */
  #page-daily .day-body .input, #page-daily .day-body .select{ min-height:44px!important; border-radius:var(--wd-radius-md)!important; border:1px solid color-mix(in oklab,var(--wd-foreground) 18%,transparent)!important; background-color:color-mix(in oklab,var(--wd-foreground) 3%,var(--wd-card))!important; color:var(--wd-foreground)!important; box-shadow:none!important; }
  #page-daily .day-body .input:focus, #page-daily .day-body .select:focus{ border-color:var(--wd-ring)!important; box-shadow:0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }
  #page-daily .day-body .input.num{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; direction:ltr; text-align:start!important; }
  #page-daily .day-body .field > label, #page-daily .day-body .mini > label{ font-size:12px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; }
  #page-daily .day-body .field > label svg, #page-daily .day-body .mini > label svg{ width:14px; height:14px; }
  /* Buttons inside the day (token-based, override teal accent incl. inline styles) */
  #page-daily .day-body .btn.btn-accent, #page-daily .day-body .btn.btn-primary{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; border-color:transparent!important; border-radius:var(--wd-radius-md)!important; }
  #page-daily .day-body .multi-open{ border-color:var(--wd-primary)!important; background:var(--wd-primary)!important; }
  #page-daily .day-body .multi-open .btn.btn-accent{ background:var(--wd-primary)!important; }

  /* ---- Mobile FAB — Add Day (SPEC §8) — re-skin of the existing #addDayBtn.ds-fab.
     Visual per handoff; bottom offset kept to clear the app's bottom nav (#tabs),
     which the standalone mock does not have. Static in the Tools grid on desktop. */
  #page-daily .ds-fab{ height:56px!important; padding:0 20px!important; border:none!important; border-radius:999px!important; background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; gap:8px!important; font-size:14px!important; font-weight:600!important; box-shadow:var(--wd-e3), 0 8px 20px -8px color-mix(in oklab,var(--wd-primary) 60%,transparent), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 20%,transparent)!important; }
  #page-daily .ds-fab svg{ width:20px!important; height:20px!important; color:var(--wd-primary-fg)!important; }
  #page-daily .ds-fab:active{ transform:scale(.97); }

  @media (min-width:640px){
    #page-daily .wd-daily-hero{ padding:28px; }
    #page-daily .wd-dh-month{ font-size:36px; }
    #page-daily .wd-dh-chips{ grid-template-columns:1fr 1fr; }
    #page-daily .tools-grid{ gap:12px!important; }
  }
  @media (min-width:768px){
    #page-daily .tools-grid{ grid-template-columns:repeat(4,1fr)!important; }
    #page-daily [data-fams]{ grid-template-columns:repeat(2,1fr); }
    #page-daily .tools-grid .tool-btn.ds-fab{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:10px!important; min-height:96px!important; height:auto!important; width:auto!important; padding:16px 10px!important; border-radius:var(--wd-radius-xl)!important; border:1px solid transparent!important; background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; font-size:12px!important; font-weight:600!important; line-height:1.25!important; text-align:center; box-shadow:var(--wd-e1), 0 6px 16px -12px color-mix(in oklab,var(--wd-primary) 55%,transparent), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 18%,transparent)!important; }
    #page-daily .tools-grid .tool-btn.ds-fab svg{ width:20px!important; height:20px!important; padding:9px; box-sizing:content-box; border-radius:999px; background:color-mix(in oklab,var(--wd-primary-fg) 15%,transparent); color:var(--wd-primary-fg); }
    #page-daily .tools-grid .tool-btn.ds-fab:hover{ box-shadow:var(--wd-e2), 0 6px 16px -12px color-mix(in oklab,var(--wd-primary) 55%,transparent), inset 0 1px 0 color-mix(in oklab,var(--wd-primary-fg) 18%,transparent)!important; }
  }
}
/* ==== from index.html <style data-wadih-dashboard> (v435 split) ==== */
/* ==========================================================================
   v467 (Stage 1) — Wadih Dashboard "Layered Depth" design handoff.
   Scoped to #page-home ONLY (the rest of the app keeps its teal system).
   Official design tokens (oklch, light + dark) ported as --wd-* + Hero, Quick
   Actions, Section titles re-skin. Presentation only — no JS/logic/id/data-*
   change; renderHome markup/IDs/handlers/KPIs preserved.
   ========================================================================== */
#page-home{
  /* radius */
  --wd-radius-sm:6px; --wd-radius-md:10px; --wd-radius-lg:14px; --wd-radius-xl:18px; --wd-radius-2xl:22px;
  /* colours (light) */
  --wd-background:oklch(0.99 0.003 250); --wd-foreground:oklch(0.18 0.02 260);
  --wd-card:oklch(1 0 0); --wd-card-fg:oklch(0.18 0.02 260);
  --wd-primary:oklch(0.42 0.09 245); --wd-primary-fg:oklch(0.99 0.003 250);
  --wd-muted:oklch(0.965 0.006 250); --wd-muted-fg:oklch(0.52 0.02 260);
  --wd-accent:oklch(0.58 0.12 165); --wd-accent-fg:oklch(0.99 0.003 250);
  --wd-border:oklch(0.92 0.008 255); --wd-input:oklch(0.94 0.008 255); --wd-ring:oklch(0.55 0.09 245);
  --wd-success:oklch(0.58 0.14 155); --wd-warning:oklch(0.75 0.14 80); --wd-warning-fg:oklch(0.18 0.02 260);
  --wd-danger:oklch(0.57 0.20 27); --wd-info:oklch(0.60 0.10 235);
  /* elevation + motion */
  --wd-e1:0 1px 2px oklch(0 0 0 / 0.04); --wd-e2:0 4px 12px oklch(0 0 0 / 0.06);
  --wd-motion-medium:240ms; --wd-ease-emph:cubic-bezier(0.3,0,0,1);
  /* type */
  --wd-font-arabic:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
  --wd-font-num:'Inter','Cairo',ui-sans-serif,system-ui,sans-serif;
}
[data-theme="dark"] #page-home, #page-home[data-theme="dark"]{
  --wd-background:oklch(0.16 0.02 260); --wd-foreground:oklch(0.97 0.005 250);
  --wd-card:oklch(0.20 0.02 260); --wd-card-fg:oklch(0.97 0.005 250);
  --wd-primary:oklch(0.72 0.10 240); --wd-primary-fg:oklch(0.16 0.02 260);
  --wd-muted:oklch(0.23 0.02 260); --wd-muted-fg:oklch(0.72 0.02 260);
  --wd-accent:oklch(0.68 0.13 165); --wd-accent-fg:oklch(0.16 0.02 260);
  --wd-border:oklch(1 0 0 / 8%); --wd-input:oklch(1 0 0 / 12%); --wd-ring:oklch(0.72 0.10 240);
  --wd-success:oklch(0.72 0.15 155); --wd-warning:oklch(0.82 0.14 80); --wd-warning-fg:oklch(0.16 0.02 260);
  --wd-danger:oklch(0.70 0.19 27); --wd-info:oklch(0.72 0.11 235);
}
@media screen{
  /* ---------- Page surface ---------- */
  #page-home{ background:var(--wd-background); color:var(--wd-foreground); font-family:var(--wd-font-arabic); }
  #page-home .stat-num, #page-home .hm-hero-val .stat-num, #page-home .hm-v .stat-num{ font-family:var(--wd-font-num)!important; font-variant-numeric:tabular-nums; font-feature-settings:"tnum","lnum"; }

  /* ---------- Section titles (SPEC §12) ---------- */
  #page-home .v5-sec-title{ font-size:13px!important; font-weight:600!important; letter-spacing:-0.005em; color:var(--wd-foreground)!important; position:relative; padding-bottom:6px; margin-bottom:12px; }
  #page-home .v5-sec-title::after{ content:""; position:absolute; bottom:0; inset-inline-end:0; height:1.5px; width:20px; border-radius:999px; background:color-mix(in oklab, var(--wd-foreground) 12%, transparent); }

  /* ---------- HERO — Layered Depth (SPEC §3) ---------- */
  #page-home .v5-hero.ds-card{
    border-radius:var(--wd-radius-2xl)!important; border:1px solid color-mix(in oklab, var(--wd-primary) 20%, transparent)!important;
    background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab, var(--wd-primary) 85%, black))!important;
    color:var(--wd-primary-fg)!important; box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab, var(--wd-primary-fg) 16%, transparent)!important;
    padding:20px!important; overflow:hidden; position:relative;
  }
  [data-theme="dark"] #page-home .v5-hero.ds-card{
    background:linear-gradient(180deg, var(--wd-primary), color-mix(in oklab, var(--wd-primary) 80%, black))!important;
    box-shadow:var(--wd-e2), inset 0 1px 0 color-mix(in oklab, var(--wd-primary-fg) 12%, transparent)!important;
  }
  #page-home .v5-hero *{ color:inherit; }
  #page-home .v5-hero .hm-eyebrow, #page-home .v5-hero-eyebrow, #page-home .v5-hero-caption{ color:color-mix(in oklab, var(--wd-primary-fg) 72%, transparent)!important; font-size:10.5px!important; font-weight:700!important; letter-spacing:0.2em; text-transform:uppercase; }
  #page-home .v5-hero .hm-title, #page-home .v5-hero-h1{ color:var(--wd-primary-fg)!important; }
  #page-home .v5-hero-amount .stat-num, #page-home #hmHeroToday .stat-num{ color:var(--wd-primary-fg)!important; font-size:clamp(36px,11vw,48px)!important; line-height:0.95!important; letter-spacing:-0.04em!important; font-weight:640!important; }
  #page-home #hmHeroToday.ds-text-success{ color:var(--wd-primary-fg)!important; }
  #page-home .v5-hero-amount .stat-cur, #page-home #hmHeroToday .stat-cur{ color:color-mix(in oklab, var(--wd-primary-fg) 70%, transparent)!important; font-size:15px!important; font-weight:500!important; transform:translateY(-3px); }
  #page-home .v5-hero-sub{ color:color-mix(in oklab, var(--wd-primary-fg) 80%, transparent)!important; font-size:12px!important; }
  /* hero chips (SPEC §16) */
  #page-home .v5-hero-chips .v5-chip{ height:28px; border-radius:var(--wd-radius-md); border:1px solid color-mix(in oklab, var(--wd-primary-fg) 15%, transparent)!important; background:color-mix(in oklab, var(--wd-primary-fg) 10%, transparent)!important; color:color-mix(in oklab, var(--wd-primary-fg) 90%, transparent)!important; font-size:12px!important; font-weight:500; padding:0 10px; }
  #page-home .v5-hero-chips .v5-chip svg{ color:color-mix(in oklab, var(--wd-primary-fg) 70%, transparent)!important; width:14px; height:14px; }
  #page-home .v5-hero-refresh{ background:color-mix(in oklab, var(--wd-primary-fg) 12%, transparent)!important; border:1px solid color-mix(in oklab, var(--wd-primary-fg) 15%, transparent)!important; color:var(--wd-primary-fg)!important; }
  #page-home .v5-hero-wm{ color:color-mix(in oklab, var(--wd-primary-fg) 6%, transparent)!important; }

  /* ---------- Quick Actions (SPEC §4) ---------- */
  #page-home .hm-quick .ds-btn.ds-btn-block{ border-radius:var(--wd-radius-xl)!important; border:1px solid color-mix(in oklab, var(--wd-border) 60%, transparent)!important; background:var(--wd-card)!important; color:var(--wd-foreground)!important; box-shadow:var(--wd-e1)!important; min-height:104px; }
  #page-home .hm-quick .ds-btn.ds-btn-block svg{ color:var(--wd-muted-fg); background:var(--wd-muted)!important; }
  #page-home .hm-quick .ds-btn.ds-btn-block:hover{ border-color:var(--wd-border)!important; box-shadow:var(--wd-e2)!important; }
  #page-home .hm-quick .ds-btn.ds-btn-primary{ background:var(--wd-primary)!important; color:var(--wd-primary-fg)!important; border-color:transparent!important; box-shadow:var(--wd-e1), 0 6px 16px -12px color-mix(in oklab, var(--wd-primary) 55%, transparent), inset 0 1px 0 color-mix(in oklab, var(--wd-primary-fg) 18%, transparent)!important; }
  #page-home .hm-quick .ds-btn.ds-btn-primary svg{ color:var(--wd-primary-fg)!important; background:color-mix(in oklab, var(--wd-primary-fg) 15%, transparent)!important; }

  /* ---------- Header kicker/title (SPEC §2) ---------- */
  #page-home .v5-hero-refresh svg{ transition:transform var(--wd-motion-medium) var(--wd-ease-emph); }
  #page-home .v5-hero-refresh:hover svg{ transform:rotate(120deg); }

  /* ---------- GroupedKpi — 3 collapsible groups (SPEC §7) ---------- */
  #page-home #hmCards.hm-grid{ display:block!important; grid-template-columns:none!important; }
  /* neutralise the old flat-grid card spans (v456) inside the new groups */
  #page-home #hmCards .wd-kgrid .hm-stat{ grid-column:auto!important; }
  #page-home .wd-kgroup{ border-radius:var(--wd-radius-lg); border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent); background:var(--wd-card); box-shadow:var(--wd-e1); overflow:hidden; margin-bottom:12px; transition:box-shadow var(--wd-motion-medium) var(--wd-ease-emph); }
  #page-home .wd-kgroup:hover{ box-shadow:var(--wd-e2); }
  #page-home .wd-kgroup-h{ width:100%; display:flex; align-items:center; gap:12px; padding:16px; background:transparent; border:none; cursor:pointer; font-family:inherit; text-align:start; min-height:44px; }
  #page-home .wd-kgroup-ic{ width:40px; height:40px; border-radius:var(--wd-radius-md); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--gtone); color:var(--wd-primary-fg); box-shadow:var(--wd-e1), 0 0 0 4px color-mix(in oklab, var(--wd-background) 92%, transparent); }
  #page-home .wd-kgroup-ic svg{ width:20px; height:20px; stroke-width:2; }
  #page-home .wd-kgroup-t{ flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--wd-foreground); }
  #page-home .wd-kgroup-chev{ width:20px!important; height:20px!important; color:var(--wd-muted-fg); flex:0 0 auto; margin-inline-start:auto; transition:transform var(--wd-motion-medium) var(--wd-ease-emph); }
  #page-home .wd-kgroup.is-coll .wd-kgroup-chev{ transform:rotate(180deg); }
  #page-home .wd-kgroup-body{ border-top:1px solid color-mix(in oklab,var(--wd-border) 70%,transparent); padding:12px; }
  #page-home .wd-kgrid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; margin-bottom:0!important; }
  @media(min-width:768px){ #page-home .wd-kgrid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } }
  /* KpiCard — typography only: no icon, label top, value bottom, tone dot */
  #page-home #hmCards .hm-stat{ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; padding:16px!important; min-height:96px!important; position:relative; }
  #page-home #hmCards .hm-stat:hover{ box-shadow:var(--wd-e2)!important; border-color:var(--wd-border)!important; }
  #page-home #hmCards .hm-stat .hm-ic{ display:none!important; }
  #page-home #hmCards .hm-stat .hm-l{ font-size:11px!important; font-weight:500!important; line-height:1.45!important; color:var(--wd-muted-fg)!important; margin-bottom:0!important; }
  #page-home #hmCards .hm-stat .stat-num{ font-size:22px!important; letter-spacing:-0.02em!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  #page-home #hmCards .hm-stat .stat-cur{ font-size:11.5px!important; color:color-mix(in oklab,var(--wd-muted-fg) 80%,transparent)!important; }
  /* tone dot at the bottom-start, coloured by the card's --ac tone */
  #page-home #hmCards .hm-stat::after{ content:""; position:absolute; inset-inline-start:16px; bottom:20px; width:6px; height:6px; border-radius:50%; background:var(--ac,var(--wd-muted-fg)); }

  /* ---------- Performance gauges (SPEC §5) ---------- */
  #page-home .exec-card{ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; }
  #page-home .perf-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; }
  #page-home .perf-cell{ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; padding:16px!important; }
  #page-home .perf-cell .perf-ring{ width:72px!important; height:72px!important; }
  #page-home .perf-cell .perf-ring svg{ width:72px!important; height:72px!important; }
  #page-home .perf-cell .perf-track{ stroke:color-mix(in oklab,var(--wd-border) 60%,transparent)!important; stroke-width:5!important; fill:none!important; }
  #page-home .perf-cell .wd-perf-arc{ stroke:var(--wd-muted-fg); stroke-width:5; fill:none; stroke-linecap:round; stroke-dasharray:4 326; opacity:.9; }
  #page-home .perf-cell.wd-tone-primary .wd-perf-arc{ stroke:var(--wd-primary); }
  #page-home .perf-cell.wd-tone-accent .wd-perf-arc{ stroke:var(--wd-accent); }
  #page-home .perf-cell .perf-none-t, #page-home .perf-cell .perf-center{ font-size:15px!important; font-weight:600!important; font-variant-numeric:tabular-nums; color:color-mix(in oklab,var(--wd-foreground) 55%,transparent)!important; }
  #page-home .perf-cell .perf-title{ font-size:12px!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  #page-home .perf-cell .perf-cap{ font-size:11px!important; color:var(--wd-muted-fg)!important; display:flex; align-items:center; justify-content:center; gap:5px; }
  #page-home .perf-cell .perf-cap::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--wd-muted-fg); flex:0 0 auto; }
  #page-home .perf-cell.wd-tone-primary .perf-cap::before{ background:var(--wd-primary); }
  #page-home .perf-cell.wd-tone-accent .perf-cap::before{ background:var(--wd-accent); }

  /* ---------- SmartAlert (SPEC §6) ---------- */
  #page-home .v5-section:has(#hmAlerts) .hm-panel{ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-warning) 15%,transparent)!important; box-shadow:0 0 0 1px color-mix(in oklab,var(--wd-warning) 5%,transparent), var(--wd-e1)!important; background:color-mix(in oklab,var(--wd-warning) 6%,transparent)!important; padding:16px!important; }
  #page-home .v5-section:has(#hmAlerts) .hm-ptitle{ font-size:12px!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  #page-home #hmAlerts .hm-insight{ background:transparent!important; border:none!important; }
  #page-home #hmAlerts .hm-insight-ic, #page-home #hmAlerts .hm-insight-i{ width:40px!important; height:40px!important; border-radius:var(--wd-radius-md)!important; background:var(--wd-warning)!important; color:var(--wd-warning-fg)!important; box-shadow:var(--wd-e1)!important; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
  #page-home #hmAlerts .hm-insight-t{ font-size:11px!important; line-height:1.6!important; color:var(--wd-muted-fg)!important; }

  /* ---------- Collapsible (SPEC §13): Reports + Insights + Performance panels ---------- */
  #page-home .hm-panel{ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; overflow:hidden; }
  #page-home .hm-panel .hm-ptitle{ display:flex!important; align-items:center; gap:12px; padding:16px 20px!important; font-size:14px!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  #page-home .hm-panel .hm-ptitle > svg:first-child{ width:16px; height:16px; padding:8px; box-sizing:content-box; border-radius:50%; background:var(--wd-muted); color:var(--wd-muted-fg); flex:0 0 auto; }
  #page-home .hm-panel .hm-ptitle .hm-chev{ margin-inline-start:auto; color:var(--wd-muted-fg); flex:0 0 auto; }
  #page-home .hm-panel > div:not(.hm-ptitle){ border-top:1px solid color-mix(in oklab,var(--wd-border) 70%,transparent); padding:20px; }
  #page-home .hm-panel.is-coll > div:not(.hm-ptitle){ border-top:none; }
  /* Reports two-column on md (SPEC §10) */
  @media(min-width:768px){ #page-home .v5-section:has(#hmDailyPanel) > div{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
  /* EmptyState (SPEC §14) */
  #page-home .hm-empty{ border-radius:var(--wd-radius-md)!important; border:1px dashed color-mix(in oklab,var(--wd-border) 80%,transparent)!important; background:color-mix(in oklab,var(--wd-muted) 20%,transparent)!important; padding:40px 16px!important; text-align:center; font-size:13px!important; font-weight:500!important; color:var(--wd-muted-fg)!important; }

  /* ---------- RecentActivity (SPEC §9) ---------- */
  #page-home #hmActivityCard{ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; padding:20px!important; }
  #page-home #hmActivityCard .card-title{ font-size:14px!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  #page-home #hmActivityCard .card-title > svg:first-child{ width:16px; height:16px; padding:8px; box-sizing:content-box; border-radius:50%; background:var(--wd-muted); color:var(--wd-muted-fg); }
  #page-home #hmActivityCard .hm-refresh{ background:var(--wd-muted)!important; color:var(--wd-muted-fg)!important; border:none!important; }
  #page-home #hmActivityCard #hmActViewAll{ border-radius:var(--wd-radius-md)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-background)!important; color:var(--wd-foreground)!important; }

  /* ---------- Tools & Settings (SPEC §11) ---------- */
  #page-home .hm-filters{ border-radius:var(--wd-radius-lg)!important; border:1px solid color-mix(in oklab,var(--wd-border) 60%,transparent)!important; background:var(--wd-card)!important; box-shadow:var(--wd-e1)!important; padding:20px!important; }
  #page-home .hm-filters .card-title{ font-size:14px!important; font-weight:600!important; color:var(--wd-foreground)!important; }
  #page-home .hm-filters .card-title > svg:first-child{ color:var(--wd-muted-fg); }
  #page-home .hm-filters .field label{ font-size:12px!important; color:var(--wd-muted-fg)!important; }
  #page-home .hm-filters .select, #page-home .hm-filters .dd-toggle{ min-height:44px; border-radius:var(--wd-radius-md)!important; border:1px solid var(--wd-input)!important; background:var(--wd-background)!important; color:var(--wd-foreground)!important; }
  #page-home .hm-filters .select:focus, #page-home .hm-filters .dd-toggle:focus{ border-color:var(--wd-ring)!important; box-shadow:0 0 0 3px color-mix(in oklab,var(--wd-ring) 30%,transparent)!important; }

  /* ---------- Mobile order (SPEC §1.2): SmartAlert BEFORE Performance ---------- */
  @media (max-width:1023px){
    #page-home .hm-wrap > *{ order:5; }
    #page-home .hm-wrap > .v5-hero{ order:1; }
    #page-home .hm-wrap > .v5-sec-quick{ order:2; }
    #page-home .hm-wrap > .v5-section:has(#hmAlerts){ order:3; }
    #page-home .hm-wrap > .v5-section:has(#hmExecPerf){ order:4; }
  }

  /* ---------- Desktop 12-column grid (SPEC §1.2 / RESPONSIVE.md) ---------- */
  @media (min-width:1024px){
    #page-home .hm-wrap{ max-width:1280px!important; display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:28px!important; align-items:start; }
    #page-home .hm-wrap > *{ grid-column:span 12; order:5; margin:0!important; }
    #page-home .hm-wrap > .v5-hero{ grid-column:span 8; order:1; }
    #page-home .hm-wrap > .v5-sec-quick{ grid-column:span 4; order:2; position:sticky; top:20px; }
    #page-home .hm-wrap > .v5-section:has(#hmExecPerf){ grid-column:span 8; order:3; }
    #page-home .hm-wrap > .v5-section:has(#hmAlerts){ grid-column:span 4; order:4; }
    #page-home .hm-wrap > .v5-section:has(#hmCards){ grid-column:span 12; order:5; }
    #page-home .hm-wrap > .v5-section:has(#hmDailyPanel){ grid-column:span 12; order:6; }
    #page-home .hm-wrap > .v5-section:has(#hmAnalyticsPanel){ grid-column:span 12; order:7; }
    #page-home .hm-wrap > .v5-section:has(#hmActivityCard){ grid-column:span 12; order:8; }
    #page-home .hm-wrap > .v5-section:has(.hm-filters){ grid-column:span 12; order:9; }
  }
}