:root{ --bg:#0b1220; --card:#101726; --muted:#8a9bb3; --text:#e6eef8; --brand:#3dd68c; --brand-ink:#052e16; --border:#1e293b; --accent:#4cc9f0; --sidebar-w:280px; }
:root.light{ --bg:#f7fafc; --card:#ffffff; --muted:#475569; --text:#0b1220; --brand:#16a34a; --brand-ink:#ecfdf5; --border:#e2e8f0; --accent:#0ea5e9; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Kufi Arabic","Cairo","Tajawal",sans-serif;background:var(--bg);color:var(--text);direction:rtl;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.sidebar{position:fixed; right:0; top:0; width:var(--sidebar-w); height:100vh; border-right:1px solid var(--border); background:linear-gradient(to left,rgba(61,214,140,.08),transparent); display:flex; flex-direction:column; z-index:40;}
.brand{display:flex;align-items:center;gap:.6rem;padding:1rem;border-bottom:1px solid var(--border)}
.brand .logo{width:40px;height:40px;border-radius:.75rem;background:radial-gradient(circle at 30% 30%,var(--brand),transparent 60%),var(--card);display:grid;place-items:center;border:1px solid var(--border)}
.brand span{font-weight:800}
.menu{display:flex;flex-direction:column;padding:.6rem} .menu a{padding:.55rem .75rem;border-radius:.65rem;border:1px solid transparent;display:flex;align-items:center;gap:.5rem} .menu a:hover,.menu a.active{border-color:var(--border);background:rgba(2,6,23,.25)}
.sidebar .actions{margin-top:auto;padding:1rem;border-top:1px solid var(--border);display:flex;gap:.5rem;flex-wrap:wrap}
.btn{border:1px solid var(--border);background:var(--card);color:var(--text);padding:.45rem .75rem;border-radius:.625rem;cursor:pointer} .btn.primary{background:var(--brand);color:#041e0f;border-color:transparent}
.content{padding:1rem 1rem 2rem; margin:0; width:100%; max-width:100%;transition:margin .3s ease;}
.section{padding:1rem 0} .card{border:1px solid var(--border);background:var(--card);padding:1rem;border-radius:1rem} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border);background:var(--card);border-radius:.75rem;overflow:auto} .table th,.table td{padding:.6rem .7rem;border-bottom:1px solid var(--border);text-align:right} .table th{background:rgba(2,6,23,.25);font-weight:700} .table tr:hover td{background:rgba(2,6,23,.15)}
.input,select{padding:.5rem .6rem;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:.6rem;outline:none} .footer{margin-top:1.5rem;padding:1rem 0;border-top:1px solid var(--border);color:var(--muted)}
.hero{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:1rem;background:linear-gradient(160deg, rgba(61,214,140,.10), rgba(76,201,240,.06));padding:1.2rem;margin-bottom:1rem} .hero h1{margin:.2rem 0 .4rem} .hero p{color:var(--muted);margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:.8rem} .kpi{border:1px dashed var(--border);background:var(--card);padding:.8rem;border-radius:.9rem} .kpi b{display:block}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:.8rem} .tile{border:1px solid var(--border);background:var(--card);padding:1rem;border-radius:1rem;display:flex;flex-direction:column;gap:.3rem} .tile a{color:var(--accent)}
.annos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:.8rem} .anno{border:1px solid var(--border);background:var(--card);padding:1rem;border-radius:1rem;display:flex;flex-direction:column;gap:.45rem} .tag{display:inline-block;padding:.15rem .45rem;border:1px solid var(--border);border-radius:.6rem;font-size:.85rem;color:var(--muted)} .anno .meta{display:flex;gap:.5rem;align-items:center} .anno .title{font-weight:700} .anno .desc{color:var(--muted)} .anno .actions{margin-top:auto;display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:1100px){ :root{ --sidebar-w:240px; } .cards{grid-template-columns:1fr} .kpis{grid-template-columns:1fr} .quick{grid-template-columns:1fr 1fr} .annos{grid-template-columns:1fr} }
:root.light .hero{background:linear-gradient(160deg, rgba(22,163,74,.08), rgba(14,165,233,.05))}
.toggle-drawer{display:none;position:fixed;right:1rem;bottom:1rem;z-index:50}
@media (max-width:780px){
  :root{ --sidebar-w:min(90vw,320px); }
  .sidebar{width:var(--sidebar-w);box-shadow:-24px 0 48px rgba(5,10,25,.45);transition:transform .3s ease;}
  .content{margin-right:0;padding:1rem 1rem 2.5rem;}
  body.drawer-closed .sidebar{transform:translateX(calc(100% + 1.5rem))}
  body:not(.drawer-closed){overflow:hidden;}
  .toggle-drawer{display:block}
}
@media (max-width:600px){
  .quick{grid-template-columns:1fr}
}
@media (min-width:781px){
  .content{margin-right:var(--sidebar-w);padding:1.5rem 1.5rem 3rem 1.5rem;}
}