:root{
  --ink:#182a3d;
  --ink-soft:#3c5166;
  --paper:#f7f3ea;
  --paper-card:#ffffff;
  --line:#e3ddcd;
  --paid:#1f7a5c;
  --paid-bg:#e7f5ef;
  --pending:#b9762f;
  --pending-bg:#fdf1e2;
  --egp:#0e8f74;
  --usd:#d1543a;
  --sar:#c9962b;
  --jod:#6a52b3;
  --egp-bg:#e6f6f1;
  --usd-bg:#fdece8;
  --sar-bg:#fbf2df;
  --jod-bg:#f0ecfa;
  --danger:#c0392b;
}
*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
body{
  font-family:'Tajawal',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
}
.mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
button{font-family:inherit; cursor:pointer;}

/* ---- money value: shows active currency, hover/focus = كل العملات ---- */
.m{
  white-space:nowrap; cursor:help;
  border-bottom:1px dotted rgba(120,120,120,.5);
}
.m:focus{outline:2px solid var(--egp-bg); outline-offset:1px; border-radius:3px;}
.m-tip{
  position:fixed; z-index:200; display:none;
  background:var(--ink); color:#f4efe2; border-radius:10px; padding:9px 12px;
  font-size:.78rem; font-family:'IBM Plex Mono',monospace; line-height:1.7;
  box-shadow:0 10px 34px rgba(0,0,0,.32); pointer-events:none;
}
.m-tip span{display:block; white-space:nowrap;}
.m-tip .mt-nat{
  font-family:'Tajawal',sans-serif; color:#c9d6a8; font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:4px; padding-bottom:4px;
}

/* ================= LOGIN ================= */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(160deg,var(--ink) 0%, #223a52 60%, #2b4863 100%);}
.login-card{
  background:var(--paper-card); border-radius:18px; padding:32px 28px; width:100%; max-width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center;
}
.login-logo{display:block; width:132px; height:132px; object-fit:contain; margin:0 auto -8px;}
.login-card h1{font-size:1.15rem; font-weight:900; margin:8px 0 4px;}
.login-sub{font-size:.82rem; color:var(--ink-soft); margin-bottom:20px;}
.login-card .field{text-align:right;}
.login-card .btn{width:100%; justify-content:center; margin-top:6px; padding:11px;}
.login-err{
  background:#fbe4e1; color:var(--danger); font-size:.82rem; font-weight:700;
  padding:8px 12px; border-radius:8px; margin-bottom:12px;
}

/* ================= APP SHELL ================= */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh;}

.sidebar{
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  background:var(--ink); color:#e9e2d2;
  display:flex; flex-direction:column; gap:4px; padding:18px 14px;
}
.sb-brand{display:flex; gap:10px; align-items:center; padding:4px 8px 14px;}
.sb-logo{display:block; width:54px; height:54px; object-fit:contain; flex:0 0 54px;}
.sb-name{font-weight:900; font-size:1.05rem;}
.sb-sub{font-size:.68rem; color:#9fb0bf;}
.cur-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  margin:0 4px 12px; padding:4px; background:rgba(255,255,255,.05); border-radius:10px;
}
.cur-switch button{
  background:transparent; border:none; color:#aab8c4;
  font-size:.76rem; font-weight:800; padding:6px 4px; border-radius:7px; white-space:nowrap;
}
.cur-switch button:hover{background:rgba(255,255,255,.08); color:#fff;}
.cur-switch button.active{background:#f4efe2; color:var(--ink);}

.sb-nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.sb-link{
  display:flex; align-items:center; gap:10px; width:100%; text-align:right;
  background:transparent; border:none; color:#cdd7e0; font-size:.9rem; font-weight:700;
  padding:10px 12px; border-radius:10px; transition:background .12s, color .12s;
}
.sb-link .i{font-size:1rem;}
.sb-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sb-link.active{background:#f4efe2; color:var(--ink);}
.sb-months{
  display:none; flex-direction:column; gap:1px; margin:2px 4px 6px;
  padding-inline-start:8px; border-inline-start:2px solid rgba(255,255,255,.12);
}
.sb-months.show{display:flex;}
.sb-month{
  display:flex; align-items:center; gap:7px; width:100%; text-align:right;
  background:transparent; border:none; color:#aab8c4; font-size:.75rem; font-weight:600;
  padding:6px 8px; border-radius:8px;
}
.sb-month .m-t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sb-month .m-v{font-family:'IBM Plex Mono',monospace; font-size:.66rem; opacity:.85;}
.sb-month:hover{background:rgba(255,255,255,.06); color:#fff;}
.sb-month.active{background:rgba(255,255,255,.13); color:#fff;}
.sb-foot{
  border-top:1px solid rgba(255,255,255,.12); padding:12px 8px 2px;
  display:grid; grid-template-columns:1fr auto; gap:3px 8px; align-items:baseline;
  font-size:.72rem; color:#9fb0bf;
}
.sb-foot-v{font-size:.9rem; font-weight:800; color:#f4efe2; text-align:end; font-family:'IBM Plex Mono',monospace;}
.sb-foot-v.paid{color:#8fd6b4;}
.sb-user{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.75rem; color:#aab8c4;
}
.sb-user button{
  background:rgba(255,255,255,.08); border:none; color:#e9e2d2;
  font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:7px;
}
.sb-user button:hover{background:rgba(255,255,255,.16);}

.main{padding:26px clamp(16px,4vw,40px) 90px; max-width:1120px; width:100%;}
.view{display:none;}
.view.active{display:block; animation:viewin .18s ease;}
@keyframes viewin{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.view-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.view-head h1{font-size:1.5rem; font-weight:900;}
.view-head p{font-size:.85rem; color:var(--ink-soft); width:100%;}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px;}
.kpi{background:var(--paper-card); border:1px solid var(--line); border-radius:14px; padding:15px 16px;}
.kpi-v{font-size:1.5rem; font-weight:900;}
.kpi-l{font-size:.73rem; color:var(--ink-soft); font-weight:700; margin-top:2px;}
.kpi.ok .kpi-v{color:var(--paid);}
.kpi.warn .kpi-v{color:var(--pending);}

.panel{background:var(--paper-card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px;}
.panel h2{font-size:1.02rem; font-weight:800; margin-bottom:14px;}
.panel h2 .h2-note{font-size:.68rem; font-weight:600; color:var(--ink-soft);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}
.btn.sm{padding:5px 11px; font-size:.74rem; border-radius:7px;}

/* payments log table */
table.paytab{width:100%; min-width:640px; border-collapse:collapse; font-size:.82rem;}
table.paytab th{text-align:right; font-size:.68rem; color:var(--ink-soft); font-weight:700; padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap;}
table.paytab td{padding:9px 8px; border-bottom:1px solid #f1ede2; vertical-align:middle;}
table.paytab td.lbl{font-weight:700;}
table.paytab td.mono{font-family:'IBM Plex Mono',monospace; font-weight:700; white-space:nowrap;}
table.paytab td.dim{color:var(--ink-soft); font-size:.76rem;}
table.paytab td.rowacts{white-space:nowrap; text-align:end;}

.out-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid #f1ede2; font-size:.82rem;}
.out-row:last-child{border-bottom:none;}
.out-row .lbl{font-weight:700;}
.out-row .dim{color:var(--ink-soft); font-size:.76rem;}
.out-row .mono{font-family:'IBM Plex Mono',monospace; margin-inline-start:auto; white-space:nowrap;}

.head-btns{display:flex; gap:8px; flex-wrap:wrap;}

/* teams / branches grouping */
.team-group{margin-bottom:22px;}
.team-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 4px 10px; margin-bottom:8px; border-bottom:2px solid var(--line);
}
.th-name{font-size:1.05rem; font-weight:900;}
.th-count{
  font-size:.68rem; font-weight:800; color:var(--ink-soft);
  background:var(--paper-card); border:1px solid var(--line); border-radius:999px; padding:1px 8px; margin-inline-start:4px;
}
.th-acts{display:flex; gap:2px;}
.th-tot{margin-inline-start:auto; font-size:.76rem; color:var(--ink-soft); white-space:nowrap;}
.th-tot b.neg{color:var(--pending);}
.th-tot b.pos{color:var(--paid);}

/* employees / payers cards */
.emp-card{background:var(--paper-card); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden;}
.emp-card > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:13px 16px; font-weight:700;
}
.emp-card > summary::-webkit-details-marker{display:none;}
.ec-name{display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:.95rem;}
.ec-team{font-size:.66rem; font-weight:700; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); padding:1px 7px; border-radius:6px;}
.ec-bal{font-family:'IBM Plex Mono',monospace; font-weight:800; font-size:.85rem; white-space:nowrap; color:var(--ink-soft);}
.ec-bal.neg{color:var(--pending);}   /* لسه له فلوس */
.ec-bal.pos{color:var(--paid);}      /* مدفوع زيادة */
.emp-card > summary .ec-acts{display:flex; gap:2px; opacity:0; transition:opacity .15s;}
.emp-card > summary:hover .ec-acts{opacity:1;}
.emp-card > summary .chev{color:var(--ink-soft); font-size:.75rem; transform:rotate(-90deg); transition:transform .2s;}
.emp-card[open] > summary .chev{transform:rotate(0);}
.ec-body{padding:6px 16px 16px; border-top:1px dashed var(--line);}
.emp-tag{font-size:.72rem; background:var(--jod-bg); color:var(--jod); padding:1px 7px; border-radius:6px; margin-inline-start:6px;}
table.paytab td.mono.neg{color:var(--pending);}
table.paytab td.mono.pos{color:var(--paid);}
table.paytab td.mono.strong{font-weight:800; color:var(--ink);}
table.paytab tfoot .total-row td{border-top:2px solid var(--line); border-bottom:none; font-weight:800; padding-top:10px;}

.rate-grid{display:flex; flex-direction:column; gap:10px; margin-bottom:14px; max-width:340px;}
.rate-cell{display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600;}
.rate-cell span{flex:1;}
.rate-cell input{width:110px; border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-family:'IBM Plex Mono',monospace; background:var(--paper);}

.sb-toggle{display:none;}
.sb-backdrop{display:none;}

@media(max-width:900px){
  .app{grid-template-columns:1fr;}
  .sidebar{
    position:fixed; inset:0 0 0 auto; width:264px; z-index:60;
    transform:translateX(100%); transition:transform .22s ease;
  }
  .sidebar.open{transform:translateX(0); box-shadow:-12px 0 40px rgba(0,0,0,.25);}
  .sb-backdrop.show{display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55;}
  .sb-toggle{
    display:flex; position:fixed; top:12px; right:12px; z-index:50;
    width:42px; height:42px; align-items:center; justify-content:center;
    background:var(--ink); color:#f4efe2; border:none; border-radius:10px; font-size:1.15rem;
  }
  .main{padding-top:64px;}
}

/* ===== HERO ===== */
.hero{
  background:linear-gradient(160deg,var(--ink) 0%, #223a52 60%, #2b4863 100%);
  color:#f4efe2;
  padding:56px 24px 44px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 85% 15%, rgba(244,239,226,.08), transparent 45%),
                    radial-gradient(circle at 10% 90%, rgba(244,239,226,.06), transparent 40%);
  pointer-events:none;
}
.hero-inner{max-width:1000px; margin:0 auto; position:relative; z-index:1;}
.eyebrow{
  font-size:.8rem; letter-spacing:.04em; color:#c9d6a8; font-weight:700;
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#c9d6a8;}
h1{font-size:2.1rem; font-weight:900; margin-bottom:8px;}
.hero p.sub{color:#c7d2de; font-size:1rem; font-weight:400; max-width:60ch; margin-bottom:32px;}

.hero-total{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.hero-total .big{font-size:3rem; font-weight:900; font-family:'IBM Plex Mono',monospace;}
.hero-total .cur{font-size:1.1rem; color:#c9d6a8; font-weight:700;}

.hero-mini{display:flex; gap:10px; flex-wrap:wrap; align-items:stretch;}
.hmini{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:10px 16px; min-width:120px;
}
.hmini .l{font-size:.72rem; color:#a9b8c6; margin-bottom:4px; display:flex; justify-content:space-between; gap:8px; align-items:center;}
.hmini .v{font-size:1.15rem; font-weight:700; font-family:'IBM Plex Mono',monospace;}
.hmini input.rate-input{
  width:64px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius:6px; color:#f4efe2; font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  padding:1px 4px; text-align:center;
}

/* ===== TOOLBAR ===== */
.toolbar{max-width:1000px; margin:24px auto 0; padding:0 24px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.toolbar .left{display:flex; gap:10px; flex-wrap:wrap;}
.btn{
  border:none; border-radius:9px; padding:9px 16px; font-size:.86rem; font-weight:700;
  background:var(--ink); color:#f4efe2; display:inline-flex; align-items:center; gap:6px;
  transition:transform .1s, opacity .15s;
}
.btn:hover{opacity:.9;}
.btn:active{transform:scale(.97);}
.btn.secondary{background:var(--paper-card); color:var(--ink); border:1px solid var(--line);}
.btn.danger{background:var(--danger); color:#fff;}
.btn.ghost{background:transparent; color:var(--ink-soft); border:1px dashed var(--line);}
.btn.sm{padding:5px 10px; font-size:.75rem; border-radius:7px;}

/* ===== TIMELINE ===== */
.timeline-wrap{max-width:1000px; margin:0 auto; padding:32px 24px 0; position:relative;}
.timeline-intro{margin-bottom:24px;}
.timeline-intro h2{font-size:1.3rem; font-weight:800; margin-bottom:6px;}
.timeline-intro p{color:var(--ink-soft); font-size:.92rem;}

.phase{position:relative; margin-bottom:16px; scroll-margin-top:14px;}

/* ---- accordion (collapsed by default) ---- */
.phase > summary{
  list-style:none; cursor:pointer;
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; margin-bottom:0; padding-top:14px;
  transition:border-color .15s, box-shadow .15s;
}
.phase > summary::-webkit-details-marker{display:none;}
.phase > summary:hover{border-color:#d4ccb6;}
.phase[open] > summary{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  box-shadow:0 1px 0 var(--line);
}
.phase-icon{margin-inline-end:2px;}
.phase-sum{
  font-weight:800; font-size:.95rem; color:var(--egp);
  background:var(--egp-bg); padding:4px 10px; border-radius:8px; white-space:nowrap;
}
.phase-sum .u{font-size:.72rem; font-weight:700;}
.phase-chev{color:var(--ink-soft); font-size:.85rem; transition:transform .2s;}
.phase[open] > summary .phase-chev{transform:rotate(180deg);}
.phase-body{
  border:1px solid var(--line); border-top:none;
  border-radius:0 0 14px 14px; padding:16px 18px 18px; background:var(--paper);
}

.phase-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.phase-head .titles{flex:1; min-width:220px;}
.phase-head h3{font-size:1.25rem; font-weight:800; display:flex; align-items:center; gap:8px;}
.phase-head .when{font-size:.8rem; color:var(--ink-soft); font-weight:600; margin-top:2px;}
.phase-head .head-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}

.status-chip{
  font-size:.78rem; font-weight:700; padding:6px 14px; border-radius:999px;
  border:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.status-chip.paid{background:var(--paid-bg); color:var(--paid);}
.status-chip.pending{background:var(--pending-bg); color:var(--pending);}

.phase-total{
  display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px;
  background:var(--paper-card); border:1px solid var(--line); border-radius:12px; padding:14px 18px;
}
.pt-item{display:flex; flex-direction:column; gap:2px; min-width:90px;}
.pt-item .l{font-size:.68rem; color:var(--ink-soft); font-weight:600;}
.pt-item .v{font-size:1.05rem; font-weight:800; font-family:'IBM Plex Mono',monospace;}
.pt-item.egp .v{color:var(--egp);}
.pt-item.usd .v{color:var(--usd);}
.pt-item.sar .v{color:var(--sar);}
.pt-item.jod .v{color:var(--jod);}
.pt-item.total .v{color:var(--ink);}

.card-grid{display:grid; gap:12px;}
.icard{
  background:var(--paper-card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.icard > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; font-weight:700; font-size:.95rem;
}
.icard > summary::-webkit-details-marker{display:none;}
.icard > summary .left-part{display:flex; align-items:center; gap:8px; flex:1; min-width:0;}
.icard > summary .left-part span.ttl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.icard > summary .chev{transition:transform .2s; color:var(--ink-soft); font-size:.8rem;}
.icard > summary .chev{transform:rotate(-90deg);}
.icard[open] > summary .chev{transform:rotate(0deg);}
.icard .s-amt{font-family:'IBM Plex Mono',monospace; font-weight:800; color:var(--egp); font-size:.92rem; white-space:nowrap;}
.icard .rows{padding:0 16px 14px; border-top:1px dashed var(--line);}
.exp-wrap{border-bottom:1px solid #f1ede2;}
.exp-wrap:last-child{border-bottom:none;}
.irow2{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; font-size:.88rem; border-bottom:1px solid #f1ede2;}
.irow2:last-child{border-bottom:none;}
.exp-wrap .irow2{border-bottom:none;}

/* ---- دفعات المصروف ---- */
.pay-block{padding:0 0 8px 2px;}
.pay-block.empty{padding-bottom:6px;}
.pay-add-link{
  background:none; border:none; color:var(--ink-soft); font-size:.72rem;
  text-decoration:underline dotted; text-underline-offset:2px; padding:2px 0;
}
.pay-add-link:hover{color:var(--egp);}
.pay-summary{
  font-size:.74rem; font-weight:700; color:var(--pending);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px;
}
.pay-block.done .pay-summary{color:var(--paid);}
.pay-tag{background:var(--pending-bg); color:var(--pending); padding:1px 7px; border-radius:6px; font-size:.7rem; font-weight:700;}
.pay-tag.ok{background:var(--paid-bg); color:var(--paid);}
.pay-list{display:flex; flex-direction:column; gap:3px; margin-bottom:5px;}
.pay-item{
  display:flex; align-items:center; gap:10px; font-size:.76rem; color:var(--ink-soft);
  padding:4px 8px; background:var(--paper); border-radius:6px;
}
.pay-item .pay-amt{font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--ink); white-space:nowrap;}
.pay-item .pay-when{white-space:nowrap;}
.pay-item .pay-note{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.75;}
.pay-item .pay-acts{margin-inline-start:auto; display:flex; gap:2px; opacity:0; transition:opacity .15s;}
.pay-item:hover .pay-acts{opacity:1;}
.add-row-btn.sm{width:auto; padding:3px 12px; font-size:.72rem;}

/* ---- شهر مستبعد من الإجمالي ---- */
.phase.excluded > summary{opacity:.6;}
.phase.excluded .phase-sum{text-decoration:line-through; opacity:.7;}
.excl-badge{
  display:inline-block; margin-inline-start:8px; padding:1px 8px; border-radius:6px;
  background:#eee4e2; color:var(--danger); font-size:.68rem; font-weight:800;
}
.sb-month.excluded{opacity:.5;}
.sb-month.excluded .m-t{text-decoration:line-through;}
table.sumtab tr.excluded td{opacity:.55; text-decoration:line-through;}
table.sumtab tr.excluded td.lbl{text-decoration:none;}
.tag-mini{
  text-decoration:none; display:inline-block; font-family:'Tajawal',sans-serif;
  font-size:.62rem; font-weight:800; color:var(--danger);
  background:#eee4e2; padding:0 6px; border-radius:5px; vertical-align:middle;
}
.check-row{
  display:flex; align-items:flex-start; gap:8px; font-size:.82rem; font-weight:600;
  color:var(--ink-soft); margin-bottom:16px; line-height:1.4; cursor:pointer;
}
.check-row input{width:auto; flex-shrink:0; margin-top:3px;}
.irow2 .nm{color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis;}
.irow2 .nm .payer-tag{font-size:.72rem; background:var(--sar-bg); color:#8a6a1a; padding:1px 6px; border-radius:6px; margin-inline-start:6px;}
.irow2 .vl{font-family:'IBM Plex Mono',monospace; font-weight:700; white-space:nowrap;}
.irow2 .row-actions{display:flex; gap:4px; opacity:0; transition:opacity .15s;}
.irow2:hover .row-actions{opacity:1;}
.icon-btn{border:none; background:transparent; color:var(--ink-soft); font-size:.85rem; padding:2px 5px; border-radius:5px;}
.icon-btn:hover{background:var(--paper);}
.icon-btn.danger:hover{background:#fbe4e1; color:var(--danger);}

.note-line{
  margin-top:10px; padding:10px 12px; background:var(--pending-bg); border-radius:8px;
  font-size:.82rem; color:#8a5a1f; display:flex; gap:8px; align-items:flex-start;
}
.add-row-btn{
  margin-top:8px; font-size:.8rem; color:var(--ink-soft); background:none; border:1px dashed var(--line);
  border-radius:8px; padding:6px 10px; width:100%; text-align:center;
}
.add-row-btn:hover{background:var(--paper);}
.cat-footer{display:flex; justify-content:space-between; align-items:center; margin-top:2px; padding:0 16px 12px;}

/* ===== SUMMARY TABLE (on a light panel) ===== */
.sumtab-scroll{overflow-x:auto;}
table.sumtab{width:100%; min-width:460px; border-collapse:collapse; font-size:.88rem;}
table.sumtab th{text-align:right; color:var(--ink-soft); font-weight:700; font-size:.72rem; padding:6px 8px; border-bottom:1px solid var(--line);}
table.sumtab td{padding:9px 8px; border-bottom:1px solid #f1ede2; font-family:'IBM Plex Mono',monospace;}
table.sumtab td.lbl{font-family:'Tajawal',sans-serif; font-weight:700;}
table.sumtab td.rowtot{font-weight:800; color:var(--ink);}
table.sumtab th:nth-child(2), table.sumtab td.rowtot{border-inline-end:1px solid var(--line);}
table.sumtab tr.total-row td{font-weight:800; font-size:.98rem; border-top:2px solid var(--line); border-bottom:none; padding-top:12px;}
table.sumtab tr.total-row td:first-child{font-family:'Tajawal',sans-serif;}

.rates-note{color:var(--ink-soft); font-size:.76rem; margin-top:14px;}

/* ===== MODAL ===== */
.overlay{
  position:fixed; inset:0; background:rgba(24,42,61,.45); display:none;
  align-items:center; justify-content:center; z-index:50; padding:20px;
}
.overlay.open{display:flex;}
.modal{
  background:var(--paper-card); border-radius:16px; padding:24px; width:100%; max-width:420px;
  max-height:88vh; overflow-y:auto;
}
.modal h3{font-size:1.05rem; font-weight:800; margin-bottom:16px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:.8rem; color:var(--ink-soft); font-weight:700; margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font-family:inherit; font-size:.9rem; background:var(--paper);
}
.field textarea{resize:vertical; min-height:60px;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1; min-width:0;}

/* searchable combobox */
.combo{position:relative;}
.combo-input{
  width:100%; border:1px solid var(--line); border-radius:8px;
  padding:9px 11px 9px 28px; font-family:inherit; font-size:.9rem; background:var(--paper);
}
.combo-input:focus{outline:2px solid var(--egp-bg); border-color:var(--egp);}
.combo-caret{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:.68rem; color:var(--ink-soft); cursor:pointer; -webkit-user-select:none; user-select:none;
}
.combo-pop{
  position:absolute; z-index:20; inset-inline:0; top:calc(100% + 4px);
  background:var(--paper-card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 32px rgba(24,42,61,.18);
  max-height:min(220px, 42vh); overflow-y:auto; padding:4px;
}
.combo-pop.up{top:auto; bottom:calc(100% + 4px);}
.combo-opt{
  padding:8px 10px; border-radius:7px; font-size:.86rem; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.combo-opt:hover, .combo-opt.active{background:var(--paper);}
.combo-opt[hidden]{display:none;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#f4efe2; padding:10px 20px; border-radius:10px;
  font-size:.85rem; font-weight:700; z-index:80; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}
.toast.error{background:var(--danger);}

.empty-state{text-align:center; padding:40px 20px; color:var(--ink-soft);}

/* ===== SIDE DOCK (month shortcuts) ===== */
.dock{
  position:fixed; top:50%; right:10px; transform:translateY(-50%);
  z-index:40; display:flex; flex-direction:column; gap:6px;
  max-height:82vh; overflow-y:auto; padding:8px;
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 8px 30px rgba(24,42,61,.12);
}
.dock-title{font-size:.64rem; font-weight:800; color:var(--ink-soft); text-align:center; padding:2px 0 4px; letter-spacing:.03em;}
.dock-item{
  display:flex; align-items:center; gap:8px; width:100%;
  background:transparent; border:none; border-radius:10px;
  padding:7px 10px; text-align:right; color:var(--ink);
  transition:background .15s, color .15s;
}
.dock-item:hover{background:var(--paper);}
.dock-item.active{background:var(--ink); color:#f4efe2;}
.dock-item.active .di-amt{color:#c9d6a8;}
.di-icon{font-size:1.05rem; line-height:1; flex-shrink:0;}
.di-label{font-size:.78rem; font-weight:700; white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;}
.di-amt{font-size:.66rem; color:var(--ink-soft); margin-inline-start:auto; font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
.dock-sep{height:1px; background:var(--line); margin:4px 6px;}
.dock-top{justify-content:center;}
.dock-top .di-label{max-width:none;}

@media(max-width:1180px){
  .dock .di-label, .dock .di-amt, .dock-title{display:none;}
  .dock{right:8px; padding:6px; gap:4px;}
  .dock-item{padding:9px; justify-content:center;}
}
@media(max-width:680px){
  .dock{display:none;}
}

@media(max-width:640px){
  .hero-total .big{font-size:2.1rem;}
  h1{font-size:1.5rem;}
  .toolbar{flex-direction:column; align-items:stretch;}
}

/* ===== PRINT / PDF ===== */
@media print{
  .sidebar, .sb-toggle, .sb-backdrop, .toast, .overlay,
  .add-row-btn, .icon-btn, .cat-footer, .status-chip, .pay-add-link{display:none !important;}
  .pay-item{background:#f4f1e8 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  body{background:#fff;}
  .app{display:block;}
  .main{max-width:none; padding:16px;}
  .view{display:block !important;}   /* print every section */
  .view + .view{margin-top:24px; border-top:2px solid #ccc; padding-top:16px;}
  .panel{border-color:#ccc; padding:0; margin-bottom:14px;}
  .phase{break-inside:avoid; page-break-inside:avoid; margin-bottom:20px;}
  .phase > summary{border:none; border-radius:0; padding:0 0 6px; box-shadow:none;}
  .phase-chev, .phase-sum{display:none !important;}
  .phase-body{border:none; border-radius:0; padding:0; background:none;}
  .icard{break-inside:avoid; border-color:#ccc;}
  .icard .rows{display:block !important; border-top:1px dashed #ccc;}
  .icard > summary .chev{display:none;}
  .phase-total{background:#f4f1e8 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
}