/* ═══════════════════════════════════════════════
   GHARZAH OMS v2 — Navy Commander Theme
   ═══════════════════════════════════════════════ */

/* ── Mobile: eliminate 300ms touch delay ── */
*, *::before, *::after {
  touch-action: manipulation;
}

/* ── Variables ── */
:root {
  --bg-page:       #0a1e33;
  --bg-header:     #0f2940;
  --bg-nav:        #1D3A5C;
  --bg-card:       #0f2940;
  --bg-card-hover: #1a3a5c;
  --bg-input:      rgba(255,255,255,.06);
  --bg-elevated:   #1a3f60;
  --bg-modal:      #0f2940;

  /* surface aliases */
  --surface-1:     #0F1A2B;
  --surface-2:     #162236;


  /* Overlay / subtle backgrounds — adapt in light mode */
  --bg-subtle:        rgba(255,255,255,.06);
  --bg-subtle-2:      rgba(255,255,255,.04);
  --bg-subtle-3:      rgba(255,255,255,.10);
  --text-half:        rgba(255,255,255,.5);
  --text-dim:         rgba(255,255,255,.55);
  --text-dim-2:       rgba(255,255,255,.4);
  --border-subtle:    rgba(255,255,255,.08);
  --border-subtle-2:  rgba(255,255,255,.12);
  --border-subtle-3:  rgba(255,255,255,.07);

  --bg-subtle-4:      rgba(255,255,255,.02);
  --bg-subtle-5:      rgba(255,255,255,.05);
  --bg-subtle-6:      rgba(255,255,255,.03);
  --border-half:      rgba(255,255,255,.35);
  --border-third:     rgba(255,255,255,.3);
  --border-light-15:  rgba(255,255,255,.15);
  --text-em-dim:      rgba(255,255,255,.7);
  --text-em-very-dim: rgba(255,255,255,.35);
  --bg-dark-panel:    #0d1b2a;
  --text-warm:     #e2d9c5;   /* warm off-white body text */
  --gold:          #C9A84C;
  --gold-light:    #E2C36A;
  --gold-dim:      rgba(201,168,76,.12);
  --gold-border:   rgba(201,168,76,.3);

  --text-1:        #ffffff;
  --text-2:        rgba(255,255,255,.7);
  --text-3:        rgba(255,255,255,.4);
  --text-4:        rgba(255,255,255,.2);

  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.14);
  --border-nav:    rgba(0,0,0,.25);

  /* Earth-tone palette — بديل الألوان الزاهية */
  --green:         #8b7355;   /* sewing / dark tan  → approved */
  --green-dim:     rgba(139,115,85,.12);
  --red:           #4a5568;   /* received / dark slate → rejected */
  --red-dim:       rgba(74,85,104,.12);
  --amber:         #c4a882;   /* embroidery / warm tan → pending */
  --amber-dim:     rgba(196,168,130,.12);
  --blue:          #718096;   /* cutting / medium gray → info/new */
  --blue-dim:      rgba(113,128,150,.12);
  --purple:        #a08060;   /* delivered_op / medium brown → transfer */
  --purple-dim:    rgba(160,128,96,.12);

  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     14px;

  --shadow-card:   0 1px 3px rgba(0,0,0,.4);
  --shadow-modal:  0 20px 60px rgba(0,0,0,.6);

  --header-h:      48px;
  --nav-h:         40px;
  --footer-h:      40px;
  --sidebar-w:     220px;

  --font:          'Cairo', 'Segoe UI', sans-serif;
  --transition:    .15s ease;

  /* aliases used in order-form */
  --bg-2:          #1a3f60;
  --text:          #ffffff;
}

/* Light mode */
[data-theme="light"] {
  --bg-page:       #f0f6ff;
  --bg-header:     #ffffff;
  --bg-nav:        #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #e8f0fc;
  --bg-input:      #f5f9ff;
  --bg-elevated:   #e4eef9;
  --bg-modal:      #ffffff;
  --text-1:        #0F1A2B;
  --text-2:        #374151;
  --text-3:        #6b7280;
  --text-4:        #9ca3af;
  --border:        rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.15);
  --shadow-card:   0 1px 3px rgba(0,0,0,.08);
  --bg-2:          #e4eef9;
  --text:          #0F1A2B;

  /* surface aliases */
  --surface-1:     #ffffff;
  --surface-2:     #f0f4f8;


  /* light-mode overrides for hardcoded white-transparent values */
  --bg-subtle:        rgba(0,0,0,.04);
  --bg-subtle-2:      rgba(0,0,0,.025);
  --bg-subtle-3:      rgba(0,0,0,.06);
  --text-half:        rgba(0,0,0,.5);
  --text-dim:         #6b7280;
  --text-dim-2:       #9ca3af;
  --border-subtle:    rgba(0,0,0,.07);
  --border-subtle-2:  rgba(0,0,0,.10);
  --border-subtle-3:  rgba(0,0,0,.06);

  --bg-subtle-4:      rgba(0,0,0,.012);
  --bg-subtle-5:      rgba(0,0,0,.035);
  --bg-subtle-6:      rgba(0,0,0,.02);
  --border-half:      rgba(0,0,0,.2);
  --border-third:     rgba(0,0,0,.15);
  --border-light-15:  rgba(0,0,0,.1);
  --text-em-dim:      rgba(0,0,0,.6);
  --text-em-very-dim: rgba(0,0,0,.3);
  --bg-dark-panel:    #f3f4f6;
  --text-warm:     var(--text-1);  /* warm text → use standard text in light mode */
  /* nav text overrides for light mode */
  --nav-item-color:       #4b5563;
  --nav-item-hover:       #111827;
  --nav-sep-color:        rgba(0,0,0,.1);

  /* Badge dim colors — light mode (earth tones) */
  --green-dim:     rgba(139,115,85,.18);
  --red-dim:       rgba(74,85,104,.14);
  --amber-dim:     rgba(196,168,130,.18);
  --blue-dim:      rgba(113,128,150,.14);
  --purple-dim:    rgba(160,128,96,.14);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
button, input, select, textarea { font-family: var(--font); }
body {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--text-1);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Arabic RTL */
html[dir="rtl"] body { direction: rtl; text-align: right; }
/* English LTR */
html[dir="ltr"] body { direction: ltr; text-align: left; }
/* Default (before lang loads) */
body { direction: rtl; text-align: right; }

/* ── Typography ── */
h1 { font-size: 1.4rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem;   font-weight: 600; }
p  { color: var(--text-2); }
a  { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
#app { display: flex; flex-direction: column; min-height: 100vh; }

/* إخفاء الهيدر القديم على الديسكتوب للمشرفين — يُعاد إظهاره على الجوال */
.hdr-admin-hidden { display: none; }

/* ── Header ── */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-header);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.hdr-row1 {
  display: flex; align-items: center;
  height: var(--header-h);
  padding: 0 16px; gap: 10px;
}
.hdr-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--gold);
  flex-shrink: 0;
}
/* New brand logo wrap */
.hdr-logo-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.hdr-logo-g {
  font-size: 1.1rem; font-weight: 900; color: var(--gold);
  line-height: 1; font-family: 'Cairo', sans-serif;
}
.hdr-logo-brand {
  font-size: .42rem; font-weight: 800; color: rgba(201,168,76,.7);
  letter-spacing: 2.5px; text-transform: uppercase; line-height: 1;
}
.hdr-title {
  flex: 1;
  font-size: .82rem; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-utils { display: flex; align-items: center; gap: 6px; }
.hdr-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--bg-header);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.hdr-uname { font-size: .72rem; color: var(--text-2); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* ── Nav bar ── */
.nav-bar {
  height: var(--nav-h);
  background: var(--bg-nav);
  border-bottom: 2px solid var(--border-nav);
  display: flex; align-items: stretch;
  overflow: visible;
  position: relative; z-index: 99;
}
.nav-bar::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 5px;
  padding: 0 12px; cursor: pointer;
  font-size: .75rem; color: var(--nav-item-color, rgba(255,255,255,.55));
  white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.nav-item:hover { color: var(--nav-item-hover, rgba(255,255,255,.85)); }
.nav-item.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-sep { width: 1px; background: var(--nav-sep-color, rgba(255,255,255,.1)); margin: 8px 4px; flex-shrink: 0; }
.nav-utils { display: flex; align-items: center; gap: 4px; padding: 0 8px; margin-right: auto; }
[lang="en"] .nav-utils { margin-right: 0; margin-left: auto; }

/* ── Unified Nav Bar (Admin/Staff) ── */
.unified-nav {
  height: var(--header-h);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.unav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 14px;
  gap: 2px;
}
.unav-logo {
  display: flex;
  align-items: center;
  padding-inline-end: 14px;
  flex-shrink: 0;
  border-inline-end: 1px solid var(--border);
  margin-inline-end: 6px;
}
.unav-links {
  display: flex;
  align-items: stretch;
  overflow: visible;
  flex-shrink: 1;
}
.unav-link {
  font-size: .72rem !important;
  font-weight: 500;
  padding: 0 10px !important;
  white-space: nowrap;
  gap: 0 !important;
  border-bottom: 2px solid transparent;
  color: var(--text-2) !important;
  transition: color .15s, border-color .15s;
}
.unav-link:hover { color: var(--text-1) !important; }
.unav-link.active {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
  font-weight: 600;
}
.unav-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated, rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  flex-shrink: 0;
}
.unav-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: .74rem;
  font-family: Cairo, sans-serif;
  width: 130px;
}
.unav-search-input::placeholder { color: var(--text-3); }
.unav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-2);
  border-radius: 6px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.unav-icon-btn:hover { background: var(--bg-elevated, rgba(255,255,255,.07)); color: var(--text-1); }
.unav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 8px;
  transition: background .15s;
  flex-shrink: 0;
}
.unav-user:hover { background: var(--bg-elevated, rgba(255,255,255,.06)); }
.unav-uname {
  font-size: .69rem;
  color: var(--text-2);
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-header);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Nav dropdowns ── */
.nav-dropdown { position: relative; display: flex; align-items: stretch; }
.nav-drop-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 0 12px; cursor: pointer;
  font-size: .75rem; color: var(--nav-item-color, rgba(255,255,255,.55));
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color var(--transition), border-color var(--transition);
  white-space: nowrap; flex-shrink: 0; user-select: none;
}
.nav-drop-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-dropdown:hover .nav-drop-btn,
.nav-drop-btn:hover { color: var(--nav-item-hover, rgba(255,255,255,.85)); }
.nav-drop-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-drop-arrow { transition: transform .18s ease; margin-inline-start: 1px; }
.nav-dropdown:hover .nav-drop-arrow,
.nav-dropdown.open .nav-drop-arrow { transform: rotate(180deg); }
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  inset-inline-start: 0;
  background: var(--bg-header);
  border: 1px solid var(--border-nav);
  border-radius: 0 0 10px 10px;
  min-width: 170px;
  z-index: 300;
  padding: 6px 0;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.nav-dropdown:hover .nav-drop-menu,
.nav-dropdown.open .nav-drop-menu { display: block; }
.nav-drop-menu .nav-item {
  display: flex !important; align-items: center; gap: 8px;
  padding: 9px 16px !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  white-space: nowrap; font-size: .78rem;
}
.nav-drop-menu .nav-item:hover { background: rgba(255,255,255,.05); }
.nav-drop-menu .nav-item.active { color: var(--gold) !important; background: rgba(201,168,76,.08); }
.nav-drop-glbl {
  font-size: .6rem; font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .8px;
  padding: 8px 16px 4px;
}
.nav-drop-sep { height: 1px; background: var(--border); margin: 4px 12px; }
.nav-drop-wide { min-width: 200px; }
/* آخر dropdown يفتح من اليمين لتجنب الخروج عن الشاشة */
.nav-dropdown:last-child .nav-drop-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* ── Main ── */
.main {
  flex: 1;
  padding: 20px 16px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ── Footer ── */
.footer {
  height: var(--footer-h);
  background: var(--bg-header);
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 16px;
  justify-content: space-between;
  flex-shrink: 0;
}
.footer-text { font-size: .68rem; color: var(--text-3); }
.footer-links { display: flex; gap: 16px; }
.footer-link { font-size: .68rem; color: var(--text-3); cursor: pointer; transition: color var(--transition); }
.footer-link:hover { color: var(--gold); }

/* ══════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════ */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-page);
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}
.login-logo {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  margin: 0 auto 16px;
}
.login-title { text-align: center; font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.login-sub   { text-align: center; font-size: .78rem; color: var(--text-3); margin-bottom: 28px; }
.login-footer-lang { text-align: center; margin-top: 20px; }

/* ══════════════════════════════════════
   COMPONENTS
══════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 16px; height: 36px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: .78rem; font-weight: 600;
  cursor: pointer; border: none; transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary   { background: var(--gold); color: var(--bg-header); }
.btn-primary:hover { background: var(--gold-light); }
.btn-secondary { background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-elevated); color: var(--text-1); }
.btn-danger    { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.2); }
.btn-danger:hover { background: rgba(239,68,68,.16); }
.btn-success   { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.btn-ghost     { background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-1); }

/* ── Gharzah Unified Button Color System ── */
/* استخدم .btn-gh-* مع .btn و .btn-sm لتطبيق النظام الموحد */
/* ── Earth-tone button system ── */
.btn-gh-gold   { background:rgba(201,168,76,.12); color:#b8954a; border:1.5px solid rgba(201,168,76,.35); border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; display:inline-flex;align-items:center;gap:5px; }
.btn-gh-gold:hover   { background:rgba(201,168,76,.22); }
/* green → dark tan (approved / positive) */
.btn-gh-green  { background:rgba(139,115,85,.12); color:#8b7355; border:1.5px solid rgba(139,115,85,.35); border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; display:inline-flex;align-items:center;gap:5px; }
.btn-gh-green:hover  { background:rgba(139,115,85,.22); }
/* orange → warm tan (pending) */
.btn-gh-orange { background:rgba(196,168,130,.12); color:#8b7355; border:1.5px solid rgba(196,168,130,.35); border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; display:inline-flex;align-items:center;gap:5px; }
.btn-gh-orange:hover { background:rgba(196,168,130,.22); }
/* red → dark slate (rejected / negative) */
.btn-gh-red    { background:rgba(74,85,104,.12); color:#4a5568; border:1.5px solid rgba(74,85,104,.35); border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; display:inline-flex;align-items:center;gap:5px; }
.btn-gh-red:hover    { background:rgba(74,85,104,.22); }
/* blue → medium gray (info / details) */
.btn-gh-blue   { background:rgba(113,128,150,.12); color:#718096; border:1.5px solid rgba(113,128,150,.35); border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; display:inline-flex;align-items:center;gap:5px; }
.btn-gh-blue:hover   { background:rgba(113,128,150,.22); }
/* purple → medium brown (transfer / production) */
.btn-gh-purple { background:rgba(160,128,96,.12); color:#a08060; border:1.5px solid rgba(160,128,96,.35); border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; display:inline-flex;align-items:center;gap:5px; }
.btn-gh-purple:hover { background:rgba(160,128,96,.22); }
.btn-gh-neutral{ background:transparent; color:var(--text-2); border:1.5px solid var(--border-strong); border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; display:inline-flex;align-items:center;gap:5px; }
.btn-gh-neutral:hover{ background:var(--bg-elevated); color:var(--text-1); }

/* Status badges — unified */
.badge-gh { display:inline-flex;align-items:center;gap:4px; padding:3px 10px; border-radius:10px; font-size:12px; font-weight:600; font-family:'Cairo',sans-serif; border:1.5px solid; }
.badge-gh-gold   { background:rgba(201,168,76,.12); color:#b8954a; border-color:rgba(201,168,76,.35); }
.badge-gh-green  { background:rgba(139,115,85,.12); color:#8b7355; border-color:rgba(139,115,85,.35); }
.badge-gh-orange { background:rgba(196,168,130,.12); color:#8b7355; border-color:rgba(196,168,130,.35); }
.badge-gh-red    { background:rgba(74,85,104,.12);  color:#4a5568; border-color:rgba(74,85,104,.35); }
.badge-gh-blue   { background:rgba(113,128,150,.12);color:#718096; border-color:rgba(113,128,150,.35); }
.badge-gh-purple { background:rgba(160,128,96,.12); color:#a08060; border-color:rgba(160,128,96,.35); }
.badge-gh-gray   { background:var(--bg-elevated); color:var(--text-3); border-color:var(--border-strong); }

/* Workshop export dropdown */
.ws-mi {
  display: block; width: 100%; padding: 8px 12px;
  background: none; border: none; color: #e2d9c5;
  text-align: right; cursor: pointer; border-radius: 5px;
  font-size: .82rem; font-family: inherit;
}
.ws-mi:hover { background: rgba(56,189,248,.12); color: #7dd3fc; }
.btn-sm { height: 28px; padding: 0 10px; font-size: .72rem; }
.btn-lg { height: 42px; padding: 0 24px; font-size: .85rem; width: 100%; }
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Icon button ── */
.ibtn {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; background: transparent;
  color: var(--text-2); transition: all var(--transition); flex-shrink: 0;
}
.ibtn:hover { background: var(--bg-elevated); color: var(--text-1); }
.ibtn-gold  { background: var(--gold-dim); color: var(--gold); border: 1px solid var(--gold-border); }
.ibtn-gold:hover { background: rgba(201,168,76,.2); }
.ibtn svg   { width: 15px; height: 15px; }

/* ── Form fields ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .75rem; font-weight: 600; color: var(--text-2); }
.field-hint  { font-size: .7rem; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font); font-size: .88rem;
  transition: border-color var(--transition);
  outline: none;
}
.input   { height: 40px; padding: 0 12px; }
.select  { height: 40px; padding: 0 10px; cursor: pointer; }
.textarea { padding: 10px 12px; resize: vertical; min-height: 80px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }
/* Direction-aware alignment for global inputs */
html[dir="rtl"] .input,
html[dir="rtl"] .textarea { direction: rtl; text-align: right; }
html[dir="ltr"] .input,
html[dir="ltr"] .textarea { direction: ltr; text-align: left; }
.input-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Card ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: .85rem; font-weight: 600; color: var(--text-1); }

/* ── Stat card ── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-num  { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-lbl  { font-size: .72rem; color: var(--text-3); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }

/* ── Badge / Status ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.badge-pending  { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,158,11,.2); }
.badge-approved { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-rejected { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(239,68,68,.2); }
.badge-new      { background: var(--blue-dim);  color: var(--blue);  border: 1px solid rgba(59,130,246,.2); }
.badge-ready    { background: var(--purple-dim);color: var(--purple);border: 1px solid rgba(139,92,246,.2); }
.badge-delivered{ background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-review   { background: rgba(251,146,60,.12); color: #fb923c; border: 1px solid rgba(251,146,60,.25); }

/* ── Orders Stats Row ── */
.orders-stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ostat { font-size: .72rem; color: var(--text-3); }
.ostat strong { color: var(--text-1); font-weight: 700; }
.ostat-pending  strong { color: var(--amber); }
.ostat-approved strong { color: var(--green); }
.ostat-delivered strong { color: #a78bfa; }

/* ── Order List (single-column rows) ── */
.orders-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Order Row ── */
.order-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-top: 2px solid var(--card-stage-color, #9E9E9E);
  overflow: hidden;
  transition: border-color .15s, border-top-color .15s, box-shadow .15s, background .15s;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
}
.order-card:hover {
  border-color: rgba(201,168,76,.4);
  border-top-color: var(--card-stage-color, #9E9E9E);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  background: rgba(201,168,76,.03);
}
.order-card.is-approved {
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.03);
}
.order-card.is-approved:hover { background: rgba(34,197,94,.05); }
.order-card.is-pending {
  border-color: rgba(245,158,11,.2);
}
/* Left: ref + name */
.oc-hdr {
  padding: 10px 14px;
  border-inline-end: 1px solid var(--border);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.oc-ref {
  font-size: .72rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .5px;
}
.oc-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-1);
  margin-top: 3px;
}
.oc-order-no {
  font-size: .68rem;
  font-weight: 800;
  color: var(--gold);
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 4px;
  padding: 1px 7px;
  display: inline-block;
  margin-top: 2px;
  direction: ltr;
}
.oc-deposit-badge {
  font-size: .62rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 10px;
  padding: 2px 7px;
}
.oc-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .73rem;
  color: var(--text-2);
  padding: 8px 14px;
  align-items: center;
  flex: 1;
  align-content: flex-start;
}
.oc-acts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border-inline-start: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.oc-btn {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--font);
  transition: all .15s;
}
.oc-btn-approve  { background: rgba(34,197,94,.1);  color: #4ade80;  border-color: rgba(34,197,94,.25); }
.oc-btn-approve:hover  { background: rgba(34,197,94,.2); }
.oc-btn-reject   { background: rgba(239,68,68,.09); color: #f87171;  border-color: rgba(239,68,68,.2); }
.oc-btn-reject:hover   { background: rgba(239,68,68,.17); }
.oc-btn-ready    { background: rgba(59,130,246,.1); color: #60a5fa;  border-color: rgba(59,130,246,.25); }
.oc-btn-ready:hover    { background: rgba(59,130,246,.2); }
.oc-btn-detail   { background: rgba(201,168,76,.08);color: var(--gold);border-color: rgba(201,168,76,.25); }
.oc-btn-detail:hover   { background: rgba(201,168,76,.16); }
.oc-btn-danger   { background: rgba(239,68,68,.08);color: #f87171;border-color: rgba(239,68,68,.25); }
.oc-btn-danger:hover   { background: rgba(239,68,68,.18); }

/* Chip count badge inside chip */
.chip-count {
  background: rgba(201,168,76,.2);
  color: var(--gold);
  border-radius: 10px;
  padding: 0 6px;
  font-size: .62rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  display: inline-block;
  line-height: 16px;
}
.chip-count:empty { display: none; }

/* Smaller chips for date filter */
.chip-sm { font-size: .7rem; padding: 4px 10px; }

/* Modal section title mini */
.section-title-mini {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* Field display value */
.field-value {
  padding: 8px 10px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: var(--text-1);
}

/* Full width button */
.w-full { width: 100%; justify-content: center; }

/* ── Table ── */
.tbl-wrap { overflow-x: auto; }
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: .78rem;
}
.tbl th {
  text-align: right; padding: 10px 12px;
  color: var(--gold); font-weight: 700; font-size: .7rem;
  border-bottom: 2px solid var(--gold-border);
  white-space: nowrap;
  background: var(--gold-dim);
  letter-spacing: .03em;
}
[lang="en"] .tbl th { text-align: left; }
.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(201,168,76,.05); }
.tbl-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ── Search bar ── */
.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 12px; height: 36px;
}
.search-bar svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.search-bar input {
  background: none; border: none; outline: none;
  color: var(--text-1); font-family: var(--font); font-size: .78rem;
  flex: 1; width: 100%;
}
.search-bar input::placeholder { color: var(--text-4); }

/* ── Filter chips ── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 12px; border-radius: 20px;
  font-size: .72rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-strong); color: var(--text-2);
  background: transparent; font-family: var(--font);
  transition: all var(--transition);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.active { background: var(--gold-dim); color: var(--gold); border-color: var(--gold-border); }

/* ── Modal ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-modal);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: .9rem; font-weight: 700; }
.modal-body  { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.modal-footer .btn,
.modal-footer .btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: .78rem;
}

/* ── Page header ── */
.page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.page-title {
  font-size: 1rem; font-weight: 800; color: var(--text-1);
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--gold);
}
.page-sub   { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-actions .btn,
.page-actions .btn-sm { height: 36px; padding: 0 14px; font-size: .78rem; }

/* ── Toast ── */
.toast-wrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 600;
  animation: toastIn .2s ease;
  pointer-events: auto; white-space: nowrap;
}
.toast-success { background: var(--green); color: #fff; }
.toast-error   { background: var(--red);   color: #fff; }
.toast-info    { background: var(--blue);  color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Divider ── */
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ── Empty state ── */
.empty {
  text-align: center; padding: 48px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty svg { width: 48px; height: 48px; color: var(--text-4); }
.empty-title { font-size: .9rem; font-weight: 600; color: var(--text-2); }
.empty-sub   { font-size: .78rem; color: var(--text-3); }

/* ── Loading spinner ── */
.spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { display: flex; justify-content: center; padding: 40px; }

/* ═══════════════════════════════════════════════════════
   ORDER FORM — نموذج إنشاء وتعديل الطلبات
   ═══════════════════════════════════════════════════════ */

/* Wrapper */
.of-wrap { display: flex; flex-direction: column; height: 100%; }

/* Header */
.of-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.of-back-btn {
  display: flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
  color: var(--text-2); font-size: .78rem; cursor: pointer;
  transition: border-color .15s;
}
.of-back-btn:hover { border-color: var(--gold); color: var(--gold); }
.of-hdr-title { flex: 1; }
.of-hdr-main { font-size: 1rem; font-weight: 700; color: var(--text); }
.of-hdr-sub  { font-size: .8rem; color: var(--gold); font-weight: 600; }
.of-hdr-actions { display: flex; align-items: center; gap: 8px; }
.of-autosave { font-size: .7rem; font-weight: 700; color: var(--gold); transition: opacity .5s; }

/* Count bar */
.of-count-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.of-count-lbl { color: var(--text-2); }
.of-count-ctrl { display: flex; align-items: center; gap: 0; }
.of-cnt-btn {
  width: 44px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 1.6rem; font-weight: 700; cursor: pointer;
  color: var(--gold); transition: background .15s;
}
.of-cnt-btn:hover { background: var(--border); }
.of-cnt-val {
  min-width: 64px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; font-size: 2.4rem;
  font-weight: 900; color: var(--gold);
  background: var(--bg-2);
  border: 2px solid var(--gold-border);
  border-radius: 10px;
  letter-spacing: -.02em;
}
.of-count-price {
  flex: 1; text-align: center;
  font-size: 1.1rem; font-weight: 900; color: var(--gold);
  letter-spacing: .01em;
}

/* حقل إدخال عدد مخصص */
.of-cnt-custom {
  width: 90px;
  flex: 0 0 90px;
  height: 52px;
  min-width: 0;
  padding: 0 10px;
  font-size: .9rem;
  border-radius: 7px;
  border: 1px solid var(--gold-border);
  background: var(--bg-input);
  color: var(--text);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.of-cnt-custom::placeholder { color: var(--text-3); font-weight: 400; font-size:.72rem; }
.of-cnt-custom:focus { border-color: var(--gold); }
/* إخفاء أسهم الـ number input */
.of-cnt-custom::-webkit-outer-spin-button,
.of-cnt-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.of-cnt-custom[type=number] { -moz-appearance: textfield; }

/* ── Order checklist strip (admin) ── */
.order-checklist {
  display: flex; align-items: center; justify-content: space-around;
  padding: 6px 10px;
  background: var(--bg-elevated); border-top: 1px solid var(--border);
  gap: 4px;
}
.ocl-item {
  display: flex; align-items: center; gap: 5px;
  font-size: .65rem; font-weight: 700; color: var(--text-2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.ocl-item input[type=checkbox] {
  width: 14px; height: 14px; accent-color: #22c55e;
  cursor: pointer; flex-shrink: 0;
}
.ocl-item input[type=checkbox]:disabled { cursor: default; opacity: .75; }
.ocl-item.ocl-checked { color: #22c55e; }
.ocl-item.ocl-pay.ocl-checked { color: var(--gold); }
.ocl-item.ocl-ready.ocl-checked { color: #818cf8; }
.ocl-item.ocl-note { color: var(--text-3); transition: color .15s; }
.ocl-item.ocl-note:hover { color: #f59e0b; }
.ocl-item.ocl-note.ocl-note-active { color: #f59e0b; }
.ocl-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; }

/* Body */
.of-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }

/* Section */
.of-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.of-section-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer;
  background: var(--bg-2);
}
.of-section-icon { font-size: 1.1rem; }
.of-section-title { flex: 1; font-size: .95rem; font-weight: 700; color: var(--text); }
.of-section-chev { color: var(--text-3); transition: transform .2s; }
.of-section.collapsed .of-section-chev { transform: rotate(-90deg); }
.of-section.collapsed .of-section-body { display: none; }
.of-section-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* Accordion groups inside section */
.of-acc-group {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.of-acc-title {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--bg-2);
  font-size: .8rem; font-weight: 700; color: var(--text);
}
.of-acc-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; flex-shrink: 0;
}
.of-acc-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }

/* Form fields */
.of-fg { display: flex; flex-direction: column; gap: 6px; }
.of-lbl { font-size: .85rem; font-weight: 700; color: var(--text-2); }
.of-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.of-ordernum {
  padding: 9px 12px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; font-size: .9rem; font-weight: 800;
  color: var(--gold); letter-spacing: 1px; font-family: 'Courier New', monospace;
}
.of-hint { font-size: .68rem; color: var(--text-4); }

/* Material tabs */
.of-mat-tabs { display: flex; gap: 6px; }
.of-mt { cursor: pointer; flex: 1; }
.of-mt input { display: none; }
.of-mt span {
  display: block; text-align: center;
  padding: 8px 6px; border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-2);
  font-size: .72rem; font-weight: 700; color: var(--text-2);
  cursor: pointer; transition: all .15s;
  line-height: 1.3;
}
.of-mt span small { display: block; font-size: .6rem; font-weight: 400; color: var(--text-4); margin-top: 2px; }
.of-mt input:checked + span {
  border-color: var(--gold); background: rgba(201,168,76,.12);
  color: var(--gold);
}

/* Color swatches */
.of-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.of-csw {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1); cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.of-csw:hover { transform: scale(1.2); }
.of-csw.active { box-shadow: 0 0 0 2px var(--gold); transform: scale(1.15); }

/* ── Dark theme: all inputs / textareas inside order form ── */
.of-wrap input[type="text"],
.of-wrap input[type="tel"],
.of-wrap input[type="date"],
.of-wrap input[type="number"],
.of-wrap textarea,
.of-wrap select {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: 'Cairo', sans-serif;
  font-size: .9rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
/* RTL inputs */
html[dir="rtl"] .of-wrap input[type="text"],
html[dir="rtl"] .of-wrap input[type="number"],
html[dir="rtl"] .of-wrap textarea,
html[dir="rtl"] .of-wrap select { direction: rtl; text-align: right; }
/* LTR inputs */
html[dir="ltr"] .of-wrap input[type="text"],
html[dir="ltr"] .of-wrap input[type="number"],
html[dir="ltr"] .of-wrap textarea,
html[dir="ltr"] .of-wrap select { direction: ltr; text-align: left; }
/* Phone/date always LTR regardless of language */
.of-wrap input[type="tel"],
.of-wrap input[type="date"] { direction: ltr; text-align: left; }
.of-wrap textarea {
  resize: vertical;
  line-height: 1.6;
}
.of-wrap input[type="text"]:focus,
.of-wrap input[type="tel"]:focus,
.of-wrap input[type="date"]:focus,
.of-wrap input[type="number"]:focus,
.of-wrap textarea:focus,
.of-wrap select:focus { border-color: var(--gold); }
.of-wrap input::placeholder,
.of-wrap textarea::placeholder { color: var(--text-3); font-family: 'Cairo', sans-serif; }

/* ── Hotspot: responsive wrapper ── */
.of-svg-hotspot-wrap {
  position: relative;
  width: 160px;
  height: 196px;
  margin: 0 auto;
  flex-shrink: 0;
}
.of-svg-hotspot-wrap .of-jacket-svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 640px) {
  .of-svg-hotspot-wrap {
    width: 100%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 140 / 172;
  }
}

/* Collar row */
.of-collar-row { display: flex; gap: 8px; }
.of-crc { flex: 1; cursor: pointer; }
.of-crc input { display: none; }
.of-crc span {
  display: block; text-align: center; padding: 9px;
  border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--bg-2); font-size: .78rem; font-weight: 700;
  color: var(--text-2); cursor: pointer; transition: all .15s;
  line-height: 1.3;
}
.of-crc span small { display: block; font-size: .62rem; font-weight: 400; color: var(--text-4); margin-top: 2px; }
.of-crc input:checked + span {
  border-color: var(--gold); background: rgba(201,168,76,.1); color: var(--gold);
}

/* Jacket tabs */
.of-jacket-tabs {
  display: flex; gap: 8px; padding: 12px 16px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-wrap: nowrap;
}
.of-jtab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 14px; border-radius: 10px; min-width: 110px;
  border: 2px solid var(--border); background: var(--bg-card);
  cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0;
  text-align: left;
}
.of-jtab:hover { border-color: rgba(201,168,76,.5); background: rgba(201,168,76,.06); }
.of-jtab.active {
  border-color: var(--gold); background: rgba(201,168,76,.13);
  box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}
.of-jtab-head {
  display: flex; align-items: center; gap: 5px; width: 100%;
}
.of-jtab-icon { font-size: 1.15rem; line-height: 1; }
.of-jtab-num {
  font-size: .82rem; font-weight: 800; color: var(--text-1);
  flex: 1;
}
.of-jtab.active .of-jtab-num { color: var(--gold); }
.of-jtab-done { color: #22c55e; font-size: .85rem; font-weight: 800; }
.of-jtab-name {
  font-size: .75rem; font-weight: 600; color: var(--text-2);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.of-jtab-meta {
  font-size: .68rem; color: var(--text-3); font-weight: 500;
}
.of-jtab-mats {
  font-size: .63rem; color: var(--gold); font-weight: 600;
  opacity: .75;
}

/* Radio cards (gender, size) */
.of-radio-row { display: flex; gap: 6px; }
.of-rc { cursor: pointer; flex: 1; }
.of-rc input { display: none; }
.of-rc span {
  display: block; text-align: center; padding: 7px;
  border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--bg-2); font-size: .78rem; font-weight: 600;
  color: var(--text-2); transition: all .15s;
}
.of-rc input:checked + span { border-color: var(--gold); background: rgba(201,168,76,.1); color: var(--gold); }

/* Size grid */
.of-size-grid { display: flex; gap: 5px; flex-wrap: wrap; }
.of-sg { cursor: pointer; }
.of-sg input { display: none; }
.of-sg span {
  display: block; padding: 5px 10px;
  border-radius: 6px; border: 1.5px solid var(--border);
  background: var(--bg-2); font-size: .72rem; font-weight: 700;
  color: var(--text-2); transition: all .15s; cursor: pointer;
}
.of-sg input:checked + span { border-color: var(--gold); background: rgba(201,168,76,.12); color: var(--gold); }

/* Extra options */
.of-opts { display: flex; flex-direction: column; gap: 8px; }
.of-opt-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2); cursor: pointer;
  transition: border-color .15s;
}
.of-opt-row:hover { border-color: var(--gold); }
.of-opt-row input[type="checkbox"] { margin-top: 2px; accent-color: var(--gold); }
.of-opt-ar { font-size: .88rem; font-weight: 700; color: var(--text); }
.of-opt-en { font-size: .75rem; color: var(--text-3); }

/* Position section */
.of-pos-section {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-top: 16px;
}
.of-pos-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.of-pos-title { font-size: .92rem; font-weight: 700; color: var(--text); }
.of-pos-count { font-size: .75rem; font-weight: 700; color: var(--gold); }

/* Position tabs */
.of-pos-tabs {
  display: flex; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.of-pos-tab {
  flex: 1; padding: 8px 4px; font-size: .72rem; font-weight: 700;
  color: var(--text-3); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer; transition: all .15s;
}
.of-pos-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.of-ptbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--border); color: var(--text-3);
  font-size: .6rem; font-weight: 800; margin-right: 3px; padding: 0 4px;
  transition: all .2s;
}

/* Position views */
.of-pos-view { display: none; padding: 12px; }
.of-pos-view.active { display: block; }

/* SVG jacket wrap */
.of-svg-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.of-jacket-svg { width: 100%; height: 100%; display: block; }

/* Hotspots */
.of-hotspot {
  position: absolute;
  width: 28px; height: 28px;
  background: rgba(201,168,76,.15);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.of-hotspot:hover, .of-hotspot.filled {
  background: var(--gold); border-color: var(--gold);
}
.of-hotspot.filled .of-hs-num { color: #000; }
.of-hs-num {
  font-size: .65rem; font-weight: 800; color: var(--gold);
  font-family: 'Courier New', monospace;
}
.of-hotspot.filled .of-hs-num { color: #000; }

/* Position list items */
.of-pos-list { display: flex; flex-direction: column; gap: 5px; }
.of-pos-item {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2);
  transition: border-color .15s;
}
.of-pos-item:hover { border-color: var(--gold); }
.of-pos-item.pos-filled { border-color: rgba(201,168,76,.4); }
.of-pi-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-card); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800; color: var(--text-3);
  font-family: 'Courier New', monospace;
}
.pos-filled .of-pi-num { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,.1); }
.of-pi-ar { font-size: .82rem; font-weight: 700; color: var(--text); }
.of-pi-en { font-size: .7rem; color: var(--text-3); }
.of-pi-empty { font-size: .73rem; color: var(--text-4); }
.of-pi-filled { font-size: .73rem; color: var(--gold); font-weight: 600; }

/* Sleeves view */
.of-sleeves-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.of-sleeve-title { font-size: .82rem; font-weight: 700; color: var(--gold); margin-bottom: 6px; text-align: center; }
.of-sleeve-hotspot-wrap {
  position: relative;
  width: 70px;
  height: 175px;
  margin: 0 auto;
}

/* Price preview */
.of-price-preview {
  margin-top: 16px; padding: 10px 14px;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.2);
  border-radius: 10px; display: flex; justify-content: space-between; align-items: center;
}
.of-pp-lbl { font-size: .82rem; color: var(--text-3); }
.of-pp-val { font-size: .85rem; font-weight: 800; color: var(--gold); }

/* ── Position Modal ── */
.of-pos-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
}
.of-pos-modal {
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.of-pos-modal-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.of-pos-modal-num {
  font-size: 1.1rem; font-weight: 900; color: var(--gold);
  font-family: 'Courier New', monospace;
}
.of-pos-modal-name { font-size: .75rem; color: var(--text-2); margin-top: 2px; }
.of-pos-close {
  background: transparent; border: none; color: var(--text-3);
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.of-pos-close:hover { color: var(--red); background: rgba(239,68,68,.1); }

.of-pos-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.of-pm-section { display: flex; flex-direction: column; gap: 6px; }
.of-pm-section-title { font-size: .85rem; font-weight: 700; color: var(--text-2); }
.of-pm-img-preview {
  min-height: 100px; border-radius: 8px;
  border: 1.5px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg-2); cursor: pointer;
  transition: border-color .15s; text-align: center; padding: 8px;
}
.of-pm-img-preview:hover { border-color: var(--gold); }
.of-pm-img-preview .of-pm-x-icon {
  font-size: 2rem; font-weight: 900; line-height: 1;
  color: var(--text-4); pointer-events: none;
}
.of-pm-img-preview:hover .of-pm-x-icon { color: var(--gold); }
.of-pm-hint { font-size: .67rem; color: var(--gold); background: rgba(201,168,76,.08); padding: 5px 8px; border-radius: 6px; display: none; }

.of-pos-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--border);
}

/* btn-gold */
.btn-gold {
  background: var(--gold); color: #0a1628; border: none;
  font-weight: 700; font-family: 'Cairo', sans-serif;
}
.btn-gold:hover { background: #d4b25a; }

/* btn-sm */
.btn-sm { padding: 5px 10px; font-size: .72rem; }

/* green var */
:root { --green: #22c55e; }

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — شامل للجوال
   ══════════════════════════════════════════════════ */

/* ── Viewport fix ── */
html { -webkit-text-size-adjust: 100%; }

/* ── Touch targets — minimum 44px ── */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .oc-btn { min-height: 38px; padding: 8px 12px; }
  .chip { min-height: 36px; padding: 6px 14px; }
  .nav-item { min-height: 44px; padding: 0 10px; }
  .of-cnt-btn { width: 38px; height: 38px; font-size: 1.3rem; }
  .of-hotspot { width: 36px; height: 36px; }
  .of-hs-num { font-size: .72rem; }
  .ibtn { width: 40px; height: 40px; }
}

/* ── Tablet (768px) ── */
@media (max-width: 768px) {
  .main { padding: 14px 12px; }
  .hdr-uname { display: none; }
  .input-group { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .orders-cards { gap: 4px; }
  .order-card { grid-template-columns: 1fr; }
  .oc-hdr { border-inline-end: none; border-bottom: 1px solid var(--border); min-width: unset; }
  .page-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; min-height: 44px; font-size: .82rem; }
  .page-actions .btn-sm { min-height: 44px; height: auto; padding: 0 14px; font-size: .82rem; }
  .of-two-col { grid-template-columns: 1fr; }
  .of-mat-tabs { gap: 8px; }
  .of-mt span { padding: 10px 6px; font-size: .78rem; }
}

/* ── Phone (640px) ── */
@media (max-width: 640px) {

  /* Header */
  .hdr-row1 { padding: 0 10px; gap: 8px; }
  .hdr-logo-brand { display: none; }
  .hdr-title { font-size: .75rem; max-width: 120px; }

  /* Unified nav — mobile: إظهار الهيدر القديم وإخفاء صف الأيقونات */
  .hdr-admin-hidden { display: flex !important; }   /* أعد إظهار الهيدر القديم على الجوال */
  .unified-nav { height: auto; min-height: 0; }
  /* إخفاء كل شيء في الـ unav-inner عدا الروابط */
  .unav-logo,
  .unav-search-wrap,
  .unav-icon-btn,
  .unav-user,
  .unav-sep { display: none !important; }
  /* الروابط تملأ الـ nav بشكل أفقي قابل للتمرير */
  .unav-inner {
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
  }
  .unav-links {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    padding: 4px 10px 6px;
    gap: 0;
    scrollbar-width: none;
  }
  .unav-links::-webkit-scrollbar { display: none; }
  .unav-link {
    font-size: .68rem !important;
    padding: 0 10px !important;
    white-space: nowrap;
    min-height: 32px;
  }
  /* الـ dropdown: fixed أسفل الهيدر مع عرض معقول */
  .unav-links .nav-drop-menu {
    position: fixed;
    top: auto;
    inset-block-start: calc(var(--header-h) + 40px);
    inset-inline-start: auto !important;
    inset-inline-end: 8px;
    min-width: 180px;
    width: auto;
    border-radius: 10px;
    z-index: 400;
  }

  /* Nav bar — سطرين على الجوال */
  .nav-bar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 4px 0;
    justify-content: center;
  }
  .nav-item {
    font-size: .72rem;
    padding: 5px 8px;
    gap: 3px;
    height: auto;
    min-height: 36px;
    border-bottom: none !important;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .nav-item.active {
    background: rgba(201,168,76,.12);
    color: var(--gold);
  }
  .nav-item svg { display: none; }
  .nav-sep { display: none; }
  .nav-utils { gap: 2px; padding: 0 4px; }

  /* Main content */
  .main { padding: 12px 10px; }

  /* Stats */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-num  { font-size: 1.3rem; }

  /* Cards */
  .orders-cards { gap: 4px; }
  .order-card:hover { transform: none; }

  /* Order card info */
  .oc-info { gap: 8px; font-size: .76rem; }
  .oc-acts {
    flex-direction: row;
    border-inline-start: none;
    border-top: 1px solid var(--border);
    gap: 6px;
    padding: 8px 10px;
  }
  .oc-btn  { flex: 1; text-align: center; font-size: .74rem; justify-content: center; }

  /* Modal — bottom sheet */
  .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    max-width: 100% !important; width: 100% !important; margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto;
  }
  .modal-body { padding: 16px; gap: 12px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1; justify-content: center; min-height: 44px; height: auto; padding: 0 14px; }
  .modal-footer .btn-sm { min-height: 44px; height: auto; font-size: .82rem; }

  /* Operator — two-col → single col on mobile */
  .op-root { height: auto !important; }
  .op-two-col { flex-direction: column !important; overflow: visible !important; }
  .op-list-col { width: 100% !important; min-width: unset !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; max-height: 50vh; overflow-y: auto; padding: 0 10px 10px !important; }
  .op-detail-col { padding: 0 12px 20px !important; }
  .op-tabs { padding: 0 12px 10px !important; }
  .op-search { padding: 0 12px 8px !important; }

  /* Layout grid → single col */
  .input-group { grid-template-columns: 1fr; }
  .of-two-col  { grid-template-columns: 1fr; }

  /* Filter chips scroll */
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chips::-webkit-scrollbar { display: none; }

  /* ── ORDER FORM — نموذج الطلب ── */

  /* Header */
  .of-hdr { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .of-hdr-title { order: 3; width: 100%; }
  .of-back-btn  { padding: 8px 12px; font-size: .82rem; min-height: 40px; }
  .of-hdr-actions .btn { min-height: 40px; padding: 0 14px; }
  .of-autosave { font-size: .72rem; }

  /* Count bar */
  .of-count-bar { padding: 10px 12px; gap: 10px; }
  .of-count-lbl { font-size: .8rem; }
  .of-count-price { font-size: .8rem; }

  /* Body */
  .of-body { padding: 10px; gap: 10px; }

  /* Section body */
  .of-section-body { padding: 12px; }

  /* Accordion body */
  .of-acc-body { padding: 12px; }

  /* Material tabs — full width, taller */
  .of-mat-tabs { gap: 6px; }
  .of-mt span { padding: 12px 6px; font-size: .8rem; }

  /* Color swatches — bigger */
  .of-csw { width: 30px; height: 30px; }

  /* Collar row */
  .of-collar-row { flex-wrap: wrap; }
  .of-crc { flex: 1 1 calc(33% - 6px); min-width: 80px; }

  /* Radio rows (gender, size) */
  .of-radio-row { gap: 6px; }
  .of-rc span { padding: 10px 6px; font-size: .82rem; }

  /* Size grid */
  .of-size-grid { gap: 6px; }
  .of-sg span { padding: 8px 12px; font-size: .78rem; }

  /* Jacket tabs */
  .of-jacket-tabs { padding: 8px 10px; gap: 6px; }
  .of-jtab { padding: 9px 12px; min-width: 90px; }
  .of-jtab-num { font-size: .78rem; }
  .of-jtab-name { font-size: .7rem; max-width: 80px; }

  /* Position section */
  .of-pos-section { margin-top: 12px; }
  .of-pos-tab { padding: 10px 4px; font-size: .76rem; min-height: 44px; }

  /* SVG jacket — full width responsive */
  .of-svg-hotspot-wrap {
    width: 100%; max-width: 220px;
    height: auto; aspect-ratio: 140/172;
  }
  .of-svg-hotspot-wrap .of-jacket-svg { width: 100%; height: 100%; }

  /* Sleeve hotspot wrap */
  .of-sleeve-hotspot-wrap { width: 60px; height: 150px; }

  /* Position list items */
  .of-pos-item { grid-template-columns: 36px 1fr auto; padding: 9px 10px; }

  /* Price preview */
  .of-price-preview { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; }
  .of-pp-val { font-size: .9rem; }

  /* Position modal — bottom sheet */
  .of-pos-overlay { align-items: flex-end; padding: 0; }
  .of-pos-modal {
    max-width: 100%; width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 90vh; overflow-y: auto;
  }
  .of-pos-modal-hdr { padding: 12px 14px; }
  .of-pos-modal-body { padding: 12px 14px; }
  .of-pos-modal-footer { padding: 10px 14px; }
  .of-pos-modal-footer .btn { flex: 1; justify-content: center; min-height: 44px; }

  /* Inputs inside order form — taller touch target */
  .of-wrap input[type="text"],
  .of-wrap input[type="tel"],
  .of-wrap input[type="date"],
  .of-wrap input[type="number"],
  .of-wrap select { min-height: 48px; padding: 10px 14px; font-size: .95rem; }
  .of-wrap textarea { padding: 12px 14px; font-size: .95rem; }

  /* ── INVOICES TABLE ── */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding-bottom: 8px; }
  .tbl { min-width: 480px; }
  .tbl th, .tbl td { padding: 9px 10px; font-size: .76rem; }
  /* إخفاء عمود الهاتف على الجوال */
  .tbl th.col-phone, .tbl td.col-phone { display: none; }
  .tbl-actions { gap: 4px; }
  .tbl-actions .ibtn { width: 36px; height: 36px; }

  /* الجدول داخل مودال الفاتورة */
  .modal-body table { min-width: 0 !important; font-size: .76rem; }
  .modal-body table th, .modal-body table td { padding: 6px 8px !important; }

  /* أزرار مودال الفاتورة */
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1 1 calc(50% - 8px); justify-content: center; min-height: 44px; }

  /* أزرار الإجراءات في الجداول — حجم لمس مناسب */
  .tbl button { min-height: 36px; min-width: 36px; padding: 6px 10px !important; font-size: .78rem !important; }

  /* page-hdr actions — full width on mobile */
  .page-actions { width: 100%; display: flex; gap: 8px; }
  .page-actions button { flex: 1; justify-content: center; }

  /* Customer dashboard cards */
  .cust-order-card { padding: 12px !important; }

  /* Permissions cards */
  .perm-card { padding: 12px !important; }

  /* إخفاء أعمدة غير ضرورية في الجداول على الجوال */
  .tbl .col-hide-mobile { display: none; }
}

/* ── Small phone (400px) ── */
@media (max-width: 400px) {
  .hdr-row1 { padding: 0 8px; }
  .main { padding: 10px 8px; }
  .of-body { padding: 8px; }
  .of-section-body { padding: 10px; }
  .stat-num { font-size: 1.15rem; }
  .nav-item { font-size: .74rem; padding: 0 8px; }

  /* Order form */
  .of-mat-tabs { gap: 4px; }
  .of-mt span { padding: 10px 4px; font-size: .74rem; }
}

@media print { .hdr, .nav-bar, .unified-nav, .footer { display: none !important; } }

@keyframes hdr-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;  }
  50%       { transform: scale(1.3); opacity: .7; }
}

/* ══════════════════════════════════════════════════════
   كشف التدقيق — JPC Audit Sheet Print Styles
   ══════════════════════════════════════════════════════ */
#audit-sheet-wrap { display: none; }
@media print {
  body > *:not(#audit-sheet-wrap) { display: none !important; }
  #audit-sheet-wrap { display: block !important; }
  .audit-page {
    width: 210mm; min-height: 297mm;
    padding: 14mm 12mm 10mm;
    box-sizing: border-box;
    page-break-after: always;
    font-family: 'Cairo', Arial, sans-serif;
    color: #111; background: #fff;
    position: relative;
  }
  .audit-page:last-child { page-break-after: avoid; }
  .audit-hdr { display:flex;align-items:center;justify-content:space-between;border-bottom:2.5pt solid #0F1A2B;padding-bottom:6pt;margin-bottom:10pt }
  .audit-logo-img { height: 38pt; object-fit: contain; display: block; }
  .audit-title-main { font-size:14pt;font-weight:900;color:#0F1A2B;text-align:center;line-height:1.2;font-family:'Cairo',sans-serif }
  .audit-title-sub { font-size:7.5pt;color:#777;text-align:center;letter-spacing:.5px;font-family:'Cairo',sans-serif }
  .audit-meta { font-size:8pt;color:#555;line-height:1.7;text-align:left;font-family:'Cairo',sans-serif }
  .audit-meta strong { color: #111; }
  .audit-shared { background:#f0f4f8;border:1pt solid #d0d8e4;border-radius:4pt;padding:8pt 11pt;margin-bottom:9pt;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6pt }
  .audit-shared-item { font-size:8pt;font-family:'Cairo',sans-serif }
  .audit-shared-lbl { color:#888;font-size:7pt;margin-bottom:1pt }
  .audit-shared-val { font-weight:700;color:#0F1A2B }
  .audit-jhdr { background:#0F1A2B;border-radius:5pt;padding:8pt 11pt;margin-bottom:9pt;display:flex;align-items:center;justify-content:space-between }
  .audit-jname { font-size:12pt;font-weight:900;color:#fff;line-height:1.2;font-family:'Cairo',sans-serif }
  .audit-jsub { font-size:8pt;color:rgba(255,255,255,.6);margin-top:2pt;font-family:'Cairo',sans-serif }
  .audit-jnum { font-size:8pt;color:#C9A84C;font-weight:700;margin-bottom:2pt;font-family:'Cairo',sans-serif }
  .audit-chips { display:flex;gap:6pt }
  .audit-chip { background:rgba(201,168,76,.2);border:1pt solid rgba(201,168,76,.4);border-radius:3pt;padding:3pt 8pt;text-align:center }
  .audit-chip-v { font-size:11pt;font-weight:900;color:#C9A84C;line-height:1.1;font-family:'Cairo',sans-serif }
  .audit-chip-l { font-size:7pt;color:rgba(255,255,255,.55);font-family:'Cairo',sans-serif }
  .audit-table { width:100%;border-collapse:collapse;margin-bottom:9pt;table-layout:fixed }
  .audit-table th { background:#0F1A2B;color:#C9A84C;font-size:8pt;font-weight:700;padding:5pt 7pt;border:1pt solid #0F1A2B;text-align:right;font-family:'Cairo',sans-serif }
  .audit-table td { border:1pt solid #ccc;padding:4pt 6pt;vertical-align:middle;text-align:right;font-size:8.5pt;font-family:'Cairo',sans-serif }
  .audit-col-check { width:28pt }
  .audit-col-pos { width:70pt }
  .audit-col-img { width:58pt;text-align:center !important;padding:3pt !important }
  .audit-col-note { width:75pt }
  .audit-cb { width:14pt;height:14pt;border:1.5pt solid #0F1A2B;border-radius:2.5pt;display:inline-block }
  .audit-img-box { width:50pt;height:50pt;border:1pt solid #ddd;border-radius:3pt;overflow:hidden;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#f8f8f6 }
  .audit-img-box img { width:100%;height:100%;object-fit:cover }
  .audit-txt-box { width:50pt;height:50pt;border:1pt dashed #C9A84C;border-radius:3pt;margin:0 auto;background:#fffdf5;display:flex;align-items:center;justify-content:center;padding:3pt;box-sizing:border-box }
  .audit-txt-val { font-size:8pt;font-weight:700;color:#0F1A2B;text-align:center;word-break:break-all;line-height:1.3;font-family:'Cairo',sans-serif }
  .audit-empty-box { width:50pt;height:50pt;background:#f5f5f5;border:1pt solid #e5e5e5;border-radius:3pt;margin:0 auto }
  .audit-nline { border-bottom:1pt solid #bbb;height:12pt;margin-bottom:3pt }
  .audit-pos-ar { font-size:9pt;font-weight:700;color:#0F1A2B;font-family:'Cairo',sans-serif }
  .audit-pos-en { font-size:7.5pt;color:#aaa;font-weight:400;font-family:'Cairo',sans-serif }
  .audit-foot { border:1pt solid #ccc;border-radius:4pt;padding:8pt 11pt }
  .audit-res-row { display:flex;gap:9pt;margin:5pt 0 9pt }
  .audit-res { border:1.5pt solid #ccc;border-radius:3pt;padding:3pt 9pt;display:flex;align-items:center;gap:5pt;font-size:8.5pt;font-weight:700;font-family:'Cairo',sans-serif }
  .audit-res-cb { width:11pt;height:11pt;border:1.5pt solid currentColor;border-radius:2pt;flex-shrink:0 }
  .audit-fgrid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10pt }
  .audit-fl { font-size:7.5pt;color:#888;margin-bottom:3pt;font-family:'Cairo',sans-serif }
  .audit-ff { border-bottom:1pt solid #bbb;font-size:9pt;font-weight:700;color:#111;padding-bottom:1pt;min-height:12pt;font-family:'Cairo',sans-serif }
  .audit-pgn { font-size:7.5pt;color:#aaa;text-align:center;margin-top:8pt;font-family:'Cairo',sans-serif }
  .audit-res-label { font-size:8.5pt;font-family:'Cairo',sans-serif }
  @page { margin: 0; }
}

/* ══════════════════════════════════════════
   V5 — Product Type Selector Buttons
   ══════════════════════════════════════════ */
.of-pt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 6px;
  background: var(--bg-2, #f0f4f8);
  border: 2px solid var(--border, #d0d9e6);
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s;
  font-family: 'Cairo', sans-serif;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.of-pt-btn .of-pt-ico {
  width: 52px; height: 52px;
  object-fit: contain;
  display: block;
  margin: 0 auto 2px;
  filter: grayscale(15%);
  transition: filter .2s;
}
.of-pt-btn .of-pt-lbl { font-size: .75rem; font-weight: 700; color: var(--text-1); }

.of-pt-btn.active {
  background: rgba(201,168,76,.12);
  border-color: #C9A84C;
  box-shadow: 0 0 0 2px rgba(201,168,76,.22);
}
.of-pt-btn.active .of-pt-ico { filter: none; }
.of-pt-btn.active .of-pt-lbl { color: #8A6A1C; }

.of-pt-btn:hover:not(.active) {
  background: var(--bg-3, #e8eef5);
  border-color: rgba(201,168,76,.45);
}

/* شارة عدد الجاكيتات على بطاقة النوع */
.of-pt-count {
  display: none; /* مخفية افتراضياً */
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: #C9A84C;
  color: #000;
  font-size: .68rem;
  font-weight: 900;
  margin-top: 5px;
  line-height: 1;
}
.of-pt-btn.active .of-pt-count {
  display: inline-flex;
}
/* السينور جاكيت: تخطيط أفقي — الشارة على اليسار */
.of-pt-btn--wide .of-pt-count {
  margin-top: 0;
  margin-right: auto; /* دفعها لأقصى اليسار في RTL */
}

/* Dark mode */
[data-theme="dark"] .of-pt-btn {
  background: rgba(255,255,255,.05);
  border-color: var(--border, #2a3448);
  box-shadow: none;
}
[data-theme="dark"] .of-pt-btn:hover:not(.active) {
  background: rgba(255,255,255,.08);
}
[data-theme="dark"] .of-pt-btn.active {
  background: rgba(201,168,76,.15);
}
[data-theme="dark"] .of-pt-btn.active .of-pt-lbl { color: #C9A84C; }

/* ══════════════════════════════════════════
   Wizard — Step Bar & Navigation
   ══════════════════════════════════════════ */
.of-wiz-bar {
  display: flex;
  align-items: flex-start;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
}
.of-wiz-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 14px 4px 0;
  align-self: flex-start;
  flex-shrink: 1;
}
.of-wiz-stp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 52px;
}
.of-wiz-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.of-wiz-label {
  font-size: .6rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  max-width: 56px;
  transition: color .2s;
}
.of-wiz-stp.active .of-wiz-circle {
  background: var(--gold, #C9A84C);
  border-color: var(--gold, #C9A84C);
  color: #000;
  box-shadow: 0 0 0 3px rgba(201,168,76,.22);
}
.of-wiz-stp.active .of-wiz-label {
  color: var(--gold, #C9A84C);
  font-weight: 700;
}
.of-wiz-stp.done .of-wiz-circle {
  background: rgba(201,168,76,.12);
  border-color: var(--gold, #C9A84C);
  color: var(--gold, #C9A84C);
  font-size: .8rem;
}
.of-wiz-stp.done .of-wiz-label {
  color: var(--gold, #C9A84C);
}
.of-wiz-stp.done .of-wiz-connector {
  background: var(--gold, #C9A84C);
}

/* Wizard bottom nav */
.of-wiz-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* ══ Review Step ══ */
.of-rev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.of-rev-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.of-rev-card-lbl {
  font-size: .62rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.of-rev-card-val {
  font-size: .82rem;
  color: var(--text-1);
  font-weight: 600;
}
.of-rev-jackets {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.of-rev-jacket {
  display: grid;
  grid-template-columns: 22px 1fr 44px 44px 44px;
  gap: 4px;
  align-items: center;
  padding: 7px 10px;
  font-size: .78rem;
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.of-rev-jacket:last-child { border-bottom: none; }
.of-rev-jacket:hover { background: rgba(201,168,76,.06); }
.of-rev-jacket-hdr {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: default;
}
.of-rev-jacket-hdr:hover { background: none; }
.of-rev-jnum  { font-weight: 700; color: var(--gold); }
.of-rev-jname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ══════════════════════════════════════
   V6.0 — Customer Mobile Design
   ══════════════════════════════════════ */

/* Search bar */
.v6-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 22px; padding: 8px 14px; margin: 10px 14px 0;
  font-size: .85rem; color: var(--text-3); cursor: text;
}
.v6-search svg { flex-shrink: 0; opacity: .5; }

/* Filter pills */
.v6-filters {
  display: flex; gap: 6px; padding: 10px 14px 0; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.v6-filters::-webkit-scrollbar { display: none; }
.v6-pill {
  padding: 5px 14px; border-radius: 20px; font-size: .75rem;
  font-weight: 600; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border); transition: all .15s;
  background: var(--bg-card); color: var(--text-3);
}
.v6-pill.active {
  background: var(--text-1); color: var(--bg-page);
  border-color: var(--text-1);
}

/* Order card V6 */
.v6-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin: 0 0 10px;
  transition: box-shadow .15s;
}
[data-theme="light"] .v6-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.v6-card-top {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 4px;
}
.v6-ref { font-size: .95rem; font-weight: 700; color: var(--text-1); }
.v6-school { font-size: .78rem; color: var(--text-3); margin-bottom: 10px; }

/* Progress bar V6 */
.v6-progress { display: flex; align-items: center; gap: 0; margin-bottom: 10px; }
.v6-step {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; z-index: 1;
  border: 2px solid var(--border);
  background: var(--bg-card); color: var(--text-3);
}
.v6-step.done  { background: #22c55e; border-color: #22c55e; color: #fff; }
.v6-step.current { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.v6-step-line { flex: 1; height: 2px; background: var(--border); }
.v6-step-line.done { background: #22c55e; }
.v6-step-lbl-row {
  display: flex; justify-content: space-between;
  margin-bottom: 10px; padding: 0 0;
}
.v6-step-lbl { flex: 1; font-size: .58rem; text-align: center; color: var(--text-3); }
.v6-step-lbl.done    { color: #22c55e; font-weight: 600; }
.v6-step-lbl.current { color: #3b82f6; font-weight: 700; }

/* Action buttons V6 */
.v6-btns { display: flex; gap: 8px; }
.v6-btn {
  flex: 1; padding: 7px 4px; border-radius: 9px; font-size: .78rem;
  font-weight: 600; text-align: center; cursor: pointer; border: none;
  font-family: var(--font);
}
.v6-btn-outline {
  background: var(--bg-elevated); color: var(--text-2);
  border: 1px solid var(--border);
}
.v6-btn-solid {
  background: var(--text-1); color: var(--bg-page);
}
.v6-btn-gold {
  background: rgba(201,168,76,.15); color: var(--gold);
  border: 1px solid var(--gold-border);
}

/* Status badge V6 */
.v6-badge {
  display: inline-block; padding: 3px 9px;
  border-radius: 20px; font-size: .72rem; font-weight: 600;
}

/* Bottom nav V6 */
#v6-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--bg-header); border-top: 1px solid var(--border);
  display: flex; padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  display: none;
}
#v6-bottom-nav.visible { display: flex; }
.v6-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px; cursor: pointer;
  font-size: .65rem; color: var(--text-3);
}
.v6-nav-item.active { color: var(--text-1); font-weight: 700; }
.v6-nav-item svg { width: 22px; height: 22px; }

/* Cards container — add bottom padding for fixed nav */
.v6-cards-wrap { padding-bottom: 72px; }

/* Empty state V6 */
.v6-empty {
  text-align: center; padding: 40px 20px; color: var(--text-3);
}
.v6-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.v6-empty-title { font-size: 1rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }


/* Preview bar in light mode */
[data-theme="light"] .preview-bar {
  background: var(--bg-header) !important;
  color: var(--text-1) !important;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .preview-bar .inv-title {
  color: var(--text-2) !important;
}
[data-theme="light"] .preview-bar .btn-close {
  background: var(--bg-elevated) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}

/* Dark panel cards (permissions, customers) in light mode */
[data-theme="light"] [style*="background:#0d1b2a"],
[data-theme="light"] [style*="background: #0d1b2a"] {
  background: var(--bg-card) !important;
  border-color: rgba(201,168,76,.3) !important;
}


/* ══════════════════════════════════════════════════════════════
   V6 Admin — Light Mode Visual Enhancements
   ══════════════════════════════════════════════════════════════ */

/* ── Better shadows & depth in light mode ── */
[data-theme="light"] {
  --shadow-card:        0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --shadow-card-hover:  0 4px 12px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.07);
  --shadow-modal:       0 16px 48px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.08);
  --tbl-head-bg:        #f3f6fa;
  --tbl-row-alt:        #fafbfc;
  --tbl-row-hover:      #e8f0fc;
  --tbl-row-hover-border: rgba(201,168,76,.3);
}

/* ── Table header ── */
[data-theme="light"] .tbl th {
  background: var(--tbl-head-bg);
  color: #374151;
  font-weight: 700;
  font-size: .71rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-bottom: 2px solid #e5e9f0;
}

/* ── Table rows ── */
[data-theme="light"] .tbl td {
  border-bottom: 1px solid #f0f2f5;
  color: #374151;
}
[data-theme="light"] .tbl tbody tr:nth-child(even) td {
  background: var(--tbl-row-alt);
}
[data-theme="light"] .tbl tr:hover td {
  background: var(--tbl-row-hover) !important;
  border-bottom-color: var(--tbl-row-hover-border);
}

/* ── Table wrap — card-like container ── */
[data-theme="light"] .tbl-wrap {
  border-radius: var(--radius);
  border: 1px solid #e5e9f0;
  box-shadow: var(--shadow-card);
  background: #fff;
  overflow: hidden;
}

/* ── Cards ── */
[data-theme="light"] .card {
  box-shadow: var(--shadow-card);
  border-color: #e5e9f0;
  transition: box-shadow .2s ease;
}
[data-theme="light"] .card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Stat card ── */
[data-theme="light"] .stat-card {
  box-shadow: var(--shadow-card);
  border-color: #e5e9f0;
}
[data-theme="light"] .stat-num {
  font-weight: 800;
  letter-spacing: -.5px;
}
[data-theme="light"] .stat-lbl {
  font-weight: 600;
  font-size: .71rem;
  letter-spacing: .2px;
}

/* ── Page header ── */
[data-theme="light"] .page-hdr {
  padding-bottom: 14px;
  border-bottom: 1.5px solid #e5e9f0;
  margin-bottom: 20px;
}
[data-theme="light"] .page-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.2px;
}
[data-theme="light"] .page-sub {
  color: #6b7280;
  font-size: .76rem;
}

/* ── Search bar ── */
[data-theme="light"] .search-bar {
  background: #fff;
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: border-color .15s, box-shadow .15s;
}
[data-theme="light"] .search-bar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
[data-theme="light"] .search-bar input {
  color: #111827;
}
[data-theme="light"] .search-bar svg {
  color: #9ca3af;
}

/* ── Filter chips ── */
[data-theme="light"] .chip {
  background: #fff;
  border-color: #d1d5db;
  color: #4b5563;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
[data-theme="light"] .chip:hover {
  background: #fdf6e3;
  border-color: var(--gold);
  color: #b8954a;
}
[data-theme="light"] .chip.active {
  background: #fdf0d0;
  border-color: #c9a84c;
  color: #8a6d2a;
  font-weight: 700;
}

/* ── Buttons — light mode polish ── */
[data-theme="light"] .btn-primary {
  box-shadow: 0 2px 6px rgba(201,168,76,.3);
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 4px 10px rgba(201,168,76,.4);
}
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost {
  background: #fff;
  border-color: #d1d5db;
  color: #374151;
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-ghost:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* ── Badges — better light colors ── */
[data-theme="light"] .badge-pending  { background: #fffbeb; color: #92400e; border-color: rgba(217,119,6,.2); }
[data-theme="light"] .badge-approved { background: #f0fdf4; color: #14532d; border-color: rgba(21,128,61,.2); }
[data-theme="light"] .badge-rejected { background: #fef2f2; color: #7f1d1d; border-color: rgba(185,28,28,.2); }
[data-theme="light"] .badge-new      { background: #eff6ff; color: #1e3a8a; border-color: rgba(29,78,216,.2); }
[data-theme="light"] .badge-ready    { background: #faf5ff; color: #4c1d95; border-color: rgba(109,40,217,.2); }
[data-theme="light"] .badge-delivered{ background: #f0fdf4; color: #14532d; border-color: rgba(21,128,61,.2); }
[data-theme="light"] .badge-review   { background: #fff7ed; color: #7c2d12; border-color: rgba(194,65,12,.2); }

/* ── Modal ── */
[data-theme="light"] .modal {
  box-shadow: var(--shadow-modal);
  border-color: #e5e9f0;
}
[data-theme="light"] .modal-header {
  background: #f9fafb;
  border-bottom-color: #e5e9f0;
}
[data-theme="light"] .modal-footer {
  background: #f9fafb;
  border-top-color: #e5e9f0;
}

/* ── WhatsApp table (same .tbl rules apply; extra polish) ── */
[data-theme="light"] .wa-table th {
  background: var(--tbl-head-bg);
  font-weight: 700;
  border-bottom: 2px solid #e5e9f0;
}
[data-theme="light"] .wa-table td {
  border-bottom: 1px solid #f0f2f5;
}
[data-theme="light"] .wa-table tr:hover td {
  background: var(--tbl-row-hover) !important;
}
[data-theme="light"] .wa-table-wrap {
  border-radius: var(--radius);
  border: 1px solid #e5e9f0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   V6 — Calm Glassmorphism Light Mode (Dashboard + All Screens)
   ══════════════════════════════════════════════════════════════ */

/* ── Soft page background ── */
[data-theme="light"] #app,
[data-theme="light"] body {
  background: linear-gradient(160deg, #e8f0fc 0%, #f0f6ff 50%, #e4edf9 100%) fixed;
}

/* ── Nav — frosted glass ── */
[data-theme="light"] .nav {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 12px rgba(0,0,0,.06);
}

/* ── Header — frosted glass ── */
[data-theme="light"] .header {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}

/* ── Cards — glassy ── */
[data-theme="light"] .card {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(201,168,76,.18) !important;
  border-top: 2px solid rgba(201,168,76,.45) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .card:hover {
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.05) !important;
}

/* ── Stat cards — calmer, glassy ── */
[data-theme="light"] .stat-card {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.03) !important;
}
[data-theme="light"] .stat-num {
  font-weight: 700;
  opacity: .85;  /* slightly muted numbers */
}

/* ── Table wrap — glassy ── */
[data-theme="light"] .tbl-wrap {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .wa-table-wrap {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}

/* ── Table rows — ultra-subtle on glass ── */
[data-theme="light"] .tbl th {
  background: rgba(243,246,250,.8) !important;
}
[data-theme="light"] .tbl tbody tr:nth-child(even) td {
  background: rgba(248,250,252,.6) !important;
}
[data-theme="light"] .tbl tr:hover td {
  background: rgba(201,168,76,.05) !important;
}

/* ── Modal — glassy ── */
[data-theme="light"] .modal {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.95) !important;
}
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
  background: rgba(249,250,251,.7) !important;
}

/* ── Search bar — glassy ── */
[data-theme="light"] .search-bar {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(0,0,0,.1) !important;
}

/* ── Chips — glassy ── */
[data-theme="light"] .chip {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Mute amber/green/red stat colors slightly ── */
[data-theme="light"] .stat-num[style*="color:#f59e0b"],
[data-theme="light"] .stat-num[style*="color: #f59e0b"] { color: #c97c10 !important; }
[data-theme="light"] .stat-num[style*="color:#22c55e"],
[data-theme="light"] .stat-num[style*="color: #22c55e"] { color: #16a34a !important; }
[data-theme="light"] .stat-num[style*="color:#a78bfa"],
[data-theme="light"] .stat-num[style*="color: #a78bfa"] { color: #7c3aed !important; }
[data-theme="light"] .stat-num[style*="color:#60a5fa"],
[data-theme="light"] .stat-num[style*="color: #60a5fa"] { color: #2563eb !important; }

/* ══════════════════════════════════════════════════════════════
   V6 Orders Page — Visual Improvements
   ══════════════════════════════════════════════════════════════ */

/* ── Status badge overrides — more distinct in light mode ── */
[data-theme="light"] .badge-pending  { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }
[data-theme="light"] .badge-approved { background:#f0fdf4; color:#166534; border:1px solid #86efac; font-weight:700; }
[data-theme="light"] .badge-rejected { background:#fff1f2; color:#9f1239; border:1px solid #fda4af; }
[data-theme="light"] .badge-new      { background:#f0f9ff; color:#075985; border:1px solid #7dd3fc; }
[data-theme="light"] .badge-ready    { background:#faf5ff; color:#6d28d9; border:1px solid #c4b5fd; font-weight:700; }
[data-theme="light"] .badge-delivered{ background:#f0fdf4; color:#166534; border:1px solid #86efac; }
[data-theme="light"] .badge-review   { background:#eff6ff; color:#1e40af; border:1px solid #93c5fd; }

/* ── Row left-border accent on hover ── */
[data-theme="light"] .tbl tbody tr {
  transition: background .12s, border-color .12s;
  border-right: 3px solid transparent;
}
[data-theme="light"] .tbl tbody tr:hover {
  border-right: 3px solid var(--gold);
}

/* ── Amount — stronger number ── */
[data-theme="light"] .tbl td strong,
[data-theme="light"] .tbl td b {
  font-weight: 700;
  color: #111827;
}

/* ── Order number link — steel blue instead of gold for better readability ── */
[data-theme="light"] .tbl td a,
[data-theme="light"] .order-num,
[data-theme="light"] [style*="color:var(--gold)"],
[data-theme="light"] [style*="color: var(--gold)"] {
  font-weight: 700;
}

/* ── Chips row — tighter, more polished ── */
[data-theme="light"] .chips { gap: 5px; }
[data-theme="light"] .chip { 
  font-size: .71rem; 
  padding: 4px 11px;
  letter-spacing: .1px;
}
[data-theme="light"] .chip.active {
  box-shadow: 0 2px 6px rgba(201,168,76,.2);
}

/* ── Action bar (select to enable) ── */
[data-theme="light"] [style*="Select an order"],
[data-theme="light"] .order-bulk-bar {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid #e5e9f0 !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ── Table header — pinned/sticky feel ── */
[data-theme="light"] .tbl thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
[data-theme="light"] .tbl th {
  background: rgba(243,246,250,.97) !important;
  backdrop-filter: blur(4px);
}

/* ── Days badge (colored number circle) ── */
[data-theme="light"] .day-badge,
[data-theme="light"] [style*="border-radius:50%"][style*="font-weight:700"] {
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}