/* لوحة المتابعة - عربي RTL، متجاوبة، بلا إطار عمل */

:root{
  --bg:#f4f6f8; --panel:#ffffff; --ink:#16202c; --muted:#63748a; --line:#e3e8ee;
  --brand:#1f5f8b; --brand-soft:#e8f1f8; --good:#1c7a52; --good-soft:#e6f4ec;
  --warn:#8a5a00; --warn-soft:#fdf3e0; --shadow:0 1px 2px rgba(16,32,48,.06),0 2px 8px rgba(16,32,48,.05);
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  font-size:15px; line-height:1.55;
  padding-top:env(safe-area-inset-top,0); padding-bottom:env(safe-area-inset-bottom,0);
}

/* ---------- الشريط العلوي ---------- */
.topbar{
  display:flex; align-items:center; gap:12px;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:10px 16px; position:sticky; top:0; z-index:30;
}
.brand{font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px}
.brand-mark{color:var(--brand)}
.logout{margin-inline-start:auto; display:flex; align-items:center; gap:10px}
.who{color:var(--muted); font-size:13px}
.menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:16px; cursor:pointer}

.btn-ghost{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 14px;cursor:pointer;color:var(--ink);font:inherit}
.btn-ghost:hover{background:var(--bg)}
.btn-primary{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:11px 16px;font:inherit;font-weight:600;cursor:pointer;width:100%}
.btn-primary:hover{filter:brightness(1.08)}

/* ---------- الهيكل ---------- */
.shell{display:flex; align-items:flex-start; min-height:calc(100vh - 53px)}
.sidebar{
  width:224px; flex:0 0 224px; background:var(--panel); border-inline-start:0;
  border-inline-end:1px solid var(--line); padding:14px 10px; position:sticky; top:53px;
  max-height:calc(100vh - 53px); overflow-y:auto;
}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:var(--ink); text-decoration:none; font-size:14.5px; margin-bottom:2px;
}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--brand-soft); color:var(--brand); font-weight:700}
.nav-icon{width:18px; text-align:center; color:var(--muted)}
.nav-item.active .nav-icon{color:var(--brand)}
.nav-soon{margin-inline-start:auto; font-size:11px; color:var(--muted); background:var(--bg); border-radius:6px; padding:1px 6px}
.content{flex:1; min-width:0; padding:20px 22px 48px}

/* ---------- العناوين ---------- */
.page-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.page-head h1{font-size:22px; margin:0}
.subtitle{margin:2px 0 0; color:var(--muted); font-size:14px}
.section{font-size:15px; margin:26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); color:var(--muted); font-weight:700}
.muted{color:var(--muted)} .small{font-size:13px}

.month-picker{margin-inline-start:auto; display:flex; align-items:center; gap:8px}
.month-picker label{font-size:13px; color:var(--muted)}
.month-picker select{
  font:inherit; padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); min-width:150px;
}

/* ---------- البطاقات ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; box-shadow:var(--shadow)}
.card-label{font-size:13px; color:var(--muted); margin-bottom:6px}
.card-value{font-size:23px; font-weight:700; letter-spacing:-.2px; word-break:break-word}
.card-unit{font-size:12px; font-weight:600; color:var(--muted); margin-inline-start:4px}
.card-note{margin-top:6px; font-size:12px; color:var(--muted)}
.tone-primary{border-inline-start:3px solid var(--brand)}
.tone-good{border-inline-start:3px solid var(--good)}
.tone-good .card-value{color:var(--good)}
.tone-warn{border-inline-start:3px solid var(--warn)}
.tone-warn .card-value{color:var(--warn)}
.soon{font-size:13px; font-weight:600; color:var(--muted); background:var(--bg); border-radius:8px; padding:3px 10px; display:inline-block}

/* ---------- لافتات ---------- */
.banner{border-radius:var(--r); padding:11px 14px; font-size:13.5px; margin-bottom:6px; border:1px solid}
.banner.ok{background:var(--brand-soft); border-color:#cfe2ef; color:var(--brand)}
.banner.warn{background:var(--warn-soft); border-color:#f0dcae; color:var(--warn)}
.alert{background:var(--warn-soft); border:1px solid #f0dcae; color:var(--warn); border-radius:10px; padding:9px 12px; font-size:13.5px; margin:0 0 4px}

/* ---------- توزيع الصفحات ---------- */
.page-split{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px 15px; margin-top:12px; box-shadow:var(--shadow)}
.split-row{display:grid; grid-template-columns:110px 1fr auto 52px; align-items:center; gap:10px; padding:7px 0}
.split-row+.split-row{border-top:1px solid var(--line)}
.split-name{font-size:14px}
.split-bar{background:var(--bg); border-radius:99px; height:8px; overflow:hidden}
.split-bar i{display:block; height:100%; background:var(--brand); border-radius:99px}
.split-val{font-variant-numeric:tabular-nums; font-weight:600; font-size:14px}
.split-pct{color:var(--muted); font-size:13px; text-align:end}

/* ---------- قيد التجهيز ---------- */
.soon-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:48px 20px; text-align:center; box-shadow:var(--shadow)}
.soon-mark{font-size:34px; color:var(--muted)}
.soon-box h2{margin:10px 0 6px; font-size:18px}
.soon-box p{margin:0; color:var(--muted)}

/* ---------- تسجيل الدخول ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.login-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:30px 26px; width:100%; max-width:360px}
.login-mark{font-size:26px; color:var(--brand); text-align:center}
.login-card h1{font-size:19px; margin:8px 0 2px; text-align:center}
.login-sub{margin:0 0 16px; text-align:center; color:var(--muted); font-size:13px}
.login-card label{display:block; font-size:13px; color:var(--muted); margin-bottom:12px}
.login-card input{
  width:100%; font:inherit; margin-top:5px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink);
}
.login-card input:focus{outline:2px solid var(--brand-soft); border-color:var(--brand)}

/* ---------- الجوال ---------- */
@media (max-width:860px){
  .menu-btn{display:block}
  .shell{display:block}
  .sidebar{
    position:fixed; inset-block:53px 0; inset-inline-start:0; width:75%; max-width:280px;
    transform:translateX(100%); transition:transform .18s ease; z-index:25; border-inline-end:1px solid var(--line);
  }
  html[dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .content{padding:16px 14px 44px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .card-value{font-size:20px}
  .page-head h1{font-size:19px}
  .month-picker{margin-inline-start:0; width:100%}
  .month-picker select{flex:1}
  .split-row{grid-template-columns:90px 1fr auto; }
  .split-pct{display:none}
}