/* ===========================================================================
   GovHub — عُدّة الواجهة: الشريط العلويّ · الدرج · النموذج · المنتقي · التبويبات ·
   الحلقات · الجدول · لوحة الأوامر · شارات المصدر. على رموز ds.css نفسها،
   فكلّ لونٍ هنا له قيمته في الوضعين.
   =========================================================================== */
:root{ --tb-h:4rem }

/* ===== الرأس — AppHeader ===== */
.topbar[hidden]{display:none}
.topbar{position:fixed;inset-block-start:0;inset-inline:0;z-index:45;
  height:var(--tb-h);display:flex;align-items:center;gap:1rem;padding:0 1rem;
  background:var(--hdr-bg);border-bottom:1px solid var(--border)}
html.has-sb .app-root{padding-block-start:var(--tb-h)}
.tb-brand{padding:0 .25rem;border-radius:6px}
.tb-search{display:flex;align-items:center;gap:.5rem;width:min(22rem,34vw);min-width:0;height:2rem;padding:0 .5rem;
  border-radius:6px;background:var(--input-bg);border:1px solid var(--border);color:var(--ink-2);
  transition:border-color var(--dur) var(--ease);font-size:.875rem}
.tb-search:hover{border-color:var(--border-2)}
.tb-search span{flex:1;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-search kbd{margin:0 .1rem}
.tb-search .ic{width:1rem;height:1rem}
kbd{display:inline-block;font-family:var(--font-mono);font-size:.75rem;line-height:1.1;padding:.15rem .3rem;border-radius:6px;
  background:var(--hover);border:1px solid var(--border);box-shadow:inset 0 -1px 0 var(--border);color:var(--ink-2);
  direction:ltr;white-space:nowrap;vertical-align:middle}
.tb-r{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto;position:relative}
.tb-div{width:1px;height:1.25rem;background:var(--border);margin:0 .25rem}
/* أزرار الرأس: مربّعاتٌ بإطار كأزرار رأس GitHub */
.tb-ic{position:relative;min-width:2rem;height:2rem;padding:0 .4375rem;border-radius:6px;display:inline-flex;align-items:center;
  justify-content:center;gap:.125rem;color:var(--ink-2);border:1px solid var(--border);background:transparent;
  transition:background-color var(--dur) var(--ease)}
.tb-ic:hover{background:var(--nav-hover)}
.tb-ic .ic{width:1rem;height:1rem}
.tb-new .ic:last-child{width:.75rem;height:.75rem}
.tb-ic em{position:absolute;inset-block-start:-.375rem;inset-inline-end:-.375rem;min-width:1.125rem;height:1.125rem;padding:0 .3rem;
  border-radius:2em;background:var(--brand-500);color:#fff;font-style:normal;font-size:.75rem;font-weight:500;line-height:1;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--hdr-bg)}
.tb-ic em.late{background:var(--dn)}
:root[data-theme="dark"] .tb-ic em{color:var(--inverse)}
.tb-av{display:grid;place-items:center;border-radius:50%}
.tb-av .avatar{width:2rem;height:2rem}
.tb-demo{display:inline-flex;align-items:center;gap:.25rem;padding:0 .4375rem;border-radius:2em;line-height:1.375rem;
  color:var(--warn);border:1px solid var(--mt);font-size:.75rem;font-weight:500;cursor:help;white-space:nowrap}
.tb-demo .ic{width:.875rem;height:.875rem}

/* قائمة الحساب — ActionMenu */
.tb-menu{position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-end:0;z-index:50;min-width:15rem;
  background:var(--card);border-radius:12px;box-shadow:var(--sh-lg);padding:.5rem}
.tb-menu[hidden]{display:none}
.tb-me{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem .75rem;margin:0 -.5rem .5rem;padding-inline:1rem;
  border-bottom:1px solid var(--border)}
.tb-me b{display:block;font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-me span:not(.avatar){display:block;font-size:.75rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-me>div{min-width:0}
.tb-menu button{display:flex;align-items:center;gap:.5rem;width:100%;min-height:2rem;padding:.375rem .5rem;border-radius:6px;
  font-size:.875rem;color:var(--ink);text-align:start}
.tb-menu button:hover{background:var(--nav-hover)}
.tb-menu button .ic{color:var(--ink-2)}

/* ===== القائمة الجانبيّة: أقسامٌ تُطوى، وعدّاد المهامّ ===== */
.sb-sec{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;border-radius:6px}
.sb-sec:hover{color:var(--ink)}
.sb-sec .ic{width:.75rem;height:.75rem;transition:transform var(--dur) var(--ease);transform:rotate(90deg)}
.sb-grp.shut .sb-sec .ic{transform:rotate(180deg)}
.sb-grp.shut .sb-items{display:none}
.sb-items{display:flex;flex-direction:column;gap:.125rem}
/* العدّاد — Counter */
.sb-n{margin-inline-start:auto;min-width:1.25rem;height:1.125rem;padding:0 .375rem;border-radius:2em;font-size:.75rem;
  font-weight:500;line-height:1;display:grid;place-items:center;background:var(--counter-bg);color:var(--ink)}
.sb-n.late{background:var(--bad-bg);color:var(--bad)}

/* ===== الأزرار الإضافيّة ===== */
/* الخطِر كما في GitHub: أحمرُ النصّ على الزرّ العاديّ، ويمتلئ عند المرور */
.btn-danger{color:var(--bad)}
.btn-danger .ic{color:inherit}
.btn-danger:hover{background:var(--btn-danger-hover);border-color:var(--btn-pri-border);color:#fff}
.btn-soft{background:transparent;color:var(--brand-500);border-color:transparent;box-shadow:none}
.btn-soft .ic{color:inherit}
.btn-soft:hover{background:var(--nav-hover);border-color:transparent}
.btn-xs{height:1.5rem;padding:0 .5rem;font-size:.75rem;gap:.25rem}
.btn-xs .ic{width:.875rem;height:.875rem}

/* ===== شارات المصدر: مقيس · تصريح · بيانات عرض ===== */
.mb{display:inline-flex;align-items:center;gap:.3rem;padding:0 .4375rem;border-radius:2em;font-size:.75rem;line-height:1.125rem;
  font-weight:500;white-space:nowrap;cursor:help;border:1px solid transparent;vertical-align:middle}
.mb i{width:.42rem;height:.42rem;border-radius:50%;background:currentColor}
.mb.meas{background:transparent;color:var(--ok);border-color:var(--ok)}
.mb.decl{background:transparent;color:var(--info);border-color:var(--info)}
.mb.decl i{background:transparent;border:1.5px solid currentColor}
.mb.demo{background:transparent;color:var(--warn);border-color:var(--mt)}
.mb.none{background:transparent;color:var(--ink-2);border:1px dashed var(--border-2)}
.mb.none i{display:none}

/* ===== المهلة ===== */
.due{display:inline-flex;align-items:center;gap:.25rem;font-size:0.75rem;font-weight:600;color:var(--ink-3);white-space:nowrap}
.due .ic{width:.78rem;height:.78rem}
.due.soon{color:var(--warn)} .due.late{color:var(--bad)}

/* ===== الحلقة ===== */
.ring{position:relative;width:var(--s);flex:none;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.ring svg{width:var(--s);height:var(--s);transform:rotate(-90deg)}
.ring .rb{fill:none;stroke:var(--hover)}
.ring .rf{fill:none;stroke:var(--brand-500);stroke-linecap:round;animation:ringIn 1.1s cubic-bezier(.2,.8,.2,1) .1s backwards}
@keyframes ringIn{from{stroke-dashoffset:var(--c,400)}}
.ring.g .rf{stroke:var(--up)} .ring.w .rf{stroke:var(--mt)} .ring.r .rf{stroke:var(--dn)}
.ring .rt{position:absolute;inset-block-start:0;inset-inline:0;height:var(--s);display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.1}
.ring .rt b{font-size:calc(var(--s) * .24);font-weight:600;font-variant-numeric:tabular-nums}
.ring .rt b small{font-size:.6em;font-weight:600;color:var(--ink-3)}
.ring .rt span{font-size:0.625rem;color:var(--ink-3);margin-top:.15rem}
.ring .rs{font-size:0.75rem;color:var(--ink-2);text-align:center;max-width:9rem;line-height:1.5}
@media(prefers-reduced-motion:reduce){ .ring .rf{animation:none} }

/* ===== حجر الرقم ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:.85rem;margin-bottom:1.25rem}
.stat{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-2xl);padding:1rem 1.1rem;box-shadow:var(--sh-sm);transition:all var(--dur) var(--ease)}
.stat.click{cursor:pointer}
.stat.click:hover{box-shadow:var(--sh-md);border-color:var(--border-2)}
.stat-i{width:2.3rem;height:2.3rem;border-radius:6px;display:grid;place-items:center;flex:none;
  background:var(--brand-50);color:var(--brand-600)}
.stat-i .ic{width:1.1rem;height:1.1rem}
.stat.g .stat-i{background:var(--ok-bg);color:var(--ok)} .stat.w .stat-i{background:var(--warn-bg);color:var(--warn)}
.stat.r .stat-i{background:var(--bad-bg);color:var(--bad)}
.stat b{display:block;font-size:1.45rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.stat.g b{color:var(--ok)} .stat.w b{color:var(--warn)} .stat.r b{color:var(--bad)}
.stat span{display:block;font-size:0.75rem;color:var(--ink-2);margin-top:.1rem}
.stat small{display:block;font-size:0.75rem;color:var(--ink-3);margin-top:.15rem;line-height:1.5}

/* ===== التبويبات — UnderlineNav ===== */
/* الحدّ خطٌّ داخليّ لا border: الشريط يُمرَّر أفقيًّا فيقصّ ما تحت حدّه، والخطّ البرتقاليّ يجلس فوقه */
.tabs{display:flex;gap:.5rem;box-shadow:inset 0 -1px 0 var(--border);margin-bottom:1rem;overflow-x:auto;scrollbar-width:none;
  min-height:3rem;align-items:center}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;height:2rem;padding:0 .5rem;border-radius:6px;font-size:.875rem;font-weight:400;color:var(--ink);
  white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;transition:background-color var(--dur) var(--ease)}
.tabs button .ic{color:var(--ink-2)}
.tabs button:hover{background:var(--nav-hover)}
.tabs button.on{font-weight:600}
.tabs button.on::after{content:'';position:absolute;inset-inline:0;inset-block-end:-.5rem;height:2px;
  border-radius:6px;background:var(--tab-on)}
.tabs em{font-style:normal;font-size:.75rem;font-weight:500;line-height:1;min-width:1.25rem;height:1.125rem;padding:0 .375rem;
  border-radius:2em;display:grid;place-items:center;background:var(--counter-bg);color:var(--ink)}

/* ===== الحالة الفارغة ===== */
.empty{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:2rem 1rem;text-align:center;color:var(--ink-2)}
.empty>.ic{width:1.5rem;height:1.5rem;color:var(--ink-2);margin-bottom:.5rem}
.empty b{font-size:1.125rem;font-weight:600;color:var(--ink)}
.empty span{font-size:.875rem;max-width:34rem;line-height:1.6}
.empty .btn{margin-top:1rem}

/* ===== الدرج الجانبيّ ===== */
.dw-ov{position:fixed;inset:0;z-index:70;background:transparent;transition:background .2s var(--ease)}
.dw-ov.in{background:var(--overlay)}
.dw{position:absolute;inset-block:0;inset-inline-end:0;width:min(34rem,100vw);background:var(--card);
  border-inline-start:1px solid var(--border);box-shadow:var(--sh-lg);display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.dw-ov.in .dw{transform:none}
.dw.sm{width:min(27rem,100vw)} .dw.lg{width:min(48rem,100vw)}
.dw-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem;
  border-bottom:1px solid var(--border)}
.dw-h h3{font-size:1rem;font-weight:600;line-height:1.5}
.dw-h .kicker{font-size:.75rem;margin:0}
.dw-x{width:2rem;height:2rem;border-radius:6px;display:grid;place-items:center;color:var(--ink-2);flex:none}
.dw-x:hover{background:var(--nav-hover)}
.dw-b{flex:1;overflow:auto;padding:1rem}
.dw-f{display:flex;gap:.5rem;padding:1rem;border-top:1px solid var(--border)}
html.dw-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){ .dw{transition:none} }

/* ===== النموذج ===== */
.form .fld{margin-bottom:.95rem}
.form .fld>span{display:flex;gap:.2rem}
.req{color:var(--bad);font-style:normal}
.hint{display:block;font-size:0.75rem;color:var(--ink-3);margin-top:.3rem;line-height:1.6}
.fld textarea{resize:vertical;min-height:4.5rem;line-height:1.8}
.fld input[type="date"],.fld input[type="number"]{direction:ltr;text-align:end}
.tgl{display:flex;align-items:center;gap:.65rem;margin:.2rem 0 1rem;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--ink)}
.tgl input{position:absolute;opacity:0;pointer-events:none}
.tgl i{position:relative;width:2.5rem;height:1.375rem;border-radius:6px;background:var(--seg-track);border:1px solid var(--border);
  flex:none;transition:background var(--dur) var(--ease)}
.tgl i::after{content:'';position:absolute;inset-block:-1px;inset-inline-start:-1px;width:1.375rem;
  border-radius:6px;background:var(--card);border:1px solid var(--seg-knob);transition:transform var(--dur) var(--ease)}
.tgl input:checked+i{background:var(--brand-500);border-color:var(--brand-500)}
.tgl input:checked+i::after{transform:translateX(-1.125rem)}
[dir="ltr"] .tgl input:checked+i::after{transform:translateX(1.125rem)}
.tgl input:focus-visible+i{outline:2px solid var(--focus);outline-offset:2px}
.tgl .hint{margin:0}

/* ===== المنتقي ===== */
.pick{position:relative}
.pick-in{display:flex;align-items:center;gap:.5rem;padding:0 .75rem;background:var(--input-bg);border:1px solid var(--border);
  border-radius:6px;box-shadow:var(--input-shadow);transition:border-color var(--dur) var(--ease)}
.pick-in:focus-within{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
.pick-in .ic{width:.95rem;height:.95rem;color:var(--ink-3);flex:none}
.pick-in input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:.3125rem 0!important}
.pick-clr{color:var(--ink-3);display:grid;place-items:center}
.pick-clr .ic{width:.85rem;height:.85rem}
.pick-dd{position:absolute;z-index:5;inset-inline:0;inset-block-start:calc(100% + .3rem);max-height:17rem;overflow:auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:.3rem}
.pick-dd button{display:flex;align-items:center;gap:.5rem;width:100%;text-align:start;padding:.5rem .65rem;border-radius:6px;font-size:.78rem}
.pick-dd button b{font-weight:600}
.pick-dd button span{color:var(--ink-3);font-size:0.75rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-dd button .ic{width:.9rem;height:.9rem;color:var(--brand-500)}
.pick-dd button:hover,.pick-dd button.hl{background:var(--nav-hover)}
.pick-none{padding:.8rem;text-align:center;font-size:.75rem;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.4rem}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:.25rem;padding:0 .5rem 0 .25rem;border-radius:2em;line-height:1.375rem;
  background:var(--hover);border:1px solid var(--border);color:var(--ink);font-size:.75rem;font-weight:500}
.chip button{display:grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;color:inherit}
.chip button:hover{background:var(--nav-hover)}
.chip .ic{width:.7rem;height:.7rem}

/* ===== الجدول ===== */
.dt-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:1rem;border-bottom:1px solid var(--border);background:var(--hover)}
.dt-q{display:flex;align-items:center;gap:.5rem;flex:1 1 14rem;max-width:24rem;padding:0 .5rem;
  background:var(--input-bg);border:1px solid var(--border);border-radius:6px;box-shadow:var(--input-shadow)}
.dt-q:focus-within{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
.dt-q .ic{width:.9rem;height:.9rem;color:var(--ink-3)}
.dt-q input{border:0!important;background:transparent!important;box-shadow:none!important;padding:.3125rem 0!important;font-size:.875rem}
.dt-bar .rj-select{font-size:.875rem;min-width:8rem}
.dt-n{font-size:0.75rem;color:var(--ink-3);margin-inline-start:auto;white-space:nowrap}
.wk-table th.srt{cursor:pointer;user-select:none}
.wk-table th.srt:hover{color:var(--ink)}
.wk-table th.srt.asc::after{content:' ↑';color:var(--brand-500)}
.wk-table th.srt.desc::after{content:' ↓';color:var(--brand-500)}
.wk-table tr.click{cursor:pointer}
.dt-pg{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.6rem;border-top:1px solid var(--border);
  font-size:0.75rem;color:var(--ink-2)}

/* ===== لوحة الأوامر ===== */
.pal-ov{position:fixed;inset:0;z-index:95;background:var(--overlay);
  display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;animation:fade .15s var(--ease)}
.pal{width:min(40rem,92vw);background:var(--card);border-radius:12px;
  box-shadow:var(--sh-xl);overflow:hidden;animation:pop .18s var(--ease)}
.pal-in{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--border)}
.pal-in .ic{width:1rem;height:1rem;color:var(--ink-2)}
.pal-in input{flex:1;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:.875rem}
.pal-r{max-height:58vh;overflow:auto;padding:.35rem}
.pal-g{font-size:0.75rem;font-weight:600;color:var(--ink-3);padding:.6rem .7rem .25rem;}
.pal-r button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:start;padding:.55rem .7rem;border-radius:6px;font-size:.8rem}
.pal-r button .ic{width:1rem;height:1rem;color:var(--ink-3);flex:none}
.pal-r button b{font-weight:600;white-space:nowrap}
.pal-r button span{color:var(--ink-3);font-size:0.75rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-r button.hl,.pal-r button:hover{background:var(--nav-hover)}
.pal-r button.hl .ic{color:var(--ink)}
.pal-f{display:flex;gap:1rem;flex-wrap:wrap;padding:.55rem 1rem;border-top:1px solid var(--border);background:var(--hover);
  font-size:0.75rem;color:var(--ink-3)}
.pal-f kbd{margin-inline-end:.15rem}
.pal-f .muted{margin-inline-start:auto}

/* ===== قائمة «جديد» ===== */
.newg{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.newg button{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.85rem .9rem;text-align:start;
  border:1px solid var(--border);border-radius:var(--r-xl);background:var(--card);transition:all var(--dur) var(--ease)}
.newg button:hover{background:var(--hover)}
.newg .ic{width:1rem;height:1rem;color:var(--ink-2);margin-bottom:.25rem}
.newg b{font-size:.8rem;font-weight:600}
.newg span{font-size:0.75rem;color:var(--ink-3);line-height:1.6}

/* ===== رأس الصفحة بأزرار ===== */
.ph-act{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.ic-btn{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:6px;color:var(--ink-2)}
.ic-btn:hover{background:var(--nav-hover);color:var(--ink)}

@media(max-width:860px){
  .topbar{padding-inline-start:3.5rem;gap:.5rem}
  .tb-search{width:2rem;padding:0;justify-content:center}
  .tb-search span,.tb-div,.tb-demo{display:none}
  .newg{grid-template-columns:1fr}
}