:root{
  --primary:#1E40AF; --primary-dark:#1E3A8A; --secondary:#3B82F6; --secondary-soft:#93C5FD;
  --accent:#D97706; --bg:#F8FAFC; --surface:#FFFFFF; --muted:#E9EEF6; --border:#DBEAFE;
  --text:#0F172A; --text-muted:#475569; --ok:#047857;
  --shadow:0 1px 2px rgba(15,42,92,.06), 0 8px 24px rgba(15,42,92,.07);
  --radius:14px; --ff:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:0}
h1{font-size:clamp(1.05rem,1.5vw,1.3rem)}
h2{font-size:clamp(.98rem,1.2vw,1.1rem)}
h3{font-size:.95rem}
p{margin:0}
button,input,select{font-family:inherit; font-size:.9rem; color:inherit}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
main{max-width:1280px; margin:0 auto; padding:20px 20px 40px; display:flex; flex-direction:column; gap:18px}
main > section{animation:fadeUp .45s ease both}
main > section:nth-child(2){animation-delay:.05s}
main > section:nth-child(3){animation-delay:.1s}
main > section:nth-child(4){animation-delay:.15s}

.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:12px 20px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(15,42,92,.04);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,var(--primary),var(--secondary));
}
.brand-mark svg{width:20px; height:20px}
.brand p{font-size:.8rem; color:var(--text-muted)}
.topbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.src-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--primary-dark);
  background:var(--muted); border:1px solid var(--border); border-radius:999px; padding:5px 12px;
}
.src-badge svg{width:14px; height:14px}
.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; border-radius:10px;
  border:1px solid transparent; background:var(--primary); color:#fff; padding:8px 14px; font-weight:500;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(30,64,175,.24)}
.btn.ghost{background:var(--surface); color:var(--primary-dark); border-color:var(--border)}
.btn svg{width:16px; height:16px}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.kpi:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(15,42,92,.13)}
.kpi::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--k,var(--primary))}
.kpi-ico{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:8px;
  background:color-mix(in srgb, var(--k,var(--primary)) 12%, white); color:var(--k,var(--primary));
}
.kpi-ico svg{width:18px; height:18px}
.kpi-val{font-size:1.6rem; font-weight:700; line-height:1.2; color:var(--primary-dark)}
.kpi-lab{font-size:.82rem; color:var(--text-muted)}
.kpi-sub{font-size:.74rem; color:var(--text-muted); margin-top:2px}

.grid-two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:18px}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px 18px;
}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.hint{font-size:.76rem; color:var(--text-muted); background:var(--muted); border-radius:999px; padding:3px 10px}
.chart-box{position:relative; height:270px}
.chart-box.tall{height:320px}
.chart-box.sm{height:210px}

.select{
  border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:7px 12px;
  color:var(--primary-dark); cursor:pointer; transition:box-shadow .18s ease;
}
.select:hover{box-shadow:0 6px 14px rgba(15,42,92,.1)}
.unit-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:18px}
.unit-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start}
.stat{background:var(--muted); border-radius:12px; padding:10px 12px}
.stat b{display:block; font-size:1.25rem; color:var(--primary-dark); line-height:1.3}
.stat span{font-size:.78rem; color:var(--text-muted)}
.unit-needs h3{color:var(--primary-dark); margin-bottom:6px}
.unit-needs ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.unit-needs li{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 12px;
  font-size:.86rem; animation:fadeUp .3s ease both;
}
.unit-needs li b{color:var(--accent); font-weight:700}
.unit-needs li .empty{color:var(--text-muted)}

.filters{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.search{display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:7px 12px; flex:1 1 260px}
.search svg{width:16px; height:16px; color:var(--text-muted)}
.search input{border:0; background:transparent; outline:none; width:100%}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  border-radius:999px; padding:5px 12px; font-size:.78rem; transition:all .18s ease;
}
.chip:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,42,92,.1)}
.chip[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:#fff}

.table-wrap{max-height:430px; overflow:auto; border:1px solid var(--border); border-radius:12px}
table{width:100%; border-collapse:collapse; font-size:.86rem}
thead th{
  position:sticky; top:0; background:var(--primary-dark); color:#fff; text-align:right;
  padding:9px 12px; font-weight:500; z-index:2; white-space:nowrap;
}
tbody td{padding:8px 12px; border-bottom:1px solid var(--muted); vertical-align:top}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:#F1F6FF}
tbody tr.hit{background:#FFF7E6}
td.num{font-weight:700; color:var(--primary); white-space:nowrap}
td.idx{color:var(--text-muted); width:48px}
.tag{font-size:.74rem; border-radius:999px; padding:2px 9px; white-space:nowrap; display:inline-block}
mark{background:#FDE68A; border-radius:4px; padding:0 3px}

.note{
  display:flex; gap:10px; align-items:flex-start; background:var(--muted); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 16px; font-size:.82rem; color:var(--text-muted);
}
.note svg{width:16px; height:16px; flex:none; margin-top:4px; color:var(--primary)}
.toast{
  position:fixed; inset-block-end:20px; inset-inline-start:20px; z-index:60;
  background:var(--primary-dark); color:#fff; padding:10px 16px; border-radius:10px; font-size:.85rem;
  box-shadow:0 12px 28px rgba(15,42,92,.28); opacity:0; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.toast.on{opacity:1; transform:none}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

[data-theme="dark"]{
  --bg:#0B1220; --surface:#111C33; --muted:#17233D; --border:#243457;
  --text:#E8EEF9; --text-muted:#9DB0D0; --primary-dark:#BFD3FF; --secondary-soft:#1E40AF;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.35);
}
[data-theme="dark"] .topbar{background:rgba(11,18,32,.85)}
[data-theme="dark"] .btn{color:#0B1220}
[data-theme="dark"] .btn.ghost{background:var(--surface); color:var(--text)}
[data-theme="dark"] thead th{background:#16233F; color:#E8EEF9}
[data-theme="dark"] tbody tr:hover{background:#16233F}
[data-theme="dark"] tbody tr.hit{background:#3A2F12}
[data-theme="dark"] mark{background:#8A6A12; color:#fff}

@media (max-width:980px){
  .grid-two,.unit-body{grid-template-columns:1fr}
  .chart-box{height:240px}
}
@media (max-width:600px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .kpi-val{font-size:1.35rem}
  .search{flex-basis:100%}
  .unit-stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
@media print{
  .topbar-actions,.filters,.toast{display:none !important}
  body{background:#fff}
  .card,.kpi{box-shadow:none; break-inside:avoid}
  .table-wrap{max-height:none; overflow:visible}
}

/* ===== إضافات: نموذج الإضافة والتقارير ===== */
.card-head h2{display:inline-flex; align-items:center; gap:8px}
.card-head h2 svg{width:18px; height:18px; color:var(--primary)}
.panel-note{font-size:.85rem; color:var(--text-muted); margin-bottom:14px}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; align-items:start}
.field{display:flex; flex-direction:column; gap:6px}
.field > span:first-child{font-size:.8rem; color:var(--text-muted); font-weight:500}
.field.wide{grid-column:1/-1}
.field b{color:#DC2626}
.field input,.field select{
  width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); transition:box-shadow .18s ease, border-color .18s ease;
}
.field input:focus,.field select:focus{outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.field input:invalid:not(:placeholder-shown){border-color:#FCA5A5}
.checks{display:flex; flex-wrap:wrap; gap:10px 16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.checks label{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-muted); cursor:pointer}
.checks input{width:15px; height:15px; accent-color:var(--primary)}
.form-actions{grid-column:1/-1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px}
.form-msg{font-size:.82rem; color:var(--text-muted)}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:#B91C1C}
.file-btn{position:relative; overflow:hidden}
.file-btn input{position:absolute; inset:0; opacity:0; cursor:pointer}
.icon-btn{
  border:1px solid var(--border); background:var(--surface); border-radius:8px; cursor:pointer;
  width:28px; height:28px; display:grid; place-items:center; color:#B91C1C; transition:transform .15s ease, background .15s ease;
}
.icon-btn:hover{transform:translateY(-1px); background:#FEF2F2}
.icon-btn svg{width:14px; height:14px}
.log-wrap{max-height:340px; margin:6px 0 14px}
.log-wrap td{font-size:.85rem; white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis}
.empty-row{text-align:center; color:var(--text-muted); padding:20px}
.tag.new{background:#ECFDF5; color:#047857; margin-inline-start:6px}

/* ===== معاينة التقرير ===== */
.report-out{margin-top:16px; border:1px solid var(--border); border-radius:12px; padding:0; background:#fff; color:#0F172A; overflow:auto; max-height:640px}
.report-out .empty{padding:26px; text-align:center; color:#64748B; font-size:.88rem}
.report-doc{padding:26px 28px; background:#fff}
.report-doc .rep-head{border-bottom:3px solid var(--primary); padding-bottom:12px; margin-bottom:18px}
.report-doc h1{font-size:1.25rem; color:var(--primary-dark)}
.report-doc .rep-sub{font-size:.85rem; color:#334155; margin-top:4px}
.report-doc .rep-meta{font-size:.76rem; color:#64748B; margin-top:2px}
.report-doc section{margin-bottom:20px}
.report-doc h2{font-size:.98rem; color:var(--primary-dark); margin-bottom:8px; padding-inline-start:10px; border-inline-start:4px solid var(--secondary)}
table.rt{width:100%; border-collapse:collapse; font-size:.82rem; background:#fff}
table.rt th{background:var(--muted); color:var(--primary-dark); text-align:right; padding:7px 10px; border:1px solid #E2E8F0; font-weight:600}
table.rt td{padding:6px 10px; border:1px solid #E2E8F0; color:#1E293B}
table.rt tbody tr:nth-child(even){background:#F8FAFC}
.rep-fn{font-size:.76rem; color:#64748B; margin-top:6px}
.rep-list{margin:0; padding-inline-start:20px; font-size:.82rem; color:#334155; line-height:1.9}
.rep-foot{margin-top:18px; padding-top:10px; border-top:1px solid #E2E8F0; font-size:.74rem; color:#64748B; text-align:center}
.page-break{page-break-before:always}
[data-theme="dark"] .report-out{background:#fff}

/* ===== الطباعة ===== */
@media print{
  @page{size:A4; margin:12mm}
  body{background:#fff}
  .topbar,.toast,.chip,.search,footer.note,.form-actions,.icon-btn{display:none !important}
  main{max-width:none; padding:0; gap:14px}
  .card{box-shadow:none; border-color:#CBD5E1; break-inside:avoid}
  .table-wrap{max-height:none; overflow:visible}
  .chart-box{height:240px}
  body.print-report main > section{display:none !important}
  body.print-report #reportPanel{display:block !important; border:0; padding:0}
  body.print-report #reportPanel .card-head,body.print-report #repForm{display:none !important}
  body.print-report .report-out{border:0; max-height:none; overflow:visible}
  body.print-report table.rt{font-size:10.5pt}
  body.print-report table.rt th,body.print-report table.rt td{padding:4px 6px}
  a[href]:after{content:""}
}

/* ===== شريط تأكيد الإجراءات ===== */
.confirm-bar{
  position:fixed; inset-inline:0; bottom:22px; margin:0 auto; z-index:60;
  display:flex; align-items:center; gap:12px; max-width:min(720px,92vw);
  background:var(--surface); border:1px solid var(--border); border-inline-start:4px solid var(--accent);
  border-radius:12px; padding:12px 16px; box-shadow:0 14px 34px rgba(15,42,92,.22);
  animation:fadeUp .25s ease both;
}
.confirm-bar[hidden]{display:none}
.confirm-bar span{font-size:.87rem; color:var(--text); flex:1}
.confirm-bar .btn{padding:7px 14px; font-size:.85rem}
@media print{.confirm-bar{display:none !important}}