.dash{ display:flex; min-height:100vh; }
html, body{ overflow-x: hidden; }

/* ---------- SIDEBAR ---------- */
.sidebar{ width:var(--sidebar-w); flex-shrink:0; background:var(--sable); color:rgba(248,244,236,.68); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar-head{ padding:26px 26px 22px; border-bottom:1px solid var(--line-dark); }
.sidebar-head .logo-en{ font-family:var(--display); color:var(--ivory); font-size:20px; letter-spacing:.06em; font-weight:600; }
.sidebar-head .logo-ar{ font-family:var(--arabic); direction:rtl; font-size:12px; color:var(--brass-light); margin-top:2px; display:block; }
.role-chip{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--brass); color:var(--brass-light); }
.sidebar-nav{ flex:1; padding:18px 14px; overflow-y:auto; }
.snav-group{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(248,244,236,.35); padding:16px 12px 8px; }
.snav-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; font-size:13.5px; font-weight:600; border-radius:3px; margin-bottom:2px; }
.snav-item svg{ width:17px; height:17px; opacity:.8; flex-shrink:0; }
.snav-item:hover{ background:rgba(248,244,236,.06); color:var(--ivory); }
.snav-item.active{ background:var(--brass); color:var(--sable); }
.snav-item.active svg{ opacity:1; stroke:var(--sable); }
.snav-badge{ margin-left:auto; background:var(--terracotta); color:#fff; font-size:10px; font-family:var(--mono); padding:1px 7px; border-radius:10px; }
.sidebar-foot{ padding:18px 26px 24px; border-top:1px solid var(--line-dark); font-size:12px; }
.sidebar-user{ display:flex; align-items:center; gap:10px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--brass); color:var(--sable); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.sidebar-user .name{ color:var(--ivory); font-weight:600; font-size:13px; }
.sidebar-user .sub{ color:rgba(248,244,236,.45); font-size:11.5px; }

/* ---------- MAIN AREA ---------- */
.main{ flex:1; min-width:0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:22px 36px; border-bottom:1px solid var(--line); background:var(--ivory); position:sticky; top:0; z-index:10; }
.topbar h1{ font-size:24px; }
.topbar-sub{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.topbar-right{ display:flex; align-items:center; gap:22px; }
.search-box{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:9px 14px; font-size:13px; color:var(--ink-soft); width:220px; }
.search-box input{ border:none; background:none; outline:none; font-size:13px; width:100%; }
.icon-btn-dash{ width:19px; height:19px; opacity:.7; cursor:pointer; position:relative; }
.dot{ position:absolute; top:-3px; right:-3px; width:7px; height:7px; border-radius:50%; background:var(--terracotta); }
.content{ padding:32px 36px 70px; }

/* ---------- KPI CARDS ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:34px; }
.kpi-card{ border:1px solid var(--line); background:#fff; padding:22px 24px; }
.kpi-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.kpi-value{ font-family:var(--display); font-size:30px; margin-bottom:8px; }
.kpi-delta{ font-size:12px; font-weight:600; display:flex; align-items:center; gap:5px; }
.kpi-delta.up{ color:var(--ok); }
.kpi-delta.down{ color:var(--bad); }
@media (max-width:1100px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } }

/* ---------- PANELS ---------- */
.panel{ border:1px solid var(--line); background:#fff; margin-bottom:26px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
.panel-head h3{ font-size:16px; }
.panel-head a{ font-size:12.5px; font-weight:600; color:var(--brass); }
.panel-body{ padding:24px; }
.two-col{ display:grid; grid-template-columns:1.4fr 1fr; gap:26px; align-items:flex-start; }
@media (max-width:1000px){ .two-col{ grid-template-columns:1fr; } }

/* ---------- TABLES ---------- */
.dtable{ width:100%; font-size:13.5px; }
.dtable th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; padding:0 24px 14px; border-bottom:1px solid var(--line); }
.dtable td{ padding:16px 24px; border-bottom:1px solid var(--line); vertical-align:middle; }
.dtable tr:last-child td{ border-bottom:none; }
.dtable tr:hover td{ background:var(--ivory); }
.row-thumb{ width:38px; height:38px; background:var(--stone); border:1px solid var(--line); display:inline-block; vertical-align:middle; margin-right:12px; }
.cell-main{ display:flex; align-items:center; }
.cell-title{ font-weight:600; }
.cell-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.mono-cell{ font-family:var(--mono); font-size:12.5px; }
.table-actions{ display:flex; gap:8px; }
.table-actions button, .table-actions a{ font-size:11.5px; font-weight:700; padding:6px 12px; border:1px solid var(--line); background:none; }
.table-actions button:hover, .table-actions a:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------- SIMPLE BAR/LINE CHART (pure SVG, no libs) ---------- */
.chart-box{ width:100%; height:220px; }

/* ---------- FORMS in dashboard ---------- */
.d-form-field{ margin-bottom:18px; }
.d-form-field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:8px; }
.d-form-field input, .d-form-field select, .d-form-field textarea{ width:100%; border:1px solid var(--line); padding:11px 14px; font-size:13.5px; background:#fff; }
.d-form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- PROGRESS / TIER ---------- */
.tier-card{ background:var(--sable); color:var(--ivory); padding:30px; position:relative; overflow:hidden; }
.tier-card .eyebrow{ color:var(--brass-light); }
.progress-track{ height:5px; background:rgba(248,244,236,.15); margin:20px 0 10px; position:relative; }
.progress-fill{ height:100%; background:var(--brass); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .sidebar{ display:none; }
  .content{ padding:24px; }
  .topbar{ padding:18px 24px; }
}

@media (max-width:900px){
  body{ padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
}