/* Tasdeeq progress platform — tokens follow the Tasdeeq by natcom logo blue */
:root{
  --bg:#f2f5f9; --surface:#ffffff; --sunk:#eaeff5; --line:#d9e0ea; --fg:#14202e; --muted:#5a6779;
  --brand:#2f6fa8; --brand-strong:#1f5a8f; --brand-soft:#e3eef8; --natcom:#2156b8;
  --feat:#2f6fa8; --bug:#c2611f; --bug-soft:#fbede3;
  --ok:#1d8a57; --ok-soft:#e1f3e9; --warn:#b07800; --warn-soft:#fbf1da; --bad:#c0303a; --bad-soft:#fbe4e6; --info-soft:#e6eefb;
  --font-display:"Tajawal","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-body:"Tajawal","Segoe UI",Tahoma,system-ui,sans-serif;
  --r:10px; --shadow:0 1px 2px rgb(20 32 46 / .06),0 4px 14px rgb(20 32 46 / .05); --on-brand:#ffffff;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e141c; --surface:#151d28; --sunk:#1c2633; --line:#283445; --fg:#e6edf5; --muted:#97a5b8;
  --brand:#6fa9e0; --brand-strong:#8dbdea; --brand-soft:#1b2c40; --natcom:#6f9cf0;
  --feat:#6fa9e0; --bug:#ec9a62; --bug-soft:#3a2617;
  --ok:#5bc893; --ok-soft:#163325; --warn:#e3ad48; --warn-soft:#382b12; --bad:#f07079; --bad-soft:#3d1a1e; --info-soft:#1a2740;
  --shadow:none; --on-brand:#0b1420; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.6;font-weight:500}
b,strong{font-weight:700}
h1,h2,h3,legend{font-family:var(--font-display);line-height:1.25;margin:0;text-wrap:balance}
h1{font-size:1.6rem;font-weight:800}
h2{font-size:1.12rem;font-weight:700}
a{color:var(--brand-strong);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.86rem} .nowrap{white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
code{background:var(--sunk);padding:1px 6px;border-radius:5px;direction:ltr;display:inline-block}

/* app bar */
.appbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.appbar-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg)}
.brand:hover{text-decoration:none}
.brand img{height:42px;width:auto;border-radius:6px;background:#fff}
.brand span{display:grid;line-height:1.2}
.brand b{font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.brand small{color:var(--muted);font-size:.78rem}
nav#mainnav{display:flex;gap:4px;flex-wrap:wrap;margin-inline-start:auto}
nav#mainnav a{padding:7px 12px;border-radius:8px;color:var(--muted);font-weight:600}
nav#mainnav a:hover{background:var(--sunk);text-decoration:none;color:var(--fg)}
nav#mainnav a[aria-current]{background:var(--brand-soft);color:var(--brand-strong)}
.who{display:flex;align-items:center;gap:12px;font-size:.9rem}
.who span{display:grid;line-height:1.15;text-align:end}
.who small{color:var(--muted)}
.who form{margin:0}
.linkbtn{border:0;background:none;color:var(--bad);cursor:pointer;padding:0;font-weight:600}
.nav-toggle{display:none;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-weight:600}
@media (max-width:1480px){.brand small{display:none}}
.who{flex-wrap:nowrap}
@media (max-width:900px){
  .nav-toggle{display:block;margin-inline-start:auto}
  nav#mainnav{display:none;width:100%;order:3;margin:0}
  nav#mainnav.open{display:flex}
  .who{width:100%;order:4;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px}
  .who span{text-align:start}
  .brand small{display:none}
}

.wrap{max-width:1240px;margin:0 auto;display:grid;gap:20px;
  padding-block:22px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding-block:0 28px;direction:ltr}

/* generic */
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px}
.toolbar p{margin:4px 0 0}
.actions,.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline-form label{color:var(--muted);font-size:.9rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);min-width:0}
.panel.flush{padding:0;overflow:hidden}
.panel.narrow{max-width:820px}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.stack{display:grid;gap:14px}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.span2{grid-column:1/-1}
.f{display:grid;gap:5px;min-width:0}
.f label{font-size:.86rem;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;gap:8px}
input[type=text],input:not([type]),input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
input[type=date]{min-height:40px}
textarea{resize:vertical;min-height:90px}
input[type=range]{width:100%;accent-color:var(--brand)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}
input[type=color]{width:46px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:2px}
fieldset{border:1px solid var(--line);border-radius:var(--r);margin:0;padding:16px}
fieldset legend{padding:0 6px;font-size:1.02rem}
fieldset[disabled]{opacity:.72}
.check{display:flex;align-items:center;gap:8px}
.hint{margin:0;font-size:.88rem;color:var(--muted);background:var(--sunk);border-radius:8px;padding:9px 12px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:8px 15px;border-radius:8px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--brand);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-strong)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.small{padding:5px 11px;font-size:.88rem}
.flash{border-radius:8px;padding:10px 14px;font-weight:600}
.flash.ok{background:var(--ok-soft);color:var(--ok)}
.flash.err{background:var(--bad-soft);color:var(--bad)}
.flash.info{background:var(--info-soft);color:var(--brand-strong)}
.empty{text-align:center;padding:40px 16px;display:grid;gap:10px;justify-items:center}
.seg{display:inline-flex;background:var(--sunk);border-radius:9px;padding:3px;gap:2px}
.seg a{padding:6px 13px;border-radius:7px;color:var(--muted);font-weight:600}
.seg a:hover{text-decoration:none;color:var(--fg)}
.seg a[aria-current]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgb(0 0 0 / .1)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs a{padding:9px 14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current]{color:var(--brand-strong);border-color:var(--brand)}
.tabs a:hover{text-decoration:none;color:var(--fg)}
.back{font-size:.9rem;font-weight:600}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}

/* summary */
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow);display:grid;gap:8px}
.eyebrow{font-size:.78rem;letter-spacing:.06em;color:var(--muted);font-weight:700;text-transform:uppercase}
.summary ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.summary li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.summary p{margin:0;flex:1;min-width:260px}
.summary a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.summary a.late{color:var(--bad);font-weight:700}
.health{display:inline-block;min-width:96px;text-align:center;border-radius:99px;padding:3px 12px;font-size:.82rem;font-weight:800}
.health.ok{background:var(--ok-soft);color:var(--ok)} .health.warn{background:var(--warn-soft);color:var(--warn)}
.health.bad{background:var(--bad-soft);color:var(--bad)} .health.none{background:var(--sunk);color:var(--muted)}
.lang-switch{border:1px solid var(--line);border-radius:99px;padding:3px 12px;font-weight:700;font-size:.86rem;color:var(--fg)}
.lang-switch:hover{text-decoration:none;border-color:var(--brand)}
.auth-top{display:flex;justify-content:flex-end}
.btn.block{width:100%;justify-content:center;padding-block:11px}
.trend.is-empty{height:110px}

/* boards */
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px}
@media (max-width:420px){.boards{grid-template-columns:1fr}}
.board{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px;box-shadow:var(--shadow);min-width:0}
.board-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.board-head h2{font-size:1.25rem;display:flex;align-items:center;gap:9px}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;background:var(--feat)}
.dot.bug,i.bug{background:var(--bug)} i.feature{background:var(--feat)}
.completion{display:grid;gap:7px}
.completion-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.big{font-family:var(--font-display);font-size:1.6rem;font-weight:800;margin-inline-start:6px}
.meter{position:relative;height:12px;border-radius:99px;background:var(--sunk)}
.meter .fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px}
.meter .fill.ok{background:var(--ok)} .meter .fill.warn{background:var(--warn)} .meter .fill.bad{background:var(--bad)}
.meter .target{position:absolute;top:-4px;bottom:-4px;width:3px;margin-inline-start:-1.5px;background:var(--fg);border-radius:2px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:420px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{display:grid;gap:1px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--fg);transition:border-color .15s,transform .15s}
.kpi:hover{text-decoration:none;border-color:var(--brand);transform:translateY(-1px)}
.kpi .v{font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1.1}
.kpi .l{font-size:.84rem;color:var(--muted)}
.kpi.bad{background:var(--bad-soft);border-color:transparent} .kpi.bad .v{color:var(--bad)}
.kpi.ok .v{color:var(--ok)} .kpi.warn .v{color:var(--warn)}
.stackbar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--sunk);gap:2px}
.stackbar.thin{height:9px;min-width:120px}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.86rem;color:var(--muted)}
.legend li,.legend a{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend b{color:var(--fg)}
.note{margin:0;font-size:.86rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}

/* trend */
.trend{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:end;height:200px;padding-top:18px;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(to top,transparent 0,transparent 39px,var(--line) 39px,var(--line) 40px)}
.tw{display:grid;grid-template-rows:1fr auto;height:100%;gap:6px}
.tw .bars{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:100%}
.tw .b{width:min(22px,40%);border-radius:4px 4px 0 0;position:relative;min-height:0}
.tw .b.feature{background:var(--feat)} .tw .b.bug{background:var(--bug)}
.tw .b em{position:absolute;top:-17px;inset-inline:0;text-align:center;font-style:normal;font-size:.72rem;color:var(--muted)}
.tw .tl{font-size:.74rem;color:var(--muted);text-align:center;white-space:nowrap;transform:translateY(22px)}
.tw.now .tl{color:var(--fg);font-weight:700}
.trend + p{margin:30px 0 0}

/* tables */
.table-box{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.8rem;color:var(--muted);font-weight:700;background:var(--sunk);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb,var(--sunk) 55%,transparent)}
td.n,th.n{text-align:center;width:70px}
td.c,th.c{text-align:center}
td.late,.late{color:var(--bad);font-weight:700}
table.items{min-width:1080px}
td.title{min-width:300px}
td.title a{color:var(--fg);font-weight:600}
td.title .sub{color:var(--muted);font-size:.84rem;margin-top:3px}
td.code{color:var(--muted);font-size:.86rem;white-space:nowrap}
td.cat{color:var(--muted);font-size:.88rem;max-width:180px}
.cat-table{min-width:640px}
td.dist{width:35%}
.pill{display:inline-block;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:700;white-space:nowrap;
  --pc:#6b7280;color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent)}
.pill.tiny{font-size:.7rem;padding:1px 7px;vertical-align:1px}
.pill.t-feature{--pc:var(--feat)} .pill.t-bug{--pc:var(--bug)}
.pill.late-pill{--pc:var(--bad)}
.prio{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;white-space:nowrap}
.prio i{width:8px;height:8px;border-radius:2px;background:var(--pc);display:inline-block}
.pbar{width:70px;height:6px;background:var(--sunk);border-radius:99px;overflow:hidden;display:inline-block;vertical-align:middle;margin-inline-end:6px}
.pbar span{display:block;height:100%;background:var(--brand)}
.yes{color:var(--ok);font-weight:800} .no{color:var(--bad);font-weight:800}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters select,.filters input[type=search]{width:auto;max-width:100%}
.filters input[type=search]{min-width:200px;flex:1}
.filters .inline{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.88rem}
.filters .inline input{width:auto}

/* lists */
.mini-list{list-style:none;margin:0;padding:0;display:grid}
.mini-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.mini-list li:last-child{border-bottom:0}
.mini-list a{color:var(--fg);min-width:0}
.mini-list .ttl{overflow-wrap:anywhere}
.mini-list .when{font-size:.84rem;color:var(--muted);white-space:nowrap}
.count{background:var(--sunk);border-radius:99px;padding:1px 10px;font-weight:700}

/* item form */
.item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:20px}
@media (max-width:440px){.item-grid{grid-template-columns:1fr}}
.form-actions{display:flex;justify-content:flex-start;margin-top:16px}
.form-actions .end{display:flex;gap:8px}
.danger-zone{border:1px solid var(--bad-soft);border-radius:var(--r);padding:12px 16px;background:var(--surface)}
.danger-zone summary{cursor:pointer;color:var(--bad);font-weight:700}
.danger-zone form{display:grid;gap:10px;margin-top:10px;justify-items:start}
.danger-zone p{margin:0}
.history{list-style:none;margin:0;padding:0;display:grid}
.history li{display:grid;gap:2px;padding:9px 0;border-bottom:1px solid var(--line)}
.history li:last-child{border-bottom:0}
.h-meta{font-size:.84rem;color:var(--muted)}
.h-meta b{color:var(--fg)}
output{color:var(--fg);font-weight:700}

/* settings tables */
.edit-table td{padding:7px 8px}
.edit-table input,.edit-table select{padding:6px 8px}
.edit-table .w-xs{width:64px} .edit-table .w-s{width:80px}
.edit-table .new-row td{background:var(--brand-soft)}
.edit-table.users{min-width:860px}
.merge .inline-form select{width:auto}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 20px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}

/* auth */
body.auth{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(1200px 500px at 50% -10%,var(--brand-soft),transparent),var(--bg)}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;gap:14px;box-shadow:var(--shadow)}
.auth-card.wide{width:min(640px,100%)}
.auth-card h1{font-size:1.4rem}
.auth-card p{margin:0}
.auth-logo{width:220px;max-width:100%;border-radius:8px;background:#fff;justify-self:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.appbar,.filters,.actions,.foot,.danger-zone{display:none}.panel,.board{box-shadow:none;break-inside:avoid}}