/* ═════════════════════════════════════════════════════════
   DELMON OPERATION SYSTEM ✦ EDITORIAL ELITE
   Premium executive-grade design system
   Typography: Reem Kufi (display) · Tajawal (body) · 
               Playfair Display (numerals) · IBM Plex Mono (data)
═════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Surface · warm editorial palette */
  --bg:           #F8F5F0;
  --bg-deep:      #EFEAE2;
  --surface:      #FFFFFF;
  --surface-2:    #FDFCFA;
  --surface-3:    #F4EFE8;
  
  /* Ink · refined typography hierarchy */
  --ink:    #0A0B0D;
  --ink-2:  #3A3D40;
  --ink-3:  #6E7174;
  --ink-4:  #A8ABAE;
  --ink-5:  #D4D6D8;
  
  /* Delmon Brand · official red */
  --brand:        #D4212A;
  --brand-deep:   #8B0A12;
  --brand-darker: #5A0008;
  --brand-soft:   rgba(212,33,42,0.05);
  --brand-medium: rgba(212,33,42,0.12);
  --brand-glow:   rgba(212,33,42,0.18);
  
  /* Editorial Accents */
  --gold:      #B8924D;
  --gold-2:    #8C6E36;
  --gold-soft: rgba(184,146,77,0.10);
  --sage:      #5F7A4D;
  --sage-soft: rgba(95,122,77,0.10);
  --slate:     #475569;
  
  /* Semantic */
  --success: #15803D; --success-soft: rgba(21,128,61,0.08);
  --warn:    #B45309; --warn-soft:    rgba(180,83,9,0.08);
  --danger:  #B91C1C; --danger-soft:  rgba(185,28,28,0.08);
  --info:    #1E40AF; --info-soft:    rgba(30,64,175,0.08);
  --purple:  #6D28D9; --purple-soft:  rgba(109,40,217,0.08);
  
  /* Compatibility aliases for rebuilt modules */
  --coral: var(--danger);
  --coral-dim: var(--danger-soft);
  --purple-dim: var(--purple-soft);
  --green: var(--success);
  --text2: var(--ink-2);
  --text3: var(--ink-3);
  --border: var(--hair);
  --brand-dim: var(--brand-soft);
  
  /* Hairlines */
  --hair:   rgba(10,11,13,0.06);
  --hair-2: rgba(10,11,13,0.09);
  --hair-3: rgba(10,11,13,0.14);
  
  /* Shape */
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px;
  
  /* Elevation · multi-layered shadows */
  --sh-1: 0 1px 2px rgba(10,11,13,.04), 0 1px 1px rgba(10,11,13,.03);
  --sh-2: 0 2px 6px rgba(10,11,13,.05), 0 1px 2px rgba(10,11,13,.04);
  --sh-3: 0 8px 24px rgba(10,11,13,.08), 0 2px 6px rgba(10,11,13,.04);
  --sh-4: 0 24px 56px rgba(10,11,13,.12), 0 8px 16px rgba(10,11,13,.06);
  --sh-brand: 0 8px 24px rgba(212,33,42,.18), 0 2px 6px rgba(212,33,42,.10);
  
  /* Motion */
  --ease:   cubic-bezier(.4,0,.2,1);
  --ease-o: cubic-bezier(.16,1,.3,1);
  --ease-b: cubic-bezier(.34,1.56,.64,1);
  
  /* Fonts */
  --f-display: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-sans:    'IBM Plex Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif;
  --f-serif:   'Playfair Display', 'Markazi Text', Georgia, serif;
  --f-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern','liga','calt';
  position: relative;
  font-weight: 400;
}

/* Atmospheric layered background */
body::after {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: 
    radial-gradient(circle at 12% 8%, rgba(212,33,42,.04) 0%, transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(184,146,77,.035) 0%, transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(95,122,77,.018) 0%, transparent 50%);
}

/* Premium top accent gradient */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 2000; opacity: .85;
  background: linear-gradient(90deg,
    var(--gold) 0%, var(--brand) 20%, var(--brand-deep) 50%,
    var(--brand) 80%, var(--gold) 100%);
}

/* Selection */
::selection { background: var(--brand-medium); color: var(--brand-deep); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hair-3); }

/* ─── APP LAYOUT ─── */
.app {
  display: flex; flex-direction: row;
  direction: ltr; min-height: 100vh;
  position: relative; z-index: 1;
}
.sidebar {
  order: 2; direction: rtl;
  width: 248px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--hair);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  box-shadow: -1px 0 0 var(--hair);
}
.main {
  order: 1; direction: rtl;
  flex: 1; width: calc(100% - 248px);
  padding: 36px 44px 60px;
  overflow-y: auto;
  background: transparent;
  min-width: 0;
}

/* ─── LOGO IMAGE CLASS ─── */
.delmon-logo {
  background-image: var(--logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

/* ─── SIDEBAR ELEMENTS ─── */
.logo {
  padding: 26px 22px 22px;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.logo::after {
  content: ''; position: absolute;
  bottom: -1px; right: 22px; width: 30px; height: 1px;
  background: var(--brand);
}
.logo-inner {
  display: flex; align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.logo-version {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 1px dashed var(--hair-2);
}
.logo-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(21,128,61,.5);
  animation: pulse 2.5s var(--ease) infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(21,128,61,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(21,128,61,0); }
}

/* Section labels */
.nav-section {
  padding: 18px 22px 6px;
  font-family: var(--f-display);
  font-size: 10px; font-weight: 600;
  color: var(--ink-4);
  letter-spacing: .15em; text-transform: uppercase;
  position: relative;
}

/* Nav items */
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 22px; font-size: 13px;
  color: var(--ink-2); cursor: pointer;
  border: none; background: none; width: 100%;
  text-align: right; transition: all .15s var(--ease);
  position: relative; border-radius: 0;
  font-family: inherit; font-weight: 500;
}
.nav-item:hover {
  color: var(--ink); background: var(--surface-3);
}
.nav-item.active {
  color: var(--brand);
  background: linear-gradient(90deg, var(--brand-soft) 0%, transparent 100%);
  font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute;
  right: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--brand); border-radius: 2px 0 0 2px;
}
.nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor; opacity: .65;
  transition: opacity .15s, transform .2s var(--ease-b);
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: .9; transform: scale(1.08); }
.nav-icon svg { width: 100%; height: 100%; stroke: currentColor; }

/* User card at bottom */
.clock-wrap {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--hair);
  margin-top: auto;
  background: var(--surface-2);
}
.clock-time {
  font-family: var(--f-mono); font-size: 15px;
  color: var(--ink); font-weight: 600;
  letter-spacing: .03em;
  display: flex; align-items: center; gap: 7px;
}
.clock-time::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: var(--success);
  animation: pulse 2s infinite;
}
.clock-date { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.user-pill {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--hair);
  font-size: 12px; color: var(--ink-2);
  box-shadow: var(--sh-1);
}
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  font-family: var(--f-display);
  box-shadow: 0 2px 4px rgba(212,33,42,.25);
}

/* ─── PAGES ─── */
.page { display: none; }
.page.active {
  display: block;
  animation: pageEnter .35s var(--ease-o) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-header { margin-bottom: 32px; }
.page-header-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  margin-bottom: 28px;
}
.page-title {
  font-family: var(--f-display);
  font-size: 28px; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
  line-height: 1.2; margin-bottom: 4px;
}
.page-sub {
  font-size: 13px; color: var(--ink-3);
  font-weight: 400;
}
.page-sub::before {
  content: '— '; color: var(--ink-4);
}

/* ─── CARDS · Editorial elevation ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: var(--sh-1);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover { box-shadow: var(--sh-2); }
.card::before {
  content: ''; position: absolute;
  top: 0; right: 0; width: 60px; height: 1px;
  background: var(--brand); opacity: 0;
  transition: opacity .25s var(--ease);
}
.card:hover::before { opacity: .4; }

.card-title {
  font-family: var(--f-display);
  font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -.005em;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ─── STATS · Bloomberg-grade ─── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 26px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--sh-1);
  position: relative; overflow: hidden;
  transition: all .3s var(--ease);
}
.stat-card::after {
  content: ''; position: absolute;
  top: 0; right: 0; bottom: 0; width: 2px;
  background: var(--brand); opacity: 0;
  transition: opacity .25s var(--ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: var(--hair-2);
}
.stat-card:hover::after { opacity: 1; }
.stat-label {
  font-size: 10.5px; color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
}
.stat-value {
  font-family: var(--f-serif);
  font-size: 30px; font-weight: 700;
  color: var(--ink); line-height: 1;
  letter-spacing: -.02em;
}
.stat-meta {
  font-size: 11px; color: var(--ink-4);
  margin-top: 5px; font-weight: 500;
}
.sv-purple { color: var(--purple); }
.sv-green  { color: var(--success); }
.sv-amber  { color: var(--warn); }
.sv-blue   { color: var(--info); }
.sv-coral  { color: var(--danger); }

/* ─── FORMS · Premium inputs ─── */
.fg  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-label {
  font-size: 11px; color: var(--ink-2);
  font-weight: 600; letter-spacing: .02em;
}

input, select, textarea {
  background: var(--surface);
  border: 1.5px solid var(--hair-2);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font-family: inherit; font-size: 13px;
  color: var(--ink);
  transition: all .15s var(--ease);
  outline: none; width: 100%;
  -webkit-appearance: none;
  font-weight: 500;
}
input:hover, select:hover, textarea:hover { border-color: var(--hair-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
  background: #fff;
}
input::placeholder { color: var(--ink-4); font-weight: 400; }
input[type="date"] {
  font-family: var(--f-mono); font-size: 12px;
}

.scan-wrap { position: relative; z-index: 5; }
.scan-wrap:focus-within { z-index: 500; }
.scan-wrap input {
  padding-left: 42px;
  font-family: var(--f-mono);
  font-size: 13px; letter-spacing: .04em;
}
.scan-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--brand); font-size: 14px;
  pointer-events: none;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
}

/* ─── AUTOCOMPLETE ─── */
.ac-menu {
  display: none; position: absolute;
  top: calc(100% + 6px); right: 0;
  width: min(640px, calc(100vw - 32px));
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  box-shadow: var(--sh-4);
  z-index: 9999;
  max-height: 360px; overflow-y: auto;
  padding: 6px;
  animation: dropIn .18s var(--ease-o);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ac-menu.open { display: block; }
.ac-item {
  display: grid; grid-template-columns: 96px 1fr;
  gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--r-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--hair);
  transition: background .12s var(--ease);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.sel { background: var(--brand-soft); }
.ac-code {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--brand); direction: ltr;
  font-weight: 600;
}
.ac-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ac-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* ─── PRODUCT PREVIEW ─── */
.prod-prev {
  display: none; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: var(--r);
  background: var(--brand-soft);
  border: 1px solid var(--brand-medium);
  margin-top: 8px;
  transition: all .2s var(--ease);
}
.prod-prev.vis {
  display: flex;
  animation: dropIn .2s var(--ease-o);
}
.prod-prev.nf { background: var(--danger-soft); border-color: rgba(185,28,28,.2); }
.pp-code { font-family: var(--f-mono); font-size: 10.5px; color: var(--brand); font-weight: 600; flex-shrink: 0; }
.pp-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.pp-cat  { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* ─── BUTTONS · Executive-grade ─── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: all .15s var(--ease);
  white-space: nowrap;
  letter-spacing: -.005em;
  position: relative;
}
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--surface);
  border: 1.5px solid var(--hair-2);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
}
.btn-secondary:hover {
  color: var(--ink); border-color: var(--brand);
  background: var(--surface);
  box-shadow: var(--sh-2);
}
.btn-danger {
  background: var(--surface);
  border: 1.5px solid rgba(185,28,28,.25);
  color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}
.btn-ghost { background: transparent; color: var(--ink-3); border: none; }
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn-sm { padding: 6px 13px; font-size: 11.5px; font-weight: 600; }
.btn-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ─── TABLES · Editorial data ─── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--f-display);
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-3);
  padding: 12px 14px; text-align: right;
  border-bottom: 1px solid var(--hair);
  white-space: nowrap;
  background: var(--surface-2);
  position: sticky; top: 0;
  letter-spacing: .04em; text-transform: uppercase;
}
td {
  padding: 12px 14px; font-size: 13px;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-2); vertical-align: middle;
  transition: background .12s var(--ease);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--brand-soft); }
.tc { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); font-weight: 500; }
.tn { color: var(--ink); font-weight: 600; }
.tq { font-family: var(--f-mono); font-weight: 700; font-feature-settings: 'tnum'; }
.t-br { color: var(--brand); }
.t-gr { color: var(--success); }
.t-am { color: var(--warn); }
.t-bl { color: var(--info); }
.t-pu { color: var(--purple); }
.t-co { color: var(--danger); }
tr.row-warn td { background: var(--warn-soft); }
tr.row-err  td { background: var(--danger-soft); }
tr.row-ok   td { background: var(--success-soft); }

/* ─── BADGES · Refined chips ─── */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.b-br { background: var(--brand-soft);  color: var(--brand);   border-color: var(--brand-medium); }
.b-gr { background: var(--success-soft); color: var(--success); border-color: rgba(21,128,61,.2); }
.b-am { background: var(--warn-soft);    color: var(--warn);    border-color: rgba(180,83,9,.2); }
.b-bl { background: var(--info-soft);    color: var(--info);    border-color: rgba(30,64,175,.2); }
.b-pu { background: var(--purple-soft);  color: var(--purple);  border-color: rgba(109,40,217,.2); }
.b-co { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(185,28,28,.2); }
.b-gy { background: rgba(110,113,116,.08); color: var(--ink-3); border-color: var(--hair-2); }

/* ─── SESSION LOG ─── */
.log-wrap { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.log-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 12.5px;
  animation: slideIn .25s var(--ease-o);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.log-item:last-child { border-bottom: none; }
.log-code { font-family: var(--f-mono); color: var(--ink-3); font-size: 10.5px; width: 112px; flex-shrink: 0; font-weight: 600; }
.log-name { flex: 1; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-qty  { font-family: var(--f-mono); color: var(--brand); font-weight: 700; width: 60px; text-align: center; font-size: 13px; }
.log-time { font-family: var(--f-mono); color: var(--ink-4); font-size: 10px; width: 68px; }
.log-del {
  background: none; border: none; color: var(--ink-4);
  cursor: pointer; padding: 4px 8px; border-radius: var(--r-xs);
  font-size: 13px; transition: all .15s var(--ease);
}
.log-del:hover { color: var(--danger); background: var(--danger-soft); }
.log-edit {
  background: none; border: none; color: var(--ink-4);
  cursor: pointer; padding: 4px 8px; border-radius: var(--r-xs);
  font-size: 12px; transition: all .15s var(--ease);
}
.log-edit:hover { color: var(--info); background: var(--info-soft); }

/* ─── TOAST · Refined notifications ─── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  border-radius: var(--r);
  padding: 12px 24px;
  font-size: 13px; color: #fff;
  font-weight: 500;
  transition: transform .35s var(--ease-b), opacity .25s;
  z-index: 9999; pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--sh-4);
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.08);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success {
  background: #fff;
  color: var(--success);
  border: 1px solid rgba(21,128,61,.25);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(21,128,61,.1);
}
.toast.error {
  background: #fff;
  color: var(--danger);
  border: 1px solid rgba(185,28,28,.25);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(185,28,28,.1);
}
.toast-icon { font-size: 16px; line-height: 1; }

/* ─── SALESMAN GRID ─── */
.sm-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.sm-btn {
  padding: 10px 6px; text-align: center;
  border: 1.5px solid var(--hair-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: var(--surface);
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 700;
  color: var(--ink-2);
  transition: all .15s var(--ease);
  letter-spacing: .02em;
}
.sm-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-1px);
  box-shadow: var(--sh-1);
}
.sm-btn.sel {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand-soft), var(--brand-medium));
  color: var(--brand);
  box-shadow: var(--sh-2);
}

/* ─── STEP INDICATOR ─── */
.steps {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 26px;
}
.step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--hair-2);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink-3);
  font-family: var(--f-mono); font-weight: 700;
  transition: all .25s var(--ease-b); flex-shrink: 0;
  box-shadow: var(--sh-1);
}
.step-dot.done {
  background: var(--brand-soft);
  border-color: var(--brand); color: var(--brand);
}
.step-dot.cur {
  background: var(--brand);
  border-color: var(--brand); color: #fff;
  transform: scale(1.1);
  box-shadow: var(--sh-brand);
}
.step-line { flex: 1; height: 2px; background: var(--hair); border-radius: 1px; }
.step-line.done { background: var(--brand); }
.return-step { display: none; }
.return-step.active { display: block; animation: pageEnter .3s var(--ease-o); }

/* ─── TABS ─── */
.tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tab {
  padding: 8px 16px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--hair-2);
  background: var(--surface);
  color: var(--ink-2);
  transition: all .15s var(--ease);
  letter-spacing: -.005em;
}
.tab:hover { border-color: var(--ink-3); color: var(--ink); }
.tab.t-br { border-color: var(--brand);  background: var(--brand-soft);  color: var(--brand); }
.tab.t-pu { border-color: var(--purple); background: var(--purple-soft); color: var(--purple); }
.tab.t-gr { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.tab.t-am { border-color: var(--warn);   background: var(--warn-soft);   color: var(--warn); }
.tab.t-bl { border-color: var(--info);   background: var(--info-soft);   color: var(--info); }
.tab.t-co { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* ─── KPI CARDS ─── */
.kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 22px 20px; text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-1);
  transition: all .3s var(--ease);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}
.kpi-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  opacity: .8;
}
.kpi-value {
  font-family: var(--f-serif);
  font-size: 36px; font-weight: 700;
  line-height: 1; color: var(--ink);
  letter-spacing: -.025em;
}
.kpi-label {
  font-size: 11px; color: var(--ink-3);
  margin-top: 8px; font-weight: 500;
  letter-spacing: .02em;
}

/* ─── INVENTORY ─── */
.inv-check { width: 22px; height: 22px; accent-color: var(--success); cursor: pointer; flex-shrink: 0; }
tr.inv-checked td { background: var(--success-soft); }

/* ─── SECTION HEADER ─── */
.sec-hdr {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.sec-title { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sep { border: none; border-top: 1px solid var(--hair); margin: 18px 0; }
.empty {
  text-align: center; padding: 48px 20px;
  color: var(--ink-4); font-size: 13px;
  font-style: italic;
}
.empty-icon { font-size: 28px; margin-bottom: 10px; opacity: .35; display: block; }

/* ─── SUMMARY PANEL ─── */
.summary-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
  gap: 10px; margin-bottom: 18px;
}
.sum-item {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 12px 14px; text-align: center;
  box-shadow: var(--sh-1);
}
.sum-val {
  font-family: var(--f-serif); font-size: 22px;
  font-weight: 700; color: var(--brand);
  letter-spacing: -.02em;
}
.sum-lbl { font-size: 10px; color: var(--ink-3); margin-top: 3px; font-weight: 500; }

/* ─── LOGIN · Hero statement ─── */
body.locked .app { display: none; }
.login-screen {
  min-height: 100vh; padding: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Hero left panel — brand storytelling */
.login-hero {
  background: linear-gradient(135deg, #0F0F11 0%, #1A0A0C 60%, #2D0A0E 100%);
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  overflow: hidden;
  color: #fff;
  direction: rtl;
}
.login-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,33,42,.25) 0%, transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(184,146,77,.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(212,33,42,.15) 0%, transparent 35%);
  pointer-events: none;
}
.login-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(255,255,255,.015) 47px, rgba(255,255,255,.015) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(255,255,255,.015) 47px, rgba(255,255,255,.015) 48px);
  pointer-events: none;
}
.hero-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
}
.hero-top .delmon-logo {
  width: 130px; height: 95px;
  filter: brightness(1.05) drop-shadow(0 8px 24px rgba(212,33,42,.4));
  background-color: #fff;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.hero-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--success);
  animation: pulse 2s infinite;
}

.hero-content { position: relative; z-index: 2; }
.hero-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.hero-tag::before {
  content: ''; width: 24px; height: 1px;
  background: var(--brand);
}
.hero-title {
  font-family: var(--f-display);
  font-size: 52px; font-weight: 700;
  line-height: 1.1; color: #fff;
  letter-spacing: -.025em;
  margin-bottom: 20px;
}
.hero-title .accent {
  background: linear-gradient(135deg, #FF8B95 0%, #D4212A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-desc {
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.65);
  max-width: 460px;
  margin-bottom: 36px;
  font-weight: 400;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-stat-val {
  font-family: var(--f-serif);
  font-size: 28px; font-weight: 700;
  color: #fff; letter-spacing: -.02em;
  line-height: 1;
}
.hero-stat-lbl {
  font-size: 11px; color: rgba(255,255,255,.5);
  margin-top: 6px; font-weight: 500;
  letter-spacing: .04em;
}

.hero-footer {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10.5px;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em;
}
.hero-footer-meta { display: flex; gap: 14px; }

/* Login form right panel */
.login-form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 56px;
  background: var(--bg);
  position: relative;
}
.login-form-panel::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(212,33,42,.04) 0%, transparent 40%);
  pointer-events: none;
}
.login-card {
  width: 100%; max-width: 420px;
  position: relative; z-index: 2;
}
.login-card-header {
  margin-bottom: 32px;
}
.login-title {
  font-family: var(--f-display);
  font-size: 32px; font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
  margin-bottom: 8px;
}
.login-sub {
  font-size: 14px; color: var(--ink-3);
  line-height: 1.5;
}
.login-err {
  display: none; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(185,28,28,.2);
  font-size: 12.5px; font-weight: 500;
}
.login-err.show { display: flex; align-items: center; gap: 8px; animation: shake .4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-4px); }
  40%,80% { transform: translateX(4px); }
}
.login-hint {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  font-size: 11.5px; color: var(--ink-3);
  line-height: 1.9;
}
.login-hint b { color: var(--ink); font-weight: 700; font-family: var(--f-mono); font-size: 11px; }

/* ─── PERMISSIONS ─── */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 8px; margin-top: 8px; }
.perm-pill {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border: 1.5px solid var(--hair-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
  font-weight: 500;
}
.perm-pill input { width: auto; accent-color: var(--brand); }
.perm-pill:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

/* ─── DIFF COLORS ─── */
.d-ok   { color: var(--success); font-family: var(--f-mono); font-weight: 700; }
.d-warn { color: var(--warn);    font-family: var(--f-mono); font-weight: 700; }
.d-err  { color: var(--danger);  font-family: var(--f-mono); font-weight: 700; }

/* ─── FARM TABS ─── */
.farm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.farm-tab {
  padding: 9px 18px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600;
  border: 1.5px solid var(--hair-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s var(--ease);
}
.farm-tab:hover { border-color: var(--ink-3); }
.farm-tab.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}

/* ─── SALES VIEWS ─── */
.sales-view { display: none; }
.sales-view.active { display: block; animation: pageEnter .3s var(--ease-o); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) and (min-width: 769px) {
  .sidebar { width: 220px; }
  .main { width: calc(100% - 220px); padding: 28px 28px 50px; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .fg3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-hero { padding: 40px 32px; min-height: 320px; }
  .hero-title { font-size: 36px; }
  .hero-stats { display: none; }
}
/* ─── Mobile sidebar toggle (visible only on mobile) ─── */
.mobile-toggle {
  display: none;
  position: fixed;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--hair-2);
  color: var(--ink);
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1100;
  box-shadow: var(--sh-2);
  font-family: inherit;
  padding: 0;
  transition: all .2s var(--ease);
}
.mobile-toggle:hover { background: var(--surface-2); }
.mobile-toggle:active { transform: scale(.94); }
.mobile-toggle svg { width: 22px; height: 22px; stroke: currentColor; }
.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,11,13,.42);
  z-index: 1050;
  opacity: 0;
  transition: opacity .25s var(--ease);
  backdrop-filter: blur(2px);
}
.mobile-overlay.show { display: block; opacity: 1; }
.sidebar-close {
  display: none;
  position: absolute;
  top: 16px; left: 16px;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--hair);
  color: var(--ink-2);
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  z-index: 10;
  transition: all .15s var(--ease);
}
.sidebar-close:hover { background: var(--brand-soft); color: var(--brand); }
.sidebar-close svg { width: 20px; height: 20px; stroke: currentColor; }

@media (max-width: 900px) {
  .mobile-toggle { display: inline-flex; }
  .sidebar-close { display: inline-flex; }
  
  html, body { width: 100%; overflow-x: hidden; }
  body::before { height: 1px; }
  .app { display: block; direction: rtl; }
  .main {
    width: 100%; padding: 64px 14px 24px;
    overflow-x: hidden;
  }
  
  /* Sidebar slides in from RIGHT */
  .sidebar {
    order: initial;
    width: min(300px, 86vw);
    height: 100vh;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    z-index: 1100;
    display: flex; flex-direction: column;
    padding: 56px 0 20px;
    overflow-y: auto;
    background: var(--surface);
    border-right: none;
    border-left: 1px solid var(--hair-2);
    box-shadow: -16px 0 48px rgba(10,11,13,.18);
    transform: translateX(100%);
    transition: transform .32s var(--ease-o);
  }
  .sidebar.open { transform: translateX(0); }
  
  /* All sidebar elements visible normally on mobile */
  .logo { padding: 0 22px 18px; }
  .nav-section { padding: 14px 22px 4px; }
  .clock-wrap { display: block !important; padding: 16px 22px; }
  
  .stats { grid-template-columns: repeat(2,1fr) !important; gap: 10px; }
  .stat-value { font-size: 24px; }
  .kpi-grid { grid-template-columns: repeat(2,1fr) !important; }
  .kpi-value { font-size: 28px; }
  .summary-panel { grid-template-columns: repeat(2,1fr) !important; }
  .fg, .fg3 { grid-template-columns: 1fr !important; }
  .form-group.full { grid-column: 1; }
  .sm-grid { grid-template-columns: repeat(3,1fr) !important; }
  .btn-row .btn-primary { flex: 1 1 140px; }
  input, select, textarea { min-height: 44px; font-size: 16px !important; }
  .page-title { font-size: 22px; }
  .toast { bottom: 24px; width: calc(100% - 24px); left: 12px; right: 12px; transform: translateY(120px); }
  .toast.show { transform: translateY(0); }
}


/* ─── MOBILE SIDEBAR FIX ─────────────────────────────
   The app wrapper used z-index and created a stacking context.
   On mobile this made the overlay sit above the sidebar, so the
   menu appeared blurred and could not be clicked. These rules keep
   the overlay behind the drawer and make the drawer fully selectable.
────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app { position: relative; z-index: auto !important; }
  .mobile-overlay {
    z-index: 1000 !important;
    background: rgba(10,11,13,.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-toggle { z-index: 1300 !important; }
  .sidebar {
    z-index: 1250 !important;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(100%,0,0) !important;
    will-change: transform;
    pointer-events: none;
  }
  .sidebar.open {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0,0,0) !important;
    pointer-events: auto;
  }
  .sidebar-close { z-index: 1260 !important; }
  body.sidebar-open .mobile-toggle { opacity: 0; pointer-events: none; }
  body.sidebar-open .main { filter: none !important; -webkit-filter: none !important; }
}

@media (max-width: 420px) {
  .main { padding: 60px 10px 24px; }
  .sm-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width: 769px) {
  input, select, textarea, button { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════════
   FROZEN WAREHOUSE HUB — مخازن المجمد
═══════════════════════════════════════════════════════════════ */
.fwh-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.fwh-tab{border:1.5px solid var(--hair-2);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:9px 15px;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;transition:all .16s var(--ease)}
.fwh-tab:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-soft)}
.fwh-tab.active{background:linear-gradient(135deg,var(--purple),#4c1d95);color:#fff;border-color:var(--purple);box-shadow:0 8px 22px rgba(109,40,217,.18)}
.fwh-panel{display:none;animation:pageEnter .24s var(--ease-o)}
.fwh-panel.active{display:block}
.fwh-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.fwh-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.fwh-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fwh-textarea{min-height:170px;font-family:var(--f-mono);font-size:12px!important;direction:ltr;text-align:left;white-space:pre}
.fwh-note{font-size:11px;color:var(--ink-3);line-height:1.8;margin-top:6px}
.fwh-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.fwh-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair-2);background:var(--surface-2);border-radius:999px;padding:5px 10px;font-size:11px;color:var(--ink-3);font-weight:700}
.fwh-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.fwh-kpi .sum-item{background:linear-gradient(180deg,#fff,var(--surface-2))}
.fwh-mini-code{font-family:var(--f-mono);direction:ltr;text-align:left}
.fwh-status-ok{color:var(--success);font-weight:800}
.fwh-status-warn{color:var(--warn);font-weight:800}
.fwh-status-err{color:var(--danger);font-weight:800}
.fwh-stock-table th{background:#ef1b24!important;color:#fff!important;font-family:var(--f-display);font-size:12px;text-transform:none}
.fwh-stock-table td{padding:8px 10px}
.fwh-cat-row td{background:#ef1b24!important;color:#fff!important;font-weight:900;text-align:center;font-family:var(--f-display);font-size:13px;border-color:#b30f17!important}
.fwh-total-row td{background:#f9cfd3!important;color:#111!important;font-weight:900}
.fwh-grand-row td{background:#fff!important;color:#ef1b24!important;font-weight:900;border-top:2px solid #ef1b24!important}
.fwh-stock-code{direction:ltr;text-align:left;font-family:var(--f-mono);font-weight:700;color:#111}
.fwh-code-box{direction:ltr;text-align:left;background:#0d1117;color:#d6e2ff;border-radius:var(--r);padding:14px;max-height:320px;overflow:auto;font-size:11px;line-height:1.65;font-family:var(--f-mono);border:1px solid rgba(255,255,255,.08)}
@media (max-width:900px){
  .fwh-grid{grid-template-columns:1fr}
  .fwh-kpi{grid-template-columns:repeat(2,1fr)}
  .fwh-tab{flex:1 1 140px}
}


/* ═══════════════════════════════════════════════════════════════
   SALES DISTRIBUTION TABLE — DL1 / RTN1
═══════════════════════════════════════════════════════════════ */
.sales-dist-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sales-dist-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sales-dist-note{font-size:11.5px;color:var(--ink-3);line-height:1.8;margin-top:8px}
.sales-dist-table{min-width:1580px;border-collapse:collapse;background:#fff}
.sales-dist-table th,.sales-dist-table td{border:1px solid #202020!important;padding:4px 6px!important;text-align:center;vertical-align:middle;font-size:11px;white-space:nowrap}
.sales-dist-table th{position:static;background:#f3f3f3!important;color:#111!important;font-family:var(--f-sans);font-weight:800;text-transform:none;letter-spacing:0}
.sales-dist-table .sd-title-row th{background:#ef1b24!important;color:#fff!important;font-weight:900;font-size:13px}
.sales-dist-table .sd-cat-row td{background:#ef1b24!important;color:#fff!important;font-weight:900;text-align:right;font-size:12px}
.sales-dist-table .sd-total-row td{background:#bfbfbf!important;color:#d4212a!important;font-weight:900}
.sales-dist-table .sd-summary-row td{background:#fff!important;font-weight:900}
.sales-dist-table .sd-product{background:#fff!important;text-align:right!important;min-width:210px;font-weight:800;color:#111}
.sales-dist-table .sd-qty{background:#fff200!important;min-width:70px}
.sales-dist-table .sd-fresh{background:#c6e0b4!important;min-width:70px}
.sales-dist-table .sd-online{background:#d9d9d9!important;min-width:70px}
.sales-dist-table .sd-internal{background:#ffd966!important;min-width:70px}
.sales-dist-table .sd-balance,.sales-dist-table .sd-distributed{background:#fff200!important;min-width:78px;font-weight:900}
.sales-dist-table .sd-code{direction:ltr;font-family:var(--f-mono);font-size:9.5px;color:#6b7280;margin-top:2px;font-weight:600}
.sales-dist-input{width:100%;min-width:52px;height:24px!important;min-height:24px!important;border:0!important;background:transparent!important;text-align:center!important;font-family:var(--f-mono)!important;font-size:11px!important;padding:0!important;box-shadow:none!important;color:#111!important}
.sales-dist-input:focus{outline:2px solid var(--brand)!important;background:#fff!important;border-radius:3px!important}
.sales-dist-num{font-family:var(--f-mono);font-weight:900;color:#111}
.sales-dist-input.sd-dynamic-source{background:rgba(109,40,217,.08)!important;color:var(--purple)!important;font-weight:900!important;cursor:not-allowed!important}
.sales-dist-input.sd-dynamic-source:focus{outline:2px solid var(--purple)!important;background:rgba(109,40,217,.10)!important}
@media(max-width:900px){.sales-dist-table{min-width:1450px}.sales-dist-toolbar{align-items:flex-start}.sales-dist-meta{width:100%}}

/* ─── PRINT ─── */


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD ✦ "AURORA" — Cinematic Operations Intelligence
   Dark mission-control aesthetic · Living motion · Executive grade
═══════════════════════════════════════════════════════════════ */

/* Full-bleed dashboard - takes over the main area */
#page-dashboard {
  padding: 0; position: relative;
  margin: -36px -44px -60px;
  min-height: calc(100vh - 0px);
  background: #08070A;
  background-image:
    radial-gradient(ellipse at top right, rgba(45,15,20,0.9) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(20,15,10,0.8) 0%, transparent 50%),
    linear-gradient(180deg, #0A0908 0%, #0F0D0B 100%);
  color: #F5F2EB;
  isolation: isolate;
  overflow: hidden;
  padding: 32px 40px 60px;
}

/* Floating gradient orbs — ambient motion */
.aurora-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.aurora-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); will-change: transform;
}
.aurora-orb-1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(255,62,71,0.40) 0%, rgba(212,33,42,0) 65%);
  top: -260px; right: -200px;
  animation: drift1 28s ease-in-out infinite;
}
.aurora-orb-2 {
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(212,168,92,0.30) 0%, rgba(212,168,92,0) 70%);
  bottom: -180px; left: -160px;
  animation: drift2 34s ease-in-out infinite;
}
.aurora-orb-3 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(143,176,105,0.18) 0%, rgba(143,176,105,0) 70%);
  top: 35%; left: 35%;
  animation: drift3 40s ease-in-out infinite;
}
@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-90px, 70px) scale(1.08); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(110px, -50px) scale(1.05); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) scale(0.95); opacity: .8; }
  50%     { transform: translate(-60px, 90px) scale(1.15); opacity: 1; }
}

/* Grid noise overlay — subtle premium texture */
#page-dashboard::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* All dashboard content sits above orbs */
.aurora-wrap { position: relative; z-index: 2; }

/* ─── TOP BAR ─── */
.aurora-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap; gap: 14px;
}
.aurora-title-block { display: flex; align-items: center; gap: 16px; }
.aurora-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 100px;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: #6EE7A8;
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.aurora-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 12px #4ADE80, 0 0 4px #4ADE80;
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 12px #4ADE80, 0 0 4px #4ADE80; }
  50%     { box-shadow: 0 0 18px #4ADE80, 0 0 8px #4ADE80; transform: scale(1.2); }
}
.aurora-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: rgba(245,242,235,0.45);
  letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 4px;
}
.aurora-title {
  font-family: 'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 22px; font-weight: 600;
  color: #F5F2EB; line-height: 1;
}
.aurora-time-block { text-align: left; }
.aurora-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px; color: #F5F2EB;
  font-weight: 500; letter-spacing: .04em;
}
.aurora-date {
  font-size: 11px; color: rgba(245,242,235,0.45);
  margin-top: 3px;
}

/* ─── HERO METRIC — The centerpiece ─── */
.aurora-hero {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%),
    rgba(20,17,13, 0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 36px 40px 0;
  margin-bottom: 18px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.aurora-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255,62,71,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.aurora-hero-content { position: relative; z-index: 2; }
.aurora-hero-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 24px;
}
.aurora-hero-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: rgba(245,242,235,0.5);
  letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.aurora-hero-label::before {
  content: ''; width: 24px; height: 2px;
  background: linear-gradient(90deg, #FF3E47, transparent);
  border-radius: 2px;
}
.aurora-hero-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(72px, 11vw, 132px);
  font-weight: 800; color: #FFFFFF;
  line-height: 0.9; letter-spacing: -0.04em;
  display: flex; align-items: baseline; gap: 16px;
  text-shadow:
    0 0 60px rgba(255,62,71,0.25),
    0 0 20px rgba(255,62,71,0.15);
}
.aurora-hero-number .unit {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400; color: rgba(245,242,235,0.45);
  letter-spacing: 0;
}
.aurora-hero-trend {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: rgba(245,242,235,0.6);
}
.aurora-hero-trend .badge-up {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 100px;
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.3);
  color: #6EE7A8; font-weight: 600;
  font-size: 11px;
}
.aurora-hero-trend .badge-flat {
  padding: 3px 10px; border-radius: 100px;
  background: rgba(245,242,235,0.06);
  border: 1px solid rgba(245,242,235,0.12);
  color: rgba(245,242,235,0.7);
  font-size: 11px; font-weight: 600;
}

/* Secondary metrics column */
.aurora-hero-stats {
  display: flex; flex-direction: column; gap: 12px;
}
.aurora-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  transition: all .2s ease;
}
.aurora-stat-row:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.aurora-stat-label {
  font-size: 12px; color: rgba(245,242,235,0.55);
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.aurora-stat-icon {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: rgba(255,62,71,0.12);
  color: #FF6B73;
  display: flex; align-items: center; justify-content: center;
}
.aurora-stat-icon svg { width: 12px; height: 12px; stroke-width: 2; }
.aurora-stat-icon.gold { background: rgba(212,168,92,0.12); color: #D4A85C; }
.aurora-stat-icon.sage { background: rgba(143,176,105,0.12); color: #8FB069; }
.aurora-stat-icon.info { background: rgba(96,165,250,0.12); color: #93C5FD; }
.aurora-stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: #FFFFFF; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 5px;
}
.aurora-stat-value .small { font-size: 11px; color: rgba(245,242,235,0.4); font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; }

/* Wave visualization beneath hero */
.aurora-wave {
  position: relative; height: 90px;
  margin: 0 -40px -1px;
  overflow: hidden;
}
.aurora-wave svg {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 100%;
}
.aurora-wave-path-1 {
  fill: url(#wgrad1);
  opacity: 0.9;
}
.aurora-wave-path-2 {
  fill: url(#wgrad2);
  opacity: 0.7;
}

/* ─── BENTO GRID ─── */
.aurora-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.aurora-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s ease, transform .3s ease;
}
.aurora-card:hover {
  border-color: rgba(255,255,255,0.12);
}
.aurora-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.15) 50%, transparent 80%);
}

.aurora-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap; gap: 10px;
}
.aurora-card-title {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #F5F2EB;
  display: flex; align-items: center; gap: 10px;
}
.aurora-card-icon-sm {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: rgba(255,62,71,0.12);
  color: #FF6B73;
  display: flex; align-items: center; justify-content: center;
}
.aurora-card-icon-sm svg { width: 14px; height: 14px; stroke-width: 2; }
.aurora-card-icon-sm.gold { background: rgba(212,168,92,0.12); color: #D4A85C; }
.aurora-card-icon-sm.sage { background: rgba(143,176,105,0.12); color: #8FB069; }
.aurora-card-icon-sm.info { background: rgba(96,165,250,0.12); color: #93C5FD; }
.aurora-card-icon-sm.purple { background: rgba(167,139,250,0.12); color: #C4B5FD; }
.aurora-card-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: rgba(245,242,235,0.4);
  letter-spacing: .08em;
}

/* Bento sizing */
.bento-span-4 { grid-column: span 4; }
.bento-span-5 { grid-column: span 5; }
.bento-span-6 { grid-column: span 6; }
.bento-span-7 { grid-column: span 7; }
.bento-span-8 { grid-column: span 8; }
.bento-span-12 { grid-column: span 12; }

/* ─── PRODUCTION PULSE TIMELINE ─── */
.pulse-timeline {
  position: relative;
  padding: 8px 4px 26px;
}
.pulse-svg {
  width: 100%; height: 140px;
  display: block;
}
.pulse-axis {
  display: flex; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; color: rgba(245,242,235,0.35);
  letter-spacing: .05em;
  margin-top: 4px;
}
.pulse-event-dot {
  cursor: pointer;
  transition: r .2s ease;
}
.pulse-event-dot:hover { r: 7; }
.pulse-now-line {
  stroke: #FF3E47;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}
.pulse-empty {
  text-align: center;
  padding: 30px 20px;
  color: rgba(245,242,235,0.35);
  font-size: 12px;
}

/* ─── PRODUCT MIX — Stacked Bar ─── */
.mix-bar {
  display: flex; width: 100%;
  height: 32px; border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.04);
}
.mix-seg {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: transform .25s ease, filter .25s ease;
  cursor: pointer;
  overflow: hidden;
  animation: segGrow 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mix-seg:hover { filter: brightness(1.15); transform: scaleY(1.08); }
@keyframes segGrow {
  from { transform: scaleX(0); transform-origin: right; }
  to   { transform: scaleX(1); }
}
.mix-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.mix-legend-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px;
  padding: 6px 0;
}
.mix-legend-dot {
  width: 12px; height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}
.mix-legend-text { flex: 1; min-width: 0; }
.mix-legend-name {
  color: rgba(245,242,235,0.85);
  font-weight: 500;
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mix-legend-val {
  font-family: 'IBM Plex Mono', monospace;
  color: rgba(245,242,235,0.5);
  font-size: 10px;
  margin-top: 2px;
}

/* ─── FARMS LIST ─── */
.farms-list { display: flex; flex-direction: column; gap: 14px; }
.farm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.farm-row:last-child { border-bottom: none; padding-bottom: 0; }
.farm-name-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.farm-rank {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: rgba(212,168,92,0.12);
  color: #D4A85C;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.farm-name {
  font-size: 13px;
  color: #F5F2EB;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.farm-bar-row {
  height: 5px; border-radius: 100px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  grid-column: 1 / -1;
}
.farm-bar-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #FF3E47 0%, #D4A85C 100%);
  box-shadow: 0 0 12px rgba(255,62,71,0.4);
  animation: barGrowFarm 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes barGrowFarm {
  from { transform: scaleX(0); transform-origin: right; }
  to   { transform: scaleX(1); }
}
.farm-value {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: #F5F2EB;
  letter-spacing: -.01em;
}
.farm-value-unit {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 11px; color: rgba(245,242,235,0.4);
  font-weight: 400;
}

/* ─── LIVE ACTIVITY FEED ─── */
.activity-stream {
  max-height: 360px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;
  margin-right: -8px; padding-right: 4px;
}
.activity-stream::-webkit-scrollbar { width: 4px; }
.activity-stream::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.activity-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 10px;
  transition: background .15s ease;
  animation: actSlide .4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes actSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.activity-row:hover { background: rgba(255,255,255,0.03); }
.activity-row.new {
  background: rgba(255,62,71,0.06);
}
.act-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,62,71,0.1); color: #FF6B73;
  font-size: 16px;
  position: relative;
}
.act-icon.frozen { background: rgba(167,139,250,0.1); color: #C4B5FD; }
.act-icon.return { background: rgba(248,113,113,0.1); color: #FCA5A5; }
.act-icon.prod   { background: rgba(143,176,105,0.1); color: #8FB069; }
.act-body { min-width: 0; }
.act-title {
  font-size: 12.5px; color: #F5F2EB;
  font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: rgba(245,242,235,0.4);
  margin-top: 2px;
}
.act-amount {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 700;
  color: #F5F2EB;
}
.act-amount-unit {
  font-size: 10px; color: rgba(245,242,235,0.4);
  margin-right: 3px;
}

/* ─── FUTURE MODULES (Coming Soon) ─── */
.future-section {
  margin-top: 26px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.future-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.future-title {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 14px; font-weight: 600;
  color: rgba(245,242,235,0.85);
  display: flex; align-items: center; gap: 10px;
}
.future-title::before {
  content: '✦'; color: #D4A85C;
  font-size: 18px;
}
.future-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: rgba(245,242,235,0.4);
  letter-spacing: .15em;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.future-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.future-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
  transition: all .3s ease;
}
.future-card:hover {
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-2px);
}
.future-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(255,62,71,0.04) 100%);
  pointer-events: none;
}
.future-card::after {
  content: ''; position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
.future-icon-box {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,62,71,0.15) 0%, rgba(212,168,92,0.1) 100%);
  border: 1px solid rgba(255,62,71,0.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: #FFB4B7;
  position: relative; z-index: 1;
}
.future-icon-box.gold { background: linear-gradient(135deg, rgba(212,168,92,0.2) 0%, rgba(255,62,71,0.1) 100%); border-color: rgba(212,168,92,0.25); color: #E5C088; }
.future-icon-box.sage { background: linear-gradient(135deg, rgba(143,176,105,0.18) 0%, rgba(96,165,250,0.1) 100%); border-color: rgba(143,176,105,0.25); color: #A8C68A; }
.future-icon-box svg { width: 22px; height: 22px; stroke-width: 1.8; }
.future-card-title {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #F5F2EB; margin-bottom: 6px;
  position: relative; z-index: 1;
}
.future-card-desc {
  font-size: 11.5px; color: rgba(245,242,235,0.55);
  line-height: 1.65;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.future-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: rgba(245,242,235,0.5);
  letter-spacing: .1em;
  position: relative; z-index: 1;
}
.future-badge {
  padding: 4px 11px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255,62,71,0.15), rgba(255,62,71,0.05));
  border: 1px solid rgba(255,62,71,0.25);
  color: #FFB4B7;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase;
}
.future-arrow {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(245,242,235,0.5);
  transition: all .25s ease;
}
.future-card:hover .future-arrow {
  background: rgba(255,62,71,0.1);
  border-color: rgba(255,62,71,0.3);
  color: #FFB4B7;
  transform: translateX(-3px);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  #page-dashboard { margin: -36px -28px -50px; padding: 28px 24px 50px; }
  .aurora-bento { grid-template-columns: repeat(6, 1fr); }
  .bento-span-7, .bento-span-5, .bento-span-8, .bento-span-4 { grid-column: span 6; }
  .aurora-hero-row { grid-template-columns: 1fr; gap: 24px; }
  .future-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  #page-dashboard { margin: -64px -14px -24px; padding: 18px 14px 30px; }
  .aurora-topbar { padding-bottom: 14px; margin-bottom: 18px; }
  .aurora-title { font-size: 18px; }
  .aurora-time { font-size: 18px; }
  .aurora-hero { padding: 22px 22px 0; border-radius: 18px; }
  .aurora-hero-number { font-size: clamp(56px, 16vw, 96px); }
  .aurora-bento { grid-template-columns: 1fr; }
  .future-grid { grid-template-columns: 1fr; }
  .aurora-wave { margin: 0 -22px -1px; height: 70px; }
  .aurora-card { padding: 18px 18px; border-radius: 16px; }
  .pulse-svg { height: 110px; }
}



/* ═══════════════════════════════════════════════════════
   AURORA MODAL — Drill-Down Detail Viewer
   Cinematic overlay for category & returns breakdowns
═══════════════════════════════════════════════════════ */
.aurora-modal-overlay {
  position: fixed; inset: 0;
  z-index: 5000;
  background: rgba(8, 7, 10, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.aurora-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.aurora-modal-card {
  position: relative;
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 48px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
    rgba(15, 13, 11, 0.95);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: 32px 36px;
  overflow-y: auto;
  color: #F5F2EB;
  box-shadow:
    0 32px 64px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: scale(0.94) translateY(20px);
  opacity: 0;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), opacity .35s ease;
  -webkit-overflow-scrolling: touch;
}
.aurora-modal-overlay.open .aurora-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.aurora-modal-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 10%,
    var(--accent, #FF3E47) 50%,
    transparent 90%);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 0 24px var(--accent, #FF3E47);
}
.aurora-modal-card::-webkit-scrollbar { width: 6px; }
.aurora-modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.aurora-modal-close {
  position: absolute; top: 18px; left: 18px;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,242,235,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: all .2s ease;
  z-index: 10;
}
.aurora-modal-close:hover {
  background: rgba(255,62,71,0.15);
  border-color: rgba(255,62,71,0.4);
  color: #FFB4B7;
  transform: rotate(90deg);
}
.aurora-modal-close svg { width: 18px; height: 18px; stroke-width: 2; }

/* Modal header */
.modal-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: rgba(245,242,235,0.45);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.modal-eyebrow::before {
  content: '';
  width: 22px; height: 2px;
  background: var(--accent, #FF3E47);
  border-radius: 2px;
}
.modal-title {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 32px; font-weight: 700;
  color: #F5F2EB;
  letter-spacing: -.015em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.modal-headline-stats {
  display: flex; gap: 22px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.modal-hs-item {
  display: flex; flex-direction: column;
}
.modal-hs-val {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700;
  color: #FFFFFF;
  line-height: 1; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 5px;
}
.modal-hs-val .unit {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 12px; font-weight: 400;
  color: rgba(245,242,235,0.4);
}
.modal-hs-lbl {
  font-size: 11px;
  color: rgba(245,242,235,0.5);
  margin-top: 5px;
  font-weight: 500;
}

/* Section divider in modal */
.modal-section {
  margin-top: 28px;
}
.modal-section-title {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 13px; font-weight: 600;
  color: rgba(245,242,235,0.85);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-section-title .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(245,242,235,0.4);
  letter-spacing: .1em;
  font-weight: 500;
}

/* Product/Item bar rows inside modal */
.modal-bar-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.modal-bar-row {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border-radius: 10px;
  transition: background .15s;
  animation: modalRowIn .5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modalRowIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.modal-bar-row:hover { background: rgba(255,255,255,0.02); }
.modal-bar-info {
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.modal-bar-name-row {
  display: flex; align-items: center; gap: 9px;
}
.modal-bar-rank {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  color: rgba(245,242,235,0.6);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.modal-bar-rank.top {
  background: rgba(212,168,92,0.18);
  color: #E5C088;
}
.modal-bar-name {
  font-size: 13px;
  color: #F5F2EB;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-bar-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(245,242,235,0.4);
}
.modal-bar-track {
  height: 5px; border-radius: 100px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.modal-bar-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--accent, #FF3E47) 0%, var(--accent-2, #D4A85C) 100%);
  box-shadow: 0 0 10px var(--accent-glow, rgba(255,62,71,0.4));
  animation: barGrowModal 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes barGrowModal {
  from { transform: scaleX(0); transform-origin: right; }
  to   { transform: scaleX(1); }
}
.modal-bar-values {
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
}
.modal-bar-val {
  font-size: 15px; font-weight: 700;
  color: #F5F2EB;
}
.modal-bar-val .small {
  font-size: 10px; color: rgba(245,242,235,0.4);
  margin-right: 3px; font-weight: 400;
}
.modal-bar-pct {
  font-size: 10.5px;
  color: rgba(245,242,235,0.5);
  margin-top: 2px;
}

/* Two-column modal layout for returns */
.modal-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.modal-col-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 18px 18px 12px;
}
.modal-col-title {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 12px; font-weight: 600;
  color: rgba(245,242,235,0.8);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.modal-col-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: rgba(212,168,92,0.15);
  color: #E5C088;
  display: flex; align-items: center; justify-content: center;
}
.modal-col-icon.coral { background: rgba(252,165,165,0.15); color: #FCA5A5; }
.modal-col-icon svg { width: 13px; height: 13px; stroke-width: 2; }

/* Click hint for mix segments */
.mix-seg { cursor: pointer; user-select: none; }
.mix-seg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s ease;
}
.mix-seg:hover::after { background: rgba(255,255,255,0.06); }
.mix-legend-item { cursor: pointer; transition: opacity .15s; }
.mix-legend-item:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════
   RETURNS SUMMARY CARD on Dashboard
═══════════════════════════════════════════════════════ */
.aurora-card.returns-card {
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease;
}
.aurora-card.returns-card:hover {
  border-color: rgba(252,165,165,0.25);
  transform: translateY(-2px);
}
.returns-overview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}
.returns-big-icon {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(252,165,165,0.15) 0%, rgba(255,62,71,0.10) 100%);
  border: 1px solid rgba(252,165,165,0.20);
  color: #FCA5A5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.returns-big-icon::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(252,165,165,0.25) 0%, transparent 70%);
  z-index: -1;
  filter: blur(8px);
  opacity: 0;
  transition: opacity .3s ease;
}
.aurora-card.returns-card:hover .returns-big-icon::after { opacity: 1; }
.returns-big-icon svg { width: 30px; height: 30px; stroke-width: 1.8; }

.returns-numbers {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: baseline;
}
.returns-stat {
  display: flex; flex-direction: column;
  gap: 3px;
}
.returns-stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  color: #F5F2EB;
  line-height: 1; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 4px;
}
.returns-stat-val .unit {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(245,242,235,0.4);
}
.returns-stat-lbl {
  font-size: 10.5px;
  color: rgba(245,242,235,0.5);
  letter-spacing: .04em;
  font-weight: 500;
}

.returns-mini-bars {
  display: flex;
  gap: 4px;
  height: 24px;
  margin-top: 14px;
  padding: 4px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.returns-mini-bar {
  flex: 1;
  border-radius: 4px;
  background: linear-gradient(180deg, #FCA5A5 0%, rgba(252,165,165,0.3) 100%);
  min-height: 4px;
  transition: opacity .15s ease;
  opacity: 0.85;
  animation: barRiseIn .8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes barRiseIn {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to   { opacity: 0.85; }
}

.returns-arrow-hint {
  position: absolute; top: 22px; left: 22px;
  display: flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: rgba(252,165,165,0.6);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
}
.aurora-card.returns-card:hover .returns-arrow-hint { opacity: 1; }
.returns-arrow-hint svg { width: 14px; height: 14px; stroke-width: 2; }

@media (max-width: 768px) {
  .aurora-modal-card { padding: 24px 22px; border-radius: 20px; max-height: 88vh; }
  .modal-title { font-size: 24px; }
  .modal-hs-val { font-size: 22px; }
  .modal-headline-stats { gap: 18px; }
  .modal-two-col { grid-template-columns: 1fr; gap: 14px; }
  .returns-overview { grid-template-columns: 1fr; gap: 14px; }
  .returns-big-icon { width: 52px; height: 52px; }
  .returns-stat-val { font-size: 24px; }
}

@media print {
  @page { size: A4 portrait; margin: 5mm; }
  html, body { background: #fff !important; }
  .sidebar, .toast, body::before, body::after, .no-print { display: none !important; }
  .main { padding: 0 !important; background: #fff !important; width: 100% !important; }
  .page { display: none !important; }
  .page.active { display: block !important; }
}

  #fwh-order-section-tabs .fwh-order-src.active{background:var(--brand);color:#fff;border-color:var(--brand)}
  .fwh-order-qty{max-width:120px;text-align:center;font-weight:800}


/* ─── Formal Arabic Typography & Frozen Inventory Dashboard Analytics ─── */
body, button, input, select, textarea, .page, .card, .aurora-wrap, .future-card {
  font-family: var(--f-sans) !important;
}
h1,h2,h3,.card-title,.page-title,.aurora-title,.aurora-card-title,.future-title,.future-card-title,.sb-system-name,.nav-label {
  font-family: var(--f-display) !important;
  letter-spacing: 0 !important;
}
.tc,.tq,.fwh-mini-code,.fwh-stock-code,.fwh-code-box,[style*="IBM Plex Mono"] { font-family: var(--f-mono) !important; }
.frozen-analytics-card{position:relative;overflow:hidden;min-height:360px;background:linear-gradient(135deg,rgba(10,15,24,.90),rgba(28,35,48,.82))!important;border-color:rgba(147,197,253,.18)!important}
.frozen-analytics-card::before{content:'';position:absolute;inset:-120px auto auto -80px;width:320px;height:320px;background:radial-gradient(circle,rgba(147,197,253,.22),transparent 68%);filter:blur(12px);pointer-events:none}
.fz-analytics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;position:relative;z-index:1}
.fz-kpi{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);border-radius:18px;padding:16px;min-height:96px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.fz-kpi-lbl{font-size:11px;color:rgba(245,242,235,.55);font-weight:600;margin-bottom:8px}
.fz-kpi-val{font-family:var(--f-mono)!important;font-size:28px;line-height:1;font-weight:700;color:#EAF2FF;direction:ltr;text-align:left}
.fz-kpi-val .unit{font-size:11px;color:rgba(245,242,235,.48);font-family:var(--f-sans)!important;margin-inline-start:4px}
.fz-panel-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px;position:relative;z-index:1}
.fz-panel{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:18px;padding:14px;min-height:190px}
.fz-panel-title{font-family:var(--f-display)!important;font-size:13px;color:#fff;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.fz-panel-title::before{content:'';width:8px;height:8px;border-radius:50%;background:#93C5FD;box-shadow:0 0 16px rgba(147,197,253,.75)}
.fz-mini-row{display:grid;grid-template-columns:1fr 70px;gap:10px;align-items:center;margin:9px 0}
.fz-mini-name{font-size:11px;color:rgba(245,242,235,.76);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-mini-val{font-family:var(--f-mono)!important;font-size:11px;font-weight:700;color:#D4A85C;text-align:left;direction:ltr}
.fz-track{grid-column:1/3;height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:-4px}
.fz-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#93C5FD,#34D399);animation:auroraBar .8s var(--ease-o) both}
.fz-alert-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px;color:rgba(245,242,235,.72)}
.fz-alert-row:last-child{border-bottom:0}.fz-alert-code{font-family:var(--f-mono)!important;color:#fff}.fz-alert-date{font-family:var(--f-mono)!important;color:#FCA5A5;direction:ltr}.fz-empty{height:135px;display:flex;align-items:center;justify-content:center;color:rgba(245,242,235,.35);font-size:12px;text-align:center}
@media(max-width:900px){.fz-analytics-grid{grid-template-columns:repeat(2,1fr)}.fz-panel-grid{grid-template-columns:1fr}.frozen-analytics-card{min-height:auto}}