:root{
  --bg:#f6f7f8; --surface:#fff; --surface-2:#fbfbfc;
  --line:#e9e9ec; --line-strong:#d6d6db;
  --ink:#1c1d22; --ink-2:#5b5d66; --ink-3:#9a9ca5;
  --accent:#0f766e; --accent-soft:#e6f2f1; --accent-deep:#0b5c56;
  --ok:#15803d; --danger:#b91c1c; --warn:#b45309; --info:#0369a1;
  --r:10px; --shadow:0 1px 2px rgba(24,24,27,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.6; direction:rtl;
  -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; direction:ltr; display:inline-block}
td.num, th.num{display:table-cell; text-align:right}
a{color:inherit}

/* ---------- shell ---------- */
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar .inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand .mark{
  width:30px; height:30px; border-radius:8px; background:var(--accent);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex:none;
}
.brand b{font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.brand span{color:var(--ink-3); font-size:12px; white-space:nowrap}
.spacer{flex:1}
.wrap{max-width:1180px; margin:0 auto; padding:32px 24px 64px}

.overline{
  font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 6px;
}
h1{font-size:24px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px}
.lede{color:var(--ink-2); margin:0 0 28px; font-size:14px}

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.card .hd{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}
.card .hd h2{margin:0; font-size:15px; font-weight:600}
.card .bd{padding:20px}

/* ---------- forms ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
label{font-size:12px; font-weight:600; color:var(--ink-2)}
input[type=text], select, textarea{
  width:100%; font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:8px; padding:9px 12px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{resize:vertical; min-height:96px; line-height:1.7}
input:hover, select:hover, textarea:hover{border-color:#bfc0c7}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
::placeholder{color:var(--ink-3)}

.segmented{display:flex; gap:0; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; width:fit-content}
.segmented input{position:absolute; opacity:0; pointer-events:none}
.segmented label{
  padding:8px 16px; font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer; background:var(--surface); border-inline-start:1px solid var(--line-strong);
  transition:background .15s ease, color .15s ease; margin:0;
}
.segmented label:first-of-type{border-inline-start:none}
.segmented input:checked + label{background:var(--accent); color:#fff}
.segmented input:focus-visible + label{box-shadow:inset 0 0 0 2px var(--accent-soft)}

.btn{
  font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:8px; padding:10px 22px;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:var(--accent-deep); transform:translateY(-1px)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2); border-color:#bfc0c7}
.btn.sm{padding:7px 14px; font-size:13px}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:16px; margin-bottom:24px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.kpi .k{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.kpi .v{font-size:26px; font-weight:600; letter-spacing:-.02em; margin-top:8px}
.kpi.hero .v{font-size:44px; line-height:1.1}
.kpi .sub{font-size:12px; color:var(--ink-3); margin-top:4px}
.kpi .v.danger{color:var(--danger)}
.kpi .v.warn{color:var(--warn)}

/* ---------- table ---------- */
.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse}
th{
  text-align:right; font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;
}
td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--surface-2)}
td .t{font-weight:600}
td .b{color:var(--ink-2); font-size:13px; margin-top:3px; max-width:460px}
td.muted, .muted{color:var(--ink-3)}

.chip{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid transparent;
}
.chip.new{background:#eef4ff; color:var(--info); border-color:#dbe7fb}
.chip.wip{background:#fdf3e3; color:var(--warn); border-color:#f6e5c8}
.chip.done{background:#eaf6ee; color:var(--ok); border-color:#d5ecdd}
.chip.urgent{background:#fdeaea; color:var(--danger); border-color:#f7d5d5}
.chip.imp{background:#fdf3e3; color:var(--warn); border-color:#f6e5c8}
.chip.norm{background:#f2f3f4; color:var(--ink-2); border-color:var(--line)}
.chip.dept{background:var(--accent-soft); color:var(--accent-deep); border-color:#cfe5e3}

select.status-sel{padding:5px 8px; font-size:12.5px; border-radius:7px; width:auto; min-width:118px}

/* ---------- bars ---------- */
.bars{display:flex; flex-direction:column; gap:12px}
.bar-row{display:grid; grid-template-columns:120px 1fr 40px; align-items:center; gap:12px; font-size:13px}
.bar{height:6px; background:#eef0f1; border-radius:999px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:999px}
.bar-row .n{text-align:left; color:var(--ink-2); font-size:12.5px}

.spark{display:flex; align-items:flex-end; gap:5px; height:64px}
.spark div{flex:1; max-width:44px; background:var(--accent-soft); border-radius:3px 3px 0 0; min-height:3px; position:relative}
.spark div.on{background:var(--accent)}

/* ---------- misc ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:20px}
.filters .field{gap:5px}
.filters input[type=text]{min-width:230px}
.filters select{min-width:135px}
.cols2{display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-bottom:16px}
.empty{padding:52px 20px; text-align:center; color:var(--ink-3)}
.empty .big{font-size:15px; color:var(--ink-2); font-weight:600; margin-bottom:6px}
.toast{
  background:#eaf6ee; border:1px solid #d5ecdd; color:var(--ok);
  padding:11px 16px; border-radius:8px; font-size:13.5px; font-weight:600; margin-bottom:20px;
}
.tabs{display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:24px}
.tabs a{
  padding:9px 0; font-size:13.5px; font-weight:600; color:var(--ink-3);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a.on{color:var(--ink); border-bottom-color:var(--accent)}
.tabs a:hover{color:var(--ink)}

.login{max-width:380px; margin:14vh auto; }
@media (max-width:900px){
  .kpis{grid-template-columns:1fr 1fr}
  .cols2, .grid2{grid-template-columns:1fr}
  .wrap{padding:24px 16px 48px}
}