:root{
  --brand-maroon:#7b1e2b;
  --brand-maroon-2:#5f1621;
  --brand-gold:#caa24b;
  --brand-gold-2:#e2c06b;

  --bg:#0b0e12;
  --surface:#101621;
  --surface-2:#0f141e;
  --surface-3:#0c1018;
  --text:#eef2f7;
  --muted:#a8b3c7;
  --border:rgba(255,255,255,.09);
  --shadow:0 12px 32px rgba(0,0,0,.35);

  --success:#29d27d;
  --warn:#f5b84c;
  --danger:#ff5b6b;
  --info:#5aa7ff;

  --radius:16px;
  --radius-sm:12px;
  --radius-xs:10px;
  --ring:0 0 0 3px rgba(202,162,75,.25);
  --font-en:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-ar:"Noto Kufi Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html[data-theme="light"]{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --surface-2:#ffffff;
  --surface-3:#f3f5fa;
  --text:#0e1420;
  --muted:#4a5568;
  --border:rgba(15,23,42,.12);
  --shadow:0 12px 28px rgba(15,23,42,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-en);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(123,30,43,.32), transparent 62%),
    radial-gradient(900px 600px at 92% 0%, rgba(202,162,75,.20), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
}

html[dir="rtl"] body{font-family:var(--font-ar)}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,select,input{font:inherit}

.app{
  display:grid;
  grid-template-columns: 320px 1fr;
  min-height:100vh;
}

html[dir="rtl"] .app{
  grid-template-columns: 1fr 320px;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:18px 16px 16px;
  background:linear-gradient(180deg, rgba(16,22,33,.88), rgba(16,22,33,.76));
  border-inline-end:1px solid var(--border);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  gap:14px;
}

html[dir="rtl"] .sidebar{grid-column:2}
html[dir="rtl"] .main{grid-column:1}

html[data-theme="light"] .sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
}

.sidebar.is-collapsed{
  width:88px;
  grid-column:1;
}
.app:has(.sidebar.is-collapsed){
  grid-template-columns: 88px 1fr;
}

html[dir="rtl"] .sidebar.is-collapsed{grid-column:2}
html[dir="rtl"] .app:has(.sidebar.is-collapsed){
  grid-template-columns: 1fr 88px;
}

.sidebar__brand{
  display:grid;
  grid-template-columns: 56px 1fr 40px;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.brandMark{
  width:56px;height:56px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:
    radial-gradient(24px 24px at 30% 30%, rgba(202,162,75,.22), transparent 70%),
    radial-gradient(44px 44px at 70% 70%, rgba(123,30,43,.25), transparent 72%),
    rgba(255,255,255,.02);
  border:1px solid rgba(202,162,75,.22);
  overflow:hidden;
}
.brandMark__logo{width:54px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.brandText__title{font-weight:700;letter-spacing:.2px}
.brandText__subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.sidebar__collapse i{transition:transform .18s ease}
html[dir="rtl"] .sidebar__collapse i{transform:scaleX(-1)}

.sidebar.is-collapsed .brandText{display:none}
.sidebar.is-collapsed .sidebar__brand{grid-template-columns: 56px 1fr}
.sidebar.is-collapsed .sidebar__collapse{display:none}

.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
}
.nav__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:14px;
  color:var(--muted);
  border:1px solid transparent;
  transition:background .16s ease, transform .16s ease, color .16s ease, border-color .16s ease;
}
.nav__item i{width:18px;text-align:center}
.nav__item:hover{
  background:rgba(255,255,255,.05);
  color:var(--text);
  transform:translateY(-1px);
}
.nav__item.is-active{
  background:
    linear-gradient(90deg, rgba(123,30,43,.28), rgba(202,162,75,.14));
  color:var(--text);
  border-color:rgba(202,162,75,.26);
}
.sidebar.is-collapsed .nav__item span{display:none}
.sidebar.is-collapsed .nav__item{justify-content:center}

.sidebar__footer{margin-top:auto;padding:6px}
.miniCard{
  padding:12px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.miniCard__title{font-weight:700}
.miniCard__desc{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.35}
.sidebar.is-collapsed .sidebar__footer{display:none}

.main{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.topbar{
  position:sticky;
  top:0;
  z-index:5;
  display:grid;
  grid-template-columns: 1fr minmax(420px, 680px) auto;
  gap:16px;
  align-items:center;
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(11,14,18,.78), rgba(11,14,18,.55));
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
html[data-theme="light"] .topbar{
  background:linear-gradient(180deg, rgba(247,248,251,.84), rgba(247,248,251,.66));
}

.pageTitle__label{font-weight:800;font-size:18px;letter-spacing:.2px}
.pageTitle__meta{font-size:12px;color:var(--muted);margin-top:3px}

.filters{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.field{min-width:160px}
.field__label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.field__control{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
html[data-theme="light"] .field__control{background:#fff}
.field__control:focus{box-shadow:var(--ring);border-color:rgba(202,162,75,.45)}

.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.divider{width:1px;height:26px;background:var(--border);margin:0 4px}
.btn{
  border:none;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  display:inline-flex;
  gap:10px;
  align-items:center;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
  user-select:none;
}
.btn i{opacity:.95}
.btn--ghost{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid var(--border);
}
.btn--ghost:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.btn--primary{
  background:linear-gradient(90deg, var(--brand-maroon), var(--brand-maroon-2));
  color:#fff;
  border:1px solid rgba(202,162,75,.30);
  box-shadow:0 10px 24px rgba(123,30,43,.22);
}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(123,30,43,.26)}

.iconBtn{
  width:40px;height:40px;
  display:inline-grid;place-items:center;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition:transform .16s ease, background .16s ease;
}
.iconBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.iconBtn:focus{outline:none;box-shadow:var(--ring)}

.langBtn{
  height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:0 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  letter-spacing:.4px;
}
.langBtn:focus{outline:none;box-shadow:var(--ring)}
.langBtn__ar{font-family:var(--font-ar);font-weight:700}
.langBtn__en{font-weight:800}
.langBtn__sep{opacity:.55}

.userChip{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.userChip__logo{width:34px;height:34px;border-radius:12px;border:1px solid rgba(202,162,75,.25);background:#fff;object-fit:contain}
.userChip__name{font-weight:800;font-size:12px}
.userChip__role{font-size:11px;color:var(--muted);margin-top:2px}

.content{
  padding:18px;
  display:block;
}

.grid{
  display:grid;
  gap:14px;
}
.grid.cols-4{grid-template-columns: repeat(4, minmax(0, 1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0, 1fr))}

.card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  padding:14px;
  min-width:0;
}
html[data-theme="light"] .card{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.90));
}
.cardHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.cardTitle{font-weight:800}
.cardSub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.cardBody{min-width:0}

.kpi{
  display:flex;gap:12px;align-items:center;
}
.kpiIcon{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  background:
    radial-gradient(30px 30px at 30% 30%, rgba(202,162,75,.22), transparent 70%),
    radial-gradient(40px 40px at 70% 70%, rgba(123,30,43,.24), transparent 72%),
    rgba(255,255,255,.02);
  border:1px solid rgba(202,162,75,.20);
  color:var(--brand-gold-2);
  flex:0 0 auto;
}
.kpiVal{font-weight:900;font-size:22px;letter-spacing:.2px}
.kpiLbl{font-size:12px;color:var(--muted);margin-top:2px}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
}
.badge.success{color:var(--success);border-color:rgba(41,210,125,.25);background:rgba(41,210,125,.08)}
.badge.warn{color:var(--warn);border-color:rgba(245,184,76,.25);background:rgba(245,184,76,.10)}
.badge.danger{color:var(--danger);border-color:rgba(255,91,107,.25);background:rgba(255,91,107,.10)}
.badge.info{color:var(--info);border-color:rgba(90,167,255,.25);background:rgba(90,167,255,.10)}

.progress{
  height:10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  overflow:hidden;
}
html[data-theme="light"] .progress{background:rgba(15,23,42,.05)}
.progress > div{
  height:100%;
  background:linear-gradient(90deg, var(--brand-maroon), var(--brand-gold));
  width:0%;
}

.tableWrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;min-width:980px;background:rgba(0,0,0,.10)}
html[data-theme="light"] table{background:#fff}
th,td{padding:12px 12px;border-bottom:1px solid var(--border);text-align:start;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:700;background:rgba(255,255,255,.03);position:sticky;top:0;z-index:1}
tr:hover td{background:rgba(255,255,255,.03)}
.tRight{text-align:end}
.tCenter{text-align:center}
.tableActions{display:flex;gap:8px;align-items:center}

.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.search{
  display:flex;gap:10px;align-items:center;min-width:260px;
  padding:10px 12px;border-radius:14px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.search input{
  border:none;outline:none;background:transparent;color:var(--text);width:100%;
}
.pillGroup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{
  padding:8px 10px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);cursor:pointer;font-size:12px;
}
.pill.is-active{border-color:rgba(202,162,75,.36);background:rgba(202,162,75,.12);color:var(--text)}

.pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.pageBtn{
  padding:8px 10px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);cursor:pointer;color:var(--text);min-width:38px;text-align:center;
}
.pageBtn[disabled]{opacity:.4;cursor:not-allowed}
.pageBtn.is-active{border-color:rgba(202,162,75,.4);background:rgba(202,162,75,.12)}

.twoCol{
  display:grid;gap:14px;grid-template-columns: 1.2fr .8fr;
}

.chartCanvas{width:100%;height:320px}
.chartCanvas.tall{height:360px}
.chartBox{position:relative}

.toastHost{
  position:fixed;
  bottom:18px;
  inset-inline-end:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:999;
  max-width:min(420px, calc(100vw - 24px));
}
.toast{
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(16,22,33,.94), rgba(16,22,33,.78));
  box-shadow:var(--shadow);
  padding:12px 12px;
  display:grid;
  grid-template-columns: 22px 1fr auto;
  gap:10px;
  align-items:start;
  animation:toastIn .18s ease both;
}
html[data-theme="light"] .toast{background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88))}
.toast__icon{color:var(--brand-gold-2);margin-top:2px}
.toast__title{font-weight:900}
.toast__msg{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
.toast__close{margin-top:-2px}
@keyframes toastIn{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}

.modalHost{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
}
.modalHost.hidden{display:none}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(4px)}
.modal{
  position:relative;
  width:min(920px, calc(100vw - 24px));
  max-height:min(86vh, 920px);
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(202,162,75,.18);
  background:linear-gradient(180deg, rgba(16,22,33,.97), rgba(16,22,33,.86));
  box-shadow:0 24px 54px rgba(0,0,0,.45);
}
html[data-theme="light"] .modal{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92))}
.modal__header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 14px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:inherit;z-index:1;
}
.modal__title{font-weight:900}
.modal__body{padding:14px}
.modal__footer{padding:12px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}

.skeleton{padding:6px}
.skeleton__bar{height:14px;border-radius:999px;background:rgba(255,255,255,.06);width:38%;margin-bottom:16px}
.skeleton__grid{display:grid;gap:14px;grid-template-columns: repeat(4, minmax(0,1fr))}
.skeleton__card{height:118px;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid var(--border)}

.muted{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;font-size:.95em}
.hidden{display:none !important}

@media (max-width: 1280px){
  .topbar{grid-template-columns: 1fr 1fr;grid-template-rows:auto auto}
  .topbar__right{grid-column:1 / -1}
  .grid.cols-4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .skeleton__grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .twoCol{grid-template-columns: 1fr}
}
@media (max-width: 980px){
  .app{grid-template-columns: 88px 1fr}
  .sidebar{padding:14px 10px}
  .brandText{display:none}
  .sidebar__collapse{display:none}
  .nav__item span{display:none}
  .nav__item{justify-content:center}
  .sidebar__footer{display:none}
}

@media (max-width: 980px){
  html[dir="rtl"] .app{grid-template-columns: 1fr 88px}
}
@media (max-width: 680px){
  .topbar{grid-template-columns: 1fr;grid-template-rows:auto auto auto}
  .filters{justify-content:flex-start}
  .actions{justify-content:flex-start}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns: 1fr}
  .skeleton__grid{grid-template-columns: 1fr}
  .field{min-width:calc(50% - 5px)}
}

html[dir="rtl"] .toastHost{inset-inline-end:auto;inset-inline-start:18px}
html[dir="rtl"] th, html[dir="rtl"] td{text-align:right}