:root{
  --bg:#0b1220;--panel:#0f1a2f;--card:#111f3a;--text:#e7eefc;--muted:#9fb0cc;
  --line:rgba(255,255,255,.08);--brand:#7c5cff;--danger:#ff4d4f;--ok:#22c55e;--warn:#f59e0b;
  --shadow:0 12px 40px rgba(0,0,0,.25);--radius:18px;
}

/* Light theme overrides */
html[data-theme="light"]{
  --bg:#f6f7fb;--panel:#ffffff;--card:#ffffff;--text:#142033;--muted:#516174;
  --line:rgba(20,32,51,.10);--brand:#2f5ea6;--danger:#c62828;--ok:#2e7d32;--warn:#e65100;
  --shadow:0 10px 30px rgba(17,24,39,.10);
}

/* Auto theme follows the system preference */
@media (prefers-color-scheme: light){
  html[data-theme="auto"]{
    --bg:#f6f7fb;--panel:#ffffff;--card:#ffffff;--text:#142033;--muted:#516174;
    --line:rgba(20,32,51,.10);--brand:#2f5ea6;--danger:#c62828;--ok:#2e7d32;--warn:#e65100;
    --shadow:0 10px 30px rgba(17,24,39,.10);
  }
}
*{box-sizing:border-box} body{margin:0;font-family:'Tajawal',system-ui;background:
radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.22), transparent 60%),
radial-gradient(900px 500px at 80% 0%, rgba(45,212,191,.14), transparent 55%),
linear-gradient(180deg, var(--bg), var(--bg) 70%);color:var(--text)}
a{color:inherit}
.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
background:rgba(15,26,47,.7);border-bottom:1px solid var(--line);backdrop-filter: blur(12px)}
.brand{font-weight:900}
.top-actions{display:flex;gap:10px;align-items:center}
.user-pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted)}
.wrap{display:grid;grid-template-columns:290px 1fr;gap:16px;max-width:1280px;margin:18px auto;padding:0 14px}
.sidebar{position:sticky;top:72px;height:fit-content;padding:14px;border-radius:var(--radius);
background:linear-gradient(180deg, rgba(17,31,58,.85), rgba(15,26,47,.7));border:1px solid var(--line);box-shadow:var(--shadow)}
.nav{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;text-decoration:none;border:1px solid transparent;transition:.15s}
.nav:hover{background:rgba(255,255,255,.05);border-color:rgba(124,92,255,.25)}
.hr{height:1px;background:var(--line);margin:12px 0}
.content{padding:0}
.page-title{margin-bottom:12px} h1{margin:0;font-size:22px;font-weight:900}
.card{background:linear-gradient(180deg, rgba(17,31,58,.9), rgba(15,26,47,.85));border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.grid{display:grid;gap:12px}
.grid.kpis{grid-template-columns:repeat(6,1fr)}
.kpi{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.kpi .label{color:var(--muted);font-weight:700;font-size:12px}
.kpi .value{font-size:26px;font-weight:900;margin-top:6px}
.kpi .hint{color:var(--muted);font-size:12px;margin-top:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:14px;
background:rgba(255,255,255,.06);border:1px solid var(--line);text-decoration:none;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px);border-color:rgba(124,92,255,.35)}
.btn.primary{background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(45,212,191,.75));border-color:transparent}
.btn.danger{background:rgba(255,77,79,.12);border-color:rgba(255,77,79,.35);color:#ffd1d1}
.btn.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#c8ffd9}
.notice{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted)}
.notice.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#c8ffd9}
.notice.bad{border-color:rgba(255,77,79,.35);background:rgba(255,77,79,.10);color:#ffd1d1}
.input,select,textarea{width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(10,16,30,.55);color:var(--text);outline:none}
textarea{resize:vertical} label{display:block;font-weight:800;margin-bottom:6px;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
table{width:100%;border-collapse:collapse} th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
th{color:var(--muted);font-weight:900;font-size:12px;background:rgba(255,255,255,.02)} tr:hover td{background:rgba(255,255,255,.02)}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.badge.blue{border-color:rgba(124,92,255,.35)} .badge.orange{border-color:rgba(245,158,11,.35);color:#ffe9c2}
.badge.red{border-color:rgba(255,77,79,.35);color:#ffd1d1} .badge.green{border-color:rgba(34,197,94,.35);color:#c8ffd9}
.badge.gray{border-color:rgba(255,255,255,.18);color:var(--muted)}
.columns{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.col{padding:12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);min-height:260px}
.col h3{margin:0 0 10px;font-size:14px;color:var(--muted);font-weight:900}
.task{padding:10px;border-radius:16px;border:1px solid var(--line);background:rgba(17,31,58,.75);margin-bottom:10px}
.task .t{font-weight:900} .task .m{color:var(--muted);font-size:12px;margin-top:4px}
.task .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.footer{max-width:1280px;margin:0 auto;padding:16px 14px 28px;color:var(--muted)}
@media (max-width:1080px){.wrap{grid-template-columns:1fr}.sidebar{position:relative;top:auto}.grid.kpis{grid-template-columns:repeat(2,1fr)}.columns{grid-template-columns:1fr}}