/* نظام المرسم — كل الستايل (اتنقل من index.html بنفس الترتيب) */
  /* ============================== design system: Modern Professional Financial Dashboard ==============================
     Every color/spacing/radius token below is centralized here on purpose — every screen in the
     app is built from a small set of shared classes (.card, .btn, .kpi, table, .pill, .banner...),
     so re-pointing these tokens re-skins the entire system consistently without touching the
     render functions or any business logic below. Keep it that way: new UI should reuse an
     existing token/class rather than hardcoding a color or radius inline. */
  :root{
    color-scheme: light;
    --bg: #F5F7FA;
    --plane: #EEF1F5;
    --surface: #FFFFFF;
    --surface-2: #F3F4F6;
    --row-hover: #EFF6FF;
    --ink: #111827;
    --ink-2: #374151;   /* أغمق عشان الكتابة تبان في الوضع الفاتح (كان #6B7280) */
    --ink-3: #4B5563;   /* كان #9CA3AF (باهت جدًا) */
    --border: #E5E7EB;
    --border-strong: #D1D5DB;
    /* "accent" == the system's one Action color (Primary Blue) — buttons, links, the active
       nav item, focus rings, and info badges all key off this one token on purpose (spec:
       "الأزرق هو اللون الأساسي للـ Actions"). Never introduce a second action color. */
    --accent: #2563EB;
    --accent-ink: #FFFFFF;
    --accent-soft: #DBEAFE;
    --accent-strong: #1D4ED8;
    /* financial status colors — reserved for money/state meaning only (profit, paid, overdue,
       needs review), never reused as a generic decorative color */
    --good: #16A34A;
    --good-soft: #DCFCE7;
    --warn: #D97706;
    --warn-soft: #FEF3C7;
    --bad: #DC2626;
    --bad-soft: #FEE2E2;
    --chip-visa: #2563EB;
    --chip-visa-soft: #DBEAFE;
    --shadow: 0 1px 2px rgba(17,24,39,.04), 0 6px 16px -8px rgba(17,24,39,.10);

    /* the always-dark sidebar — fixed regardless of light/dark mode, per the design spec */
    --sidebar-bg: #111827;
    --sidebar-border: rgba(255,255,255,.08);
    --sidebar-hover-bg: rgba(255,255,255,.05);
    --sidebar-active-bg: #2563EB;
    --sidebar-ink: #E5E7EB;
    --sidebar-ink-muted: #9CA3AF;
    --sidebar-active-ink: #FFFFFF;

    /* chart series — primary blue for the main series, success green when a second
       series is a comparison (spec: "استخدم اللون الأساسي الأزرق مع الأخضر عند الحاجة للمقارنة") */
    --s1: #2563EB; /* blue */
    --s2: #16A34A; /* green */
    --s3: #D97706; /* orange */
    --s4: #7C3AED; /* violet */
    --s5: #DB2777; /* magenta */
    --s6: #0EA5E9; /* sky */
    --s7: #65A30D; /* lime */
    --s8: #DC2626; /* red */
    --chart-surface: #FFFFFF;
    --chart-ink: #111827;
    --chart-ink-2: #374151;
    --chart-muted: #4B5563;
    --chart-grid: #EEF1F5;
    --chart-axis: #D1D5DB;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --bg: #0B1220;
      --plane: #0A0F1A;
      --surface: #111827;
      --surface-2: #1B2434;
      --row-hover: #16233A;
      --ink: #F3F4F6;
      --ink-2: #9CA3AF;
      --ink-3: #6B7280;
      --border: rgba(255,255,255,0.08);
      --border-strong: rgba(255,255,255,0.16);
      --accent: #3B82F6;
      --accent-ink: #FFFFFF;
      --accent-soft: rgba(59,130,246,0.18);
      --accent-strong: #60A5FA;
      --good: #22C55E;
      --good-soft: rgba(34,197,94,0.16);
      --warn: #F59E0B;
      --warn-soft: rgba(245,158,11,0.16);
      --bad: #F87171;
      --bad-soft: rgba(239,68,68,0.16);
      --chip-visa: #60A5FA;
      --chip-visa-soft: rgba(59,130,246,0.18);
      --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -10px rgba(0,0,0,.6);

      --s1: #3B82F6; --s2: #22C55E; --s3: #F59E0B; --s4: #A78BFA;
      --s5: #F472B6; --s6: #38BDF8; --s7: #A3E635; --s8: #F87171;
      --chart-surface: #111827;
      --chart-ink: #F3F4F6;
      --chart-ink-2: #D1D5DB;
      --chart-muted: #6B7280;
      --chart-grid: #1F2937;
      --chart-axis: #374151;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg: #0B1220;
    --plane: #0A0F1A;
    --surface: #111827;
    --surface-2: #1B2434;
    --row-hover: #16233A;
    --ink: #F3F4F6;
    --ink-2: #9CA3AF;
    --ink-3: #6B7280;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.16);
    --accent: #3B82F6;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(59,130,246,0.18);
    --accent-strong: #60A5FA;
    --good: #22C55E;
    --good-soft: rgba(34,197,94,0.16);
    --warn: #F59E0B;
    --warn-soft: rgba(245,158,11,0.16);
    --bad: #F87171;
    --bad-soft: rgba(239,68,68,0.16);
    --chip-visa: #60A5FA;
    --chip-visa-soft: rgba(59,130,246,0.18);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -10px rgba(0,0,0,.6);

    --s1: #3B82F6; --s2: #22C55E; --s3: #F59E0B; --s4: #A78BFA;
    --s5: #F472B6; --s6: #38BDF8; --s7: #A3E635; --s8: #F87171;
    --chart-surface: #111827;
    --chart-ink: #F3F4F6;
    --chart-ink-2: #D1D5DB;
    --chart-muted: #6B7280;
    --chart-grid: #1F2937;
    --chart-axis: #374151;
  }

  *{box-sizing:border-box;}
  body{ background:var(--bg); }
  #app{
    direction: rtl;
    font-family: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.55;
  }
  h1,h2,h3,.display{
    font-family: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
    font-weight: 700;
    text-wrap: balance;
    letter-spacing: -.01em;
  }
  h3{ font-weight: 600; }
  .num, .mono, input[type="number"], .table-num{
    font-family: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    direction: ltr;
    text-align: left;
  }
  /* remove the native increment/decrement spinner arrows from every number input
     in the system — WebKit/Blink, Firefox, and legacy Edge each need their own rule */
  input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
  input[type="number"]::-ms-clear, input[type="number"]::-ms-reveal{ display: none; }
  a{ color: var(--accent-strong); }
  button{ font: inherit; }
  input, select, textarea{ font: inherit; color: inherit; }

  /* ---------- shell ---------- */
  .shell{
    display:grid;
    grid-template-columns: 1fr 240px;
    min-height: 100vh;
  }
  .nav{
    background: var(--sidebar-bg);
    border-inline-start: 1px solid var(--sidebar-border);
    padding: 20px 14px;
    display:flex; flex-direction:column; gap:3px;
    position: sticky; top:0; height:100vh; overflow-y:auto;
  }
  .brand{
    display:flex; flex-direction:column; gap:2px;
    padding: 4px 10px 18px;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 14px;
  }
  .brand .kicker{ font-size:10.5px; letter-spacing:.08em; color:var(--sidebar-ink-muted); text-transform:uppercase; font-weight:600; }
  .brand .name{ font-family:'Cairo',sans-serif; font-size:23px; font-weight:800; color:#fff; line-height:1.2; }
  .brand .sub{ font-size:11.5px; color:var(--sidebar-ink-muted); font-weight:500; }
  .navbtn{
    display:flex; align-items:center; gap:11px;
    padding: 10px 12px; border-radius: 9px;
    border:1px solid transparent; background:transparent; color:var(--sidebar-ink-muted);
    cursor:pointer; text-align:right; width:100%; font-size:14px; font-weight:600;
    transition: background .12s, color .12s;
  }
  .navbtn:hover{ background: var(--sidebar-hover-bg); color:var(--sidebar-ink); }
  .navbtn.active{ background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); font-weight:700; box-shadow: 0 4px 10px -4px rgba(37,99,235,.6); }
  .navbtn .ic{ width:19px; height:19px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .navbtn .ic svg{ width:19px; height:19px; stroke:currentColor; }
  .navfoot{ margin-top:auto; padding: 10px; font-size:11px; color:var(--sidebar-ink-muted); border-top:1px solid var(--sidebar-border); font-weight:500; }
  .month-badge{ margin-top:10px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); color:var(--sidebar-ink); font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:8px; border:1px solid var(--sidebar-border); }

  .maincol{ display:flex; flex-direction:column; min-width:0; max-width:1240px; }
  /* location + month are both global scope-selectors that must stay visible on every
     screen. They live in one sticky wrapper (rather than each being sticky on its own)
     so the pair stacks and stays pinned together regardless of either bar's exact
     height — location sits on top since it's the broader scope (it contains the month,
     not the other way round). */
  .topbars{ position: sticky; top:0; z-index:30; display:flex; flex-direction:column; }
  .locationbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding: 11px 32px; margin-bottom:-1px;
    background: var(--accent-soft); border-bottom:1px solid var(--border);
  }
  .locationbar .locationbar-label{ font-size:12.5px; font-weight:700; color:var(--accent-strong); display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .locationbar select{ background: var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:7px 10px; font-size:13.5px; font-weight:600; color:var(--ink); }
  .monthbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding: 13px 32px; margin-bottom:-1px;
    background: var(--surface); border-bottom:1px solid var(--border);
  }
  .monthbar .monthbar-label{ font-size:12.5px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .main{ padding: 26px 32px 60px; }
  .pagehead{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
  .pagehead h1{ font-size:26px; margin:0; font-weight:700; }
  .pagehead .desc{ color:var(--ink-2); font-size:13px; margin-top:5px; font-weight:500; }

  .grid{ display:grid; gap:16px; }
  .kpis{ grid-template-columns: repeat(4,1fr); margin-bottom:22px; }
  @media (max-width: 1100px){ .kpis{ grid-template-columns: repeat(2,1fr);} }

  .card{
    background: var(--surface); border:1px solid var(--border); border-radius:12px;
    padding: 18px 20px; box-shadow: var(--shadow);
  }
  .card h3{ font-size:15.5px; margin:0 0 2px; font-weight:600; }
  .card .hint{ font-size:12px; color: var(--ink-3); margin-bottom:12px; font-weight:500; }

  /* KPI stat cards: an optional semantic accent (tone-primary/success/danger/warning) on
     the leading edge reads as "this number's financial meaning" at a glance — set by
     kpi(label, value, tone); omitted tone falls back to a neutral border. */
  .kpi{ border-inline-start:3px solid var(--border-strong); }
  .kpi.tone-primary{ border-inline-start-color: var(--accent); }
  .kpi.tone-success{ border-inline-start-color: var(--good); }
  .kpi.tone-danger{ border-inline-start-color: var(--bad); }
  .kpi.tone-warning{ border-inline-start-color: var(--warn); }
  .kpi .label{ font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:6px; font-weight:600; }
  .kpi .value{ font-size:25px; font-weight:800; margin-top:7px; direction:ltr; text-align:right; letter-spacing:-.01em; }
  .kpi .value small{ font-size:12.5px; color:var(--ink-3); font-weight:600; }

  .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field label{ font-size:12px; color:var(--ink-2); font-weight:600; }
  .field input, .field select, .field textarea{
    background: var(--surface); border:1px solid var(--border-strong); border-radius:8px;
    padding: 9px 11px; font-size:14px; min-width:0; font-weight:500; color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
  }
  .field.grow{ flex:1; min-width:160px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    padding: 10px 18px; border-radius:8px; border:1px solid var(--border-strong);
    background: var(--surface); color:var(--ink); cursor:pointer; font-size:14px; font-weight:600;
    white-space:nowrap; transition: background .12s, border-color .12s, transform .05s;
  }
  .btn:hover{ background: var(--surface-2); }
  .btn:active{ transform: translateY(1px); }
  .btn.primary{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn.primary:hover{ background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn.success{ background: var(--good); border-color: var(--good); color:#fff; }
  .btn.success:hover{ filter:brightness(.92); }
  .btn.warning{ background: var(--warn); border-color: var(--warn); color:#fff; }
  .btn.warning:hover{ filter:brightness(.92); }
  .btn.ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
  .btn.ghost:hover{ background: var(--surface-2); color:var(--ink); }
  .btn.danger{ background: var(--bad); border-color: var(--bad); color:#fff; }
  .btn.danger:hover{ filter:brightness(.92); }
  .btn.danger.ghost{ background:transparent; border-color:transparent; color:var(--bad); }
  .btn.danger.ghost:hover{ background: var(--surface-2); color:var(--bad); }
  .btn.small{ padding:6px 11px; font-size:12.5px; border-radius:7px; }
  .btn:disabled{ opacity:.5; cursor:not-allowed; }
  .btn .ic{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .btn .ic svg{ width:16px; height:16px; stroke:currentColor; }
  .btn.small .ic, .btn.small .ic svg{ width:13px; height:13px; }

  .pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; }
  .pill.cash{ background: var(--good-soft); color: var(--good); }
  .pill.visa{ background: var(--chip-visa-soft); color: var(--chip-visa); }
  .pill.on{ background: var(--good-soft); color: var(--good); }
  .pill.off{ background: var(--surface-2); color: var(--ink-3); }
  .pill.st-new{ background: var(--accent-soft); color: var(--accent-strong); }
  .pill.st-contacted{ background: var(--good-soft); color: var(--good); }
  .pill.st-followup{ background: var(--warn-soft); color: var(--warn); }
  .pill.st-closed{ background: var(--surface-2); color: var(--ink-3); }
  .dropzone{ display:block; border:2px dashed var(--border-strong); border-radius:12px; padding:28px 16px; text-align:center; cursor:pointer; color:var(--ink-2); transition:border-color .15s, background .15s; }
  .dropzone:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .dropzone img{ max-width:100%; max-height:220px; border-radius:8px; }

  table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  th{ text-align:right; color:var(--ink-2); font-weight:700; font-size:12px; padding:11px 12px; background:var(--surface-2); border-bottom:1px solid var(--border-strong); white-space:nowrap; }
  th:first-child{ border-top-right-radius:8px; }
  th:last-child{ border-top-left-radius:8px; }
  th[data-sort]{ cursor:pointer; user-select:none; }
  th[data-sort]:hover{ color:var(--ink); }
  th .sort-ic{ display:inline-block; margin-inline-start:3px; opacity:.5; font-size:10px; }
  th[data-sort-active] .sort-ic{ opacity:1; color:var(--accent); }
  td{ padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; font-weight:500; }
  tbody tr{ transition: background .1s; }
  tbody tr:hover{ background: var(--row-hover); }
  .tablewrap{ overflow-x:auto; }
  tfoot td{ font-weight:800; border-top:2px solid var(--border-strong); border-bottom:none; background: var(--surface-2); }

  /* table toolbar: a search box above a table (orders log) */
  .table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
  .search-box{ position:relative; flex:1; min-width:220px; max-width:340px; }
  .search-box input{
    width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
    padding-block:9px; padding-inline:12px 38px; font-size:13.5px; font-weight:500; color:var(--ink);
  }
  .search-box input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  .search-box .search-ic{ position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; display:flex; }
  .search-box .search-ic svg{ width:15px; height:15px; }
  .table-count{ font-size:12.5px; color:var(--ink-3); font-weight:600; white-space:nowrap; }

  /* report action buttons: طباعة + a تصدير dropdown (PDF / Excel) reused on every report screen */
  .report-actions{ position:relative; }
  .export-dd{ position:relative; }
  .export-dd .dd-caret{ width:11px; height:11px; display:inline-flex; margin-inline-start:2px; }
  .export-dd .dd-caret svg{ width:11px; height:11px; }
  .export-menu{
    position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:45;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow);
    min-width:190px; padding:6px; display:flex; flex-direction:column; gap:2px;
  }
  .export-item{
    display:flex; align-items:center; gap:9px; width:100%; text-align:start; background:none; border:none;
    padding:9px 10px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer;
  }
  .export-item:hover{ background:var(--surface-2); }
  .export-item .ic{ width:16px; height:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .export-item .ic svg{ width:16px; height:16px; }
  .export-menu[hidden]{ display:none; }

  /* PDF preview modal -- always shown before/regardless of saving, per spec */
  .pdf-preview-modal{ max-width:min(880px,94vw); width:100%; padding:0; display:flex; flex-direction:column; max-height:88vh; }
  .pdf-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--border); }
  .pdf-preview-head h3{ margin:0; font-size:15.5px; }
  .pdf-preview-frame{ flex:1; width:100%; min-height:60vh; border:none; background:#525659; }

  /* per-currency totals strip shown under a table, only when >1 currency is present */
  .currency-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border-strong); }
  .currency-chip{ background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:8px 14px; min-width:100px; }
  .currency-chip .lbl{ font-size:11.5px; color:var(--ink-3); font-weight:700; margin-bottom:2px; }
  .currency-chip .val{ font-size:15px; font-weight:800; color:var(--ink); direction:ltr; text-align:right; }

  /* multi-select filter dropdown (orders log: الموظف/نوع الشغل/الدفع) --
     same footprint as a normal .field select, opening an export-menu-style
     checkbox list underneath. */
  .multisel-dd{ position:relative; }
  .multisel-btn{
    display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
    padding-block:9px; padding-inline:12px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer;
  }
  .multisel-btn .dd-caret{ width:11px; height:11px; display:inline-flex; flex-shrink:0; color:var(--ink-3); }
  .multisel-btn .dd-caret svg{ width:11px; height:11px; }
  .multisel-summary{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .multisel-menu{
    position:absolute; inset-inline-start:0; top:calc(100% + 6px); z-index:45; min-width:200px; max-width:280px;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow);
    padding:6px; display:flex; flex-direction:column; gap:2px;
  }
  .multisel-menu[hidden]{ display:none; }
  .multisel-allbtn{
    display:block; width:100%; text-align:start; background:none; border:none; border-bottom:1px solid var(--border);
    padding:8px 10px; margin-bottom:4px; border-radius:7px; font-size:13px; font-weight:700; color:var(--accent); cursor:pointer;
  }
  .multisel-allbtn:hover{ background:var(--surface-2); }
  .multisel-opts{ display:flex; flex-direction:column; gap:1px; max-height:220px; overflow-y:auto; }
  .multisel-item{
    display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; font-size:13.5px;
    font-weight:600; color:var(--ink); cursor:pointer;
  }
  .multisel-item:hover{ background:var(--surface-2); }
  .multisel-item input{ margin:0; flex-shrink:0; }

  /* professional P&L / waterfall table -- business analysis screen */
  .pl-table td, .pl-table th{ font-size:13.5px; }
  .pl-table tr.pl-subtotal td{ font-weight:700; background:var(--surface-2); border-top:1px solid var(--border-strong); }
  .pl-table tr.pl-total td{ font-weight:800; font-size:15px; background:var(--accent-soft); border-top:2px solid var(--accent); }
  .pl-table tr.pl-deduct td:last-child{ color:var(--bad); }
  .pl-table td:first-child{ display:flex; align-items:center; gap:8px; }

  /* top summary table on تحليل شغل المكان: all-currency + visa totals, first thing on screen */
  .grand-totals-table{ margin-bottom:18px; }
  .grand-totals-table table{ width:100%; }
  .grand-totals-table th{ font-size:11.5px; }
  .grand-totals-table td{ font-size:16px; font-weight:800; direction:ltr; text-align:center !important; padding:14px 10px; }
  .grand-totals-table th{ text-align:center !important; }

  .empty{ text-align:center; padding: 40px 20px; color:var(--ink-3); }
  .empty .big{ font-size:34px; margin-bottom:6px; }

  .banner{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:10px; margin-bottom:18px; font-size:13.5px; font-weight:500; }
  .banner.warn{ background: var(--warn-soft); color: #92400E; border:1px solid var(--warn); }
  .banner.info{ background: var(--accent-soft); color: var(--accent-strong); border:1px solid var(--accent-soft); }
  .banner a.btn{ flex-shrink:0; }

  .modal-back{ position:fixed; inset:0; background:rgba(17,24,39,.55); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50; }
  .modal{ background:var(--surface); border-radius:14px; border:1px solid var(--border); box-shadow: var(--shadow); width:100%; max-width:560px; padding:22px 24px; }
  .modal h3{ margin:0 0 14px; }

  .subnav{ display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--border); }
  .subnav button{ background:none; border:none; padding:9px 4px; margin-inline-end:16px; color:var(--ink-3); font-weight:600; font-size:13.5px; cursor:pointer; border-bottom:2px solid transparent; }
  .subnav button.active{ color:var(--accent); font-weight:700; border-color: var(--accent); }

  .toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:9px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); z-index:80; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
  .toast.show{ opacity:1; }

  .balance-banner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:20px 22px; border-radius:12px; margin-bottom:18px; background:linear-gradient(135deg, var(--accent-soft), var(--surface)); border:1px solid var(--border); }
  .balance-banner .amt{ font-size:30px; font-weight:800; direction:ltr; letter-spacing:-.01em; }
  .balance-banner .lbl{ font-size:12.5px; color:var(--ink-2); margin-bottom:4px; font-weight:600; }

  .tooltip{ position:fixed; pointer-events:none; background:var(--chart-ink); color:var(--chart-surface); font-size:12px; padding:6px 10px; border-radius:7px; z-index:100; opacity:0; transition:opacity .1s; white-space:nowrap; font-family:'Cairo',sans-serif; font-weight:600; }
  .tooltip.show{ opacity:1; }
  .chart-toggle{ font-size:12px; color:var(--accent); background:none; border:none; cursor:pointer; font-weight:600; padding:0; }
  .chart-wrap{ direction:ltr; }
  .chart-card svg text{ font-family:'Cairo',sans-serif; font-weight:600; }

  .seg{ display:flex; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; }
  .seg button{ background:var(--surface); border:none; padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; border-inline-start:1px solid var(--border-strong); }
  .seg button:first-child{ border-inline-start:none; }
  .seg button.active{ background:var(--accent-soft); color:var(--accent-strong); }

  [hidden]{ display:none !important; }
  .print-only{ display:none; }
  /* print/PDF letterhead: location name (+ optional logo) big, top-left, shown ONCE
     per report -- the on-screen page title (.pagehead h1) is hidden in print/pdf-capture
     instead of showing alongside this, so the report title never appears twice. */
  .print-header{ margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid #000; }
  .print-header .print-brand-row{ display:flex; align-items:center; gap:12px; direction:ltr; text-align:left; margin-bottom:10px; }
  .print-header .print-logo{ width:50px; height:50px; object-fit:contain; flex-shrink:0; }
  .print-header .print-brand{ font-family:'Cairo',sans-serif; font-size:27px; font-weight:800; color:#000; line-height:1.15; }
  .print-header h2{ margin:0 0 6px; font-size:15.5px; font-weight:700; color:#333; }
  .print-header .print-filters{ font-family:'Cairo',sans-serif; font-weight:700; font-size:12.5px; color:#000; }

  @media (max-width: 1100px){
    .shell{ grid-template-columns: 1fr 208px; }
    .main{ padding: 20px 22px 60px; }
    .locationbar, .monthbar{ padding-inline:22px; }
  }
  @media (max-width: 760px){
    .shell{ grid-template-columns: 1fr; }
    .nav{ position:fixed; bottom:0; right:0; left:0; top:auto; height:auto; flex-direction:row; overflow-x:auto; padding:8px; border-inline-start:none; border-top:1px solid var(--sidebar-border); z-index:40; }
    /* #navlinks is a plain block div on desktop (its .navbtn children stack vertically
       by default, which is what the sidebar wants) -- on the mobile bottom-bar layout it
       needs to become the actual row container itself, or .nav{flex-direction:row} above
       has nothing to lay out horizontally since #navlinks is its only visible child. */
    #navlinks{ display:flex; flex-direction:row; gap:4px; overflow-x:auto; }
    .brand, .navfoot{ display:none; }
    .navbtn{ flex-direction:column; width:auto; padding:7px 12px; font-size:10.5px; gap:4px; white-space:nowrap; }
    .maincol{ max-width:none; }
    .locationbar{ padding:10px 16px; }
    .monthbar{ padding:12px 16px; }
    .main{ padding:14px 16px 90px; }
    .kpis{ grid-template-columns: repeat(2,1fr); }
    .pagehead h1{ font-size:21px; }
    .table-toolbar{ flex-direction:column; align-items:stretch; }
    .search-box{ max-width:none; }
    /* keep the floating "إضافة ظرف" button clear of the mobile bottom nav bar
       (which is also position:fixed, same z-index) -- !important because the
       button's own position/offsets are set inline in renderEnvelopes() */
    #addEnvelopeFab{ right:16px !important; bottom:78px !important; padding:12px 16px !important; }
  }

  @media print{
    @page{ margin: 14mm 12mm; }
    .nav, .pagehead .row, .no-print{ display:none !important; }
    /* the print-only letterhead (.print-header, below) carries the title now -- don't
       also show the on-screen page heading, or the report name repeats twice */
    .pagehead{ display:none !important; }
    .shell{ display:block; }
    .maincol{ max-width:none; }
    .main{ padding:0; max-width:none; }
    body,#app{ background:#fff; color:#000; font-size:12px; }
    .print-only{ display:block; }
    .card{ box-shadow:none; border:none; border-radius:0; padding:0 0 12px; break-inside:avoid; background:#fff; }
    .card h3{ font-size:12.5px; margin-bottom:5px; }
    .balance-banner{ background:#fff !important; border:2px solid #000; break-inside:avoid; padding:10px 14px; }
    .balance-banner .amt{ color:#000 !important; font-size:20px; }
    .kpi{ border:1px solid #ccc; break-inside:avoid; }
    /* compact rows on purpose -- lets more orders fit per printed page (explicit request) */
    table{ width:100%; border-collapse:collapse; font-size:9.5px; line-height:1.25; }
    thead{ display:table-header-group; }
    tr{ break-inside:avoid; }
    th, td{ border:1px solid #999 !important; padding:2px 5px !important; color:#000 !important; }
    th{ background:#e9e9e9 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; font-size:9px; }
    tbody tr:nth-child(even) td{ background:#f6f6f6 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    tfoot td{ background:#e0e0e0 !important; font-weight:700; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .pill{ border:1px solid #999; background:#fff !important; color:#000 !important; padding:0px 6px; font-size:9px; }
  }

  /* ---------- pdf-capture: mirrors the @media print rules above, but as a class ----------
     html2canvas rasterizes the DOM using normal screen styles — it never evaluates
     @media print — so PDF export toggles this class on #app instead to get the same
     clean, bordered, no-nav look inside the exported file. */
  #app.pdf-capture{ background:#fff; color:#000; }
  .pdf-capture .no-print{ display:none !important; }
  .pdf-capture .shell{ display:block; }
  .pdf-capture .maincol{ padding:0; max-width:none; }
  .pdf-capture .main{ padding:0; max-width:none; }
  .pdf-capture .print-only{ display:block; }
  /* same as @media print above: the letterhead carries the title, so don't double it up */
  .pdf-capture .pagehead{ display:none !important; }
  .pdf-capture .card{ box-shadow:none; border:none; border-radius:0; padding:0 0 12px; background:#fff; }
  .pdf-capture .card h3{ font-size:12.5px; margin-bottom:5px; }
  .pdf-capture .balance-banner{ background:#fff !important; border:2px solid #000; padding:10px 14px; }
  .pdf-capture .balance-banner .amt{ color:#000 !important; font-size:20px; }
  .pdf-capture .kpi{ border:1px solid #ccc; }
  /* compact rows on purpose -- lets more orders fit per printed/exported page (explicit request) */
  .pdf-capture table{ width:100%; border-collapse:collapse; font-size:9.5px; line-height:1.25; }
  .pdf-capture th, .pdf-capture td{ border:1px solid #999 !important; padding:2px 5px !important; color:#000 !important; }
  .pdf-capture th{ background:#e9e9e9 !important; font-size:9px; }
  .pdf-capture tbody tr:nth-child(even) td{ background:#f6f6f6 !important; }
  .pdf-capture tfoot td{ background:#e0e0e0 !important; font-weight:700; }
  .pdf-capture .pill{ border:1px solid #999; background:#fff !important; color:#000 !important; padding:0px 6px; font-size:9px; }

/* ===== خدمة العملاء (مدموج من دفتر زباين المرسم) — كل الستايل محصور جوه #crmRoot و #crmFloat ===== */
#crmRoot,#crmFloat{
  --paper:var(--bg); --muted:var(--ink-2); --line:var(--border);
  --wa:var(--good); --wa-soft:var(--good-soft); --chip:var(--surface-2);
  --f-display:"Cairo",Tahoma,sans-serif; --f-body:"Cairo",Tahoma,"Segoe UI",sans-serif; --r:10px;
}
#crmRoot,#crmFloat{direction:rtl}
#crmRoot nav::-webkit-scrollbar,#crmFloat nav::-webkit-scrollbar{display:none}
#crmRoot,#crmFloat{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;margin:0}
#crmRoot .wrap,#crmFloat .wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
#crmRoot header .wrap,#crmFloat header .wrap{padding-block:0}
#crmRoot header,#crmFloat header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
#crmRoot .hrow,#crmFloat .hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px 8px}
#crmRoot .brand,#crmFloat .brand{display:flex;align-items:center;gap:10px;min-width:0}
#crmRoot .mark,#crmFloat .mark{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#6b6d73 0,#2b2c30 55%,#111 100%);box-shadow:inset -3px -3px 6px rgba(255,255,255,.12)}
#crmRoot h1,#crmFloat h1{font-family:var(--f-display);font-size:1.25rem;margin:0;line-height:1.2}
#crmRoot .sub,#crmFloat .sub{color:var(--muted);font-size:.8rem}
#crmRoot .today,#crmFloat .today{font-size:.82rem;color:var(--muted);text-align:left;white-space:nowrap}
#crmRoot .today b,#crmFloat .today b{color:var(--ink);font-variant-numeric:tabular-nums}
#crmRoot nav,#crmFloat nav{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
#crmRoot nav button,#crmFloat nav button{border:0;background:none;color:var(--muted);font:inherit;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
#crmRoot nav button[aria-current="true"],#crmFloat nav button[aria-current="true"]{background:var(--ink);color:var(--paper)}
#crmRoot nav button:focus-visible,#crmFloat nav button:focus-visible,#crmRoot button:focus-visible,#crmFloat button:focus-visible,#crmRoot a:focus-visible,#crmFloat a:focus-visible,#crmRoot input:focus-visible,#crmFloat input:focus-visible,#crmRoot select:focus-visible,#crmFloat select:focus-visible,#crmRoot textarea:focus-visible,#crmFloat textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#crmRoot .badge,#crmFloat .badge{display:inline-block;min-width:20px;padding:0 6px;margin-inline-start:6px;border-radius:999px;background:var(--warn);color:var(--surface);font-size:.72rem;line-height:20px;text-align:center}
#crmRoot main section,#crmFloat main section{padding-top:20px}
#crmRoot h2,#crmFloat h2{font-family:var(--f-display);font-size:1.1rem;margin:0 0 12px;text-wrap:balance}
#crmRoot h3,#crmFloat h3{font-size:.95rem;margin:0 0 8px}
#crmRoot .muted,#crmFloat .muted{color:var(--muted)}
#crmRoot .notice,#crmFloat .notice{padding:10px 14px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn);font-size:.88rem;margin-top:14px}
#crmRoot .kpis,#crmFloat .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
#crmRoot .kpi,#crmFloat .kpi{background:var(--surface);padding:14px 16px}
#crmRoot .kpi .n,#crmFloat .kpi .n{font-family:var(--f-display);font-size:1.7rem;font-variant-numeric:tabular-nums;line-height:1.2}
#crmRoot .kpi .l,#crmFloat .kpi .l{color:var(--muted);font-size:.82rem}
#crmRoot .grid2,#crmFloat .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:24px}
#crmRoot .grid2>*,#crmFloat .grid2>*{min-width:0}
#crmRoot .panel,#crmFloat .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
#crmRoot .bars,#crmFloat .bars{display:grid;gap:8px}
#crmRoot .bar,#crmFloat .bar{display:grid;grid-template-columns:minmax(80px,140px) 1fr 40px;gap:10px;align-items:center;font-size:.86rem}
#crmRoot .bar .t,#crmFloat .bar .t{height:10px;background:var(--chip);border-radius:6px;overflow:hidden}
#crmRoot .bar .t i,#crmFloat .bar .t i{display:block;height:100%;background:var(--accent);border-radius:6px}
#crmRoot .bar .v,#crmFloat .bar .v{text-align:left;font-variant-numeric:tabular-nums}
#crmRoot .toolbar,#crmFloat .toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
#crmRoot .toolbar>*,#crmFloat .toolbar>*{flex:1 1 150px;min-width:0}
#crmRoot input,#crmFloat input,#crmRoot select,#crmFloat select,#crmRoot textarea,#crmFloat textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
#crmRoot textarea,#crmFloat textarea{resize:vertical;min-height:90px;line-height:1.55}
#crmRoot .ltr,#crmFloat .ltr{direction:ltr;text-align:left}
#crmRoot label,#crmFloat label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px;font-weight:500}
#crmRoot .form,#crmFloat .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
#crmRoot .form .full,#crmFloat .form .full{grid-column:1/-1}
#crmRoot .hint,#crmFloat .hint{font-size:.8rem;margin-top:4px}
#crmRoot .hint.ok,#crmFloat .hint.ok{color:var(--wa)}
#crmRoot .hint.bad,#crmFloat .hint.bad{color:var(--bad)}
#crmRoot .hint.warn,#crmFloat .hint.warn{color:var(--warn)}
#crmRoot .btn,#crmFloat .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;border-radius:8px;padding:9px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
#crmRoot .btn:hover,#crmFloat .btn:hover{border-color:var(--muted)}
#crmRoot .btn.primary,#crmFloat .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface)}
#crmRoot .btn.wa,#crmFloat .btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}
#crmRoot .btn.sm,#crmFloat .btn.sm{padding:5px 10px;font-size:.82rem}
#crmRoot .btn.ghost,#crmFloat .btn.ghost{border-color:transparent;background:none;color:var(--muted)}
#crmRoot .btn[disabled],#crmFloat .btn[disabled]{opacity:.5;cursor:not-allowed}
#crmRoot .row-actions,#crmFloat .row-actions{display:flex;flex-wrap:wrap;gap:8px}
#crmRoot .table-wrap,#crmFloat .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
#crmRoot table,#crmFloat table{width:100%;border-collapse:collapse;font-size:.88rem}
#crmRoot th,#crmFloat th{font-weight:600;color:var(--muted);text-align:right;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:.8rem}
#crmRoot td,#crmFloat td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
#crmRoot tr:last-child td,#crmFloat tr:last-child td{border-bottom:0}
#crmRoot td.num,#crmFloat td.num{font-variant-numeric:tabular-nums;direction:ltr;text-align:right;white-space:nowrap}
#crmRoot .name,#crmFloat .name{font-weight:600}
#crmRoot .iso,#crmFloat .iso{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:4px;background:var(--chip);color:var(--muted);margin-inline-start:6px;direction:ltr}
#crmRoot .pill,#crmFloat .pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap;background:var(--chip);color:var(--muted)}
#crmRoot .s-sent,#crmFloat .s-sent{background:var(--accent-soft);color:var(--accent)}
#crmRoot .s-replied,#crmFloat .s-replied,#crmRoot .s-interested,#crmFloat .s-interested{background:var(--wa-soft);color:var(--wa)}
#crmRoot .s-ordered,#crmFloat .s-ordered{background:var(--wa);color:#fff}
#crmRoot .t-vip,#crmFloat .t-vip{background:#C9A227;color:#2a2205}
#crmRoot .t-mid,#crmFloat .t-mid{background:var(--accent-soft);color:var(--accent)}
#crmRoot .t-low,#crmFloat .t-low{background:var(--chip);color:var(--muted)}
#crmRoot .s-wrong,#crmFloat .s-wrong,#crmRoot .s-stop,#crmFloat .s-stop{background:var(--bad-soft);color:var(--bad)}
#crmRoot .due,#crmFloat .due{color:var(--warn);font-weight:600}
#crmRoot .wa-ic,#crmFloat .wa-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--wa-soft);color:var(--wa);margin-inline-start:6px;vertical-align:middle;flex:none}
#crmRoot .wa-ic:hover,#crmFloat .wa-ic:hover{background:var(--wa);color:#fff}
#crmRoot .wa-ic svg,#crmFloat .wa-ic svg{width:15px;height:15px}
#crmRoot .nowa,#crmFloat .nowa{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--bad-soft);color:var(--bad);font-size:.72rem;font-weight:700;white-space:nowrap;margin-inline-start:6px}
#crmRoot .askbar,#crmFloat .askbar{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline:16px;margin:auto;max-width:560px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);padding:12px 14px;border-radius:12px;z-index:55;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
#crmRoot .askbar p,#crmFloat .askbar p{margin:0;font-size:.9rem;flex:1 1 220px}
#crmRoot .code,#crmFloat .code{font-variant-numeric:tabular-nums;font-size:.75rem;color:var(--muted);direction:ltr;display:inline-block}
#crmRoot .ex,#crmFloat .ex{font-size:.7rem;color:var(--warn);margin-inline-start:6px}
#crmRoot .qcard,#crmFloat .qcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px;display:grid;gap:14px}
#crmRoot .qhead,#crmFloat .qhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start}
#crmRoot .qmeta,#crmFloat .qmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#crmRoot .qmsg,#crmFloat .qmsg{min-height:170px}
#crmRoot .progress,#crmFloat .progress{height:6px;background:var(--chip);border-radius:6px;overflow:hidden;margin:6px 0 14px}
#crmRoot .progress i,#crmFloat .progress i{display:block;height:100%;background:var(--wa)}
#crmRoot .tips,#crmFloat .tips{font-size:.86rem}
#crmRoot .tips li,#crmFloat .tips li{margin-bottom:6px}
#crmRoot .empty,#crmFloat .empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
#crmRoot .overlay,#crmFloat .overlay{position:fixed;inset:0;background:rgba(10,12,16,.5);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px}
#crmRoot .modal,#crmFloat .modal{background:var(--surface);border-radius:14px;max-width:760px;width:100%;padding:20px;box-shadow:var(--shadow)}
#crmRoot .modal .mh,#crmFloat .modal .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#crmRoot .hist,#crmFloat .hist{font-size:.82rem;color:var(--muted);margin:0;padding-inline-start:18px}
#crmRoot .toast,#crmFloat .toast{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline:16px;margin:auto;max-width:420px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;text-align:center;z-index:60;font-size:.9rem}
#crmRoot .seg,#crmFloat .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#crmRoot .seg button,#crmFloat .seg button{border:0;background:var(--surface);color:var(--muted);font:inherit;padding:7px 14px;cursor:pointer}
#crmRoot .seg button[aria-pressed="true"],#crmFloat .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
@media (max-width:640px){#crmRoot .today,#crmFloat .today{display:none}
#crmRoot .hide-sm,#crmFloat .hide-sm{display:none}
#crmRoot .bar,#crmFloat .bar{grid-template-columns:90px 1fr 34px}}
@media (prefers-reduced-motion:reduce){}
#crmRoot .wrap{max-width:none;padding-inline:0}
#crmRoot .crm-strip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start;color:var(--ink-2);font-size:.85rem;margin:2px 0 4px}
#crmRoot .crm-strip b{color:var(--ink);font-variant-numeric:tabular-nums}
#crmRoot .bulk-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:.9rem}
#crmRoot .bulk-list{display:grid;gap:10px}
#crmRoot .bulk-row{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:8px 12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
#crmRoot .bulk-row.done{border-color:var(--wa);background:var(--wa-soft)}
#crmRoot .bulk-row .row-actions{grid-column:2;gap:6px}
#crmRoot .bulk-meta{grid-row:span 2}
#crmRoot .bulk-msg{min-height:84px;font-size:.88rem}
@media (max-width:900px){#crmRoot .bulk-row{grid-template-columns:1fr}#crmRoot .bulk-row .row-actions{grid-column:1}#crmRoot .bulk-meta{grid-row:auto}}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.cust-scroll{max-height:calc(100vh - 300px);min-height:240px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.cust-scroll thead th{position:sticky;top:0;z-index:2;background:var(--surface)}
.cust-scroll td{vertical-align:top}
.cust-more{position:relative}
.cust-more summary{list-style:none;cursor:pointer}
.cust-more summary::-webkit-details-marker{display:none}
.cust-more-menu{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:grid;gap:4px;min-width:260px}
.cust-more-menu .btn{justify-content:flex-start;width:100%}
.cm-sec{margin:14px 0 8px;font-size:13px;font-weight:800;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:4px}
.crm-subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.crm-subtabs button{border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.crm-subtabs button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.crm-subtabs .cnt{display:inline-block;min-width:18px;padding:0 6px;margin-inline-start:6px;border-radius:999px;background:var(--warn);color:#fff;font-size:.72rem;line-height:18px;text-align:center}
.cs-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.cs-sent{background:var(--accent-soft);color:var(--accent)}
.cs-replied,.cs-interested{background:var(--good-soft);color:var(--good)}
.cs-ordered{background:var(--good);color:#fff}
.cs-wrong,.cs-stop{background:var(--bad-soft);color:var(--bad)}
.cs-noreply{background:var(--warn-soft);color:var(--warn)}

/* ===== الفلوس والخزينة ===== */
.fin-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.fin-tabs button{border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer}
.fin-tabs button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fin-tabs .cnt{display:inline-block;min-width:18px;padding:0 6px;margin-inline-start:6px;border-radius:999px;background:var(--bad);color:#fff;font-size:.72rem;line-height:18px;text-align:center}
.falerts{display:grid;gap:8px;margin-bottom:14px}
.falert{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-size:13.5px}
.falert.bad{border-color:var(--bad);background:var(--bad-soft)}
.falert.warn{border-color:var(--warn);background:var(--warn-soft)}
.falert.good{border-color:var(--good);background:var(--good-soft)}
.falert .btn{margin-inline-start:auto}
.fquick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.fq{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font:inherit;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:transform .08s}
.fq:active{transform:scale(.97)}
.fq span{font-size:22px;line-height:1}
.fq.good span{color:var(--good)} .fq.bad span{color:var(--bad)}
.ftotal{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:14px}
.ftotal .big{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums}
.fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.fcard-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;margin-bottom:8px}
.fcard-h b{font-size:19px;font-variant-numeric:tabular-nums}
.fcard-r{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:2px 0;font-variant-numeric:tabular-nums}
.fcard-f{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:12px;color:var(--ink-3)}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:860px){.fgrid2{grid-template-columns:1fr}.fquick{grid-template-columns:repeat(2,1fr)}}
.fsec-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fsec-h h3{margin:0;font-size:15px}
.frow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.frow:first-of-type{border-top:0}
.fchips{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.fchip{display:inline-flex;gap:4px;align-items:baseline;padding:2px 8px;border-radius:8px;background:var(--good-soft);color:var(--good);font-weight:700;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fchip.neg{background:var(--bad-soft);color:var(--bad)}
.fchip i{font-style:normal;font-weight:500;opacity:.75;font-size:11px}
.fpill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.fpill.good{background:var(--good-soft);color:var(--good)} .fpill.bad{background:var(--bad-soft);color:var(--bad)}
.fpill.warn{background:var(--warn-soft);color:var(--warn)} .fpill.info{background:var(--accent-soft);color:var(--accent)}
.fauto{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
tr.fauto-row td{background:var(--accent-soft)}
.fsum{display:flex;flex-wrap:wrap;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 16px;margin-bottom:12px;font-size:13.5px}
.fsum b{font-size:16px;margin-inline-start:6px;font-variant-numeric:tabular-nums}
.pos{color:var(--good)} .neg{color:var(--bad)}
.fcm{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid var(--border);border-inline-start:4px solid var(--accent)}
.fcm:first-of-type{border-top:0}
.fcm.late{border-inline-start-color:var(--bad)} .fcm.soon{border-inline-start-color:var(--warn)} .fcm.paid{border-inline-start-color:var(--good);opacity:.75}
.fcm-a{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-variant-numeric:tabular-nums}
.fcm-b{display:flex;gap:6px}
@media (max-width:700px){.fcm{grid-template-columns:1fr auto}.fcm-b{grid-column:1/-1}}
.fline{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:6px;margin-bottom:6px}
.fx{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;margin:6px 0}
.fx>div{display:grid;gap:6px}
.fx label{font-weight:700;font-size:13px}
.fx-arrow{font-size:22px;padding-bottom:40px;color:var(--ink-3)}
.fguess{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer}
.fbar-row{display:grid;grid-template-columns:110px 1fr 130px;gap:10px;align-items:center;padding:5px 0}
.fbar-l{font-size:13px;color:var(--ink-2)}
.fbar-t{display:grid;gap:3px}
.fbar{height:9px;border-radius:5px;min-width:2px}
.fbar.good{background:var(--good)} .fbar.bad{background:var(--bad)}
.fbar-v{text-align:left;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.fdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px}
.fdot.good{background:var(--good)} .fdot.bad{background:var(--bad)}

/* ===================== موبايل وتابلت ===================== */
.fx select,.fx input,.fline select,.fline input{width:100%;padding:9px 10px;border:1px solid var(--border-strong,var(--border));border-radius:8px;background:var(--surface);color:var(--ink);min-height:40px}
.mtop{display:none}
.nav-overlay{display:none}
/* clip مش hidden: hidden بيخلّي الصفحة «صندوق سكرول» والقايمة الجانبية (sticky) بتتسكرل معاها */
html,body{max-width:100%;overflow-x:clip}
.tablewrap{-webkit-overflow-scrolling:touch}
@media (max-width:900px){
  /* القايمة الجانبية بقت درج بيطلع من اليمين بزرار ☰ */
  .shell{grid-template-columns:1fr !important}
  .nav{position:fixed !important;top:0 !important;bottom:0 !important;right:0 !important;left:auto !important;width:min(84vw,300px) !important;height:100% !important;
    flex-direction:column !important;overflow-y:auto !important;padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px)) !important;
    border-top:none !important;transform:translateX(105%);transition:transform .22s ease;z-index:60 !important;box-shadow:-8px 0 30px rgba(0,0,0,.25)}
  body.nav-open .nav{transform:none}
  body.nav-open{overflow:hidden}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  body.nav-open .nav-overlay{opacity:1;pointer-events:auto}
  #navlinks{display:block !important}
  .brand{display:flex !important;padding:4px 8px 14px !important}
  .brand .name{font-size:20px !important}
  .navfoot{display:block !important}
  .navbtn{flex-direction:row !important;width:100% !important;padding:12px 12px !important;font-size:15px !important;gap:12px !important;white-space:normal !important}
  /* شريط علوي ثابت: ☰ + اسم الشاشة، وتحته المكان والشهر في سطرين رفيعين */
  .mtop{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;background:var(--sidebar-bg);color:#fff}
  .mmenu{width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
  .mtitle{font-weight:800;font-size:17px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mloc{display:none;font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
  .topbars{display:grid !important;grid-template-columns:minmax(0,1fr) auto;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06)}
  .topbars .mtop{grid-column:1/-1}
  .topbars .locationbar[hidden],.topbars .monthbar[hidden]{display:none !important}
  .locationbar{padding:6px 8px 6px 4px !important;gap:8px !important;flex-wrap:nowrap !important;background:transparent !important;border:none !important;margin:0 !important}
  .monthbar{border:none !important;margin:0 !important;background:transparent !important}
  .monthbar #thisMonth{display:none !important}
  .monthbar .row > div{min-width:0 !important;font-size:13.5px;white-space:nowrap;padding:0 2px}
  .monthbar .row{gap:4px !important}
  .locationbar .locationbar-label,.locationbar [data-goto-locations]{display:none !important}
  .locationbar select{flex:1;width:100%;min-width:0;padding:9px 10px !important;font-size:16px !important}
  .locationbar > *{min-width:0}
  .monthbar{padding:6px 12px 6px 8px !important;flex-wrap:nowrap !important;justify-content:center !important}
  .monthbar .monthbar-label{display:none !important}
  .monthbar .row{flex-wrap:nowrap !important;justify-content:flex-end}
  .monthbar .btn{min-width:38px;min-height:38px;padding:0 !important}
  .main{padding:12px 12px calc(28px + env(safe-area-inset-bottom,0px)) !important;min-width:0}
  .maincol{max-width:100vw !important;min-width:0}
  /* عناوين الصفحات والأزرار */
  .pagehead{flex-direction:column !important;align-items:stretch !important;gap:10px !important;margin-bottom:12px !important}
  .pagehead h1{font-size:21px !important}
  .pagehead .row,.report-actions{flex-wrap:wrap !important;gap:6px !important;width:100%}
  .pagehead .row > .btn,.pagehead .row > .export-dd,.pagehead .row > details{flex:1 1 auto}
  .pagehead .btn{justify-content:center}
  .export-menu{inset-inline-end:auto !important;inset-inline-start:0 !important;min-width:200px}
  /* لمس أسهل: أزرار وخانات أكبر، و16px عشان الآيفون ما يعملش زووم */
  .btn{min-height:40px}
  .btn.small{min-height:34px}
  input,select,textarea{font-size:16px !important}
  .card{padding:14px !important;border-radius:12px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  .kpi{padding:12px !important;min-width:0}
  .kpi .v,.kpi .value,.kpi b{font-size:18px !important;word-break:break-word}
  .cgrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important}
  .row{flex-wrap:wrap}
  .field{min-width:0}
  /* أي جريد معمول inline بأعمدة كتير يبقى عمود واحد */
  .main [style*="grid-template-columns:repeat(3"],.main [style*="grid-template-columns: repeat(3"],
  .main [style*="grid-template-columns:repeat(4"],.main [style*="grid-template-columns: repeat(4"],
  .main [style*="grid-template-columns:1fr 1fr"],.main [style*="grid-template-columns: 1fr 1fr"],
  .main [style*="grid-template-columns:2fr"],.main [style*="grid-template-columns: 2fr"]{grid-template-columns:1fr !important}
  .grid2,.grid-2,.two-col,.charts-grid{grid-template-columns:1fr !important}
  /* الجداول: بتسكرول جوه نفسها بس، والصفحة ما بتتحركش يمين وشمال */
  .tablewrap{overflow-x:auto;max-width:100%;border-radius:10px}
  .tablewrap table{min-width:max-content}
  th,td{padding:8px 10px !important;font-size:13px}
  /* شريط التابات (العملاء / الخزينة / الإعدادات): سطر واحد بيتسحب بالصباع */
  .crm-subtabs,.fin-tabs,.subnav,.tabs-row{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-12px;padding-inline:12px;padding-bottom:4px}
  .crm-subtabs::-webkit-scrollbar,.fin-tabs::-webkit-scrollbar,.subnav::-webkit-scrollbar{display:none}
  .crm-subtabs button,.fin-tabs button,.subnav button{flex-shrink:0;white-space:nowrap}
  .subnav{display:flex !important}
  /* النوافذ: بتطلع من تحت بعرض الشاشة وبتسكرول جواها */
  .modal-back{align-items:flex-end !important;padding:0 !important}
  .modal{max-width:100% !important;width:100% !important;border-radius:16px 16px 0 0 !important;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px)) !important}
  .modal .row{gap:8px}
  .modal .row[style*="space-between"]{flex-wrap:wrap}
  /* الأزرار العايمة */
  #addEnvelopeFab{right:16px !important;bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important}
  /* ===== قايمة العملاء: كروت بدل جدول ===== */
  .cust-scroll{max-height:none !important;border:none !important;overflow:visible !important}
  .cust-scroll table{min-width:0 !important;width:100%}
  .cust-scroll thead{display:none}
  .cust-scroll tbody,.cust-scroll tr{display:block}
  .cust-scroll tr{display:grid !important;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:12px;margin-bottom:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
  .cust-scroll td{display:block;padding:0 !important;border:none !important;font-size:13px}
  .cust-scroll:not(.fin-tx) td:nth-child(1){grid-column:1/-1;grid-row:1}
  .cust-scroll:not(.fin-tx) td:nth-child(2){grid-column:1/-1;grid-row:2}
  .cust-scroll:not(.fin-tx) td:nth-child(3){grid-column:1/2;grid-row:3}
  .cust-scroll:not(.fin-tx) td:nth-child(3) .hint{white-space:nowrap}
  .cust-scroll:not(.fin-tx) td:nth-child(4){grid-column:2/3;grid-row:3}
  .cust-scroll:not(.fin-tx) td:nth-child(5){grid-column:3/4;grid-row:3;justify-self:start}
  .cust-scroll:not(.fin-tx) td:nth-child(6){grid-column:1/3;grid-row:4;font-size:12.5px;text-align:right}
  .cust-scroll:not(.fin-tx) td:nth-child(7){grid-column:3/4;grid-row:4;font-size:12px;color:var(--ink-3);justify-self:end}
  .cust-scroll:not(.fin-tx) td:nth-child(6) div{display:inline;margin-inline-end:8px}
  @media (min-width:600px){ .cust-scroll tbody{display:grid !important;grid-template-columns:1fr 1fr;gap:10px} .cust-scroll tr{margin-bottom:0} }
  .cust-scroll .wa-quick-link{min-height:34px;padding:6px 12px !important}
  /* عمليات الخزينة: كروت بترتيب خاص (البيان فوق، والتاريخ والمكان تحته) */
  .cust-scroll tr.fauto-row{background:var(--accent-soft)}
  .fin-tx tr{grid-template-columns:1fr auto !important}
  .fin-tx td:nth-child(3){grid-column:1/2 !important;grid-row:1}
  .fin-tx td:nth-child(4){grid-column:2/3 !important;grid-row:1;text-align:left}
  .fin-tx td:nth-child(1){grid-column:1/2 !important;grid-row:2;color:var(--ink-3);font-size:12px}
  .fin-tx td:nth-child(2){grid-column:2/3 !important;grid-row:2;color:var(--ink-3);font-size:12px;text-align:left}
  .fin-tx td:nth-child(5){grid-column:1/2 !important;grid-row:3}
  .fin-tx td:nth-child(5) .fchips{justify-content:flex-start}
  .fin-tx td:nth-child(6){grid-column:2/3 !important;grid-row:3;text-align:left;font-weight:800}
  .fin-tx td:nth-child(7){grid-column:1/-1 !important;grid-row:4}
  /* الخزينة */
  .fquick{grid-template-columns:repeat(2,1fr) !important}
  .fq{padding:14px 6px !important;font-size:14px !important}
  .ftotal{padding:12px 14px !important;gap:12px !important}
  .ftotal .big{font-size:21px !important}
  .fcards{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .fcard{padding:10px 12px !important}
  .fcard-h b{font-size:16px !important}
  .fsum{gap:10px !important;font-size:12.5px}
  .fsum > div[style*="margin-inline-start"]{margin-inline-start:0 !important;width:100%;display:flex;gap:6px;flex-wrap:wrap}
  .fcm{grid-template-columns:1fr auto !important;padding:10px 8px !important}
  .fcm-b{grid-column:1/-1}
  .fline{grid-template-columns:1fr 1fr !important}
  .fline .fl-a{grid-column:1/2}
  .fx{grid-template-columns:1fr !important}
  .fx-arrow{padding:0 !important;text-align:center;transform:rotate(-90deg)}
  .fbar-row{grid-template-columns:78px 1fr 92px !important;gap:6px !important}
  .fbar-l,.fbar-v{font-size:11.5px !important}
  .frow{flex-wrap:wrap}
  /* موديول الرسايل */
  #crmRoot .crm-strip{font-size:12.5px}
  #crmRoot .toolbar{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
  #crmRoot .toolbar > div{min-width:0 !important;flex:none !important}
  #crmRoot .grid2{grid-template-columns:1fr !important}
  #crmRoot .kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #crmRoot .seg{width:100%;display:flex}
  #crmRoot .seg button{flex:1}
  #crmRoot .bulk-row{padding:10px !important}
  #crmRoot .bulk-row .row-actions .btn{flex:1 1 auto;min-height:38px}
  #crmRoot .bulk-row .row-actions .btn.wa{flex:1 1 100%;min-height:44px;font-size:15px}
  #crmRoot .qcard .row-actions .btn{min-height:44px}
  #crmRoot .form,#crmFloat .form{grid-template-columns:1fr 1fr !important}
  #crmRoot textarea{font-size:16px !important}
}
@media (min-width:901px) and (max-width:1100px){
  .main{padding:18px 18px 40px !important}
  .cgrid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important}
  .fquick{grid-template-columns:repeat(4,1fr)}
  .tablewrap{max-width:100%}
  .crm-subtabs,.fin-tabs{flex-wrap:nowrap;overflow-x:auto}
  .modal{max-height:90vh;overflow-y:auto}
}

/* ===== إضافة أوردر: كل حاجة في شاشة واحدة ===== */
.no-card{padding:16px 18px !important}
.no-grid{display:grid;grid-template-columns:150px 140px minmax(0,1.2fr) minmax(0,1fr);gap:10px 12px;margin-bottom:12px}
.no-hint{font-size:12px;margin-top:3px;min-height:16px;color:var(--ink-3)}
.no-hint.ok{color:var(--good)} .no-hint.warn{color:var(--warn);font-weight:700} .no-hint.known{color:var(--accent-strong);font-weight:700}
.no-chiprow{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.no-chiprow > label{min-width:78px;font-weight:700;font-size:13px;color:var(--ink-2);padding-top:8px}
.no-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.no-chip{border:1px solid var(--border-strong,var(--border));background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:14px;padding:7px 14px;border-radius:999px;cursor:pointer;min-height:38px;transition:background .1s}
.no-chip i{font-style:normal;font-weight:500;font-size:12px;opacity:.7}
.no-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)}
.no-chip.add{border-style:dashed;color:var(--ink-3);font-weight:600}
.no-amts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:4px 0 12px;padding:12px;border-radius:12px;background:var(--surface-2)}
.no-amts input{font-size:18px !important;font-weight:700;text-align:center}
.no-amts input:not(:placeholder-shown){border-color:var(--accent);background:var(--surface)}
.no-bottom{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.no-preview{flex:1;min-width:260px;background:transparent !important;padding:0 !important}
.no-preview .row{gap:22px !important;justify-content:flex-start !important}
.no-actions{display:flex;gap:8px;align-items:center}
.no-save{min-width:170px;min-height:46px;font-size:16px !important}
#splitLinesContainer .card{margin-bottom:10px !important}
@media (max-width:1200px){ .no-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .no-amts{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .no-chiprow{flex-direction:column;gap:6px}
  .no-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;padding-bottom:4px;scrollbar-width:none}
  .no-chips::-webkit-scrollbar{display:none}
  .no-chip{flex-shrink:0;white-space:nowrap}
  .no-preview{min-width:0}
  .no-chiprow > label{padding-top:0}
  .no-amts{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px;gap:8px}
  .no-bottom{flex-direction:column;align-items:stretch}
  .no-actions{justify-content:space-between}
  .no-save{flex:1}
}

.no-pin{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-inline-end:4px;border-radius:50%;font-size:14px;color:var(--ink-3);opacity:.55;cursor:pointer;transition:opacity .1s,background .1s}
.no-pin:hover{opacity:1;background:rgba(0,0,0,.06)}
.no-pin.on{opacity:1;color:inherit}
.no-chip.on .no-pin{color:#fff}
.no-defcur input{border-color:var(--warn) !important;box-shadow:0 0 0 2px var(--warn-soft)}
.no-pinhint{margin:10px 0 0 !important;font-size:12px}
@media (hover:none){ .no-pin{opacity:.8;width:26px;height:26px} }

.cust-periods{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 12px}
.cp-btn{border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;min-height:34px}
.cp-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
@media (max-width:900px){ .cust-periods [data-cust-send]{flex:1 1 100%;margin-inline-start:0 !important;min-height:42px} }

.cu-phones{margin:10px 0 0;padding:10px 12px;border:1px dashed var(--border);border-radius:10px}
.cu-phones-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.cu-ph{display:grid;grid-template-columns:1fr auto auto;gap:6px;margin-bottom:6px}

/* ===== الطباعة ===== */
.prn-host *{box-shadow:none !important;animation:none !important;transition:none !important;letter-spacing:normal !important;word-spacing:normal !important;font-feature-settings:normal !important;text-transform:none !important}
.prn-host .card,.prn-host .panel{border:none !important;padding:0 !important;margin:0 0 8px !important;background:#fff !important;border-radius:0 !important}
.prn-host .tablewrap,.prn-host .prn-tw{overflow:visible !important;max-height:none !important;border:none !important;margin:0 0 8px}
.prn-host table{width:100% !important;min-width:0 !important;border-collapse:collapse !important;font-size:inherit !important;display:table !important}
.prn-host thead{display:table-header-group !important} .prn-host tbody{display:table-row-group !important} .prn-host tr{display:table-row !important}
.prn-host th,.prn-host td{display:table-cell !important;border:1px solid #9a9a9a !important;padding:2px 5px !important;color:#000 !important;background:#fff !important;font-size:inherit !important;vertical-align:middle !important;position:static !important}
.prn-host th{background:#e6e6e6 !important;font-weight:700 !important}
.prn-host th,.prn-host td{white-space:nowrap}
.prn-host tbody tr:nth-child(even) td{background:#f4f4f4 !important}
.prn-host tfoot td{background:#dedede !important;font-weight:800 !important}
.prn-host .pill,.prn-host .fpill,.prn-host .cs-pill{border:1px solid #999 !important;background:#fff !important;color:#000 !important;padding:0 5px !important;font-size:.92em !important}
.prn-host .kpis{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:6px !important;margin-bottom:8px !important}
.prn-host .kpi{border:1px solid #bbb !important;padding:5px 8px !important;border-radius:4px !important;background:#fff !important}
.prn-host .kpi *{font-size:1em !important} .prn-host .kpi .v,.prn-host .kpi .value,.prn-host .kpi b{font-size:1.25em !important}
.prn-host h1,.prn-host h2,.prn-host h3,.prn-host h4{margin:3px 0 5px !important;font-size:1.15em !important}
.prn-host .print-header{margin-bottom:8px !important;padding-bottom:6px !important}
.prn-host .print-header .print-brand{font-size:1.9em !important}
.prn-host .print-header h2{font-size:1.25em !important}
.prn-host .print-header .print-filters{font-size:1em !important}
.prn-host .hint{color:#333 !important;font-size:.95em !important}
.prn-host .num{font-variant-numeric:tabular-nums}
.prn-host .balance-banner{background:#fff !important;border:2px solid #000 !important;padding:6px 10px !important}
.prn-host .balance-banner .amt{color:#000 !important}
.prn-host svg{max-width:100%}
.ppv-pages{flex:1;min-height:0;overflow:auto;background:#d4d7dd;border-radius:10px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:10px;max-height:calc(90vh - 150px)}
.ppv-page{background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.25);width:100%;height:auto;display:block}
.ppv-page.port{max-width:620px} .ppv-page.land{max-width:880px}
.ppv-blocked{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:10px 14px;border-radius:10px;border:1px solid var(--warn);background:var(--warn-soft);font-size:13px}
.ppv-blocked[hidden]{display:none}
.pdf-preview-modal{display:flex;flex-direction:column;max-height:94vh;width:min(1040px,96vw) !important;max-width:min(1040px,96vw) !important;overflow-x:hidden}
.pdf-preview-head h3{overflow-wrap:anywhere;word-break:break-word;font-size:16px}
@media (max-width:900px){ .pdf-preview-modal{width:100% !important;max-width:100% !important} .pdf-preview-head .row .btn{flex:1 1 30%;justify-content:center;padding-inline:8px} .ppv-opts{justify-content:space-between} .ppv-opts label{flex:1} .ppv-opts select{flex:1;min-width:0} }
/* النوافذ بتتضاف على body مباشرة (بره #app) -- لازم تاخد لون الخط من الثيم عشان الوضع الغامق */
body{color:var(--ink)}
.modal-back,.modal{color:var(--ink)}
.modal .hint,.ppv-help,#ppv_info{color:var(--ink-2) !important}
.ppv-opts label{color:var(--ink) !important}
.ppv-opts select{color:var(--ink) !important;background:var(--surface-2) !important;border-color:var(--border-strong,var(--border)) !important}
.ppv-opts select option{color:var(--ink);background:var(--surface)}
.ppv-opts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ppv-opts label{display:flex;gap:6px;align-items:center;font-weight:700;font-size:13px}
.ppv-opts select{padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.pdf-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media (max-width:900px){ .pdf-preview-head{flex-direction:column;align-items:stretch} .pdf-preview-head .row{flex-wrap:wrap} .pdf-preview-head .row .btn{flex:1 1 auto} }

.inv-wrap{max-width:860px;margin:0 auto}
.inv-card{margin-bottom:12px}
.inv-card h3{margin:0 0 10px}
.inv-head{display:grid;grid-template-columns:1.3fr 1.2fr minmax(130px,.8fr);gap:12px;align-items:end}
.inv-lbl{font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:3px}
.inv-big{font-size:17px;font-weight:800}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 12px;margin-bottom:6px}
.inv-hint{font-size:12px;margin-top:3px;min-height:16px;color:var(--ink-3);font-weight:600}
.inv-hint.ok{color:var(--good)}
.inv-hint.warn{color:var(--warn)}
.inv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.inv-chip{border:1px solid var(--border-strong);background:var(--surface);color:inherit;border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.inv-chip.sm{padding:6px 12px;min-height:34px;font-weight:600;font-size:13px}
.inv-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.inv-live{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:10px;padding:12px 14px;background:var(--good-soft);border-radius:10px}
.inv-live>div{display:flex;flex-direction:column;gap:3px}
.inv-live span:first-child{font-size:12px;color:var(--ink-3);font-weight:600}
.inv-live b{font-size:19px}
.inv-actions{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;margin:14px 0 30px}
.inv-save{min-height:50px;padding:0 28px;font-size:16px}
.inv-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 16px}
.inv-sum>div{display:flex;flex-direction:column;gap:2px}
.inv-sum span{font-size:12px;color:var(--ink-3);font-weight:600}
#invForm input,#invForm textarea,#invSetForm input,#invSetForm select{min-height:44px;font-size:16px}
#invForm textarea{min-height:80px;width:100%;box-sizing:border-box}
@media (max-width:640px){
  .inv-head{grid-template-columns:1fr}
  .inv-save{width:100%}
  .inv-actions .btn{flex:1}
}

.inv-modal{max-width:560px}
.inv-mh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.inv-sec{border-top:1px solid var(--border);padding:10px 0}
.inv-st{font-size:12px;font-weight:800;color:var(--ink-3);margin-bottom:6px}
.inv-kv{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.inv-kv span{color:var(--ink-3);font-size:13px}
.inv-kv b{text-align:left}
.inv-line{padding:6px 8px;border-radius:8px;margin-bottom:6px;background:var(--surface-2)}
.inv-line.on{outline:2px solid var(--accent)}
.inv-bigdeliver{width:100%;min-height:52px;font-size:17px;margin:0 0 10px}
.pl-sec{margin-bottom:18px}
.st-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;margin:6px 0 8px}
.st-seg button{border:0;border-inline-start:1px solid var(--border);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:700;font-size:12.5px;padding:8px 2px;cursor:pointer;min-height:38px;white-space:nowrap}
.st-seg button:first-child{border-inline-start:0}
.st-seg button:hover{background:var(--surface-2)}
.st-seg button.on.st-new{background:var(--accent);color:#fff}
.st-seg button.on.st-progress{background:var(--warn);color:#fff}
.st-seg button.on.st-ready{background:var(--good);color:#fff}
.st-seg button.on.st-delivered{background:var(--ink-2);color:#fff}
.inv-modal .st-seg button{font-size:14px;min-height:46px}
.st-sel{border:1px solid var(--border-strong);border-radius:999px;padding:3px 8px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--ink)}
.st-sel.st-new{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent)}
.st-sel.st-progress{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.st-sel.st-ready{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.st-sel.st-delivered{background:var(--surface-2);color:var(--ink-2)}
.ord-hub button{font-size:14px;padding:9px 16px}
.ord-hub button[data-ordhub="new-order"]{border-color:var(--accent);color:var(--accent)}
.ord-hub button[data-ordhub="new-order"].active{color:var(--accent-ink)}
.pl-sec h3{margin:0 0 8px;font-size:16px}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pl-card{background:var(--surface);border:1px solid var(--border);border-inline-start:5px solid var(--accent);border-radius:12px;padding:12px 14px;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.pl-card:hover{border-color:var(--accent)}
.pl-card.st-progress{border-inline-start-color:var(--warn)}
.pl-card.st-ready{border-inline-start-color:var(--good)}
.pl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.pl-no{font-size:22px;font-weight:900;line-height:1.1}
.pl-bc{font-size:11px;color:var(--ink-3);letter-spacing:1px}
.pl-work{padding:6px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);margin-bottom:2px}
.pl-det{font-size:12.5px;color:var(--ink-2);white-space:pre-wrap}
.pl-kv{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.pl-kv span{color:var(--ink-3)}
.pl-kv b{text-align:left;display:flex;gap:6px;align-items:center}
.pl-date{width:34px;min-height:28px !important;padding:2px !important;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--ink);font-size:12px !important;cursor:pointer}
.pl-date::-webkit-datetime-edit{display:none}
.pl-date::-webkit-calendar-picker-indicator{margin:0;cursor:pointer}
.pl-rest{margin-top:4px;padding:6px 8px;border-radius:8px;background:var(--bad-soft);color:var(--bad);font-weight:800;font-size:13px}
.pl-alert{padding:4px 8px;border-radius:8px;background:var(--warn-soft);color:var(--warn);font-weight:800;font-size:12.5px}
.pl-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pl-act .btn{flex:1 1 auto}
.prn-host .pl-grid{grid-template-columns:1fr 1fr !important}
.pl-rsum{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 8px}
.prn-host .pl-rsum div{border:1px solid #9a9a9a;border-radius:4px;padding:4px 6px;text-align:center;background:#fff;color:#000}
.prn-host .pl-rsum span{display:block;font-size:.9em;color:#444}
.prn-host .pl-rsum b{font-size:1.35em;color:#000}
.prn-host .pl-rsum .bad{border:2px solid #b00020}
.prn-host .pl-rsum .bad b{color:#b00020}
.prn-host .pl-rep th{background:#2b2b2b !important;color:#fff !important;padding:4px 5px !important;text-align:center}
.prn-host .pl-rep td{vertical-align:top !important;padding:3px 5px !important;line-height:1.35}
.prn-host .pl-rep td.c{text-align:center}
.prn-host .pl-rep td.w{white-space:normal !important}
.prn-host .pl-rep td.det{min-width:16em}
.prn-host .pl-rep .pl-rsub{font-size:.85em;color:#444;font-weight:400;white-space:normal}
.prn-host .pl-rep .pl-rsub.bad,.prn-host .pl-rep .pl-rwarn{color:#b00020 !important;font-weight:700;font-size:.85em}
.prn-host .pl-rep tr.pl-rgrp td{background:#e9e9e9 !important;font-weight:800 !important;font-size:1.05em !important;padding:4px 8px !important;text-align:right;border-top:2px solid #000 !important}
.prn-host .pl-rep tr.pl-rgrp.g-late td{background:#fbe3e6 !important;color:#8a0016 !important}
.prn-host .pl-rep tr.pl-rgrp span{font-weight:400}
.prn-host .pl-rep tbody tr:nth-child(even):not(.pl-rgrp) td{background:#f7f7f7 !important}
.prn-host .pl-card{box-shadow:none !important;border:1px solid #999 !important;break-inside:avoid}
.nav-cnt{margin-inline-start:auto;min-width:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:11.5px;line-height:20px;text-align:center;font-weight:800}
tr[data-invopen]:hover td{background:var(--row-hover)}
tr[data-order-row]:hover td{background:var(--row-hover)}
.inv-rest{margin-top:6px;padding:10px 12px;border-radius:10px;background:#fdecea;color:#b3261e;font-weight:800;font-size:16px}
/* زرار Scan الطاير: كبسولة بأيقونة باركود */
.inv-fab{position:fixed;right:16px;left:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:0;border-radius:999px;padding:10px 20px 10px 14px;font:inherit;font-size:17px;
  letter-spacing:.04em;box-shadow:0 8px 22px rgba(76,29,149,.35),0 2px 6px rgba(0,0,0,.18);cursor:pointer;min-height:52px;direction:ltr;transition:transform .15s,box-shadow .15s}
.inv-fab:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(76,29,149,.42),0 3px 8px rgba(0,0,0,.2)}
.inv-fab:active{transform:scale(.97)}
.inv-fab .fab-ic{display:inline-flex;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);align-items:center;justify-content:center}
.inv-fab .fab-ic svg{width:19px;height:19px}
.inv-fab b{font-weight:900}
/* شاشة Scan */
.scan-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.scan-head h3{margin:0;display:flex;align-items:center;gap:8px}
.scan-ic{display:inline-flex;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;align-items:center;justify-content:center}
.scan-ic svg{width:18px;height:18px}
.scan-cam{position:relative;margin:10px 0;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3}
.scan-cam video,.scan-cam #invScanLib,.scan-cam #invScanLib video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;left:8%;right:8%;top:30%;bottom:30%;border:3px solid rgba(255,255,255,.95);border-radius:12px;box-shadow:0 0 0 2000px rgba(0,0,0,.35);pointer-events:none}
.scan-frame:after{content:"";position:absolute;left:4%;right:4%;top:50%;height:2px;background:#ef4444;box-shadow:0 0 8px #ef4444;animation:scanLine 1.6s ease-in-out infinite}
@keyframes scanLine{0%,100%{transform:translateY(-38px)}50%{transform:translateY(38px)}}
.scan-cam-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#fff;font-weight:800;font-size:13px;text-shadow:0 1px 3px #000}
.scan-cambtn{width:100%;margin-top:10px;min-height:46px}
@media print{.inv-fab{display:none!important}}
/* ============ شاشة الكاشير (فاتورة جديدة) ============ */
body.cashier-on .nav, body.cashier-on .topbars, body.cashier-on #crmRoot{display:none !important}
body.cashier-on .shell{display:block}
body.cashier-on .maincol{max-width:none}
body.cashier-on .main{padding:10px 14px 24px}
.cs-wrap{max-width:1180px}
.cs-bar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 12px;margin-bottom:10px;position:sticky;top:0;z-index:20}
.cs-loc{font-weight:800;font-size:17px}
.cs-clock{color:var(--ink-3);font-weight:700}
.cs-no{display:flex;align-items:center;gap:8px;font-weight:800;margin-inline-start:auto}
.cs-no .hint{margin:0;font-weight:500}
.cs-no input{width:120px;font-weight:800;font-size:17px;text-align:center}
.cs-wrap .pagehead{margin-bottom:8px}
.cs-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px;align-items:start}
.cs-col{margin:0;padding:12px 14px}
.cs-col .field{margin-bottom:6px}
.cs-col .field label{font-size:12.5px;margin-bottom:3px}
.cs-row{display:grid;gap:8px}
.cs-r3{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.6fr)}
.cs-r2{grid-template-columns:1fr 1fr}
.cs-col .inv-hint{min-height:0;margin:-2px 0 6px}
.cs-col .inv-hint:empty{display:none}
.cs-col .inv-chips{gap:6px;margin:0}
.cs-col .inv-chip{min-height:38px;padding:6px 13px}
.cs-size{width:120px;min-height:38px}
.cs-pay{position:sticky;top:64px}
.cs-pay .inv-live{gap:6px 14px;padding:8px 10px}
.cs-pay .inv-save{width:100%;margin-top:10px;min-height:54px;font-size:18px}
@media (max-width:900px){
  .cs-cols{grid-template-columns:1fr}
  .cs-pay{position:static}
  .cs-r3{grid-template-columns:1fr 1fr}
  .cs-r3 .field:first-child{grid-column:1 / -1}
  .cs-no{margin-inline-start:0}
  .cs-exit{margin-inline-start:auto}
}
/* شاشة «اتحفظت»: أزرار كبيرة يمين، وملخص + واتساب شمال، من غير سكرول */
.cs-ok{font-size:17px;font-weight:800;color:var(--good)}
.cs-newtop{margin-inline-start:auto}
.cs-done{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.cs-acts{display:flex;flex-direction:column;gap:10px}
.cs-print{min-height:96px;font-size:26px;font-weight:900;border-radius:14px}
.cs-subacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs-new{min-height:64px;font-size:20px;font-weight:800;border-radius:14px;border:2px solid var(--accent);color:var(--accent);background:var(--surface)}
.cs-keys{margin:0;text-align:center}
.cs-print:focus-visible,.cs-new:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cs-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.cs-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.cs-h{font-weight:800;font-size:13px;color:var(--ink-3);margin-bottom:4px}
.cs-wa textarea{width:100%;box-sizing:border-box;font-size:14px}
@media (max-width:900px){
  .cs-done{grid-template-columns:1fr}
  .cs-print{min-height:76px;font-size:22px}
  .cs-newtop{display:none}
  .cs-keys{display:none}
}
.tg-fab{position:fixed;left:14px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:40;background:#d6283b;color:#fff;border:0;border-radius:999px;padding:10px 16px;font:inherit;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer;min-height:44px;animation:tgPulse 1.6s ease-in-out infinite}
@keyframes tgPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,40,59,.55)}50%{box-shadow:0 0 0 10px rgba(214,40,59,0)}}
.tg-modal{border-top:5px solid #d6283b}
.tg-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.tg-ic{font-size:30px;line-height:1;animation:tgShake .9s ease-in-out 3}
@keyframes tgShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.tg-list{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.tg-row{display:flex;gap:10px;justify-content:space-between;align-items:center;border:1px solid var(--border);border-inline-start:4px solid #d6283b;border-radius:10px;padding:8px 10px;background:var(--surface)}
.tg-sub{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.tg-btns{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
@media print{.tg-fab,.tg-back{display:none!important}}

/* ============ المتابعات (العملاء المحتملين) — js/leads.js ============ */
.ld-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-banner .btn{margin-inline-start:auto}
.ld-tabs{margin-bottom:10px}
.ld-filters{gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ld-filters select,.ld-filters input{min-height:40px}
.ld-filters input[type=search]{flex:1;min-width:180px}
.ld-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
.ld-row{margin:0;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ld-dim{opacity:.6}
.ld-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.ld-who b{font-size:16px}
.ld-ph{font-size:13px;color:var(--ink-3);margin-inline-start:4px}
.ld-meta{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.ld-st{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.ld-new{background:var(--warn-soft);color:var(--warn)}
.ld-wait{background:var(--surface-2);color:var(--ink-2)}
.ld-talk,.ld-int{background:var(--accent-soft);color:var(--accent)}
.ld-won{background:var(--good-soft);color:var(--good)}
.ld-lost{background:var(--bad-soft);color:var(--bad)}
.ld-tags{display:flex;flex-wrap:wrap;gap:6px}
.ld-tag{font-size:12px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--surface-2);color:var(--ink-2)}
.ld-soon{background:var(--bad-soft);color:var(--bad)}
.ld-gone{background:var(--surface-2);color:var(--ink-3)}
.ld-note{font-size:13px;color:var(--ink-2)}
.ld-acts{display:flex;flex-wrap:wrap;gap:6px}
.ld-wa{background:#25D366 !important;color:#fff !important;border-color:#25D366 !important}
.ld-modal{max-width:560px}
.ld-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.ld-span2{grid-column:1 / -1}
.ld-chips{margin:0}
.ld-kpis{margin-bottom:10px}
.ld-rep td,.ld-rep th{text-align:center}
.ld-rep td:first-child{text-align:start;font-weight:700}
.cs-lead{border-color:#25D366;color:#1a9e4b;font-weight:800}
@media (max-width:900px){
  .ld-list{grid-template-columns:1fr}
  .ld-grid{grid-template-columns:1fr}
}

/* ============ مزامنة Google Contacts — js/contacts-sync.js ============ */
.gc-st{padding:8px 10px;border-radius:10px;font-weight:700;margin:6px 0}
.gc-on{background:var(--good-soft);color:var(--good)}
.gc-warn{background:var(--warn-soft);color:var(--warn)}
.gc-off{background:var(--surface-2);color:var(--ink-2)}
.gc-steps{margin:8px 0}
.gc-steps summary{cursor:pointer;font-weight:700}
.gc-steps ol{padding-inline-start:20px;line-height:1.9}
.gc-steps .btn{margin-inline-start:4px}



/* ============ حسابات الكاشير: الفروع والدفاتر (js/cashier-admin.js) ============ */
.ca-loc{border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-bottom:8px}
.ca-loc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ca-loc-h select{width:auto;min-width:180px}
.ca-chk{display:flex;align-items:center;gap:6px;font-weight:800;min-width:150px}
.ca-books{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ca-book{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ca-book b{min-width:80px}
.ca-book label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-3)}
.ca-book input{width:120px;min-height:36px}

/* سجل الأوردرات: الجدول على قد الشاشة من غير سكرول شمال ويمين (الخانات بتلف لسطرين) */
.ord-fit{ overflow-x:visible; }
.ord-tbl{ width:100%; table-layout:auto; }
.ord-tbl th{ white-space:normal; padding:9px 5px; }
.ord-tbl td{ padding:8px 5px; vertical-align:middle; }
.ord-tbl td.num{ white-space:nowrap; }
.ord-tbl td.ord-amt{ direction:rtl; text-align:right; white-space:normal; max-width:130px; overflow-wrap:anywhere; }
.ord-sub{ display:block; font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:2px; white-space:nowrap; }
.ord-note{ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.ord-acts{ white-space:nowrap; }
.ord-acts .st-sel{ display:block; margin-bottom:4px; max-width:120px; }
.ord-acts .btn.small{ padding:4px 7px; }
@media (max-width:900px){ .ord-fit{ overflow-x:auto; } }

/* معاينة الطباعة: زرار قفل ثابت باين دايمًا */
.ppv-x{position:fixed;top:14px;left:14px;z-index:10001;display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;border:0;
  background:var(--bad,#dc2626);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ppv-x:hover{filter:brightness(1.1)}

/* ---------- نوافذ الأوردر والتعديل: راس ثابت فوق (رجوع/إغلاق) + جسم بيسكرول + أزرار ثابتة تحت ---------- */
.modal.pm{padding:0 !important;display:flex;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden}
.pm-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.pm-title{flex:1;min-width:0}
.pm-title h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pm-title .hint{margin:2px 0 0}
.pm-x{flex-shrink:0;font-weight:800}
.pm-back{flex-shrink:0;font-weight:800}
.pm-body{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 16px;-webkit-overflow-scrolling:touch}
.pm-foot{display:flex;justify-content:space-between;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.inv-modal.pm{max-width:880px !important}
.inv-acts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.inv-line-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.eo-modal.pm{max-width:680px !important}
.eo-sec{padding:10px 0;border-bottom:1px solid var(--border)}
.eo-sec:last-child{border-bottom:0}
.eo-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.eo-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.eo-amts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.eo-modal .field{margin:0}
@media (max-width:760px){
  .inv-grid{grid-template-columns:1fr}
  .eo-grid3{grid-template-columns:1fr 1fr}
  .eo-grid3 .field:last-child{grid-column:1 / -1}
  .eo-amts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .modal.pm{max-height:92vh}
}

/* زرار الوضع الفاتح/الغامق (لوحة المتابعة) */
.theme-sw{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);align-self:center}
.theme-sw button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.theme-sw button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* ملف العميل */
.cu-modal.pm{max-width:900px !important}
.cu-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.cu-pills .pill,.cu-pills .cs-pill{font-size:12px;padding:2px 10px;line-height:1.5;min-height:0;height:auto}
.cu-sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-shrink:0}
.cu-sum div{display:flex;flex-direction:column;min-width:0}
.cu-sum span{font-size:11.5px;color:var(--ink-3);font-weight:700}
.cu-sum b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-tabs{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.cu-tabs button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-weight:700;padding:8px 14px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.cu-tabs button.on{color:var(--accent-strong,var(--accent));border-bottom-color:var(--accent)}
.cu-more{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:10px;border-top:1px dashed var(--border)}
.cu-orow{cursor:pointer}
.cu-orow:hover td{background:var(--surface-2)}
@media (max-width:760px){ .cu-sum{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ord-tbl td.ord-tot div{white-space:nowrap;line-height:1.5}

/* الأوردر الملغي */
.cx-pill{background:var(--bad-soft,#fde4e1) !important;color:var(--bad) !important;font-weight:800}
.cx-banner{padding:10px 12px;border-radius:10px;background:var(--bad-soft,#fde4e1);color:var(--ink);border:1px solid var(--bad);margin-bottom:8px;line-height:1.7}
.cx-banner b{color:var(--bad)}
.cx-opt{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:10px;margin-top:6px;cursor:pointer}
.cx-opt input{width:auto;margin-top:4px}
.cx-tag{color:var(--bad);font-weight:800}
.ord-tbl tr.ord-cx td{opacity:.6}
.ord-tbl tr.ord-cx td.num{text-decoration:line-through}

/* القايمة الجانبية من غير سكرول: مفيش سكرول جوه سكرول، والمسافات بتصغر لما الشاشة تبقى قصيرة عشان كله يبان */
#navlinks{overflow:visible !important;flex:0 0 auto !important}
.nav{scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
@media (max-height:820px){
  .nav{padding-top:12px !important;padding-bottom:10px !important;gap:2px !important}
  .brand{padding:2px 8px 8px !important;margin-bottom:8px !important}
  .brand .name{font-size:18px !important}
  .brand .sub,.brand .kicker{display:none !important}
  .navbtn{padding:7px 12px !important;font-size:14px !important}
}
@media (max-height:640px){
  .navbtn{padding:5px 10px !important;font-size:13.5px !important;gap:9px !important}
  .navbtn .ic,.navbtn .ic svg{width:17px !important;height:17px !important}
  .brand .name{display:none !important}
  .brand{padding:0 6px 6px !important;margin-bottom:6px !important}
}

/* فاتورة جديدة: شغل تاني في نفس الفاتورة */
.inv-xline{border:1px dashed var(--border-strong,var(--border));border-radius:10px;padding:8px 10px;margin:8px 0;background:var(--surface-2)}
.inv-xhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.inv-addline{margin-top:4px}
#invForm input.ro{background:var(--surface-2);font-weight:800}

/* فاتورة جديدة: ملخص الفاتورة كلها + باقي كل شغل */
.inv-sumhead{font-weight:800;color:var(--ink-2);margin-bottom:6px}
.inv-sum{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:var(--surface-2);margin-bottom:10px}
.inv-sum div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.inv-sum span{color:var(--ink-3);font-size:13px}
.inv-sum b{font-size:16px}
.inv-lrest{font-size:13px;margin:-2px 0 6px;min-height:0}
.inv-lrest .ok{color:var(--good)}
.inv-lrest .warn{color:var(--bad)}

/* ===== 📥 طلبات تعديل/إلغاء الفواتير من الموظفين (js/edit-requests.js) ===== */
.er-bell{position:fixed;top:10px;left:12px;z-index:900;display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;border:0;
  background:var(--bad);color:#fff;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);animation:erPulse 1.6s ease-in-out infinite}
.er-bell span{font-size:15px}
@keyframes erPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.er-notice{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:950;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  max-width:calc(100vw - 32px);padding:10px 14px;border-radius:14px;background:var(--surface);color:var(--ink);border:2px solid var(--bad);
  box-shadow:0 8px 28px rgba(0,0,0,.25);font-weight:800}
.er-modal.pm{max-width:760px !important}
.er-card{margin-bottom:12px}
.er-h{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.er-reason{padding:8px 10px;border-radius:10px;background:var(--bg, #f5f5f5);margin:6px 0;font-weight:600}
.er-diff{width:100%;border-collapse:collapse;margin:6px 0}
.er-diff th,.er-diff td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:start;vertical-align:top;font-size:14px}
.er-diff thead th{font-size:12px;opacity:.7}
.er-old{color:var(--bad);text-decoration:line-through}
.er-new{color:var(--good);font-weight:800}
.er-cx{margin:6px 0}
.er-b{margin-top:6px;padding:8px 10px}
.er-acts{gap:6px;flex-wrap:wrap;margin-top:10px}
@media print{.er-bell,.er-notice{display:none !important}}
.er-who{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.er-who span{padding:2px 10px;border-radius:999px;background:var(--surface-2, rgba(127,127,127,.12));font-weight:800;font-size:14px}
.er-who small{font-weight:600;opacity:.7;font-size:12px}
/* سجل الأوردرات: الباقي اللي اتدفع بعدين جوه سطر شغله */
.ord-restpaid{white-space:normal;color:var(--good);font-weight:700;line-height:1.5}
.ord-restdel{padding:0 4px !important;min-height:0 !important;font-size:11px;vertical-align:middle}
@media print{.ord-restdel{display:none !important}}
.ord-paid{white-space:normal}
.ord-rest{color:var(--bad);font-weight:800}

/* ===== 🔒 تقفيلات الدرج (js/drawer-closes.js) ===== */
.dc-notice{top:64px}
.dc-tbl td{vertical-align:top}
.dc-sub{display:block;font-size:11.5px;color:var(--ink-3, #6b7280);font-weight:600}
.dc-pill{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap}
.dc-pill.ok{background:var(--good-soft);color:var(--good)} .dc-pill.bad{background:var(--bad-soft);color:var(--bad)} .dc-pill.more{background:rgba(29,111,184,.14);color:#1d6fb8}
.dc-warn{color:var(--bad)} .dc-ok{color:var(--good)} .dc-recv{color:#b45309}
.dc-acts{display:flex;flex-direction:column;gap:4px;align-items:stretch;white-space:nowrap}
/* الموبايل: مسافة تحت آخر الصفحة عشان زرار Scan الطاير ما يغطيش آخر زرار (حفظ الفاتورة، الخروج…) */
@media (max-width:900px){ body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))} }
/* طلبات التواصل */
.cr-list{display:grid;gap:10px}
.cr-card{padding:12px 14px}
.cr-card.is-done{opacity:.75}
.cr-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.cr-no{font-size:18px}
.cr-reason{background:var(--warn-soft,#fef3c7);color:var(--warn,#92400e);border-radius:999px;padding:2px 10px;font-weight:800;font-size:13px}
.cr-note{margin-top:6px;font-weight:700}
.cr-cust{margin-top:6px;color:var(--muted,#555);font-size:14px}
.btn.cr-wa{background:#25D366!important;color:#fff!important;border-color:#25D366!important;font-weight:800}
.cr-notice{border-color:#25D366}
.cr-lang{min-height:32px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);padding:0 6px;font-size:13px}
.cr-msg{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--good-soft,#e7f8ee);border-inline-start:3px solid #25D366;font-size:13.5px;white-space:pre-wrap}

/* ---------- صفحة الأوردر (شكل A): كروت فوق + خط الحالة + تابات ---------- */
.ot-modal.pm{max-width:960px !important}
.ot-head .ot-no{font-size:22px;font-weight:900}
.ot-head .btn{flex-shrink:0}
.ot-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 12px}
.ot-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:10px 12px;min-width:0}
.ot-tile small{display:block;color:var(--ink-3);font-weight:700;font-size:12.5px}
.ot-tile b{display:block;font-size:19px;font-weight:900;margin:2px 0;overflow-wrap:anywhere}
.ot-tile span{display:block;color:var(--ink-3);font-size:12.5px;font-weight:700}
.ot-tile .ot-more{display:inline;font-size:13px;color:var(--ink-3)}
.ot-tile.is-good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 35%,transparent)}.ot-tile.is-good b{color:var(--good)}
.ot-tile.is-bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}.ot-tile.is-bad b{color:var(--bad)}
.ot-tile.is-warn{background:var(--warn-soft)}.ot-tile.is-warn b{color:var(--warn)}
.ot-steps{display:flex;margin:4px 0 12px}
.ot-step{flex:1;position:relative;border:0;background:none;font:inherit;font-weight:700;font-size:13px;color:var(--ink-3);cursor:pointer;padding:0 2px}
.ot-step i{display:flex;margin:0 auto 4px;width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);align-items:center;justify-content:center;font-style:normal;font-size:15px;position:relative;z-index:1}
.ot-step:not(:last-child):after{content:"";position:absolute;top:16px;left:-50%;width:100%;height:2px;background:var(--border)}
.ot-step.done i{background:var(--accent);border-color:var(--accent)}.ot-step.done{color:var(--ink)}
.ot-step.done:not(:last-child):after{background:var(--accent)}
.ot-step.cur i{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft,rgba(37,99,235,.18))}.ot-step.cur{color:var(--accent)}
.ot-step:hover i{border-color:var(--accent)}
.ot-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.ot-acts .ot-sp{flex:1}
.ot-big{min-height:46px;padding:0 20px;font-size:15.5px;font-weight:800}
.btn.ot-wa{background:#25D366;border-color:#25D366;color:#fff}
.ot-menu{position:relative}
.ot-menu summary{list-style:none;cursor:pointer;font-size:20px;line-height:1;padding:6px 12px}
.ot-menu summary::-webkit-details-marker{display:none}
.ot-menu-l{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:grid;gap:2px;min-width:180px}
.ot-menu-l .btn{justify-content:flex-start}
.ot-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:12px}
.ot-tabs button{border:0;background:none;font:inherit;font-weight:800;font-size:14.5px;color:var(--ink-3);padding:9px 14px;border-bottom:3px solid transparent;cursor:pointer}
.ot-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.ot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ot-box{border:1px solid var(--border);border-radius:14px;padding:10px 14px}
.ot-box h4{margin:0 0 6px;font-size:13.5px;color:var(--ink-2)}
.ot-box .inv-kv{padding:6px 0;border-bottom:1px dashed var(--border)}
.ot-box .inv-kv:last-child{border-bottom:0}
@media (max-width:760px){
  .ot-tiles{grid-template-columns:1fr 1fr}
  .ot-grid{grid-template-columns:1fr}
  .ot-acts .ot-sp{display:none}
  .ot-big{flex:1}
  .ot-step{font-size:11.5px}
}

/* ---------- تعديل الأوردر: فورم في كروت + ملخص بيتحسب على الجنب ---------- */
.eo-modal.eo2.pm{max-width:1000px !important}
.eo2-body{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0;padding:0 !important}
.eo2-main{padding:14px 16px;display:grid;gap:12px;align-content:start}
.eo2-card{border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:grid;gap:10px}
.eo2-card h4{margin:0;font-size:14px;color:var(--ink-2)}
.eo2-side{background:var(--surface-2);border-inline-start:1px solid var(--border);padding:16px;position:sticky;top:0;align-self:start;min-height:100%}
.eo2-sl{font-size:12.5px;color:var(--ink-3);font-weight:700}
.eo2-big{font-size:28px;font-weight:900;margin:2px 0 8px}
.eo2-row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;font-size:14px;border-bottom:1px dashed var(--border)}
.eo2-row span{color:var(--ink-3);font-weight:600}.eo2-good{color:var(--good)}.eo2-bad{color:var(--bad)}
.eo2-chg{margin-top:12px;background:var(--warn-soft);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:13px}
.eo2-chg ul{margin:4px 0 0;padding-inline-start:18px}.eo2-chg li{margin:2px 0}
.eo2-none{margin-top:12px;color:var(--ink-3);font-size:13px}
.eo-sizes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eo-chip{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.eo-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.eo-sizes input{max-width:130px}
.eo-pay{display:grid;grid-template-columns:minmax(0,1fr) 160px 40px;gap:8px;margin-bottom:8px}
.eo2-save{min-height:44px;padding:0 22px;font-size:15.5px}
.eo2 .pm-foot{justify-content:flex-start}
@media (max-width:820px){
  .eo2-body{grid-template-columns:1fr}
  .eo2-side{position:static;border-inline-start:0;border-top:1px solid var(--border)}
  .eo-pay{grid-template-columns:minmax(0,1fr) 130px 40px}
}

/* ---------- ملف العميل: بطاقة + أرقام + تابات (البيانات للقراية، والتعديل بزرار) ---------- */
.cv-modal.pm{max-width:980px !important}
.cv-head{padding:14px 18px;gap:12px}
.cv-av{width:54px;height:54px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#6366f1,var(--accent));color:#fff;font-size:24px;font-weight:900;display:flex;align-items:center;justify-content:center}
.cv-name{font-size:22px;font-weight:900}
.cv-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2)}
.cv-chip.ok{background:var(--good-soft);border-color:transparent;color:var(--good)}
.cv-chip.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.cv-chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.btn.cv-wa{background:#25D366;border-color:#25D366;color:#fff;font-weight:800;min-height:42px;padding:0 18px}
.cv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px 18px;flex-shrink:0}
.cv-stats div{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:8px 12px;min-width:0}
.cv-stats small{display:block;color:var(--ink-3);font-weight:700;font-size:12px}
.cv-stats b{display:block;font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-stats .bad{background:var(--bad-soft);border-color:transparent}.cv-stats .bad b{color:var(--bad)}
.cv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cv-card{border:1px solid var(--border);border-radius:14px;padding:10px 14px}
.cv-card h4{margin:0 0 6px;font-size:13.5px;color:var(--ink-2)}
.cv-wide{grid-column:1 / -1}
.cv-kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border);font-size:14.5px}
.cv-kv:last-child{border-bottom:0}.cv-kv span{color:var(--ink-3);font-weight:600}.cv-kv b{text-align:end;overflow-wrap:anywhere}
.cv-notes{white-space:pre-wrap;color:var(--ink-2)}
.cv-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
@media (max-width:760px){
  .cv-head{flex-wrap:wrap}
  .cv-stats{grid-template-columns:1fr 1fr}
  .cv-grid{grid-template-columns:1fr}
}
.ntfy-card{margin-bottom:10px}
.ntfy-card summary{cursor:pointer}
.ntfy-steps{margin:10px 0 8px;padding-inline-start:20px;display:grid;gap:8px}
.ntfy-topic{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:14px;user-select:all}
/* شريط المكان والشهر ثابت فوق: لازم ورا لون مقفول (لون شريط المكان شفاف في الغامق) عشان الجدول مايبانش من تحته */
.topbars{background:var(--bg)}

/* ===== 🔔 التنبيهات فوق (js/notices.js): كومة واحدة مترتبة ===== */
.nt-stack{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:960;display:grid;gap:8px;width:min(520px,calc(100vw - 24px))}
.nt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--border);border-inline-start:4px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.22);overflow:hidden;animation:ntIn .22s ease}
.nt-bad{border-inline-start-color:var(--bad)}.nt-good{border-inline-start-color:var(--good)}.nt-warn{border-inline-start-color:var(--warn)}
.nt-ic{font-size:22px;line-height:1}
.nt-tx{display:flex;flex-direction:column;min-width:0}
.nt-tx b{font-size:14.5px;font-weight:900}
.nt-tx span{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nt-acts{display:flex;align-items:center;gap:6px}
.nt-x{border:0;background:none;color:var(--ink-3);font-size:16px;cursor:pointer;padding:4px 6px;border-radius:8px}
.nt-x:hover{background:var(--surface-2)}
.nt-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:100%;background:var(--accent);opacity:.35;transform-origin:right;animation:ntBar linear forwards}
.nt-more{justify-self:center;border:0;border-radius:999px;padding:6px 14px;font:inherit;font-weight:800;font-size:13px;background:var(--ink);color:var(--surface);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.nt .btn.cr-wa{background:#25D366;border-color:#25D366;color:#fff}
@keyframes ntIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ntBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.nt{animation:none}.nt-bar{display:none}}
@media (max-width:560px){.nt{grid-template-columns:auto minmax(0,1fr)}.nt-acts{grid-column:1 / -1;justify-content:flex-end}}
@media print{.nt-stack{display:none !important}}
/* «طلبات الموظفين»: تابين */
.sr-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:12px}
.sr-tab{border:0;background:none;font:inherit;font-weight:800;font-size:15px;color:var(--ink-3);padding:10px 16px;border-bottom:3px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sr-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.sr-n{min-width:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:12px;line-height:20px;text-align:center}

/* الحساب تحت القايمة (pwa.js): سطر الإيميل + زرارين جنب بعض */
.nav-acct{display:grid;gap:6px;padding:8px 6px 2px;border-top:1px solid var(--sidebar-border)}
.nav-acct .fb-who{font-size:11.5px;color:var(--sidebar-ink-muted);text-align:center;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.nav-acct-row{display:grid;grid-template-columns:1fr auto;gap:6px}
.nav-acct .fb-logout{margin:0;padding:6px 8px;font-size:12.5px;font-weight:700;color:var(--sidebar-ink);border-color:var(--sidebar-border);opacity:1;white-space:nowrap}
.nav-acct .fb-logout:hover{background:var(--sidebar-hover-bg)}
.nav-acct .fb-all{color:var(--sidebar-ink-muted)}
.navfoot{padding:8px 10px 6px}
/* القايمة تفضل باينة كلها على الشاشات اللي ارتفاعها لحد 900 */
@media (min-width:901px) and (max-height:900px){
  .nav{padding-top:12px !important;padding-bottom:8px !important;gap:2px !important}
  .brand{padding:2px 8px 8px !important;margin-bottom:8px !important}
  .brand .sub,.brand .kicker{display:none !important}
  .brand .name{font-size:19px !important}
  .navbtn{padding:7px 12px !important}
}
/* الجرس 🔔 للموبايل بس — على الكمبيوتر العدد ظاهر جنب «طلبات الموظفين» في القايمة */
@media (min-width:901px){ .er-bell{display:none !important} }

/* ===== لوحة المتابعة = النهارده ===== */
.db-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.db-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))}
.db-tile:hover{border-color:var(--accent)}
.db-tile small{color:var(--ink-3);font-weight:700;font-size:13px}
.db-tile b{font-size:30px;font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums}
.db-tile span{color:var(--ink-3);font-size:12.5px;font-weight:700}
.db-tile.is-bad{background:var(--bad-soft);border-color:transparent}.db-tile.is-bad b{color:var(--bad)}
.db-tile.is-warn{background:var(--warn-soft);border-color:transparent}.db-tile.is-warn b{color:var(--warn)}
.db-tile.is-good b{color:var(--good)}
.db-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.db-list{padding:12px 14px}
.db-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.db-h h3{margin:0;font-size:16px}
.db-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:9px 8px;border:0;border-bottom:1px dashed var(--border);background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;border-radius:8px}
.db-row:last-child{border-bottom:0}
.db-row:hover{background:var(--surface-2)}
.db-no{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px 8px;font-size:13.5px}
.db-mid{display:flex;flex-direction:column;min-width:0}
.db-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-mid small{color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-end{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.db-end small{font-size:12px;font-weight:800}
.db-pill{font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap}
.db-pill.bad{background:var(--bad-soft);color:var(--bad)}.db-pill.warn{background:var(--warn-soft);color:var(--warn)}
.db-empty{padding:18px 6px;color:var(--ink-3);text-align:center;font-weight:700}
.db-month{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;width:100%;padding:14px 16px;border-radius:14px;border:1px dashed var(--border-strong);background:var(--surface);color:var(--ink-2);font:inherit;font-size:14.5px;cursor:pointer}
.db-month:hover{border-color:var(--accent);color:var(--ink)}
.db-month span:last-child{color:var(--accent);font-weight:800}
@media (max-width:1100px){ .db-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .db-tiles{grid-template-columns:1fr 1fr} .db-cols{grid-template-columns:1fr} .db-tile b{font-size:26px} }
/* لوحة المتابعة: كل التسليمات في سطور، والقايمة بتسكرل جواها لو طويلة */
.db-scroll{max-height:520px;overflow-y:auto;margin-inline:-4px;padding-inline:4px}
.db-pill{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.db-pill.bad,.db-pill.warn{border-color:transparent}
.db-cnt{font-size:13px;font-weight:800;color:var(--ink-3);background:var(--surface-2);border-radius:999px;padding:1px 9px;margin-inline-start:4px}
/* العملاء: الجدول مفتوح على الصفحة زي سجل الأوردرات (من غير سكرول جوه صندوق صغير) */
.cust-scroll{max-height:none !important;min-height:0 !important;overflow-x:auto !important;overflow-y:visible !important}
/* «لم يتم التواصل» (cs-new) كان واخد شكل زرار «فاتورة جديدة» (.cs-new) — نرجّعه شارة صغيرة */
.cs-pill.cs-new{min-height:0;font-size:.78rem;font-weight:600;border:0;border-radius:999px;background:var(--surface-2);color:var(--ink-2);padding:2px 10px}

/* الإعدادات ← الموظفين: قسم حسابات الكاشير تحت الرسامين */
.set-sec{margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.set-h{font-size:18px;margin:0 0 10px}
.rent-mini{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.rent-mini label{font-size:13px;font-weight:700;color:var(--ink-2)}
.rent-mini input{width:130px;padding:6px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--ink)}
/* الطباعة والـ PDF: الكتابة دايمًا غامقة على الورق — حتى لو السيستم مفتوح على الوضع الغامق
   (الكتابة الرمادي بتاخد ألوانها من --ink-2/--ink-3، فبنثبّتهم غامق هنا) */
@media print{ :root, :root[data-theme]{ --ink:#000; --ink-2:#222; --ink-3:#333; --chart-muted:#333; --chart-ink:#000; --chart-ink-2:#222; } }
#app.pdf-capture, .prn-host{ --ink:#000; --ink-2:#222; --ink-3:#333; --chart-muted:#333; --chart-ink:#000; --chart-ink-2:#222; color:#000; }

/* تعديل الأوردر: «💵 الفلوس مع» (اللي استلم الفلوس — غير الرسام) */
.eo-cash{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:12px;padding:8px 12px;font-size:14px}
.eo-cash>span{flex:1;min-width:0}
.eo-cash select{max-width:200px}
.ot-cash{color:var(--warn) !important;font-weight:700}

/* القايمة: عناوين المجموعات + زرار اللغة (عربي | English) */
.nav-grp{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--sidebar-ink-muted);padding:14px 12px 4px;text-transform:uppercase}
.lang-tg{display:flex;margin-top:10px;background:rgba(0,0,0,.25);border:1px solid var(--sidebar-border);border-radius:999px;padding:3px;max-width:220px}
.lang-tg button{flex:1;border:0;background:transparent;color:var(--sidebar-ink-muted);font:inherit;font-size:12.5px;font-weight:800;padding:5px 0;border-radius:999px;cursor:pointer}
.lang-tg button.on{background:#fff;color:#111827}

/* ===== English (lang-en): الصفحة من الشمال لليمين ===== */
html.lang-en #app, html.lang-en #crmRoot, html.lang-en #crmFloat, html.lang-en .ord-tbl td.ord-amt{direction:ltr}
html.lang-en [dir="rtl"]{direction:ltr}
html.lang-en .navbtn, html.lang-en th, html.lang-en #crmRoot th, html.lang-en #crmFloat th, html.lang-en .ord-tbl td.ord-amt{text-align:left}
html.lang-en .cust-scroll:not(.fin-tx) td:nth-child(6), html.lang-en .prn-host .pl-rep tr.pl-rgrp td{text-align:left}
html.lang-en .tg-fab{left:auto;right:14px}
html.lang-en .ppv-x{left:auto;right:14px}
html.lang-en .er-bell{left:auto;right:12px}
html.lang-en .ot-step:not(:last-child):after{left:auto;right:-50%}
html.lang-en .lang-tg{direction:ltr}
@media (max-width:900px){
  html.lang-en .nav{right:auto !important;left:0 !important;transform:translateX(-105%);box-shadow:8px 0 30px rgba(0,0,0,.25)}
  html.lang-en body.nav-open .nav{transform:none}
}
/* English: القايمة الجانبية على الشمال (عكس ترتيب العربي) */
@media (min-width:901px){
  html.lang-en .shell{direction:rtl}
  html.lang-en .shell>*{direction:ltr}
}
/* خانات التاريخ على الآيفون ما تطلعش برا مكانها */
input[type="date"]{min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}
input[type="date"]::-webkit-date-and-time-value{text-align:start}

/* 📒 رقم فاتورة الورق: فحص + اقتراح · دفاتر الورق */
.inv-nochk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;font-size:13.5px;font-weight:700;margin:-4px 0 10px;padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)}
.inv-nochk.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.inv-nochk.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-soft)}
.inv-nochk.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-soft)}
.nochk-sug{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 12px;font:inherit;font-size:13px;cursor:pointer}
.nochk-sug b{color:var(--accent)}
.pb-bar{height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden;min-width:90px}
.pb-bar i{display:block;height:100%;background:var(--good)}
.pb-misslist{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:220px;overflow:auto}
.pb-m{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:8px;padding:2px 4px 2px 8px}
.pb-miss summary{cursor:pointer;color:var(--warn);font-weight:800}