/* ==== from index.html <style data-v5-nav> (v435 split) ==== */
/* ==========================================================================
   v450 — Navigation & Chrome Re-invention (v5) — overlay CSS فقط.
   لا JS/DOM/id/onclick/data-*. يتغلّب بترتيب المصدر (+ !important لتجاوز !important القائم).
   النطاق: Top Bar Glass · Floating Pill Bottom Nav · Desktop Sidebar 240 Deep Navy · Chrome.
   ========================================================================== */
@media screen{
  /* ===== Top Bar — Glass (56px · hairline · بلا ظلّ) ===== */
  #appHeader{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--v5-surface-raised) 72%, transparent)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
    border-bottom:1px solid var(--v5-border-subtle)!important; box-shadow:none!important;
  }
  .hd-top{ min-height:56px; padding:8px 20px!important; }
  .hd-icon{
    background:var(--v5-surface-sunken); color:var(--v5-text-default);
    box-shadow:none; border:1px solid var(--v5-border-subtle);
    transition:background var(--v5-duration-fast) var(--v5-ease-standard), transform var(--v5-duration-fast) var(--v5-ease-standard);
  }
  .hd-icon:hover{ background:var(--v5-state-hover); }
  .hd-icon:active{ transform:scale(.94); }
  .hd-mini-title{ color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); }
}
/* ===== Bottom Navigation (جوال <768px) — أُزيل تصميم v5 بالكامل بقرار [أ2] =====
   شريط الجوال الآن مصدره الوحيد حزمة Lovable في <style data-wadih-shell> (لا طبقتين، لا دمج).
   ملاحظة: Desktop Sidebar (v5) أدناه يبقى كما هو تمامًا — تطبيق Lovable يقتصر على الجوال. */
/* ===== Desktop Sidebar — 240px Deep Navy (مؤشّر نشط + Pills) ===== */
@media screen and (min-width:768px){
  body{ padding-right:240px; }
  #tabs{
    width:240px!important; background:var(--v5-brand-800)!important;
    border-left:1px solid var(--v5-border-strong)!important; box-shadow:var(--v5-shadow-lg)!important;
    padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(24px + env(safe-area-inset-bottom,0px))!important;
  }
  #tabs .side-brand{ border-bottom:1px solid rgba(255,255,255,.12); color:#fff; padding:6px 10px 16px; margin-bottom:12px; }
  #tabs .side-brand .side-name{ color:#fff; font-weight:var(--v5-weight-bold); letter-spacing:var(--v5-tracking-tight); }
  #tabs .side-brand .side-logo{ background:rgba(255,255,255,.10); color:#fff; }
  #tabs .tabs-inner{ gap:6px; }
  #tabs .tab{
    width:100%; border:none!important; background:transparent!important; box-shadow:none!important;
    border-radius:var(--v5-radius-md); padding:12px 16px; justify-content:flex-start;
    color:rgba(255,255,255,.72); position:relative; overflow:hidden;
    transition:background var(--v5-duration-base) var(--v5-ease-standard), color var(--v5-duration-base) var(--v5-ease-standard);
  }
  #tabs .tab .tab-ar{ flex-direction:row; gap:12px; justify-content:flex-start; align-items:center; font-size:.95rem; }
  #tabs .tab .tab-ar svg{ width:20px; height:20px; }
  #tabs .tab:hover{ background:rgba(255,255,255,.07); color:#fff; }
  #tabs .tab.active{ background:rgba(255,255,255,.12)!important; color:#fff!important; box-shadow:none!important; }
  #tabs .tab.active .tab-ar{ color:#fff; }
  #tabs .tab.active .tab-ar svg{ width:20px; height:20px; padding:0; background:transparent; border-radius:0; box-shadow:none; }
  #tabs .tab.active::before{
    content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:3px; height:56%; background:var(--v5-brand); border-radius:3px 0 0 3px;
  }
}
/* ==== from index.html <style data-v5-cards> (v435 split) ==== */
/* ==========================================================================
   v451 — Day Card + Dashboard radical restyle (v5). overlay CSS.
   يتغلّب بترتيب المصدر (+!important عند اللزوم). صفر مسّ منطق/قيَم (markup أضاف classes فقط).
   ========================================================================== */
@media screen{
  /* ===== Day Card — Apple-Card style ===== */
  #daysList .day.ds-card{
    border-radius:var(--v5-radius-xl)!important; padding:0!important; overflow:hidden;
    background:var(--v5-surface-raised)!important; border:1px solid var(--v5-border-subtle)!important;
    box-shadow:var(--v5-shadow-md)!important; margin-bottom:14px!important;
    transition:box-shadow var(--v5-duration-base) var(--v5-ease-standard), transform var(--v5-duration-base) var(--v5-ease-standard);
  }
  #daysList .day.ds-card:hover{ box-shadow:var(--v5-shadow-lg)!important; transform:translateY(-2px); }
  .v5-dayhead{
    display:flex!important; align-items:center; gap:14px; padding:16px 18px!important; cursor:pointer;
    background:linear-gradient(135deg, color-mix(in srgb,var(--v5-brand) 7%,var(--v5-surface-raised)), var(--v5-surface-raised));
  }
  .v5-day-chip{
    width:48px; height:48px; flex:0 0 auto; border-radius:var(--v5-radius-md);
    background:var(--v5-brand); color:var(--v5-on-brand);
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -6px var(--v5-brand);
  }
  .v5-day-chip svg{ width:22px; height:22px; }
  .v5-day-title{ flex:1; min-width:0; font-size:var(--v5-text-lg); font-weight:var(--v5-weight-bold); color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); }
  .v5-day-title .dt-sub{ display:block; font-size:var(--v5-text-sm); font-weight:var(--v5-weight-medium); color:var(--v5-text-subtle); letter-spacing:0; margin-top:2px; }
  .v5-day-net{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:left; flex:0 0 auto; }
  .v5-day-net .db-lbl{ font-size:.64rem; font-weight:var(--v5-weight-semibold); color:var(--v5-text-subtle); display:flex; align-items:center; gap:4px; white-space:nowrap; }
  .v5-day-net .db-lock{ width:12px; height:12px; }
  .v5-day-net .num{ font-size:var(--v5-text-xl); font-weight:var(--v5-weight-black); letter-spacing:var(--v5-tracking-tight); line-height:1.1; }
  .v5-day-chev{ flex:0 0 auto; color:var(--v5-text-subtle); transition:transform var(--v5-duration-base) var(--v5-ease-spring); }
  .day.open .v5-day-chev{ transform:rotate(180deg); }
  .day.open .v5-dayhead{ border-bottom:1px solid var(--v5-border-subtle); }

  /* ===== Dashboard — real Hero (v451 markup redesign) ===== */
  #page-home .hm-wrap{ display:flex; flex-direction:column; gap:22px; }

  /* HERO: dominant navy card */
  #page-home .v5-hero.ds-card{
    display:block!important; position:relative; overflow:hidden; margin:0!important;
    background:linear-gradient(150deg, var(--v5-brand-600), var(--v5-brand-900) 82%)!important;
    border:none!important; border-radius:var(--v5-radius-2xl)!important;
    box-shadow:0 24px 60px -18px rgba(10,61,58,.55)!important;
    padding:22px 22px 24px!important; color:#fff;
  }
  #page-home .v5-hero-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; position:relative; z-index:1; }
  #page-home .v5-hero-eyebrow{ color:rgba(255,255,255,.75)!important; font-size:var(--v5-text-sm); font-weight:var(--v5-weight-semibold); margin-bottom:2px; }
  #page-home .v5-hero-h1{ color:#fff!important; font-size:var(--v5-text-xl)!important; font-weight:var(--v5-weight-bold)!important; letter-spacing:var(--v5-tracking-tight); margin:0!important; line-height:1.2; }
  #page-home .v5-hero-refresh{ width:40px; height:40px; flex:0 0 auto; border-radius:var(--v5-radius-full)!important; background:rgba(255,255,255,.14)!important; border:1px solid rgba(255,255,255,.16)!important; color:#fff!important; box-shadow:none!important; }
  #page-home .v5-hero-caption{ color:rgba(255,255,255,.82)!important; font-weight:var(--v5-weight-semibold); font-size:var(--v5-text-sm); display:flex; align-items:center; gap:6px; margin:0 0 6px!important; position:relative; z-index:1; }
  #page-home .v5-hero-caption svg{ width:16px; height:16px; color:#fff; }
  #page-home .v5-hero-amount{ color:#fff!important; font-weight:var(--v5-weight-black)!important; letter-spacing:var(--v5-tracking-tighter); line-height:1; margin:0!important; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; position:relative; z-index:1; }
  #page-home .v5-hero-amount .stat-num{ font-size:clamp(2.6rem,13vw,3.6rem)!important; font-weight:var(--v5-weight-black)!important; color:#fff!important; }
  #page-home .v5-hero-amount .stat-cur{ font-size:1.2rem!important; opacity:.7; color:#fff!important; font-weight:var(--v5-weight-bold); margin-inline-start:0; }
  #page-home .v5-hero-sub{ color:rgba(255,255,255,.66)!important; font-size:var(--v5-text-sm); margin-top:8px!important; position:relative; z-index:1; }
  #page-home .v5-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; position:relative; z-index:1; }
  #page-home .v5-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--v5-radius-full); background:rgba(255,255,255,.12); color:#fff; font-size:.75rem; font-weight:var(--v5-weight-semibold); }
  #page-home .v5-chip svg{ width:14px; height:14px; }
  #page-home .v5-hero-wm{ position:absolute; left:-18px; bottom:-24px; width:150px; height:150px; color:rgba(255,255,255,.10); pointer-events:none; z-index:0; }

  /* sections rhythm + banking KPI grid */
  #page-home .hm-quick{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0; }
  #page-home .hm-section-title{ font-size:var(--v5-text-lg); font-weight:var(--v5-weight-black); color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); margin:6px 2px 0; }
  #page-home .card{ border-radius:var(--v5-radius-xl)!important; box-shadow:var(--v5-shadow-sm)!important; border:1px solid var(--v5-border-subtle)!important; }
  #page-home .card-title{ font-size:var(--v5-text-base); font-weight:var(--v5-weight-bold); letter-spacing:var(--v5-tracking-tight); }
  #page-home #hmCards.hm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  #page-home #hmCards .hm-stat{ border-radius:var(--v5-radius-lg)!important; padding:16px!important; border:1px solid var(--v5-border-subtle)!important; box-shadow:var(--v5-shadow-xs)!important; background:var(--v5-surface-raised)!important; }
}
@media screen and (min-width:768px){
  #page-home .hm-quick{ grid-template-columns:repeat(4,1fr); }
  #page-home #hmCards.hm-grid{ grid-template-columns:repeat(3,1fr); }
  #page-home .v5-hero-amount .stat-num{ font-size:4rem!important; }
  #page-home .v5-hero-h1{ font-size:var(--v5-text-2xl)!important; }
}
/* ==== from index.html <style data-v5-components> (v435 split) ==== */
/* ==========================================================================
   v452 — Cards · Fields · Buttons re-invention (v5). overlay CSS فقط.
   صفر JS/DOM/id/onclick/data-*. يتغلّب بترتيب المصدر (+!important). كل الوظائف/الحقول/القيَم محفوظة.
   ========================================================================== */
@media screen{
  /* ===== Cards ===== */
  .card, .ds-card{
    border-radius:var(--v5-radius-xl)!important; border:1px solid var(--v5-border-subtle)!important;
    box-shadow:var(--v5-shadow-sm)!important; background:var(--v5-surface-raised)!important; padding:18px!important;
  }
  .card{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  .card-title{ font-weight:var(--v5-weight-bold); letter-spacing:var(--v5-tracking-tight); color:var(--v5-text-strong); }

  /* ===== Family / Vendor cards ===== */
  .fam-card{
    border-radius:var(--v5-radius-xl)!important; border:1px solid var(--v5-border-subtle)!important;
    box-shadow:var(--v5-shadow-sm)!important; background:var(--v5-surface-raised)!important; padding:16px!important;
    transition:box-shadow var(--v5-duration-base) var(--v5-ease-standard), transform var(--v5-duration-base) var(--v5-ease-standard);
  }
  .fam-card:hover{ box-shadow:var(--v5-shadow-md)!important; transform:translateY(-2px); }
  .fam-card-name{ font-weight:var(--v5-weight-bold); letter-spacing:var(--v5-tracking-tight); color:var(--v5-text-strong); }

  /* ===== Fields ===== */
  .field{ gap:7px; }
  .field label, .ct-fld>label{ font-weight:var(--v5-weight-semibold); color:var(--v5-text-muted); font-size:var(--v5-text-sm); }
  .input, .select, input.input, select.select, textarea.input{
    border-radius:var(--v5-radius-md)!important; border:1px solid var(--v5-border-default)!important;
    background:var(--v5-surface-raised)!important; min-height:48px; padding:0 14px!important;
    font-size:var(--v5-text-base)!important; color:var(--v5-text-strong)!important; box-shadow:none!important;
    transition:border-color var(--v5-duration-fast) var(--v5-ease-standard), box-shadow var(--v5-duration-fast) var(--v5-ease-standard);
  }
  textarea.input{ padding:12px 14px!important; min-height:96px; }
  .input:focus, .select:focus, input.input:focus, select.select:focus, textarea.input:focus{
    border-color:var(--v5-brand)!important; box-shadow:0 0 0 3px color-mix(in srgb, var(--v5-brand) 22%, transparent)!important; outline:none!important;
  }
  .input::placeholder{ color:var(--v5-text-disabled); }
  .hint{ color:var(--v5-text-subtle); font-size:var(--v5-text-xs); }

  /* ===== Buttons ===== */
  .btn, .ds-btn{
    border-radius:var(--v5-radius-md)!important; font-weight:var(--v5-weight-bold)!important;
    letter-spacing:var(--v5-tracking-tight); min-height:48px; padding:0 18px!important;
    transition:transform var(--v5-duration-fast) var(--v5-ease-standard), box-shadow var(--v5-duration-base) var(--v5-ease-standard), filter var(--v5-duration-fast) var(--v5-ease-standard)!important;
  }
  .btn:active, .ds-btn:active{ transform:scale(.97); }
  .btn-primary, .ds-btn-primary{
    background:linear-gradient(135deg, var(--v5-brand-500), var(--v5-brand-700))!important; color:#fff!important;
    box-shadow:0 10px 22px -10px var(--v5-brand)!important; border:none!important;
  }
  .btn-primary:hover, .ds-btn-primary:hover{ filter:brightness(1.06); }
  .btn-ghost, .ds-btn-ghost{ background:var(--v5-surface-sunken)!important; color:var(--v5-text-default)!important; border:1px solid var(--v5-border-default)!important; }
  .btn-accent{ background:linear-gradient(135deg, var(--v5-brand-400), var(--v5-brand-600))!important; color:#fff!important; border:none!important; }
  .tool-btn{
    border-radius:var(--v5-radius-lg)!important; border:1px solid var(--v5-border-subtle)!important;
    background:var(--v5-surface-raised)!important; box-shadow:var(--v5-shadow-xs)!important; min-height:56px;
    transition:transform var(--v5-duration-fast) var(--v5-ease-standard), box-shadow var(--v5-duration-base) var(--v5-ease-standard);
  }
  .tool-btn:hover{ box-shadow:var(--v5-shadow-sm)!important; transform:translateY(-1px); }
  .tool-btn:active{ transform:scale(.97); }
  .tool-btn.primary{ background:linear-gradient(135deg,var(--v5-brand-500),var(--v5-brand-700))!important; color:#fff!important; border-color:transparent!important; }
  .tool-btn.danger{ color:var(--v5-danger)!important; }
}
/* ==== from index.html <style data-v5-surfaces> (v435 split) ==== */
/* ==========================================================================
   v453 — Tables · Modals · Popovers · Menus (v5). overlay CSS فقط.
   الجداول: عامة فقط (.ds-table/.inv-tbl) — جداول التقارير/الطباعة (.mr-tbl/.rep-*) غير مطروقة.
   صفر JS · DOM · id · onclick · data-attr · تقارير. يتغلّب بترتيب المصدر (+!important).
   ========================================================================== */
@media screen{
  /* ===== Tables (general only — NOT report tables) ===== */
  .ds-table-wrap{ border:1px solid var(--v5-border-subtle)!important; border-radius:var(--v5-radius-lg)!important; overflow:hidden; box-shadow:var(--v5-shadow-xs)!important; }
  .ds-table{ background:var(--v5-surface-raised)!important; }
  .ds-table th, .ds-table .ds-th{ background:var(--v5-surface-sunken)!important; color:var(--v5-text-muted)!important; font-weight:var(--v5-weight-bold)!important; border-bottom:1px solid var(--v5-border-subtle)!important; padding:12px 14px!important; letter-spacing:var(--v5-tracking-tight); }
  .ds-table td, .ds-table .ds-td{ padding:12px 14px!important; border-bottom:1px solid var(--v5-border-subtle)!important; color:var(--v5-text-default)!important; }
  .ds-table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--v5-surface-sunken) 45%, transparent); }
  .ds-table tbody tr:hover{ background:var(--v5-state-hover)!important; }
  .inv-tbl{ border-radius:var(--v5-radius-lg); overflow:hidden; }

  /* ===== Modals / Dialogs / Sheets ===== */
  .mdl-ov, .ds-dialog-overlay, .modal-overlay, .mdl-ov.ds-dialog-overlay{
    background:rgba(4,32,30,.55)!important; -webkit-backdrop-filter:blur(9px) saturate(1.2); backdrop-filter:blur(9px) saturate(1.2);
  }
  .mdl, .modal, .ds-dialog-content, .mdl.ds-dialog{
    border-radius:var(--v5-radius-2xl)!important; box-shadow:var(--v5-shadow-xl)!important;
    border:1px solid var(--v5-border-subtle)!important; background:var(--v5-surface-raised)!important;
  }
  .modal h3, .mdl-head{ color:var(--v5-text-strong)!important; font-weight:var(--v5-weight-bold); letter-spacing:var(--v5-tracking-tight); }
  .mdl-head{ border-bottom:1px solid var(--v5-border-subtle)!important; }
  .mdl-foot{ border-top:1px solid var(--v5-border-subtle)!important; }
  .sheet-overlay{ background:rgba(4,32,30,.5)!important; }

  /* ===== Menus / Dropdowns / Popovers / Tooltips ===== */
  .dd-panel, .dropdown-menu, .menu, [role="menu"]{
    border:1px solid var(--v5-border-subtle)!important; border-radius:var(--v5-radius-lg)!important;
    box-shadow:var(--v5-shadow-lg)!important; background:var(--v5-surface-raised)!important; overflow:hidden; padding:6px!important;
  }
  .dd-panel > *, .dropdown-menu > *, .menu > *, [role="menuitem"]{ border-radius:var(--v5-radius-sm); }
  [role="menuitem"]:hover, .dropdown-menu > *:hover, .menu > *:hover, .dd-panel > *:hover{ background:var(--v5-state-hover)!important; }
  .popover, [role="tooltip"]{
    border-radius:var(--v5-radius-md)!important; box-shadow:var(--v5-shadow-lg)!important;
    border:1px solid var(--v5-border-subtle)!important; background:var(--v5-surface-raised)!important;
  }
}
/* ==== from index.html <style data-v5-states> (v435 split) ==== */
/* ==========================================================================
   v454 — Icons · Charts · Empty · Loading · Error · Success (v5). overlay CSS only.
   No JS. No DOM. No reports. Financial +/- colors (ds-text-success/danger) left as-is.
   ========================================================================== */
@media screen{
  /* ===== Empty states + icons ===== */
  .empty, .inv-empty, .dues-empty, .rq-empty, .iosp-empty, .gs-empty{ color:var(--v5-text-subtle)!important; padding:44px 20px!important; }
  .empty svg, .inv-empty svg, .dues-empty svg, .rq-empty svg, .iosp-empty svg, .gs-empty svg{
    width:56px!important; height:56px!important; margin-bottom:14px!important; opacity:.35!important; color:var(--v5-text-subtle)!important;
  }
  .hm-empty{ color:var(--v5-text-subtle)!important; padding:24px 0!important; }

  /* ===== Loading / skeleton — teal-tinted smooth shimmer ===== */
  .hm-skel, .acc-sk{
    background:linear-gradient(90deg, var(--v5-surface-sunken), color-mix(in srgb, var(--v5-brand) 14%, var(--v5-surface-sunken)), var(--v5-surface-sunken))!important;
    background-size:200% 100%!important; border-radius:var(--v5-radius-md)!important;
  }

  /* ===== Error feedback ===== */
  .field-warn, .error-text{ color:var(--v5-danger)!important; font-weight:var(--v5-weight-semibold); }

  /* ===== Success / feedback toast ===== */
  #toast{ border-radius:var(--v5-radius-full)!important; box-shadow:var(--v5-shadow-xl)!important; font-weight:var(--v5-weight-bold); padding:12px 22px!important; }

  /* ===== Charts — performance rings ===== */
  .perf-cell{ border-radius:var(--v5-radius-xl)!important; border:1px solid var(--v5-border-subtle)!important; box-shadow:var(--v5-shadow-sm)!important; background:var(--v5-surface-raised)!important; }
  .perf-arc{ stroke:var(--v5-brand)!important; filter:drop-shadow(0 3px 8px color-mix(in srgb, var(--v5-brand) 40%, transparent))!important; }
  .perf-track{ stroke:var(--v5-border-subtle)!important; }
  .perf-pct, .perf-title{ color:var(--v5-text-strong)!important; letter-spacing:var(--v5-tracking-tight); }
  .perf-cap, .perf-none-t{ color:var(--v5-text-subtle)!important; }
}
@media screen and (prefers-reduced-motion:reduce){
  .hm-skel, .acc-sk{ animation:none!important; }
}
/* ==== from index.html <style data-v5-icons-charts> (v435 split) ==== */
/* ==========================================================================
   v454 completion — Icons system · Bar charts · Empty · Skeletons · Toast · Micro-moments.
   overlay CSS only. No JS. Reports untouched. (Items needing JS are documented, not done.)
   ========================================================================== */
@media screen{
  /* ===== Icons — unify stroke on lucide only (fill:none + stroke:currentColor). caps/joins/viewBox already round/24 ===== */
  svg[stroke="currentColor"][fill="none"]{ stroke-width:1.75; }
  /* system sizes (safe subset — empty + headers) */
  .empty svg, .inv-empty svg, .dues-empty svg, .rq-empty svg, .iosp-empty svg, .gs-empty svg{ width:44px!important; height:44px!important; }
  .card-title svg{ width:20px; height:20px; }

  /* ===== Bar charts (real) — rounded tops + hover (CSS rx overrides attr) ===== */
  .hm-chart-scroll rect{ rx:6px; transition:opacity var(--v5-duration-fast) var(--v5-ease-standard); }
  .hm-chart-scroll rect:hover{ opacity:.8; }
  .hm-chart-scroll text{ fill:var(--v5-text-subtle)!important; }

  /* ===== Empty states — title/subtitle rhythm ===== */
  .empty > div:first-of-type{ font-weight:var(--v5-weight-bold); color:var(--v5-text-default); font-size:var(--v5-text-base); }
  .empty > div:not(:first-of-type){ color:var(--v5-text-subtle); font-size:var(--v5-text-sm); margin-top:4px; }

  /* ===== Loading skeletons — shape by context (card vs row) ===== */
  .hm-insights .hm-skel, .hm-acts .hm-skel, #hmActList .hm-skel, #algList .hm-skel{ height:56px!important; border-radius:var(--v5-radius-md)!important; }
  #hmDaily .hm-skel, #hmMonthly .hm-skel{ height:150px!important; }

  /* ===== Toast — side accent + icon pop-in ===== */
  #toast{ border-inline-start:4px solid var(--v5-brand)!important; }
  #toast.show svg{ animation:v454pop .28s var(--v5-ease-spring) both; }

  /* ===== Micro-moment — shake on validation error ===== */
  .field-warn{ animation:v454shake .34s var(--v5-ease-standard) both; }
}
@keyframes v454pop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); } }
@keyframes v454shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-4px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(2px); } }
@media screen and (prefers-reduced-motion:reduce){
  #toast.show svg{ animation:none!important; }
  .field-warn{ animation:none!important; }
}
/* ==== from index.html <style data-v5-polish> (v435 split) ==== */
/* ==========================================================================
   v455 — Dark Mode polish · Micro-interactions · A11y AAA. overlay CSS only. No JS.
   Print: app printing is report-only by design (window.print hides all but printHost);
   no general print rules added (they would either be inert or touch protected reports).
   ========================================================================== */
@media screen{
  /* ===== Micro-interactions (CSS only — one transition per selector) ===== */
  .card, .ds-card, .fam-card{ transition:box-shadow var(--v5-duration-base) var(--v5-ease-standard), transform var(--v5-duration-base) var(--v5-ease-standard), background-color var(--v5-duration-base) var(--v5-ease-standard), border-color var(--v5-duration-base) var(--v5-ease-standard); }
  .btn, .ds-btn, .tool-btn, .hd-icon, .tab, .navx-card{ transition:transform var(--v5-duration-fast) var(--v5-ease-standard), box-shadow var(--v5-duration-base) var(--v5-ease-standard), background-color var(--v5-duration-fast) var(--v5-ease-standard), filter var(--v5-duration-fast) var(--v5-ease-standard); }
  a{ transition:color var(--v5-duration-fast) var(--v5-ease-standard), opacity var(--v5-duration-fast) var(--v5-ease-standard); }
  body{ transition:background-color var(--v5-duration-base) var(--v5-ease-standard), color var(--v5-duration-base) var(--v5-ease-standard); }
  .btn:not(:disabled):active, .ds-btn:not(:disabled):active, .tool-btn:active{ transform:scale(.97); }

  /* ===== A11y AAA — strong, consistent focus-visible on all interactive ===== */
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .tab:focus-visible, .navx-card:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
    outline:3px solid var(--v5-focus-ring-color)!important; outline-offset:2px!important; border-radius:var(--v5-radius-sm);
  }
  .input:focus-visible, .select:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--v5-focus-ring-color); outline-offset:1px;
  }
}
/* ===== Dark Mode Polish ===== */
[data-theme="dark"] .card, [data-theme="dark"] .ds-card, [data-theme="dark"] .fam-card{ box-shadow:0 2px 12px rgba(0,0,0,.42)!important; border-color:var(--v5-border-subtle)!important; }
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] textarea.input{ background:var(--v5-surface-sunken)!important; border-color:var(--v5-border-default)!important; color:var(--v5-text-strong)!important; }
[data-theme="dark"] .ds-table th{ background:var(--v5-surface-sunken)!important; }
[data-theme="dark"] .ds-table tbody tr:nth-child(even){ background:rgba(255,255,255,.03); }
[data-theme="dark"] #tabs .tab.active{ background:rgba(255,255,255,.14)!important; }
[data-theme="dark"] .mdl, [data-theme="dark"] .modal, [data-theme="dark"] .ds-dialog-content{ background:var(--v5-surface-raised)!important; }
[data-theme="dark"] #page-home .v5-hero.ds-card{ background:linear-gradient(150deg,#0B2E2A,#04140F 82%)!important; box-shadow:0 24px 60px -20px rgba(0,0,0,.7)!important; }
[data-theme="dark"] .hm-skel, [data-theme="dark"] .acc-sk{ background:linear-gradient(90deg, var(--v5-surface-sunken), rgba(56,176,166,.18), var(--v5-surface-sunken))!important; background-size:200% 100%!important; }

/* ===== A11y — high-contrast mode ===== */
@media screen and (prefers-contrast:more){
  .card, .ds-card, .input, .select, .btn, .ds-btn, .tool-btn, .ds-table th, .ds-table td{ border:1px solid currentColor!important; }
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible{ outline-width:4px!important; }
}
/* ==== from index.html <style data-v5-arch> (v435 split) ==== */
/* ==========================================================================
   v456 — Dashboard UX Re-Architecture (bank level). overlay CSS + renderHome markup reorder.
   Clear sections, strong hierarchy, generous whitespace, fewer shadows/borders. No JS.
   ========================================================================== */
@media screen{
  #page-home .v5-arch{ gap:26px!important; padding-bottom:48px; }
  #page-home .v5-section{ display:flex; flex-direction:column; gap:12px; }
  #page-home .v5-sec-title{ font-size:var(--v5-text-lg); font-weight:var(--v5-weight-black); color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); padding:0 2px; margin:0; }
  /* Apple feel: minimal shadow/border inside sections, rely on whitespace */
  #page-home .v5-section .card, #page-home .v5-section .hm-panel{ box-shadow:none!important; border:1px solid var(--v5-border-subtle)!important; background:var(--v5-surface-raised)!important; border-radius:var(--v5-radius-xl)!important; }

  /* (1) Quick actions — banking action cards (prominent icon chip + title, big touch, distinct from stats) */
  #page-home .v5-sec-quick .hm-quick{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  #page-home .v5-sec-quick .ds-btn{
    min-height:104px!important; flex-direction:column; justify-content:center; gap:12px; padding:18px!important;
    border-radius:var(--v5-radius-xl)!important; background:var(--v5-surface-raised)!important; border:1px solid var(--v5-border-subtle)!important;
    box-shadow:none!important; color:var(--v5-text-strong)!important; font-size:var(--v5-text-sm)!important; font-weight:var(--v5-weight-bold)!important; text-align:center;
  }
  #page-home .v5-sec-quick .ds-btn svg{
    width:24px!important; height:24px!important; padding:13px!important; box-sizing:content-box; margin:0!important;
    border-radius:var(--v5-radius-full)!important; background:var(--v5-brand-50)!important; color:var(--v5-brand)!important;
  }
  #page-home .v5-sec-quick .ds-btn.ds-btn-primary{ background:linear-gradient(135deg,var(--v5-brand-600),var(--v5-brand-800))!important; color:#fff!important; border-color:transparent!important; }
  #page-home .v5-sec-quick .ds-btn.ds-btn-primary svg{ background:rgba(255,255,255,.18)!important; color:#fff!important; }
  #page-home .v5-sec-quick .ds-btn:active{ transform:scale(.97); }

  /* (2) Business Summary hierarchy — top 4 primary (2/row, larger) + rest secondary (3/row, denser). No data lost. */
  #page-home #hmCards.hm-grid{ display:grid!important; grid-template-columns:repeat(6,1fr)!important; gap:10px!important; align-items:stretch; }
  #page-home #hmCards .hm-stat{ grid-column:span 2; padding:12px!important; }
  #page-home #hmCards .hm-stat:nth-child(-n+4){ grid-column:span 3; padding:18px!important; }
  #page-home #hmCards .hm-stat:nth-child(-n+4) .hm-v{ font-size:1.35rem!important; }
  #page-home #hmCards .hm-stat:nth-child(n+5) .hm-v{ font-size:.98rem!important; }
  #page-home #hmCards .hm-stat:nth-child(n+5) .hm-l{ font-size:.68rem!important; }
  #page-home #hmCards .hm-stat:nth-child(n+5) .hm-ic svg{ width:16px!important; height:16px!important; }

  /* (4) Reduce inter-section repetition — de-emphasize redundant inner panel titles under a section header */
  #page-home .v5-section > .hm-panel > .hm-ptitle{ font-size:var(--v5-text-sm); color:var(--v5-text-muted); }
  /* Less-used section recessed */
  #page-home .v5-sec-muted{ margin-top:4px; }
  #page-home .v5-sec-muted .v5-sec-title{ color:var(--v5-text-muted); font-size:var(--v5-text-base); }
}
@media screen and (min-width:768px){
  #page-home .v5-arch{ gap:34px!important; }
  #page-home .v5-sec-quick .hm-quick{ grid-template-columns:repeat(4,1fr); }
  #page-home #hmCards .hm-stat:nth-child(-n+4){ grid-column:span 3; }
  #page-home #hmCards .hm-stat:nth-child(n+5){ grid-column:span 2; }
}
/* ==== from index.html <style data-v5-workspace> (v435 split) ==== */
/* ==========================================================================
   v457 — Daily Workspace re-architecture (bank level). renderDayBody zone wrappers + CSS.
   Distinct zones, prominent Families workspace, bigger/clearer family cards. No JS/logic/inputs changed.
   ========================================================================== */
@media screen{
  /* Day workspace zones — distinct, well-separated */
  .day-body .wsp-zone{ background:var(--v5-surface-raised); border:1px solid var(--v5-border-subtle); border-radius:var(--v5-radius-xl); padding:16px 14px; margin-top:16px; }
  .day-body .wsp-zone .section-h{ font-size:var(--v5-text-base); font-weight:var(--v5-weight-bold); color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); }
  /* Families zone = the centerpiece */
  .day-body .wsp-fams{ background:linear-gradient(180deg, color-mix(in srgb,var(--v5-brand) 5%, var(--v5-surface-raised)), var(--v5-surface-raised)); border:1.5px solid color-mix(in srgb,var(--v5-brand) 22%, var(--v5-border-subtle)); }

  /* Family cards — bigger, clearer, faster to read (most important) */
  .day-body .fam{ border-radius:var(--v5-radius-lg)!important; border:1px solid var(--v5-border-subtle)!important; box-shadow:var(--v5-shadow-sm)!important; background:var(--v5-surface-raised)!important; padding:16px!important; margin-bottom:12px!important; transition:box-shadow var(--v5-duration-base) var(--v5-ease-standard), transform var(--v5-duration-base) var(--v5-ease-standard); }
  .day-body .fam:hover{ box-shadow:var(--v5-shadow-md)!important; }
  .day-body .fam.paid{ border-inline-start:4px solid var(--v5-success)!important; }
  .day-body .fam.unpaid{ border-inline-start:4px solid var(--v5-warning)!important; }
  .day-body .fam.left{ border-inline-start:4px solid var(--v5-neutral-400)!important; }
  .day-body .fam-no{ width:34px!important; height:34px!important; border-radius:var(--v5-radius-md)!important; background:var(--v5-brand)!important; color:#fff!important; font-size:.95rem!important; }
  /* Interactive header buttons — ≥44×44 touch targets (icon glyph unchanged) */
  .day-body .fam-collapse, .day-body .fam-wa-sq{ width:44px!important; height:44px!important; border-radius:var(--v5-radius-md)!important; }
  /* collapsed summary — clean 2-col readable grid (only when the card is collapsed/shown) */
  .day-body .fam.collapsed .fam-collapsed-summary{ display:grid!important; grid-template-columns:repeat(2,1fr); gap:10px 16px; padding:12px 2px 2px; }
  .day-body .fcs-item{ display:flex; flex-direction:column; gap:3px; }
  .day-body .fcs-lbl{ font-size:.66rem!important; color:var(--v5-text-subtle)!important; font-weight:var(--v5-weight-semibold); }
  .day-body .fcs-item b{ font-size:var(--v5-text-sm); color:var(--v5-text-strong); }
  /* Add-family action prominent in the families zone */
  .day-body .wsp-fams > .btn-accent{ border-radius:var(--v5-radius-md)!important; }
}
/* ==== from index.html <style data-v5-families> (v435 split) ==== */
/* ==========================================================================
   v458 — Families Management re-architecture (bank level). Presentation only.
   Banking-grade management header, prominent search, scannable vendor cards,
   organized actions. No JS logic / data / storage / reports touched.
   ========================================================================== */
@media screen{
  /* ---- Management header (scoped to the saved-families card) ---- */
  #savedFamCard .v5-fammgr-head{ margin-bottom:14px; }
  #savedFamCard .v5-fammgr-titlerow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  #savedFamCard .v5-fammgr-title{ display:flex; align-items:center; gap:9px; font-size:var(--v5-text-lg); font-weight:var(--v5-weight-bold); color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); }
  #savedFamCard .v5-fammgr-title svg{ width:20px; height:20px; color:var(--v5-brand); stroke-width:2; }
  #savedFamCard .v5-fammgr-kpi{ min-width:40px; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:999px; font-weight:var(--v5-weight-bold); font-variant-numeric:tabular-nums; background:color-mix(in srgb,var(--v5-brand) 12%, var(--v5-surface-raised)); color:var(--v5-brand); border:1px solid color-mix(in srgb,var(--v5-brand) 26%, transparent); }
  #savedFamCard .v5-fammgr-sub{ display:block; margin-top:4px!important; color:var(--v5-text-subtle); font-size:var(--v5-text-sm); }
  /* ---- Prominent search ---- */
  #savedFamCard .v5-fammgr-search{ min-height:48px; border-radius:var(--v5-radius-lg)!important; background:var(--v5-surface-sunken)!important; font-size:var(--v5-text-base)!important; }
  #savedFamCard .v5-fammgr-search:focus{ background:var(--v5-surface-raised)!important; }

  /* ---- Vendor cards: scannable, name-dominant ---- */
  #savedFamsList .fam-cards{ gap:12px; }
  #savedFamsList .fam-card{ border-radius:var(--v5-radius-xl)!important; border:1px solid var(--v5-border-subtle)!important; box-shadow:var(--v5-shadow-sm)!important; padding:15px!important; }
  #savedFamsList .fam-card:hover{ box-shadow:var(--v5-shadow-md)!important; }
  #savedFamsList .fam-card-main{ align-items:flex-start; gap:13px; }
  #savedFamsList .fam-avatar{ width:52px; height:52px; border-radius:var(--v5-radius-lg); }
  #savedFamsList .fam-card-name{ font-size:1.02rem; font-weight:var(--v5-weight-bold); color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); }
  /* meta chips row */
  #savedFamsList .fam-card-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
  #savedFamsList .fam-chip{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; font-size:.74rem; font-weight:var(--v5-weight-semibold); color:var(--v5-text-muted); background:var(--v5-surface-sunken); border:1px solid var(--v5-border-subtle); white-space:nowrap; }
  #savedFamsList .fam-chip svg{ width:13px; height:13px; opacity:.75; }
  #savedFamsList .fam-chip-rent{ color:var(--v5-brand); background:color-mix(in srgb,var(--v5-brand) 9%, var(--v5-surface-raised)); border-color:color-mix(in srgb,var(--v5-brand) 22%, transparent); }
  #savedFamsList .fam-chip-phone{ font-variant-numeric:tabular-nums; direction:ltr; }
  /* organized actions row — clear primary / secondary */
  #savedFamsList .fam-card-actions{ gap:9px; margin-top:2px; }
  #savedFamsList .fam-card-actions .fam-btn{ min-height:44px; border-radius:var(--v5-radius-md); font-size:.85rem; }
  #savedFamsList .fam-btn-details{ flex:2 1 0; }
  #savedFamsList .fam-btn-del{ flex:1 1 0; }
}
[data-theme="dark"] #savedFamsList .fam-chip{ background:var(--v5-surface-sunken); border-color:var(--v5-border-subtle); }
/* ==== from index.html <style data-v5-hierarchy> (v435 split) ==== */
/* ==========================================================================
   v459 (rebuild) — Information Hierarchy Re-Architecture (bank level).
   Real size hierarchy (Large/Medium/Small), hero primary values, grouped
   secondary, separated cash workspace (input vs results). Presentation only —
   CSS re-layout of EXISTING cells via grid order/span + type scale.
   Zero JS / logic / data / storage / reports / inputs / IDs. Semantic value
   colors preserved (never sets color on .fc.net/.due/.remain/.month .val).
   ========================================================================== */
@media screen{
  /* =================================================================
     (1) PER-FAMILY SUMMARY (.fam-calc): hero NET + medium + grouped small
     DOM order: month(1) base(2) tax(3) rentDay(4) net(5) due(6)
     ================================================================= */
  .day-body .fam .fam-calc{ display:grid!important; grid-template-columns:repeat(6,1fr)!important; gap:8px!important; }
  .day-body .fam .fam-calc .fc{ background:var(--v5-surface-sunken)!important; border:none!important; box-shadow:none!important; border-radius:var(--v5-radius-md)!important; padding:10px 12px!important; gap:3px!important; }
  .day-body .fam .fam-calc .fc .lbl{ font-size:.66rem!important; font-weight:var(--v5-weight-semibold)!important; color:var(--v5-text-subtle)!important; letter-spacing:.1px; line-height:1.3; }
  .day-body .fam .fam-calc .fc .val{ font-weight:var(--v5-weight-bold)!important; font-variant-numeric:tabular-nums; letter-spacing:-.2px; line-height:1.15; }
  /* HERO: صافي مبيعات اليوم (net, 5th) — biggest, full width, brand-tinted */
  .day-body .fam .fam-calc .fc.net{ order:1; grid-column:1/-1!important; padding:15px 16px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--v5-brand) 11%,var(--v5-surface-sunken)),var(--v5-surface-sunken))!important; }
  .day-body .fam .fam-calc .fc.net .lbl{ font-size:.74rem!important; }
  .day-body .fam .fam-calc .fc.net .val{ font-size:1.6rem!important; }
  /* MEDIUM: monthly sales + monthly due, side by side */
  .day-body .fam .fam-calc .fc.month{ order:2; grid-column:1/4!important; }
  .day-body .fam .fam-calc .fc.due{ order:3; grid-column:4/7!important; }
  .day-body .fam .fam-calc .fc.month .val, .day-body .fam .fam-calc .fc.due .val{ font-size:1.18rem!important; }
  /* SMALL grouped: pre-tax + VAT + day-rent (3-up) */
  .day-body .fam .fam-calc .fc:not(.net):not(.month):not(.due){ order:4; grid-column:span 2!important; }
  .day-body .fam .fam-calc .fc:not(.net):not(.month):not(.due) .val{ font-size:.95rem!important; }

  /* =================================================================
     (2) DAY FAMILIES SUMMARY (ملخص الأسر, [data-fam-summary]):
     hero NET (5th) + medium daily-total (1st) + small rents (2,3,4) + status(6)
     ================================================================= */
  .day-body [data-fam-summary]{ display:grid!important; grid-template-columns:repeat(6,1fr)!important; gap:9px!important; }
  .day-body [data-fam-summary] .stat{ margin:0!important; border:1px solid var(--v5-border-subtle)!important; border-radius:var(--v5-radius-lg)!important; box-shadow:none!important; padding:12px 14px!important; }
  .day-body [data-fam-summary] .stat:nth-child(5){ order:1; grid-column:1/-1!important; padding:16px 18px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--v5-brand) 12%,var(--v5-surface-raised)),var(--v5-surface-raised))!important; border-color:color-mix(in srgb,var(--v5-brand) 26%,transparent)!important; }
  .day-body [data-fam-summary] .stat:nth-child(5) .s-lbl{ font-size:.8rem!important; color:var(--v5-brand)!important; }
  .day-body [data-fam-summary] .stat:nth-child(5) .s-val{ font-size:1.85rem!important; letter-spacing:-.5px; }
  .day-body [data-fam-summary] .stat:nth-child(1){ order:2; grid-column:1/-1!important; }
  .day-body [data-fam-summary] .stat:nth-child(1) .s-val{ font-size:1.3rem!important; }
  .day-body [data-fam-summary] .stat:nth-child(2){ order:3; }
  .day-body [data-fam-summary] .stat:nth-child(3){ order:4; }
  .day-body [data-fam-summary] .stat:nth-child(4){ order:5; }
  .day-body [data-fam-summary] .stat:nth-child(2),
  .day-body [data-fam-summary] .stat:nth-child(3),
  .day-body [data-fam-summary] .stat:nth-child(4){ grid-column:span 2!important; background:var(--v5-surface-sunken)!important; }
  .day-body [data-fam-summary] .stat:nth-child(2) .s-lbl,
  .day-body [data-fam-summary] .stat:nth-child(3) .s-lbl,
  .day-body [data-fam-summary] .stat:nth-child(4) .s-lbl{ font-size:.66rem!important; }
  .day-body [data-fam-summary] .stat:nth-child(2) .s-val,
  .day-body [data-fam-summary] .stat:nth-child(3) .s-val,
  .day-body [data-fam-summary] .stat:nth-child(4) .s-val{ font-size:.98rem!important; }
  .day-body [data-fam-summary] .stat:nth-child(6){ order:6; grid-column:1/-1!important; }

  /* =================================================================
     (3) CASH & MADA WORKSPACE (إدارة النقد/مدى): separate INPUT from RESULTS
     ================================================================= */
  .day-body .wsp-pay .row-flex{ background:var(--v5-surface-sunken)!important; border:1px solid var(--v5-border-subtle)!important; border-radius:var(--v5-radius-lg)!important; padding:14px!important; align-items:flex-end; gap:12px; margin-top:10px; }
  .day-body .wsp-pay [data-cash-cards] .stat, .day-body .wsp-pay [data-mada-cards] .stat{ border:1px solid var(--v5-border-subtle)!important; box-shadow:none!important; border-radius:var(--v5-radius-lg)!important; }
  .day-body .wsp-pay [data-cash-cards] .stat:first-child, .day-body .wsp-pay [data-mada-cards] .stat:first-child{ background:var(--v5-surface-sunken)!important; }
  .day-body .wsp-pay .section-h{ margin-top:2px; }

  /* =================================================================
     (4) DAY SUMMARY (ملخص اليوم): branch-net HERO + tax total emphasis
     ================================================================= */
  .day-body .wsp-summary .stat.g{ padding:18px!important; border-radius:var(--v5-radius-xl)!important; background:linear-gradient(135deg,color-mix(in srgb,var(--v5-success) 12%,var(--v5-surface-raised)),var(--v5-surface-raised))!important; border:1px solid color-mix(in srgb,var(--v5-success) 26%,transparent)!important; box-shadow:var(--v5-shadow-sm)!important; }
  .day-body .wsp-summary .stat.g .s-lbl{ font-size:.82rem!important; }
  .day-body .wsp-summary .stat.g .s-val{ font-size:1.9rem!important; letter-spacing:-.5px; }
  .day-body .wsp-summary [data-vat-cards] .stat{ border:1px solid var(--v5-border-subtle)!important; box-shadow:none!important; border-radius:var(--v5-radius-lg)!important; }
  .day-body .wsp-summary [data-vat-cards] .stat:nth-child(5){ background:var(--v5-surface-sunken)!important; }
  .day-body .wsp-summary [data-vat-cards] .stat:nth-child(5) .s-val{ font-size:1.25rem!important; }

  /* =================================================================
     (5) Shared value/label typography (financial alignment, recessive labels)
     ================================================================= */
  .day-body .stat .s-lbl{ font-weight:var(--v5-weight-semibold)!important; color:var(--v5-text-subtle)!important; }
  .day-body .stat .s-val{ font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
  .day-body .stat .s-val small{ font-weight:var(--v5-weight-semibold)!important; }

  /* collapsed family summary cells — same hierarchy language */
  .day-body .fam .fcs-item .fcs-lbl{ font-weight:var(--v5-weight-semibold)!important; color:var(--v5-text-subtle)!important; letter-spacing:.1px; }
  .day-body .fam .fcs-item b{ font-variant-numeric:tabular-nums; letter-spacing:-.2px; }

  /* =================================================================
     (6) Analytics KPI + dashboard stat + ranking rows (value dominant)
     ================================================================= */
  .an-kpi{ border:1px solid var(--v5-border-subtle)!important; box-shadow:var(--v5-shadow-sm); border-radius:var(--v5-radius-lg)!important; }
  .an-kpi-v{ font-size:1.42rem!important; font-weight:var(--v5-weight-bold)!important; letter-spacing:-.3px; line-height:1.2; }
  .an-kpi-t{ font-size:.72rem!important; font-weight:var(--v5-weight-semibold)!important; letter-spacing:.2px; color:var(--v5-text-subtle)!important; }
  .an-kpi-d{ font-size:.7rem!important; font-weight:var(--v5-weight-medium)!important; color:var(--v5-text-subtle)!important; }
  #page-home .hm-stat{ border:1px solid var(--v5-border-subtle)!important; box-shadow:var(--v5-shadow-sm)!important; }
  #page-home .hm-stat .hm-l{ font-weight:var(--v5-weight-semibold)!important; color:var(--v5-text-subtle)!important; letter-spacing:.1px; }
  #page-home .hm-stat .stat-num{ letter-spacing:-.4px; }
  #page-home .hm-stat .stat-cur{ font-weight:var(--v5-weight-semibold)!important; color:var(--v5-text-subtle)!important; }
  #page-home .hm-fam-name{ font-weight:var(--v5-weight-semibold); color:var(--v5-text-strong); }
  #page-home .hm-fam-amt{ font-weight:var(--v5-weight-bold); font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
  #page-home .hm-fam-pct{ color:var(--v5-text-subtle); font-variant-numeric:tabular-nums; }
  #page-home .hm-panel{ border-color:var(--v5-border-subtle)!important; }
}
/* ==== from index.html <style data-v5-forms> (v435 split) ==== */
/* ==========================================================================
   v460 — Daily Input & Form UX Re-Architecture (bank level). Presentation only.
   Form hierarchy, financial-field emphasis, computed-vs-editable-vs-readonly
   distinction, unified field states, calm focus, recessive labels, reduced box
   noise. CSS only — no JS/logic/calc/inputs/IDs. Semantic value colors on
   read-only fields (المتبقي red / المرحلة purple) preserved (bg/border only).
   Base already provides 16px inputs (iOS no-zoom) + 48px min-height + 2-col
   grid on ≤760px (single/2-col responsive kept).
   ========================================================================== */
@media screen{
  /* ---------- Section titles = clear form headers ---------- */
  .day-body .section-h{ font-weight:var(--v5-weight-bold)!important; color:var(--v5-text-strong); letter-spacing:var(--v5-tracking-tight); }

  /* ---------- Financial inputs: larger tabular typed numbers ---------- */
  .day-body .field .input.num, .day-body .mini .input.num, .day-body .wsp-pay .row-flex .input.num{
    font-size:1.06rem!important; font-weight:700!important; font-variant-numeric:tabular-nums; letter-spacing:-.2px;
  }

  /* ---------- Computed TOTAL = result field (emphasized, read-only look) ---------- */
  .day-body input.branch-total-input[readonly]{
    background:linear-gradient(135deg,color-mix(in srgb,var(--v5-brand) 9%,var(--v5-surface-sunken)),var(--v5-surface-sunken))!important;
    border:1px solid color-mix(in srgb,var(--v5-brand) 22%,transparent)!important;
    color:var(--v5-text-strong)!important; font-size:1.12rem!important; font-weight:800!important;
    font-variant-numeric:tabular-nums; box-shadow:none!important; cursor:default;
  }

  /* ---------- Read-only / disabled = clearly Read-only (bg + border ONLY; never color,
     so semantic red/purple on المتبقي/المرحلة survive) ---------- */
  .day-body .fam input:disabled, .day-body .fam input[readonly]{
    background:var(--v5-surface-sunken)!important; border:1px solid var(--v5-border-subtle)!important;
    box-shadow:none!important; cursor:default; opacity:1;
  }
  .day-body .fam .select:disabled, .day-body .fam .select.is-locked{
    background:var(--v5-surface-sunken)!important; opacity:1; cursor:default;
  }

  /* ---------- Field states: calm, consistent focus (not overblown) ---------- */
  .day-body .input:focus, .day-body .select:focus{
    border-color:var(--v5-brand)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--v5-brand) 15%,transparent)!important;
  }

  /* ---------- Recessive labels (reduce cognitive load) ---------- */
  .day-body .mini label, .day-body .field label{ color:var(--v5-text-subtle)!important; font-weight:var(--v5-weight-semibold)!important; }
  /* keep the color-coded pay labels' icons (cash/mada/transfer) as-is — only the text calms */
  .day-body .field .pay-lbl{ color:var(--v5-text-muted)!important; }

  /* ---------- Cash/Mada workspace input panel: primary inputs (op-type + amount) legible ---------- */
  .day-body .wsp-pay .row-flex .field label{ font-size:.74rem!important; }
  .day-body .wsp-pay .row-flex .btn-primary{ align-self:flex-end; }

  /* ---------- Multi-open count input readability ---------- */
  .day-body .multi-open input{ font-size:1.06rem!important; }
}
/* Narrow phones: single-column branch sales so the computed total never clips
   (prevents long-number compression; matches "single column on narrow"). */
@media screen and (max-width:460px){
  .day-body .grid.g4{ grid-template-columns:1fr!important; }
}
/* ==== from index.html <style data-v5-shapes> (v435 split) ==== */
/* ==========================================================================
   v461 — Element SHAPE by function (bank level). Presentation only.
   Distinguish elements by role, not just color:
     • Editable            → Input (kept as-is: border + raised + focus)
     • Computed / result    → Summary Card
     • Locked / derived      → Information Block (flat, non-interactive look)
     • Day / Date selects     → Selection Chip (pill + chevron)
     • Branch total            → standalone Summary Card
   CSS only — no JS/logic/calc/inputs/IDs. Elements stay functionally the same
   <input>/<select>; only their visual form changes. Semantic text colors kept.
   ========================================================================== */
@media screen{
  /* ============ SELECTION CHIPS: اليوم + التاريخ (data-dayweekday / data-daydate) ============ */
  .day-body select[data-dayweekday], .day-body select[data-daydate]{
    border-radius:999px!important;
    background-color:color-mix(in srgb,var(--v5-brand) 8%, var(--v5-surface-raised))!important;
    border:1.5px solid color-mix(in srgb,var(--v5-brand) 28%, transparent)!important;
    color:var(--v5-text-strong)!important; font-weight:700!important;
    box-shadow:none!important; min-height:48px;
  }
  .day-body select[data-dayweekday]:focus, .day-body select[data-daydate]:focus{
    background-color:color-mix(in srgb,var(--v5-brand) 15%, var(--v5-surface-raised))!important;
    border-color:var(--v5-brand)!important;
  }

  /* ============ SUMMARY CARD: branch total (standalone, full-width) ============ */
  .day-body .wsp-day .grid.g4{ grid-template-columns:repeat(3,1fr)!important; }
  .day-body .wsp-day .grid.g4 > .field:nth-child(4){ grid-column:1/-1!important; }
  .day-body input.branch-total-input[readonly]{
    border:none!important; border-radius:var(--v5-radius-xl)!important;
    background:linear-gradient(135deg,var(--v5-brand),color-mix(in srgb,var(--v5-brand) 80%, #000))!important;
    color:#fff!important; font-size:1.35rem!important; font-weight:800!important;
    text-align:center!important; min-height:62px!important; box-shadow:var(--v5-shadow-md)!important;
    letter-spacing:-.3px; font-variant-numeric:tabular-nums;
  }
  .day-body .wsp-day .grid.g4 > .field:nth-child(4) > label{ justify-content:center; color:var(--v5-brand)!important; font-weight:var(--v5-weight-bold)!important; }

  /* ============ INFORMATION BLOCKS: locked / computed (flat, non-interactive) ============ */
  /* locked contract select */
  .day-body .fam .select.is-locked, .day-body .fam .select:disabled{
    border:none!important; box-shadow:inset 0 0 0 1px var(--v5-border-subtle)!important;
    background-color:var(--v5-surface-sunken)!important; border-radius:var(--v5-radius-md)!important; cursor:default;
  }
  /* computed/read-only fam inputs (المتبقي / الإيجارات المرحلة) — flat info block, text color kept */
  .day-body .fam input:disabled, .day-body .fam input[readonly]{
    border:none!important; box-shadow:inset 0 0 0 1px var(--v5-border-subtle)!important;
    background-color:var(--v5-surface-sunken)!important; border-radius:var(--v5-radius-md)!important; cursor:default;
  }

  /* ============ INPUTS stay INPUTS (explicit: editable fields keep input chrome) ============ */
  .day-body .field .input:not([readonly]):not(:disabled),
  .day-body .mini .input:not([readonly]):not(:disabled){ /* unchanged — border + raised bg from base */ }
}
/* On narrow phones the branch total returns to its own full-width row already
   (single column), staying a standalone summary card. */
@media screen and (max-width:460px){
  .day-body .wsp-day .grid.g4{ grid-template-columns:1fr!important; }
}
/* ==== from index.html <style data-v5-calm> (v435 split) ==== */
/* ==========================================================================
   v462 — Calm & Premium (bank level). Presentation only.
   Reduce visible boxes (dissolve redundant zone containers into whitespace +
   section headers), premium soft-shadow elevation on meaningful cards, calmer
   secondary tiles (background separation, not borders), more breathing room,
   sharper primary numbers. CSS only — no JS/logic/calc/inputs/IDs.
   ========================================================================== */
@media screen{
  /* ---- Dissolve zone boxes: structure by whitespace + headers, not borders ---- */
  .day-body .wsp-zone{ background:transparent!important; border:none!important; border-radius:0!important; padding:0!important; margin-top:30px!important; }
  .day-body .wsp-fams{ background:transparent!important; border:none!important; }
  .day-body .wsp-zone:first-child{ margin-top:14px!important; }
  /* section headers: a little more air, calm leading accent bar */
  .day-body .section-h{ margin:0 0 14px!important; padding-inline-start:11px!important; position:relative; }
  .day-body .section-h::before{ content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%); width:3px; height:15px; border-radius:2px; background:var(--v5-brand); opacity:.85; }

  /* ---- Premium elevation: meaningful cards float (soft shadow, no hard border) ---- */
  .day-body .fam{ border:none!important; box-shadow:var(--v5-shadow-md)!important; padding:18px!important; }
  .day-body .fam.paid, .day-body .fam.unpaid, .day-body .fam.left{ box-shadow:var(--v5-shadow-md)!important; }

  /* ---- Calm secondary tiles: background separation instead of borders ---- */
  .day-body [data-fam-summary] .stat,
  .day-body [data-vat-cards] .stat,
  .day-body [data-cash-cards] .stat,
  .day-body [data-mada-cards] .stat{ border:none!important; box-shadow:none!important; }
  .day-body [data-vat-cards] .stat,
  .day-body [data-cash-cards] .stat,
  .day-body [data-mada-cards] .stat{ background:var(--v5-surface-sunken)!important; }
  /* the small secondary family tiles already use sunken bg — keep them borderless & calm */

  /* ---- Keep the primary/hero numbers strongest (sharper), soften the rest ---- */
  .day-body [data-fam-summary] .stat:nth-child(5){ box-shadow:var(--v5-shadow-sm)!important; }
  .day-body .wsp-summary .stat.g{ box-shadow:var(--v5-shadow-sm)!important; }
  .day-body .fam .fam-calc .fc.net{ box-shadow:var(--v5-shadow-sm)!important; }

  /* ---- More breathing room between grouped rows ---- */
  .day-body .fam-calc{ gap:9px!important; }
  .day-body [data-fam-summary]{ gap:10px!important; }
  .day-body .row-flex{ margin-top:12px!important; }
}
/* ==== from index.html <style data-v5-layout> (v435 split) ==== */
/* ==========================================================================
   v463 — Layout Architecture: collapsible secondary sections (Workspace).
   Reduce screen length & speed navigation by collapsing secondary sections
   (cash open · mada + VAT collapsed by default) — REUSING the existing global
   collapse handler (delegated on .day-coll-h). Markup adds only wrapper classes
   + chevrons; zero new JS / logic / calc / storage / functions.
   These rules re-enable the collapse affordance that was neutralized on the
   day page (chevron hidden / cursor default) — scoped to opted-in .wsp-coll-h.
   ========================================================================== */
@media screen{
  /* re-enable chevron + pointer for opted-in collapsible section headers */
  #page-daily .wsp-coll-h .hm-chev{ display:inline-flex!important; width:18px; height:18px; margin-inline-start:auto; color:var(--v5-text-subtle); transition:transform .25s ease; }
  #page-daily .wsp-coll-h{ cursor:pointer!important; }
  /* premium tappable header: comfy touch row, subtle press feedback */
  .day-body .wsp-coll-h{ min-height:46px; align-items:center; border-radius:var(--v5-radius-md); transition:background-color .18s ease; }
  .day-body .wsp-coll-h:hover{ background:color-mix(in srgb,var(--v5-brand) 5%, transparent); }
  .day-body .wsp-coll-h:active{ opacity:.75; }
  /* collapsed header reads as a calm, closed row (content hidden by existing
     .day-coll.is-coll > *:not(.day-coll-h){display:none}); nudge spacing */
  .day-body .day-coll.wsp-coll{ margin-top:8px; }
  .day-body .day-coll.wsp-coll.is-coll{ margin-top:8px; }
  /* opted-in fam-summary must actually collapse (override the day-page force-show
     rule that keeps [data-fam-summary] visible); higher specificity wins */
  #page-daily .day-coll.wsp-coll.is-coll > [data-fam-summary]{ display:none!important; }

  /* v464 — Cross-screen progressive disclosure: collapsible report cards on the
     archive/reports screen (reuses the existing global .day-coll handler). */
  #page-archive .card.day-coll > .card-title{ cursor:pointer; align-items:center; }
  #page-archive .card.day-coll.is-coll > .card-title{ margin-bottom:0!important; }
  #page-archive .card.day-coll > .card-title .hm-chev{ margin-inline-start:auto; width:18px; height:18px; color:var(--v5-text-subtle); transition:transform .25s ease; flex:0 0 auto; }
  #page-archive .card.day-coll > .card-title:hover{ color:var(--v5-brand); }
  /* hide ALL collapsed children incl. those with inline display (beats inline display:block on hints) */
  #page-archive .card.day-coll.is-coll > *:not(.card-title){ display:none!important; }
}
/* ==== from index.html <style data-v5-sheet> (v435 split) ==== */
/* ==========================================================================
   v465 — Long Modals & Dialog Flows: fixed header + scrollable body + sticky
   footer (primary action always visible), mobile bottom-sheet, swipe handle
   (visual only), ≥44px close. Presentation only — CSS + minimal wrapper markup
   in modal templates; no JS/logic/validation/submit change.
   ========================================================================== */
@media screen{
  /* Proper sheet: fixed header + scrollable body + fixed footer (footer can
     never cover body content; last row is always fully reachable). */
  .v5-sheet{ display:flex!important; flex-direction:column!important; overflow:hidden!important; padding-top:0!important; padding-bottom:0!important; }
  .v5-sheet-handle{ width:42px; height:4px; border-radius:2px; background:var(--v5-border-default,#c7cdd6); margin:9px auto 4px; flex:0 0 auto; }
  .v5-sheet > .v5-sheet-head{ flex:0 0 auto; position:relative; background:var(--card-solid); padding-top:6px!important; padding-bottom:10px; margin-bottom:0!important; }
  .v5-sheet > .v5-sheet-head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--v5-border-subtle); opacity:.6; }
  .v5-sheet > .v5-sheet-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:12px; }
  .v5-sheet > .v5-sheet-foot{ flex:0 0 auto; background:var(--card-solid); padding:14px 0; box-shadow:0 -10px 20px -12px rgba(0,0,0,.24); }
  .v5-sheet > .v5-sheet-foot > .btn:first-child{ margin-top:0; }
  .v5-sheet .v5-sheet-head .icon-btn{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}
@media screen and (max-width:520px){
  /* centered long modals convert to bottom sheet on mobile */
  #ctEditOverlay{ align-items:flex-end!important; padding:0!important; }
  #ctEditOverlay > .v5-sheet{ max-width:100%!important; width:100%!important; border-radius:20px 20px 0 0!important; }
}
/* ==== from index.html <style data-v5-audit> (v435 split) ==== */
/* v466 — Release Quality Audit (Apple / banking level). Presentation only.
   Curated low-risk consistency fixes. No JS/logic/calc/id/data-star/onclick change. */
/* (a) Cohesion: day section-header accent bar matches its header colour. */
.day-body .section-h::before{ background:currentColor!important; opacity:.9; }
/* (b) Touch targets: every icon-only interactive control gets a 44x44 hit area
   (visible glyph unchanged). Rounded-square buttons grow the box; small circular
   buttons keep their visual size via a transparent 44px hit-slop overlay. */
.icon-btn, .hm-refresh, .fam-collapse{ min-width:44px!important; min-height:44px!important; }
.wa-btn, .wa-btn.wa-sm, .stmt-clear{ position:relative; }
.wa-btn::after, .wa-btn.wa-sm::after, .stmt-clear::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; }
/* (c) Shadow unification: primary card surface uses the soft premium v5 shadow. */
.card{ box-shadow:var(--v5-shadow-sm); }
/* (d) Consistent premium transition on interactive cards. */
.fam-card{ transition:box-shadow .22s ease, transform .22s ease; }
@media (prefers-reduced-motion: reduce){
  .fam-card, .card, .day-body .fam, .v5-sheet{ transition:none!important; }
}
/* ==== from index.html <style data-v5-responsive> (v435 split) ==== */
/* v466 — Responsive Text & Overflow fix. Presentation only; no JS/logic/id change.
   Goals: 0 clipped text, 0 icon/text overlap, 0 element hidden behind footer,
   0 horizontal scroll, touch targets kept >=44x44. */
/* Grids may shrink below content width (kills horizontal overflow) + text min-width:0. */
.day-body .fam .fam-calc{ grid-template-columns:repeat(6,minmax(0,1fr))!important; }
.day-body [data-fam-summary]{ grid-template-columns:repeat(6,minmax(0,1fr))!important; }
.day-body .fam .fam-calc .fc, .day-body [data-fam-summary] .stat{ min-width:0; height:auto!important; }
/* Financial-tile labels/values wrap naturally with Arabic-friendly line-height (no clip). */
.day-body .fam .fam-calc .fc .lbl, .day-body [data-fam-summary] .stat .s-lbl{ line-height:1.4; white-space:normal!important; overflow-wrap:anywhere; word-break:normal; overflow:visible!important; }
/* values (numbers) stay whole — never break mid-digit; not force-nowrapped so
   they can't be clipped; tabular alignment. */
.day-body .fam .fam-calc .fc .val, .day-body [data-fam-summary] .stat .s-val{ overflow-wrap:normal!important; word-break:keep-all!important; white-space:normal; line-height:1.2; font-variant-numeric:tabular-nums; }
.day-body .fam .fam-calc .fc .lbl svg, .day-body [data-fam-summary] .stat .s-lbl svg{ flex:0 0 auto; }
/* Narrow phones (<=430px): secondary tiles go 2-up (from 3-up) so labels and
   numbers get more width. Net stays full; monthly/due stay side-by-side. */
@media (max-width:430px){
  .day-body .fam .fam-calc .fc:not(.net):not(.month):not(.due){ grid-column:span 3!important; }
  .day-body [data-fam-summary] .stat:nth-child(2),
  .day-body [data-fam-summary] .stat:nth-child(3),
  .day-body [data-fam-summary] .stat:nth-child(4){ grid-column:span 3!important; }
}
/* Very narrow (<=360px): monthly + due also stack full-width so their long
   numbers (e.g. 12,500.00) have the whole row. */
@media (max-width:360px){
  .day-body .fam .fam-calc .fc.month, .day-body .fam .fam-calc .fc.due{ grid-column:1/-1!important; }
}
/* Locked rent select: guarantee clear space for the lock icon (no overlap). */
.day-body .fam .rent-wrap .select.is-locked{ padding-left:38px!important; }
.rent-lock-ic{ left:13px; }
/* Long vendor names wrap instead of being cut with ellipsis. */
#savedFamsList .fam-card-name{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere; }
#savedFamsList .fam-card-info, #savedFamsList .fam-card-main{ min-width:0; }
/* Family details modal: name + rows wrap, no overflow. */
#famDetailsOverlay .fdr-tx, #famDetailsOverlay .fdr-tx{ min-width:0; overflow-wrap:anywhere; }
/* Day family-card header keeps min-width:0 so long names wrap, icons don't collide. */
.day-body .fam .fam-head, .day-body .fam .name-x{ min-width:0; }