/* ═══════════════════════════════════════════════════════════════
   OLIVE CRM — PREMIUM BUSINESS-CLASS THEME
   Loaded after style.css and style-fx.css to override and elevate.
   ═══════════════════════════════════════════════════════════════ */

/* English mode → flip the whole app to left-to-right (overrides the
   base `html, body { direction: rtl }`). Arabic data still renders
   right-to-left within text runs via the browser's bidi algorithm. */
body.lang-en { direction: ltr; }

/* English (LTR): the sidebar lives on the LEFT (it's position:fixed right:0 in RTL) */
body.lang-en .app-sidebar {
  right: auto;
  left: 0;
  box-shadow: 2px 0 24px rgba(11, 30, 18, .18);
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, .04);
}
body.lang-en #main {
  margin-right: 0 !important;
  margin-left: var(--sb-w-expanded) !important;
}
body.lang-en .app-sidebar[data-collapsed="1"] ~ #main,
body.lang-en:has(.app-sidebar[data-collapsed="1"]) #main {
  margin-right: 0 !important;
  margin-left: var(--sb-w-collapsed) !important;
}
@media (max-width: 900px) {
  body.lang-en .app-sidebar {
    left: 0; right: auto;
    transform: translateX(-110%);            /* hidden off-screen to the left */
    box-shadow: 8px 0 32px rgba(0, 0, 0, .45);
  }
  body.lang-en .app-sidebar.mobile-open { transform: translateX(0); }
  body.lang-en #main,
  body.lang-en:has(.app-sidebar[data-collapsed="1"]) #main { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Inventory mode: "back to System" item in the sidebar */
.sb2-item--back {
  color: #86efac !important;
  font-weight: 800;
  border: 1px solid rgba(134, 239, 172, .25);
  border-radius: 10px;
  margin-bottom: 6px;
}
.sb2-item--back:hover { background: rgba(134, 239, 172, .12) !important; color: #bbf7d0 !important; }

/* ─── Refined design tokens (Light theme) ─── */
:root {
  --bz-emerald:        #0b3d20;
  --bz-emerald-deep:   #052e16;
  --bz-emerald-light:  #14532d;
  --bz-leaf:           #16a34a;
  --bz-leaf-soft:      #22c55e;
  --bz-gold:           #b8862b;
  --bz-gold-soft:      #d6a84a;
  --bz-cream:          #fdfaf3;
  --bz-bg:             #eef1ea;      /* slightly darker — more contrast against white cards */
  --bz-bg-pattern:     #e7ebe2;
  --bz-card:           #ffffff;
  --bz-card-hover:     #fdfdfb;
  --bz-ink:            #0c1c14;       /* deeper text */
  --bz-ink-soft:       #334155;
  --bz-muted:          #64748b;
  --bz-line:           #d8ddd2;       /* stronger borders */
  --bz-line-soft:      #e8ecdf;
  --bz-danger:         #dc2626;
  --bz-danger-soft:    #fee2e2;
  --bz-warning:        #d97706;
  --bz-warning-soft:   #fef3c7;
  /* Shadow scale — softer but sharper */
  --bz-shadow-xs:      0 1px 2px rgba(11,30,18,.06);
  --bz-shadow-sm:      0 2px 4px rgba(11,30,18,.06), 0 1px 2px rgba(11,30,18,.04);
  --bz-shadow-md:      0 6px 16px rgba(11,30,18,.08), 0 2px 4px rgba(11,30,18,.05);
  --bz-shadow-lg:      0 16px 40px rgba(11,30,18,.12), 0 4px 8px rgba(11,30,18,.06);
  --bz-shadow-xl:      0 32px 80px rgba(11,30,18,.18), 0 8px 16px rgba(11,30,18,.08);
  /* Radius scale */
  --bz-radius-sm:      8px;
  --bz-radius:         10px;
  --bz-radius-lg:      14px;
  --bz-radius-xl:      18px;
  --bz-radius-2xl:     24px;
  /* Spacing */
  --sb-w-expanded:     248px;
  --sb-w-collapsed:    68px;
  --topbar-h:          60px;
}

/* ─── Dark theme ─── */

/* ─── Sticky table headers + sortable columns ─── */
.tbl-wrap, .card.tbl-wrap, .card > .tbl-wrap {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
table thead { position: sticky; top: 0; z-index: 2; }
table thead th {
  background: var(--bz-line-soft) !important;
  user-select: none;
}
table thead th.sortable {
  cursor: pointer;
  transition: background .15s ease;
}
table thead th.sortable:hover {
  background: rgba(34,197,94,.08) !important;
}
table thead th.sortable::after {
  content: ' ⇅';
  opacity: .35;
  font-size: 10px;
  margin-right: 4px;
}
table thead th.sort-asc::after { content: ' ↑'; opacity: 1; color: var(--bz-leaf); }
table thead th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--bz-leaf); }

@media (max-width: 768px) {
  .tbl-wrap { max-height: none; }
  table thead { position: static; }
}

/* Theme toggle button */
.fx-theme-toggle {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--bz-line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  transition: all .25s ease;
  flex-shrink: 0;
}
.fx-theme-toggle:hover {
  background: var(--bz-card);
  border-color: rgba(34,197,94,.4);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .fx-theme-toggle { width: 34px; height: 34px; }
}

/* ─── Reset & Body ─── */
html, body {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
  background: var(--bz-bg) !important;
  color: var(--bz-ink) !important;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* Old sidebar fully removed from HTML — keep menu-btn hidden in case any legacy view re-adds it */
#menu-btn { display: none !important; }
.overlay { display: none !important; }
/* New sidebar layout: main shifts left of sidebar (RTL = margin-right) */
#main { margin-right: var(--sb-w-expanded) !important; width: auto !important; transition: margin-right .25s cubic-bezier(.4,0,.2,1); }
.app-sidebar[data-collapsed="1"] ~ #main,
body:has(.app-sidebar[data-collapsed="1"]) #main { margin-right: var(--sb-w-collapsed) !important; }

/* ═══════════════ TOPBAR — Premium glass header ═══════════════ */
#topbar {
  height: auto !important;
  min-height: 64px;
  padding: 10px 24px !important;
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 8px 24px rgba(15,23,42,.04) !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}
@media (max-width: 768px) {
  #topbar {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    min-height: 52px;
  }
  #pill-nav-row {
    order: 99 !important;
    flex-basis: 100% !important;
    margin: 4px -12px 0 !important;
    padding: 8px 12px !important;
    border-top: 1px solid var(--bz-line) !important;
    background: rgba(255,255,255,.6) !important;
  }
  .fx-brand { flex: 1; }
  .fx-pill-logo { display: none !important; }
}

/* Brand block — icon + text for topbar */
.fx-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  padding-left: 14px;
  border-left: 1px solid var(--bz-line);
  margin-left: 4px;
  transition: transform .2s ease;
}
.fx-brand:hover { transform: translateY(-1px); }
.fx-brand-logo {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(184,134,43,.3));
}
.fx-brand-text {
  display: flex !important;
  flex-direction: column;
  line-height: 1.05;
  align-items: flex-start;
}
.fx-brand-name {
  display: block !important;
  font-size: 15px;
  font-weight: 800;
  color: var(--bz-emerald-deep);
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fx-brand-tag {
  display: block !important;
  font-size: 9.5px;
  color: var(--bz-gold);
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.fx-brand-mark { display: none; }
@media (max-width: 768px) {
  .fx-brand { padding-left: 8px; border: 0; gap: 6px; }
  .fx-brand-logo { height: 34px; }
  .fx-brand-text { display: none !important; }
  #topbar { padding: 8px 12px !important; }
}

/* ═══════════════ PILL NAV — Premium ═══════════════ */
#pill-nav-row {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.fx-pill-list {
  background: linear-gradient(180deg, #0a2412, #0d3219) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  box-shadow:
    0 6px 20px rgba(11,61,32,.18),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
  gap: 0 !important;
}
.fx-pill {
  padding: 0 14px !important;
  height: 34px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.78) !important;
  letter-spacing: 0 !important;
}
.fx-pill:hover { color: #fff !important; }
.fx-pill::before {
  background: linear-gradient(135deg, var(--bz-leaf), var(--bz-leaf-soft)) !important;
}
.fx-pill.active {
  background: linear-gradient(135deg, var(--bz-leaf), var(--bz-leaf-soft)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(22,163,74,.4) !important;
}
.fx-pill.active::after { display: none !important; }
.fx-pill-logo {
  background: linear-gradient(135deg, var(--bz-gold), var(--bz-gold-soft)) !important;
  width: 38px !important; height: 38px !important;
  box-shadow: 0 4px 14px rgba(184,134,43,.4) !important;
}
.fx-pill-back {
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf)) !important;
  box-shadow: 0 4px 12px rgba(11,61,32,.4) !important;
}

/* ═══════════════ TOPBAR ACTIONS (right side) ═══════════════ */
.fx-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fx-wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
  white-space: nowrap;
  transition: all .2s ease;
}
.fx-wa-chip:hover { transform: translateY(-1px); box-shadow: var(--bz-shadow-sm); }
.fx-wa-chip.connected { background: #f0fdf4; color: #14532d; border-color: rgba(22,163,74,.3); }
.fx-wa-chip.disconnected { background: #fef2f2; color: #991b1b; border-color: rgba(239,68,68,.3); }
.fx-wa-dot { width: 8px; height: 8px; border-radius: 50%; }
.fx-wa-chip.connected .fx-wa-dot {
  background: var(--bz-leaf);
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: wa-pulse 2s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.fx-wa-chip.disconnected .fx-wa-dot { background: #ef4444; }

.fx-user-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--bz-cream);
  border: 1px solid var(--bz-line);
  border-radius: 999px;
  cursor: default;
}
.fx-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf));
  box-shadow: var(--bz-shadow-xs);
}
.fx-user-info { display: flex; flex-direction: column; line-height: 1.15; }
.fx-user-name { font-size: 12px; font-weight: 700; color: var(--bz-ink); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-user-role { font-size: 10px; color: var(--bz-muted); font-weight: 600; }
.fx-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(239,68,68,.2);
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s ease;
  flex-shrink: 0;
}
.fx-logout-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220,38,38,.3);
}
@media (max-width: 768px) {
  .fx-user-info, .fx-wa-text { display: none; }
  .fx-user-card { padding: 4px; border: 0; background: transparent; }
  .fx-wa-chip { padding: 6px; }
  .fx-logout-btn { width: 30px; height: 30px; font-size: 13px; }
  .fx-topbar-actions { gap: 4px; }
}

/* ═══════════════ MAIN BACKGROUND — Olive branch (subtle) ─── */
body {
  /* Match #main's olive layer exactly (same image/overlay/position/attachment)
     so the inset #main panel has no visible edge — seamless background, no frame. */
  background:
    linear-gradient(rgba(248,244,236,.60), rgba(248,244,236,.60)),
    url('/bg-system.jpg') left 0 top 110px / cover no-repeat fixed !important;
}
#main {
  background: transparent !important;
  background-image: none !important;
}
#content { padding-top: 0 !important; }
.page {
  padding: 28px 32px;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .page { padding: 14px; }
}

/* ═══════════════ STAT CARDS — Premium ═══════════════ */
.stat-card {
  background: #fff !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: var(--bz-radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--bz-shadow-xs) !important;
  position: relative;
}
.stat-card::before { background: none !important; }
.stat-card::after { display: none !important; }
.stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--bz-shadow-md), 0 0 0 1px rgba(22,163,74,.15) !important;
  border-color: rgba(22,163,74,.25) !important;
}
.stat-icon {
  width: 48px !important; height: 48px !important;
  border-radius: 12px !important;
  box-shadow: var(--bz-shadow-xs);
}
.stat-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.5px;
}
.stat-label {
  font-size: 12px !important;
  color: var(--bz-muted) !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
}

/* ═══════════════ CARDS ═══════════════ */
.card {
  background: var(--bz-card) !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: var(--bz-radius-lg) !important;
  box-shadow: var(--bz-shadow-xs) !important;
}
.card:hover {
  border-color: var(--bz-line) !important;
  box-shadow: var(--bz-shadow-sm) !important;
  transform: none !important;
}

/* ═══════════════ BUTTONS — Refined ═══════════════ */
.btn {
  font-family: inherit;
  font-weight: 700 !important;
  border-radius: 10px !important;
  transition: all .2s ease !important;
  letter-spacing: 0;
}
.btn-primary {
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11,61,32,.2) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(11,61,32,.3), 0 0 16px rgba(22,163,74,.2) !important;
}
.btn-primary::before { display: none !important; }
.btn-ghost {
  background: #fff !important;
  border: 1px solid var(--bz-line) !important;
  color: var(--bz-ink-soft) !important;
}
.btn-ghost:hover {
  border-color: rgba(22,163,74,.4) !important;
  color: var(--bz-emerald-deep) !important;
  background: #f8fbf5 !important;
}
.btn-green {
  background: var(--bz-leaf) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ═══════════════ INPUTS ═══════════════ */
input, select, textarea {
  border: 1px solid var(--bz-line) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-family: inherit;
  font-size: 13px;
  background: #fff !important;
  color: var(--bz-ink);
  transition: all .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: 0 !important;
  border-color: var(--bz-leaf) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
  transform: none !important;
}
.form-group label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--bz-ink-soft) !important;
  margin-bottom: 5px !important;
}

/* ═══════════════ TABLES ═══════════════ */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table thead th {
  background: var(--bz-line-soft) !important;
  color: var(--bz-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px !important;
  border-bottom: 1px solid var(--bz-line) !important;
  text-align: right;
}
table tbody td {
  padding: 12px !important;
  border-bottom: 1px solid var(--bz-line-soft) !important;
  font-size: 13px;
}
table tbody tr {
  transition: background .15s ease !important;
}
table tbody tr:hover {
  background: rgba(22,163,74,.04) !important;
  transform: none !important;
}

/* ═══════════════ BADGES ═══════════════ */
.badge {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0;
}

/* ═══════════════ MODAL ═══════════════ */
.modal-overlay {
  background: rgba(11,61,32,.4) !important;
  backdrop-filter: blur(10px) !important;
}
.modal-box {
  border-radius: var(--bz-radius-xl) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1) inset !important;
  border: 0 !important;
}
.modal-hdr {
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-emerald)) !important;
  color: #fff !important;
  border: 0 !important;
}
.modal-hdr h3 { color: #fff !important; }

/* ═══════════════ PAGE HEADER ═══════════════ */
.page-header {
  margin-bottom: 24px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bz-line);
}
.page-header h1, .page-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--bz-emerald-deep) !important;
  letter-spacing: -0.4px;
}
.page-header p {
  color: var(--bz-muted);
  font-size: 13px;
}

/* ═══════════════ STATUS BADGES (status pills) ─── */
.badge.pulse { animation: bz-pulse 1.8s ease-in-out infinite; }
@keyframes bz-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .7; }
}

/* ═══════════════ SCROLLBAR ─── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(11,61,32,.2);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(11,61,32,.4); }

/* ═══════════════ TYPOGRAPHY HELPERS ─── */
h1, h2, h3 { letter-spacing: -0.3px; }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

/* ═══════════════ LOGIN SCREEN v2 — World-class ═══════════════ */
/* Hide login completely when .hidden class is set after login */
#login-screen.hidden { display: none !important; }

#login-screen {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    /* Heavy darkening on the top 30% of screen — kills the stem artifact regardless of where it falls */
    linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.85) 15%, rgba(0,0,0,.45) 25%, transparent 35%),
    /* Soft base green tint — keeps branch visible in the middle/bottom */
    linear-gradient(135deg, rgba(5,46,22,.32) 0%, rgba(11,61,32,.18) 50%, rgba(2,10,6,.50) 100%),
    url('/bg-olive.png') center center / cover no-repeat !important;
  background-attachment: fixed !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
#login-screen::before,
#login-screen::after { display: none !important; }

/* Animated orbs — disabled when olive bg image is used */
.login-bg-orbs { display: none; }
.login-bg-orbs--legacy {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.orb-1 { width: 480px; height: 480px; background: #16a34a; top: -100px; right: -60px; animation: orb-1 18s ease-in-out infinite; }
.orb-2 { width: 540px; height: 540px; background: #b8862b; bottom: -120px; left: -100px; animation: orb-2 22s ease-in-out infinite; }
.orb-3 { width: 360px; height: 360px; background: #22c55e; top: 40%; left: 30%; animation: orb-3 26s ease-in-out infinite; opacity: 0.35; }
.orb-4 { width: 260px; height: 260px; background: #84cc16; top: 15%; left: 50%; animation: orb-4 20s ease-in-out infinite; opacity: 0.3; }
@keyframes orb-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px, 60px) scale(1.1); } }
@keyframes orb-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.15); } }
@keyframes orb-3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(80px, -50px); } }
@keyframes orb-4 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-60px, 40px); } }

/* Subtle grid — hidden too to keep the olive image clean */
.login-bg-grid { display: none; }

/* Container — 2 columns (legacy) */
.login-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  padding: 24px;
  align-items: stretch;
  min-height: 100vh;
}

/* Centered single-column layout (active variant) */
.login-container.login-container--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 24px;
}

/* Lock zoom on the login screen only */
#login-screen {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
}
#login-screen, #login-screen * {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#login-screen input,
#login-screen textarea {
  -webkit-user-select: text;
  user-select: text;
  /* Prevent iOS auto-zoom on focus by ensuring 16px min font */
  font-size: 16px !important;
}

/* Brand panel — logo on top centered, content below also centered */
.login-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 48px 32px;
  color: #fff;
  position: relative;
}
.lbp-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  width: 100%;
}
.lbp-logo-full {
  display: inline-flex;
  text-decoration: none;
  transition: transform .3s ease;
}
.lbp-logo-full:hover { transform: translateY(-2px); }
.lbp-logo-full img {
  max-width: 170px;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.45));
}
/* Legacy logo classes kept for safety — no longer used */
.lbp-logo, .lbp-logo-mark, .lbp-logo-name, .lbp-logo-tag { display: none; }

.lbp-middle {
  margin-top: 0;
  width: 100%;
}
.lbp-headline {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: -0.7px;
  text-align: center;
}
.lbp-gradient-text {
  background: linear-gradient(135deg, #84cc16 0%, #fbbf24 50%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
.lbp-subline {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.7);
  max-width: 460px;
  margin: 0 auto 32px;
  text-align: center;
}
.lbp-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}
.lbp-feature {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: all .3s ease;
  text-align: right;
}
.lbp-feature:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-2px);
}
.lbp-feature-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
}
.lbp-feature-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
.lbp-feature-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}

.lbp-bottom {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.lbp-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
}
.lbp-trust-stars {
  color: #fbbf24;
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(251,191,36,.5);
}
.lbp-trust-text {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  font-weight: 600;
}

/* Form panel — centered below brand */
.login-form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
  margin-top: 0;
  gap: 22px;
}

/* Brand above the card */
.lcv2-brand-above {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  margin-bottom: 22px;
  font-family: 'Cairo', sans-serif;
  position: relative;
  z-index: 3;
  animation: lcv2-rise .7s cubic-bezier(.2,.9,.2,1) both;
}
.lcv2-brand-above-logo {
  width: 130px;
  max-width: 40vw;
  height: auto;
  display: block;
  margin-bottom: 14px;
  filter: drop-shadow(0 14px 36px rgba(0,0,0,.5)) drop-shadow(0 4px 12px rgba(184,134,43,.25));
}
.lcv2-brand-name {
  font-family: 'Cairo', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  line-height: 1.1;
}
.lcv2-brand-edition {
  font-family: 'Cairo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #d6a84a;
  text-transform: uppercase;
  margin-top: 2px;
}
.login-card-v2 {
  width: 100%;
  max-width: 460px;
  /* Heavily glass — MORE transparent, raised/3D feel */
  background: linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(132,204,22,.06) 50%, rgba(5,46,22,.14) 100%);
  backdrop-filter: blur(36px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(36px) saturate(1.8) brightness(1.05);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 26px;
  padding: 42px 36px;
  /* Raised: bright top edge + deep bottom shadow */
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,         /* top highlight */
    0 0 0 1px rgba(255,255,255,.06) inset,       /* outline */
    0 -1px 0 rgba(0,0,0,.18) inset,              /* bottom darken */
    0 18px 40px -8px rgba(0,0,0,.35),            /* close shadow */
    0 50px 90px -20px rgba(0,0,0,.55),           /* far shadow for depth */
    0 0 60px rgba(34,197,94,.08);                /* soft green glow */
  position: relative;
  animation: lcv2-rise .7s cubic-bezier(.2,.9,.2,1) both;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Top sheen reflection */
.login-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 70% at 30% -15%, rgba(255,255,255,.22), transparent 55%);
  border-radius: inherit;
  z-index: 0;
}
/* Subtle inner glow / depth */
.login-card-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.18) 100%);
  border-radius: inherit;
  z-index: 0;
}
.login-card-v2 > * { position: relative; z-index: 1; }
@keyframes lcv2-rise {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Legacy mobile brand inside card — not used; brand now sits above the card */
.lcv2-mobile-brand { display: none; }
.lcv2-mobile-logo { display: none; }

.lcv2-header { margin-bottom: 22px; text-align: center; }
.lcv2-title { display: none; }
.lcv2-subtitle {
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

.lcv2-form { display: flex; flex-direction: column; gap: 14px; }
.lcv2-field { display: flex; flex-direction: column; gap: 6px; }
.lcv2-field label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}
.lcv2-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.lcv2-input-icon {
  position: absolute;
  right: 14px;
  font-size: 15px;
  opacity: .75;
  pointer-events: none;
}
.lcv2-input-wrap input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 14px !important;
  font-size: 14px;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-family: inherit;
  transition: all .2s ease;
}
.lcv2-input-wrap input::placeholder { color: rgba(255,255,255,.5); }
.lcv2-input-wrap input:focus {
  border-color: #22c55e !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18) !important;
}
.lcv2-input-wrap:has(input:focus) .lcv2-input-icon { opacity: 1; }

.lcv2-error {
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.lcv2-submit {
  height: 52px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0b3d20 0%, #16a34a 50%, #22c55e 100%);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(11,61,32,.3), 0 0 0 1px rgba(255,255,255,.1) inset;
  transition: all .25s cubic-bezier(.2,.9,.2,1);
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}
.lcv2-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #16a34a, #84cc16);
  opacity: 0;
  transition: opacity .25s ease;
}
.lcv2-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(11,61,32,.4), 0 0 24px rgba(34,197,94,.3); }
.lcv2-submit:hover::before { opacity: 1; }
.lcv2-submit:active { transform: translateY(0); }
.lcv2-submit-text, .lcv2-submit-arrow {
  position: relative;
  z-index: 1;
}
.lcv2-submit-arrow {
  font-size: 18px;
  transition: transform .25s ease;
}
.lcv2-submit:hover .lcv2-submit-arrow { transform: translateX(-4px); }

.lcv2-demo {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.lcv2-demo-label {
  font-size: 11.5px;
  color: rgba(255,255,255,.7);
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}
.lcv2-demo-label code {
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', monospace;
  font-size: 11px;
}
.lcv2-demo-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.lcv2-demo-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s ease;
  text-align: right;
  font-family: inherit;
  color: #fff;
}
.lcv2-demo-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(34,197,94,.6);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(34,197,94,.2);
}
.lcv2-demo-avatar {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.lcv2-demo-name { font-size: 12px; font-weight: 800; color: #fff; }
.lcv2-demo-role { font-size: 10px; color: rgba(255,255,255,.6); }

.lcv2-footer {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.5);
  font-size: 10.5px;
  font-weight: 600;
}
.lcv2-dot {
  width: 3px;
  height: 3px;
  background: rgba(255,255,255,.4);
  border-radius: 50%;
}

/* Hide old login-card if present */
.login-card { display: none !important; }

/* ─── Mobile ─── */
@media (max-width: 900px) {
  .login-container {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .login-brand-panel { display: none; }
  .lcv2-mobile-brand { display: block; margin-bottom: 24px; }
  .login-form-panel { padding: 16px; min-height: 100vh; }
  .login-card-v2 { padding: 32px 24px; }
  .lcv2-title { font-size: 22px; }
}

/* ═══════════════ MICRO-INTERACTIONS ─── */
.fx-pill, .btn, .stat-card, .card, .fx-wa-chip, .fx-logout-btn {
  user-select: none;
}

/* Remove the noisy grid pattern from #main set by old style-fx */
#main { background-image: none !important; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — Live polish (notif bell, search palette, animations)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Live pulse dot ─── */
.live-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: live-pulse-ring 1.8s ease-in-out infinite;
}
@keyframes live-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ─── Topbar search trigger (Ctrl+K) ─── */
.fx-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--bz-line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--bz-muted);
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
}
.fx-search-trigger:hover {
  background: #fff;
  border-color: rgba(34,197,94,.4);
  color: var(--bz-ink);
}
.fx-search-kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid var(--bz-line);
  border-radius: 6px;
  color: var(--bz-muted);
}
@media (max-width: 768px) {
  .fx-search-trigger { padding: 7px; }
  .fx-search-text, .fx-search-kbd { display: none; }
}

/* ─── Notification bell ─── */
.fx-notif-btn {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--bz-line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: all .2s ease;
  flex-shrink: 0;
}
.fx-notif-btn:hover {
  background: #fff;
  border-color: rgba(34,197,94,.4);
  transform: translateY(-1px);
}
.fx-notif-badge {
  position: absolute;
  top: -4px; left: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(239,68,68,.4), 0 0 0 2px #fff;
  animation: badge-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
#topbar-notif { position: relative; }
.fx-notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--bz-line);
  border-radius: 14px;
  box-shadow: var(--bz-shadow-lg);
  z-index: 200;
  overflow: hidden;
  animation: dd-pop .2s cubic-bezier(.2,.9,.2,1);
}
@keyframes dd-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fx-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bz-line-soft);
  background: var(--bz-line-soft);
  font-size: 13px;
}
.fx-notif-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}
.fx-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.fx-notif-item:hover { background: rgba(34,197,94,.05); }
.fx-notif-item.unread {
  background: rgba(34,197,94,.05);
  position: relative;
}
.fx-notif-item.unread::before {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .fx-notif-btn { width: 34px; height: 34px; font-size: 14px; }
  .fx-notif-dropdown { left: auto; right: 0; width: 92vw; }
}
/* Phone — pin the notifications panel to the viewport so it can't overflow
   no matter where the bell sits (RTL/LTR, left or right of topbar). */
@media (max-width: 640px) {
  .fx-notif-dropdown {
    position: fixed;
    top: 64px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
  }
  .fx-notif-list { max-height: calc(100vh - 160px); }
}

/* ─── Command palette (Ctrl+K) ─── */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,46,22,.6);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
  animation: dd-pop .15s ease;
}
.cmd-palette {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  overflow: hidden;
  animation: dd-pop .2s cubic-bezier(.2,.9,.2,1);
}
.cmd-palette-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bz-line);
}
.cmd-palette-header input {
  flex: 1;
  border: 0 !important;
  font-size: 15px !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
}
.cmd-palette-header input:focus { box-shadow: none !important; }
.cmd-palette-header kbd {
  background: var(--bz-line-soft);
  border: 1px solid var(--bz-line);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--bz-muted);
}
.cmd-palette-results {
  max-height: 480px;
  overflow-y: auto;
  padding: 8px;
}
.cmd-palette-hint {
  text-align: center;
  padding: 40px 20px;
  color: var(--bz-muted);
  font-size: 13px;
}
.cmd-palette-group {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--bz-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 12px 6px;
}
.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.cmd-palette-item:hover { background: rgba(34,197,94,.08); }

/* ─── Row flash animation (on live updates) ─── */
.row-flash {
  animation: row-flash 1.6s ease-out;
}
@keyframes row-flash {
  0%   { background: rgba(34,197,94,.25) !important; }
  100% { background: transparent !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 1 — Dashboard hierarchy + compact cards
   ═══════════════════════════════════════════════════════════════ */

/* Dashboard header */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bz-line);
}
.dash-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--bz-emerald-deep);
  margin: 0;
  letter-spacing: -0.4px;
}
.dash-subtitle {
  font-size: 12.5px;
  color: var(--bz-muted);
  margin: 4px 0 0;
}

/* ─── Hero variant — polished card with icon avatar + decor ─── */
.dash-header--hero {
  position: relative;
  padding: 18px 20px;
  margin-bottom: 22px;
  border: 1px solid rgba(22,163,74,.18);
  border-bottom: 1px solid rgba(22,163,74,.18);
  border-radius: var(--bz-radius-lg);
  background:
    linear-gradient(135deg, rgba(22,163,74,.08) 0%, rgba(34,197,94,.04) 55%, rgba(255,255,255,.0) 100%),
    var(--bz-card);
  box-shadow: var(--bz-shadow-sm);
  overflow: hidden;
}

.dash-header-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
  opacity: .55;
}
.dash-header-blob--a {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(22,163,74,.32), transparent 70%);
  top: -60px;
  left: -40px;
}
.dash-header-blob--b {
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(34,197,94,.22), transparent 70%);
  bottom: -50px;
  left: 25%;
}
.dash-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.dash-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf));
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(22,163,74,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.dash-header-text { min-width: 0; }
.dash-greet {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bz-leaf);
  letter-spacing: .2px;
  margin-bottom: 2px;
  opacity: .92;
}
.dash-header--hero .dash-title { font-size: 24px; line-height: 1.15; }
.dash-header--hero .dash-subtitle { margin-top: 3px; font-size: 12.5px; }
.dash-header--hero .dash-actions { position: relative; z-index: 1; }

/* Today date pill */
.dash-today-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(22,163,74,.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bz-ink-soft);
  letter-spacing: .1px;
  white-space: nowrap;
}
.dash-today-pill svg { color: var(--bz-leaf); flex-shrink: 0; }

/* Mobile tweaks for hero header */
@media (max-width: 640px) {
  .dash-header--hero {
    padding: 14px;
    gap: 10px;
  }
  .dash-header-icon { width: 40px; height: 40px; border-radius: 10px; }
  .dash-header--hero .dash-title { font-size: 18px; }
  .dash-header--hero .dash-subtitle { font-size: 11.5px; }
  .dash-today-pill { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ORDERS PAGE — polished list with segmented tabs + customer rows
   ═══════════════════════════════════════════════════════════════════════ */
.ord-total-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf));
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(22,163,74,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.ord-total-pill svg { color: rgba(255,255,255,.85); }

/* Segmented status tabs */
.ord-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: rgba(15,23,42,.04);
  border-radius: 12px;
  border: 1px solid var(--bz-line);
  flex-wrap: wrap;
}

.ord-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bz-ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.ord-tab:hover { color: var(--bz-ink); background: rgba(255,255,255,.6); }

.ord-tab.is-active {
  background: var(--bz-card);
  color: var(--bz-ink);
  box-shadow: 0 2px 6px rgba(11,30,18,.10), 0 0 0 1px rgba(11,30,18,.04);
}
.ord-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ord-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: rgba(22,163,74,.12);
  color: var(--bz-leaf);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.ord-tab.is-active .ord-tab-count { background: var(--bz-leaf); color: #fff; }

/* Orders table card */
.ord-card { padding: 0 !important; overflow: hidden; border-radius: var(--bz-radius-lg); }
.ord-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.ord-tbl thead th {
  background: linear-gradient(180deg, rgba(21,128,61,.09), rgba(21,128,61,.035));
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bz-ink);
  letter-spacing: .1px;
  padding: 11px 16px;
  border-bottom: 1.5px solid rgba(21,128,61,.22);
  text-align: right;
}
/* Denser, intentional rows: tighter vertical rhythm + a crisp hairline divider. */
.ord-tbl tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid rgba(11,30,18,.06);
  font-size: 13px;
  vertical-align: middle;
}
/* Zebra striping — a whisper of brand green on alternating rows so the eye tracks across. */
.ord-row:nth-child(even) { background: rgba(21,128,61,.025); }
.ord-row { transition: background .12s ease; }
.ord-row:hover,
.ord-row:nth-child(even):hover { background: rgba(21,128,61,.07); }
.ord-row:last-child td { border-bottom: 0; }

/* Customer cell */
.ord-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.ord-avatar {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(11,30,18,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.ord-customer-info { min-width: 0; }
.ord-customer-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ord-customer-region {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--bz-muted);
  margin-top: 2px;
}
.ord-customer-region svg { color: var(--bz-leaf); flex-shrink: 0; }

/* Product / qty / total / date cells */
.ord-product { color: var(--bz-ink-soft); font-weight: 600; }
.ord-qty-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 9px;
  background: rgba(21,128,61,.08);
  color: #15803d;
  border: 1px solid rgba(21,128,61,.16);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ord-total {
  font-weight: 800;
  color: var(--bz-ink);
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ord-total small { font-weight: 600; color: var(--bz-muted); font-size: 11px; margin-right: 2px; }
.ord-date { color: var(--bz-muted); font-size: 12px; white-space: nowrap; }

/* Status pill with dot */
.ord-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.ord-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;            /* never let the flex row stretch the dot into a line */
}

/* Action cell */
.ord-actions-cell { width: 1%; white-space: nowrap; text-align: left; }
.ord-action-btn {
  width: 32px; height: 32px;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.18);
  color: var(--bz-leaf);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.ord-action-btn:hover {
  background: var(--bz-leaf);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(22,163,74,.32);
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .ord-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .ord-tab { white-space: nowrap; flex-shrink: 0; }
  .ord-tbl thead th,
  .ord-tbl tbody td { padding: 10px 12px; }
  .ord-avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
  .ord-total { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCTS PAGE — grid of cards w/ Shopify pill + best-seller medals
   ═══════════════════════════════════════════════════════════════════════ */
.prod-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(135deg, #5e8e3e, #95bf47); /* Shopify-ish green */
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(94,142,62,.32);
  transition: all .15s ease;
}
.prod-sync-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(94,142,62,.42); }
.prod-sync-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.prod-sync-btn svg { animation: none; }
.prod-sync-btn:disabled svg { animation: spin 1s linear infinite; }

/* Custom date+time range filter for products */
.prod-period-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
}
.prod-range-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.prod-range-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 220px;
}
.prod-range-field > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bz-ink-soft);
}
.prod-range-field > span svg { color: var(--bz-leaf); }
.prod-range-field input[type="datetime-local"] {
  height: 38px !important;
  padding: 0 12px !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 600;
  background: var(--bz-card) !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 10px !important;
  color: var(--bz-ink);
}
.prod-range-field input[type="datetime-local"]:focus {
  outline: 0;
  border-color: var(--bz-leaf) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

.prod-range-presets {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.prod-range-presets-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-muted);
}
.prod-quick-pill {
  padding: 4px 10px;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--bz-line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-ink-soft);
  cursor: pointer;
  transition: all .12s ease;
}
.prod-quick-pill:hover {
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.30);
  color: var(--bz-leaf);
}

.prod-period-info {
  font-size: 11.5px;
  color: var(--bz-muted);
  padding-top: 2px;
  border-top: 1px dashed rgba(11,30,18,.08);
  padding-top: 8px;
}
.prod-period-info strong { color: var(--bz-emerald-deep); }
@media (max-width: 640px) {
  .prod-range-field { min-width: 100%; }
}

/* Restock report button (header) */
.prod-restock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245,158,11,.32);
  transition: all .15s ease;
}
.prod-restock-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(245,158,11,.42); }

/* Restock report modal: filter + table */
.restock-filter {
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(15,23,42,.03);
  border: 1px solid var(--bz-line);
  border-radius: 12px;
}

.restock-filter-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ── Products-report stage selector (Ordered / Shipped / Delivered) ── */
.stage-seg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.stage-seg-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--bz-muted);
}
.stage-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(15,23,42,.05);
  border: 1px solid var(--bz-line);
  border-radius: 999px;
}
.stage-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bz-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.stage-seg-btn:hover { color: var(--bz-ink); }
.stage-seg-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #15803d, #4a7234);
  box-shadow: 0 2px 7px rgba(21,128,61,.30);
}
.stage-seg-btn.active svg { color: #fff; }

.restock-active-stage {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--bz-ink);
  background: rgba(21,128,61,.08);
  border: 1px solid rgba(21,128,61,.18);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.restock-active-stage-hint { color: var(--bz-muted); font-weight: 500; }
.restock-presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.restock-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--bz-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.restock-empty svg { opacity: .4; }

/* Restock modal — make it generously wide */
.modal-box.modal-wide:has(.restock-summary) { max-width: 920px !important; }

/* Stat cards row — compact so the table gets more space */
.restock-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.restock-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  transition: transform .15s ease;
}
.restock-stat:hover { transform: translateY(-1px); }
.restock-stat--hero {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(245,158,11,.30);
}
.restock-stat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.restock-stat-body { min-width: 0; flex: 1; }
.restock-stat-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--bz-ink);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restock-stat-val small { font-size: 11px; font-weight: 700; opacity: .65; margin-right: 2px; }
.restock-stat--hero .restock-stat-val { color: #fff; }
.restock-stat-lbl {
  font-size: 11px;
  color: var(--bz-muted);
  margin-top: 2px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restock-stat--hero .restock-stat-lbl { color: rgba(255,255,255,.9); }
@media (max-width: 720px) {
  .restock-summary { grid-template-columns: repeat(2, 1fr); }
}

/* Products table — let it grow naturally; the modal-box handles scrolling */
.restock-table-wrap {
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 12px;
  overflow: hidden;
}
.restock-tbl-v2 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.restock-tbl-v2 thead th {
  background: linear-gradient(180deg, rgba(22,163,74,.06), rgba(22,163,74,.02));
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bz-ink-soft);
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bz-line);
  text-align: right;
}
.restock-tbl-v2 thead th.num { text-align: center; }
.restock-tbl-v2 tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(11,30,18,.05);
  font-size: 13px;
  vertical-align: middle;
}
.restock-tbl-v2 tbody td.num { text-align: center; font-weight: 700; }
.restock-tbl-v2 tbody tr:hover { background: rgba(22,163,74,.04); }
.restock-tbl-v2 tbody tr:last-child td { border-bottom: 0; }

/* Rank badge */
.restock-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(15,23,42,.06);
  color: var(--bz-muted);
  font-weight: 800;
  font-size: 12px;
}
.restock-rank.is-top {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 2px 6px rgba(245,158,11,.4);
}

/* Product cell with thumbnail */
.restock-prod-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.restock-prod-img,
.restock-prod-img-fallback {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(22,163,74,.06);
}
.restock-prod-img-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bz-leaf);
  opacity: .7;
}
.restock-prod-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--bz-ink);
  line-height: 1.3;
}

/* Reorder qty pill */
.restock-qty-pill {
  display: inline-block;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(245,158,11,.20), rgba(245,158,11,.12));
  color: #b45309;
  border: 1px solid rgba(245,158,11,.40);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  min-width: 50px;
}

.restock-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.20);
  border-radius: 10px;
  font-size: 12.5px;
  color: #1e40af;
  line-height: 1.6;
}

/* Reorder badge inside product card */
.prod-reorder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
  border: 1px solid rgba(245,158,11,.30);
  border-radius: 10px;
}
.prod-reorder-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
}

.prod-reorder-qty {
  font-size: 16px;
  font-weight: 900;
  color: #b45309;
}
.prod-reorder-qty small { font-size: 10.5px; font-weight: 700; color: var(--bz-muted); margin-right: 2px; }

.prod-toolbar {
  margin-bottom: 14px;
}
.prod-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 12px;
  padding: 0 14px;
  height: 44px;
  max-width: 420px;
  color: var(--bz-muted);
}
.prod-search-wrap input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--bz-ink);
  height: 100%;
}
.prod-empty-search {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--bz-muted);
  padding: 48px 20px;
  font-size: 14px;
  font-weight: 600;
}
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.prod-card {
  position: relative;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all .18s ease;
}
.prod-card:hover {
  border-color: rgba(22,163,74,.3);
  box-shadow: 0 8px 22px rgba(11,30,18,.07);
  transform: translateY(-2px);
}
.prod-card.is-inactive { opacity: .55; }

.prod-medal {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bz-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 10px rgba(11,30,18,.18);
  z-index: 2;
}

.prod-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.prod-image {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(22,163,74,.06);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.prod-image img { width: 100%; height: 100%; object-fit: cover; }
.prod-image-placeholder { color: var(--bz-leaf); opacity: .55; }
.prod-card-info { flex: 1; min-width: 0; }
/* UI cleanup: the [class*="-card"] wildcard (style-bosta.css) frames these inner header
   blocks as raised boxes (bg + shadow). Flatten them — only the outer .prod-card is a card.
   Mirrors the jt-card reset. !important + descendant selector beat the wildcard. */
.prod-card .prod-card-head,
.prod-card .prod-card-info {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.prod-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-ink);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.prod-shopify-pill,
.prod-local-pill,
.prod-inactive-pill,
.prod-pieces-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.prod-shopify-pill { background: rgba(94,142,62,.14); color: #4a7234; }
.prod-local-pill { background: rgba(148,163,184,.16); color: #475569; }
.prod-inactive-pill { background: rgba(239,68,68,.12); color: #dc2626; }
.prod-pieces-pill { background: rgba(245,158,11,.14); color: #b45309; }

.prod-breakdown {
  font-size: 11px;
  color: var(--bz-muted);
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prod-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 4px;
  background: none;          /* UI cleanup: drop the tinted panel — numbers grouped by grid/spacing */
}
.prod-stat { text-align: center; }
.prod-stat-val {
  font-size: 16px;
  font-weight: 900;
  color: var(--bz-ink);
}
.prod-stat--rev .prod-stat-val { color: var(--bz-emerald-deep); }
.prod-stat-lbl {
  font-size: 10.5px;
  color: var(--bz-muted);
  margin-top: 2px;
  font-weight: 600;
}

.prod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 0;             /* UI cleanup: drop the divider line — keep padding for spacing */
}
.prod-price { font-size: 15px; font-weight: 800; color: var(--bz-leaf); }
.prod-price small { font-size: 10.5px; color: var(--bz-muted); font-weight: 600; }
.prod-actions { display: flex; gap: 6px; }
.prod-action-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--bz-line);
  background: var(--bz-card);
  color: var(--bz-ink-soft);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.prod-action-btn:hover { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.3); color: var(--bz-leaf); }
.prod-action-btn--danger:hover { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.3); color: #dc2626; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════
   PICK UP — shipping log table (filters + inline-editable cells)
   ═══════════════════════════════════════════════════════════════════════ */
.pkl-toolbar {
  display: grid;
  grid-template-columns: 1fr 150px 150px 190px;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
}
.pkl-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.pkl-search svg {
  position: absolute;
  right: 12px;
  color: var(--bz-muted);
  pointer-events: none;
}
.pkl-search input {
  width: 100%;
  height: 38px;
  padding: 0 36px 0 14px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
}
.pkl-search input:focus {
  outline: 0;
  border-color: var(--bz-leaf);
  box-shadow: var(--focus-ring);
}
.pkl-select {
  width: 100%;
  height: 38px !important;
  padding: 0 30px 0 14px !important;
  background: var(--bz-card) !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--bz-ink);
  cursor: pointer;
}
.pkl-select:focus { outline: 0; border-color: var(--bz-leaf) !important; }

/* Real-ship-date range filter (spans the full toolbar row under the selects) */
.pkl-daterange {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pkl-daterange-lbl { font-size: 12px; font-weight: 700; color: var(--bz-muted); }
.pkl-daterange-sep { color: var(--bz-muted); }
.pkl-date {
  height: 36px;
  padding: 0 10px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink);
  cursor: pointer;
}
.pkl-date:focus { outline: 0; border-color: var(--bz-leaf); box-shadow: var(--focus-ring); }
.pkl-date-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--bz-line); border-radius: 8px;
  color: var(--bz-muted); cursor: pointer;
}
.pkl-date-clear:hover { border-color: var(--bz-leaf); color: var(--bz-ink); }
.pkl-fallback-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #92400e;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: 10px;
  padding: 6px 12px;
  margin: -4px 0 12px;
}
.pkl-est { color: var(--bz-muted); font-weight: 700; cursor: help; }

/* Table-specific tweaks */
.pkl-tbl thead th { font-size: 11px; padding: 11px 12px; }
.pkl-tbl tbody td { padding: 10px 12px; font-size: 12.5px; vertical-align: middle; }

.pkl-tracking {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(15,23,42,.06);
  color: var(--bz-ink);
  border-radius: 6px;
  font-family: 'Cairo', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.pkl-product { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkl-product small.pkl-qty {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(22,163,74,.10);
  color: var(--bz-leaf);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  margin-right: 4px;
}

.pkl-cost-input {
  width: 90px;
  height: 30px;
  padding: 0 10px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  direction: ltr;
}
.pkl-cost-input:focus {
  outline: 0;
  border-color: var(--bz-leaf);
  background: rgba(22,163,74,.04);
}

.pkl-status-select {
  height: 28px;
  padding: 0 26px 0 10px;
  border: 1px solid;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  /* Size to content (not the narrow column). The global `select { width:100% }`
     rule was stretching this to fill its 11-column <td> and clipping the status
     text on desktop (e.g. "تم التسليم" → "تم ال..."). Auto width + a min-width
     for the longest label keeps every status fully readable on one line. */
  width: auto;
  min-width: 120px;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: clip;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: left 8px center;
}
.pkl-status-select:focus { outline: 0; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }

.pkl-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pkl-source-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}

.pkl-mod-code {
  display: inline-block;
  padding: 3px 9px;
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(124,58,237,.05));
  color: #6d28d9;
  border-radius: 6px;
  font-family: 'Cairo', monospace;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .4px;
}

.pkl-empty { color: var(--bz-muted); font-size: 11px; }

.pkl-customer {
  cursor: pointer;
  line-height: 1.3;
}
.pkl-customer-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bz-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.pkl-customer-phone {
  font-size: 11px;
  color: var(--bz-muted);
  margin-top: 1px;
  letter-spacing: .3px;
}
.pkl-customer:hover .pkl-customer-name { color: var(--bz-leaf); }

@media (max-width: 980px) {
  .pkl-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .pkl-search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pkl-toolbar { grid-template-columns: 1fr 1fr; }
  .pkl-search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pkl-tracking { max-width: 90px; }
  .pkl-product { max-width: 140px; }
  .pkl-cost-input { width: 70px; }
}

/* Checkbox column */
.pkl-check-col {
  width: 1%;
  white-space: nowrap;
  padding-left: 6px !important;
  padding-right: 12px !important;
}
.pkl-check {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin: 0;
  border: 1.5px solid var(--bz-line) !important;
  border-radius: 4px !important;
  cursor: pointer;
  accent-color: var(--bz-leaf);
}
.ord-row.is-selected {
  background: rgba(22,163,74,.08) !important;
}
.ord-row.is-selected td { border-bottom-color: rgba(22,163,74,.18); }

/* Bulk selection bar */
.pkl-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(34,197,94,.06));
  border: 1px solid rgba(22,163,74,.25);
  border-radius: 12px;
  color: var(--bz-ink);
  flex-wrap: wrap;
  animation: pkl-slide-down .22s ease;
}
.pkl-bulk-bar.hidden { display: none; }
.pkl-bulk-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  flex-wrap: wrap;
}
.pkl-bulk-info strong { color: var(--bz-emerald-deep); font-size: 15px; font-weight: 900; }
.pkl-bulk-sep { color: var(--bz-muted); }
.pkl-bulk-commission {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf));
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}
@keyframes pkl-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMMISSIONS PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.comm-controls {
  display: grid;
  grid-template-columns: 130px 1fr 1fr auto;
  gap: 10px;
  margin-bottom: 14px;
  align-items: end;
}
.comm-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comm-control label {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-muted);
  letter-spacing: .3px;
}
.comm-control input {
  height: 38px !important;
  padding: 0 14px !important;
  background: var(--bz-card) !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700;
}
.comm-rate-input { text-align: center; direction: ltr; }

.comm-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.comm-summary-card {
  padding: 14px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.comm-summary-card--hero {
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf));
  color: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(22,163,74,.28);
}
.comm-summary-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,163,74,.12);
  color: var(--bz-leaf);
  flex-shrink: 0;
}
.comm-summary-card--hero .comm-summary-icon { background: rgba(255,255,255,.18); color: #fff; }
.comm-summary-val {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
}
.comm-summary-card--hero .comm-summary-val { color: #fff; }
.comm-summary-lbl {
  font-size: 11px;
  color: var(--bz-muted);
  margin-top: 2px;
  font-weight: 700;
}
.comm-summary-card--hero .comm-summary-lbl { color: rgba(255,255,255,.85); }

.comm-tbl tbody tr { transition: background .12s ease; }
.comm-tbl .comm-rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(22,163,74,.10);
  color: var(--bz-leaf);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 12.5px;
}
.comm-tbl .comm-rank.is-top { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; box-shadow: 0 2px 6px rgba(245,158,11,.4); }
.comm-tbl .comm-code {
  font-family: 'Cairo', monospace;
  font-weight: 800;
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(124,58,237,.05));
  color: #6d28d9;
  border-radius: 6px;
  letter-spacing: .4px;
}

.comm-tbl .comm-commission {
  font-weight: 900;
  font-size: 14px;
  color: var(--bz-emerald-deep);
}
.comm-tbl .comm-commission small { font-size: 10.5px; color: var(--bz-muted); font-weight: 700; margin-right: 2px; }

@media (max-width: 900px) {
  .comm-summary { grid-template-columns: repeat(2, 1fr); }
}

/* Language toggle button */
.fx-lang-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 0 8px !important;
  min-width: 50px;
}
.fx-lang-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* ─── CSV export modal options ─── */
.csv-options { display: flex; flex-direction: column; gap: 8px; }
.csv-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 12px;
  font-family: inherit;
  text-align: right;
  cursor: pointer;
  transition: all .15s ease;
  width: 100%;
}
.csv-option:hover {
  border-color: rgba(22,163,74,.4);
  background: rgba(22,163,74,.04);
  transform: translateY(-1px);
}
.csv-option--primary { border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.06); }
.csv-option--all { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.04); }
.csv-option--custom { cursor: default; }
.csv-option--custom:hover { transform: none; }
.csv-option-icon {
  width: 36px; height: 36px;
  background: rgba(22,163,74,.10);
  color: var(--bz-leaf);
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.csv-option--all .csv-option-icon { background: rgba(245,158,11,.12); color: #b45309; }
.csv-option-title { font-size: 14px; font-weight: 800; color: var(--bz-ink); }
.csv-option-sub   { font-size: 11.5px; color: var(--bz-muted); margin-top: 2px; }

/* Clickable complaint row */
.comp-row { cursor: pointer; transition: background .12s ease; }
.comp-row:hover { background: rgba(22,163,74,.05); }

/* Complaint edit modal: customer info card */
.comp-edit-cust-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(34,197,94,.03));
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 12px;
  flex-wrap: wrap;
}
.comp-edit-cust-info { flex: 1; min-width: 160px; }
.comp-edit-cust-name { font-size: 15px; font-weight: 800; color: var(--bz-ink); margin-bottom: 4px; }
.comp-edit-cust-phone, .comp-edit-cust-email { font-size: 12.5px; color: var(--bz-ink-soft); margin-top: 2px; font-family: 'Cairo', monospace; }
.comp-edit-cust-meta { font-size: 11px; color: var(--bz-muted); margin-top: 6px; }
.comp-edit-cust-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Original-feedback read-only block */
.comp-edit-full-feedback {
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 180px;
  overflow-y: auto;
}

/* ─── Complaints: kind sub-tabs + public-link card ─── */
.comp-kind-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: rgba(15,23,42,.05);
  border-radius: 12px;
  border: 1px solid var(--bz-line);
}

.comp-kind-tab {
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.comp-kind-tab:hover { color: var(--bz-ink); }
.comp-kind-tab.is-active {
  background: var(--bz-card);
  color: var(--bz-emerald-deep);
  box-shadow: 0 2px 6px rgba(11,30,18,.10), 0 0 0 1px rgba(11,30,18,.04);
}

.comp-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(34,197,94,.03));
  border: 1px dashed rgba(22,163,74,.35);
  border-radius: 12px;
  flex-wrap: wrap;
}
.comp-link-info { flex: 1; min-width: 200px; }
.comp-link-title { font-size: 13px; font-weight: 800; color: var(--bz-ink); margin-bottom: 3px; }
.comp-link-sub { font-size: 11.5px; color: var(--bz-muted); margin-bottom: 6px; }
.comp-link-url {
  display: inline-block;
  font-family: 'Cairo', monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bz-leaf);
  background: rgba(22,163,74,.10);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .3px;
  user-select: all;
  direction: ltr;
}
.comp-link-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 540px) {
  .comp-link-card { flex-direction: column; align-items: stretch; }
  .comp-link-actions { justify-content: flex-end; }
}

/* Shopify config card status pill */
.shopify-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
}
.shopify-status-pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}
.shopify-status-pill.is-ok  { background: rgba(94,142,62,.15); color: #4a7234; }
.shopify-status-pill.is-off { background: rgba(148,163,184,.16); color: #64748b; }

.shopify-status-pill small { font-weight: 500; opacity: .7; margin-right: 3px; }

.shopify-card .form-group { margin-bottom: 0; }
.shopify-card .form-group label { font-size: 12px; font-weight: 700; margin-bottom: 4px; display: block; color: var(--bz-ink-soft); }
.shopify-card .form-group input { width: 100%; }
.shopify-card .form-group small { display: block; margin-top: 4px; }
.shopify-card .form-group code { background: rgba(15,23,42,.06); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
@media (max-width: 640px) {
  .shopify-card #shopify-config-form { grid-template-columns: 1fr !important; }
}

/* Mode tabs (Custom App vs OAuth) */
.shopify-mode-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: rgba(15,23,42,.04);
  border-radius: 10px;
  border: 1px solid var(--bz-line);
  flex-wrap: wrap;
}

.shopify-mode-tab {
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bz-ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.shopify-mode-tab:hover { color: var(--bz-ink); background: rgba(255,255,255,.5); }

.shopify-mode-tab.is-active {
  background: var(--bz-card);
  color: var(--bz-ink);
  box-shadow: 0 2px 6px rgba(11,30,18,.10), 0 0 0 1px rgba(11,30,18,.04);
}

/* Alert variants used by the OAuth help banner */
.alert-blue {
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.25);
  color: #1e40af;
  padding: 10px 12px;
  border-radius: 8px;
}

.alert-blue code { background: rgba(59,130,246,.12); padding: 2px 6px; border-radius: 4px; font-size: 11.5px; user-select: all; }
@media (max-width: 640px) {
  .comm-controls { grid-template-columns: 1fr 1fr; }
  .comm-controls > *:last-child { grid-column: 1 / -1; }
}

/* KPI grid: hero (big) + 3 minis */
.dash-kpis {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.dash-kpi-hero {
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-emerald) 65%, var(--bz-leaf));
  color: #fff;
  border-radius: var(--bz-radius-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11,61,32,.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dash-kpi-hero-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.dash-kpi-hero::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
  pointer-events: none;
}

/* ─── Sparkline ─── */
.dash-spark {
  flex: 0 0 160px;
  max-width: 180px;
  min-height: 48px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
}
.dash-spark svg {
  display: block;
  width: 100%;
  height: 46px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.dash-spark-trend {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.dash-spark-label {
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  opacity: .75;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.dash-kpi-hero-label {
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}
.dash-kpi-hero-value {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dash-kpi-hero-meta {
  font-size: 12px;
  opacity: .85;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
}
.dash-kpi-hero-sep { opacity: .4; }

.dash-kpi-mini {
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: all .2s ease;
}
.dash-kpi-mini-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.dash-kpi-mini-label,
.dash-kpi-mini-value { text-align: center !important; display: block; width: 100%; }
.dash-kpi-mini:hover {
  border-color: rgba(34,197,94,.3);
  box-shadow: var(--bz-shadow-sm);
  transform: translateY(-2px);
}
.dash-kpi-mini-icon {
  position: static;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(22,163,74,.08) !important;
  border-radius: 12px;
  opacity: 1;
}
.dash-kpi-mini-icon svg { width: 22px; height: 22px; display: block; }

/* Color tints for icon backgrounds */
.dash-kpi-mini-icon--leaf  { background: rgba(22,163,74,.10) !important; color: var(--bz-leaf); }
.dash-kpi-mini-icon--blue  { background: rgba(2,132,199,.10) !important; color: #0284c7; }
.dash-kpi-mini-icon--gold  { background: rgba(184,134,43,.12) !important; color: var(--bz-gold); }

.dash-kpi-mini-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--bz-ink);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
.dash-kpi-mini-label {
  font-size: 14px;
  color: var(--bz-muted);
  font-weight: 700;
  margin-top: 0;
  letter-spacing: 0.1px;
}

@media (max-width: 900px) {
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-kpi-hero { grid-column: 1 / -1; }
  .dash-kpi-hero-value { font-size: 36px; }
  .dash-spark { flex-basis: 160px; max-width: 180px; }
}
@media (max-width: 600px) {
  .dash-kpi-hero { flex-wrap: wrap; }
  .dash-spark { flex-basis: 100%; max-width: 100%; }
  .dash-spark svg { height: 50px; }
}
@media (max-width: 480px) {
  .dash-kpis { grid-template-columns: 1fr; gap: 10px; }
  .dash-kpi-hero { padding: 18px 20px; }
  .dash-kpi-hero-value { font-size: 32px; }
  .dash-kpi-mini-icon { width: 36px; height: 36px; font-size: 16px; }
  .dash-kpi-mini-value { font-size: 18px; }
  .dash-header { flex-wrap: wrap; }
  .dash-title { font-size: 18px; }
}

/* ─── Compact dashboard followup cards ─── */
.dash-kpis ~ .grid-2 .card,
.dash-kpis ~ .grid-3 .card {
  padding: 14px !important;
}
.dash-kpis ~ .grid-2 .card h3,
.dash-kpis ~ .grid-3 .card h3 {
  font-size: 13px !important;
  margin-bottom: 8px !important;
}
.dash-kpis ~ .grid-2 .card .flex.jcsb,
.dash-kpis ~ .grid-3 .card .flex.jcsb {
  padding: 6px 0 !important;
}
.dash-kpis ~ .grid-2 .card .flex.jcsb > div > div:first-child,
.dash-kpis ~ .grid-3 .card .flex.jcsb > div > div:first-child {
  font-size: 12.5px !important;
}
.dash-kpis ~ .grid-2 .card p,
.dash-kpis ~ .grid-3 .card p {
  padding: 12px !important;
  font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM POLISH FOR INNER PAGES
   ═══════════════════════════════════════════════════════════════ */

/* Tabs — premium pill style */
.tabs-bar {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  box-shadow: var(--bz-shadow-xs) !important;
}
.tab {
  padding: 9px 16px !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--bz-muted) !important;
  transition: all .2s cubic-bezier(.2,.9,.2,1) !important;
}
.tab:hover:not(.active) {
  background: rgba(22,163,74,.06) !important;
  color: var(--bz-emerald-deep) !important;
}
.tab.active {
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11,61,32,.25) !important;
}
.tab .tab-count {
  margin-left: 6px;
  padding: 1px 7px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

/* Quick-action buttons (.qbtn) — premium */
.qbtn {
  border-radius: var(--bz-radius-lg) !important;
  font-weight: 700 !important;
  padding: 12px 8px !important;
  transition: all .2s cubic-bezier(.2,.9,.2,1) !important;
  box-shadow: var(--bz-shadow-xs) !important;
}
.qbtn:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--bz-shadow-md) !important;
}

/* Page headers — refined */
.page > div:first-child h2,
.page > div:first-child h1 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--bz-emerald-deep) !important;
  letter-spacing: -0.4px;
}

/* Empty states — more inviting */
.empty-state {
  padding: 60px 20px !important;
  text-align: center;
  color: var(--bz-muted);
}
.empty-state-icon {
  font-size: 64px !important;
  margin-bottom: 16px !important;
  opacity: .55;
  filter: grayscale(.3);
}
.empty-state-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bz-ink-soft);
}

/* Alerts — refined */
.alert-red {
  background: linear-gradient(135deg, #fef2f2, #fff) !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  border-radius: var(--bz-radius) !important;
  padding: 12px 14px;
  box-shadow: var(--bz-shadow-xs);
}
.alert-green {
  background: linear-gradient(135deg, #f0fdf4, #fff) !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
  border-radius: var(--bz-radius) !important;
  padding: 12px 14px;
  box-shadow: var(--bz-shadow-xs);
}

/* Status badges — pill style with subtle shadow */
.badge {
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Customer rows / list items */
table tbody tr td:first-child { padding-right: 16px !important; }
table tbody tr td:last-child  { padding-left: 16px !important; }
table thead th:first-child { border-top-right-radius: 10px; }
table thead th:last-child  { border-top-left-radius: 10px; }
.card table { margin: -1px; width: calc(100% + 2px); }

/* Search inputs — refined */
input[type="search"],
input[placeholder*="ابحث"],
input[placeholder*="بحث"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: left 12px center !important;
  background-size: 16px !important;
  padding-left: 36px !important;
}

/* Native select — polished with a clear chevron on the left (RTL natural dropdown side) */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: left 14px center !important;
  background-size: 16px !important;
  padding: 11px 14px 11px 40px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  min-height: 44px;
  line-height: 1.4;
}
select:hover { border-color: rgba(22,163,74,.45) !important; }
/* Native option rendering (limited cross-browser, but improves Chrome/Firefox/Safari) */
select option {
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  color: var(--bz-ink, #0f172a) !important;
  direction: rtl;
}
select option:hover, select option:checked {
  background: rgba(22,163,74,.10) !important;
  font-weight: 700 !important;
}

/* Required-field asterisk after label */
.form-group label .req-star,
.form-group label .required-mark { color: #dc2626; font-weight: 800; margin-right: 2px; }

/* Card hover with subtle accent border */
.card {
  transition: all .25s cubic-bezier(.2,.9,.2,1) !important;
}
.stat-card {
  transition: all .3s cubic-bezier(.2,.9,.2,1) !important;
}

/* Pagination — refined */
.pagination {
  background: #fff;
  border-radius: var(--bz-radius);
  padding: 14px 16px;
  margin-top: 16px;
}
.pagination .btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
}
.pagination .btn.active {
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf)) !important;
  color: #fff !important;
  border: 0 !important;
}

/* Customer name links */
a, .link {
  color: var(--bz-emerald-deep);
  font-weight: 700;
}
a:hover { color: var(--bz-leaf); }

/* Form labels above inputs — consistent */
.form-group {
  margin-bottom: 14px;
}

/* Dropdowns / option menus */
.dropdown-menu {
  background: #fff;
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  box-shadow: var(--bz-shadow-lg);
  padding: 6px;
  min-width: 180px;
}

/* Toast notifications */
.toast {
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  box-shadow: var(--bz-shadow-lg) !important;
  border: 1px solid var(--bz-line);
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(12px);
  color: var(--bz-ink) !important;
}

/* Timeline items */
.tl-item {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--bz-line);
}
.tl-item:last-child { border-bottom: 0; }
.tl-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: var(--bz-shadow-xs);
}

/* Chat bubbles — refined */
.bubble-in, .bubble-out {
  padding: 10px 14px;
  border-radius: 18px;
  max-width: 70%;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--bz-shadow-xs);
}
.bubble-in { background: #f1f5f9; border-bottom-right-radius: 6px; }
.bubble-out { background: linear-gradient(135deg, var(--bz-leaf), var(--bz-leaf-soft)); color: #fff; border-bottom-left-radius: 6px; }

/* Section title above lists */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sticky filter bar */
.filter-bar {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: var(--bz-shadow-xs);
}

/* Modal body smoother scroll */
.modal-body { padding: 24px; }
.modal-ftr { padding: 16px 24px; border-top: 1px solid var(--bz-line); background: #fafbfa; }

/* ═══════════════ Mobile customers PAGE header — compact ═══════════════ */
@media (max-width: 768px) {
  .page > .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  /* Search box full width, slim */
  .page > .page-header > .search-wrap,
  .page > .page-header > div:has(> input[type="text"]) {
    flex: 1 !important;
    width: 100%;
  }
  /* Filters in a horizontal scrollable row */
  .page > .page-header > select {
    flex: 1 1 30%;
    min-width: 0 !important;
    width: auto !important;
    height: 38px;
    font-size: 12px !important;
    padding: 0 28px 0 8px !important;
  }
  /* Wrap selects in a horizontal scrollable container */
  .page > .page-header {
    flex-wrap: wrap;
  }
  /* Buttons: compact row */
  .page > .page-header > .btn {
    flex: 1 1 45%;
    height: 36px;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .page > .page-header > .btn.btn-sm {
    flex: 0 1 auto;
    height: 32px;
    padding: 0 10px !important;
  }
  /* Status tabs — keep visible */
  .tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tabs-bar::-webkit-scrollbar { display: none; }
  .tabs-bar .tab {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  /* Hide the verbose counter line on small screens — saves space */
  .page > .flex.wrap.gap6 > span {
    font-size: 11px !important;
    color: var(--bz-muted);
  }
  /* Empty state more compact + centered */
  .empty-state {
    padding: 30px 16px !important;
  }
  .empty-state-icon {
    font-size: 48px !important;
  }
  .empty-state-text {
    font-size: 13px !important;
  }
}

/* ═══════════════ Mobile data tables → stacked CARDS ═══════════════
   The mobile card layout for every .tbl table now lives in style-bosta.css
   (the last/winning layer — bosta's own global `.tbl td {…!important}` rules
   would otherwise beat any mobile rules here). The old position-based
   grid-template-areas block was removed: it only matched the customers column
   order, so the orders/shipping/J&T tables rendered garbled/empty cards. The
   replacement is class-driven (data-label + .mob-card-* classes) so it works
   for any table. See style-bosta.css → "Mobile data tables → stacked cards". */
@media (max-width: 768px) {
  /* Keep just the mobile bulk-action bar tweak that lived in this block. */
  #bulk-action-bar {
    width: 100%;
    justify-content: space-between !important;
    margin-top: 8px;
  }
}

/* Premium dividers */
hr { border: 0; border-top: 1px solid var(--bz-line-soft); margin: 18px 0; }

/* Section badges (e.g. counts) */
.tab-count, .sb-badge {
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
}

/* Refined status colors */
.status-confirmed { background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important; color: #14532d !important; }
.status-rejected  { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; color: #7f1d1d !important; }
.status-pending   { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #78350f !important; }
.status-shipped   { background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; color: #1e3a8a !important; }

/* Premium dashboard hot customers card etc */
.tooltip {
  background: rgba(15,23,42,.95) !important;
  backdrop-filter: blur(8px);
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600;
  box-shadow: var(--bz-shadow-lg) !important;
}

/* Loading spinner */
@keyframes premium-spin { to { transform: rotate(360deg); } }
[class*="spin"] {
  filter: drop-shadow(0 0 8px rgba(34,197,94,.4));
}

/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE-GRADE FINISHING TOUCHES
   ═══════════════════════════════════════════════════════════════ */

/* Smooth global transitions on interactive elements */
button, a, .card, .stat-card, .badge, input, select, textarea, .qbtn, .tab, .fx-pill {
  transition: transform .25s cubic-bezier(.2,.9,.2,1),
              box-shadow .25s cubic-bezier(.2,.9,.2,1),
              background .2s ease,
              border-color .2s ease,
              color .15s ease,
              opacity .15s ease !important;
}

/* Stat-card entrance stagger */
.stats-grid > .stat-card {
  animation: stat-card-in .5s cubic-bezier(.2,.9,.2,1) both;
}
.stats-grid > .stat-card:nth-child(1) { animation-delay: 0ms; }
.stats-grid > .stat-card:nth-child(2) { animation-delay: 60ms; }
.stats-grid > .stat-card:nth-child(3) { animation-delay: 120ms; }
.stats-grid > .stat-card:nth-child(4) { animation-delay: 180ms; }
.stats-grid > .stat-card:nth-child(5) { animation-delay: 240ms; }
@keyframes stat-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card lift on hover for non-stat cards */
.card[onclick], .card.clickable, .qbtn {
  cursor: pointer;
}
.card[onclick]:hover, .card.clickable:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--bz-shadow-md) !important;
  border-color: rgba(22,163,74,.25) !important;
}

/* Table row hover refinement */
table tbody tr {
  position: relative;
}
table tbody tr:hover {
  background: linear-gradient(90deg, rgba(34,197,94,.06), rgba(34,197,94,.02)) !important;
}
table tbody tr td:first-child {
  position: relative;
}
table tbody tr:hover td:first-child::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--bz-leaf), var(--bz-leaf-soft));
  border-radius: 0 2px 2px 0;
}

/* Button micro-interaction — press feedback */
.btn:active, .qbtn:active, .lcv2-submit:active {
  transform: translateY(0) scale(.98) !important;
  transition: transform .08s ease !important;
}

/* Premium loader pattern */
.loader-dots {
  display: inline-flex;
  gap: 4px;
}
.loader-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bz-leaf);
  animation: loader-bounce 1.4s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes loader-bounce {
  0%, 100% { transform: translateY(0); opacity: .4; }
  40%      { transform: translateY(-6px); opacity: 1; }
}

/* Refined skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%) !important;
  background-size: 200% 100% !important;
}

/* Cards: subtle border accent on hover (without shifting layout) */
.stat-card, .card {
  border-color: var(--bz-line) !important;
  position: relative;
}

/* Dashboard hero feel — extra margin/breathing */
.page > .stats-grid {
  margin-bottom: 28px !important;
}

/* Section dividers (h2/h3 with subtle accent) */
.page h2:not(.lbp-headline):not(.lcv2-title),
.page h3 {
  position: relative;
  padding-right: 14px;
}
.page h2:not(.lbp-headline):not(.lcv2-title)::before,
.page h3::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(180deg, var(--bz-leaf), var(--bz-emerald));
  border-radius: 4px;
}

/* Modal — refined header */
.modal-hdr {
  padding: 18px 24px !important;
  border-radius: var(--bz-radius-xl) var(--bz-radius-xl) 0 0 !important;
}
.modal-hdr h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
}
.modal-hdr h3::before { display: none !important; }

/* Refined focus state — accessibility */
:focus-visible {
  outline: 2px solid var(--bz-leaf);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 0 !important;
}

/* Premium hover for nav pills */
.fx-pill:hover { transform: translateY(-1px); }
.fx-pill.active:hover { transform: translateY(0); }

/* Soft success/error toast variants */
.toast.success {
  background: linear-gradient(135deg, #f0fdf4, #fff) !important;
  border: 1px solid #86efac !important;
  color: #14532d !important;
}
.toast.error {
  background: linear-gradient(135deg, #fef2f2, #fff) !important;
  border: 1px solid #fca5a5 !important;
  color: #991b1b !important;
}

/* Number formatting consistency */
.stat-value, .stat-number, [class*="number"] {
  font-variant-numeric: tabular-nums;
}

/* Better empty state with subtle pattern */
.empty-state {
  background: radial-gradient(circle at 50% 30%, rgba(34,197,94,.04), transparent 70%);
  border-radius: var(--bz-radius-xl);
}

/* Premium scrollbar everywhere */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(11,61,32,.25) transparent;
}

/* Image preview cards */
img.preview, .img-preview {
  border-radius: var(--bz-radius) !important;
  border: 1px solid var(--bz-line) !important;
  box-shadow: var(--bz-shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease !important;
}
img.preview:hover, .img-preview:hover {
  transform: scale(1.02);
  box-shadow: var(--bz-shadow-md);
}

/* Refined link button (text-only buttons) */
.link-btn {
  color: var(--bz-leaf);
  font-weight: 700;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all .15s ease;
}
.link-btn:hover {
  background: rgba(34,197,94,.08);
  color: var(--bz-emerald-deep);
}

/* Subtle separator above important sections */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bz-line), transparent);
  margin: 24px 0;
}

/* Floating action button (if needed in any view) */
.fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf));
  color: #fff;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(11,61,32,.3);
  z-index: 100;
  transition: all .25s cubic-bezier(.2,.9,.2,1);
}
.fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 40px rgba(11,61,32,.4);
}

/* Body font crispness */
body { text-rendering: optimizeLegibility; }

/* ═══════════════════════════════════════════════════════════════════════
   NEW MODERN SIDEBAR (sb2-*) — collapsible, grouped, unified icons
   ═══════════════════════════════════════════════════════════════════════ */
.app-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--sb-w-expanded);
  background: linear-gradient(180deg, #0a2412 0%, #0d3219 100%);
  color: #e6f0ea;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  box-shadow: -2px 0 24px rgba(11,30,18,.18);
  /* `width` intentionally NOT transitioned: the var()-based collapsed width could get
     stuck mid-animation and leave the rail at the expanded 248px while showing collapsed
     (icon-only) content. Keep transform for the mobile drawer slide. */
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  /* Divider line removed; soft rounded left corners (right edge is at screen edge). */
  border-radius: 18px 0 0 18px;
  will-change: transform, width;
}
.app-sidebar[data-collapsed="1"] { width: var(--sb-w-collapsed); }
.app-sidebar.hidden { display: none; }

/* Top section: burger toggle + brand */
.sb2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  min-height: var(--topbar-h);
}
.sb2-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.04);
  color: rgba(214,168,74,.85);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--bz-radius);
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.sb2-burger:hover {
  background: rgba(214,168,74,.15);
  color: #d6a84a;
  border-color: rgba(214,168,74,.4);
}
.sb2-burger:active { transform: scale(.94); }

/* ─── User-head block (replaces old brand inside sidebar) ─── */
.sb2-userhead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border-radius: var(--bz-radius);
  padding: 4px 6px;
}
.sb2-userhead-avatar {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.3px;
  /* Soft green ring matching sidebar palette */
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 2px rgba(132,204,22,.22);
  background: linear-gradient(135deg, var(--bz-leaf), var(--bz-leaf-soft)) !important;
}
.sb2-userhead-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
  overflow: hidden;
  min-width: 0;
  max-width: calc(var(--sb-w-expanded) - 130px);   /* room for burger + avatar + paddings */
  opacity: 1;
  transition: opacity .18s ease, max-width .25s cubic-bezier(.4,0,.2,1);
}
.sb2-userhead-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.2px;
  /* Subtle leaf-toned gradient — fits dark-green sidebar */
  background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-feature-settings: 'liga' 1, 'kern' 1;
}
.sb2-userhead-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(190,242,100,.75);  /* soft lime — same family as sidebar accents */
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed: hide entire user-head — only burger visible at top */
.app-sidebar[data-collapsed="1"] .sb2-top { padding: 12px 0; justify-content: center; }
.app-sidebar[data-collapsed="1"] .sb2-userhead {
  display: none !important;
}

/* (The old rule that hid .sb2-brand* was removed — the brand now lives in the
   sidebar header; see the "Sidebar brand header" block near the end of this file.) */

/* Nav scrollable area */
.sb2-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sb2-nav::-webkit-scrollbar { width: 5px; height: 0; }
.sb2-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 999px; }
.sb2-nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.sb2-group { margin-bottom: 10px; }
.sb2-group--single { margin-bottom: 6px; }
button.sb2-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(214,168,74,.55);
  padding: 6px 10px;
  margin: 0 0 4px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 6px;
  text-align: right;
  transition: background .15s ease, color .15s ease;
  user-select: none;
}
button.sb2-group-label:hover {
  background: rgba(255,255,255,.05);
  color: rgba(214,168,74,.85);
}
.sb2-group-chev {
  display: inline-flex;
  align-items: center;
  color: rgba(214,168,74,.55);
  transition: transform .22s ease;
}
.sb2-group.is-collapsed .sb2-group-chev { transform: rotate(-90deg); }
.sb2-group-badge {
  margin-right: auto;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
/* Group items collapse animation — max-height for universal browser support */
.sb2-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 600px;
  overflow: hidden;
  transition: max-height .26s ease, opacity .18s ease;
  opacity: 1;
}
.sb2-group.is-collapsed .sb2-group-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.sb2-group.is-collapsed .sb2-group-items > * {
  visibility: hidden;
}
.app-sidebar[data-collapsed="1"] .sb2-group-label {
  opacity: 0;
  height: 6px;
  padding: 0;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* Nav item */
.sb2-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--bz-radius);
  color: rgba(230,240,234,.78);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  position: relative;
  margin-bottom: 2px;
}
.sb2-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: rgba(255,255,255,.88);
  transition: color .15s ease;
}
.sb2-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-item-badge {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
}
.sb2-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.sb2-item:hover .sb2-item-icon { color: #fff; }
.sb2-item.active {
  background: linear-gradient(135deg, var(--bz-gold), var(--bz-gold-soft));
  color: #fff;
  box-shadow: 0 4px 14px rgba(184,134,43,.35);
}
.sb2-item.active .sb2-item-icon { color: #fff; }
.sb2-item.active::before {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: var(--bz-gold-soft);
  border-radius: 4px 0 0 4px;
}

/* Collapsed: icons only, center, tooltip on hover */
.app-sidebar[data-collapsed="1"] .sb2-item {
  justify-content: center;
  padding: 11px 0;
}
.app-sidebar[data-collapsed="1"] .sb2-item-label { display: none; }
.app-sidebar[data-collapsed="1"] .sb2-item-badge {
  position: absolute;
  top: 4px; left: 6px;
  font-size: 9px;
  padding: 1px 5px;
  min-width: 14px;
}

/* Collapsed mode: tooltip */
.app-sidebar[data-collapsed="1"] .sb2-item:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  margin-left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #0c1c14;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: var(--bz-shadow-md);
  z-index: 1001;
  pointer-events: none;
}

/* Old bottom collapse button removed — burger is now at the top */
.sb2-collapse { display: none !important; }

/* Mobile drawer */
.sb-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6,23,13,.55);
  backdrop-filter: blur(4px);
  z-index: 999;
  cursor: pointer;
}
body.sb-mobile-open .sb-mobile-overlay { display: block; }

@media (max-width: 900px) {
  .app-sidebar { z-index: 1000; }  /* above overlay (999) */
}

/* WhatsApp chip inside sidebar header (replaces the topbar version) */
.sb2-wa-chip {
  position: relative;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s ease;
}
.sb2-wa-chip:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.sb2-wa-chip.is-on  { color: #4ade80; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.3); }
.sb2-wa-chip.is-off { color: #fda4af; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); }
.sb2-wa-dot {
  position: absolute;
  top: 4px; left: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--bz-emerald-deep, #0f3a1f);
}
.sb2-wa-chip.is-on .sb2-wa-dot { animation: sb2-pulse 2.2s ease-in-out infinite; }
@keyframes sb2-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .55; transform: scale(1.15); }
}
/* Hide WA chip when sidebar is collapsed (only icons visible) */
.app-sidebar[data-collapsed="1"] .sb2-wa-chip { display: none; }
/* On mobile, the collapsed attribute is ignored (sidebar always shows full content
   when open), but if drawer is closed the whole sidebar slides off-screen anyway. */
@media (max-width: 900px) {
  .app-sidebar[data-collapsed="1"] .sb2-wa-chip { display: inline-flex; }
}
/* Mobile sidebar toggle — hexagon brand-mark button in Olive green. It's a direct
   child of #topbar and only shows ≤900px (desktop uses the in-sidebar burger).
   The hexagon clip-path gives it the brand-mark shape; the white menu glyph inside
   keeps its "open menu" meaning obvious. order:0 pins it to the top-right (RTL start). */
/* Mobile sidebar toggle — plain clean 3-line hamburger (mobile/tablet only; it's
   display:none on desktop, where the in-sidebar chevron burger is used instead).
   Olive-themed neutral icon button matching the other top-bar controls. */
.sb2-mobile-trigger {
  display: none;
  order: 0;
  align-self: center;
  width: 40px; height: 40px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  color: var(--bz-ink, #1f2937);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
.sb2-mobile-trigger svg { width: 20px; height: 20px; display: block; }
.sb2-mobile-trigger:hover  { background: #f2f4f7; border-color: #d0d5dd; }
.sb2-mobile-trigger:active { background: #e9edf1; }

/* ── Sidebar-toggle chevron direction (RTL, sidebar on the right) ──
   Applies to the DESKTOP in-sidebar burger only. Base glyph is a chevron pointing
   RIGHT (toward the sidebar = "will open/expand"); flip LEFT when expanded. */
.sb2-burger svg { transition: transform .2s ease; }
/* Desktop collapse burger: expanded (default) → point left; collapsed → point right */
.sb2-burger svg { transform: scaleX(-1); }
#app-sidebar[data-collapsed="1"] .sb2-burger svg { transform: none; }

@media (max-width: 900px) {
  .app-sidebar {
    transform: translateX(110%);          /* extra 10% so any shadow is hidden too */
    width: min(60vw, 195px) !important;   /* narrower on phones so chat content stays visible */
    box-shadow: -8px 0 32px rgba(0,0,0,.45);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
    overflow-x: hidden;
  }
  .app-sidebar.mobile-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }
  #main { margin-right: 0 !important; }
  body:has(.app-sidebar[data-collapsed="1"]) #main { margin-right: 0 !important; }
  .sb2-mobile-trigger { display: inline-flex; }
  /* Force expanded look in mobile */
  .app-sidebar[data-collapsed="1"] .sb2-userhead-text,
  .app-sidebar[data-collapsed="1"] .sb2-item-label,
  .app-sidebar[data-collapsed="1"] .sb2-group-label { display: block; opacity: 1; max-width: 100%; height: auto; padding: 0 12px 8px; }
  .app-sidebar[data-collapsed="1"] .sb2-userhead-text { padding: 0; max-width: 200px; }
  .app-sidebar[data-collapsed="1"] .sb2-userhead { gap: 10px; padding: 4px 6px; flex: 1; }
  .app-sidebar[data-collapsed="1"] .sb2-top { padding: 12px 14px; justify-content: flex-start; }
  .app-sidebar[data-collapsed="1"] .sb2-item { justify-content: flex-start; padding: 10px 12px; }
}

/* Remove the topbar border-left on brand (sidebar provides separation) */
.fx-brand { border-left: 0 !important; padding-left: 0 !important; }
/* Hide topbar brand entirely — sidebar shows brand now (no duplicate) */
.fx-brand--hidden { display: none !important; }

/* ─── Mini KPI icon color variants (using SVG icons now) ─── */
.dash-kpi-mini-icon {
  background: rgba(22,163,74,.10);
  color: var(--bz-leaf);
}
/* Icon variants are now defined later (with tinted backgrounds) — these old transparent rules removed */

/* ─── Collapsible card (used by activity feed) ─── */
.collapsible-card { overflow: hidden; }
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  color: var(--bz-ink);
  text-align: right;
  border-radius: var(--bz-radius-lg);
  transition: background .15s var(--ease-out);
}
.collapsible-header:hover { background: rgba(15,23,42,.03); }

.collapsible-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bz-muted);
  transition: transform .25s var(--ease-out);
}
.collapsible-card.is-collapsed .collapsible-chev { transform: rotate(-90deg); }
.collapsible-body {
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height .35s var(--ease-out), opacity .25s var(--ease-out), padding .3s var(--ease-out);
}
.collapsible-card.is-collapsed .collapsible-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.collapsible-card.is-collapsed { margin-bottom: 0 !important; }

/* Active-tab chip inside collapsible header */
.history-tab-name {
  background: rgba(22,163,74,.12);
  color: var(--bz-leaf);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
}

/* ─── Customer info cards grid — uniform compact layout ─── */
.cust-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.cust-info-card {
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 11px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 78px;
}
.cust-info-card:hover { border-color: rgba(22,163,74,.25); }
.cust-info-card.is-overdue { border-color: rgba(220,38,38,.35); background: rgba(254,226,226,.4); }

.cust-info-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-muted);
  letter-spacing: .2px;
}
.cust-info-head svg { color: var(--bz-muted); }
.cust-info-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-ink);
  line-height: 1.3;
}
.cust-info-value--sm { font-size: 12.5px; font-weight: 700; }
.cust-info-value--addr { font-size: 12.5px; font-weight: 600; word-break: break-word; }
.cust-info-value--danger { color: var(--bz-danger); }
.cust-info-sub { font-size: 11px; color: var(--bz-muted); }
.cust-info-empty { color: var(--bz-muted); font-weight: 500; }

/* Agent display inside info card — no background pill, just avatar + name */
.cust-info-agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cust-info-agent-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.cust-info-agent-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink);
}
.cust-info-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.cust-info-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
}
.cust-info-btn--call { background: var(--bz-leaf); color: #fff; }
.cust-info-btn--call:hover { background: var(--bz-leaf-soft); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(22,163,74,.30); }
.cust-info-btn--wa { background: #25d366; color: #fff; }
.cust-info-btn--wa:hover { background: #1ebe5a; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(37,211,102,.30); }

/* Receipt: ship button variant */
.receipt-btn--ship {
  background: rgba(2,132,199,.10);
  color: #0c4a6e;
}
.receipt-btn--ship:hover {
  background: #0284c7;
  color: #fff;
  box-shadow: 0 3px 8px rgba(2,132,199,.35);
  transform: translateY(-1px);
}
.receipt-btn--shipped {
  background: rgba(22,163,74,.10);
  color: #15803d;
  cursor: default;
}
.receipt-btn--shipped:hover { transform: none; }

/* ═══════════════════════════════════════════════════════════════════════
   CARD DEPTH + EMPTY-STATE + PRIORITY ALERT
   ═══════════════════════════════════════════════════════════════════════ */

/* Lift cards a bit — better depth without being heavy */
.card, .stat-card {
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  box-shadow: var(--bz-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover, .stat-card:hover {
  box-shadow: var(--bz-shadow-md);
  border-color: rgba(22,163,74,.22);
  transform: translateY(-1px);
}

/* Empty state — compact, friendly */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  text-align: center;
  color: var(--bz-muted);
  gap: 6px;
}
.empty-state-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(132,204,22,.10));
  color: var(--bz-leaf);
  margin-bottom: 2px;
}
.empty-state-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink-soft);
}
.empty-state-sub {
  font-size: 11.5px;
  color: var(--bz-muted);
  margin-top: -2px;
}
.empty-state-cta {
  margin-top: 8px;
  padding: 6px 14px;
  background: var(--bz-leaf);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.empty-state-cta:hover {
  background: var(--bz-leaf-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22,163,74,.3);
}

/* Priority alert (delayed customers) */
.priority-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fee2e2 0%, #fef3c7 100%);
  border: 1px solid rgba(220,38,38,.25);
  border-right: 5px solid var(--bz-danger);
  border-radius: var(--bz-radius-lg);
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(220,38,38,.10), 0 1px 3px rgba(220,38,38,.06);
  animation: priority-pulse 2.5s ease-in-out infinite;
}
@keyframes priority-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(220,38,38,.10), 0 1px 3px rgba(220,38,38,.06); }
  50%      { box-shadow: 0 6px 24px rgba(220,38,38,.20), 0 2px 6px rgba(220,38,38,.10); }
}
.priority-alert-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bz-danger), #b91c1c);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(220,38,38,.35);
}
.priority-alert-body { flex: 1; min-width: 0; }
.priority-alert-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bz-danger);
  margin-bottom: 2px;
}
.priority-alert-title {
  font-size: 15px;
  font-weight: 800;
  color: #7f1d1d;
  margin-bottom: 2px;
}
.priority-alert-sub {
  font-size: 12px;
  color: #991b1b;
  opacity: .85;
}
.priority-alert-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.priority-alert-cta {
  padding: 8px 14px;
  background: var(--bz-danger);
  color: #fff;
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
  box-shadow: 0 2px 8px rgba(220,38,38,.35);
}
.priority-alert-cta:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(220,38,38,.45);
}
.priority-alert-cta.secondary {
  background: #fff;
  color: var(--bz-danger);
  border: 1px solid rgba(220,38,38,.3);
  box-shadow: none;
}
.priority-alert-cta.secondary:hover {
  background: #fee2e2;
}

@media (max-width: 640px) {
  .priority-alert { flex-wrap: wrap; padding: 12px 14px; }
  .priority-alert-actions { width: 100%; }
  .priority-alert-cta { flex: 1; }
}

/* Typography fine-tune: stronger labels in stat blocks */
.dash-kpi-mini-label { font-size: 14px !important; font-weight: 700 !important; }
.dash-kpi-mini-value { font-feature-settings: 'tnum'; }
.dash-kpi-hero-label { font-size: 11.5px !important; letter-spacing: 1.5px; opacity: .85; }
.dash-kpi-hero-value { font-feature-settings: 'tnum'; }

/* Even better stat-card hover */
.stat-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* Topbar adjustments to fit new layout */
#topbar {
  min-height: var(--topbar-h) !important;
  padding: 8px 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD: date range filter + sparkline tooltip
   ═══════════════════════════════════════════════════════════════════════ */
.dash-header .dash-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-daterange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: var(--bz-shadow-xs);
  transition: all .15s ease;
}
.dash-daterange:hover { border-color: rgba(22,163,74,.4); }
/* ─── Custom button-style date picker ─── */
.dash-date-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dash-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--bz-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bz-muted);
  cursor: pointer;
  transition: all .15s var(--ease-out);
  white-space: nowrap;
  min-width: 120px;
}
.dash-date-trigger:hover {
  background: rgba(22,163,74,.06);
  border-color: rgba(22,163,74,.3);
  color: var(--bz-ink);
}
.dash-date-trigger svg { color: var(--bz-leaf); flex-shrink: 0; }
.dash-date-field.has-value .dash-date-trigger {
  background: rgba(22,163,74,.1);
  border-color: rgba(22,163,74,.4);
  color: var(--bz-ink);
  font-weight: 700;
}
/* Hide native date input — used only to open the picker */
.dash-date-field input[type="date"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  border: 0 !important;
  padding: 0 !important;
}

/* ─── Date range popover ─── */
.dash-range-wrap { position: relative; }
.dash-range-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  min-width: 320px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 12px;
  box-shadow: var(--bz-shadow-lg);
  padding: 14px;
  animation: stagger-in .2s var(--ease-out) both;
}

.dash-range-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dash-preset {
  background: rgba(22,163,74,.05);
  color: var(--bz-ink);
  border: 1px solid var(--bz-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease-out);
}
.dash-preset:hover {
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.4);
  transform: translateY(-1px);
}
.dash-range-divider {
  height: 1px;
  background: var(--bz-line);
  margin: 12px 0;
}
.dash-range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dash-range-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-range-input span {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-muted);
  letter-spacing: .3px;
}
.dash-range-input input[type="date"] {
  height: 34px;
  border: 1px solid var(--bz-line);
  border-radius: 7px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--bz-ink);
  background: var(--bz-card);
}
.dash-range-input input[type="date"]:focus {
  outline: 0;
  border-color: var(--bz-leaf);
  box-shadow: var(--focus-ring);
}
.dash-range-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  /* On mobile, render as a centered bottom-sheet to escape parent overflow:hidden */
  .dash-range-popover {
    position: fixed;
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    min-width: 0;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1500;
    box-shadow: 0 -8px 32px rgba(0,0,0,.25);
  }
}
.dash-daterange-sep {
  color: var(--bz-muted);
  font-size: 12px;
  font-weight: 700;
}
.dash-daterange-apply {
  background: var(--bz-leaf);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.dash-daterange-apply:hover {
  background: var(--bz-leaf-soft);
  transform: translateY(-1px);
}
.dash-daterange-clear {
  background: var(--bz-danger-soft);
  color: var(--bz-danger);
  border: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  transition: all .15s ease;
}
.dash-daterange-clear:hover {
  background: var(--bz-danger);
  color: #fff;
}

/* Sparkline tooltip */
.dash-spark { position: relative; }
.spark-svg { cursor: crosshair; overflow: visible; }
.spark-hit { cursor: pointer; }
.spark-dot { transition: r .15s ease; }
.spark-dot--active { r: 4.5; }
.spark-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: rgba(2,10,6,.97);
  color: #bef264;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  z-index: 100;
  border: 1px solid rgba(190,242,100,.3);
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.spark-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(2,10,6,.95);
  border-right: 1px solid rgba(190,242,100,.3);
  border-bottom: 1px solid rgba(190,242,100,.3);
}

@media (max-width: 768px) {
  .dash-daterange input[type="date"] { min-width: 110px; font-size: 11.5px; }
  .dash-daterange-apply { padding: 5px 10px; font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODERN SaaS POLISH — Motion / Consistency / UX (Waves M1-M5)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Global motion: smooth scroll, easing tokens ─── */
html { scroll-behavior: smooth; }
:root {
  --ease-out: cubic-bezier(.2,.9,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --btn-h-sm: 28px;
  --btn-h-md: 36px;
  --btn-h-lg: 44px;
  --input-h: 38px;
  --focus-ring: 0 0 0 3px rgba(22,163,74,.25);
}

/* ─── Page enter animation (applied to every .page) ─── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page {
  opacity: 1; transform: none;  /* fallback — survives reduced-motion */
  animation: page-enter .32s var(--ease-out) both;
}

/* ─── List stagger animation (apply data-stagger to children) ─── */
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-stagger] > * {
  opacity: 1; transform: none;  /* fallback */
  animation: stagger-in .28s var(--ease-out) both;
}
[data-stagger] > *:nth-child(1)  { animation-delay: 20ms; }
[data-stagger] > *:nth-child(2)  { animation-delay: 50ms; }
[data-stagger] > *:nth-child(3)  { animation-delay: 80ms; }
[data-stagger] > *:nth-child(4)  { animation-delay: 110ms; }
[data-stagger] > *:nth-child(5)  { animation-delay: 140ms; }
[data-stagger] > *:nth-child(6)  { animation-delay: 170ms; }
[data-stagger] > *:nth-child(7)  { animation-delay: 200ms; }
[data-stagger] > *:nth-child(8)  { animation-delay: 230ms; }
[data-stagger] > *:nth-child(n+9){ animation-delay: 260ms; }

/* ─── Modal entrance refinement ─── */
.modal-overlay {
  transition: opacity .22s var(--ease-out);
}
.modal-overlay:not(.hidden) { opacity: 1; }
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-box {
  opacity: 1; transform: none;
  animation: modal-rise .28s var(--ease-spring) both;
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Reduced motion: disable animations entirely (elements use static fallback styles) ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════ WAVE M2 — Skeleton loaders ═══════════════ */
.sk {
  background: linear-gradient(90deg, var(--bz-line-soft) 0%, var(--bz-line) 50%, var(--bz-line-soft) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
  border-radius: 6px;
  display: block;
}
@keyframes sk-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.sk-text { height: 12px; margin: 4px 0; }
.sk-text--lg { height: 18px; }
.sk-text--xl { height: 28px; }
.sk-circle { border-radius: 50%; }
.sk-card {
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  padding: 16px;
  min-height: 100px;
}
.sk-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--bz-line-soft);
}

/* ═══════════════ WAVE M3 — Toast stack ═══════════════ */
#toast-stack {
  position: fixed;
  top: 16px; left: 16px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast-v2 {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius);
  padding: 12px 14px 12px 14px;
  min-width: 280px; max-width: 380px;
  box-shadow: var(--bz-shadow-lg);
  font-size: 13px;
  color: var(--bz-ink);
  position: relative;
  overflow: hidden;
  /* Explicit final state — survives reduced-motion overrides */
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: toast-in .35s var(--ease-spring) both;
  border-right: 4px solid var(--bz-leaf);
}
.toast-v2.is-leaving { animation: toast-out .25s var(--ease-out) both; }
.toast-v2-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,163,74,.12);
  color: var(--bz-leaf);
}
.toast-v2-icon svg { display: block; }
.toast-v2-close svg { display: block; }
.toast-v2-body { flex: 1; min-width: 0; line-height: 1.45; }
.toast-v2-close {
  background: transparent; border: 0; color: var(--bz-muted);
  cursor: pointer; padding: 2px 4px;
  font-size: 16px; line-height: 1;
}
.toast-v2-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--bz-leaf);
  animation: toast-progress 4s linear forwards;
}
.toast-v2--success { border-right-color: var(--bz-leaf); }
.toast-v2--error   { border-right-color: var(--bz-danger); }
.toast-v2--error .toast-v2-icon { background: rgba(220,38,38,.12); color: var(--bz-danger); }
.toast-v2--error .toast-v2-progress { background: var(--bz-danger); }
.toast-v2--warning { border-right-color: var(--bz-warning); }
.toast-v2--warning .toast-v2-icon { background: rgba(217,119,6,.14); color: var(--bz-warning); }
.toast-v2--warning .toast-v2-progress { background: var(--bz-warning); }
.toast-v2--info    { border-right-color: #0284c7; }
.toast-v2--info .toast-v2-icon { background: rgba(2,132,199,.12); color: #0284c7; }
.toast-v2--info .toast-v2-progress { background: #0284c7; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-12px) scale(.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(-12px) scale(.95); }
}
@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ═══════════════ WAVE M3 — Button loading state ═══════════════ */
.btn { transition: transform .12s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out), opacity .15s var(--ease-out); position: relative; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.is-loading {
  pointer-events: none;
  color: transparent !important;
  position: relative;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2.2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
.btn-ghost.is-loading::after, .btn-secondary.is-loading::after {
  border-color: rgba(11,30,18,.25);
  border-top-color: var(--bz-ink-soft);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ═══════════════ WAVE M4 — Consistency: buttons, inputs, focus rings ═══════════════ */
.btn {
  height: var(--btn-h-md);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}
.btn-sm { height: var(--btn-h-sm); padding: 0 10px; font-size: 12px; border-radius: 7px; gap: 4px; }
.btn-lg { height: var(--btn-h-lg); padding: 0 18px; font-size: 14px; border-radius: 11px; }
.btn-primary {
  background: linear-gradient(135deg, var(--bz-leaf), var(--bz-leaf-soft));
  color: #fff;
  box-shadow: 0 2px 6px rgba(22,163,74,.25), 0 1px 2px rgba(22,163,74,.15);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(22,163,74,.4); transform: translateY(-1px); }
.btn-secondary {
  background: var(--bz-card);
  color: var(--bz-ink);
  border-color: var(--bz-line);
}
.btn-secondary:hover { background: var(--bz-card-hover); border-color: rgba(22,163,74,.35); }
.btn-ghost {
  background: transparent;
  color: var(--bz-ink-soft);
  border-color: transparent;
}
.btn-ghost:hover { background: rgba(15,23,42,.05); color: var(--bz-ink); }
.btn-danger {
  background: var(--bz-danger);
  color: #fff;
}
.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,38,38,.35); }

/* Unified inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"], input[type="date"],
input[type="time"], input[type="datetime-local"], textarea, select {
  height: var(--input-h);
  border: 1px solid var(--bz-line);
  border-radius: 9px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--bz-ink);
  background: var(--bz-card);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
  width: 100%;
}
textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* Unified focus ring (every focusable thing) */
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, .btn:focus-visible {
  outline: 0;
  border-color: var(--bz-leaf) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Don't apply input height resets to special pickers / login fields */
.lcv2-input-wrap input, .dash-daterange input[type="date"] { height: auto; }

/* ═══════════════ WAVE M5 — Sticky bulk action toolbar (improvement) ═══════════════ */
.bulk-action-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-emerald));
  color: #fff;
  border-radius: var(--bz-radius);
  margin-bottom: 12px;
  box-shadow: var(--bz-shadow-md);
  animation: stagger-in .25s var(--ease-out);
}
.bulk-action-bar-count {
  background: rgba(255,255,255,.15);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.bulk-action-bar-spacer { flex: 1; }
.bulk-action-bar .btn { color: #fff; }
.bulk-action-bar .btn-ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.15); }
.bulk-action-bar .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ═══════════════ Row hover micro-interaction ═══════════════ */
tbody tr {
  transition: background .15s var(--ease-out), transform .15s var(--ease-out);
}
tbody tr:hover { background: rgba(22,163,74,.06); }

/* ═══════════════ Tag/chip system (utility) ═══════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bz-line-soft);
  color: var(--bz-ink-soft);
}
.chip--leaf { background: rgba(22,163,74,.12); color: #166534; }
.chip--gold { background: rgba(184,134,43,.14); color: #92400e; }
.chip--blue { background: rgba(2,132,199,.12); color: #0c4a6e; }
.chip--danger { background: var(--bz-danger-soft); color: var(--bz-danger); }

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMERS PAGE — Filter card, compact table, badge system, row actions
   ═══════════════════════════════════════════════════════════════════════ */

/* Tighter page rhythm */
.cust-page .page-header { margin-bottom: 10px !important; }
.cust-page { padding-top: 8px !important; }

/* ─── One unified filter card (sticky) ─── */
.cust-filter-card {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  position: sticky;
  top: 12px;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(11,30,18,.05);
}

/* ─── Toolbar (top row of filter card) ─── */
.cust-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cust-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
}
.cust-search-icon {
  position: absolute;
  right: 14px;
  display: inline-flex;
  align-items: center;
  color: var(--bz-muted);
  pointer-events: none;
  transition: color .15s ease;
}
.cust-search-input {
  width: 100%;
  height: 42px !important;
  padding: 0 42px 0 60px !important;
  border-radius: 11px !important;
  font-size: 13.5px !important;
  background: var(--bz-card) !important;
  border: 1.5px solid var(--bz-line) !important;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out) !important;
}
.cust-search-input:focus {
  border-color: var(--bz-leaf) !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.16) !important;
  background: #fff !important;
}
.cust-search-wrap:focus-within .cust-search-icon { color: var(--bz-leaf); }
.cust-search-kbd {
  position: absolute;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--bz-line-soft);
  color: var(--bz-muted);
  border: 1px solid var(--bz-line);
}
.cust-filter-select {
  height: 32px !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: 160px !important;
  flex: 0 0 auto;
  background: var(--bz-card) !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 7px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: border-color .15s ease;
}
.cust-filter-select:hover { border-color: rgba(22,163,74,.4) !important; }
.cust-filter-select:focus { border-color: var(--bz-leaf) !important; box-shadow: var(--focus-ring) !important; outline: 0; }

/* Order-date range filter — one pill grouping preset + from/to + clear, matching the selects. */
.cust-date-filter {
  display: inline-flex !important; align-items: center; gap: 6px;
  height: 32px; padding: 0 8px; flex: 0 0 auto;
  background: var(--bz-card) !important; border: 1px solid var(--bz-line) !important; border-radius: 7px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cust-date-filter:focus-within { border-color: var(--bz-leaf) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.14) !important; }
.cust-date-icon { display: inline-flex; align-items: center; color: var(--bz-leaf); }
.cust-date-preset {
  height: 26px !important; min-width: 92px !important; max-width: 130px !important;
  border: 0 !important; background: transparent !important; padding: 0 4px !important;
  box-shadow: none !important; border-radius: 5px !important;
}
.cust-date-input {
  height: 26px !important; border: 1px solid var(--bz-line) !important; border-radius: 6px !important;
  background: #fff !important; padding: 0 6px !important; font-size: 12px !important; color: var(--bz-ink) !important;
  font-family: inherit !important; cursor: pointer; color-scheme: light; width: auto !important;
}
.cust-date-input:focus { border-color: var(--bz-leaf) !important; outline: 0; box-shadow: 0 0 0 3px rgba(22,163,74,.14) !important; }
.cust-date-sep { color: var(--bz-muted); font-size: 12px; }
.cust-date-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0 !important; border-radius: 6px !important;
  background: rgba(220,38,38,.08) !important; color: #dc2626 !important; cursor: pointer; padding: 0 !important;
}
.cust-date-clear:hover { background: rgba(220,38,38,.16) !important; }

/* Hero search bar */
.cust-search-wrap { flex: 1 1 220px; min-width: 200px; max-width: 360px; }
.cust-search-wrap .cust-search-input { height: 34px !important; padding: 0 14px 0 38px !important; font-size: 12.5px !important; width: 100% !important; }
.cust-search-icon { right: 12px !important; }
.cust-search-kbd { display: none !important; }
.cust-toolbar .btn { height: 32px !important; padding: 0 12px !important; font-size: 12px !important; flex: 0 0 auto; }

/* ─── Tabs row (pills + meta) ─── */
.cust-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cust-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.cust-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--bz-ink-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease-out);
}
.cust-tab:not(.active):hover {
  background: #15803d;        /* full olive-green, matching the «عميل جديد» button */
  color: #fff;
  border-color: #15803d;
}
.cust-tab:not(.active):hover .cust-tab-count {
  background: rgba(255,255,255,.22);   /* keep the count legible on green */
  color: #fff;
}
.cust-tab.active {
  /* !important needed: style-bosta.css has a [class*="active"] badge wildcard (also !important)
     that matches "cust-tab active" by substring and would otherwise paint it pale status-green. */
  background: #15803d !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(21,128,61,.3);
}
.cust-tab-count {
  background: rgba(15,23,42,.08);
  color: var(--bz-ink-soft);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}
.cust-tab.active .cust-tab-count { background: rgba(255,255,255,.25); color: #fff; }

/* Tabs meta (density toggle + result count) */
.cust-tabs-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cust-density-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--bz-line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bz-ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.cust-density-toggle:hover { background: #fff; border-color: rgba(22,163,74,.4); color: var(--bz-leaf); }

.cust-results-count { font-size: 11.5px; color: var(--bz-muted); white-space: nowrap; }
.cust-results-count b { color: var(--bz-ink); font-weight: 700; }

/* ─── Bulk action bar (no longer in flow; appears when selected) ─── */
.cust-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #1e4d0f, #166534);
  color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(11,61,32,.25);
}
.cust-bulk-bar .btn { color: inherit; }
.cust-bulk-bar .btn-secondary { background: #fff; color: #166534; border-color: transparent; }
.cust-bulk-bar .btn-ghost { background: rgba(255,255,255,.15); color: #fff; border-color: transparent; }

/* ─── Density: comfortable mode ─── */
.cust-page[data-density="comfortable"] .tbl-compact td { padding: 12px 14px !important; font-size: 13.5px !important; }
.cust-page[data-density="comfortable"] .tbl-compact th { padding: 12px 14px !important; }
.cust-page[data-density="comfortable"] .cust-name { font-size: 14px; }

/* ─── Stronger table header + zebra rows ─── */
.cust-table-card { padding: 0 !important; overflow: hidden; background: #fff !important; }

.cust-table-card .tbl-wrap { max-height: calc(100vh - 170px); overflow: auto; }
.tbl-compact { position: relative; border-collapse: separate; border-spacing: 0; }
.tbl-compact thead { position: sticky; top: 0; z-index: 10; }
.tbl-compact thead tr { background: #fff; }

.tbl-compact th {
  background: #fff !important;
  color: var(--bz-ink) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--bz-line) !important;
  position: relative;
}

/* Scroll-shadow REMOVED system-wide: the sticky-header drop shadow (was a
   `.tbl-compact thead::after` gradient strip) is gone per request. */

/* Zebra rows */
.tbl-compact tbody tr:nth-child(even) { background: rgba(15,23,42,.015); }

/* Hover wins over zebra */
.cust-row:hover { background: rgba(22,163,74,.07) !important; }

/* Kill scroll-shadow / edge-fade on EVERY table (top/bottom/left/right), across
   all table classes + wrappers. Scrolling itself is untouched (overflow stays).
   NOTE: th.sortable::after sort-arrows are on TH (not THEAD) so they are NOT
   matched here and remain visible. */
.tbl-wrap { overflow-x: auto; scrollbar-width: thin; }
.tbl-wrap::before, .tbl-wrap::after,
.tbl-compact thead::after, .tbl thead::after, table thead::after,
.restock-table-wrap::before, .restock-table-wrap::after,
.cust-table-card .scroll-shadow,
.cust-table-card [class*="scroll-indicator"] {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Mobile: stack toolbar elements */
@media (max-width: 640px) {
  .cust-filter-card { position: static; padding: 10px; }
  .cust-search-wrap { flex: 1 1 100%; max-width: 100%; }
  /* Status pills: wrap to multiple rows on mobile so user sees everything */
  .cust-tabs-row { position: relative; }
  .cust-tabs {
    overflow: visible;
    flex-wrap: wrap !important;
    padding: 4px 0 4px;
    margin: 0;
    gap: 4px;
  }
  .cust-tab {
    flex: 0 0 auto;
    white-space: nowrap !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }
  .cust-tabs-meta { flex-basis: 100%; justify-content: space-between; }
  .cust-toolbar { gap: 6px; }
  .cust-toolbar .btn { flex: 1 1 auto; min-width: 0; }
  .cust-filter-select { flex: 1 1 auto !important; max-width: none !important; }

  /* The mobile customers-card grid that used to live here (position-based
     grid-template-areas + nth-child(4)(5)(7)(8){display:none}) was removed: its
     (0,3,3) specificity overrode the generic, label-driven card pattern and it
     hid the secondary columns (address/source/agent/last-edit) the cards must
     now show. The card layout for ALL .tbl tables now lives in style-bosta.css
     ("Mobile data tables → stacked cards"), driven by data-label + .mob-card-*
     classes. Only the select-all bar toggle is kept from this block. */
  .mobile-select-all { display: flex !important; }
  .cust-row.is-overdue { border-right: 4px solid var(--bz-danger) !important; box-shadow: none !important; }
}

/* Mobile select-all bar — hidden on desktop, visible on mobile */
.mobile-select-all {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink);
  user-select: none;
}
.mobile-select-all input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--bz-leaf);
  cursor: pointer;
}
.mobile-select-all svg { color: var(--bz-leaf); }

/* ─── Compact table (cell padding only — th look defined later) ─── */
.tbl-compact th { padding: 10px 12px !important; white-space: nowrap; }
.tbl-compact td {
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--bz-line-soft) !important;
  vertical-align: middle;
  line-height: 1.4;
}
.tbl-compact tbody tr:last-child td { border-bottom: 0 !important; }

/* ─── Row hover + actions ─── */
.cust-row { cursor: pointer; transition: background .12s ease; position: relative; }
.cust-row:hover { background: rgba(22,163,74,.04) !important; }
.cust-row.is-overdue { box-shadow: inset 3px 0 0 var(--bz-danger); }

.cust-name { font-weight: 700; font-size: 13.5px; color: var(--bz-ink); }
.cust-note-preview {
  font-size: 11.5px;
  color: var(--bz-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.cust-phone { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; color: var(--bz-ink-soft); }
.cust-addr { font-size: 12px; color: var(--bz-ink-soft); max-width: 220px; white-space: normal; word-break: break-word; }
.cust-agent { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cust-updated { font-size: 11.5px; white-space: nowrap; }
.cust-updated-by { font-size: 10.5px; color: var(--bz-muted); }
.cust-last { font-size: 11.5px; color: var(--bz-muted); }
.cust-last.is-overdue { color: var(--bz-danger); font-weight: 700; }

/* Inline action buttons — always visible, polished pill group */
.cust-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  opacity: 1;
  padding: 4px;
  background: rgba(15,23,42,.03);
  border-radius: 10px;
  transition: background .15s var(--ease-out);
}
.cust-row:hover .cust-actions { background: rgba(255,255,255,.7); }

.cust-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 0;
  cursor: pointer;
  transition: all .15s var(--ease-out);
  text-decoration: none;
  padding: 0;
  position: relative;
}
.cust-actions .cust-action:nth-child(1) { background: rgba(2,132,199,.10); color: #0284c7; }
.cust-actions .cust-action:nth-child(1):hover { background: #0284c7; color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(2,132,199,.35); }
.cust-actions .cust-action--wa { background: rgba(37,211,102,.10) !important; color: #25d366 !important; }
.cust-actions .cust-action--wa:hover { background: #25d366 !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(37,211,102,.4); }
.cust-actions .cust-action:nth-child(3) { background: rgba(184,134,43,.10); color: var(--bz-gold); }
.cust-actions .cust-action:nth-child(3):hover { background: var(--bz-gold); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(184,134,43,.4); }
.cust-action svg { display: block; }

@media (hover: none) {
  .cust-actions { background: transparent; }
}

/* On touch devices, always show actions */
@media (hover: none) {
  .cust-actions { opacity: 1; }
}

/* ─── Badge system — source (outline) vs status (solid) ─── */
.badge-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(15,23,42,.04);
  color: var(--bz-ink-soft);
  border: 1px solid var(--bz-line);
  white-space: nowrap;
  min-width: 70px;
  letter-spacing: 0.1px;
}
.badge-source:empty::before { content: '—'; color: var(--bz-muted); }

/* Status badges already exist — make them slimmer */
.tbl-compact .badge,
.tbl-compact .status-badge {
  height: 22px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
}

/* ─── Status pills (clean, no emoji) ─── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.status-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}

/* Per-status colors */
.status-pill--new              { background: #f1f5f9; color: #475569; }
.status-pill--first_attempt    { background: #ecfdf5; color: #047857; }
.status-pill--second_attempt   { background: #fef3c7; color: #92400e; }
.status-pill--third_attempt    { background: #fef3c7; color: #b45309; }
.status-pill--confirmed        { background: #dcfce7; color: #15803d; }
.status-pill--rejected         { background: #fee2e2; color: #b91c1c; }
.status-pill--waiting_transfer { background: #ecfccb; color: #4d7c0f; }
.status-pill--postponed        { background: #f3e8ff; color: #7e22ce; }
.status-pill--shipped          { background: #cffafe; color: #0e7490; }
.status-pill--duplicate        { background: #f3f4f6; color: #4b5563; }

/* Cleaner agent cell */
.cust-agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bz-ink);
  white-space: nowrap;
}
.cust-agent .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Agent chip — clean avatar + name (single letter initial) ─── */
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 4px;
  background: rgba(15,23,42,.04);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bz-ink);
  white-space: nowrap;
  max-width: 160px;
}
.agent-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.agent-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER DETAIL PAGE — Side invoice aside + modern quick-action tiles
   ═══════════════════════════════════════════════════════════════════════ */

.cust-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
  width: 100%;
}
.cust-detail-main { min-width: 0; }
.cust-detail-page { width: 100%; }

/* ─── Customer Hero Header — prominent banner at the top ─── */
.cust-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.85) 100%);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px rgba(11,30,18,.06);
  position: relative;
  overflow: hidden;
}
.cust-hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 240px; height: 240px;
  background: radial-gradient(closest-side, rgba(22,163,74,.10), transparent);
  pointer-events: none;
  z-index: 0;
}

.cust-hero-back {
  width: 38px; height: 38px;
  background: rgba(15,23,42,.06);
  border: 0;
  border-radius: 10px;
  color: var(--bz-ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
  flex-shrink: 0;
  z-index: 1;
}
.cust-hero-back:hover { background: rgba(15,23,42,.10); color: var(--bz-ink); }

.cust-hero-avatar {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  flex-shrink: 0;
  z-index: 1;
}
.cust-hero-fire {
  position: absolute;
  top: -6px; left: -6px;
  font-size: 20px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

.cust-hero-info {
  flex: 1;
  min-width: 0;
  z-index: 1;
}
.cust-hero-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cust-hero-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--bz-ink);
  letter-spacing: -.5px;
  margin: 0;
}
.cust-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12.5px;
  color: var(--bz-muted);
}
.cust-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cust-hero-meta-item svg { color: var(--bz-leaf); flex-shrink: 0; }
.cust-hero-meta-strong { color: var(--bz-ink); font-weight: 700; }

.cust-hero-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  z-index: 1;
}
.cust-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
}
.cust-hero-btn--call { background: var(--bz-leaf); color: #fff; box-shadow: 0 3px 8px rgba(22,163,74,.30); }
.cust-hero-btn--call:hover { background: var(--bz-leaf-soft); transform: translateY(-1px); }
.cust-hero-btn--wa { background: #25d366; color: #fff; box-shadow: 0 3px 8px rgba(37,211,102,.30); }
.cust-hero-btn--wa:hover { background: #1ebe5a; transform: translateY(-1px); }
.cust-hero-btn--edit, .cust-hero-btn--delete {
  width: 38px; padding: 0;
  background: rgba(15,23,42,.06);
  color: var(--bz-ink-soft);
}
.cust-hero-btn--edit:hover { background: rgba(22,163,74,.12); color: var(--bz-leaf); }
.cust-hero-btn--delete { color: var(--bz-danger); }
.cust-hero-btn--delete:hover { background: var(--bz-danger); color: #fff; }

/* Hero layout: vertical stack (top row + stats row) */
.cust-hero { flex-direction: column; align-items: stretch; gap: 14px; }
.cust-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  z-index: 1;
  position: relative;
}
/* Hero top: info on right (start), actions on left (end) — auto margin pushes them apart */
.cust-hero-top { justify-content: flex-start; }
.cust-hero-info {
  flex: 1 1 auto;
  min-width: 200px;
}
.cust-hero-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-right: auto;  /* pushes actions to the END (left in RTL) */
}
.cust-hero-name-row { gap: 8px; }
.cust-hero-meta { row-gap: 6px; column-gap: 14px; }
.cust-hero-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bz-line), transparent);
  z-index: 1;
}

/* Info stats row inside hero — sized to content, gaps distributed flexibly */
.cust-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;   /* flexible spacing — adapts to content width */
  gap: 16px;
  z-index: 1;
  position: relative;
}
.cust-hero-stat {
  flex: 0 1 auto;     /* size to content (phone with 2 numbers still fits) */
  min-width: 0;
  max-width: 480px;
}
@media (max-width: 720px) {
  .cust-hero-stats { justify-content: flex-start; gap: 12px 20px; }
  .cust-hero-stat { flex: 1 1 100%; max-width: 100%; }
}
.cust-hero-stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
}
.cust-hero-stat-icon {
  width: 30px; height: 30px;
  background: rgba(22,163,74,.10);
  color: var(--bz-leaf);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cust-hero-stat.is-danger .cust-hero-stat-icon {
  background: rgba(220,38,38,.10);
  color: var(--bz-danger);
}
.cust-hero-stat-body { flex: 1; min-width: 0; }
.cust-hero-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bz-muted);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cust-hero-stat-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink);
  line-height: 1.4;
  word-break: break-word;
}
.cust-hero-stat.is-danger .cust-hero-stat-value { color: var(--bz-danger); }
.cust-hero-stat-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--bz-muted);
}
.cust-hero-stat-empty {
  color: var(--bz-muted);
  font-weight: 500;
}

/* Mobile: stack hero vertically */
@media (max-width: 720px) {
  .cust-hero { padding: 14px; gap: 12px; }
  .cust-hero-top { flex-wrap: wrap; gap: 12px; }
  .cust-hero-info { flex: 1 1 100%; order: 2; }
  .cust-hero-back { order: 1; }
  .cust-hero-actions { width: 100%; order: 3; }
  .cust-hero-btn { flex: 1; }
  .cust-hero-btn--edit, .cust-hero-btn--delete { flex: 0 0 38px; }
  .cust-hero-name { font-size: 18px; }
  .cust-hero-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ─── Invoice side panel (left in RTL) — full page height, transparent so receipt stands alone ─── */
.cust-orders-aside {
  position: sticky;
  top: 12px;
  background: transparent;
  border: 0;
  overflow: visible;
  height: auto;
  max-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
}
.cust-orders-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-emerald));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cust-orders-aside-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}
.cust-orders-aside-count {
  background: rgba(255,255,255,.20);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.cust-orders-aside-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cust-orders-aside-empty {
  text-align: center;
  padding: 30px 14px;
  color: var(--bz-muted);
  font-size: 12px;
}
.cust-orders-aside-empty svg { width: 70px; height: 70px; opacity: .8; margin-bottom: 6px; }
.cust-orders-aside-prev {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--bz-muted);
  text-transform: uppercase;
  margin: 12px 4px 6px;
}

/* ─── Full invoice card (latest order, detailed) ─── */
.invoice-full {
  background: #fff;
  border: 1px solid var(--bz-line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.invoice-full::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bz-emerald), var(--bz-leaf), #84cc16);
}
.invoice-full.is-shipped::before {
  background: linear-gradient(90deg, #0c4a6e, #0284c7, #38bdf8);
}

.invoice-full-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, rgba(22,163,74,.04), transparent);
}
.invoice-full-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--bz-muted);
  text-transform: uppercase;
}
.invoice-full-id {
  font-size: 18px;
  font-weight: 900;
  color: var(--bz-ink);
  letter-spacing: -.5px;
  margin-top: 2px;
}
.invoice-full-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-muted);
}

.invoice-full-items {
  padding: 4px 14px;
}
.invoice-line {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px dashed var(--bz-line);
  gap: 4px;
}
.invoice-line:last-child { border-bottom: 0; }
.invoice-line-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bz-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-line-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--bz-muted);
  font-variant-numeric: tabular-nums;
}
.invoice-line-qty { font-weight: 800; color: var(--bz-ink-soft); }
.invoice-line-x { opacity: .5; }
.invoice-line-price { color: var(--bz-ink-soft); }
.invoice-line-eq { opacity: .5; }
.invoice-line-total {
  margin-right: auto;
  font-weight: 800;
  color: var(--bz-emerald-deep);
  font-size: 12px;
}

.invoice-full-divider {
  border-top: 2px dashed var(--bz-line);
  margin: 0 14px;
}

.invoice-full-totals { padding: 10px 14px 12px; }
.invoice-full-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bz-ink-soft);
}
.invoice-full-grand {
  font-size: 22px;
  font-weight: 900;
  color: var(--bz-emerald-deep);
  font-variant-numeric: tabular-nums;
}
.invoice-full-grand small { font-size: 11px; font-weight: 700; color: var(--bz-muted); margin-right: 4px; }

.invoice-full-ship {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 10px;
  padding: 6px 10px;
  background: rgba(2,132,199,.08);
  color: #0c4a6e;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

.invoice-full-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--bz-line-soft);
}

/* ═══════════════════════════════════════════════════════════════════════
   RECEIPT — Polished invoice card (paper receipt look)
   ═══════════════════════════════════════════════════════════════════════ */
.receipt {
  position: relative;
  background: #fff;
  padding: 0 18px;
  font-family: inherit;
  color: #0c1c14;
  box-shadow:
    0 10px 30px -8px rgba(15,23,42,.18),
    0 4px 12px -2px rgba(15,23,42,.08);
  /* Subtle paper grain */
  background-image:
    repeating-linear-gradient(0deg, rgba(15,23,42,.005) 0 1px, transparent 1px 3px);
}

/* Perforated edges (top + bottom) — receipt look */
.receipt-perforation {
  height: 14px;
  background-image:
    radial-gradient(circle at 7px 7px, #f0f1ec 5.5px, transparent 6px);
  background-size: 14px 14px;
  background-repeat: repeat-x;
  margin: 0 -18px;
}
.receipt-perforation--top { background-position: 0 -7px; }
.receipt-perforation--bottom { background-position: 0 7px; }

/* Top brand header */
.receipt-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}
.receipt-brand-logo {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf));
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(11,61,32,.25);
  flex-shrink: 0;
}
.receipt-brand-text { flex: 1; line-height: 1.1; }
.receipt-brand-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.3px;
  background: linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-leaf));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.receipt-brand-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--bz-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 1px;
}
.receipt-ship-badge {
  width: 26px; height: 26px;
  background: rgba(2,132,199,.10);
  color: #0284c7;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}

/* Meta rows (invoice # + date) */
.receipt-meta { padding: 4px 0 12px; }
.receipt-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 11.5px;
}
.receipt-meta-label { color: var(--bz-muted); font-weight: 600; }
.receipt-meta-value { font-weight: 800; color: #0c1c14; font-variant-numeric: tabular-nums; }
.receipt-meta-value.is-danger { color: var(--bz-danger); }

/* Payment status badge (receipt meta + order cards) */
.receipt-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.receipt-pay-badge--paid    { background: #dcfce7; color: #166534; }
.receipt-pay-badge--unpaid  { background: #fef3c7; color: #92400e; }
.receipt-pay-badge--refund  { background: #fee2e2; color: #dc2626; }
.receipt-pay-badge--neutral { background: #e5e7eb; color: #374151; }
.receipt-pay-badge--paid::before    { content: "✓"; }
.receipt-pay-badge--unpaid::before  { content: "⏳"; }

/* Agent banner above the receipt */
.receipt-agent-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(132,204,22,.10));
  border-bottom: 1px dashed rgba(22,163,74,.25);
  margin: 0 -18px;
  padding: 10px 18px;
}
.receipt-agent-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.receipt-agent-info { display: flex; flex-direction: column; line-height: 1.15; }
.receipt-agent-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--bz-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.receipt-agent-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--bz-emerald-deep);
  margin-top: 2px;
}

/* Stack wrapper (just for structure clarity) */
.cust-detail-stack { display: flex; flex-direction: column; gap: 16px; }

/* Dividers */
.receipt-divider {
  height: 1px;
  background: #0c1c14;
  opacity: .12;
  margin: 0;
}
.receipt-divider--dashed {
  height: 0;
  border-top: 1px dashed #0c1c14;
  opacity: .25;
  background: transparent;
}
.receipt-divider--double {
  height: 4px;
  background: transparent;
  border-top: 1.5px solid #0c1c14;
  border-bottom: 1.5px solid #0c1c14;
  opacity: .65;
  margin: 8px 0;
}

/* Items */
.receipt-items { padding: 10px 0; display: flex; flex-direction: column; gap: 10px; }
.receipt-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.receipt-item-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0c1c14;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.receipt-item-calc {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--bz-muted);
  font-variant-numeric: tabular-nums;
}
.receipt-item-calc b { color: #0c1c14; font-weight: 800; }
.receipt-item-total {
  font-weight: 800;
  color: #15803d;
  font-size: 12.5px;
}

/* Summary mini-rows */
.receipt-summary { padding: 6px 0; }
.receipt-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
  color: var(--bz-muted);
}
.receipt-summary-row span:last-child { font-weight: 700; color: #0c1c14; }
.receipt-summary-row--pieces {
  margin-top: 4px;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.05));
  border-radius: 6px;
  color: #b45309;
}
.receipt-summary-row--pieces strong { font-size: 12px; }
/* Invoice money breakdown: subtotal → discount → shipping (→ tax/adjust) → grand total */
.receipt-money { padding: 4px 0; }
.receipt-money-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 3px 0;
  color: var(--bz-muted);
}
.receipt-money-row span:last-child { font-weight: 700; color: #0c1c14; font-variant-numeric: tabular-nums; }
.receipt-money-row--discount span:last-child { color: #dc2626; }
.receipt-money-row--shipping span:last-child { color: #166534; }
.receipt-money-row--adjust { color: var(--bz-muted); font-size: 11.5px; }
.receipt-money-row--adjust span:last-child { color: var(--bz-muted); font-weight: 600; }

/* Item breakdown + pieces line inside receipt */
.receipt-item-breakdown {
  font-size: 10.5px;
  color: var(--bz-muted);
  margin: 2px 0 4px;
  line-height: 1.4;
}
.receipt-item-pieces {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(245,158,11,.14);
  color: #b45309;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

/* Grand total — hero of the receipt */
.receipt-grand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 10px;
}
.receipt-grand-label {
  font-size: 12px;
  font-weight: 800;
  color: #0c1c14;
  letter-spacing: .2px;
}
.receipt-grand-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.receipt-grand-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--bz-emerald-deep);
  letter-spacing: -.5px;
  line-height: 1;
}
.receipt-grand-cur {
  font-size: 12px;
  font-weight: 700;
  color: var(--bz-muted);
}

/* Tracking info (if shipped) */
.receipt-tracking {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(2,132,199,.07);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0c4a6e;
  margin: 8px 0 0;
  font-family: monospace;
}
.receipt-tracking svg { color: #0284c7; }

/* Footer with action buttons */
.receipt-footer {
  display: flex;
  gap: 6px;
  padding: 12px 0 14px;
}
.receipt-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.receipt-btn--primary {
  background: var(--bz-leaf);
  color: #fff;
}
.receipt-btn--primary:hover {
  background: var(--bz-leaf-soft);
  box-shadow: 0 3px 8px rgba(22,163,74,.30);
  transform: translateY(-1px);
}
.receipt-btn--ghost {
  background: rgba(15,23,42,.05);
  color: var(--bz-ink-soft);
}
.receipt-btn--ghost:hover {
  background: rgba(15,23,42,.08);
  color: var(--bz-ink);
}

/* Shipped variant — blue accent */
.receipt.is-shipped .receipt-brand-name,
.receipt.is-shipped .receipt-grand-num { color: #0c4a6e; -webkit-text-fill-color: #0c4a6e; }
.receipt.is-shipped .receipt-brand-logo { background: linear-gradient(135deg, #0c4a6e, #0284c7); }
.receipt.is-shipped .receipt-item-total { color: #0284c7; }

/* Dark mode */

/* ─── Invoice card (receipt look) ─── */
.invoice-card {
  position: relative;
  display: flex;
  background: #fff;
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all .15s var(--ease-out);
  /* Wavy receipt edge at the bottom */
  filter: drop-shadow(0 1px 2px rgba(15,23,42,.04));
}
.invoice-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image:
    radial-gradient(circle at 4px 6px, transparent 3.5px, #fff 4px),
    radial-gradient(circle at 4px 6px, transparent 4px, var(--bz-line) 4.5px);
  background-size: 8px 6px;
  background-position: 0 0;
  background-repeat: repeat-x;
  pointer-events: none;
}
.invoice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(22,163,74,.35);
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}
.invoice-card-strip {
  width: 4px;
  background: linear-gradient(180deg, var(--bz-leaf), var(--bz-leaf-soft));
  flex-shrink: 0;
}
.invoice-card.is-shipped .invoice-card-strip {
  background: linear-gradient(180deg, #0284c7, #38bdf8);
}
.invoice-card-body {
  flex: 1;
  padding: 10px 12px 14px;
  min-width: 0;
}
.invoice-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--bz-muted);
  margin-bottom: 4px;
}
.invoice-card-id { font-weight: 800; color: var(--bz-ink-soft); }
.invoice-card-date { color: var(--bz-muted); }
.invoice-card-product {
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink);
  margin: 4px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invoice-card-qty { font-size: 11.5px; color: var(--bz-muted); font-weight: 600; }
.invoice-card-total {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-emerald-deep);
  font-variant-numeric: tabular-nums;
}
.invoice-card-ship {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0284c7;
  background: rgba(2,132,199,.08);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

/* ─── Modern Quick Actions tiles ─── */
.quick-actions-card {
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: var(--bz-shadow-sm);
}
.quick-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.quick-actions-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--bz-ink);
}
.quick-actions-sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--bz-muted);
  text-transform: uppercase;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 56px;
  gap: 6px;
}
@media (max-width: 900px) { .quick-actions-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 700px) { .quick-actions-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 500px) { .quick-actions-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px) { .quick-actions-grid { grid-template-columns: repeat(2, 1fr); } }
.qaction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.qaction span { font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.qaction svg { width: 16px; height: 16px; transition: transform .15s ease; }
.qaction:hover {
  transform: translateY(-2px);
  border-color: currentColor;
}
.qaction:hover svg { transform: scale(1.15); }

.qaction--leaf    { background: rgba(22,163,74,.08);  color: #15803d; }
.qaction--gold    { background: rgba(217,119,6,.10);  color: #b45309; }
.qaction--slate   { background: rgba(71,85,105,.10);  color: #334155; }
.qaction--success { background: rgba(34,197,94,.14);  color: #166534; }
.qaction--danger  { background: rgba(220,38,38,.10);  color: #b91c1c; }
.qaction--purple  { background: rgba(168,85,247,.10); color: #7e22ce; }
.qaction--indigo  { background: rgba(99,102,241,.10); color: #4338ca; }
.qaction--cyan    { background: rgba(6,182,212,.10);  color: #0e7490; }
.qaction--wa      { background: rgba(37,211,102,.10); color: #15803d; }
.qaction--sky     { background: rgba(56,189,248,.12); color: #0369a1; }

.qaction--leaf:hover    { background: var(--bz-leaf); color: #fff; box-shadow: 0 4px 12px rgba(22,163,74,.30); }
.qaction--gold:hover    { background: var(--bz-warning); color: #fff; box-shadow: 0 4px 12px rgba(217,119,6,.30); }
.qaction--slate:hover   { background: #475569; color: #fff; box-shadow: 0 4px 12px rgba(71,85,105,.30); }
.qaction--success:hover { background: #16a34a; color: #fff; box-shadow: 0 4px 12px rgba(22,163,74,.30); }
.qaction--danger:hover  { background: var(--bz-danger); color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,.30); }
.qaction--purple:hover  { background: #8b5cf6; color: #fff; box-shadow: 0 4px 12px rgba(139,92,246,.30); }
.qaction--indigo:hover  { background: #6366f1; color: #fff; box-shadow: 0 4px 12px rgba(99,102,241,.30); }
.qaction--cyan:hover    { background: #06b6d4; color: #fff; box-shadow: 0 4px 12px rgba(6,182,212,.30); }
.qaction--wa:hover      { background: #25d366; color: #fff; box-shadow: 0 4px 12px rgba(37,211,102,.30); }
.qaction--sky:hover     { background: #0284c7; color: #fff; box-shadow: 0 4px 12px rgba(2,132,199,.30); }

/* Status chips row */
.quick-actions-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bz-line-soft);
}
.quick-actions-status-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--bz-muted);
  letter-spacing: .3px;
  margin-left: 4px;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  color: var(--bz-ink-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s ease;
}
.status-chip:hover { background: rgba(22,163,74,.10); color: var(--bz-ink); }
.status-chip.is-active {
  background: linear-gradient(135deg, var(--bz-leaf), var(--bz-leaf-soft));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(22,163,74,.25);
}
.status-chip.is-active .status-chip-dot { background: #fff !important; }
.status-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Mobile only (< 768px): stack the layout — single column full-width, history pushed last via display:contents */
@media (max-width: 768px) {
  .cust-detail-layout {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: 1fr !important;
    gap: 12px;
    width: 100%;
  }
  /* display:contents flattens main so its children participate in parent flex (allows reordering across main/aside) */
  .cust-detail-main { display: contents; }
  .cust-detail-main > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    order: 1;
  }
  /* History card last */
  .cust-detail-main > .collapsible-card[id="history-card"] { order: 99; }
  .cust-detail-main > .cust-detail-stack { display: contents; }
  .cust-detail-stack > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    order: 1;
  }
  .cust-detail-stack > .collapsible-card[id="history-card"] { order: 99; }
  .cust-orders-aside {
    position: static;
    max-height: none;
    height: auto;
    order: 50;
    width: 100% !important;
    min-width: 0;
  }
  /* Force quick-actions card to fill width on mobile */
  .quick-actions-card { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* Tablet (768-1024px): narrower aside */
@media (max-width: 1100px) and (min-width: 769px) {
  .cust-detail-layout { grid-template-columns: 1fr 260px; gap: 14px; }
}

/* Smaller mobile tweaks — only info-grid + page padding (quick actions + receipt keep desktop styles) */
@media (max-width: 640px) {
  .cust-detail-page { padding: 8px !important; }
  .cust-info-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .cust-info-card { padding: 10px !important; min-height: 70px !important; }
  .cust-info-card.cust-info-card--phone { grid-column: 1 / -1; }  /* phone card full width */
  .cust-info-head { font-size: 10.5px !important; }
  .cust-info-value { font-size: 13px !important; }
  /* Empty state aside button */
  .cust-orders-aside-empty .btn { width: auto !important; }

}

/* ═══════════════════════════════════════════════════════════════════════
   STAFF CHAT — Odoo-style layout (DMs sidebar + main chat)
   Desktop: sidebar always visible alongside chat
   Mobile: sidebar shows by default; toggles to chat when one is opened
   ═══════════════════════════════════════════════════════════════════════ */
.schat-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 80px);
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius-lg);
  overflow: hidden;
  box-shadow: var(--bz-shadow-md);
}

/* ─── Sidebar — refined olive palette ─── */
.schat-sidebar {
  background: linear-gradient(180deg, #f7faf6 0%, #eef4ea 100%);
  border-left: 1px solid rgba(11,30,18,.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.schat-search-wrap {
  position: relative;
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.schat-search-wrap svg {
  position: absolute;
  right: 24px;
  color: var(--bz-muted);
  pointer-events: none;
}
.schat-search {
  width: 100%;
  height: 34px !important;
  padding: 0 36px 0 12px !important;
  background: var(--bz-card) !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}
.schat-search:focus {
  outline: 0;
  border-color: var(--bz-leaf) !important;
  box-shadow: var(--focus-ring) !important;
}

.schat-section { padding: 4px 0; display: flex; flex-direction: column; min-height: 0; }
.schat-section.is-collapsed .schat-section-list { display: none; }
.schat-section.is-collapsed .schat-section-chev { transform: rotate(-90deg); }
.schat-section-row { display: flex; align-items: center; justify-content: space-between; padding-left: 8px; }
.schat-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: var(--bz-ink-soft);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: right;
  user-select: none;
  border-radius: 6px;
  margin: 0 6px;
  transition: background .12s ease, color .12s ease;
}
.schat-section-head:hover { color: var(--bz-ink); background: rgba(15,23,42,.04); }

.schat-section-chev {
  display: inline-flex;
  align-items: center;
  color: var(--bz-muted);
  transition: transform .18s ease;
}
.schat-section-add {
  width: 22px; height: 22px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--bz-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.schat-section-add:hover { background: rgba(22,163,74,.10); color: var(--bz-leaf); }

/* Channel item (with # prefix) */
.schat-channel-hash {
  color: var(--bz-muted);
  font-weight: 800;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.schat-item.is-active .schat-channel-hash { color: var(--bz-leaf); }
.schat-header-channel {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf));
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 900;
}

/* Channel message format (with author + avatar) */
.schat-msg.is-channel { max-width: 80%; }
.schat-msg-row { display: flex; gap: 8px; align-items: flex-start; }
.schat-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-top: 18px;
}
.schat-msg-body { flex: 1; min-width: 0; }
.schat-msg-author {
  font-size: 11px;
  font-weight: 800;
  color: var(--bz-leaf);
  margin-bottom: 4px;
}
.schat-section-list { display: flex; flex-direction: column; overflow-y: auto; max-height: 38vh; }
.schat-list-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--bz-muted);
  font-size: 12px;
}

.schat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  color: var(--bz-ink);
  font-size: 13px;
  transition: background .12s ease;
}
.schat-item:hover { background: rgba(15,23,42,.04); }
.schat-item.is-active {
  background: rgba(22,163,74,.10);
  color: var(--bz-ink);
  font-weight: 700;
}

.schat-item-avatar { position: relative; flex-shrink: 0; }
.schat-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.schat-online-dot {
  position: absolute;
  bottom: -1px; left: -1px;
  width: 9px; height: 9px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--bz-card);
}
.schat-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schat-item-badge {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.schat-item-mute {
  display: inline-flex;
  align-items: center;
  color: var(--bz-muted);
  opacity: .65;
}
.schat-item.is-muted .schat-item-name { color: var(--bz-muted); }

/* Muted pill next to chat name in header */
.schat-muted-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--bz-muted);
  background: rgba(15,23,42,.06);
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Icon button on/active state (mute toggle) */
.schat-icon-btn.is-on {
  background: rgba(239,68,68,.10);
  color: #dc2626;
}
.schat-icon-btn.is-on:hover { background: rgba(239,68,68,.14); }

/* Mention inline pill inside bubbles */
.schat-mention {
  display: inline-block;
  padding: 0 5px;
  background: rgba(22,163,74,.14);
  color: var(--bz-leaf);
  border-radius: 5px;
  font-weight: 700;
}
.schat-msg.is-me .schat-mention {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.schat-mention.is-me {
  background: rgba(245,158,11,.18);
  color: #b45309;
  box-shadow: 0 0 0 1px rgba(245,158,11,.35) inset;
}

/* Message bubble highlight when current user is @mentioned */
.schat-msg.is-mentioned.is-other .schat-bubble {
  border-color: #f59e0b !important;
  background: linear-gradient(180deg, rgba(254,243,199,.55), rgba(254,243,199,.18));
  box-shadow: 0 0 0 1px rgba(245,158,11,.20);
}

/* Mention typeahead popup (above composer) */
.schat-composer-input { position: relative; }
.schat-mention-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  left: 0;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(11,30,18,.12);
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 30;
}
.schat-mention-popup.hidden { display: none; }
.schat-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--bz-ink);
  text-align: right;
}
.schat-mention-item:hover,
.schat-mention-item.is-active { background: rgba(22,163,74,.10); }
.schat-mention-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ─── Main chat area ─── */
.schat-main {
  display: flex;
  flex-direction: column;
  background: var(--bz-card);
  overflow: hidden;
}

.schat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--bz-muted);
  gap: 8px;
  padding: 40px;
}
.schat-empty-icon {
  color: var(--bz-line);
  margin-bottom: 8px;
}
.schat-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--bz-ink-soft);
}
.schat-empty-sub {
  font-size: 12.5px;
  color: var(--bz-muted);
}

/* Chat header */
.schat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--bz-line);
  background: var(--bz-card);
}
.schat-back {
  display: none;
  width: 32px; height: 32px;
  background: rgba(15,23,42,.05);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--bz-ink-soft);
}
.schat-back:hover { background: rgba(15,23,42,.10); }
.schat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.schat-header-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.schat-header-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-ink);
}
.schat-header-status {
  font-size: 11px;
  color: var(--bz-muted);
  margin-top: 1px;
}
.schat-header-status.is-online::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.schat-header-actions { display: flex; gap: 4px; }
.schat-icon-btn {
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--bz-ink-soft);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.schat-icon-btn:hover { background: rgba(15,23,42,.06); color: var(--bz-ink); }

/* Messages area */
.schat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bz-bg);
}
.schat-msgs-empty {
  margin: auto;
  text-align: center;
  color: var(--bz-muted);
  font-size: 12.5px;
}
.schat-msgs-empty-title { font-weight: 800; color: var(--bz-ink-soft); margin-top: 8px; font-size: 14px; }
.schat-msgs-empty-sub { font-size: 11.5px; margin-top: 2px; }
.schat-msgs-empty svg { color: var(--bz-line); }

.schat-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  margin-bottom: 2px;
}
.schat-msg.is-me { align-self: flex-start; align-items: flex-start; }
.schat-msg.is-other { align-self: flex-end; align-items: flex-end; }

.schat-bubble {
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.schat-msg.is-me .schat-bubble {
  background: linear-gradient(135deg, var(--bz-leaf), var(--bz-leaf-soft));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.schat-msg.is-other .schat-bubble {
  background: var(--bz-card);
  color: var(--bz-ink);
  border: 1px solid var(--bz-line);
  border-bottom-left-radius: 4px;
}
.schat-msg-time {
  font-size: 10px;
  color: var(--bz-muted);
  margin-top: 3px;
  padding: 0 6px;
}

/* Message hover menu (delete for everyone / delete for me) */
.schat-bubble-wrap { display: flex; align-items: center; gap: 4px; }
.schat-msg.is-other .schat-bubble-wrap { flex-direction: row-reverse; }
.schat-msg-menu-btn {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--bz-muted);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
  display: flex; align-items: center; justify-content: center;
}
.schat-msg:hover .schat-msg-menu-btn { opacity: .65; }
.schat-msg-menu-btn:hover { opacity: 1; background: var(--bz-line); }
@media (hover: none) { .schat-msg-menu-btn { opacity: .5; } }

.msg-menu {
  position: fixed;
  z-index: 9999;
  min-width: 170px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: msgMenuIn .12s ease;
}
@keyframes msgMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--bz-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  border-radius: 8px;
  cursor: pointer;
}
.msg-menu-item:hover { background: var(--bz-bg); }
.msg-menu-item.is-danger { color: #dc2626; }
.msg-menu-item.is-danger:hover { background: rgba(220, 38, 38, .1); }

/* Composer */
.schat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--bz-line);
  background: var(--bz-card);
}
.schat-composer-input {
  flex: 1;
  background: rgba(15,23,42,.04);
  border-radius: 22px;
  padding: 8px 16px;
}

.schat-composer-input input {
  width: 100%;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  color: var(--bz-ink);
}
.schat-composer-input input:focus { outline: 0; box-shadow: none !important; }
.schat-send-btn {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf));
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(22,163,74,.30);
}
.schat-send-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 12px rgba(22,163,74,.40);
}

/* Mobile chat layout — sidebar shows by default, toggles to chat when one is opened */
@media (max-width: 768px) {
  .schat-wrap {
    grid-template-columns: 1fr;
    height: calc(100vh - 70px);
    border-radius: var(--bz-radius-md);
  }
  .schat-sidebar { border-left: 0; border-bottom: 1px solid rgba(11,30,18,.07); }
  /* Default: only sidebar visible */
  .schat-wrap:not(.chat-open) .schat-main { display: none; }
  .schat-wrap:not(.chat-open) .schat-sidebar { display: flex; height: calc(100vh - 70px); }
  /* When a channel/DM is open: only chat visible, sidebar hidden */
  .schat-wrap.chat-open .schat-sidebar { display: none; }
  .schat-wrap.chat-open .schat-main { display: flex; height: calc(100vh - 70px); }
  /* Show back button on mobile */
  .schat-back { display: inline-flex !important; }
  /* Larger section list on mobile (no need to share with chat) */
  .schat-section-list { max-height: none; }

  /* legacy mobile (moved here from prev media block) */
  #history-card .tabs-bar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    background: rgba(15,23,42,.04);
    padding: 4px !important;
    border-radius: 10px;
    margin-bottom: 12px !important;
  }
  #history-card .tabs-bar .tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 34px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: var(--bz-ink-soft) !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  #history-card .tabs-bar .tab.active {
    background: var(--bz-card) !important;
    color: var(--bz-leaf) !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.08) !important;
  }
  #history-card .tabs-bar .tab svg { width: 12px; height: 12px; }

}

/* ═══════════════════════════════════════════════════════════════════════
   INTERNAL CHAT — modern messaging redesign (v2)
   Appended AFTER the base .schat-* rules so these win by source order.
   Visual-only; markup/behavior unchanged (grouping uses an additive
   .is-grouped class added in renderChannelMessages/renderStaffChatMessages).
   RTL-correct (start = right). Reuses brand-green tokens only.
   ═══════════════════════════════════════════════════════════════════════ */

/* Message area → warm, subtle background with a faint dotted texture (symmetric → RTL-safe). */
.schat-messages {
  padding: 18px 22px !important;
  gap: 2px !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(21,128,61,.045) 1px, transparent 1.7px) 0 0 / 22px 22px,
    linear-gradient(180deg, #f6faf4 0%, #eef5ea 100%) !important;
}

/* Bubbles → softer, rounder, with gentle depth. */
.schat-bubble {
  border-radius: 16px;
  padding: 9px 14px;
  box-shadow: 0 1px 1.5px rgba(11,30,18,.05);
}
.schat-msg.is-me .schat-bubble {
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf));
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 3px rgba(21,128,61,.28);
}
.schat-msg.is-other .schat-bubble {
  background: #ffffff;
  color: var(--bz-ink);
  border: 1px solid rgba(11,30,18,.06);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(11,30,18,.07);
}
.schat-msg-time { font-size: 10px; opacity: .85; }
.schat-msg-author { color: var(--bz-leaf); font-weight: 800; }

/* Grouped consecutive messages from the same sender → hide repeated avatar/name, tighten. */
.schat-msg.is-grouped { margin-top: 0; }
.schat-msg.is-grouped .schat-msg-author { display: none; }
.schat-msg.is-channel.is-grouped .schat-msg-avatar { visibility: hidden; margin-top: 0; }

/* Sidebar rows → inset rounded rows, clearer hover, STRONG active w/ start accent bar. */
.schat-item {
  position: relative;
  width: auto;
  margin: 1px 6px;
  border-radius: 10px;
  padding: 8px 12px;
}
.schat-item:hover { background: rgba(15,23,42,.05); }
.schat-item.is-active {
  background: rgba(21,128,61,.12);
  color: var(--bz-ink);
  font-weight: 800;
}
.schat-item.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--bz-leaf);
}

/* Empty states → friendly icon medallion + clean text (not faint/lost). */
.schat-msgs-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.schat-msgs-empty > div:first-child {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,128,61,.08);
}
.schat-msgs-empty svg { color: var(--bz-leaf) !important; }
.schat-empty-icon {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,128,61,.08);
  color: var(--bz-leaf);
  margin-bottom: 4px;
}
.schat-empty-icon svg { color: var(--bz-leaf) !important; }

/* Composer → pill input with green focus ring + slightly larger send. */
.schat-composer-input {
  background: #fff;
  border: 1.5px solid var(--bz-line);
  border-radius: 24px;
  padding: 9px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.schat-composer-input:focus-within {
  border-color: var(--bz-leaf);
  box-shadow: 0 0 0 3px rgba(21,128,61,.12);
}
.schat-send-btn { width: 40px; height: 40px; }
.schat-header-status.is-online { color: var(--bz-leaf); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   ORDER EDIT MODAL + PRINT SIZE MODAL
   ═══════════════════════════════════════════════════════════════════════ */

.order-modal { display: flex; flex-direction: column; gap: 14px; }
.order-modal-section { display: flex; flex-direction: column; gap: 8px; }
.order-modal-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--bz-muted);
  text-transform: uppercase;
}

.order-item-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: rgba(15,23,42,.025);
  border: 1px solid var(--bz-line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.order-item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--bz-leaf);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 18px;
}
/* Row layout: المنتج | المقاس | الكمية | (عدد القطع). Flex-wrap adapts to a variable field
   count (the size column only exists for products WITH variants) and WRAPS on narrow widths
   instead of overlapping. RTL-correct: first DOM field (name) sits rightmost. */
.order-item-fields {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.order-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.order-item-body .order-item-fields { width: 100%; }
.order-item-fields .order-item-field { min-width: 0; }
.order-item-field--name   { flex: 1 1 170px; min-width: 150px; }
.order-item-field--size   { flex: 1 1 175px; min-width: 150px; max-width: 240px; }  /* fits "كرتونة ١٢ زجاجة"; long outliers ellipsize, full list on open */
.order-item-field--qty    { flex: 0 0 84px; }
.order-item-field--pieces { flex: 0 0 84px; }
@media (max-width: 560px) {
  /* narrow: product name takes the whole first line; size/qty/pieces wrap below it */
  .order-item-field--name { flex: 1 1 100%; }
  .order-item-field--size { max-width: none; }
}
/* Pricing / discount panel below the fields — compact */
.order-item-pricing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bz-card);
  border: 1px solid var(--bz-line);
  border-radius: 9px;
  padding: 7px 9px;
}
.oip-cell { display: flex; flex-direction: column; gap: 3px; }
.oip-label { font-size: 10px; font-weight: 700; color: var(--bz-muted); letter-spacing: .2px; }
.oip-orig {
  height: 30px; display: flex; align-items: center;
  font-size: 13px; font-weight: 800; color: var(--bz-ink);
}
.oip-orig.is-struck { text-decoration: line-through; text-decoration-color: var(--bz-danger); color: var(--bz-muted); font-weight: 700; }
.order-item-pricing .oip-pct,
.order-item-pricing .oip-final {
  height: 30px; width: 58px;
  border: 1px solid var(--bz-line); border-radius: 7px;
  padding: 0 6px;
  background: var(--bz-bg);
  font-size: 13px; font-weight: 700; font-family: inherit; color: var(--bz-ink);
  text-align: center;
}
.order-item-pricing .oip-final { width: 72px; }
.order-item-pricing .oip-pct:focus,
.order-item-pricing .oip-final:focus { outline: none; border-color: var(--bz-leaf); box-shadow: 0 0 0 2px rgba(94,142,62,.15); }
.order-item-pricing .oip-final { color: var(--bz-leaf); border-color: rgba(94,142,62,.4); background: rgba(94,142,62,.06); }
.oip-savings {
  margin-inline-start: auto;
  background: #16a34a;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}
.order-item-pricing--locked { gap: 8px; }
.order-item-pricing--locked .oip-orig { height: auto; }
.oip-lock { font-size: 12px; opacity: .6; }
@media (max-width: 560px) {
  .oip-savings { margin-inline-start: 0; }
}
/* Read-only customer header for order forms tied to an existing customer
   (add-order) — shows who the order is for, styled like the item rows. */
.order-cust-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.oci-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(15,23,42,.025);
  border: 1px solid var(--bz-line);
  border-radius: 9px;
  padding: 8px 12px;
  min-width: 0;
}
.oci-label { font-size: 10.5px; font-weight: 700; color: var(--bz-muted); letter-spacing: .2px; }
.oci-value { font-size: 14px; font-weight: 800; color: var(--bz-ink); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .order-cust-info { grid-template-columns: 1fr; }
}

.order-item-field label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bz-muted);
  margin-bottom: 4px;
  letter-spacing: .3px;
}
.order-item-field select,
.order-item-field input {
  height: 36px !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 7px !important;
  padding: 0 10px !important;
  background: var(--bz-card) !important;
  font-size: 12.5px !important;
  width: 100% !important;
}
.order-item-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: rgba(220,38,38,.10);
  color: var(--bz-danger);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s ease;
  align-self: center;
  flex-shrink: 0;
}
.order-item-del:hover:not(:disabled) {
  background: var(--bz-danger);
  color: #fff;
}
.order-item-del:disabled { opacity: .3; cursor: not-allowed; }

.add-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1.5px dashed var(--bz-line);
  border-radius: 9px;
  color: var(--bz-leaf);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.add-item-btn:hover {
  background: rgba(22,163,74,.06);
  border-color: var(--bz-leaf);
  border-style: solid;
}

.order-modal-addr {
  height: 38px !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: var(--bz-card) !important;
  width: 100% !important;
}
.order-modal-addr:focus { border-color: var(--bz-leaf) !important; box-shadow: var(--focus-ring) !important; outline: 0; }

.order-modal-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(22,163,74,.06), rgba(132,204,22,.10));
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 10px;
  margin-top: 4px;
}
.order-modal-total-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-ink-soft);
}
.order-modal-total-value {
  font-size: 24px;
  font-weight: 900;
  color: var(--bz-emerald-deep);
  font-variant-numeric: tabular-nums;
}
.order-modal-total-value small {
  font-size: 12px;
  font-weight: 700;
  color: var(--bz-muted);
  margin-right: 4px;
}

/* ─── Print size modal ─── */
.print-size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.print-size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  background: var(--bz-card);
  border: 1.5px solid var(--bz-line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s var(--ease-out);
  font-family: inherit;
}
.print-size-card:hover {
  transform: translateY(-3px);
  border-color: var(--bz-leaf);
  box-shadow: 0 8px 20px rgba(22,163,74,.18);
}
.print-size-icon {
  color: var(--bz-ink-soft);
  margin-bottom: 4px;
  transition: color .15s ease;
}
.print-size-card:hover .print-size-icon { color: var(--bz-leaf); }
.print-size-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--bz-ink);
  letter-spacing: -.2px;
}
.print-size-dim {
  font-size: 11px;
  color: var(--bz-muted);
  font-variant-numeric: tabular-nums;
}
.print-size-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bz-leaf);
  background: rgba(22,163,74,.08);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
  letter-spacing: .3px;
}

/* Each variant has a small color accent */
.print-size-card--a4 .print-size-icon       { color: #0284c7; }
.print-size-card--a5 .print-size-icon       { color: var(--bz-leaf); }
.print-size-card--thermal .print-size-icon  { color: var(--bz-gold); }
.print-size-card--a4 .print-size-hint       { color: #0284c7; background: rgba(2,132,199,.10); }
.print-size-card--a5 .print-size-hint       { color: var(--bz-leaf); background: rgba(22,163,74,.10); }
.print-size-card--thermal .print-size-hint  { color: var(--bz-gold); background: rgba(184,134,43,.12); }

.print-size-card--a4:hover       { border-color: #0284c7; box-shadow: 0 8px 20px rgba(2,132,199,.18); }
.print-size-card--a5:hover       { border-color: var(--bz-leaf); box-shadow: 0 8px 20px rgba(22,163,74,.18); }
.print-size-card--thermal:hover  { border-color: var(--bz-gold); box-shadow: 0 8px 20px rgba(184,134,43,.18); }

@media (max-width: 480px) {
  .print-size-grid { grid-template-columns: 1fr; }
}

/* ═══════════════ BULK ACTION MODAL ═══════════════ */
.bulk-modal { display: flex; flex-direction: column; gap: 16px; }
.bulk-quick-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bz-muted);
  margin-bottom: 8px;
}
.bulk-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.bulk-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s var(--ease-out);
}
.bulk-quick-btn:hover { transform: translateY(-1px); }
.bulk-quick-btn svg { flex-shrink: 0; }

.bulk-quick-btn--confirm {
  background: rgba(22,163,74,.10);
  color: #15803d;
  border-color: rgba(22,163,74,.25);
}
.bulk-quick-btn--confirm:hover {
  background: var(--bz-leaf);
  color: #fff;
  border-color: var(--bz-leaf);
  box-shadow: 0 4px 12px rgba(22,163,74,.35);
}
.bulk-quick-btn--reject {
  background: rgba(220,38,38,.08);
  color: #b91c1c;
  border-color: rgba(220,38,38,.22);
}
.bulk-quick-btn--reject:hover {
  background: var(--bz-danger);
  color: #fff;
  border-color: var(--bz-danger);
  box-shadow: 0 4px 12px rgba(220,38,38,.35);
}
.bulk-quick-btn--postpone {
  background: rgba(217,119,6,.10);
  color: #b45309;
  border-color: rgba(217,119,6,.25);
}
.bulk-quick-btn--postpone:hover {
  background: var(--bz-warning);
  color: #fff;
  border-color: var(--bz-warning);
  box-shadow: 0 4px 12px rgba(217,119,6,.35);
}
.bulk-quick-btn--ship {
  background: rgba(2,132,199,.10);
  color: #075985;
  border-color: rgba(2,132,199,.25);
}
.bulk-quick-btn--ship:hover {
  background: #0284c7;
  color: #fff;
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2,132,199,.40);
}
/* Status-only "mark as shipped" — teal, matching the "تم الشحن" status badge (#0891b2) */
.bulk-quick-btn--mark-shipped {
  background: rgba(8,145,178,.10);
  color: #0e7490;
  border-color: rgba(8,145,178,.25);
}
.bulk-quick-btn--mark-shipped:hover {
  background: #0891b2;
  color: #fff;
  border-color: #0891b2;
  box-shadow: 0 4px 12px rgba(8,145,178,.40);
}
.bulk-quick-btn--delete {
  background: transparent;
  color: var(--bz-danger);
  border: 1.5px solid rgba(220,38,38,.35);
  border-style: dashed;
}
.bulk-quick-btn--delete:hover {
  background: var(--bz-danger);
  color: #fff;
  border-color: var(--bz-danger);
  border-style: solid;
  box-shadow: 0 4px 12px rgba(220,38,38,.45);
}

.bulk-divider {
  position: relative;
  text-align: center;
  margin: 4px 0;
}
.bulk-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--bz-line);
}
.bulk-divider span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: var(--bz-card);
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-muted);
  letter-spacing: .5px;
}

.bulk-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bulk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bulk-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--bz-ink-soft);
}
.bulk-select {
  height: 38px !important;
  border: 1px solid var(--bz-line) !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  background: var(--bz-card) !important;
  width: 100% !important;
}
.bulk-select:focus { border-color: var(--bz-leaf) !important; box-shadow: var(--focus-ring) !important; outline: 0; }

.bulk-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(254,243,199,.7), rgba(254,215,170,.5));
  border: 1px solid rgba(217,119,6,.25);
  border-right: 4px solid var(--bz-warning);
  border-radius: 9px;
  font-size: 12.5px;
  color: #7c2d12;
}
.bulk-warning svg { color: var(--bz-warning); flex-shrink: 0; }

@media (max-width: 560px) {
  .bulk-form { grid-template-columns: 1fr; }
  .bulk-quick-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SaaS POLISH WAVE — Glass cards, refined topbar, sound bell, illustrations, animations
   ═══════════════════════════════════════════════════════════════════════ */

/* Cairo: prefer semibold (600) for headings & labels for finer look */
body { font-weight: 500; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.2px; }

/* ─── Glass cards: subtle blur + translucent bg + soft border ─── */
.card,
.dash-kpi-mini,
.collapsible-card {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 1px 2px rgba(11,30,18,.04),
    0 8px 24px rgba(11,30,18,.06);
}
.card:hover,
.dash-kpi-mini:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(22,163,74,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 4px 12px rgba(11,30,18,.06),
    0 16px 32px rgba(11,30,18,.10);
  transform: translateY(-2px);
}

/* ─── Refined topbar — heavier glass + softer shadow ─── */
#topbar {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255,255,255,.5) !important;
  box-shadow: 0 1px 0 rgba(11,30,18,.02), 0 4px 24px rgba(11,30,18,.05) !important;
}

/* ─── Notification bell: match other topbar icons ─── */
.fx-notif-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--bz-line);
  color: var(--bz-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s var(--ease-out);
}
.fx-notif-btn:hover {
  background: #fff;
  color: var(--bz-leaf);
  border-color: rgba(22,163,74,.4);
  transform: translateY(-1px);
}
.fx-notif-btn svg { display: block; }

/* New-notification ring pulse */
.fx-notif-btn.has-new::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 11px;
  border: 2px solid rgba(22,163,74,.6);
  animation: notif-ring 1.2s ease-out 2;
  pointer-events: none;
}
@keyframes notif-ring {
  0%   { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ─── Hero KPI: subtle pattern, compact padding ─── */
.dash-kpi-hero {
  padding: 18px 20px !important;
  background:
    radial-gradient(circle at 80% 20%, rgba(132,204,22,.22), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(214,168,74,.10), transparent 60%),
    linear-gradient(135deg, var(--bz-emerald-deep), var(--bz-emerald) 65%, var(--bz-leaf)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 6px 20px rgba(11,61,32,.22),
    0 14px 40px rgba(11,61,32,.12) !important;
}
/* Faint mesh pattern overlay */
.dash-kpi-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px);
  pointer-events: none;
  z-index: 1;
}

.dash-kpi-hero-value { font-size: 36px !important; }
.dash-kpi-hero-label { font-size: 11px !important; }
.dash-kpi-hero-content { gap: 6px !important; }
.dash-kpi-hero-meta { font-size: 11.5px !important; }

/* Smoother sparkline glow */
.dash-spark svg path:nth-of-type(2) {
  filter: drop-shadow(0 0 4px rgba(190,242,100,.4));
}

/* ─── Add-order primary button: gradient + glow hover ─── */
.btn-primary {
  background: linear-gradient(135deg, var(--bz-emerald), var(--bz-leaf) 55%, #84cc16) !important;
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position .35s ease, transform .15s var(--ease-out), box-shadow .2s var(--ease-out) !important;
  box-shadow: 0 4px 14px rgba(22,163,74,.30) !important;
}
.btn-primary:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 22px rgba(22,163,74,.50),
    0 0 0 4px rgba(132,204,22,.15) !important;
}

/* ─── Empty state illustration sizing ─── */
.empty-illust {
  width: 88px;
  height: 88px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 4px 12px rgba(11,30,18,.10));
}
.empty-illust svg { width: 100%; height: 100%; display: block; }
.empty-state-title { font-size: 14px; font-weight: 700; color: var(--bz-ink); margin-bottom: 2px; }
.empty-state-sub   { font-size: 12px; color: var(--bz-muted); }
.empty-state { padding: 16px 14px; }

/* ─── Fade-up entrance for stat cards ─── */
@keyframes saas-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-kpis > * {
  opacity: 1;
  animation: saas-fade-up .45s var(--ease-out) both;
}
.dash-kpis > *:nth-child(1) { animation-delay: 0ms; }
.dash-kpis > *:nth-child(2) { animation-delay: 60ms; }
.dash-kpis > *:nth-child(3) { animation-delay: 120ms; }
.dash-kpis > *:nth-child(4) { animation-delay: 180ms; }

/* ─── Sparkline: keep edges crisp at hover ─── */
.dash-spark svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.22)); }

/* ═══════════════ J&T EXCEL TOOLS — polished cards + custom file upload ═══════════════ */
.jt-tools-header { margin-bottom: 20px; }
.jt-tools-title { font-size: 22px; font-weight: 800; color: var(--bz-ink); letter-spacing: -.2px; }
.jt-tools-sub { font-size: 13px; color: var(--bz-muted); margin-top: 5px; }

/* Grid: equal-height rows so all 4 cards line up regardless of input count */
.jt-grid { gap: 16px; align-items: stretch; }

/* Card: flex column so the action button pins to the bottom on every card */
.jt-card {
  display: flex;
  flex-direction: column;
  padding: 20px !important;
  height: 100%;
}

.jt-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.jt-card-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--bz-radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #15803d;        /* UI cleanup: olive icon on a transparent chip */
  background: transparent;
}
.jt-card-titles { min-width: 0; }
.jt-card-title { font-weight: 800; font-size: 15px; color: var(--bz-ink); line-height: 1.3; }
.jt-card-desc { font-size: 11.5px; color: var(--bz-muted); margin-top: 2px; }

/* Field stack — grows to fill, keeping buttons aligned across cards */
.jt-fields { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }

/* Custom file upload control (native input hidden inside the label) */
.jt-file {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--bz-line);
  border-radius: var(--bz-radius);
  background: var(--bz-bg);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.jt-file:hover {
  border-color: var(--bz-leaf);
  background: rgba(22,163,74,.06);
}
.jt-file input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.jt-file-icon {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,163,74,.1);
  color: var(--bz-leaf);
  transition: background .18s ease, color .18s ease;
}
.jt-file-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.jt-file-label { font-size: 12.5px; font-weight: 700; color: var(--bz-ink-soft); }
.jt-file-name {
  font-size: 11.5px; color: var(--bz-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jt-file-action {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700;
  color: var(--bz-leaf);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(22,163,74,.1);
  transition: background .18s ease, color .18s ease;
}
.jt-file:hover .jt-file-action { background: var(--bz-leaf); color: #fff; }

/* Filled state — a file is chosen */
.jt-file[data-empty="0"] {
  border-style: solid;
  border-color: var(--bz-leaf);
  background: rgba(22,163,74,.07);
}
.jt-file[data-empty="0"] .jt-file-icon { background: var(--bz-leaf); color: #fff; }
.jt-file[data-empty="0"] .jt-file-name { color: var(--bz-ink); font-weight: 600; }

/* Action button pinned to the bottom of every card */
.jt-card-btn { width: 100%; margin-top: 16px; height: 42px; }
.jt-result:not(:empty) { margin-top: 12px; }

@media (max-width: 640px) {
  .jt-card { padding: 16px !important; }
}

/* ═══════ J&T Excel Tools — align with premium design (2026-06-16) ═══════ */
.jt-grid { gap: 20px; }                         /* match dashboard .g2 rhythm */
.jt-card { border-radius: var(--bz-radius-lg) !important; }  /* same soft corners as dash cards */
.jt-card-btn {                                  /* refined primary, not bulky */
  height: 44px;
  font-size: 13.5px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(22,163,74,.22) !important;
}

/* FIX (2026-06-16): style-bosta.css has a shared `[class*="-card"]` rule that
   frames ANY class containing "-card" as a mini white card. The jt-card BEM
   children (jt-card-head/-titles/-title/-desc/-icon) all contain "-card", so each
   got a stray white box + border around it. Re-flatten the inner header/title
   elements — only the outer .jt-card keeps its frame. Descendant selector +
   !important beats the [class*="-card"] wildcard regardless of stylesheet order. */
.jt-card .jt-card-head,
.jt-card .jt-card-titles,
.jt-card .jt-card-title,
.jt-card .jt-card-desc {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Icon chip: fully transparent background + uniform olive icon (UI cleanup).
   !important + the descendant selector beat the [class*="-card"] wildcard's white fill. */
.jt-card .jt-card-icon {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--bz-radius-lg) !important;
  box-shadow: none !important;
  color: #15803d !important;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD REDESIGN — fully scoped under .dash-redesign (this page only)
   (Dead CSS as of the June 10 reset — no matching markup; kept harmless.)
   ════════════════════════════════════════════════════════════════════ */
.dash-redesign {
  background: #f7f3ea;
  border-radius: 18px;
  padding: 18px 18px 6px;
}

/* Scoped top bar */
.dash-redesign .dr-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(40, 60, 40, .06);
  border-radius: 16px; padding: 10px 14px;
  box-shadow: 0 4px 18px rgba(20, 40, 25, .06);
  margin-bottom: 16px;
}
.dash-redesign .dr-topbar-user { display: flex; align-items: center; gap: 10px; }
.dash-redesign .dr-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #2f6b3d, #1c4327); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.dash-redesign .dr-topbar-name { font-size: 13px; font-weight: 800; color: #1c3a26; }
.dash-redesign .dr-topbar-role { font-size: 11px; font-weight: 600; color: #6b8273; }
.dash-redesign .dr-icon-btn {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(40, 60, 40, .08); background: #fff; color: #3a5a40;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dash-redesign .dr-icon-btn:hover { background: #f1f6ef; color: #1f7a44; }
.dash-redesign .dr-live { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #1f7a44; }
.dash-redesign .dr-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
  animation: drPulse 1.8s infinite;
}
@keyframes drPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Hero */
.dash-redesign .dr-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fbf8f1, #f1eadc);
  border: 1px solid rgba(120, 140, 110, .14);
  border-radius: 18px; padding: 26px 28px; margin-bottom: 18px;
  box-shadow: 0 8px 26px rgba(40, 60, 40, .06);
}
.dash-redesign .dr-hero-art { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); opacity: .45; pointer-events: none; }
.dash-redesign .dr-hero-text { position: relative; z-index: 1; text-align: center; }
.dash-redesign .dr-hero-title { margin: 0; font-size: 26px; font-weight: 900; color: #1d3a26; }
.dash-redesign .dr-hero-sub { margin-top: 6px; font-size: 13px; font-weight: 600; color: #6f8576; }
.dash-redesign .dr-hero-actions { position: relative; z-index: 1; margin-top: 16px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* KPI grid: hero (kept) + 3 stat cards */
.dash-redesign .dr-kpis { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; align-items: stretch; }
.dash-redesign .dr-stat {
  background: #fff; border: 1px solid rgba(120, 140, 110, .14); border-radius: 16px;
  padding: 18px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 6px 20px rgba(40, 60, 40, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.dash-redesign .dr-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(40, 60, 40, .09); }
.dash-redesign .dr-stat-icon { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dash-redesign .dr-stat-icon--green { background: rgba(34, 120, 60, .10); color: #1f7a44; }
.dash-redesign .dr-stat-icon--leaf  { background: rgba(22, 163, 74, .10); color: #16a34a; }
.dash-redesign .dr-stat-icon--blue  { background: rgba(2, 132, 199, .10); color: #0284c7; }
.dash-redesign .dr-stat-value { font-size: 26px; font-weight: 900; color: #1d3a26; line-height: 1; }
.dash-redesign .dr-stat-label { font-size: 12px; font-weight: 700; color: #6f8576; margin-top: 5px; }

/* Bottom: activity (left) + chart (right) */
.dash-redesign .dr-bottom { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; margin-top: 4px; align-items: start; }
.dash-redesign .dr-activity, .dash-redesign .dr-chart-card {
  background: #fff; border: 1px solid rgba(120, 140, 110, .14); border-radius: 16px;
  box-shadow: 0 6px 20px rgba(40, 60, 40, .05);
}
.dash-redesign .dr-chart-card { padding: 16px 18px; }
.dash-redesign .dr-chart-head { font-size: 14px; font-weight: 800; color: #1d3a26; margin-bottom: 10px; }
.dash-redesign .dr-chart { width: 100%; min-height: 180px; }
.dash-redesign .dr-chart svg { display: block; }

/* Footer */
.dash-redesign .dr-footer { text-align: center; font-size: 12px; font-weight: 600; color: #94a3a0; padding: 20px 0 14px; }

/* Responsive */
@media (max-width: 900px) {
  .dash-redesign .dr-kpis { grid-template-columns: 1fr 1fr; }
  .dash-redesign .dr-kpis .dash-kpi-hero { grid-column: 1 / -1; }
  .dash-redesign .dr-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-redesign .dr-kpis { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   SYSTEM BACKGROUND — olive-branch image behind the app shell.
   Applied to #main only, which lives inside #app — so the separate
   #login-screen container is NOT affected (login stays plain).
   Minimal 0.08 cream overlay — image shows essentially as-is (raw look).
   Branch anchored top-left, aspect preserved (cover), cream fills the rest.
   ════════════════════════════════════════════════════════════════════ */
#main {
  /* !important is required to beat the earlier global rule
     `#main { background-image: none !important; }` (line ~1248). */
  background-image:
    linear-gradient(rgba(248, 244, 236, .60), rgba(248, 244, 236, .60)),
    url('/bg-system.jpg') !important;
  background-size: cover !important;
  /* Branch shifted down ~110px so it clears the header and shows in the card area. */
  background-position: left 0px top 110px !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Dashboard KPI cards — translucent so the olive background shows through.
   Applies ONLY to the 3 white mini cards (معدل التحويل / مكالمات اليوم /
   إجمالي الطلبات). The hero "طلبات اليوم" gradient card is NOT touched. */
.dash-kpi-mini {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Dashboard hero header card (title "لوحة التحكم" + subtitle + add-order
   button + date pills) — translucent so the olive background shows through,
   same treatment as the KPI mini cards. !important beats the opaque
   var(--bz-card) background (and the dark-theme variant). */
.dash-header--hero {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ═══════════════ MERGED SINGLE TOPBAR (identity / live / logo) ═══════════════ */
/* Three zones inside the global #topbar. RTL: first child = right edge. */
.tb-zone { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.tb-zone--brand { flex-shrink: 0; }
.tb-zone--center { flex: 1 1 auto; justify-content: center; min-width: 0; }
.tb-zone--user { flex-shrink: 0; gap: 8px; }

/* Mobile top-bar row order: the menu trigger (order:0, top-right) + the utility
   icons (order:1) share the top row; the «عميل جديد» + «تاريخ» controls drop to
   their own row below (order:2), aligned to the LEFT (RTL flex-end). Scoped to
   ≤768px; the topbar flex-wraps. */
@media (max-width: 768px) {
  .tb-zone--user  { order: 1; }
  .tb-zone--brand { order: 2; flex-basis: 100%; justify-content: flex-end; }
  /* The date/add controls only exist on the dashboard. On every other page the
     context is empty — collapse that row so it leaves no gap. */
  .tb-zone--brand:not(:has(.tb-context > *)) { display: none; }
}

/* ═══════════════ ONLINE USERS — presence pill (top bar) ═══════════════
   Clean Olive-style cluster: overlapping avatar stack + an "X متصل" count pill. */
.topbar-online { display: inline-flex; align-items: center; flex-shrink: 0; }
.online-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 6px;
  background: var(--bz-card, #fff);
  border: 1px solid var(--bz-line, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.online-pill:hover {
  border-color: rgba(22,163,74,.45);
  box-shadow: 0 6px 16px rgba(22,163,74,.14);
  transform: translateY(-1px);
}
.online-stack { display: inline-flex; align-items: center; }
.online-ava {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  background: var(--ava-bg, #5a7d2a);
  border: 2px solid var(--bz-card, #fff);
  margin-inline-start: -9px;
  cursor: pointer;
  transition: transform .15s ease;
}
.online-stack .online-ava:first-child { margin-inline-start: 0; }
.online-ava:hover { transform: translateY(-2px) scale(1.08); z-index: 3; }
.online-ava--more { background: #64748b; font-size: 9.5px; cursor: default; }
.online-count { font-size: 12px; font-weight: 800; color: var(--bz-emerald-deep, #15803d); white-space: nowrap; }
.online-count-word { font-weight: 700; opacity: .85; }
/* Solo (nobody else online) — quiet, muted, non-clickable */
.online-pill--solo { cursor: default; padding: 5px 12px; gap: 7px; }
.online-pill--solo:hover { transform: none; border-color: var(--bz-line, #e5e7eb); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.online-solo-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.16); flex: 0 0 auto; }
.online-solo-label { font-size: 12px; font-weight: 600; color: var(--bz-muted, #6b7280); }
/* Compact on mobile: avatars carry the meaning, drop the wordy bits to save room. */
@media (max-width: 768px) {
  .online-count-word { display: none; }
  .online-pill { padding: 3px 9px 3px 5px; }
  .online-pill--solo .online-solo-label { display: none; }
  .online-pill--solo { padding: 6px; }
}

/* Topbar logo subtitle ("نظام إدارة العملاء" under "Olive System") */
.fx-brand-sub {
  display: block !important;
  font-size: 10.5px;
  color: var(--bz-gold);
  font-weight: 700;
  margin-top: 1px;
  letter-spacing: .2px;
}

/* Center live indicator — static "مباشر" pill with pulsing green dot.
   Reuses the existing @keyframes drPulse (defined in the dash-redesign block). */
.tb-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; color: #1f7a44;
  padding: 5px 12px;
  background: rgba(34, 197, 94, .10);
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 999px;
}
.tb-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
  animation: drPulse 1.8s infinite;
}

/* Topbar user identity (avatar + name + role) — moved here from the sidebar. */
.tb-user { display: inline-flex; align-items: center; gap: 9px; }
.tb-user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -.3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 0 0 2px rgba(132,204,22,.18);
}
.tb-user-text { display: flex; flex-direction: column; line-height: 1.15; align-items: flex-start; min-width: 0; }
.tb-user-name { font-size: 13px; font-weight: 800; color: #1c3a26; white-space: nowrap; }
.tb-user-role { font-size: 11px; font-weight: 600; color: #6b8273; white-space: nowrap; }

@media (max-width: 768px) { .tb-user-text { display: none; } }

/* ═══════════════ SIDEBAR LOGO HEADER (replaces user identity in sidebar) ═══════════════ */
.sb2-brandhead {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; text-decoration: none; padding: 2px 4px;
}
.sb2-brandhead-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.sb2-brandhead-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sb2-brandhead-name {
  font-size: 14px; font-weight: 800; color: #0d3219; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb2-brandhead-sub {
  font-size: 10.5px; font-weight: 600; color: #b8862b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Collapsed sidebar: show only the logo icon */
.app-sidebar[data-collapsed="1"] .sb2-brandhead-text { display: none; }
.app-sidebar[data-collapsed="1"] .sb2-brandhead { justify-content: center; flex: 0; }

/* ═══════════ FLOATING-CARD SHELL — DESKTOP ONLY (reference match, 2026-06-14) ═══════════
   EVERYTHING here is wrapped in @media (min-width:769px) so MOBILE (≤768px)
   keeps its original working layout (sticky topbar + off-canvas dark sidebar).
   Desktop = user-info card (left) + SQUARE logo card (right) + a floating CREAM
   sidebar. مباشر / مساعدة / JWT footer stay removed. */
:root { --app-gap: 14px; --topcard-h: 50px; }   /* header height ↓~17% (was 16/60) */

@media (min-width: 769px) {
  /* Topbar shell — transparent, full width; hosts the two cards + the gap */
  #topbar {
    position: fixed !important;
    top: 0; left: 0; right: 0; width: 100% !important;
    /* Frosted backdrop so content scrolls cleanly BEHIND the fixed bar
       (fully transparent would let scrolling cards show through the gaps). */
    background: linear-gradient(180deg, rgba(244,240,232,.90) 0%, rgba(244,240,232,.66) 100%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
    backdrop-filter: blur(12px) saturate(1.15) !important;
    border: 0 !important;
    box-shadow: 0 6px 22px rgba(11,30,18,.06) !important;
    padding: var(--app-gap) !important;
    gap: var(--app-gap) !important;
    align-items: stretch !important;
  }
  .tb-zone--center { display: none !important; }   /* was the live-indicator spacer */

  /* Shared card look */
  .tb-zone--user, .tb-zone--brand {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(11,30,18,.07), 0 1px 0 rgba(15,23,42,.03);
    min-height: var(--topcard-h);
  }
  /* Left card: user identity + bell / language / dark-mode (content hugs left) */
  .tb-zone--user {
    flex: 1 1 auto !important;
    justify-content: flex-end;   /* RTL → packs content to the visual LEFT edge */
    padding: 8px 16px;
  }
  /* Right card: FULL logo card — ALWAYS shows the olive icon + the complete
     "Olive System / نظام إدارة العملاء" text. Fixed width, INDEPENDENT of the
     sidebar's collapse state (no [data-collapsed] selector touches it). */
  .tb-zone--brand {
    flex: 0 0 var(--sb-w-expanded) !important;
    width: var(--sb-w-expanded) !important;
    padding: 8px 16px !important;
    justify-content: center;
  }
  .tb-zone--brand .fx-brand { border-left: 0 !important; padding: 0 !important; margin: 0 !important; }
  .tb-zone--brand .fx-brand-text { display: flex !important; }   /* always show the full logo text */

  /* Sidebar — floating rounded card, margin on every side, below the logo card */
  .app-sidebar {
    top: calc(var(--app-gap) * 2 + var(--topcard-h)) !important;
    right: var(--app-gap) !important;
    bottom: var(--app-gap) !important;
    height: auto !important;
    border-radius: 18px !important;
  }
  /* CREAM fill (≈ background) + clear shadow so it still reads as a card (light theme) */
  body:not([data-theme="dark"]) .app-sidebar {
    background: #f4f0e8 !important;
    border: 1px solid rgba(20,40,25,.07) !important;
    box-shadow: 0 14px 36px rgba(11,30,18,.20), 0 4px 12px rgba(11,30,18,.10) !important;
    color: #2f3a26 !important;
  }

  /* Cream sidebar → dark nav text/icons so they stay readable (light theme only) */
  body:not([data-theme="dark"]) .sb2-item        { color: #38432c; }
  body:not([data-theme="dark"]) .sb2-item-icon   { color: #5a6a3a; }
  body:not([data-theme="dark"]) .sb2-item:hover  { background: rgba(60,74,46,.09); color: #1f2a17; }
  body:not([data-theme="dark"]) .sb2-item:hover .sb2-item-icon { color: #1f2a17; }
  body:not([data-theme="dark"]) .sb2-item.active,
  body:not([data-theme="dark"]) .sb2-item.active .sb2-item-icon { color: #fff; }   /* white on the gold pill */
  body:not([data-theme="dark"]) button.sb2-group-label  { color: rgba(95,86,40,.85); }
  body:not([data-theme="dark"]) button.sb2-group-label:hover { background: rgba(60,74,46,.07); color: #6f6e39; }
  body:not([data-theme="dark"]) .sb2-group-chev  { color: rgba(95,86,40,.7); }
  body:not([data-theme="dark"]) .sb2-top         { border-bottom-color: rgba(20,40,25,.08); }
  body:not([data-theme="dark"]) .sb2-burger      { background: rgba(60,74,46,.06); color: #5a6a3a; border-color: rgba(20,40,25,.10); }
  body:not([data-theme="dark"]) .sb2-burger:hover{ background: rgba(60,74,46,.12); color: #38432c; border-color: rgba(20,40,25,.18); }
  body:not([data-theme="dark"]) .sb2-wa-chip     { background: rgba(60,74,46,.06); border-color: rgba(20,40,25,.10); color: #5a6a3a; }
  body:not([data-theme="dark"]) .sb2-wa-chip.is-on  { color: #16a34a; }
  body:not([data-theme="dark"]) .sb2-wa-chip.is-off { color: #dc2626; }
  body:not([data-theme="dark"]) .sb2-nav::-webkit-scrollbar-thumb { background: rgba(20,40,25,.15); }

  /* Content clears the floating sidebar (width + outer gap + inner gap) */
  #main {
    margin-right: calc(var(--sb-w-expanded) + var(--app-gap) * 2) !important;
    padding-top: calc(var(--app-gap) * 2 + var(--topcard-h)) !important;
  }
  body:has(.app-sidebar[data-collapsed="1"]) #main,
  .app-sidebar[data-collapsed="1"] ~ #main {
    margin-right: calc(var(--sb-w-collapsed) + var(--app-gap) * 2) !important;
  }
  /* (no collapse rule for .tb-zone--brand → the full logo card never resizes) */

  /* Dark theme: keep the two TOP cards dark instead of white */
  
}

/* ═══════════════ POLISH PASS — premium refinement (2026-06-14) ═══════════════
   Refinement only: palette + layout preserved. Covers items 1–5 of the polish
   request (header trim, sidebar active, cards, KPI numbers, lower section). */

/* (1) Trim the dashboard hero card so KPIs sit higher above the fold */
.dash-header--hero { padding: 12px 20px !important; margin-bottom: 14px !important; }

/* (2) Sidebar active item — stronger, premium (still gold, not flashy) */
.sb2-item.active {
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(184,134,43,.40), inset 0 0 0 1px rgba(255,255,255,.18);
}
.sb2-item.active::before {
  width: 5px; height: 60%; right: -8px;
  box-shadow: 0 0 8px rgba(214,168,74,.6);
}
.sb2-item.active .sb2-item-icon { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }

/* (3) Cards — soft modern shadow + subtle border + smooth hover lift */
.card {
  box-shadow: var(--bz-shadow-sm) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--bz-shadow-md) !important;
  border-color: rgba(22,163,74,.22) !important;
}
.dash-kpi-mini { box-shadow: var(--bz-shadow-sm); }
.dash-kpi-mini:hover { transform: translateY(-3px); box-shadow: var(--bz-shadow-md); }

/* (4) KPI numbers — bigger, bolder, tighter; clear label↔value hierarchy */
.dash-kpi-mini-value { font-size: 36px !important; font-weight: 900 !important; letter-spacing: -1px !important; line-height: 1 !important; }
.dash-kpi-mini-label { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .6px; color: var(--bz-muted) !important; }
.dash-kpi-mini-content { gap: 6px !important; }
.dash-kpi-hero-value { font-size: 52px !important; }

/* (5) Lower section — tighten dashboard empty-states so cards aren't large blanks */
.g2 .empty-state { padding: 12px 8px !important; }

/* (5) Quick Actions card — fills the previously empty 4th grid cell */
.dash-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-quick-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(22,163,74,.05);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--bz-ink); cursor: pointer; text-align: right;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dash-quick-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--bz-leaf); }
.dash-quick-btn:hover {
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.30);
  transform: translateY(-2px);
  box-shadow: var(--bz-shadow-sm);
}

/* ═══════════════ POLISH PASS 2 — micro-polish & premium feel (2026-06-14) ═══════════════
   Refinement only: layout, components, olive branding all preserved.
   (1) lower-card balance  (2) spacing rhythm  (3) hero  (4) micro-interactions */

/* (1) Lower follow-up grid: EQUAL-HEIGHT cards — stretch to the tallest in the row */
.grid-2.g2 { align-items: stretch; gap: 20px; }               /* (2) wider gap kept */
.grid-2.g2 .card { padding: 20px !important; }                /* (2) breathing room kept */

/* (2) KPI row spacing rhythm (16 / 24) */
.dash-kpis { gap: 16px !important; margin-bottom: 24px !important; }

/* (3) KPI hero — elevated green glow, bigger number, more visible chart */
.dash-kpi-hero {
  box-shadow:
    0 16px 40px rgba(11,61,32,.32),
    0 0 0 1px rgba(34,197,94,.18),
    0 6px 16px rgba(22,163,74,.22) !important;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.dash-kpi-hero:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 50px rgba(11,61,32,.38),
    0 0 0 1px rgba(34,197,94,.26),
    0 8px 20px rgba(22,163,74,.28) !important;
}
.dash-kpi-hero-value { font-size: 58px !important; letter-spacing: -1.5px; }
.dash-spark { flex: 0 0 180px !important; max-width: 200px !important; }
.dash-spark svg { height: 56px !important; }

/* (4) Micro-interactions — fast, smooth, professional easing */
.card, .dash-kpi-mini, .dash-quick-btn, .btn, .sb2-item {
  transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--bz-shadow-sm); }
.btn:active { transform: translateY(0) scale(.98); }
.dash-quick-btn:active { transform: translateY(0) scale(.98); }
.sb2-item { transition: background .15s ease, color .15s ease, transform .15s cubic-bezier(.4,0,.2,1) !important; }
.sb2-item:hover { transform: translateX(-2px); }     /* subtle RTL nudge */
.sb2-item.active:hover { transform: translateX(-2px); }

/* ═══════════ MOBILE SIDEBAR COLOR = DESKTOP (2026-06-14) ═══════════
   The desktop cream sidebar colors live inside @media(min-width:769px), so on
   mobile the sidebar fell back to the base dark-green gradient (line ~3932).
   Re-apply ONLY the desktop COLOR values here (cream fill + dark nav text/icons)
   so the mobile sidebar looks identical in color. Off-canvas layout/behavior and
   the desktop block are both untouched; border/box-shadow intentionally omitted. */
@media (max-width: 768px) {
  body:not([data-theme="dark"]) .app-sidebar    { background: #f4f0e8 !important; color: #2f3a26 !important; }
  body:not([data-theme="dark"]) .sb2-item        { color: #38432c; }
  body:not([data-theme="dark"]) .sb2-item-icon   { color: #5a6a3a; }
  body:not([data-theme="dark"]) .sb2-item:hover  { background: rgba(60,74,46,.09); color: #1f2a17; }
  body:not([data-theme="dark"]) .sb2-item:hover .sb2-item-icon { color: #1f2a17; }
  body:not([data-theme="dark"]) .sb2-item.active,
  body:not([data-theme="dark"]) .sb2-item.active .sb2-item-icon { color: #fff; }
  body:not([data-theme="dark"]) button.sb2-group-label  { color: rgba(95,86,40,.85); }
  body:not([data-theme="dark"]) button.sb2-group-label:hover { background: rgba(60,74,46,.07); color: #6f6e39; }
  body:not([data-theme="dark"]) .sb2-group-chev  { color: rgba(95,86,40,.7); }
  body:not([data-theme="dark"]) .sb2-top         { border-bottom-color: rgba(20,40,25,.08); }
  body:not([data-theme="dark"]) .sb2-burger      { background: rgba(60,74,46,.06); color: #5a6a3a; border-color: rgba(20,40,25,.10); }
  body:not([data-theme="dark"]) .sb2-burger:hover{ background: rgba(60,74,46,.12); color: #38432c; border-color: rgba(20,40,25,.18); }
  body:not([data-theme="dark"]) .sb2-wa-chip     { background: rgba(60,74,46,.06); border-color: rgba(20,40,25,.10); color: #5a6a3a; }
  body:not([data-theme="dark"]) .sb2-wa-chip.is-on  { color: #16a34a; }
  body:not([data-theme="dark"]) .sb2-wa-chip.is-off { color: #dc2626; }
  body:not([data-theme="dark"]) .sb2-nav::-webkit-scrollbar-thumb { background: rgba(20,40,25,.15); }
}

/* ═══════════ FIXED TOP BAR ON MOBILE (2026-06-14) ═══════════
   The base mobile topbar used position:sticky, which didn't pin in this layout
   (#content is the scroll area, #main has overflow-x:hidden) — so it scrolled
   away with the content, taking the logo card with it. Pin it like desktop and
   pad the content below so nothing hides behind it. The mobile topbar already
   has a frosted background, so content scrolls cleanly behind it. */
@media (max-width: 768px) {
  #topbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; }
  /* Pad by the REAL measured topbar height (--topbar-h, set by JS in index.html on
     load/resize/ResizeObserver). The fixed topbar wraps to 2 rows on narrow phones,
     so a hardcoded 64px let content slide under it. 64px is the pre-JS fallback. */
  #main { padding-top: var(--topbar-h, 64px) !important; }
}

/* ═══════ RESPONSIVE OVERFLOW FIX (2026-06-16) ═══════
   Cause: #main/#content are flex items with the default min-width:auto, so a wide,
   non-shrinkable inner row (the .dash-kpis grid with a fixed 180px sparkline) forces
   #main wider than (viewport − sidebar). The document then overflows horizontally and,
   because the UI is RTL, the start (left) edge — Add Order button, date, card edges —
   is pushed off-screen. Letting the flex/grid items shrink makes everything reflow. */
#main, #content { min-width: 0 !important; }

.dash-kpis { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
/* Re-assert the mobile KPI collapse AFTER the 4-col rule above so source-order wins.
   The earlier @media collapses (lines ~3160/3171) had equal specificity and lost to
   the unconditional 4-col rule, leaving 4 KPI cards crammed (and overlapping) on phones. */
@media (max-width: 600px) { .dash-kpis { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .dash-kpis { grid-template-columns: 1fr !important; } }
.dash-kpi-hero, .dash-kpi-mini { min-width: 0; }
.dash-spark { flex-shrink: 1 !important; min-width: 0 !important; }

.dash-header--hero { flex-wrap: wrap; }
.dash-header--hero .dash-header-left { flex: 1 1 auto; min-width: 0; }
.dash-header--hero .dash-actions { flex-shrink: 0; }
/* ISSUE 1 (mobile header toolbar overflow): on phones, stack the hero vertically and
   let the actions zone span full width + shrink, so the date, date filter and New Order
   button wrap fully into view instead of overflowing and clipping the button at the RTL
   left edge (the zone is flex-shrink:0 above, which kept it at full content width).
   Desktop layout is unchanged — this only applies <=600px. */
@media (max-width: 600px) {
  .dash-header--hero { flex-direction: column; align-items: stretch; }
  .dash-header--hero .dash-actions { flex-shrink: 1; width: 100%; min-width: 0; }
}

/* Strip the page-header (hero) card frame on EVERY tab — keep the title, subtitle,
   bottom line, icon, padding & alignment, but remove the card chrome so the header
   reads as plain page text. Placed last so it beats the base rule (1534) AND the
   frosted-glass override (8470 `background: rgba(255,255,255,.55) !important`). */
.dash-header--hero {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Decorative blur "blobs" were the card's interior glow — hide them so no green
   smudges float on the page once the card background is gone. */
.dash-header--hero .dash-header-blob { display: none !important; }

/* ═══════ Order-tracking clean result (2026-06-16) ═══════ */
.ot-clean { background:#fff; border:1px solid var(--bz-line); border-radius:var(--bz-radius);
  box-shadow:var(--bz-shadow-sm); padding:6px 14px; margin:10px 0; }
.ot-row { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 2px; border-bottom:1px solid var(--bz-line); }
.ot-row:last-child { border-bottom:0; }
.ot-k { color:var(--bz-muted); font-size:13px; font-weight:600; }
.ot-v { color:var(--bz-ink); font-size:13.5px; font-weight:700; text-align:left; }
.ot-badge { padding:2px 12px; border-radius:999px; font-size:12px; font-weight:700; }
.ot-badge.ok { background:rgba(22,163,74,.12); color:#15803d; }
.ot-badge.no { background:#f1f5f9; color:#64748b; }

/* Order-tracking raw-JSON toggle (explicit, collapsed by default) */
.ot-json { margin-top: 8px; }
.ot-json-toggle { background:none; border:0; padding:0; cursor:pointer;
  font-size:12px; color:var(--bz-muted); font-family:inherit; }
.ot-json-toggle:hover { color:var(--bz-ink); text-decoration:underline; }

/* ═══════════ Settings inner tabs (2026-06-19) ═══════════
   One row of tab buttons; each settings section becomes a tab panel (only one
   visible at a time, toggled by switchSettingsTab). Matches the CRM accent. */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bz-line, #e5e7eb);
}
.settings-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-muted, #6b7280);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  transition: color .15s, background .15s, box-shadow .15s, border-color .15s;
}
.settings-tab svg { width: 15px; height: 15px; opacity: .8; flex: 0 0 auto; }
.settings-tab:hover {
  color: var(--bz-ink, #111827);
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.14);
}
.settings-tab:hover svg { opacity: 1; }
.settings-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #15803d, #4a7234);
  border-color: transparent;
  box-shadow: 0 2px 7px rgba(21,128,61,.30);
}
.settings-tab.active svg { opacity: 1; }
/* Mobile: don't break the layout — scroll the tab row horizontally instead of wrapping. */
@media (max-width: 600px) {
  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .settings-tab { flex: 0 0 auto; }
}

/* ─── User-management list: clean connected rows (customers-table styling) ─── */
.user-list { display: flex; flex-direction: column; }
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  transition: background .14s;
}
.user-row + .user-row { border-top: 1px solid var(--bz-line-soft, #e8ecdf); }
.user-row:hover { background: var(--bz-card-hover, #fdfdfb); }
.user-row.is-disabled { opacity: .55; }

/* Role badge — colored pill, one distinct tone per role (readable, soft). */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  flex: 0 0 auto;
}
.role-badge--admin          { background: rgba(21,128,61,.14);  color: #15803d; }
.role-badge--operations     { background: rgba(13,148,136,.14); color: #0f766e; }
.role-badge--supervisor     { background: rgba(2,132,199,.14);  color: #0c5c8f; }
.role-badge--complaints     { background: rgba(184,134,43,.18); color: #92600e; }
.role-badge--call_center    { background: rgba(99,102,241,.15); color: #4338ca; }
.role-badge--moderator      { background: #eef2f6;              color: #475569; }
.role-badge--media_buyer    { background: rgba(219,39,119,.13); color: #9d174d; }
.role-badge--content_creator{ background: rgba(147,51,234,.13); color: #6b21a8; }
.role-badge--warehouse      { background: rgba(120,113,108,.16);color: #57534e; }
.role-badge--agent          { background: #eef2f6;              color: #475569; }
.role-badge--disabled       { background: var(--bz-danger-soft, #fee2e2); color: var(--bz-danger, #dc2626); }

/* Bare, color-coded action icons — clearly tappable, no heavy boxes. */
.set-action {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  color: var(--bz-muted, #64748b);
  transition: background .14s, color .14s, border-color .14s;
}
.set-action svg { width: 15px; height: 15px; }
.set-action--edit    { color: #0284c7; }
.set-action--block   { color: #d97706; }
.set-action--unblock { color: #15803d; }
.set-action--delete  { color: #dc2626; }
.set-action--edit:hover    { background: rgba(2,132,199,.12);  border-color: rgba(2,132,199,.22); }
.set-action--block:hover   { background: rgba(217,119,6,.12);  border-color: rgba(217,119,6,.22); }
.set-action--unblock:hover { background: rgba(21,128,61,.12);  border-color: rgba(21,128,61,.22); }
.set-action--delete:hover  { background: rgba(220,38,38,.12);  border-color: rgba(220,38,38,.22); }

/* ═══════════ Top-bar search + contextual actions (2026-06-19) ═══════════
   Search opens the command palette; the «تاريخ» + «إضافة طلب» controls live in
   #topbar-context (dashboard-only). Olive tokens only — no new palette. */
.tb-search {
  display: inline-flex; align-items: center; gap: 8px;
  width: min(440px, 40vw); height: 38px; padding: 0 12px;
  background: var(--bz-card, #fff);
  border: 1px solid var(--bz-line, #e5e7eb);
  border-radius: 10px;
  color: var(--bz-muted, #6b7280);
  font-family: inherit; font-size: 13px; text-align: start;
  cursor: text; transition: border-color .15s, box-shadow .15s;
}
.tb-search:hover { border-color: var(--bz-emerald-deep, #15803d); }
.tb-search:focus-visible { outline: none; border-color: var(--bz-emerald-deep, #15803d); box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
.tb-search > svg { flex-shrink: 0; color: var(--bz-gray, #9ca3af); }
.tb-search-ph { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-search-kbd {
  flex-shrink: 0; font: 700 10px/1 inherit; color: var(--bz-gray, #9ca3af);
  background: var(--bz-bg, #f3f4f6); border: 1px solid var(--bz-line, #e5e7eb);
  border-radius: 5px; padding: 3px 6px; letter-spacing: .3px;
}
.tb-context { display: inline-flex; align-items: center; gap: 8px; }
.tb-add-order { height: 38px; padding: 0 14px; font-size: 13px; gap: 6px; white-space: nowrap; }

/* Mobile: collapse the search to an icon; the top bar already wraps, so no overflow. */
@media (max-width: 768px) {
  .tb-search { width: 40px; padding: 0; justify-content: center; }
  .tb-search-ph, .tb-search-kbd { display: none; }
  .tb-add-order { padding: 0 10px; }
}

/* ═══════════ Sidebar brand header (logo + name at the very top of the rail) ═══════════
   One row: brand on the start (RTL right), tools (WA chip + collapse) on the end; the
   nav follows directly below — no extra gap. Collapsed → logo only. Olive tokens.
   Explicit `display` values override the old legacy hide rule. */
.sb2-head {
  display: flex; align-items: center; gap: 8px;
  /* Match the top bar's 60px so the two bottom-divider lines land on the same Y and
     read as one continuous line across the sidebar header + top bar. The sidebar's
     own top padding is removed (style-bosta.css) so this header starts at y=0. */
  height: 60px;
  box-sizing: border-box;
  padding: 0 12px; margin: 0;
  border-bottom: 1px solid var(--bz-line, #e5e7eb);
}
/* Nav sits directly under the brand header — trim leftover top spacing. */
/* Breathing room below the header divider so the first nav item isn't cramped
   against the line — added to the nav (below the divider), so the 60px header height
   and the divider alignment with the top bar are unchanged. */
.sb2-nav { padding-top: 12px; }
.sb2-nav > .sb2-group:first-child { margin-top: 0; }
.sb2-brand {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
  text-decoration: none; color: inherit;
}
.sb2-brand-logo { display: block; width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; }
.sb2-brand-text { display: block; min-width: 0; line-height: 1.15; }
.sb2-brand-name { display: block; font-size: 14px; font-weight: 800; color: var(--bz-ink, #111827); white-space: nowrap; }
.sb2-brand-sub  { display: block; font-size: 10.5px; color: var(--bz-muted, #6b7280); white-space: nowrap; }
.sb2-head-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* Collapsed icon-rail: stack centered, show only the logo (hide name + WA chip).
   Logo is a touch larger here so it reads clearly and stays balanced in the narrow rail. */
/* Collapsed rail: keep the LOGO ROW exactly 60px and put the divider on IT, so the
   line lands at y=60 — same as the top bar and the expanded sidebar header — then
   drop the collapse button BELOW that line (out of the bordered height). The header
   wrapper itself is borderless and grows; only the logo row owns the 60px divider. */
#app-sidebar[data-collapsed="1"] .sb2-head {
  flex-direction: column; align-items: stretch;
  height: auto; min-height: 60px;
  padding: 0; gap: 0;
  border-bottom: 0;
}
#app-sidebar[data-collapsed="1"] .sb2-head { overflow: visible !important; }   /* never clip the logo */
#app-sidebar[data-collapsed="1"] .sb2-brand {
  display: flex !important;
  width: 100% !important;            /* full width → justify-content can truly center */
  justify-content: center !important;
  align-items: flex-start !important;
  box-sizing: border-box;
  height: var(--olv-headbar-h, 60px);
  margin: 0 !important;              /* kill any left offset */
  padding: 0 !important;             /* TOP-SPACING knob — raise to push logo down, 0 = highest */
  position: relative !important;     /* never absolute */
  float: none !important;
  overflow: visible !important;
}
#app-sidebar[data-collapsed="1"] .sb2-brand-logo {
  width: 36px !important; height: 36px !important;   /* SIZE knob — gap to divider = 60 − 0(pad-top) − 36 = 24px */
  margin: 0 auto !important;         /* centered, no left margin */
  object-fit: contain !important;    /* show the WHOLE logo — never crop/clip */
  position: static !important;
  float: none !important;
  max-width: 100% !important;
}
#app-sidebar[data-collapsed="1"] .sb2-brand-text { display: none; }
#app-sidebar[data-collapsed="1"] .sb2-head-tools { justify-content: center; padding: 8px 0 4px; }
#app-sidebar[data-collapsed="1"] .sb2-wa-chip { display: none !important; }

/* ═══════════ Call-center new-order alert bell (topbar) ═══════════ */
/* Reuses .fx-theme-toggle base; only colours the two states. */
.cc-alert-bell.is-on  { color: #15803d; }              /* alert armed — green */
.cc-alert-bell.is-on:hover  { color: #166534; }
.cc-alert-bell.is-off { color: #9ca3af; opacity: .7; } /* muted — grey */
.cc-alert-bell.is-off:hover { color: #6b7280; opacity: 1; }

/* ═══════════ Call-center list scope toggle (كل العملاء / بتوعي) ═══════════ */
.cc-scope-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--bz-surface-2, #f1f3ee);
  border: 1px solid var(--bz-border, #e2e6dc);
}
.cc-scope-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bz-text-soft, #5b6552);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.cc-scope-btn:hover { color: var(--bz-text, #2f3a2a); }
.cc-scope-btn.active {
  background: linear-gradient(135deg, #15803d, #4a7234);
  color: #fff;
  box-shadow: 0 1px 3px rgba(21,128,61,.35);
}

/* ═══════════ Order line size/variant dropdown ═══════════ */
.order-item-field--size { min-width: 130px; }
.order-item-field--size select.oip-size {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bz-border, #e2e6dc);
  border-radius: 8px;
  font: inherit;
  background: var(--bz-surface, #fff);
  color: var(--bz-text, #2f3a2a);
  cursor: pointer;
}
.order-item-field--size select.oip-size.is-empty {   /* required-but-unchosen state */
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

/* ═══════════ ORDERS REPORT (distinct orders · created ↔ ship basis) ═══════════ */
.ordrep-lbl { display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.ordrep-toggle { display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--card,#fff); }
.ordrep-tg { border:0; background:transparent; padding:0 14px; height:34px; font-size:12.5px; font-weight:700;
  cursor:pointer; color:var(--muted); font-family:inherit; transition:background .15s,color .15s; }
.ordrep-tg:hover { background:rgba(0,0,0,.04); }
.ordrep-tg.is-active { background:var(--primary,#0f766e); color:#fff; }
.ordrep-basis-badge { font-size:12px; color:var(--muted); font-weight:600;
  background:rgba(0,0,0,.04); border-radius:999px; padding:4px 12px; }

.ordrep-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:10px; margin-bottom:12px; }
.ordrep-kpi { background:var(--card,#fff); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.ordrep-kpi-lbl { display:block; font-size:11px; color:var(--muted); margin-bottom:6px; font-weight:600; }
.ordrep-kpi b { display:block; font-size:21px; font-weight:800; line-height:1.15; }
.ordrep-kpi small { display:block; margin-top:4px; font-size:10.5px; color:var(--muted); }
.ordrep-kpi--good b { color:#067647; }
.ordrep-kpi--bad  b { color:#b42318; }
.ordrep-kpi--muted b { color:var(--muted); font-weight:700; }

.ordrep-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.ordrep-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:4px 11px; border-radius:999px; }

.ordrep-note { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:#b54708; background:#fffaeb; border:1px solid #fedf89; border-radius:9px;
  padding:8px 12px; margin-bottom:10px; }
.ordrep-note--soft { color:var(--muted); background:rgba(0,0,0,.03); border-color:var(--border); font-weight:500; }

/* أوردرات المودوريتور table: hide the horizontal scrollbar visually but KEEP scrolling
   fully functional (wheel/drag/touch). Scoped to this container ONLY — not global.
   Note: this user's Windows Chrome ignores ::-webkit-scrollbar, so scrollbar-width:none
   is the effective rule here; the webkit rule covers other browsers. */
.ordmod-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.ordmod-scroll::-webkit-scrollbar { display: none; height: 0; }