/* ===== حسابات إيوان — نظام التصميم =====
   الطابع: دفتر أستاذ محاسبي (greenbar) + نحاس الأثاث. */
:root{
  --ink:#16242F; --ink-2:#3D5163; --ink-3:#7A8B99;
  --paper:#F1F3EF; --card:#FFFFFF; --bar:#E8EDE5; --rule:#D3D9CF;
  --brass:#9A7B3F; --brass-soft:#F0E6D2;
  --stamp:#A8342A; --stamp-soft:#F7E4E1;
  --posted:#2F6B4F; --posted-soft:#E1EFE7;
  --r:4px; --nav:246px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  background:var(--paper); color:var(--ink); direction:rtl;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
a{color:var(--ink); text-decoration:none}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.015em}
h1{font-size:22px}
h2{font-size:17px}

/* ---------- الهيكل ---------- */
.shell{display:flex; min-height:100vh}
.nav{
  width:var(--nav); flex:0 0 var(--nav); background:var(--ink); color:#DCE3E8;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:22px 0;
}
.brand{padding:0 22px 20px; border-bottom:1px solid rgba(255,255,255,.09); margin-bottom:14px}
.brand b{display:block; color:#fff; font-size:17px; font-weight:600}
.brand span{font-size:12px; color:#7E93A3}
.nav a{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 22px; color:#B8C6D1; font-size:14.5px; border-right:3px solid transparent}
.nav a:hover{background:rgba(255,255,255,.05); color:#fff}
.nav a.on{background:rgba(255,255,255,.08); color:#fff; border-right-color:var(--brass); font-weight:500}
.nav .sec{color:#63798A; font-size:12px; padding:18px 22px 6px}
.nav .pill{background:var(--stamp); color:#fff; border-radius:20px; padding:0 7px; font-size:11.5px; min-width:19px; text-align:center}
.nav .pill.q{background:var(--brass)}
.nav-foot{padding:16px 22px; margin-top:10px; border-top:1px solid rgba(255,255,255,.09); font-size:13px; color:#8FA2B0}

.main{flex:1; min-width:0; padding:26px 30px 60px}
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.top .sub{color:var(--ink-3); font-size:13.5px; margin-top:3px}

/* ---------- بطاقات ---------- */
.card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r)}
.card>header{padding:13px 16px; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:10px}
.card>.body{padding:16px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- القاصة: صفحة دفتر ---------- */
.ledger{display:flex; background:var(--card); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden}
.ledger .side{flex:1; padding:20px 22px; position:relative}
.ledger .side+.side{border-right:1px solid var(--rule)}
.ledger .lbl{font-size:13px; color:var(--ink-3)}
.ledger .val{font-size:32px; font-weight:600; margin-top:6px; line-height:1.15}
.ledger .val small{font-size:14px; font-weight:400; color:var(--ink-3)}
.ledger .meta{font-size:12.5px; color:var(--ink-3); margin-top:8px}
.ledger .side.res{background:var(--brass-soft)}

.stat{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:14px 16px}
.stat .k{font-size:12.5px; color:var(--ink-3)}
.stat .v{font-size:23px; font-weight:600; margin-top:4px}
.stat .n{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.stat.alert{border-color:#E3B7B1; background:var(--stamp-soft)}
.stat.alert .v{color:var(--stamp)}
.stat.good{border-color:#BBD8C7; background:var(--posted-soft)}
.stat.good .v{color:var(--posted)}

/* ---------- جداول دفترية ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:right; font-weight:500; font-size:12.5px; color:var(--ink-3);
   padding:9px 12px; border-bottom:1px solid var(--rule); background:#FAFBF9; white-space:nowrap}
td{padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
tbody tr:nth-child(even){background:var(--bar)}
tbody tr:hover{background:#F6F3E9}
.t-wrap{overflow-x:auto}
td.l,th.l{text-align:left}
.empty{padding:34px 16px; text-align:center; color:var(--ink-3); font-size:14px}
.empty b{display:block; color:var(--ink); font-weight:500; margin-bottom:4px}

/* ---------- وسوم ---------- */
.tag{display:inline-block; font-size:12px; padding:2px 8px; border-radius:3px; border:1px solid transparent; white-space:nowrap}
.tag.wait{background:var(--stamp-soft); color:var(--stamp); border-color:#E8C7C2}
.tag.done{background:var(--posted-soft); color:var(--posted); border-color:#C3DCCE}
.tag.mid{background:var(--brass-soft); color:#7A5F2C; border-color:#E3D3B2}
.tag.mute{background:#EDEFEC; color:var(--ink-2); border-color:var(--rule)}

/* ---------- نماذج ---------- */
label{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:5px}
input,select,textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  padding:8px 11px; border:1px solid #C8CFC4; border-radius:3px; background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass); outline-offset:-1px; border-color:var(--brass)}
input[type=checkbox]{width:auto}
.f{margin-bottom:12px}
.frow{display:grid; gap:12px}
.btn{display:inline-block; font-family:inherit; font-size:14px; padding:8px 16px; border-radius:3px;
  border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer}
.btn:hover{background:#0E1A23}
.btn.sec{background:#fff; color:var(--ink)}
.btn.sec:hover{background:#EFF1ED}
.btn.brass{background:var(--brass); border-color:var(--brass)}
.btn.brass:hover{background:#836728}
.btn.sm{padding:4px 10px; font-size:13px}
.btn.danger{background:var(--stamp); border-color:var(--stamp)}
.btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px}

.flash{padding:11px 15px; border-radius:3px; margin-bottom:18px; font-size:14px}
.flash.ok{background:var(--posted-soft); color:var(--posted); border:1px solid #C3DCCE}
.flash.err{background:var(--stamp-soft); color:var(--stamp); border:1px solid #E8C7C2}

/* ---------- شريط تقدّم الهدف ---------- */
.bar{height:9px; background:#E6E9E3; border-radius:2px; position:relative; overflow:hidden}
.bar i{display:block; height:100%; background:var(--posted)}
.bar i.low{background:var(--stamp)} .bar i.mid{background:var(--brass)}
.bar u{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); opacity:.55}
.goal{padding:14px 16px; border-bottom:1px solid var(--rule)}
.goal:last-child{border-bottom:0}
.goal .g-top{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:7px}
.goal .g-n{font-weight:500}
.goal .g-f{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-3); margin-top:6px}

/* ---------- قائمة المهام ---------- */
.task{display:flex; gap:12px; align-items:flex-start; padding:11px 16px; border-bottom:1px solid var(--rule)}
.task:last-child{border-bottom:0}
.task.late{background:var(--stamp-soft)}
.task .tt{font-weight:500}
.task .td{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.task form{margin:0}
.chk{width:17px; height:17px; border:1.5px solid var(--ink-3); border-radius:3px; background:#fff; cursor:pointer; flex:0 0 auto; margin-top:3px}
.chk:hover{border-color:var(--posted); background:var(--posted-soft)}

.spark{display:flex; align-items:flex-end; gap:3px; height:64px}
.spark div{flex:1; background:var(--ink-3); border-radius:1px 1px 0 0; min-height:1px}
.spark div.in{background:var(--posted)} .spark div.out{background:var(--brass)}

.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.filters .f{margin:0; min-width:130px}
.muted{color:var(--ink-3)}
.right{text-align:left}
details.addbox{margin-bottom:16px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r)}
details.addbox>summary{padding:12px 16px; cursor:pointer; font-weight:500; list-style:none}
details.addbox>summary::-webkit-details-marker{display:none}
details.addbox>summary::before{content:"＋ "; color:var(--brass)}
details.addbox[open]>summary{border-bottom:1px solid var(--rule)}
details.addbox .body{padding:16px}

/* ---------- موبايل ---------- */
.navtog{display:none}
@media (max-width:900px){
  .g4,.g3,.g2{grid-template-columns:1fr 1fr}
  .ledger{flex-direction:column}
  .ledger .side+.side{border-right:0; border-top:1px solid var(--rule)}
  .shell{flex-direction:column}
  .nav{position:static; width:100%; height:auto; padding:12px 0; display:none}
  .nav.open{display:block}
  .navtog{display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--ink); color:#fff; padding:12px 16px; position:sticky; top:0; z-index:9}
  .navtog button{background:none; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:3px; padding:5px 11px; font-family:inherit}
  .main{padding:16px}
  .ledger .val{font-size:27px}
}
@media (max-width:560px){ .g4,.g3,.g2{grid-template-columns:1fr} }
@media print{ .nav,.navtog,.btn,.filters{display:none} body{background:#fff} }