/* =====================================================================
   Diriyah Admin — Unified Theme (Light / Dark)
   Burgundy / Copper / Cream brand · Glass design system · LTR/RTL safe
   ===================================================================== */

:root {
  --gold:        #dc8f60;
  --gold-soft:   #b25e36;
  --gold-deep:   #c2703a;
  --amber:       #54132b;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --sidebar-w:   280px;
  --topbar-h:    78px;
  --gap:         22px;
  --glass-radius: 20px;
  --rtl: 1;
}
[dir="rtl"] { --rtl: -1; }

/* ============================ LIGHT THEME ============================ */
html[data-theme="light"],
html:not([data-theme]) {
  --bg-0:            #efe4d6;
  --bg-1:            #e7d8c6;

  --gold:            #dc8f60;
  --gold-soft:       #b25e36;
  --gold-deep:       #c2703a;
  --amber:           #54132b;

  --ink:             #45172a;
  --ink-muted:       #794551;
  --ink-faint:       #9c727c;

  --glass-bg:        rgba(255, 253, 250, 0.82);
  --glass-bg-2:      rgba(255, 250, 244, 0.66);
  --glass-border:    rgba(84, 19, 43, 0.16);
  --glass-blur:      18px;
  --glass-sat:       1.1;
  --glass-shadow:    0 22px 56px -28px rgba(84, 19, 43, 0.32);
  --glow:            rgba(220, 143, 96, 0.55);

  --ok:   oklch(0.55 0.13 150);
  --warn: oklch(0.56 0.13 70);
  --bad:  oklch(0.55 0.18 28);
  --info: oklch(0.54 0.12 240);

  color-scheme: light;
}

/* ============================ DARK THEME ============================ */
html[data-theme="dark"] {
  --bg-0:            #1a0a12;
  --bg-1:            #25101a;

  --gold:            #dc8f60;
  --gold-soft:       #e3aa80;
  --gold-deep:       #c2703a;
  --amber:           #7c1f3b;

  --ink:             #f3e8da;
  --ink-muted:       #d7c0b0;
  --ink-faint:       #a08070;

  --glass-bg:        rgba(60, 22, 38, 0.46);
  --glass-bg-2:      rgba(78, 32, 48, 0.34);
  --glass-border:    rgba(220, 143, 96, 0.24);
  --glass-blur:      22px;
  --glass-sat:       1.3;
  --glass-shadow:    0 22px 56px -26px rgba(0, 0, 0, 0.78);
  --glow:            rgba(226, 166, 120, 0.55);

  --ok:   oklch(0.78 0.12 150);
  --warn: oklch(0.82 0.12 78);
  --bad:  oklch(0.68 0.17 25);
  --info: oklch(0.74 0.10 235);

  color-scheme: dark;
}

/* ============================ BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Cairo', sans-serif; font-weight: 700; margin: 0; line-height: 1.2; color: var(--ink); }
a { color: var(--gold-soft); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(220,143,96,.30); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(220,143,96,.50); background-clip: padding-box; }

/* ============================ BACKGROUND ============================ */
.dg-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(220,143,96,.26) 0%, transparent 55%),
    radial-gradient(120% 120% at 0% 110%, rgba(84,19,43,.10) 0%, transparent 55%),
    var(--bg-0);
}
html[data-theme="dark"] .dg-bg {
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(220,143,96,.16) 0%, transparent 55%),
    radial-gradient(120% 120% at 0% 110%, rgba(124,31,59,.30) 0%, transparent 55%),
    var(--bg-0);
}
.dg-blob {
  position: fixed; z-index: -1; border-radius: 50%;
  filter: blur(84px); pointer-events: none;
  animation: dgDrift 26s var(--ease) infinite alternate;
  will-change: transform;
}
.dg-blob.b1 { width: 540px; height: 540px; top: -120px; inset-inline-start: -80px;
  background: radial-gradient(circle, #dc8f60 0%, transparent 68%); opacity:.24; }
.dg-blob.b2 { width: 620px; height: 620px; bottom: -180px; inset-inline-end: -120px;
  background: radial-gradient(circle, #54132b 0%, transparent 66%); opacity:.14; animation-delay: -8s; }
.dg-blob.b3 { width: 420px; height: 420px; top: 40%; inset-inline-start: 38%;
  background: radial-gradient(circle, #c2703a 0%, transparent 70%); opacity:.18; animation-delay: -15s; }
html[data-theme="dark"] .dg-blob.b1 { opacity:.22; }
html[data-theme="dark"] .dg-blob.b2 { background: radial-gradient(circle, #7c1f3b 0%, transparent 66%); opacity:.34; }
html[data-theme="dark"] .dg-blob.b3 { opacity:.18; }
@keyframes dgDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.12); }
  100% { transform: translate(-30px,40px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce){ .dg-blob { animation: none; } }

.dg-dots {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(84,19,43,.11) 1.3px, transparent 1.7px);
  background-size: 26px 26px;
  background-position: 13px 13px;
}
html[data-theme="dark"] .dg-dots {
  background-image: radial-gradient(circle, rgba(220,143,96,.12) 1.3px, transparent 1.7px);
}

/* ============================ GLASS CARD ============================ */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,240,210,.06);
}
/* cursor-tracking copper glow ring around the container */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.4px;
  background: radial-gradient(200px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
  z-index: 1;
}
/* soft inner sheen following cursor */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,225,160,.10), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease);
  z-index: 0;
}
.glass.hoverable {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.glass.hoverable:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--glass-border), var(--gold) 40%);
  box-shadow: 0 30px 62px -28px rgba(84,19,43,.36), 0 0 0 1px rgba(220,143,96,.18);
}
.glass.hoverable:hover::before,
.glass.hoverable:hover::after { opacity: 1; }
html[data-theme="dark"] .glass.hoverable:hover {
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(220,143,96,.18);
}

/* keep child content above the glow pseudo-elements */
.glass > * { position: relative; z-index: 2; }

/* page-load entrance animation */
@keyframes dgRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
html.dg-entering .dg-login-card { animation: dgRise .7s var(--ease) both; }

/* ============================ PAGE TRANSITIONS ============================ */
/* Single navigation animation: a full-page loader overlay shown while the next
   page is being fetched. The new page's content appears instantly when it
   arrives — no entrance animation on the containers themselves, so the user
   doesn't see the same panels re-fade-in like a refresh. */
.dg-route-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--bg-0), transparent 30%);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
  pointer-events: none;
}
/* backdrop-filter only while shown: mobile WebKit keeps painting the blur
   even when the overlay is opacity:0 / visibility:hidden, which softens the
   whole page on load until the first interaction forces a repaint. */
.dg-route-loader.show {
  opacity: 1; visibility: visible; pointer-events: auto;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.dg-route-loader .dg-spinner { width: 58px; height: 58px; position: relative; }
.dg-route-loader .dg-spinner::before,
.dg-route-loader .dg-spinner::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent;
}
.dg-route-loader .dg-spinner::before {
  border-top-color: var(--gold);
  border-inline-end-color: var(--gold-soft);
  animation: dgSpin 1s linear infinite;
}
.dg-route-loader .dg-spinner::after {
  inset: 9px;
  border-bottom-color: var(--gold-deep);
  animation: dgSpin 1.5s linear infinite reverse;
}
@keyframes dgSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dg-route-loader { transition: none; }
  .dg-route-loader .dg-spinner::before,
  .dg-route-loader .dg-spinner::after { animation: none; }
}

/* dot grid cursor spotlight (highlights nearby dots) */
.dg-dots::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(246,216,150,.9) 1.5px, transparent 2px);
  background-size: 26px 26px;
  background-position: 13px 13px;
  -webkit-mask: radial-gradient(190px circle at var(--dx,-300px) var(--dy,-300px), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  mask: radial-gradient(190px circle at var(--dx,-300px) var(--dy,-300px), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  transition: opacity .4s var(--ease);
}
html[data-theme="light"] .dg-dots::after,
html:not([data-theme]) .dg-dots::after {
  background-image: radial-gradient(circle, rgba(178,94,54,.55) 1.5px, transparent 2px);
}

/* ============================ THEME TOGGLE BUTTON ============================ */
.dg-theme-toggle, .dg-lang-toggle {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
  border-radius: 13px; border: 1px solid var(--glass-border); background: var(--glass-bg-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  color: var(--ink); font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 14px;
  white-space: nowrap; cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dg-theme-toggle:hover, .dg-lang-toggle:hover { border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--glow); color: var(--gold-soft); }
.dg-theme-toggle:active, .dg-lang-toggle:active { transform: translateY(0); }
.dg-theme-toggle svg, .dg-lang-toggle svg { width: 18px; height: 18px; flex: none; color: var(--gold-soft); }
.dg-lang-toggle { text-decoration: none; }
.dg-theme-toggle.floating { position: fixed; top: 22px; inset-inline-start: 22px; z-index: 400; box-shadow: var(--glass-shadow); }
.dg-lang-toggle.floating { position: fixed; top: 22px; inset-inline-end: 22px; z-index: 400; box-shadow: var(--glass-shadow); text-decoration: none; }
.dg-theme-toggle.icon-only { padding: 0; width: 44px; justify-content: center; }
.dg-theme-toggle.icon-only span { display: none; }
@media (max-width: 540px) {
  .dg-theme-toggle.floating { padding: 0; width: 40px; height: 40px; justify-content: center; top: 12px; inset-inline-start: 12px; }
  .dg-theme-toggle.floating span { display: none; }
  .dg-lang-toggle.floating { height: 40px; padding: 0 12px; top: 12px; inset-inline-end: 12px; font-size: 13px; }
}

/* ============================ LOGIN CARD ============================ */
.dg-login-shell {
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; padding: 24px; gap: 24px;
  position: relative; z-index: 1;
}
.dg-login-shell > .dg-login-card { margin-top: auto; margin-bottom: auto; }
.dg-login-card {
  width: min(960px, 100%);
  display: grid; grid-template-columns: 1.05fr 1fr;
  border-radius: 28px; overflow: hidden; position: relative;
  --glass-radius: 28px;
}
.dg-login-card.wide { width: min(1200px, 100%); grid-template-columns: 1.4fr 1fr; }
.dg-login-card .form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.dg-login-card .form-grid .dg-field { margin-bottom: 0; }
.dg-login-card .form-grid .dg-ctrl, .dg-login-card .form-grid .form-control { width: 100%; }
.dg-login-card .form-grid .col-2 { grid-column: span 2; }
.dg-login-card .brand-panel {
  position: relative; padding: 48px 44px; color: #f1e4d5; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(220,143,96,.32) 0%, transparent 55%),
    linear-gradient(150deg, #6e1a39 0%, #54132b 68%, #3c0e20 130%);
  display: flex; flex-direction: column; gap: 26px;
}
.dg-login-card .brand-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, rgba(241,228,213,.20) 1.4px, transparent 1.7px);
  background-size: 24px 24px;
}
.dg-login-card .brand-panel .bp-logo { display: flex; align-items: center; gap: 13px; position: relative; }
.dg-login-card .brand-panel .bp-logo .mk {
  width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(241,228,213,.15); color: #f1e4d5; font-family: 'Cairo'; font-weight: 800; font-size: 26px;
  border: 1px solid rgba(241,228,213,.24);
}
.dg-login-card .brand-panel .bp-logo b { font-family: 'Cairo'; font-weight: 800; font-size: 22px; display: block; }
.dg-login-card .brand-panel .bp-logo small { display: block; font-size: 11px; letter-spacing: 3px; opacity: .8; font-weight: 600; }
.dg-login-card .brand-panel .bp-hero { position: relative; margin-top: auto; }
.dg-login-card .brand-panel .bp-hero h2 { font-family: 'Cairo'; font-weight: 800; font-size: 30px; line-height: 1.25; color: #f1e4d5; }
.dg-login-card .brand-panel .bp-hero p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: rgba(241,228,213,.82); max-width: 34ch; }
.dg-login-card .brand-panel .bp-feats { position: relative; display: flex; flex-direction: column; gap: 12px; }
.dg-login-card .brand-panel .bp-feats div { display: flex; align-items: center; gap: 11px; font-family: 'Cairo'; font-weight: 600; font-size: 14.5px; }
.dg-login-card .brand-panel .bp-feats .tick { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(241,228,213,.15); }
.dg-login-card .brand-panel .bp-feats .tick svg { width: 15px; height: 15px; stroke: #f1e4d5; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.dg-login-card .form-panel { padding: 60px 44px 48px; display: flex; flex-direction: column; gap: 22px; background: var(--glass-bg); }
.dg-login-card .form-panel .fp-head h1 { font-family: 'Cairo'; font-weight: 800; font-size: 26px; }
.dg-login-card .form-panel .fp-head p { margin: 8px 0 0; color: var(--ink-muted); font-size: 14.5px; }
.dg-login-card .form-panel .fp-foot { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 18px; }
.dg-login-card .form-panel .fp-foot a { color: var(--gold-soft); font-weight: 600; }

/* ── Large tablet / small laptop (≤1100px): register goes single-col ── */
@media (max-width: 1100px) {
  .dg-login-card.wide { grid-template-columns: 1fr; }
  .dg-login-card.wide .brand-panel { display: none; }
}

/* ── Tablet (≤960px): login card goes single-col ── */
@media (max-width: 960px) {
  .dg-login-shell { padding: 20px 16px; }
  .dg-login-card { grid-template-columns: 1fr; }
  .dg-login-card .brand-panel { display: none; }
  .dg-login-card .form-panel { padding: 36px 30px; }
}

/* ── Tablet range (601–961px): add spacing above the form header ── */
@media (min-width: 601px) and (max-width: 961px) {
  .dg-login-card .form-panel .fp-head { margin-top: 1rem; }
}

/* ── Mobile (≤600px): single-col form grid, tighter spacing ── */
@media (max-width: 600px) {
  .dg-login-shell { padding: 16px 12px; }
  /* Push the login/registration card down from the top on mobile */
  .dg-login-shell > .dg-login-card { margin-top: 3rem; }
  .dg-login-card { border-radius: 20px; --glass-radius: 20px; }
  .dg-login-card .form-panel { padding: 28px 20px; }
  .dg-login-card .form-panel .fp-head h1 { font-size: 22px; }
  .dg-login-card .form-grid { grid-template-columns: 1fr; }
  .dg-login-card .form-grid .col-2 { grid-column: span 1; }
}

/* ── Small mobile (≤400px) ── */
@media (max-width: 400px) {
  .dg-login-shell { padding: 12px 8px; }
  .dg-login-card .form-panel { padding: 22px 16px; gap: 7px; }
  .dg-login-card .form-panel .fp-head h1 { font-size: 20px; }
}

/* ============================ FORM CONTROLS (Bootstrap overlay) ============================ */
.form-control, .form-select, textarea.form-control, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple, input.dg-ctrl, select.dg-ctrl, textarea.dg-ctrl {
  background-color: var(--glass-bg-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  height: 47px !important;
  padding: 0 14px !important;
  font-family: 'Tajawal', system-ui, sans-serif;
  font-size: 14px;
  outline: none;
  box-shadow: none !important;
  transition: all .25s var(--ease);
}
textarea.form-control { height: auto !important; min-height: 92px; padding: 12px 14px !important; resize: vertical; line-height: 1.6; }
.form-control:focus, .form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
input.dg-ctrl:focus, select.dg-ctrl:focus, textarea.dg-ctrl:focus {
  border-color: var(--gold-soft) !important;
  box-shadow: 0 0 0 3px rgba(232,197,130,.15) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink) !important;
  line-height: 45px !important;
  background-color: transparent !important;
  border: none !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px !important; }
.select2-dropdown { background: var(--bg-1) !important; backdrop-filter: blur(18px); border: 1px solid var(--glass-border) !important; color: var(--ink); border-radius: 12px !important; overflow: hidden; z-index: 9999 !important; }
.select2-container--open { z-index: 9999 !important; }
.select2-search--dropdown .select2-search__field { background: var(--glass-bg-2) !important; color: var(--ink) !important; border-color: var(--glass-border) !important; border-radius: 10px !important; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--gold-soft) !important; color: #fff !important; }
.select2-container--default .select2-results__option--selected { background-color: var(--glass-bg-2) !important; color: var(--ink-faint) !important; }
.select2-container--default .select2-results__option { color: var(--ink); padding: 10px 14px !important; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
.select2-container--default .select2-selection--multiple,
.select2-selection.select2-selection--multiple {
  height: 44px !important; min-height: 44px !important; max-height: 44px !important;
  padding: 4px 6px !important; overflow-y: auto !important; overflow-x: hidden !important;
}
/* Taller multi-select for district assignment (D2-44) */
.district-multi + .select2-container .select2-selection--multiple {
  height: auto !important; min-height: 44px !important; max-height: 260px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important; flex-wrap: wrap !important; gap: 3px;
  padding: 0 !important; margin: 0 !important; list-style: none !important;
  align-items: center !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline {
  float: none !important; margin: 0 !important; height: 26px !important;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
  height: 26px !important; margin: 0 !important; padding: 0 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--gold-soft) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 2px 6px 2px 22px !important;
  font-size: 12px; line-height: 22px !important;
  position: relative;
  margin: 2px 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255,255,255,.7) !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff !important;
  background: transparent !important;
}

label { color: var(--ink); font-family: 'Cairo', sans-serif; font-weight: 600; font-size: 13.5px; }

/* Form field with leading icon */
.dg-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.dg-field > .text-danger,
.dg-field > .field-validation-error { font-size: 12px; color: var(--bad) !important; margin-top: 2px; }
.dg-field > label { font-size: 13px; color: var(--ink-muted); font-weight: 600; padding-inline-start: 2px; }
.dg-input-wrap { position: relative; display: flex; align-items: center; }
.dg-input-wrap > svg.lead { position: absolute; inset-inline-start: 14px; width: 18px; height: 18px; stroke: var(--ink-faint); pointer-events: none; }
.dg-input-wrap > .dg-ctrl, .dg-input-wrap > .form-control { padding-inline-start: 44px !important; width: 100%; }
.dg-input-wrap .eye { position: absolute; inset-inline-end: 8px; width: 34px; height: 34px; border-radius: 9px; border: none; background: none; color: var(--ink-faint); display: grid; place-items: center; transition: color .2s, background .2s; cursor: pointer; }
.dg-input-wrap .eye:hover { color: var(--ink); background: rgba(220,143,96,.16); }
.dg-input-wrap .eye svg { width: 18px; height: 18px; }

/* Form row helpers */
.dg-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; }
.dg-remember { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-muted); user-select: none; }
.dg-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-remember .box { width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid var(--glass-border); background: var(--glass-bg-2); display: grid; place-items: center; transition: all .2s var(--ease); flex: none; position: relative; }
.dg-remember .box svg { width: 13px; height: 13px; stroke: #4a1020; opacity: 0; transition: opacity .15s; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg-remember input:checked + .box { background: linear-gradient(145deg,var(--gold),var(--gold-deep)); border-color: transparent; }
.dg-remember input:checked + .box svg { opacity: 1; }
/* Unchecked read-only: grey background with visible checkmark */
.dg-remember input:not(:checked):disabled + .box { background: rgba(150,150,150,.15); border-color: rgba(150,150,150,.4); }
.dg-remember input:not(:checked):disabled + .box .ico-check { opacity: .5; stroke: #999; }
.dg-forgot { font-size: 13.5px; color: var(--gold-soft); font-weight: 600; transition: color .2s; }
.dg-forgot:hover { color: var(--gold); }

/* ============================ BUTTONS (Bootstrap overlay) ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  padding: 11px 18px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-2); color: var(--ink); font-weight: 600; font-family: 'Cairo', sans-serif;
  font-size: 14px; transition: all .25s var(--ease);
  box-shadow: none;
}
.btn:hover { border-color: var(--gold-soft); transform: translateY(-2px); color: var(--ink); }
.btn.full, .btn-block, .btn.dg-full { width: 100%; padding: 14px; font-size: 15px; }

/* Light theme: the page bg is cream and the default glass-bg-2 is almost the
   same shade, which makes plain .btn buttons disappear. Give them an opaque
   surface + a stronger border so they read clearly. */
html[data-theme="light"] .btn,
html:not([data-theme]) .btn {
  background: rgba(255, 253, 250, 0.95) !important;
  border-color: rgba(84, 19, 43, 0.22) !important;
  color: var(--ink) !important;
}
html[data-theme="light"] .btn:hover,
html:not([data-theme]) .btn:hover {
  background: #fff !important;
  border-color: var(--gold-soft) !important;
  color: var(--ink) !important;
}
/* Prevent the light-theme base .btn hover from overriding colored variants */
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn-default:hover,
html[data-theme="light"] .btn-success:hover,
html:not([data-theme]) .btn-primary:hover,
html:not([data-theme]) .btn.primary:hover,
html:not([data-theme]) .btn-default:hover,
html:not([data-theme]) .btn-success:hover {
  background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important;
  color: #4a1020 !important;
  border-color: transparent !important;
}
html[data-theme="light"] .btn-danger:hover,
html[data-theme="light"] .btn.danger:hover,
html:not([data-theme]) .btn-danger:hover,
html:not([data-theme]) .btn.danger:hover {
  background: linear-gradient(145deg, var(--bad), oklch(0.5 0.16 28)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[data-theme="light"] .btn-dark:hover,
html[data-theme="light"] .btn-secondary:hover,
html:not([data-theme]) .btn-dark:hover,
html:not([data-theme]) .btn-secondary:hover {
  background: #6e1a39 !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* Light-theme overrides must not touch the colored variants (primary/danger/etc.) */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-default,
html[data-theme="light"] .btn-success,
html:not([data-theme]) .btn-primary,
html:not([data-theme]) .btn.primary,
html:not([data-theme]) .btn-default,
html:not([data-theme]) .btn-success {
  background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important;
  color: #4a1020 !important;
  border-color: transparent !important;
}
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .btn.danger,
html:not([data-theme]) .btn-danger,
html:not([data-theme]) .btn.danger {
  background: linear-gradient(145deg, var(--bad), oklch(0.5 0.16 28)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[data-theme="light"] .btn-dark,
html[data-theme="light"] .btn-secondary,
html:not([data-theme]) .btn-dark,
html:not([data-theme]) .btn-secondary {
  background: var(--amber) !important;
  color: #f1e4d5 !important;
  border-color: transparent !important;
}
.btn-primary, .btn.primary, .btn-default, .btn-success {
  background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important;
  color: #4a1020 !important; border-color: transparent !important;
  box-shadow: 0 12px 26px -12px var(--gold-deep) !important;
}
.btn-primary:hover, .btn.primary:hover, .btn-default:hover, .btn-success:hover,
.btn-primary:focus, .btn.primary:focus, .btn-default:focus, .btn-success:focus,
.btn-primary:active, .btn.primary:active, .btn-default:active, .btn-success:active {
  background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important;
  color: #4a1020 !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px -12px var(--gold-deep) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-2px);
}
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-success {
  color: #3a0c1c !important;
}
.btn-dark, .btn-secondary {
  background: var(--amber) !important; color: #f1e4d5 !important; border-color: transparent !important;
}
.btn-dark:hover, .btn-secondary:hover { background: #6e1a39 !important; color: #fff !important; }
.btn-warning {
  background: rgba(220,143,96,.18) !important; color: var(--gold-soft) !important; border: 1px solid var(--glass-border) !important;
}
.btn-warning:hover { background: rgba(220,143,96,.32) !important; color: var(--ink) !important; }
.btn-danger {
  background: linear-gradient(145deg, var(--bad), oklch(0.5 0.16 28)) !important;
  color: #fff !important; border-color: transparent !important;
}
.btn-search { background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important; color: #4a1020 !important; border-color: transparent !important; }
.buttons-excel { background: var(--amber) !important; color: #f1e4d5 !important; border-color: transparent !important; }

/* ============================ TABLES (Bootstrap overlay) ============================ */
.table, table.dataTable, table.data {
  width: 100%; border-collapse: collapse;
  font-size: 14px; color: var(--ink); margin: 0 !important;
}
.table thead th, table.dataTable thead th, table.data thead th {
  text-align: start; padding: 14px 18px !important;
  font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--ink-muted) !important;
  background: rgba(84,19,43,.06) !important;
  white-space: nowrap;
  border: none !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.data thead th {
  background: rgba(58,18,34,.55) !important;
}
.table tbody td, table.dataTable tbody td, table.data tbody td {
  padding: 14px 18px !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(220,143,96,.10) !important;
  color: var(--ink) !important;
  vertical-align: middle;
  background: transparent !important;
}
.table tbody tr, table.dataTable tbody tr, table.data tbody tr {
  background: transparent !important;
  transition: background .2s var(--ease);
}
.table tbody tr:hover, table.dataTable tbody tr:hover, table.data tbody tr:hover {
  background: rgba(220,143,96,.10) !important;
}
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover,
html[data-theme="dark"] table.data tbody tr:hover {
  background: rgba(220,143,96,.08) !important;
}
.table-striped tbody tr:nth-of-type(odd), .table-hover tbody tr:hover { background-color: rgba(220,143,96,.06) !important; }

/* DataTables overlay */
.dataTables_wrapper { color: var(--ink); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding: 14px 22px; font-size: 13.5px; color: var(--ink-muted); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 40px; border-radius: 11px; border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg-2) !important; color: var(--ink) !important;
  padding: 0 12px; font-family: inherit; margin: 0 8px; outline: none;
}
.dataTables_wrapper .dataTables_paginate { padding: 14px 22px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; line-height: 1; padding: 0 10px !important; margin: 0 3px !important;
  border-radius: 11px !important;
  border: 1px solid var(--glass-border) !important; background: var(--glass-bg-2) !important;
  color: var(--ink-muted) !important;
  font-family: 'Cairo', sans-serif; font-weight: 600; box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { border-color: var(--gold-soft) !important; color: var(--ink) !important; background: var(--glass-bg-2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(145deg,var(--gold),var(--gold-deep)) !important; color: #4a1020 !important; border-color: transparent !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #3a0c1c !important; }

/* ============================ CARDS / NAV / DROPDOWN (Bootstrap overlay) ============================ */
.card, .panel {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow);
  color: var(--ink);
}
.card-header { background: rgba(84,19,43,.06) !important; border-bottom: 1px solid var(--glass-border) !important; color: var(--ink) !important; }
html[data-theme="dark"] .card-header { background: rgba(58,18,34,.4) !important; }
.dropdown-menu {
  background: var(--glass-bg) !important; backdrop-filter: blur(18px); border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important; padding: 8px !important;
  box-shadow: 0 24px 60px -24px rgba(84,19,43,.4) !important;
  color: var(--ink) !important; z-index: 1050 !important;
}
.dropdown-item { color: var(--ink) !important; border-radius: 10px; padding: 8px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(220,143,96,.16) !important; color: var(--ink) !important; }
[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .dropdown-item { text-align: right; }

.nav-link { color: var(--ink-muted); }
.nav-link:hover, .nav-link:focus { color: var(--gold-soft); }
.nav-tabs { border-bottom: 1px solid var(--glass-border); }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--ink-muted); border-radius: 0; padding: 10px 16px; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
  background: transparent; color: var(--gold-soft);
  border-color: transparent transparent var(--gold-soft) transparent;
}

/* Bootstrap alert overlay */
.alert { border-radius: 12px; border: 1px solid var(--glass-border); }
.alert-success { background: color-mix(in oklab, var(--ok), transparent 85%); color: var(--ok); border-color: color-mix(in oklab, var(--ok), transparent 70%); }
.alert-danger, .text-danger { color: var(--bad) !important; }
.alert-warning { background: color-mix(in oklab, var(--warn), transparent 85%); color: var(--warn); border-color: color-mix(in oklab, var(--warn), transparent 70%); }

/* ── Badge theme overrides ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700; font-family: 'Cairo';
}
.badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge.bg-success   { background: color-mix(in oklab, var(--ok),   transparent 86%) !important; color: var(--ok) !important; }
.badge.bg-danger    { background: color-mix(in oklab, var(--bad),  transparent 86%) !important; color: var(--bad) !important; }
.badge.bg-warning   { background: color-mix(in oklab, var(--warn), transparent 84%) !important; color: var(--warn) !important; }
.badge.bg-info      { background: color-mix(in oklab, var(--info), transparent 86%) !important; color: var(--info) !important; }
.badge.bg-primary   { background: color-mix(in oklab, var(--gold), transparent 86%) !important; color: var(--gold) !important; }
.badge.bg-dark      { background: var(--glass-bg-2) !important; color: var(--ink-muted) !important; }
.badge.bg-secondary { background: var(--glass-bg-2) !important; color: var(--ink-faint) !important; }

/* ============================ APP SHELL (post-login overlay) ============================ */
body.dg-app { background: var(--bg-0); color: var(--ink); }

/* Layout: body becomes a flex row so the floating sidebar and main column
   sit side-by-side without the CDN's margin-left juggling. */
body.dg-app {
  display: flex !important;
  align-items: flex-start;
  min-height: 100vh;
}
body.dg-app > .main {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: 0 !important;
  margin-left: 0 !important;
}

/* Sidebar overlay — keeps existing .sideBar markup but restyles it as a
   floating glass card split into 3 parts (header / scrollable menu / user card). */
body.dg-app .sideBar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  color: var(--ink);
  flex: none;
  width: var(--sidebar-w);
  position: sticky;
  top: 14px;
  margin: 14px 0 14px 14px !important;
  height: calc(100vh - 28px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  box-shadow: var(--glass-shadow);
}
[dir="rtl"] body.dg-app .sideBar { margin: 14px 14px 14px 0 !important; }

/* Header (logo) — flush top, divider below; logo images fill the full sidebar width. */
body.dg-app .sideBar > .logo {
  flex: none;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--glass-border);
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  cursor: default !important;
  background-color: transparent;
  transition: none !important;
}
body.dg-app .sideBar > .logo:hover,
body.dg-app .sideBar > .logo:focus,
body.dg-app .sideBar > .logo:active {
  background-color: transparent !important;
  transform: none !important;
}
body.dg-app .sideBar > .logo img,
body.dg-app .sideBar > .logo img.dirLogo,
body.dg-app .sideBar > .logo img.vesaLogo {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}
/* Light theme: give the logo header a dark burgundy background so the white
   VESA logo and the Diriyah mark stay legible. */
html[data-theme="light"] body.dg-app .sideBar > .logo,
html:not([data-theme]) body.dg-app .sideBar > .logo {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(220,143,96,.32) 0%, transparent 55%),
    linear-gradient(150deg, #6e1a39 0%, #54132b 68%, #3c0e20 130%);
  border-bottom-color: rgba(241,228,213,.18);
}
html[data-theme="light"] body.dg-app .sideBar > .logo:hover,
html:not([data-theme]) body.dg-app .sideBar > .logo:hover {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(220,143,96,.32) 0%, transparent 55%),
    linear-gradient(150deg, #6e1a39 0%, #54132b 68%, #3c0e20 130%) !important;
}
/* Collapsed sidebar — also no padding, image still fills */
body.sideMenuClosed.dg-app .sideBar > .logo img.dirLogo,
body.sideMenuClosed.dg-app .sideBar > .logo img.vesaLogo {
  width: 100% !important;
  height: auto !important;
}

/* Hide the legacy hr separators between sections — the new flex layout
   uses borders on the header/footer instead. */
body.dg-app .sideBar > hr { display: none !important; }
body.dg-app .sideMenu hr { display: none !important; }

/* Sidebar section titles (VESA / DMS) */
.menu-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
  user-select: none;
}
.menu-section-title:first-child { margin-top: 0; }
.menu-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  opacity: .35;
}
body.sideMenuClosed .menu-section-title span { display: none; }
body.sideMenuClosed .menu-section-title::after { display: none; }
body.sideMenuClosed .menu-section-title {
  justify-content: center;
  padding: 4px 0;
  margin: 10px 0 4px;
  font-size: 0;
  height: 1px;
  background: var(--glass-border);
  opacity: .4;
}

/* Menu (scrollable middle) */
body.dg-app .sideBar > .sideMenu {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px !important;
}
/* Reset the UA default `ul { padding-inline-start: 40px }` on the menu list.
   Bootstrap's `.navbar-nav` only zeroes padding-left, so in RTL the 40px
   survives on the right and pushes the whole menu inward. */
body.dg-app .sideMenu .navbar-nav { padding-inline-start: 0; }

/* User card footer (replaces the old .copyDiv copyright block) */
body.dg-app .sideBar .menuFooter {
  flex: none;
  margin: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 11px;
}
body.dg-app .sideBar .menuFooter .user-avatar {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--amber), var(--gold-deep));
  color: #f1e4d5;
  font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
body.dg-app .sideBar .menuFooter .user-meta { min-width: 0; flex: 1; }
body.dg-app .sideBar .menuFooter .user-meta b {
  display: block;
  font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25;
}
body.dg-app .sideBar .menuFooter .user-meta span {
  display: block;
  font-size: 12px; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
body.dg-app .sideBar .menuFooter .user-logout {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--glass-border);
  background: rgba(220,143,96,.10);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .2s var(--ease);
  padding: 0;
}
body.dg-app .sideBar .menuFooter .user-logout:hover {
  background: rgba(220,143,96,.22);
  color: var(--ink);
  border-color: var(--gold-soft);
  transform: translateY(-1px);
}
body.dg-app .sideBar .menuFooter .user-logout svg { width: 18px; height: 18px; }

/* hide the legacy copyright when present inside the new card */
body.dg-app .sideBar .menuFooter .copyDiv,
body.dg-app .sideBar .menuFooter > hr { display: none !important; }

/* shrink the floating gutter when the user collapses the sidebar */
body.dg-app.sideMenuClosed .sideBar,
body.sideMenuClosed.dg-app .sideBar {
  margin: 14px 0 14px 14px !important;
}
[dir="rtl"] body.dg-app.sideMenuClosed .sideBar,
[dir="rtl"] body.sideMenuClosed.dg-app .sideBar { margin: 14px 14px 14px 0 !important; }
body.sideMenuClosed .menuFooter .user-meta,
body.sideMenuClosed .menuFooter .user-logout { display: none !important; }
body.sideMenuClosed .menuFooter { justify-content: center; padding: 10px; }
body.dg-app .sideMenu .nav-link, body.dg-app .sideBar a {
  color: var(--ink-muted) !important;
  border-radius: 13px;
  transition: all .25s var(--ease);
}
body.dg-app .sideMenu .nav-link:hover, body.dg-app .sideBar a:hover {
  background: rgba(220,143,96,.10) !important;
  color: var(--ink) !important;
}
body.dg-app .sideMenu .nav-link.active, body.dg-app .sideBar a.active {
  background: linear-gradient(100deg, rgba(220,143,96,.24), rgba(220,143,96,.07)) !important;
  color: var(--ink) !important; font-weight: 700;
}
body.dg-app .hasDrop .subMenu { background: transparent; }
body.dg-app .hasDrop .subMenu a {
  color: var(--ink-faint) !important;
  background: transparent !important;
  font-weight: 500 !important;
}
body.dg-app .hasDrop .subMenu a.active {
  color: var(--gold-soft) !important; background: rgba(220,143,96,.08) !important;
}
/* RTL: mirror the LTR layout — icon on the leading (right) side with the label
   right-aligned right next to it, instead of icon-left / text-right with a gap. */
[dir="rtl"] body.dg-app .sideMenu .nav-link {
  display: flex !important; align-items: center; gap: 10px; flex-direction: row;
}
[dir="rtl"] body.dg-app .sideMenu .nav-link > i { order: 1; flex: 0 0 auto; margin-inline-end: 0; }
[dir="rtl"] body.dg-app .sideMenu .nav-link > span { order: 2; flex: 1 1 auto; text-align: right; }
/* RTL: move the collapse arrow to the left side */
[dir="rtl"] body.dg-app .navbar-nav .nav-item.hasDrop .nav-link::after {
  right: unset; left: 18px;
}
/* RTL: flip the submenu bullet spacing to the left */
[dir="rtl"] .navbar-nav .nav-item .subMenu a:before {
  margin-right: 0;
  margin-left: 7px;
}
body.dg-app .menuFooter { color: var(--ink-faint); }
body.dg-app .copyDiv p, body.dg-app .copyDiv { color: var(--ink-faint) !important; }

/* Topbar overlay */
body.dg-app header .navbar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  margin: 14px !important;
  padding: 12px 22px !important;
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  z-index: 1060 !important; position: relative;
}
body.dg-app .navbar-brand,
body.dg-app .navbar-brand span { color: var(--ink) !important; font-family: 'Cairo', sans-serif; font-weight: 700; }
body.dg-app .navbar-brand span { color: var(--gold-soft) !important; }
body.dg-app .userAvatar .dropdown-toggle { color: var(--ink) !important; }
body.dg-app .userAvatar .dropdown-toggle .parRes { color: var(--ink-muted); }
body.dg-app .userAvatar .dropdown-menu { z-index: 9999 !important; background: rgba(255, 253, 250, 0.93) !important; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); }
html[data-theme="dark"] body.dg-app .userAvatar .dropdown-menu { background: rgba(60, 22, 38, 0.93) !important; }

body.dg-app .main-header-menu-icon { color: var(--ink) !important; }
[dir="rtl"] body.dg-app .main-header-menu-icon { transform: rotate(180deg); }

/* Breadcrumb */
.dg-breadcrumb { flex: 1; min-width: 0; }
.bc-trail {
  display: flex; align-items: center; gap: 6px; font-size: .78rem;
  color: var(--ink-muted); flex-wrap: wrap; line-height: 1.6;
}
.bc-trail a { color: var(--gold-soft); text-decoration: none; }
.bc-trail a:hover { text-decoration: underline; }
.bc-sep { color: var(--ink-faint); font-size: .9rem; flex-shrink: 0; }
.bc-title {
  margin: 2px 0 0; font-size: 1.1rem; font-weight: 700; color: var(--ink);
  font-family: 'Cairo', sans-serif; line-height: 1.2;
}

/* Topbar right section */
.topbar-right { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; flex-shrink: 0; }
html[data-theme="dark"] .topbar-right .dg-theme-toggle .ico-sun { display: block; }
html[data-theme="dark"] .topbar-right .dg-theme-toggle .ico-moon { display: none; }
html[data-theme="light"] .topbar-right .dg-theme-toggle .ico-sun,
html:not([data-theme]) .topbar-right .dg-theme-toggle .ico-sun { display: none; }
html[data-theme="light"] .topbar-right .dg-theme-toggle .ico-moon,
html:not([data-theme]) .topbar-right .dg-theme-toggle .ico-moon { display: block; }

/* ─── Header responsive (≤819px) ───
   Flex-wrap layout: items flow naturally and wrap to new rows when space runs out.
   Row 1: ☰ hamburger ·················· avatar + Hello + username
   Row 2: 🌐 lang-toggle (with text) · 🌓 theme-toggle
   Row 3: breadcrumb trail + page title
   Uses display:contents on .topbar-right so its children join the flex flow.
   Breakpoint at 1100px accounts for the ~280px sidebar eating content width. */
@media (max-width: 1099.98px) {
  body.dg-app header .navbar {
    padding: 10px 14px !important; margin: 10px !important;
  }

  /* Flex-wrap — items share a row when space allows, wrap when it doesn't */
  body.dg-app header .navbar > div {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* Dissolve .topbar-right so its children join the flex flow */
  .topbar-right { display: contents !important; }

  /* Hamburger — always first, fixed size */
  body.dg-app .main-header-menu-icon { order: 0; flex-shrink: 0; margin-right: 3px; }

  /* Avatar — next to hamburger, fills remaining space to push toggles to the end */
  .userAvatar { order: 1; flex: 1 1 auto; min-width: 0; }
  .userAvatar { margin-inline-start: 6px; }
  .userAvatar .dropdown-toggle { display: flex !important; align-items: center; gap: 5px; min-width: 0; }
  .userAvatar .dropdown-toggle .imgCon { flex-shrink: 0; }
  .userAvatar .dropdown-toggle .imgCon img { width: 34px; height: 34px; }
  .userAvatar .dropdown-toggle > div:last-child { min-width: 0; overflow: hidden; }
  .userAvatar .dropdown-toggle div b {
    font-size: 12px; font-weight: 600; line-height: 1.3; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .userAvatar .dropdown-toggle div .parRes {
    font-size: 11px; line-height: 1.3; margin: 0; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Lang + theme toggles — same height & style, pushed to far end */
  .dg-lang-toggle, .dg-theme-toggle { height: 36px; border-radius: 11px; flex-shrink: 0; }
  .dg-lang-toggle, .dg-theme-toggle { padding: 0 12px; }
  .dg-lang-toggle { order: 2; font-size: 13px; }
  .dg-lang-toggle svg, .dg-theme-toggle svg { width: 16px; height: 16px; }
  .dg-theme-toggle { order: 3; }

  /* Breadcrumb — row 3, full width with padding */
  .dg-breadcrumb { order: 4; flex-basis: 100%; padding: 8px 4px 0; }
  .bc-title { font-size: 1rem; font-weight: 700; }
  .bc-trail { font-size: .8rem; gap: 5px; }
}

/* ≤720px */
@media (max-width: 720px) {
  .dg-lang-toggle, .dg-theme-toggle { height: 34px; border-radius: 10px; }
  .dg-lang-toggle, .dg-theme-toggle { padding: 0 10px; }
  .dg-lang-toggle { font-size: 12px; }
  .userAvatar .dropdown-toggle .imgCon img { width: 32px; height: 32px; }
  .userAvatar .dropdown-toggle div b { font-size: 12px; }
  .userAvatar .dropdown-toggle div .parRes { font-size: 11px; }
  .bc-title { font-size: 1rem; }
  .bc-trail { font-size: .82rem; }
}

/* ≤540px — phones */
@media (max-width: 540px) {
  body.dg-app header .navbar { padding: 10px 12px !important; margin: 8px !important; border-radius: 14px !important; }
  body.dg-app header .navbar > div { gap: 4px; }
  .dg-lang-toggle, .dg-theme-toggle { height: 32px; border-radius: 10px; }
  .dg-lang-toggle, .dg-theme-toggle { padding: 0 9px; }
  .dg-lang-toggle { font-size: 12px; }
  .dg-lang-toggle svg, .dg-theme-toggle svg { width: 15px; height: 15px; }
  .userAvatar .dropdown-toggle .imgCon img { width: 30px; height: 30px; }
  .userAvatar .dropdown-toggle div b { font-size: 12px; }
  .userAvatar .dropdown-toggle div .parRes { font-size: 11px; }
  .bc-title { font-size: .96rem; }
  .bc-trail { font-size: .8rem; }
  .dg-breadcrumb { padding: 6px 2px 0; }
}

/* ≤400px — small phones: keep user name visible, truncate if long */
@media (max-width: 400px) {
  body.dg-app header .navbar { padding: 8px 10px !important; margin: 6px !important; }
  body.dg-app header .navbar > div { gap: 6px; }
  .userAvatar .dropdown-toggle .imgCon img { width: 28px; height: 28px; }
  .userAvatar .dropdown-toggle div b { font-size: 11px; max-width: 90px; }
  .userAvatar .dropdown-toggle div .parRes { font-size: 10px; max-width: 90px; }
  .dg-lang-toggle, .dg-theme-toggle { height: 30px; border-radius: 9px; }
  .dg-lang-toggle, .dg-theme-toggle { padding: 0 8px; }
  .dg-lang-toggle { font-size: 11px; }
  .bc-title { font-size: .94rem; }
  .bc-trail { font-size: .76rem; }
  .dg-breadcrumb { padding: 5px 2px 0; }
}

/* main content */
body.dg-app .main { background: transparent !important; }
body.dg-app .content-wrap { padding: 18px; }
body.dg-app footer.footer { background: transparent !important; border-top-color: var(--glass-border) !important; color: var(--ink-faint) !important; }

/* SweetAlert dark/light support */
.swal2-popup {
  background: var(--bg-1) !important;
  backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  color: var(--ink) !important;
  border-radius: 22px !important;
  box-shadow: var(--glass-shadow) !important;
}
.swal2-container { z-index: 10060 !important; }
.swal2-backdrop-show { background: rgba(26, 10, 18, 0.5) !important; }
.swal2-title { color: var(--ink) !important; font-family: 'Cairo', sans-serif !important; font-weight: 700 !important; font-size: 1.25em !important; }
.swal2-html-container { color: var(--ink-muted) !important; font-family: 'Tajawal', sans-serif !important; }

/* SweetAlert confirm/cancel buttons */
.swal2-styled.swal2-confirm {
  background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important;
  color: #fff !important; border: none !important; border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important; font-weight: 600 !important;
  padding: 10px 32px !important; font-size: 14px !important;
  box-shadow: 0 4px 16px rgba(220, 143, 96, 0.3) !important;
  transition: filter .2s !important;
}
.swal2-styled.swal2-confirm:hover { filter: brightness(1.06) !important; }
.swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(220, 143, 96, 0.25) !important; }
.swal2-styled.swal2-cancel {
  background: var(--glass-bg-2) !important; color: var(--ink) !important;
  border: 1px solid var(--glass-border) !important; border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important; font-weight: 600 !important;
  padding: 10px 32px !important; font-size: 14px !important;
}
.swal2-styled.swal2-cancel:hover { background: var(--glass-bg) !important; }

/* SweetAlert icons — match theme palette */
.swal2-icon.swal2-success { border-color: var(--ok) !important; color: var(--ok) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ok) !important; }
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long { background-color: var(--ok) !important; }
.swal2-icon.swal2-success::before,
.swal2-icon.swal2-success::after { background: var(--bg-1) !important; }
.swal2-icon.swal2-success .swal2-success-fix { background: var(--bg-1) !important; }

.swal2-icon.swal2-error { border-color: var(--bad) !important; color: var(--bad) !important; }
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right { background-color: var(--bad) !important; }

.swal2-icon.swal2-warning { border-color: var(--warn) !important; color: var(--warn) !important; }
.swal2-icon.swal2-info { border-color: var(--info) !important; color: var(--info) !important; }

/* tweaks for FontAwesome icons in sidebar */
body.dg-app .sideMenu .nav-link i, body.dg-app .sideBar a i { color: var(--gold-soft); margin-inline-end: 8px; }

/* Make sure the dropdown user info text reads in both themes */
body.dg-app .imgCon { text-align: center; }
body.dg-app .imgCon img { border-radius: 12px; }
[dir="rtl"] body.dg-app .userAvatar .dropdown-toggle .imgCon { margin-right: 0; margin-left: 10px; }

/* Validation errors */
.text-danger, .field-validation-error, .validation-summary-errors { color: var(--bad) !important; }

/* Helper utilities */
.dg-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dg-section-title h2, .dg-section-title h3 { font-size: 19px; }
.dg-section-title .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--glass-border), transparent); }
[dir="rtl"] .dg-section-title .line { background: linear-gradient(270deg, var(--glass-border), transparent); }

/* Login footer copyright (pre-login layout) */
.dg-pre-foot {
  text-align: center; padding: 14px 0;
  color: var(--ink-faint); font-size: 12px; width: 100%;
}

/* ============================ LIST PAGE LAYOUT ============================ */
/* page-level header row: title + actions */
.dg-page-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap);
}
.dg-page-head .dg-section-title { flex: 1; margin: 0; }
[dir="rtl"] .dg-page-head > a svg { transform: scaleX(-1); }

/* ---- filters card (split from data table) ---- */
.filters { padding: 20px 22px; margin-bottom: var(--gap); display: block; }
.filters .fhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.filters .fhead h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; color: var(--ink); margin: 0; }
.filters .fhead h3 svg { stroke: var(--gold); flex: none; }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.filter-grid .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.filter-grid .field .text-danger,
.filter-grid .field .field-validation-error { font-size: 11.5px; color: var(--bad) !important; margin-top: 2px; }
.filter-grid .field .text-danger:empty,
.filter-grid .field .field-validation-error:empty { display: none; }
.filter-grid .field:has(.dg-remember) { align-self: start !important; padding-top: 24px; flex-direction: row !important; align-items: center !important; gap: 10px !important; }
.filter-grid .field .dg-remember { min-height: 44px; display: flex; align-items: center; }
/* Action buttons (Search / Advanced / Export …) always break onto their own
   row beneath the filter inputs, aligned to the trailing edge. Applies to
   every filter section automatically. */
.filter-grid .field:has(> .btn) {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.filter-grid .field > label { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; padding-inline-start: 2px; margin: 0; }
.filter-grid .field .ctrl,
.filter-grid .field input.form-control,
.filter-grid .field select.form-control,
.filter-grid .field select.form-select,
.filter-grid .field .select2-container--default .select2-selection--single {
  height: 44px !important; border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg-2) !important; color: var(--ink) !important;
  padding: 0 14px !important; font-family: inherit; font-size: 14px; outline: none;
  transition: all .25s var(--ease); width: 100%;
}
/* select2 widgets: match the 44px height of the native filter inputs */
.filter-grid .field .select2-container { width: 100% !important; }
.filter-grid .field .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 42px !important; line-height: 42px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.filter-grid .field .select2-container--default .select2-selection--single .select2-selection__arrow { top: 10px !important; }
.filter-grid .field .select2-container--default .select2-selection--multiple { min-height: 44px !important; }
.filter-grid .field .ctrl:focus,
.filter-grid .field input.form-control:focus,
.filter-grid .field select.form-control:focus,
.filter-grid .field select.form-select:focus {
  border-color: var(--gold-soft) !important;
  box-shadow: 0 0 0 3px rgba(232,197,130,.15) !important;
}
.filter-grid .field select.ctrl, .filter-grid .field select.form-control, .filter-grid .field select.form-select {
  appearance: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23c9a86a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-inline-end: 36px !important;
}
[dir="rtl"] .filter-grid .field select.ctrl,
[dir="rtl"] .filter-grid .field select.form-control { background-position: left 14px center !important; }

/* ---- district map wrapper ---- */
.district-map-wrap { padding: 20px 24px; margin-top: 20px; }

/* ---- data-table card (separate, below filters) ---- */
.dt-card { padding: 0; overflow: hidden; margin-bottom: var(--gap); }
.dt-card .table-head, .dt-card .dt-head {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  border-bottom: 1px solid var(--glass-border); flex-wrap: wrap;
}
.dt-card .table-head h3, .dt-card .dt-head h3 { font-size: 16px; color: var(--ink); margin: 0; }
.dt-card .table-head .count { font-size: 13px; color: var(--ink-faint); }
.dt-card .table-head .spacer, .dt-card .dt-head .spacer { flex: 1; }
.dt-card .dt-body { padding: 0 4px; }
.dt-card .dt-scroll, .dt-card .table-wrap { overflow-x: auto; overflow-y: hidden; }
/* Breathing room between the card title border and a static (non-DataTable) table.
   DataTable list pages add a .dataTable class + their own controls bar, so they're excluded. */
.dt-card .dt-body > .dt-scroll > table.table:not(.dataTable),
.dt-card .dt-body > .table-wrap > table.table:not(.dataTable) { margin-top: 14px; }

/* DataTables `dom: "<'dt-top'<'dt-tl'lB><'dt-tr'f>>r<'dt-scroll't><'dt-bottom'<'dt-bl'i><'dt-br'p>>"` containers */
.dt-card .dt-top, .dt-card .dt-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.dt-card .dt-top { border-bottom: 1px solid var(--glass-border); }
.dt-card .dt-tl, .dt-card .dt-tr,
.dt-card .dt-bl, .dt-card .dt-br {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dt-card .dt-tr { justify-content: flex-end; }
.dt-card .dt-br { justify-content: flex-end; margin-inline-start: auto; }
/* normalise the inner DataTables wrappers so they don't add extra padding inside our flex bar */
.dt-card .dt-top .dataTables_length,
.dt-card .dt-top .dataTables_filter,
.dt-card .dt-bottom .dataTables_info,
.dt-card .dt-bottom .dataTables_paginate { padding: 14px 18px; margin: 0; }

/* ============================ DARK-MODE TABLE FIXES ============================ */
/* High-specificity overrides to defeat CDN site.css / datatables defaults */
body.dg-app .table,
body.dg-app table.dataTable,
body.dg-app table.data,
body.dg-app .dataTable {
  color: var(--ink) !important;
  background: transparent !important;
  width: 100% !important;
  border-collapse: collapse;
}
body.dg-app .table thead th,
body.dg-app table.dataTable thead th,
body.dg-app .dataTable thead th {
  background: rgba(84,19,43,.06) !important;
  color: var(--ink-muted) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  border-bottom: 1px solid var(--glass-border) !important;
  padding: 14px 18px !important;
  white-space: nowrap;
}
body.dg-app table thead th:first-child { border-radius: 14px 0 0 0; }
body.dg-app table thead th:last-child { border-radius: 0 14px 0 0; }
[dir="rtl"] body.dg-app table thead th:first-child { border-radius: 0 14px 0 0; }
[dir="rtl"] body.dg-app table thead th:last-child { border-radius: 14px 0 0 0; }
html[data-theme="dark"] body.dg-app .table thead th,
html[data-theme="dark"] body.dg-app table.dataTable thead th,
html[data-theme="dark"] body.dg-app .dataTable thead th {
  background: rgba(58,18,34,.55) !important;
  color: var(--ink) !important;
}
body.dg-app .table tbody td,
body.dg-app table.dataTable tbody td,
body.dg-app .dataTable tbody td {
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(220,143,96,.10) !important;
  padding: 14px 18px !important;
  vertical-align: middle;
}
html[data-theme="dark"] body.dg-app .table tbody td,
html[data-theme="dark"] body.dg-app table.dataTable tbody td,
html[data-theme="dark"] body.dg-app .dataTable tbody td {
  color: var(--ink) !important;
  border-bottom-color: rgba(220,143,96,.14) !important;
}
body.dg-app .table tbody tr,
body.dg-app table.dataTable tbody tr,
body.dg-app .dataTable tbody tr { background: transparent !important; }
body.dg-app .table tbody tr:hover,
body.dg-app table.dataTable tbody tr:hover,
body.dg-app .dataTable tbody tr:hover { background: rgba(220,143,96,.10) !important; }
html[data-theme="dark"] body.dg-app .table tbody tr:hover,
html[data-theme="dark"] body.dg-app table.dataTable tbody tr:hover,
html[data-theme="dark"] body.dg-app .dataTable tbody tr:hover { background: rgba(220,143,96,.10) !important; }

/* DataTables empty/info row must inherit ink colour */
body.dg-app .dataTables_empty,
body.dg-app .dataTables_info { color: var(--ink-muted) !important; }
body.dg-app .dataTables_wrapper { color: var(--ink) !important; }
body.dg-app .dataTables_wrapper .dataTables_length label,
body.dg-app .dataTables_wrapper .dataTables_filter label { color: var(--ink-muted) !important; }
body.dg-app .dataTables_wrapper .dataTables_length select,
body.dg-app .dataTables_wrapper .dataTables_filter input {
  background: var(--glass-bg-2) !important; color: var(--ink) !important;
  border: 1px solid var(--glass-border) !important; border-radius: 11px !important;
  padding: 0 12px !important; height: 40px !important; outline: none;
}
body.dg-app .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ink-muted) !important;
  background: var(--glass-bg-2) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 11px !important;
}
body.dg-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(220,143,96,.18) !important; color: var(--ink) !important;
  border-color: var(--gold-soft) !important;
}
body.dg-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dg-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important;
  color: #4a1020 !important; border-color: transparent !important;
}
html[data-theme="dark"] body.dg-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] body.dg-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #3a0c1c !important; }

/* sort indicators */
body.dg-app table.dataTable thead .sorting,
body.dg-app table.dataTable thead .sorting_asc,
body.dg-app table.dataTable thead .sorting_desc { cursor: pointer; }
body.dg-app table.dataTable thead .sorting:after,
body.dg-app table.dataTable thead .sorting_asc:after,
body.dg-app table.dataTable thead .sorting_desc:after,
body.dg-app table.dataTable thead .sorting:before,
body.dg-app table.dataTable thead .sorting_asc:before,
body.dg-app table.dataTable thead .sorting_desc:before { color: var(--gold) !important; opacity: .6; }

/* RTL: align every header cell text to the right (start) */
[dir="rtl"] .table thead th,
[dir="rtl"] table.dataTable thead th,
[dir="rtl"] table.data thead th { text-align: right !important; }

/* RTL: DataTables positions the sort arrow with `right`, so in RTL it lands at the start of
   the cell ("arrow then title") and offsets the header from the data column. Move the arrow to
   the end (left) and keep the title aligned to the start (right), matching the data cells (D2-150). */
[dir="rtl"] body.dg-app table.dataTable thead th.sorting,
[dir="rtl"] body.dg-app table.dataTable thead th.sorting_asc,
[dir="rtl"] body.dg-app table.dataTable thead th.sorting_desc {
  padding-right: 18px !important;
  padding-left: 18px !important;
}
[dir="rtl"] body.dg-app table.dataTable thead .sorting:before,
[dir="rtl"] body.dg-app table.dataTable thead .sorting:after,
[dir="rtl"] body.dg-app table.dataTable thead .sorting_asc:before,
[dir="rtl"] body.dg-app table.dataTable thead .sorting_asc:after,
[dir="rtl"] body.dg-app table.dataTable thead .sorting_desc:before,
[dir="rtl"] body.dg-app table.dataTable thead .sorting_desc:after {
  right: auto !important;
  left: 10px !important;
}

/* DataTables buttons (Excel/Print) */
body.dg-app div.dt-buttons { display: inline-flex; gap: 6px; }
body.dg-app button.dt-button, body.dg-app .html5buttons .btn {
  background: var(--glass-bg-2) !important; border: 1px solid var(--glass-border) !important;
  color: var(--ink) !important; border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important; font-weight: 600 !important; font-size: 13.5px !important;
  padding: 8px 14px !important; box-shadow: none !important;
}
body.dg-app button.dt-button:hover, body.dg-app .html5buttons .btn:hover {
  border-color: var(--gold-soft) !important; color: var(--ink) !important;
}

/* Column-visibility dropdown (DataTables colvis) */
body.dg-app div.dt-button-collection {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
  padding: 6px !important;
  min-width: 160px;
}
body.dg-app div.dt-button-collection .dt-button {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  padding: 8px 14px !important;
  font-size: 0.9em !important;
  text-align: start !important;
  width: 100%;
}
body.dg-app div.dt-button-collection .dt-button:hover {
  background: rgba(220,143,96,.10) !important;
  color: var(--ink) !important;
}
body.dg-app div.dt-button-collection .dt-button.active {
  background: linear-gradient(100deg, rgba(220,143,96,.24), rgba(220,143,96,.07)) !important;
  color: var(--ink) !important;
  font-weight: 600;
}
/* RTL: move the colvis active checkmark to the left edge */
[dir="rtl"] div.dt-button-collection .dt-button-active:after {
  left: 1em;
  right: auto;
}
/* Row icon-action buttons (.btnCon / .tableIco from existing code)
   Design ref: theme.css .row-actions — subtle tinted bg, monochrome icons, delete in red */
body.dg-app .btnCon { display: inline-flex; gap: 6px; align-items: center; }
body.dg-app .tableIco {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-grid; place-items: center;
  border: 1px solid transparent !important;
  background: rgba(214,178,116,.10) !important;
  color: var(--ink-muted) !important;
  transition: all .2s var(--ease);
  cursor: pointer;
}
body.dg-app .tableIco i { color: var(--ink-muted) !important; font-size: 14px; }
body.dg-app .tableIco:hover { background: rgba(214,178,116,.22) !important; color: var(--ink) !important; border-color: var(--glass-border) !important; }
body.dg-app .tableIco:hover i { color: var(--ink) !important; }
/* Delete button — red icon */
body.dg-app .tableIco.bg-danger { background: rgba(214,178,116,.10) !important; }
body.dg-app .tableIco.bg-danger i { color: var(--bad) !important; }
body.dg-app .tableIco.bg-danger:hover { background: color-mix(in oklab, var(--bad), transparent 84%) !important; border-color: color-mix(in oklab, var(--bad), transparent 70%) !important; }
body.dg-app .tableIco.bg-danger:hover i { color: var(--bad) !important; }
/* Reset all other colored bg variants to monochrome */
body.dg-app .tableIco.bg-info,
body.dg-app .tableIco.bg-warning,
body.dg-app .tableIco.bg-success { background: rgba(214,178,116,.10) !important; }
body.dg-app .tableIco.bg-info i,
body.dg-app .tableIco.bg-warning i,
body.dg-app .tableIco.bg-success i { color: var(--ink-muted) !important; }
body.dg-app .tableIco.bg-info:hover i,
body.dg-app .tableIco.bg-warning:hover i,
body.dg-app .tableIco.bg-success:hover i { color: var(--ink) !important; }
/* Light theme action buttons */
html[data-theme="light"] body.dg-app .tableIco,
html[data-theme="light"] body.dg-app .tableIco.bg-info,
html[data-theme="light"] body.dg-app .tableIco.bg-warning,
html[data-theme="light"] body.dg-app .tableIco.bg-success,
html[data-theme="light"] body.dg-app .tableIco.bg-danger { background: rgba(84,19,43,.08) !important; }
html[data-theme="light"] body.dg-app .tableIco:hover { background: rgba(84,19,43,.16) !important; color: var(--ink) !important; }
html[data-theme="light"] body.dg-app .tableIco.bg-danger:hover { background: color-mix(in oklab, var(--bad), transparent 84%) !important; }

/* status chip (active/inactive cell etc) */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700; font-family: 'Cairo', sans-serif; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok   { color: var(--ok);   background: color-mix(in oklab, var(--ok), transparent 86%); }
.chip.warn { color: var(--warn); background: color-mix(in oklab, var(--warn), transparent 84%); }
.chip.bad  { color: var(--bad);  background: color-mix(in oklab, var(--bad), transparent 86%); }
.chip.info { color: var(--info); background: color-mix(in oklab, var(--info), transparent 86%); }

/* ============================ DASHBOARD STAT CARDS ============================ */
/* Grid wrapper for stat cards / counter rows shown above a data table */
.dg-grid { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.dg-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.dg-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.dg-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.dg-grid.cols-5 { grid-template-columns: repeat(5,1fr); }
.dg-grid.cols-6 { grid-template-columns: repeat(6,1fr); }

.stat {
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  color: var(--ink); text-decoration: none;
}
.stat .top { display: flex; align-items: center; justify-content: space-between; }
.stat .sico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(220,143,96,.16); color: var(--gold-soft);
  font-size: 20px;
}
.stat .sico svg { width: 22px; height: 22px; }
.stat .sico i  { font-size: 20px; line-height: 1; }
.stat .sico.info     { color: var(--info); background: color-mix(in oklab, var(--info), transparent 86%); }
.stat .sico.warning,
.stat .sico.warn     { color: var(--warn); background: color-mix(in oklab, var(--warn), transparent 84%); }
.stat .sico.success,
.stat .sico.ok       { color: var(--ok);   background: color-mix(in oklab, var(--ok),   transparent 86%); }
.stat .sico.danger,
.stat .sico.bad      { color: var(--bad);  background: color-mix(in oklab, var(--bad),  transparent 86%); }
.stat .sico.dark     { color: var(--ink-muted); background: rgba(84,19,43,.12); }
.stat .sico.primary  { color: var(--gold-soft); background: rgba(220,143,96,.16); }

.stat .trend {
  font-size: 12.5px; font-weight: 700; font-family: 'Cairo', sans-serif;
  padding: 3px 9px; border-radius: 9px;
}
.stat .trend.up   { color: var(--ok);  background: color-mix(in oklab, var(--ok),  transparent 86%); }
.stat .trend.down { color: var(--bad); background: color-mix(in oklab, var(--bad), transparent 86%); }
.stat .val { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: .5px; line-height: 1.1; }
.stat .lbl { font-size: 14px; color: var(--ink-muted); margin-top: 4px; }

/* clickable stat card (e.g. counter that filters the table below) */
a.stat, .stat.is-link { cursor: pointer; }
a.stat:hover, .stat.is-link:hover { color: var(--ink); }

/* ============================ DETAIL HERO (Details pages) ============================ */
.detail-hero {
  display: flex; align-items: center; gap: 24px;
  padding: 20px; padding-bottom: 24px; margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.detail-hero-logo {
  flex: none; width: 160px; height: 160px; border-radius: 16px; overflow: hidden;
  background: var(--glass-bg-2); border: 1px solid var(--glass-border);
  display: grid; place-items: center; padding: 8px;
}
.detail-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.detail-hero-info { flex: 1; min-width: 0; }
.detail-hero-info h3 { font-size: 20px; color: var(--ink); margin: 0 0 6px; }
.detail-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-hero-email { color: var(--ink-muted); font-size: 13.5px; }
@media (max-width: 720px) {
  .detail-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Tab content: drop the CDN/Bootstrap border (visible in dark mode) and tighten padding */
.tab-content { border: none !important; padding: 15px 0 10px !important; }

/* Modal close (×) always at the end of the header — Bootstrap uses a physical margin-left:auto
   which lands beside the title in RTL; use logical margins so it sits at the end both ways. */
.modal-header { justify-content: space-between !important; }
.modal-header .btn-close,
.modal-header .close {
  margin-top: -0.5rem !important;
  margin-bottom: -0.5rem !important;
  margin-inline-end: -0.5rem !important;
  margin-inline-start: auto !important;
}

/* Modal surface — match the system glass/ink colors, opaque, in light & dark */
.modal-content {
  background: #fffdfa; border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius); color: var(--ink);
}
html[data-theme="dark"] .modal-content { background: #3c1626; }
.modal-header { border-bottom: 1px solid var(--glass-border); }
.modal-header .modal-title { color: var(--ink); font-weight: 700; }
.modal-body { color: var(--ink); }
.modal-footer { border-top: 1px solid var(--glass-border); }
/* The close icon is a dark SVG — invert it in dark mode so it stays visible */
html[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }
/* RTL: remove the leading (right) padding on the dashboard tabs nav */
[dir="rtl"] .nav.dash-tabs { padding-right: 0 !important; }

/* ============================ FILE UPLOAD ============================ */
.upload-btn-box { text-align: left !important; }
.file-upload-wrap.file-upload-wrap-2 { display: flex !important; align-items: center !important; gap: 12px !important; justify-content: flex-start !important; text-align: left !important; flex-wrap: wrap; }
/* RTL: the upload helper text and validation message must align to the start (right) */
[dir="rtl"] .upload-btn-box { text-align: right !important; }
[dir="rtl"] .file-upload-wrap.file-upload-wrap-2 { text-align: right !important; }
[dir="rtl"] .upload-btn-box .text-danger,
[dir="rtl"] .file-upload-wrap.file-upload-wrap-2 .text-danger { text-align: right !important; width: 100%; }
.file-upload-wrap .form-control-file,
.file-upload-wrap input[type="file"] { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; }
.file-upload-wrap .label-text { color: var(--ink-muted); font-size: 13.5px; font-weight: 400; margin: 0 !important; }

/* ============================ FORM CARDS (Create / Edit) ============================ */
/* glass card that contains a multi-section form (mirrors customer-add design) */
.form-card { padding: 26px 28px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
.form-section + .form-section { margin-top: 4px; }
.form-section .fs-title { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.form-section .fs-title .n {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: rgba(220,143,96,.16); color: var(--gold-soft);
  font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 14px;
}
.form-section .fs-title h3 { font-size: 16px; color: var(--ink); margin: 0; }

/* generic 2-col form grid (login card has its own scoped rule with higher specificity) */
.form-card .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-card .form-grid .field.col-2 { grid-column: span 2; }
.form-card .form-grid .field.col-12 { grid-column: 1 / -1; }
.form-card .field { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; }
.form-card .field > label { font-size: 13px; color: var(--ink-muted); font-weight: 600; padding-inline-start: 2px; }
.field:has([data-val-required]) > label:not(.dg-remember)::after,
.form-group:has([data-val-required]) > label:not(.dg-remember)::after { content: " *"; color: var(--danger, #dc3545); font-weight: 700; }
.form-card .field .ctrl,
.form-card .field input.form-control,
.form-card .field select.form-control,
.form-card .field select.form-select,
.form-card .field textarea.form-control,
.form-card .field textarea.ctrl {
  height: 44px; border-radius: 12px;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg-2) !important; color: var(--ink) !important;
  padding: 0 14px; font-family: inherit; font-size: 14px; outline: none;
  width: 100%;
  transition: all .25s var(--ease);
}
.form-card .field textarea.ctrl,
.form-card .field textarea.form-control { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.form-card .field .ctrl:focus,
.form-card .field input.form-control:focus,
.form-card .field select.form-control:focus,
.form-card .field select.form-select:focus,
.form-card .field textarea.form-control:focus,
.form-card .field textarea.ctrl:focus {
  border-color: var(--gold-soft) !important;
  box-shadow: 0 0 0 3px rgba(232,197,130,.15) !important;
}
.form-card .field select.ctrl,
.form-card .field select.form-control,
.form-card .field select.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23c9a86a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-inline-end: 36px !important;
}
[dir="rtl"] .form-card .field select.ctrl,
[dir="rtl"] .form-card .field select.form-control,
[dir="rtl"] .form-card .field select.form-select { background-position: left 14px center !important; }

/* Native <select> option list — themed for light/dark so the browser-rendered popup matches
   the design instead of the OS default (white list / blue highlight). select2 dropdowns are
   styled elsewhere and are excluded via :not(.select2). color-scheme keeps the scrollbar and
   focus ring on-theme. */
html[data-theme="dark"] select:not(.select2) { color-scheme: dark; }
html[data-theme="light"] select:not(.select2),
html:not([data-theme]) select:not(.select2) { color-scheme: light; }
select:not(.select2) option {
  background-color: var(--bg-1);
  color: var(--ink);
  padding: 10px 14px;
}
select:not(.select2) option:hover,
select:not(.select2) option:focus,
select:not(.select2) option:checked,
select:not(.select2) option:checked:hover {
  background: #b25e36 !important;
  background-color: #b25e36 !important;
  /* box-shadow inset fills the row even where the browser ignores option background-color */
  box-shadow: 0 0 10px 100px #b25e36 inset !important;
  -webkit-box-shadow: 0 0 10px 100px #b25e36 inset !important;
  color: #fff !important;
}


/* The selected/highlighted row of a NATIVE <select> popup is painted with the OS accent
   (the blue) and ignores the rules above in Chromium. The customizable-select feature lets
   CSS take over that rendering; gated behind @supports so unsupported browsers are unaffected
   (they keep the native popup). This removes the blue and uses the design's gold/ink instead. */
@supports (appearance: base-select) {
  select:not(.select2),
  select:not(.select2)::picker(select) { appearance: base-select; }

  select:not(.select2)::picker(select) {
    background: var(--bg-1);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    padding: 4px;
  }
  select:not(.select2) option {
    border-radius: 8px;
    padding: 9px 13px;
  }
  select:not(.select2) option:hover,
  select:not(.select2) option:focus,
  select:not(.select2) option:checked,
  select:not(.select2) option:checked:hover {
    background: var(--gold-soft) !important;
    color: #fff !important;
  }
  select:not(.select2) option:checked::after { color: #fff; }
}

/* All native .ctrl selects: themed dropdown arrow on the trailing side — right in LTR, left in
   RTL. padding-inline-end keeps text clear of the arrow regardless of direction. */
select.ctrl:not(.select2) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23c9a86a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-inline-end: 36px;
}
[dir="rtl"] select.ctrl:not(.select2) {
  background-position: left 14px center;
}

/* required-mark + validation message */
.form-card .field .req { color: var(--bad); margin-inline-start: 3px; }
.form-card .field .text-danger,
.form-card .field .field-validation-error { font-size: 12px; color: var(--bad) !important; margin-top: 2px; }

/* footer button bar */
.form-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 6px; flex-wrap: wrap; }
.form-actions .btn { min-width: 120px; }
.form-actions .btn.danger,
.form-actions .btn-danger { margin-inline-end: auto; }

/* toast notification */
.form-toast {
  position: fixed; inset-block-start: 22px; inset-inline-end: 22px; z-index: 400;
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(145deg, var(--ok), oklch(0.5 0.12 150));
  color: #fff; font-family: 'Cairo', sans-serif; font-weight: 700;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.6);
  transform: translateY(-16px); opacity: 0;
  transition: all .35s var(--ease); pointer-events: none;
}
.form-toast.show { transform: none; opacity: 1; }
.form-toast svg { width: 20px; height: 20px; }

/* ============================ KEY/VALUE DETAILS ============================ */
/* read-only Details view rows */
.kv { padding: 22px; }
.kv .krow {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid rgba(220,143,96,.10);
}
.kv .krow:last-child { border-bottom: none; }
.kv .krow .k { color: var(--ink-muted); font-size: 14px; }
.kv .krow .v { font-weight: 600; font-family: 'Cairo', sans-serif; color: var(--ink); text-align: end; }
.kv-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 32px; padding: 22px; overflow: hidden; }
.kv-grid .krow { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(220,143,96,.10); min-width: 0; }
.kv-grid .krow .k { color: var(--ink-muted); font-size: 14px; flex-shrink: 0; }
.kv-grid .krow .v { font-weight: 600; font-family: 'Cairo', sans-serif; color: var(--ink); text-align: end; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
/* Car image: full-width, label stacked above a responsive framed preview (D2-156) —
   avoids the tall single-cell row that left a large blank gap. */
.kv-grid .krow.car-image-row { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 10px; }
.kv-grid .krow.car-image-row .v.car-image-box { width: 100%; text-align: start; }
.kv-grid .krow.car-image-row .v.car-image-box img {
  width: 100%; max-width: 360px; aspect-ratio: 16 / 10; height: auto;
  object-fit: cover; border-radius: 14px; border: 1px solid var(--glass-border); display: block;
}

/* ============================ CONFIRM (Delete) CARD ============================ */
/* full-bleed centred confirm card for Delete views */
.confirm-card { padding: 30px; text-align: center; }
.confirm-card .cm-ico {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--bad), transparent 84%);
  color: var(--bad);
}
.confirm-card .cm-ico svg { width: 30px; height: 30px; }
.confirm-card h3 { font-size: 21px; margin-bottom: 8px; }
.confirm-card p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 24px; }
.confirm-card .cm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.confirm-card .field { display: flex; flex-direction: column; gap: 7px; }
.confirm-card .field > label { font-size: 13px; color: var(--ink-muted); font-weight: 600; padding-inline-start: 2px; }
.confirm-card .field .ctrl { height: 44px; border-radius: 12px; border: 1px solid var(--glass-border) !important; background: var(--glass-bg-2) !important; color: var(--ink) !important; padding: 0 14px; font-family: inherit; font-size: 14px; outline: none; width: 100%; transition: all .25s var(--ease); }
.confirm-card .field textarea.ctrl { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.confirm-card .field .ctrl:focus { border-color: var(--gold-soft) !important; box-shadow: 0 0 0 3px rgba(232,197,130,.15) !important; }
.confirm-card .cm-actions .btn { min-width: 140px; }
.btn.danger { background: linear-gradient(145deg, var(--bad), oklch(0.5 0.16 28)) !important; color: #fff !important; border-color: transparent !important; }
.btn.danger:hover { filter: brightness(1.06); color: #fff !important; }

/* File thumbnail placeholder (for failed or non-image files) */
.file-thumb-err {
  object-fit: contain !important;
  padding: 50px !important;
  background: var(--glass-bg-2) !important;
  border: 1px dashed var(--glass-border) !important;
  border-radius: 8px !important;
}

/* responsive — form cards & kv grids (ordered large → small) */
@media (max-width: 900px) {
  .kv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .form-card { padding: 22px 18px; }
  .form-card .form-grid { grid-template-columns: 1fr; }
  .form-card .form-grid .field.col-2 { grid-column: span 1; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .kv-grid { padding: 16px; }
  .kv-grid .krow { flex-wrap: wrap; gap: 4px 16px; }
  .kv-grid .krow .k { flex-shrink: 1; min-width: 0; }
  .kv-grid .krow .v { flex: 1 1 100%; text-align: start; }
  .kv-grid .krow .v .btn { font-size: 12px; padding: 5px 12px; }
}
@media (max-width: 480px) {
  .form-card { padding: 18px 14px; }
  .kv-grid { padding: 12px; }
  .kv-grid .krow { padding: 10px 0; }
  .form-section .fs-title h3 { font-size: 15px; }
  .dg-page-head { gap: 8px; }
  .dg-page-head .btn { padding: 8px 10px; font-size: 13px; }
  .dg-page-head .dg-section-title h2 { font-size: 17px; }
}

/* responsive */
@media (max-width: 1180px) {
  .filter-grid { grid-template-columns: repeat(2,1fr); }
  .dg-grid.cols-4, .dg-grid.cols-5, .dg-grid.cols-6 { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 860px) {
  .dg-grid.cols-3, .dg-grid.cols-4, .dg-grid.cols-5, .dg-grid.cols-6 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .filter-grid { grid-template-columns: 1fr; }
  .dg-grid.cols-2, .dg-grid.cols-3, .dg-grid.cols-4, .dg-grid.cols-5, .dg-grid.cols-6 { grid-template-columns: 1fr; }
}


.logo {
    width: 100%;
}

/* ============================ MOBILE SIDEBAR (off-canvas drawer) ============================ */
/* On phones/small tablets the floating 280px sidebar would eat the whole
   viewport and crush the page content. Below the JS breakpoint (820px — the
   inline layout script auto-adds `.sideMenuClosed` under 820 and the hamburger
   toggles it) we turn the sidebar into an off-canvas drawer that slides over
   the content instead of sitting beside it. */
@media (max-width: 819.98px) {
  /* Drawer base = OPEN state (no `.sideMenuClosed`). Fixed, full-height,
     overlaps the content; the main column reclaims the full width because the
     sidebar is now out of the flex flow. */
  body.dg-app .sideBar {
    position: fixed !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    width: min(86vw, 300px) !important;
    max-width: 86vw;
    border-radius: 0 22px 22px 0 !important;
    z-index: 1070;
    transform: translateX(0);
    transition: transform .32s var(--ease);
    box-shadow: 0 24px 70px -10px rgba(84, 19, 43, .55);
  }
  [dir="rtl"] body.dg-app .sideBar {
    border-radius: 22px 0 0 22px !important;
  }

  /* CLOSED state — slide the drawer fully off-screen. This is the default on
     load (script adds `.sideMenuClosed` under 820). */
  body.dg-app.sideMenuClosed .sideBar,
  body.sideMenuClosed.dg-app .sideBar {
    margin: 0 !important;
    transform: translateX(-110%);
  }
  [dir="rtl"] body.dg-app.sideMenuClosed .sideBar,
  [dir="rtl"] body.sideMenuClosed.dg-app .sideBar {
    transform: translateX(110%);
  }

  /* While the drawer is closed (and off-screen) the body still carries
     `.sideMenuClosed`, which elsewhere collapses the menu to an icon rail and
     hides the footer labels. Since the open drawer is the only time it's
     visible on mobile — and the open drawer never has `.sideMenuClosed` — the
     full-width menu shows naturally. Nothing to override here; the legacy
     collapsed rules only ever apply while it's hidden. */

  /* Main column takes the full width — the fixed drawer no longer occupies a
     flex track. */
  body.dg-app > .main {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* Dimmed backdrop behind the open mobile drawer (element injected by
   diriyah-theme.js). Tapping it closes the drawer. */
.dg-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1065;
  background: rgba(20, 6, 12, .46);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
/* backdrop-filter only while shown — see .dg-route-loader note (mobile WebKit
   paints the blur even when hidden, softening the page until first repaint). */
.dg-drawer-backdrop.show {
  opacity: 1; visibility: visible;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (min-width: 820px) {
  .dg-drawer-backdrop { display: none !important; }
  /* Sidebar collapse is disabled on desktop, so the hamburger toggle has no
     purpose there — hide it. (It stays visible <820px to open the drawer.) */
  body.dg-app .main-header-menu-icon { display: none !important; }
}

/* ============================ DATATABLES SELECT (checkbox column + row selection) ============================ */
/* The legacy CDN site.css paints selected rows bright green (rgb(65 195 162))
   and the Select extension draws plain black checkboxes — both clash with the
   brand. Re-skin them to the copper/glass palette. Used by the batch-approve
   lists (e.g. BlePrintRequests/PendingList). */
body.dg-app table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(220, 143, 96, .20) !important;
  color: var(--ink) !important;
}
body.dg-app table.dataTable tbody tr.selected a { color: var(--gold-soft) !important; }

/* checkbox cell — unselected box */
body.dg-app table.dataTable td.select-checkbox:before,
body.dg-app table.dataTable th.select-checkbox:before {
  border: 1.5px solid var(--glass-border) !important;
  border-radius: 5px !important;
  background: var(--glass-bg-2) !important;
}
/* checkbox cell — selected box (filled copper) */
body.dg-app table.dataTable tr.selected td.select-checkbox:before {
  background: linear-gradient(145deg, var(--gold), var(--gold-deep)) !important;
  border-color: transparent !important;
}
body.dg-app table.dataTable tr.selected td.select-checkbox:after {
  color: #4a1020 !important;
  text-shadow: none !important;
}

/* header "select all" native checkbox */
body.dg-app .selectAll {
  accent-color: var(--gold-deep);
  border-color: var(--glass-border) !important;
}
/* RTL: give the select-checkbox column breathing room so it isn't flush to the edge */
[dir="rtl"] body.dg-app table.dataTable td.select-checkbox,
[dir="rtl"] body.dg-app table.dataTable th.select-checkbox { padding-inline: 14px !important; }
/* Keep all DataTable header/body cells on a single line */
body.dg-app table.dataTable th,
body.dg-app table.dataTable td { white-space: nowrap; }

/* ============================ TABLE / DETAIL LINKS ============================ */
/* CSP-compliant replacement for the inline color many DataTable column-render
   strings and detail anchors used to carry. Inline style attributes can't be
   nonced, so the colour lives here as a class instead. */
.emp-link { color: var(--gold-soft); text-decoration: none; font-weight: 600; }
.emp-link:hover { color: var(--gold); text-decoration: underline; }