/* ============================================================================
   BOSTA THEME  ·  style-bosta.css
   Reskins the Olive CRM to match the Bosta Business Dashboard look.
   Loads LAST (after style.css / style-fx.css / style-premium.css) so it wins.
   Remove its <link> in index.html to fully revert — no other file is touched.
   Phase 1: global tokens + app shell (sidebar + header) + cards + buttons +
            badges/pills + KPI summary cards + tables.
   ========================================================================== */

/* ---- 1. Design tokens (Bosta) ------------------------------------------- */
:root,
body:not([data-theme="dark"]) {
  --bz-red:        #15803d;   /* Olive brand GREEN (Bosta structure, Olive identity) */
  --bz-red-soft:   #ecfdf3;   /* green tint (hover / active bg) */
  --bz-red-hover:  #166534;   /* darker green for button hover  */
  --bz-ink:        #1a1a1a;   /* primary text                  */
  --bz-gray:       #667085;   /* secondary text / icon stroke  */
  --bz-gray-2:     #98A2B3;   /* tertiary / placeholder        */
  --bz-line:       #eaecf0;   /* borders / dividers            */
  --bz-line-soft:  rgba(5,5,5,.06);
  --bz-bg:         #f4f5f7;   /* app background                */
  --bz-card:       #ffffff;   /* card / surface                */
  --bz-teal:       #D9F4F8;   /* secondary accent              */
  --bz-shadow-sm:  0 1px 2px rgba(16,24,40,.05);
  --bz-shadow-md:  0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.05);
  --bz-radius:     12px;
  --bz-radius-sm:  8px;

  /* ── Shared Olive card gradient — SINGLE SOURCE OF TRUTH ──────────────────
     Every gradient card/component pulls from these 4 tokens. Edit them HERE
     to restyle the gradient + green edge everywhere at once. Base = #15803d. */
  --olv-card-grad:        linear-gradient(165deg, #ffffff 0%, #f3faf5 100%);
  --olv-card-grad-hover:  linear-gradient(165deg, #f1faf4 0%, #e7f7ed 100%);
  --olv-card-edge:        rgba(21,128,61,.22);   /* Olive green border        */
  --olv-card-edge-hover:  rgba(21,128,61,.42);   /* border on hover           */

  --bz-sb-collapsed: 72px;    /* collapsed-rail width — shared by sidebar + #main margin */
  /* Re-point premium's own collapsed-width var to the SAME value so its
     direction rules (incl. body.lang-en LTR) can never diverge from ours. */
  --sb-w-collapsed: 72px !important;

  /* Re-point the app's own variables so legacy components inherit the look */
  --bg:            var(--bz-bg)   !important;
  --card:          var(--bz-card) !important;
  --border:        var(--bz-line) !important;
  --text:          var(--bz-ink)  !important;
  --muted:         var(--bz-gray) !important;
  --primary:       var(--bz-red)  !important;
  --radius:        var(--bz-radius-sm) !important;
  --radius-lg:     var(--bz-radius)    !important;
}

body,
body:not([data-theme="dark"]) {
  background: var(--bz-bg) !important;
  color: var(--bz-ink) !important;
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── Reusable gradient card — add class="olv-gradient-card" to ANY element to
   give it the shared Olive gradient + green edge + subtle hover. Driven 100%
   by the --olv-card-* tokens above, so it always matches the KPI cards. ──── */
.olv-gradient-card {
  background: var(--olv-card-grad) !important;
  border: 1px solid var(--olv-card-edge) !important;
  border-radius: var(--bz-radius) !important;
  box-shadow: var(--bz-shadow-sm) !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.olv-gradient-card:hover {
  background: var(--olv-card-grad-hover) !important;
  border-color: var(--olv-card-edge-hover) !important;
  transform: none !important;   /* stay static — colour change only */
}

/* Kill the olive-branch background image from the previous theme */
body::before, body::after { background-image: none !important; }

/* ---- 2. App shell layout ------------------------------------------------ */
@media (min-width: 769px) {
  /* Neutralise the cream floating-card shell → flat Bosta frame */
  #topbar {
    position: fixed !important;
    top: 0 !important;
    /* Sit BESIDE the sidebar (not over it) so the logo can live at the sidebar's very
       top. Logical props auto-flip for RTL/LTR; tracks the collapsed rail width below. */
    inset-inline-start: var(--sb-w-expanded, 248px) !important;
    inset-inline-end: 0 !important;
    width: auto !important;
    transition: inset-inline-start .25s cubic-bezier(.4,0,.2,1) !important;
    height: 60px !important;
    min-height: 60px !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bz-line) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 20px !important;
    gap: 12px !important;
    align-items: center !important;
    z-index: 50 !important;
  }

  /* Sidebar → white rail on the inline-START edge.
     Logical props so it auto-flips: RTL(Arabic) → right, LTR(English) → left.
     The divider sits on the inline-END side (the edge facing the content). */
  #app-sidebar.app-sidebar,
  body:not([data-theme="dark"]) .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    bottom: 0 !important;
    inset-inline-end: auto !important;
    height: auto !important;
    width: var(--sb-w-expanded, 248px) !important;
    background: #ffffff !important;
    border: 0 !important;
    border-inline-end: 1px solid var(--bz-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--bz-ink) !important;
    /* No top padding: the brand header (.sb2-head) starts at y=0 so its bottom border
       aligns with the top bar's bottom border (both at 60px). */
    padding: 0 10px 12px !important;
    z-index: 40 !important;
  }

  /* Content offset is on the inline-START side (where the sidebar lives), so it
     flips with direction too. Keeps the constant gap tied to the real rail width. */
  #main {
    margin-inline-start: var(--sb-w-expanded, 248px) !important;
    margin-inline-end: 0 !important;
    padding-top: 60px !important;
    background: var(--bz-bg) !important;
  }

  /* Collapsed rail — sidebar width AND content margin both track the REAL
     collapsed state (#app-sidebar[data-collapsed="1"], set by renderSidebar)
     via the SAME token, so the cards↔sidebar gap is identical whether the
     rail is open or collapsed. The old rule keyed off #app[data-sb-collapsed],
     an attribute the app never sets, so #main kept its full 248px margin
     while the rail shrank to 72px — that was the large empty gap. */
  #app-sidebar[data-collapsed="1"].app-sidebar { width: var(--bz-sb-collapsed, 72px) !important; }
  #app-sidebar[data-collapsed="1"] ~ #main,
  body:has(#app-sidebar[data-collapsed="1"]) #main {
    margin-inline-start: var(--bz-sb-collapsed, 72px) !important;
  }
  /* Top bar follows the collapsed rail so it stays flush beside the sidebar. */
  body:has(#app-sidebar[data-collapsed="1"]) #topbar {
    inset-inline-start: var(--bz-sb-collapsed, 72px) !important;
  }

  /* Content fills the FULL width between sidebar and screen edge — no cap, no
     dead space. style-premium centres .page (max-width:1500px; margin:0 auto);
     once the content area exceeds 1500px (what a wide screen / zoom-out does)
     that cap leaves a huge empty band — in RTL it shows as white space on the
     LEFT with everything squeezed right. Drop the cap and zero the side margins
     so .page stretches across all of #main; #main's own margin-right already
     holds the constant gap to the rail, so spacing stays tied to sidebar width. */
  .page {
    max-width: none !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

#content { background: var(--bz-bg) !important; }
.page { background: transparent !important; }

/* ---- 3. Sidebar nav items ---------------------------------------------- */
.sb2-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 10px !important; margin-bottom: 6px !important;
  border-bottom: 1px solid var(--bz-line) !important;
}
.sb2-burger, .sb2-wa-chip {
  background: transparent !important; border: 0 !important;
  color: var(--bz-gray) !important; border-radius: 8px !important;
}
.sb2-burger:hover, .sb2-wa-chip:hover { background: #f2f4f7 !important; }

.sb2-group-label {
  color: var(--bz-gray-2) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .02em; text-transform: none !important;
  padding: 10px 12px 4px !important; background: transparent !important;
}

.sb2-item {
  display: flex !important; align-items: center !important; gap: 12px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--bz-gray) !important;
  font-size: 14px !important; font-weight: 500 !important;
  transition: background .15s, color .15s !important;
}
.sb2-item:hover { background: #f2f4f7 !important; color: var(--bz-ink) !important; transform: none !important; }
.sb2-item-icon { color: var(--bz-gray) !important; }
/* Dashboard (grid/apps) nav icon → Olive brand green even when inactive (per request).
   [data-key] adds specificity so it also wins over the inactive gray + hover. */
.sb2-item[data-key="dashboard"] .sb2-item-icon { color: #15803d !important; }
.sb2-item-label { color: inherit !important; }

/* Active item → Bosta red-tinted pill */
.sb2-item.active {
  background: var(--bz-red-soft) !important;
  color: var(--bz-red) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.sb2-item.active .sb2-item-icon { color: var(--bz-red) !important; }

.sb2-item-badge, .sb2-group-badge {
  background: var(--bz-red) !important; color: #fff !important;
  border-radius: 999px !important; font-weight: 700 !important;
}

/* ---- 4. Top header zones ----------------------------------------------- */
.tb-zone--center { display: none !important; }
.tb-zone--brand, .tb-zone--user {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.tb-zone--brand { flex: 0 0 auto !important; width: auto !important; gap: 10px !important; }
.tb-zone--user  { flex: 1 1 auto !important; justify-content: flex-end !important; gap: 10px !important; }

.fx-brand-name { color: var(--bz-ink) !important; font-weight: 800 !important; }
.fx-brand-sub  { color: var(--bz-gray) !important; }

/* Header round icon buttons (lang / theme / notif) */
.fx-theme-toggle, #topbar-notif > *, .tb-user {
  background: #fff !important; border: 1px solid var(--bz-line) !important;
  color: var(--bz-gray) !important; border-radius: 10px !important;
}
.fx-theme-toggle:hover { background: #f2f4f7 !important; }

/* Logout button — was red; make it a neutral Bosta header icon (no brand red) */
.fx-logout-btn {
  background: #fff !important;
  border: 1px solid var(--bz-line) !important;
  color: var(--bz-gray) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.fx-logout-btn:hover { background: #f2f4f7 !important; color: var(--bz-ink) !important; }
.fx-logout-btn svg, .fx-logout-btn svg * { color: var(--bz-gray) !important; stroke: var(--bz-gray) !important; }

/* ---- 5. Buttons --------------------------------------------------------- */
.btn {
  border-radius: var(--bz-radius-sm) !important;
  font-family: inherit !important; font-weight: 600 !important;
  transition: background .15s, border-color .15s, transform .05s !important;
}
.btn-primary {
  background: var(--bz-red) !important;
  border: 1px solid var(--bz-red) !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(21,128,61,.12) !important;
}
.btn-primary:hover { background: #166534 !important; border-color: #166534 !important; }
.btn-primary:active { transform: translateY(1px) !important; }

.btn-ghost, .btn-secondary, .btn-light {
  background: #fff !important;
  border: 1px solid var(--bz-line) !important;
  color: var(--bz-ink) !important;
  box-shadow: var(--bz-shadow-sm) !important;
}
.btn-ghost:hover, .btn-secondary:hover, .btn-light:hover {
  background: #f9fafb !important; border-color: #d0d5dd !important;
}

/* ---- 6. Cards ----------------------------------------------------------- */
.card {
  background: var(--bz-card) !important;
  border: 0 !important;                  /* UI cleanup: borderless — soft shadow separates cards */
  border-radius: var(--bz-radius) !important;
  box-shadow: var(--bz-shadow-sm) !important;
}
.card:hover { transform: none !important; box-shadow: var(--bz-shadow-md) !important; border: 0 !important; }

/* ---- 7. Status badges → Bosta pills ------------------------------------ */
.badge, .st-badge, .br-tag {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 12px !important; font-weight: 700 !important;
  line-height: 1.6 !important; border: 0 !important;
}
/* Semantic colour tints (mirror Bosta br-tag palette) */
.badge.is-green,  .st-badge--success, .st-badge--done   { background:#ecfdf3 !important; color:#067647 !important; }
.badge.is-red,    .st-badge--danger,  .st-badge--failed { background:#fef3f2 !important; color:#b42318 !important; }
.badge.is-blue,   .st-badge--info,    .st-badge--pending{ background:#eff8ff !important; color:#175cd3 !important; }
.badge.is-gray,   .st-badge--muted,   .st-badge--returned{ background:#f2f4f7 !important; color:#475467 !important; }
.badge.is-amber,  .st-badge--warning                    { background:#fffaeb !important; color:#b54708 !important; }

/* ---- 8. KPI / summary cards (dashboard) -------------------------------- */
/* 4 EQUAL columns, equal height (stretch), comfortable equal gap. */
.dash-kpis {
  gap: 16px !important;
  margin-bottom: 22px !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch !important;
}
@media (max-width: 600px) { .dash-kpis { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .dash-kpis { grid-template-columns: 1fr !important; } }

/* All 4 KPI cards — ORIGINAL layout: label + icon chip in a head row, big
   number below. Same size/proportions as before. Fully white (green corner glow
   removed) — just a light border + soft neutral shadow. The ONLY two tweaks:
   label + number are centered (text-align) and their fonts are larger. */
.dash-kpi {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;                    /* tighter label↔number spacing */
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;  /* subtle light border only */
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
  padding: 16px 22px !important;          /* slimmer: less vertical padding */
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}
/* (green corner glow removed — cards are fully white now) */
.dash-kpi:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05) !important;  /* neutral, no colour */
  border-color: #e5e7eb !important;
}
/* Head row no longer holds the icon in flow — the chip is absolutely positioned
   (below), so the label can span the FULL card width and centre itself.
   min-height reserves the chip's row height so the card size stays the same. */
.dash-kpi-head {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;          /* slimmer label band (chip floats absolutely) */
}
.dash-kpi-label {
  width: 100% !important;               /* full card width, not next to the icon */
  text-align: center !important;        /* centred label */
  color: #6b7280 !important;            /* muted gray title (unchanged colour) */
  font-size: 16px !important;           /* bigger + bolder */
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  margin: 0 !important;
}
/* (0,2,0) specificity so it beats the `[class*="-chip"]` pill catch-all near
   line 607, which would otherwise force border-radius:999px + padding:2px 10px. */
.dash-kpi .dash-kpi-chip {              /* 44×44 rounded chip, green tint bg, green icon */
  position: absolute !important;        /* float in the corner, out of the label's flow */
  top: 16px !important;
  inset-inline-end: 16px !important;    /* TOP-RIGHT in RTL, anchored to .dash-kpi (position:relative) */
  width: 44px !important; height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: rgba(21,128,61,.10) !important;   /* #15803d @ ~10% */
  color: #15803d !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  border: 0 !important;
}
.dash-kpi .dash-kpi-chip svg {
  width: 22px !important; height: 22px !important;
  display: block !important;
  color: #15803d !important;
}
.dash-kpi-value {
  text-align: center !important;        /* CHANGE 1 — centre the number */
  color: #1f2937 !important;            /* bold dark number */
  font-size: 35px !important;           /* a touch smaller, still bold/prominent */
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
  font-feature-settings: 'tnum' !important;
  margin: 0 !important;
}

/* Dashboard hero header = ONE white card wrapping the WHOLE row — the title block
   (.dash-header-left, on the RTL right) AND the controls (.dash-actions, on the RTL
   left) sit inside a single card. The card cosmetics live on the OUTER container only;
   flex/justify/align are left to the base rule + the mobile @media so responsive
   stacking is preserved (no display/flex-direction here, or it would defeat them).
   Selector class is repeated → (0,3,0) so it beats the generic
   `[class*="-header"]:not(.br-new-header)` (0,2,0) rule near line 763. */
.dash-header.dash-header--hero.dash-header--hero {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: var(--bz-radius) !important;
  box-shadow: var(--bz-shadow-sm) !important;
  color: var(--bz-ink) !important;
}
/* The inner groups must NOT be cards themselves. That same broad `[class*="-header"]`
   rule also matches `.dash-header-left` / `.dash-header-text` (the substring "-header"
   is inside those class names) and paints them white with a divider — which made the
   card look like it only wrapped the right-side text. Neutralise them at (0,3,0) so
   only the OUTER container is the card; controls + text share that one card. */
.dash-header.dash-header--hero .dash-header-left,
.dash-header.dash-header--hero .dash-header-text {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dash-header--hero .dash-header-blob { display: none !important; }
.dash-greet { color: var(--bz-gray) !important; }
.dash-title { color: var(--bz-ink) !important; }
.dash-subtitle { color: var(--bz-gray) !important; }
/* Clean original look: soft green-tinted box + green grid icon, NO border.
   The (0,3,0) selector (.dash-header.dash-header--hero …) beats the broad
   `[class*="-header"]:not(.br-new-header)` rule (≈line 900) that would force a
   white background. Size/padding/radius stay (from premium .dash-header-icon). */
.dash-header.dash-header--hero .dash-header-icon {
  background: var(--bz-red-soft) !important;   /* soft light-green tint */
  background-image: none !important;
  border: 0 !important;                        /* no hard border */
  color: #15803d !important;
}
.dash-header.dash-header--hero .dash-header-icon svg,
.dash-header.dash-header--hero .dash-header-icon svg * {
  color: #15803d !important;
  stroke: #15803d !important;
}

.dash-quick-btn {
  background: #fff !important; border: 1px solid var(--bz-line) !important;
  color: var(--bz-ink) !important; border-radius: 10px !important;
}
.dash-quick-btn:hover { background: #f9fafb !important; border-color: #d0d5dd !important; }
.dash-quick-btn svg { color: var(--bz-gray) !important; }

/* ---- 9. Tables (Bosta data-table look) --------------------------------- */
table, .tbl, .data-table {
  background: #fff !important;
  border-radius: var(--bz-radius) !important;
  border-collapse: separate !important; border-spacing: 0 !important;
}
thead th, .tbl thead th {
  background: #fff !important;
  color: var(--bz-gray) !important;
  font-size: 12px !important; font-weight: 700 !important;
  border-bottom: 1px solid var(--bz-line) !important;
  text-align: start !important;
}
tbody td, .tbl tbody td {
  border-bottom: 1px solid var(--bz-line-soft) !important;
  font-size: 13px !important; color: var(--bz-ink) !important;
}
tbody tr:hover td { background: #f9fafb !important; }

/* ---- 10. Misc surfaces ------------------------------------------------- */
.modal-box { border-radius: var(--bz-radius) !important; box-shadow: var(--bz-shadow-md) !important; }
.tabs-bar, .tabs { background: #fff !important; border: 1px solid var(--bz-line) !important; border-radius: 10px !important; }
input, select, textarea {
  border-radius: var(--bz-radius-sm) !important;
  border: 1px solid var(--bz-line) !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--bz-red) !important; outline: none !important; }

/* ---- 11. Mobile: keep header pinned, sidebar white --------------------- */
@media (max-width: 768px) {
  #topbar {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    background: #fff !important; border-bottom: 1px solid var(--bz-line) !important;
    box-shadow: none !important;
  }
  #main { padding-top: 60px !important; background: var(--bz-bg) !important; }
  body:not([data-theme="dark"]) .app-sidebar {
    background: #fff !important; color: var(--bz-ink) !important;
    border-inline-end: 1px solid var(--bz-line) !important;
  }
}

/* ============================================================================
   PHASE 2 · GLOBAL COMPONENT COVERAGE — make EVERY screen read as Bosta.
   Visual-only overrides (bg / colour / border / radius / shadow) so layout,
   flex and positioning are never touched. Reversible with the same one file.
   ========================================================================== */

/* ---- Leftover olive accents from phase 1 -------------------------------- */
.sb2-item.active::before, .sb2-item.active::after { display: none !important; }
.dash-header-icon { box-shadow: none !important; }

/* ---- A. Every panel / surface → white Bosta card ----------------------- */
.card, .stat, .stat-card, .tbl, .cust-table-card, .cust-hero, .cust-info,
.cust-info-card, .cust-search, .cust-search-card, .order-item, .ord-card,
.ord-row, .ord-panel, .prod-card, .prod-item, .prod-row, .invoice, .invoice-card,
.invoice-full, .receipt, .receipt-card, .schat-section, .schat-header, .schat-aside,
.comm-card, .comm-item, .pkl-card, .pkl-row, .pkl-panel, .jt-card, .jt-panel,
.restock-card, .restock-tbl-v2, .priority-alert, .collapsible-card, .empty-state,
.toast-v2, .fx-notif, .fx-notif-panel, .cmd-palette, .lbp-card, .lbp-panel,
.qaction, .invoice-item, .bulk-bar, .cust-bulk-bar, .modal-box, .login-card-v2,
[class*="-card"], [class*="-panel"], [class*="-widget"], [class*="-tile"] {
  background: #ffffff !important;
  border: 0 !important;                  /* UI cleanup: borderless — kills stray nested-box borders globally */
  border-radius: var(--bz-radius) !important;
  box-shadow: var(--bz-shadow-sm) !important;
  color: var(--bz-ink) !important;
}

/* ---- B. Coloured hero strips / gradient headers → flat white ----------- */
/* NOTE: only HERO CONTAINERS get the flat white frame — never their children.
   (A `[class*="-hero"]` wildcard wrongly framed dash-kpi-hero-value/-meta/etc.) */
.cust-hero, .cust-hero--gradient, .schat-header, .comm-header, .invoice-head,
.receipt-head, .prod-hero, .pkl-hero, .jt-hero {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--bz-ink) !important;
  border: 1px solid var(--bz-line) !important;
}
.cust-hero *, .cust-hero-name, .cust-hero-sub { color: var(--bz-ink) !important; }
.cust-hero-meta, .cust-hero-sub, .cust-hero-phone { color: var(--bz-gray) !important; }

/* Stat-card INNER elements sit clean — no nested boxes / borders / dividers */
.dash-kpi-hero-content, .dash-kpi-hero-value, .dash-kpi-hero-meta,
.dash-kpi-hero-label, .dash-kpi-hero-sep, .dash-spark,
.dash-kpi-mini-content, .dash-kpi-mini-label, .dash-kpi-mini-value,
.cust-hero-name, .cust-hero-meta, .cust-hero-sub {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kill leftover green gradient bars (bulk bar, banners) */
.cust-bulk-bar, .bulk-bar {
  background: #ffffff !important; background-image: none !important;
  color: var(--bz-ink) !important; border: 1px solid var(--bz-line) !important;
}
.cust-bulk-bar .btn-secondary { background: #fff !important; color: var(--bz-ink) !important; }

/* ---- C. All buttons (every family) → Bosta -------------------------------*/
.btn, .qaction, .bulk-quick-btn, .cust-hero-btn, .cust-info-btn, .receipt-btn,
.pkl-btn, .prod-btn, .jt-btn, [class*="-btn"]:not(.sb2-burger):not(.sb2-wa-chip) {
  border-radius: var(--bz-radius-sm) !important;
  font-family: inherit !important;
}
/* basic (default) variant — white w/ border */
.btn:not(.btn-primary):not([class*="--primary"]):not([class*="--danger"]):not([class*="--wa"]):not(.btn-danger),
.qaction, .bulk-quick-btn, .cust-hero-btn:not([class*="--primary"]),
.cust-info-btn:not([class*="--wa"]):not([class*="--primary"]), .receipt-btn:not([class*="--primary"]) {
  background: #ffffff !important;
  border: 1px solid var(--bz-line) !important;
  color: var(--bz-ink) !important;
  box-shadow: var(--bz-shadow-sm) !important;
}
.btn:not(.btn-primary):not(.btn-danger):hover, .qaction:hover, .cust-hero-btn:hover {
  background: #f9fafb !important; border-color: #d0d5dd !important;
}
/* primary variants across families → Bosta red */
.btn-primary, [class*="-btn--primary"], [class*="btn-primary"],
.cust-hero-btn--primary, .receipt-btn--primary, .qaction--primary {
  background: var(--bz-red) !important; border: 1px solid var(--bz-red) !important;
  color: #fff !important;
}
.btn-primary:hover, [class*="--primary"]:hover { background: #166534 !important; border-color: #166534 !important; }
/* danger variants → keep red family */
.btn-danger, [class*="--danger"], [class*="--delete"] {
  background: #fff !important; border: 1px solid #fda29b !important; color: #b42318 !important;
}
/* WhatsApp buttons keep brand green (Bosta also uses green for WA) */
.cust-info-btn--wa, [class*="--wa"], .btn-wa {
  background: #25d366 !important; border-color: #25d366 !important; color: #fff !important;
}
/* …EXCEPT the Quick-Actions WhatsApp button → match the other action buttons
   (white w/ border + grey hover) so the qaction grid is colour-consistent. */
.qaction--wa {
  background: #ffffff !important;
  border: 1px solid var(--bz-line) !important;
  color: var(--bz-ink) !important;
  box-shadow: var(--bz-shadow-sm) !important;
}
.qaction--wa:hover {
  background: #f9fafb !important; border-color: #d0d5dd !important; color: var(--bz-ink) !important;
}

/* ---- D. All tables → Bosta data-table --------------------------------- */
.tbl, .tbl-compact, .restock-tbl-v2, table, .data-table {
  background: #fff !important; border-radius: var(--bz-radius) !important;
  border-collapse: separate !important; border-spacing: 0 !important;
}
/* TABLE SCROLLBAR → hidden (table stays scrollable). The prominent gray bar on
   tables is removed. Verified live: this Chrome (Windows) renders NATIVE OS
   scrollbars and ignores `::-webkit-scrollbar`; `scrollbar-width: thin` did NOT
   shrink it (still ~14px), but `scrollbar-width: none` reliably hides it (0px).
   Scoped to table scroll containers ONLY — page/sidebar scrollbars are untouched.
   Scrolling itself is unchanged (overflow stays auto; wheel/trackpad/shift-wheel). */
.tbl-wrap, .restock-table-wrap {
  scrollbar-width: none !important;            /* Firefox + modern Chromium/Edge */
  -ms-overflow-style: none !important;         /* legacy Edge/IE */
}
.tbl-wrap::-webkit-scrollbar,
.restock-table-wrap::-webkit-scrollbar {
  width: 0 !important; height: 0 !important;
  display: none !important;                    /* Safari / webkit-honoring Chromium */
}
.tbl thead tr, .tbl-compact thead tr, table thead tr, .restock-tbl-v2 thead tr {
  background: #fff !important;
}
.tbl th, .tbl-compact th, table th, .restock-tbl-v2 th, thead th {
  background: #fff !important; color: var(--bz-gray) !important;
  font-size: 12px !important; font-weight: 700 !important;
  border-bottom: 1px solid var(--bz-line) !important; text-align: start !important;
}
.tbl td, .tbl-compact td, table td, .restock-tbl-v2 td, tbody td {
  border-bottom: 1px solid var(--bz-line-soft) !important;
  color: var(--bz-ink) !important;
}
.tbl tbody tr:hover td, table tbody tr:hover td { background: #f9fafb !important; }

/* ---- E. Every status pill / chip / badge → Bosta pill ------------------ */
.badge, .st-badge, .br-tag, .chip, .tag, .pill, .stat-pill,
[class*="status-"], [class*="-status"], [class*="chip--"], [class*="-badge"],
[class*="-tag"], [class*="-pill"], [class*="-chip"] {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  border-radius: 999px !important; padding: 2px 10px !important;
  font-size: 12px !important; font-weight: 700 !important;
  line-height: 1.6 !important; border: 0 !important; background-image: none !important;
}
/* semantic colours by suffix (covers status-confirmed, -shipped, -returned, …) */
[class*="confirmed"], [class*="delivered"], [class*="success"], [class*="done"],
[class*="-paid"], [class*="active"], [class*="--leaf"], [class*="--green"],
.status-confirmed, .status-delivered {
  background: #ecfdf3 !important; color: #067647 !important;
}
[class*="shipped"], [class*="processing"], [class*="pending"], [class*="inprogress"],
[class*="in-progress"], [class*="--blue"], [class*="--info"], .status-shipped {
  background: #eff8ff !important; color: #175cd3 !important;
}
[class*="cancel"], [class*="failed"], [class*="reject"], [class*="--danger"],
[class*="--red"], [class*="overdue"], .status-cancelled {
  background: #fef3f2 !important; color: #b42318 !important;
}
[class*="return"], [class*="archived"], [class*="draft"], [class*="--gray"],
[class*="--grey"], [class*="--muted"], .status-returned {
  background: #f2f4f7 !important; color: #475467 !important;
}
[class*="warn"], [class*="--amber"], [class*="--gold"], [class*="--yellow"],
[class*="hold"], .status-onhold {
  background: #fffaeb !important; color: #b54708 !important;
}

/* ---- F. Inputs / selects / search bars -------------------------------- */
input, select, textarea, .input, .cust-search input, .search-input {
  border-radius: var(--bz-radius-sm) !important;
  border: 1px solid var(--bz-line) !important;
  background: #fff !important; color: var(--bz-ink) !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--bz-red) !important; outline: none !important; }

/* ---- G. Headings / section titles ------------------------------------- */
h1, h2, h3, .section-title, .card-title, .panel-title { color: var(--bz-ink) !important; }
.muted, .text-muted, .subtitle, .caption, small { color: var(--bz-gray) !important; }
a, .link { color: var(--bz-red) !important; }

/* ---- H. Login screen → olive-green mockup (CSS rebuild, no image dep) ----
   Faithful rebuild of the reference mockup entirely in CSS + inline SVG:
   off-white page, centered white card, olive-green (#587a29) accents/button,
   green outline icons, RTL. Decorations (hexagon, dotted grid, glow, olive
   sprig) are CSS/SVG only — deleting any reference image has zero effect. */
:root, body:not([data-theme="dark"]) {
  --lg-olive:      #587a29;   /* primary olive green from the mockup */
  --lg-olive-dark: #46611f;   /* button hover */
  --lg-olive-soft: #eef4e3;   /* light-green focus tint */
  --lg-page:       #f6f7f6;   /* off-white page background */
  --lg-ink:        #2b2f24;   /* heading / dark text */
  --lg-line:       #e6e8e3;   /* light separators / input borders */
  --lg-muted:      #8a9080;   /* sub text */
}

/* Page = full-height off-white + single vertical-centering context */
#login-screen {
  /* Full-page background design (copied into the app's own assets as
     /login-full.png — independent of the FileBrowser source). It's a wide
     (≈2.5:1) full composition: hexagon/dots top-left, logo top-right, olive
     branch + bowl on the right. `contain` shows the WHOLE image (nothing
     cropped) filling the width; background-color (matching the image's #f9f9f9)
     fills the top/bottom remainder seamlessly. Non-fixed → scales with zoom in
     lock-step with the centered card. */
  background-color: #f9f9f9 !important;
  background-image: url('/login-full.png?v=2') !important;
  background-size: contain !important;
  /* Bottom-anchored so the olive bowl sits in the lower-right, hugging the
     right edge, fully visible. */
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  /* ── ZOOM-RESILIENT centering ──
     Flex container that GROWS with content (min-height, not fixed height); the
     card wrapper uses `margin:auto` (set below) which centers it on both axes
     when it fits AND collapses to the top — fully scrollable, never clipped —
     when the card is taller than the viewport (high zoom). overflow:visible (NOT
     an inner scroll container) lets #login-screen grow with the card so the
     DOCUMENT scrolls and the whole card stays reachable. Everything is
     viewport-relative, so the composition scales uniformly with the background
     at every zoom level. */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
}
/* The background image now provides the hexagon / dots / olive artwork AND its
   own top-right logo, so hide the hand-built decorations and the HTML corner
   logo to avoid duplicating them. (The functional EN toggle top-left stays.) */
.login-bg-orbs, .login-bg-grid, .lg-deco, .lg-corner-logo { display: none !important; }

/* ── Top bar: language toggle (start) + corner logo (end) ── */
.lg-topbar {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 18px 26px !important; z-index: 4 !important; pointer-events: none !important;
  /* Physical LTR so the language toggle sits LEFT and the logo RIGHT,
     matching the reference composition regardless of the page's RTL text. */
  direction: ltr !important;
}
.lg-lang {
  pointer-events: auto !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  background: transparent !important; border: 0 !important; cursor: pointer !important;
  color: var(--lg-ink) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important;
  padding: 6px 8px !important; border-radius: 8px !important;
}
.lg-lang::after {
  content: "" !important; width: 1px !important; height: 18px !important;
  background: #d4d7cf !important; margin-inline-start: 6px !important; display: inline-block !important;
}
.lg-lang:hover { background: rgba(0,0,0,.04) !important; }
.lg-corner-logo { pointer-events: auto !important; width: 40px !important; height: 40px !important; object-fit: contain !important; opacity: .95 !important; }

/* ── CSS-only decorations (PHYSICAL positions to mirror the reference:
   hexagon + dotted grid on the LEFT, olive sprig + glow bottom-RIGHT) ── */
.lg-deco { position: absolute !important; z-index: 0 !important; pointer-events: none !important; }
.lg-hex {
  left: 6.5% !important; right: auto !important; top: 29% !important;
  width: 96px !important; height: 106px !important;
  background: #ececea !important;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%) !important;
}
.lg-dots {
  left: 4.5% !important; right: auto !important; top: 43% !important;
  width: 150px !important; height: 120px !important;
  background-image: radial-gradient(#d6d9d0 1.6px, transparent 1.7px) !important;
  background-size: 17px 17px !important; opacity: .75 !important;
}
.lg-glow {
  right: -60px !important; left: auto !important; bottom: -90px !important;
  width: 420px !important; height: 420px !important; border-radius: 50% !important;
  background: radial-gradient(circle, rgba(88,122,41,.13), transparent 70%) !important;
}
.lg-sprig {
  right: 1.5% !important; left: auto !important; bottom: 3% !important;
  width: 420px !important; height: 500px !important; opacity: .96 !important;
}
.lg-sprig svg { width: 100% !important; height: 100% !important; display: block !important; }
@media (max-width: 720px) {
  .lg-sprig, .lg-hex, .lg-dots { display: none !important; }
}

/* ── Centering wrappers: shrink-to-fit so #login-screen is the only centerer.
   `margin:auto` centers on BOTH axes inside the flex container and, crucially,
   collapses to 0 when the card is taller than the viewport — so at high zoom
   the card top-aligns and the page scrolls instead of clipping (scroll-safe). */
.login-form-panel, .login-container, .login-container--centered {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  min-height: 0 !important; height: auto !important;
  width: 100% !important; max-width: 680px !important;
  margin: auto !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  position: relative !important; z-index: 2 !important;
}
/* The brand block ABOVE the card is unused in this design — hide it */
.lcv2-brand-above { display: none !important; }

/* ── Card ── */
.login-card-v2 {
  background: #ffffff !important;
  border: 1px solid rgba(43,47,36,.07) !important;
  /* Real 3D depth: a soft top highlight + tightly-stacked ambient shadows
     fading into a deep, wide cast shadow so the card visibly lifts off the
     background. Clean (low-opacity layers), not heavy. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(43,47,36,.04),
    0 8px 18px rgba(43,47,36,.06),
    0 20px 40px rgba(43,47,36,.10),
    0 36px 72px rgba(43,47,36,.12) !important;
  border-radius: 28px !important;
  padding: 50px 58px !important;
  width: 100% !important;
}
.login-card-v2::before, .login-card-v2::after { display: none !important; content: none !important; }

/* Logo inside the card (top, centered) — large, clean, NO glow blob behind it */
.lcv2-logo-wrap {
  display: flex !important; justify-content: center !important; align-items: center !important;
  margin-bottom: 18px !important;
  background: none !important;
}
.lcv2-logo { width: 116px !important; height: 116px !important; object-fit: contain !important; }

/* Heading + sub-line */
.lcv2-heading { color: var(--lg-ink) !important; font-weight: 800 !important; font-size: 25px !important; text-align: center !important; margin: 0 0 8px !important; }
.lcv2-subline { color: var(--lg-muted) !important; font-size: 13.5px !important; text-align: center !important; margin: 0 0 30px !important; }
.lcv2-link { color: var(--lg-olive) !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; }
.lcv2-link:hover { text-decoration: underline !important; }

/* Fields */
.lcv2-form { display: flex !important; flex-direction: column !important; gap: 22px !important; }
.lcv2-field { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.lcv2-field label { color: var(--lg-ink) !important; font-weight: 700 !important; font-size: 13px !important; text-align: start !important; }

.lcv2-input-wrap { position: relative !important; display: flex !important; align-items: center !important; }
.lcv2-input-wrap input {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid var(--lg-line) !important;
  color: var(--lg-ink) !important;
  border-radius: 12px !important;
  height: 54px !important;
  padding-inline-start: 48px !important;
  padding-inline-end: 48px !important;
  font-size: 14px !important;
}
.lcv2-input-wrap input::placeholder { color: #b6bbac !important; }
.lcv2-input-wrap input:focus {
  border-color: var(--lg-olive) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px var(--lg-olive-soft) !important;
}

/* Field-type icon (mail / lock) — green, on the inline-START edge so it follows
   direction: RTL(Arabic) → right, LTR(English) → left. Physical left/right are
   reset FIRST so the logical `inset-inline-start` (declared last) wins. */
.lcv2-input-icon {
  position: absolute !important;
  left: auto !important; right: auto !important; inset-inline-end: auto !important;
  inset-inline-start: 14px !important;
  color: var(--lg-olive) !important; opacity: 1 !important; pointer-events: none !important;
  display: inline-flex !important; align-items: center !important;
}

/* Show / hide toggle — green, on the inline-END edge (opposite the field icon,
   so they never overlap): RTL → left, LTR → right. Same ordering. */
.lcv2-pass-toggle {
  position: absolute !important;
  left: auto !important; right: auto !important; inset-inline-start: auto !important;
  inset-inline-end: 12px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 30px !important; height: 30px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: transparent !important; border: 0 !important; cursor: pointer !important;
  color: var(--lg-olive) !important; border-radius: 8px !important; padding: 0 !important;
}
.lcv2-pass-toggle:hover { background: var(--lg-olive-soft) !important; }

/* Forgot-password link — under the password field, start-aligned */
.lcv2-link--forgot { font-size: 12.5px !important; align-self: flex-start !important; margin-top: 2px !important; }

/* Primary button — olive green, full width, rounded */
.lcv2-submit {
  height: 52px !important; width: 100% !important;
  background: var(--lg-olive) !important; background-image: none !important;
  border: 1px solid var(--lg-olive) !important;
  color: #fff !important; font-weight: 800 !important; font-size: 15px !important;
  border-radius: 12px !important; margin-top: 6px !important;
  box-shadow: 0 4px 14px rgba(88,122,41,.22) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.lcv2-submit::before { display: none !important; content: none !important; }
.lcv2-submit:hover { background: var(--lg-olive-dark) !important; border-color: var(--lg-olive-dark) !important; transform: none !important; box-shadow: 0 6px 18px rgba(88,122,41,.30) !important; }
.lcv2-submit-arrow { display: none !important; }

/* Error + (optional) footer */
.lcv2-error { background: #fef3f2 !important; border: 1px solid #fecdca !important; color: #b42318 !important; border-radius: 10px !important; }
.lcv2-footer { color: var(--lg-muted) !important; border-top: 1px solid var(--lg-line) !important; margin-top: 22px !important; padding-top: 14px !important; text-align: center !important; font-size: 11px !important; }
.lcv2-dot { background: #c8cdbe !important; }

/* ---- I. Misc neutralisers --------------------------------------------- */
.live-pulse, .pulse { background: var(--bz-red) !important; }
.collapsible-header { background: #fff !important; color: var(--bz-ink) !important; }
.modal-overlay { background: rgba(16,24,40,.45) !important; }
.empty-state, .empty-state-title { color: var(--bz-ink) !important; }
.empty-state-sub { color: var(--bz-gray) !important; }

/* ---- J. Header bars inside components → white (kill olive gradients) --- */
.modal-hdr, .modal-header, .card-hdr, .card-header, .panel-hdr, .panel-header,
.section-hdr, .section-header, .cust-hero-head, .invoice-hdr, .receipt-hdr,
.prod-hdr, .pkl-hdr, .jt-hdr, .comm-hdr, .schat-header,
[class*="-hdr"], [class*="-header"]:not(.br-new-header) {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--bz-ink) !important;
  border-bottom: 1px solid var(--bz-line) !important;
}
.modal-hdr h1, .modal-hdr h2, .modal-hdr h3, [class*="-hdr"] h3,
[class*="-header"] h3, [class*="-hdr"] .title, [class*="-header"] .title {
  color: var(--bz-ink) !important;
}
.modal-ftr, .modal-footer, [class*="-ftr"], [class*="-footer"]:not(.lcv2-footer) {
  background: #ffffff !important; border-top: 1px solid var(--bz-line) !important;
}
/* Neutralise any leftover bordered inner box on the customer hero */
.cust-hero-name, .cust-hero .cust-hero-name, .cust-hero-id {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}

/* ---- K. ORDERS screen → Bosta data-table layout ------------------------ */
/* Quick-filter tab bar (الكل / جديد / قيد الشحن …) → Bosta segmented tabs */
.ord-tabs {
  background: #fff !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: var(--bz-radius) !important;
  box-shadow: var(--bz-shadow-sm) !important;
  padding: 4px 6px !important;
  gap: 2px !important;
  margin-bottom: 14px !important;
  overflow-x: auto !important;
}
.ord-tab {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--bz-gray) !important;
  font-weight: 600 !important; font-size: 13px !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
.ord-tab:hover { color: var(--bz-ink) !important; background: transparent !important; }
.ord-tab.is-active {
  color: var(--bz-red) !important;
  border-bottom-color: var(--bz-red) !important;
  background: transparent !important;
}
.ord-tab-count {
  background: #f2f4f7 !important; color: var(--bz-gray) !important;
  border-radius: 999px !important; padding: 1px 8px !important;
  font-size: 11px !important; font-weight: 700 !important;
}
.ord-tab.is-active .ord-tab-count { background: var(--bz-red-soft) !important; color: var(--bz-red) !important; }

/* Table card + rows — this theme layer loads last, so the order-table polish lives HERE
   (overriding the base rules in style-premium.css with the brand-green SaaS look). */
.ord-card { padding: 0 !important; overflow: hidden !important; }
/* Header: subtle brand-green tint + a clear accent base line, darker labels. */
.ord-tbl thead th {
  background: linear-gradient(180deg, rgba(21,128,61,.09), rgba(21,128,61,.035)) !important;
  color: var(--bz-ink) !important;
  font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .1px !important;
  border-bottom: 1.5px solid rgba(21,128,61,.22) !important;
}
/* Denser rows + crisp hairline divider. */
.ord-tbl tbody td { padding: 9px 16px !important; border-bottom: 1px solid rgba(11,30,18,.06) !important; }
/* Zebra striping (whisper of brand green) — stripe declared BEFORE hover so hover wins. */
.ord-row:nth-child(even) td { background: rgba(21,128,61,.025) !important; }
/* Gentle green hover tint (no movement) — replaces the old grey. */
.ord-row:hover td, .ord-row:nth-child(even):hover td { background: rgba(21,128,61,.07) !important; }

/* Customer avatar → keep round, Bosta-sized */
.ord-avatar { border-radius: 50% !important; font-weight: 700 !important; }
.ord-customer-name { color: var(--bz-ink) !important; font-weight: 600 !important; }
.ord-customer-region { color: var(--bz-gray) !important; }

/* Status pill — clean, compact, consistent across all statuses. Tinted fill + matching
   text come from JS inline styles (m.bg / m.fg). NO border, NO box-shadow halo: the old
   white ring on the dot was what read as a "dash/toggle" through the pill. */
.ord-status-pill {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  border-radius: 999px !important; padding: 3px 11px !important; line-height: 1.55 !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  border: 0 !important; box-shadow: none !important;
}
/* Small SOLID dot before the label — colour from JS (m.dot); fixed size, never stretches.
   NOTE: the class contains "status-", so the generic badge rule above ([class*="status-"])
   tries to inject `padding: 2px 10px` + border-radius:999px onto it. With box-sizing:border-box
   that padding forced a 20px-wide bar (the "dash"). This more-specific rule zeroes the padding
   and min-width so the dot stays a clean 6px circle. */
.ord-status-pill .ord-status-dot {
  width: 6px !important; height: 6px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important;
  flex: 0 0 auto !important; box-shadow: none !important;
}
.ord-tab-dot { border-radius: 50% !important; }

/* Total → bold + dark, muted unit. Qty → neat brand-green chip. */
.ord-total { color: var(--bz-ink) !important; font-weight: 800 !important; }
.ord-total small { color: var(--bz-gray) !important; }
.ord-qty-pill {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 34px !important; padding: 2px 9px !important;
  background: rgba(21,128,61,.08) !important; color: #15803d !important;
  border: 1px solid rgba(21,128,61,.16) !important; border-radius: 7px !important; font-weight: 800 !important;
}
/* Orders-header total badge → olive green (olive drab #6B8E23 on white text). Shape,
   padding and the 999px pill radius are inherited from the base .ord-total-pill rule. */
.ord-total-pill { background: #6B8E23 !important; color: #fff !important; border: 1px solid #5a7a1e !important; border-radius: 999px !important; }
.ord-total-pill svg { color: rgba(255,255,255,.9) !important; }

/* ---- Customers worklist table → same brand-green polish as .ord-tbl --------
   This table is `.tbl.tbl-compact` (renderCustomers), which never got the
   .ord-tbl redesign. The generic .tbl rules above (sec. D: 608/611/616/620)
   force a flat white header + grey hover + no zebra. These more-specific
   .tbl-compact selectors load later in the SAME file, so they win — reusing
   the exact .ord-tbl values (brand-green tint header, hairline rows, whisper
   zebra, green hover). Scoped to .tbl-compact only; other .tbl tables keep
   the plain Bosta look. */
.tbl-compact thead th {
  background: linear-gradient(180deg, rgba(21,128,61,.14), rgba(21,128,61,.10)) !important;
  color: var(--bz-ink) !important;
  font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .1px !important;
  border-bottom: 2px solid rgba(21,128,61,.35) !important;
}
.tbl-compact tbody td { padding: 9px 16px !important; border-bottom: 1px solid rgba(11,30,18,.06) !important; }
/* Zebra (whisper of brand green) — declared BEFORE hover so hover wins. */
.tbl-compact tbody tr.cust-row:nth-child(even) td { background: rgba(21,128,61,.055) !important; }
/* Gentle green hover (overrides the generic grey td-hover at sec. D:620). */
.tbl-compact tbody tr.cust-row:hover td,
.tbl-compact tbody tr.cust-row:nth-child(even):hover td { background: rgba(21,128,61,.11) !important; }
/* UNIFORM whole-row hover. Premium adds TWO extra hover treatments to *every*
   table that make one column read differently from the rest:
   (a) a different-hue tr gradient  — style-premium.css:3608 rgba(34,197,94,…)
   (b) a 3px bright-green accent bar on the FIRST cell — style-premium.css:3614
       (td:first-child::before); in RTL the first cell is the right-most one
       next to the customer name, so it looks like that column highlights on
       its own. Neutralize both for the worklist so the single green td-hover
       above is the ONLY hover background, identical on every cell. */
.tbl-compact tbody tr.cust-row:hover { background: transparent !important; }
.tbl-compact tbody tr.cust-row:hover td:first-child::before,
.tbl-compact tbody tr.cust-row td:first-child::before { content: none !important; display: none !important; background: none !important; }

/* ═══════ Customers worklist → clean list with THIN ROW-DIVIDER LINES ═══════
   DESKTOP ONLY (≥769px). The mobile view (≤768px, below) renders each row as its
   own rounded flex-card and is gated out of this block.

   Rows sit flush directly under one another, separated by a SINGLE 1px hairline
   in the app's standard divider tone (--bz-line, #eaecf0) — NOT spaced/floating
   cards. So this block removes every trace of the earlier card treatment: the
   inter-row gap (border-spacing), the tinted shell + inset padding, the per-cell
   side borders, the outer corner radius and the per-row shadow. What remains is a
   flat list: one bottom-border line per row boundary, square cells (no notches),
   zebra + a green whole-row hover.

   Scoped to `.cust-table-card … tr.cust-row` so the restock-report .tbl-compact
   table (no .cust-row, no .cust-table-card) and the Orders table are untouched. */
@media (min-width: 769px) {
  /* Flush rows — no gap. Restore the plain white card shell (no tint / inset). */
  .cust-table-card .tbl-compact { border-spacing: 0 !important; }
  .cust-table-card { background: #fff !important; padding: 0 !important; }

  /* Each cell: ONLY a thin bottom divider. No top/side borders, no radius, no
     shadow → consecutive rows are separated by exactly one subtle line. */
  .cust-table-card .tbl-compact tbody tr.cust-row > td {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--bz-line) !important;   /* the row-divider line */
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Last row needs no trailing divider (the card edge closes the list). */
  .cust-table-card .tbl-compact tbody tr.cust-row:last-child > td { border-bottom: 0 !important; }
}

/* Row action icons (view / whatsapp / call) → bare lightweight icon buttons.
   Premium styles them as 3 individually-tinted chips (blue/green/gold) with a
   wrapper box (style-premium.css:5579-5611). Here, scoped to .tbl-compact's
   action cell, we strip the chip box + per-icon colours: ALL three rest at a
   calm neutral grey and tint to the table's brand green (#15803d / the same
   rgba(21,128,61,…) used by the green header & zebra) on hover, with a faint
   fully-round green highlight. Behaviour/links/onclick untouched (CSS only). */
.tbl-compact .cust-actions {
  background: transparent !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  /* Premium sets this td to display:inline-flex, which drops it out of the
     table layout: the cell shrinks to its content height and sticks to the
     TOP of a tall row. Restore proper table-cell semantics so the cell spans
     the full row height and centres its icons vertically (level with name/
     phone/etc). The flex `gap` is replaced by per-icon margins below. */
  display: table-cell !important; vertical-align: middle !important;
  white-space: nowrap !important; text-align: start !important;
}
/* The action cell is a .cust-actions td. This rule (specificity 0,4,0) outranks
   the general row-hover `…:hover td` (0,3,3), so it MUST carry the same green
   hover or the action column stays unhighlighted on odd rows (even rows were
   masked by the higher-specificity `:nth-child(2n):hover td`). Use the row
   hover green so the whole row — including the icons cell — highlights uniformly.
   (Also neutralizes premium's white .cust-row:hover .cust-actions box.) */
.tbl-compact .cust-row:hover .cust-actions { background: rgba(21,128,61,.11) !important; }
.tbl-compact .cust-actions .cust-action,
.tbl-compact .cust-actions .cust-action--wa,
.tbl-compact .cust-actions .cust-action:nth-child(1),
.tbl-compact .cust-actions .cust-action:nth-child(3) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: #344054 !important;                            /* strong dark charcoal at rest */
  width: 32px !important; height: 32px !important;      /* comfortable click target */
  border-radius: 50% !important; transform: none !important;
  transition: color .15s ease, background-color .15s ease !important;
  vertical-align: middle !important;                   /* centre each icon on the cell's line */
  margin: 0 3px !important;                             /* re-create the old 6px inter-icon gap */
}
/* Icon glyph: heavier stroke + slightly larger so the line icons read with weight.
   stroke follows currentColor → charcoal at rest, brand green on hover. */
.tbl-compact .cust-actions .cust-action svg {
  width: 19px !important; height: 19px !important;
  stroke: currentColor !important; stroke-width: 2.1px !important;
}
.tbl-compact .cust-actions .cust-action:hover,
.tbl-compact .cust-actions .cust-action--wa:hover,
.tbl-compact .cust-actions .cust-action:nth-child(1):hover,
.tbl-compact .cust-actions .cust-action:nth-child(3):hover {
  background: rgba(21,128,61,.09) !important;           /* faint round green tint */
  color: #15803d !important;                            /* table brand green */
  box-shadow: none !important; transform: none !important;
}
.ord-action-btn { background: #fff !important; border: 1px solid var(--bz-line) !important; color: var(--bz-gray) !important; border-radius: 8px !important; }
.ord-action-btn:hover { background: #f9fafb !important; }

/* Pagination bar → Bosta */
.pagination, .pager, [class*="pagination"] { background: transparent !important; }
.pagination button, .pager button, [class*="pagination"] button, [class*="page-btn"] {
  background: #fff !important; border: 1px solid var(--bz-line) !important;
  color: var(--bz-ink) !important; border-radius: 8px !important;
}
.pagination button.is-active, [class*="page-btn"].is-active, [class*="pagination"] .active {
  background: var(--bz-red) !important; border-color: var(--bz-red) !important; color: #fff !important;
}


/* ---- L. COLLAPSED SIDEBAR — icons only, centered (Bosta rail) ----------- */
/* Phase-1 forced expanded paddings with !important, hiding the collapsed
   state; these rules restore Bosta's icon-only collapsed rail.            */
@media (min-width: 769px) {
  #app-sidebar[data-collapsed="1"].app-sidebar {
    width: 72px !important;
    padding: 12px 6px !important;
  }
  #app-sidebar[data-collapsed="1"] .sb2-item-label,
  #app-sidebar[data-collapsed="1"] .sb2-group-label { display: none !important; }
  #app-sidebar[data-collapsed="1"] .sb2-group { margin: 2px 0 !important; }
  #app-sidebar[data-collapsed="1"] .sb2-item {
    justify-content: center !important;
    padding: 11px 0 !important;
    gap: 0 !important;
    width: 100% !important;
    position: relative !important;
  }
  #app-sidebar[data-collapsed="1"] .sb2-item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--bz-gray) !important;
  }
  #app-sidebar[data-collapsed="1"] .sb2-item.active { background: var(--bz-red-soft) !important; }
  #app-sidebar[data-collapsed="1"] .sb2-item.active .sb2-item-icon { color: var(--bz-red) !important; }
  #app-sidebar[data-collapsed="1"] .sb2-item-badge {
    position: absolute !important; top: 4px; inset-inline-end: 6px;
    font-size: 9px !important; padding: 1px 5px !important; min-width: 14px;
  }
  /* main content shifts to the 72px rail (inline-start → flips with direction) */
  body:has(#app-sidebar[data-collapsed="1"]) #main { margin-inline-start: var(--bz-sb-collapsed, 72px) !important; }
}

/* ---- M. Card-header accent bar + nested empty-state box + collapsed WA --- */
/* 1a) Remove the green vertical accent bar before every card-header <h3>     */
.page h3::before, .card h3::before, .collapsible-header::before { display: none !important; content: none !important; }

/* 1b) Empty-state (trophy / smiley) must NOT be a card-inside-a-card        */
.empty-state {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.empty-illust, .empty-state-illust { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* 2) Hide the WhatsApp / chat-bubble chip when the sidebar is collapsed     */
@media (min-width: 769px) {
  #app-sidebar[data-collapsed="1"] .sb2-wa-chip { display: none !important; }
  /* burger stays + centers in the collapsed top row */
  #app-sidebar[data-collapsed="1"] .sb2-top { justify-content: center !important; padding: 4px 0 10px !important; }
}

/* Collapsed icon-rail width — forceful override (the earlier rule wasn't winning the
   cascade against the expanded width). Desktop only; mobile uses the drawer. */
@media (min-width: 769px) {
  html body #app-sidebar.app-sidebar[data-collapsed="1"] { width: var(--bz-sb-collapsed, 72px) !important; }
  html body:has(#app-sidebar[data-collapsed="1"]) #main { margin-inline-start: var(--bz-sb-collapsed, 72px) !important; }
  html body:has(#app-sidebar[data-collapsed="1"]) #topbar { inset-inline-start: var(--bz-sb-collapsed, 72px) !important; }
}

/* ═══════════ MOBILE / SMALL-SCREEN SHELL (≤900px) — 2026-06-19 ═══════════
   The desktop redesign (top bar offset beside a full-height sidebar) is ≥901px only.
   At ≤900px revert to the mobile shell: full-width top bar + off-canvas drawer sidebar
   (the drawer transform + hamburger are handled in style-premium @max-900) + full-width
   content, with the top bar wrapping instead of overflowing. Loads last so it wins the
   769–900 overlap where the desktop offset would otherwise leave an empty 248px gap. */
@media (max-width: 900px) {
  /* Top bar spans the full viewport width — no sidebar offset, allowed to wrap. */
  #topbar {
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    transition: none !important;
  }
  /* Content fills the viewport; pad below the REAL (JS-measured) bar height so a
     wrapped bar never hides content. Kills the leftover 248px desktop margin. */
  #main,
  #app-sidebar[data-collapsed="1"] ~ #main,
  body:has(#app-sidebar[data-collapsed="1"]) #main {
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding-top: var(--topbar-h, 60px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #main, #content { min-width: 0 !important; overflow-x: hidden; }

  /* Top-bar zones shrink/wrap instead of forcing horizontal scroll. The search drops
     to its own full-width row so it stays usable; actions + utilities sit on top. */
  .tb-zone--brand  { flex: 0 0 auto !important; min-width: 0 !important; }
  .tb-zone--user   { flex: 1 1 auto !important; min-width: 0 !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
  .tb-zone--center { flex: 1 1 100% !important; order: 5 !important; min-width: 0 !important; }
  .tb-search       { width: 100% !important; max-width: none !important; justify-content: flex-start !important; padding: 0 12px !important; }
  .tb-search-ph, .tb-search-kbd { display: inline !important; }
  .tb-context      { flex-wrap: wrap !important; }
}

/* ═══════════════ DIVIDER ALIGNMENT (top bar ↔ sidebar header) ═══════════════
   The top bar and the sidebar's logo header must be the EXACT same height so
   their bottom borders form one continuous horizontal line where they meet.
   Both are pinned to a SINGLE token here (this file loads last → wins), so a
   future top-bar tweak (icons, online pill, reorder…) can't desync them again.
   Expanded state only — the collapsed rail header intentionally stacks the logo
   + collapse button and is taller, so it's left out of the lock. */
:root { --olv-headbar-h: 60px; }
@media (min-width: 769px) {
  #topbar {
    height: var(--olv-headbar-h) !important;
    min-height: var(--olv-headbar-h) !important;
    box-sizing: border-box !important;
  }
  #app-sidebar:not([data-collapsed="1"]) .sb2-head {
    height: var(--olv-headbar-h) !important;
    min-height: var(--olv-headbar-h) !important;
    box-sizing: border-box !important;
  }
}

/* ═══ Collapsed-rail divider — GUARANTEED at the shared 60px line ═══
   Stacking the logo + collapse chevron makes the collapsed header taller than
   60px, so a flow border sits too low. Instead we draw the divider as an ABSOLUTE
   1px line on the fixed sidebar, pinned to --olv-headbar-h — it lands at exactly
   that Y (= the top bar's bottom border) no matter how tall the header content is.
   Flow borders on the header/logo row are removed so there's a single clean line. */
@media (min-width: 769px) {
  #app-sidebar[data-collapsed="1"]::after {
    content: "";
    position: absolute;
    top: var(--olv-headbar-h, 60px);
    inset-inline: 0;
    height: 0;
    border-top: 1px solid var(--bz-line) !important;
    pointer-events: none;
    z-index: 2;
  }
  #app-sidebar[data-collapsed="1"] .sb2-head,
  #app-sidebar[data-collapsed="1"] .sb2-brand { border-bottom: 0 !important; }
}

/* ═══ Mobile: «تاريخ» + «عميل جديد» row → full width, buttons on the LEFT ═══
   The ≤900 rule above pins .tb-zone--brand to `flex:0 0 auto` (content width), so
   it hugs its buttons at the row START (= RIGHT in RTL) and justify-content has no
   free space to act on. Here (≤768, loads last → wins) we make the zone span the
   full row so `justify-content: flex-end` packs the buttons to the main-END, which
   in this RTL layout is the visual LEFT edge. Desktop (≥901) is untouched. */
@media (max-width: 768px) {
  .tb-zone--brand {
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: flex-end !important;  /* RTL flex-end = visual LEFT */
  }
}

/* ═══ Collapsed rail: trim side padding so the logo can grow ═══
   The 10px symmetric side padding capped the content area at 52px. Reducing it to
   5px (content ≈62px) lets the collapsed logo grow to 58px and still fit cleanly.
   The logo is centered in the 72px rail, so its gap to each edge is (72−58)/2 ≈ 7px
   regardless of padding — this change only buys room, it doesn't shift centering.
   Top/bottom padding and the absolute 60px divider line are untouched. Desktop only. */
@media (min-width: 769px) {
  #app-sidebar[data-collapsed="1"].app-sidebar { padding-inline: 5px !important; }
}

/* ─── Internal chat redesign (v2): header weight + cohesive warm sidebar ───
   Section D / hero rules above force .schat-header white and .schat-section
   white with !important. Keep the header white but give it clear separation
   from the warm message area (border + soft shadow). Make the sidebar SECTION
   containers transparent (higher specificity than the flat white rule) so the
   sidebar's warm olive gradient reads as one cohesive panel. */
.schat-header {
  border-bottom: 1px solid rgba(11,30,18,.07) !important;
  box-shadow: 0 1px 0 rgba(11,30,18,.05), 0 3px 10px rgba(11,30,18,.03) !important;
}
.schat-sidebar .schat-section { background: transparent !important; }

/* ── Multi-order switcher in the customer-detail invoice aside ──
   Lets a customer's separate orders each be opened/featured (the clicked
   worklist row opens its own order, not just the latest). */
.cust-order-switcher {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.cust-order-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid rgba(11,30,18,.10);
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.cust-order-tab:hover {
  border-color: rgba(21,128,61,.35);
  background: rgba(21,128,61,.05);
}
.cust-order-tab.is-active {
  border-color: #15803d;
  background: rgba(21,128,61,.10);
  color: #14532d;
  box-shadow: inset 2px 0 0 #15803d;
}
.cust-order-tab-total {
  margin-inline-start: auto;
  font-weight: 800;
  color: #166534;
  font-size: 12px;
}

/* ═══════════════════ Mobile data tables → stacked cards ═══════════════════
   Below 768px (the app breakpoint) every .tbl table row becomes a label:value
   card. Column headers move into each cell via data-label (set in the render
   fns); the primary field is the card title (.mob-card-title); the action
   icons (.mob-card-actions) and bulk checkbox (.mob-card-check) sit in the
   card header. Class-driven (NOT nth-child) so it is table-agnostic and shows
   ALL fields. Lives here, last in the cascade, so it beats bosta's own global
   `.tbl td {…!important}` rules above. Desktop (≥769px) is completely untouched. */
@media (max-width: 768px) {
  /* strip desktop table chrome + the horizontal scroll wrapper.
     CRITICAL (vertical-scroll fix): the desktop rule
       .tbl-wrap { max-height: calc(100vh - 220px); overflow-y: auto }  (style-premium.css:93)
     caps the wrapper at ~viewport height for the sticky-header desktop scroll. On mobile the
     rows become full-height cards and the PAGE scrolls, so that cap — together with the card
     shells' own `overflow:hidden` (style.css `.card`, bosta `.ord-card`) — clipped the list and
     TRAPPED vertical scroll. Remove the cap + the clip so the list grows and #content scrolls. */
  .tbl-wrap, .card > .tbl-wrap {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .card:has(.tbl),
  .cust-table-card, .ord-card, .card.tbl-wrap {
    overflow: visible !important;
    max-height: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* Make #content an explicitly-bounded scroll container (its documented role:
     "#content is the scroll area"). html/body are height:100%, so the document root
     can't reliably scroll on mobile. Cap the #app→#main flex chain to the viewport
     so #content (flex item, min-height:0 → may shrink below content) becomes the
     scroller and the card list scrolls down to the pagination. A bare height on
     #content is ignored because style.css gives it flex:1 (flex-basis:0), so we bound
     the parents instead. dvh tracks the iOS dynamic toolbar; vh is the fallback. */
  #app, #main {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
  }
  #content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tbl thead, .tbl-compact thead, .ord-tbl thead { display: none !important; }   /* labels move into cells */
  .tbl, .tbl tbody { display: block !important; width: 100% !important; }

  /* ═══ row → CARD (one shared style for every mobile data-table) ═══ */
  .tbl tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 12px !important; row-gap: 0 !important;
    background: #fff !important;
    border: 1px solid var(--bz-line, #e6ebe3) !important;
    border-radius: 16px !important;
    padding: 6px 16px 8px !important;
    margin: 0 2px 12px !important;                 /* 2px side breathing room → no edge clipping */
    box-shadow: 0 1px 2px rgba(11,30,18,.05), 0 6px 16px rgba(11,30,18,.05) !important;
  }
  .tbl tbody tr:active { border-color: rgba(21,128,61,.35) !important; }
  /* The desktop zebra/hover tints (`.tbl-compact tbody tr.cust-row:nth-child(even) td`,
     `.ord-row:nth-child(even) td`, `…:hover td`) leak into the mobile cards as stray pale
     grey/green rectangles behind the field values. They outrank a plain `.tbl tbody td`
     (specificity 0,3,3 vs 0,1,2), so we kill them by matching the SAME selectors here — this
     block loads later in the file, so at equal specificity `transparent` wins. Only the CELL/row
     background is cleared; the real chips (status pill, Shopify badge, الموظف avatar chip) are
     child spans and keep their own styling. Scoped to the mobile breakpoint only → desktop
     table keeps its green header + zebra. */
  .tbl tbody td,
  .tbl tbody tr td,
  .tbl tbody tr:nth-child(even) td,
  .tbl tbody tr:hover td,
  .tbl tbody tr:nth-child(even):hover td,
  .tbl-compact tbody tr.cust-row td,
  .tbl-compact tbody tr.cust-row:nth-child(even) td,
  .tbl-compact tbody tr.cust-row:hover td,
  .tbl-compact tbody tr.cust-row:nth-child(even):hover td,
  .ord-tbl tbody tr.ord-row td,
  .ord-row td,
  .ord-row:nth-child(even) td,
  .ord-row:hover td,
  .ord-row:nth-child(even):hover td { background: transparent !important; }

  /* ═══ each cell → a "LABEL : value" row — fixed label column, value aligned to the end ═══
     Float the label (a flow-root td contains the float); the value flows in the remaining
     column at its NATURAL size (pills/inputs don't stretch) and is end-aligned. This avoids
     the flex min-content per-word wrapping and the full-width-pill stretching of a flex row. */
  .tbl tbody td {
    flex: 0 0 100% !important;
    display: flow-root !important;
    width: 100% !important;
    border: 0 !important;
    padding: 9px 0 !important;
    margin: 0 !important;
    text-align: end !important;                     /* value → inline-end (left in RTL) */
    font-size: 13px !important; line-height: 1.6 !important;
    font-weight: 600 !important;
    color: var(--bz-ink, #1f2937) !important;       /* value = strong ink */
    background: transparent !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;           /* wrap long words (addresses), not per-char */
    word-break: normal !important;
    min-width: 0 !important;
  }
  /* subtle divider above every field row (separates fields + the header from fields) */
  .tbl tbody td[data-label] { border-top: 1px solid var(--bz-line-soft, #eef1ec) !important; }
  .tbl tbody td[data-label]::before {
    content: attr(data-label);
    float: inline-start !important;                 /* label → inline-start (right in RTL) */
    width: 33% !important;
    margin-inline-end: 10px !important;
    font-weight: 600 !important;
    color: var(--bz-muted, #8a93a3) !important;     /* label = muted gray, fixed column */
    font-size: 12px !important;
    text-align: start !important;
    line-height: 1.6 !important;
  }
  /* keep inline value chunks (badges + qty) on the value side, naturally sized */
  .tbl tbody td[data-label] > * { max-width: 100% !important; vertical-align: middle; }
  /* hide a row entirely when its value is empty (no dangling "label :") */
  .tbl tbody td:empty { display: none !important; }
  .tbl tbody td.mob-hide { display: flex !important; }   /* show all fields on the card */

  /* ── HEADER ROW: title (name / waybill) + selection checkbox at the inline-end ── */
  .tbl tbody td.mob-card-title {
    order: -2; flex: 1 1 0 !important; min-width: 0 !important;
    display: block !important;
    padding: 6px 0 8px !important; border: 0 !important;
    font-size: 16px !important; font-weight: 800 !important; line-height: 1.25 !important;
    color: var(--bz-emerald-deep, #14532d) !important;
  }
  .tbl tbody td.mob-card-title::before { content: none !important; }
  .tbl tbody td.mob-card-check {
    order: -1; flex: 0 0 auto !important; width: auto !important;
    margin-inline-start: auto !important;           /* push checkbox to header inline-end */
    padding: 6px 0 !important; border: 0 !important;
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
  }
  .tbl tbody td.mob-card-check::before { content: none !important; }
  .tbl tbody td.mob-card-check input { width: 20px !important; height: 20px !important; }

  /* ── ACTION ICONS: their own clean footer row, BARE (no filled box) ── */
  .tbl tbody td.mob-card-actions {
    order: 9; flex: 1 1 100% !important; width: 100% !important;
    display: flex !important; align-items: center !important;
    justify-content: flex-start !important; gap: 4px !important;
    margin-top: 4px !important; padding: 8px 0 2px !important;
    border-top: 1px solid var(--bz-line-soft, #eef1ec) !important;
    background: transparent !important; box-shadow: none !important;
  }
  .tbl tbody td.mob-card-actions::before { content: none !important; }
  /* strip the pale chip box + per-icon tints → bare dark icons, brand-green on tap */
  .tbl tbody td.mob-card-actions,
  .tbl tbody td.mob-card-actions .cust-actions {
    background: transparent !important; padding-inline: 0 !important; border-radius: 0 !important;
  }
  .tbl tbody td.mob-card-actions .cust-action,
  .tbl tbody td.mob-card-actions .cust-action--wa,
  .tbl tbody td.mob-card-actions .cust-action:nth-child(1),
  .tbl tbody td.mob-card-actions .cust-action:nth-child(3),
  .tbl tbody td.mob-card-actions .ord-action-btn,
  .tbl tbody td.mob-card-actions > a,
  .tbl tbody td.mob-card-actions > button {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: var(--bz-ink, #344054) !important;       /* dark resting, matches desktop bare style */
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    border-radius: 11px !important; transform: none !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    transition: color .15s ease, background-color .15s ease !important;
  }
  .tbl tbody td.mob-card-actions .cust-action svg,
  .tbl tbody td.mob-card-actions .ord-action-btn svg { width: 20px !important; height: 20px !important; }
  .tbl tbody td.mob-card-actions .cust-action:hover,
  .tbl tbody td.mob-card-actions .cust-action:active,
  .tbl tbody td.mob-card-actions .cust-action--wa:hover,
  .tbl tbody td.mob-card-actions .ord-action-btn:hover,
  .tbl tbody td.mob-card-actions > a:hover,
  .tbl tbody td.mob-card-actions > button:hover {
    color: var(--bz-emerald, #16a34a) !important;
    background: rgba(21,128,61,.09) !important;      /* faint round green tint on tap/hover */
  }

  /* chips/badges/controls keep their styling, just sit neatly on the value side */
  .tbl tbody td .status-pill, .tbl tbody td .ord-status-pill,
  .tbl tbody td .badge-source, .tbl tbody td .badge,
  .tbl tbody td .pkl-source-pill, .tbl tbody td .agent-chip,
  .tbl tbody td select, .tbl tbody td input { vertical-align: middle; max-width: 100%; }
  .tbl tbody td .pkl-cost-input { width: 110px !important; }
  .tbl tbody td select.pkl-status-select, .tbl tbody td .stSelect { width: auto !important; }
}

/* ─────────── iOS safe-area: keep the fixed top bar below the notch / status bar ───────────
   On mobile #topbar is position:fixed at top:0 (bosta sec. above), so on notched iPhones it
   rode UP into the status bar, colliding with the clock / battery / signal. Pad the bar's TOP
   by env(safe-area-inset-top) so its content sits BELOW the status bar; the bar's own #fff
   background fills that inset strip, so the status-bar zone matches the header (no mismatched
   band). #main's top offset grows by the same inset so page content still clears the now-taller
   bar (bosta hardcodes #main padding-top:60px on mobile, so it must be bumped here too).
   env() resolves to 0 on devices without insets (desktop / Android / non-notch), so this is a
   no-op there. constant() is the iOS 11.0–11.2 fallback (declared first, then overridden by env). */
@media (max-width: 768px) {
  #topbar {
    /* keep the existing 8px 12px mobile padding; add the safe-area inset on top */
    padding-top: calc(8px + constant(safe-area-inset-top)) !important;
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    padding-bottom: 8px !important;
    padding-inline: 12px !important;
  }
  /* Offset the scroll content by the toolbar's REAL rendered height (--topbar-h, measured by JS
     via offsetHeight on load/resize/ResizeObserver). A hardcoded 60px left content hidden behind
     the toolbar because the mobile toolbar WRAPS to 2 rows (icons row + full-width search row),
     so its real height is ~100px. --topbar-h tracks that automatically (and shrinks back to the
     1-row height on desktop). It ALSO already includes the topbar's safe-area top padding (set
     above), so the inset is accounted for — do NOT add env() again or it double-counts. The
     fallback (used only for the instant before the JS first runs) covers a 2-row bar + inset. */
  #main {
    padding-top: var(--topbar-h, calc(104px + constant(safe-area-inset-top))) !important;
    padding-top: var(--topbar-h, calc(104px + env(safe-area-inset-top))) !important;
  }
}

/* ─────────── iOS safe-area: keep the side-nav DRAWER header below the notch / status bar ───────────
   Same mechanism as the #topbar fix. The off-canvas sidebar (#app-sidebar) is position:fixed at
   top:0 on mobile (≤900px drawer), so on notched iPhones its brand header (.sb2-head — the
   "Olive System / نظام إدارة العملاء" logo + back arrow) rode UP into the status bar, colliding with
   the clock / signal / battery. Pad the DRAWER CONTAINER's top by the safe-area inset so its content
   starts below the status bar; padding sits inside the element's background, so the drawer's own
   background fills the inset strip (matches whatever the drawer bg is — no mismatched band). The
   60px .sb2-head keeps its height and simply shifts down. constant() is the iOS 11.0–11.2 fallback
   (declared first, then overridden by env()). env() = 0 on devices without insets (desktop / Android /
   non-notch) → no gap there. Only padding-top is set, so the sidebar's side/bottom padding is kept. */
@media (max-width: 900px) {
  #app-sidebar.app-sidebar {
    padding-top: constant(safe-area-inset-top) !important;
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ═══════════ Order invoice card (فاتورة طلب) — tidy action button row ═══════════ */
/* One consistent, evenly-spaced group: equal height, aligned icon+label, wraps
   cleanly to a second line on narrow/mobile widths instead of overflowing.
   Appended last so these win the cascade over the generic .receipt-btn rules above. */
.receipt-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: stretch !important;
}
.receipt-footer .receipt-btn {
  flex: 1 1 auto !important;
  min-width: 92px;
  min-height: 34px;           /* stays tappable on mobile */
  height: auto !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap;
  line-height: 1;
}
/* Subtle destructive — إلغاء الشحن (red text + outline, not a loud red fill). */
.receipt-footer .receipt-btn--danger {
  background: #fff !important;
  border: 1px solid #fda29b !important;
  color: #b42318 !important;
  box-shadow: var(--bz-shadow-sm) !important;
}
.receipt-footer .receipt-btn--danger:hover {
  background: #fef2f2 !important;
  border-color: #f97066 !important;
  color: #b42318 !important;
}
/* Cancelled-status pill — muted red, same size as the rest (disabled indicator). */
.receipt-footer .receipt-btn--cancelled {
  background: #fee2e2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  box-shadow: none !important;
  cursor: default;
}