:root{
  --bg:#FAF6F0; --surface:#FFFFFF; --surface-2:#FDFAF6;
  --line:#E4DACB; --line-soft:#EFE7DA;
  --walnut:#6B4A2F; --walnut-dark:#54372233; --cream:#F7EFE3;
  --primary:#8A5A33; --primary-dark:#6E4527;
  --ok:#4F6B4A; --warn:#C8842B; --err:#A33A2C; --info:#3C6382;
  --ink:#2A211A; --ink-2:#6E655C; --ink-3:#9C9288;
  --r:10px; --r-sm:7px;
  --sh:0 1px 2px rgba(42,33,26,.06), 0 10px 26px -20px rgba(42,33,26,.5);
  --sh-lg:0 20px 60px -24px rgba(42,33,26,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;user-select:none}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.num,.mono,.money{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;letter-spacing:.02em}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:268px 1fr;height:100vh;height:100dvh}
.sidebar{
  background:var(--walnut); color:var(--cream);
  display:flex;flex-direction:column;min-height:0;
  border-inline-end:1px solid rgba(0,0,0,.15);
}
.brand{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.10)}
.brand-mark{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.10);display:grid;place-items:center;font-size:20px;border:1px solid rgba(255,255,255,.14)}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt strong{font-size:15px;font-weight:600;color:#FBF4E9}
.brand-txt span{font-size:11.5px;color:#CBB69C}
.nav{flex:1;overflow-y:auto;padding:10px 10px 16px;min-height:0}
.nav-group{margin-top:12px}
.nav-group:first-child{margin-top:2px}
.nav-group>span{display:block;font-size:10.5px;letter-spacing:.08em;color:#B59C7F;padding:6px 12px 4px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  background:transparent;border:0;color:#E6D8C6;padding:9px 12px;border-radius:8px;
  font-size:13.5px;transition:background .14s ease,color .14s ease;
}
.nav-item svg{width:17px;height:17px;opacity:.85;flex:none}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:#F7EFE3;color:#4A3220;font-weight:600}
.nav-item.active svg{opacity:1}
.side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.10)}
.who{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.who .dot{width:8px;height:8px;border-radius:50%;background:#9BC08F;box-shadow:0 0 0 3px rgba(155,192,143,.2);flex:none}
.who div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.who strong{font-size:12.5px;color:#FBF4E9;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{font-size:11px;color:#C0A98D}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.topbar{
  height:56px;flex:none;display:flex;align-items:center;gap:12px;
  padding:0 18px;background:var(--surface);border-bottom:1px solid var(--line);
}
.topbar-title{font-size:16px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;gap:8px;align-items:center}
.pill{font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);padding:4px 10px;border-radius:999px;white-space:nowrap}
.pill.subtle{background:transparent}
.menu-btn{display:none}
.view{flex:1;overflow:auto;padding:20px 22px 48px;min-height:0;scroll-behavior:smooth}
.loading{padding:40px;text-align:center;color:var(--ink-3)}

/* ---------- page ---------- */
.page{max-width:1440px;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.page-head .sub{margin:3px 0 0;color:var(--ink-2);font-size:12.5px;max-width:70ch}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--primary);color:#fff;border:1px solid var(--primary);
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;
  transition:background .14s ease,border-color .14s ease,transform .08s ease;
  min-height:36px;
}
.btn:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:#D6C8B4}
.btn.danger{background:var(--err);border-color:var(--err)}
.btn.danger:hover{background:#8C3125;border-color:#8C3125}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.ok:hover{background:#435C3F;border-color:#435C3F}
.btn.sm{padding:5px 10px;font-size:12px;min-height:30px;border-radius:7px}
.btn.w-full{width:100%}
.icon-btn{background:transparent;border:1px solid transparent;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-head{padding:14px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-head h3{margin:0;font-size:14px;font-weight:600}
.card-body{padding:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.stat .lbl{font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.stat .val{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .hint{font-size:11px;color:var(--ink-3);margin-top:4px}
.stat.ok .val{color:var(--ok)}
.stat.warn .val{color:var(--warn)}
.stat.err .val{color:var(--err)}

/* ---------- table ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{
  background:var(--surface-2);text-align:start;padding:9px 12px;font-weight:600;font-size:11.5px;
  color:var(--ink-2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;white-space:nowrap;
}
.tbl tbody td{padding:8px 12px;border-bottom:1px solid var(--line-soft);height:40px;vertical-align:middle}
.tbl tbody tr:nth-child(even){background:#FCFAF6}
.tbl tbody tr:hover{background:#F7F1E7}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num-col{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{padding:10px 12px;font-weight:600;background:var(--surface-2);border-top:1px solid var(--line)}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:999px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.chip.ok{background:#EDF2EA;color:#3F5A3A;border-color:#D6E2D0}
.chip.warn{background:#FBF1DF;color:#9A6415;border-color:#F0DFC0}
.chip.err{background:#F8E9E6;color:#8E3123;border-color:#EFD2CC}
.chip.info{background:#E9EFF4;color:#2F5270;border-color:#D3E0EB}
.chip.neutral{background:#F2EEE8;color:#6E655C;border-color:#E6DED3}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>label{font-size:12px;color:var(--ink-2);font-weight:500}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;
  font-size:13.5px;min-height:38px;transition:border-color .14s,box-shadow .14s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(138,90,51,.13);
}
.field input[type=number]{font-variant-numeric:tabular-nums}
.field .hint{font-size:11px;color:var(--ink-3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters input,.filters select{border:1px solid var(--line);border-radius:8px;padding:7px 11px;background:#fff;min-height:36px;font-size:13px}
.search{min-width:220px;flex:1;max-width:340px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:9px 14px;font-size:13px;color:var(--ink-2);white-space:nowrap;border-radius:6px 6px 0 0}
.tab:hover{background:var(--surface-2);color:var(--ink)}
.tab.active{border-bottom-color:var(--primary);color:var(--primary);font-weight:600}

/* ---------- modal ---------- */
#modalRoot{position:fixed;inset:0;z-index:120;display:none}
#modalRoot.open{display:block}
.modal-wrap{position:absolute;inset:0;background:rgba(42,33,26,.42);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal{
  background:var(--surface);border-radius:14px;box-shadow:var(--sh-lg);width:100%;max-width:560px;
  max-height:92vh;display:flex;flex-direction:column;border:1px solid var(--line);
  animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal.md{max-width:680px}.modal.lg{max-width:920px}.modal.xl{max-width:1120px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.modal-head h3{margin:0;font-size:15px;font-weight:600}
.modal-body{padding:18px;overflow:auto;flex:1;min-height:0}
.modal-foot{padding:12px 18px;border-top:1px solid var(--line-soft);display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap;background:var(--surface-2);border-radius:0 0 14px 14px}

/* ---------- toast ---------- */
.toast-root{position:fixed;inset-inline:0;bottom:0;z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;pointer-events:none}
.toast{background:#2A211A;color:#FBF4E9;padding:10px 16px;border-radius:10px;font-size:13px;box-shadow:var(--sh-lg);max-width:92vw;animation:up .2s ease-out}
.toast.err{background:var(--err)}
.toast.ok{background:var(--ok)}
.toast.warn{background:var(--warn);color:#241a0e}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- misc ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line-soft);font-size:13px}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--ink-2)}
.kv strong{font-variant-numeric:tabular-nums}
.section-note{background:#FBF4E9;border:1px solid #EFDFC7;color:#7A5B33;border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:14px;line-height:1.6}
.section-note.error{background:#F8E9E6;border-color:#EFD2CC;color:#8E3123}
.tree-row{display:flex;gap:8px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line-soft);font-size:13px}
.tree-row.grp{font-weight:600;background:var(--surface-2)}
.tree-row .code{font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-2);min-width:52px}
.totals-box{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px}
.totals-box .kv strong{font-size:13.5px}
.big-total{font-size:16px;font-weight:700;color:var(--walnut)}
.file-drop{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;background:var(--surface-2);color:var(--ink-2);font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}
.file-drop:hover{border-color:var(--primary);background:#FCF7F0}
.mini{font-size:11.5px;color:var(--ink-3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2);margin-top:10px}
.sub-head{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.attach-thumb{max-width:100%;border:1px solid var(--line);border-radius:8px;margin-top:8px}

/* ---------- print ---------- */
#printArea{display:none}
@media print{
  body{overflow:visible;background:#fff}
  .shell,.toast-root,#modalRoot{display:none !important}
  #printArea{display:block !important;padding:0}
  .print-doc{font-family:'IBM Plex Sans Arabic',sans-serif;color:#000;padding:16px 22px;direction:rtl}
  .print-doc h1{font-size:20px;margin:0 0 2px}
  .print-doc .p-head{display:flex;justify-content:space-between;border-bottom:2px solid #333;padding-bottom:10px;margin-bottom:14px}
  .print-doc table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
  .print-doc th,.print-doc td{border:1px solid #999;padding:6px 8px;text-align:start}
  .print-doc th{background:#f0ebe3}
  .print-doc .tot{margin-inline-start:auto;width:290px;margin-top:10px}
  .print-doc .tot div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #ccc}
  .print-doc .tot div:last-child{border-bottom:0;font-weight:700;font-size:14px;padding-top:8px}
}

/* ---------- mobile ---------- */
.backdrop{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;top:auto;
    height:auto;max-height:82vh;border-radius:16px 16px 0 0;z-index:110;
    transform:translateY(102%);transition:transform .26s cubic-bezier(.3,.8,.4,1);
    box-shadow:0 -12px 40px -16px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:none}
  .backdrop{display:block;position:fixed;inset:0;background:rgba(42,33,26,.4);z-index:105;opacity:0;pointer-events:none;transition:opacity .2s}
  .backdrop.show{opacity:1;pointer-events:auto}
  .menu-btn{display:grid}
  .view{padding:14px 14px 60px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .topbar{padding:0 12px;height:52px}
  .page-head h1{font-size:17px}
  .tbl thead th,.tbl tbody td{padding:7px 9px}
  #todayPill{display:none}
  .modal-wrap{padding:8px;align-items:flex-end}
  .modal{max-height:94vh;border-radius:14px 14px 10px 10px}
}
@media (max-width:430px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .stat .val{font-size:17px}
  .page-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- التقارير ومراكز التكلفة ---------- */
.rep-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:14px;box-shadow:var(--sh)}
.rep-bar input[type=date]{border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff;min-height:34px;font-size:13px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12.5px}
.bar-lbl{width:150px;flex:none;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;height:10px;background:#F0E8DC;border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--primary);border-radius:999px;transition:width .3s ease}
.bar-fill.ok{background:var(--ok)}
.bar-fill.err{background:var(--err)}
.bar-fill.info{background:var(--info)}
.bar-val{width:100px;text-align:end;font-variant-numeric:tabular-nums;color:var(--ink)}
.alloc-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line-soft)}
.alloc-row .cc-amt{width:110px;text-align:end}
.chk{display:flex;align-items:center;gap:6px;flex:1;font-size:13px;cursor:pointer;user-select:none}
.chk input{width:18px;height:18px;accent-color:var(--primary)}
#aiLines input{border:1px solid var(--line);border-radius:7px;padding:5px 8px;background:#fff;width:100%}
#aiLines input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(138,90,51,.13)}
@media (max-width:640px){
  .bar-lbl{width:92px}
  .bar-val{width:74px}
  .rep-bar .btn{flex:1}
}