@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plex-400.woff2') format('woff2');}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plex-500.woff2') format('woff2');}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plex-600.woff2') format('woff2');}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plex-700.woff2') format('woff2');}@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexarabic-400.woff2') format('woff2');}@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plexarabic-500.woff2') format('woff2');}@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plexarabic-600.woff2') format('woff2');}@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plexarabic-700.woff2') format('woff2');}
:root{--bg:#f6f7f9;--surface:#ffffff;--sunken:#f3f5f9;--text:#0e1525;--muted:#4a5468;--subtle:#6f7889;
--border:#dfe3e8;--border-strong:#cdd3db;--hairline:#eceef2;--accent:#1e47c8;--accent-pressed:#17389e;--accent-soft:#eef2fd;
--crit:#b42318;--crit-bg:#fef3f2;--crit-edge:#f6c9c3;--warn:#7a4a00;--warn-bg:#fdf3e1;--warn-edge:#f2dcb0;
--good:#067647;--good-bg:#ecfdf3;--good-edge:#abefc6;--neut:#475166;--neut-bg:#f1f3f6;
--r-panel:14px;--r-ctl:8px;--r-chip:6px;
/* legacy aliases so generated pages keep working */
--brand:var(--accent);--brand-600:var(--accent-pressed);--ink:var(--text);--gold:#7a4a00;--card:var(--surface);
--line:var(--border);--txt:var(--text);--mut:var(--subtle);--red:var(--crit);--redbg:var(--crit-bg);
--amber:var(--warn);--amberbg:var(--warn-bg);--blue:#1e47c8;--bluebg:var(--accent-soft);--green:var(--good);
--greenbg:var(--good-bg);--gray:var(--subtle);--graybg:var(--sunken);--r:var(--r-panel)}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;background:var(--bg);color:var(--text);
font-size:14px;line-height:1.5;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.ar{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;direction:rtl;unicode-bidi:isolate;line-height:1.7;letter-spacing:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
a{color:var(--accent);text-decoration:none}
.moh-logo{height:30px;width:auto;display:block}
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
/* ---------- sidebar ---------- */
.sidebar{background:var(--surface);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;overflow-y:auto;padding:0 12px 12px}
.sb-brand{display:flex;gap:11px;align-items:center;padding:18px 10px 16px;border-bottom:1px solid var(--hairline);margin:0 -12px 6px;padding-inline:22px}
.sb-brand .moh-logo{height:34px}
.sb-brand .pqms{margin-inline-start:auto;text-align:end}
.sb-brand .pqms b{display:block;font-size:15px;font-weight:600;letter-spacing:.02em}
.sb-brand .pqms small{display:block;font-size:12px;color:var(--subtle);margin-top:2px;max-width:150px;line-height:1.3}
.sb-sec{padding:16px 10px 6px;font-size:12px;font-weight:600;color:var(--subtle)}
.sb-item{display:flex;align-items:center;gap:11px;min-height:40px;padding:6px 10px;margin:1px 0;border-radius:var(--r-ctl);
color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;position:relative;text-decoration:none}
.tile{width:28px;height:28px;border-radius:8px;background:var(--mod,var(--neut-bg));color:#fff;display:inline-flex;
align-items:center;justify-content:center;flex:none}
.tile svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sb-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-item:hover{background:var(--sunken)}
.sb-item.active{background:var(--accent-soft);color:var(--text);font-weight:600}
.sb-item.active::before{content:'';position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:3px;border-radius:2px;
background:var(--mod,var(--accent))}
.sb-count{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--subtle);background:var(--sunken);border-radius:6px;padding:2px 7px}
.sb-count.crit{color:var(--crit);background:var(--crit-bg)}
.sb-lock{margin-inline-start:auto;color:var(--subtle)}
.sb-lock svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sb-foot{margin-top:auto;border-top:1px solid var(--hairline);padding-top:8px}
/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:14px;padding:0 32px;height:64px}
.crumb{font-size:13.5px;color:var(--subtle);white-space:nowrap}
.crumb b{color:var(--text);font-weight:600}
.h-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-strong);
border-radius:var(--r-ctl);padding:0 12px;height:36px;color:var(--subtle);font-size:13px;min-width:220px}
.h-search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.h-search kbd{margin-inline-start:auto;font-family:inherit;font-size:12px;color:var(--subtle);border:1px solid var(--border);
border-radius:5px;padding:0 5px;background:var(--sunken)}
.h-bell{position:relative;color:var(--neut);cursor:pointer;background:none;border:none;width:36px;height:36px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center}
.h-bell:hover{background:var(--sunken)}
.h-bell svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.h-bell i{position:absolute;top:5px;inset-inline-end:7px;width:8px;height:8px;border-radius:50%;background:var(--crit)}
.rolebox{margin-inline-start:auto;display:flex;flex-direction:column;gap:2px}
.rolebox .cap{font-size:12px;color:var(--subtle);font-weight:500}
.sel{position:relative;display:inline-flex;align-items:center}
.sel>svg.lead{position:absolute;inset-inline-start:12px;width:15px;height:15px;stroke:var(--subtle);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sel>svg.trail{position:absolute;inset-inline-end:12px;width:14px;height:14px;stroke:var(--subtle);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
select.sel-ctl,.inp.ctl{appearance:none;-webkit-appearance:none;height:44px;background:var(--surface);border:1px solid var(--border-strong);
border-radius:var(--r-ctl);font-family:inherit;font-size:13.5px;font-weight:500;color:var(--text);padding-block:0;padding-inline:42px 40px;cursor:pointer}
select.sel-ctl{min-width:200px}
select.sel-ctl.sm{height:36px;min-width:0;padding:0 34px 0 34px;font-size:13px}
/* ---------- content ---------- */
.content{padding:32px;max-width:1400px;min-width:0}
.title-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:2px;flex-wrap:wrap}
.title-row .tile-lg{width:34px;height:34px;border-radius:9px;margin-top:2px}
.title-row h1{font-size:26px;font-weight:600;letter-spacing:-.015em}
.title-divider{width:1px;align-self:stretch;background:var(--border);margin:4px 2px}
.title-ar{font-size:18px;font-weight:500;color:var(--subtle);margin-top:5px}
.context{font-size:13px;color:var(--muted);margin:6px 0 0;padding-inline-start:48px}
.toolbar{display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex-wrap:wrap}
.spacer{flex:1}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-ctl);height:36px;
padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;font-family:inherit;white-space:nowrap}
.btn-lg{height:44px;padding:0 22px;font-size:14px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-pressed)}
.btn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--crit);color:#fff}
.btn-link{background:none;border:none;color:var(--accent);padding:0 8px}
.btn.disabled{background:var(--sunken);color:var(--subtle);cursor:not-allowed;border-color:var(--border)}
/* ---------- filter bar ---------- */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 16px}
.f-sel{display:flex;align-items:center;gap:7px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--surface);
height:36px;padding:0 12px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.f-sel b{color:var(--text);font-weight:600}
.f-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);border-radius:var(--r-chip);
padding:5px 11px;font-size:12.5px;font-weight:600}
.f-chip::after{content:'\d7';font-weight:700;opacity:.6}
.f-reset{color:var(--accent);font-size:12.5px;text-decoration:underline;cursor:pointer}
/* ---------- KPI & panels ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:14px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-panel);padding:16px 18px 14px;cursor:pointer}
.kpi:hover{border-color:var(--border-strong)}
.kpi .lbl{font-size:12px;font-weight:600;color:var(--subtle)}
.kpi .val{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:6px 0 4px}
.kpi .delta{font-size:12.5px;font-weight:600;border-radius:var(--r-chip);padding:2px 9px;display:inline-block}
.delta.up{background:var(--good-bg);color:var(--good)}.delta.down{background:var(--crit-bg);color:var(--crit)}.delta.flat{background:var(--neut-bg);color:var(--neut)}
.kpi .spark{margin-top:10px;display:block}
.grid-2{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.grid-2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-panel);overflow:hidden}
.mod-edge{height:3px;background:var(--mod,var(--accent))}
.panel-head{display:flex;align-items:center;gap:10px;padding:16px 20px 0}
.panel-head h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.panel-head .hint{font-size:12.5px;color:var(--subtle)}
.panel-body{padding:14px 20px 18px}
/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{text-align:start;font-size:12px;font-weight:600;color:var(--subtle);padding:10px;border-bottom:1px solid var(--border);white-space:nowrap}
table.data th.num,table.data td.num{text-align:end}
table.data td{padding:12px 10px;border-bottom:1px solid var(--hairline);height:46px;vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover td{background:#fafbfc}
table.data tr.sel td{background:var(--accent-soft)}
.mono{font-weight:600;color:var(--accent);white-space:nowrap}
.tile-sm{width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-inline-end:8px}
.tile-sm svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mini-ava{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--sunken);color:var(--neut);align-items:center;justify-content:center;font-size:10px;font-weight:600;margin-inline-end:-6px;border:2px solid #fff}
.bar-cell{display:flex;align-items:center;gap:8px}
.bar-cell .track{flex:1;height:4px;border-radius:99px;background:var(--sunken);min-width:44px}
.bar-cell .fill{height:100%;border-radius:99px;background:var(--mod,var(--accent))}
.pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;padding:12px;font-size:12.5px;color:var(--subtle)}
.pager .pg{border:1px solid var(--border);border-radius:var(--r-ctl);padding:2px 10px;background:var(--surface)}
.pager .pg.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);font-weight:600}
/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-chip);padding:3px 10px;font-size:12.5px;font-weight:600;white-space:nowrap}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.green{background:var(--good-bg);color:var(--good);box-shadow:inset 0 0 0 1px var(--good-edge)}
.chip.amber{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-edge)}
.chip.red{background:var(--crit-bg);color:var(--crit);box-shadow:inset 0 0 0 1px var(--crit-edge)}
.chip.blue{background:var(--accent-soft);color:var(--accent)}
.chip.gray{background:var(--neut-bg);color:var(--neut)}
.chip.gold{background:var(--accent-soft);color:var(--accent)}
.sev-critical{background:var(--crit);color:#fff}.sev-critical::before{background:#fff}
.sev-major{background:var(--crit-bg);color:var(--crit);box-shadow:inset 0 0 0 1px var(--crit-edge)}
.row-acts{white-space:nowrap}
.row-acts a{color:var(--accent);font-weight:600;font-size:12.5px;margin-inline-end:12px;cursor:pointer}
.row-acts a.mut{color:var(--muted)}
/* ---------- kanban ---------- */
.kanban{display:grid;gap:14px;overflow-x:auto}
.kb-col{background:var(--sunken);border-radius:var(--r-panel);min-width:240px;min-width:min(240px,80vw)}
.kb-head{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;font-size:12px;font-weight:600;color:var(--muted)}
.kb-head .bar{flex:1;height:3px;border-radius:2px;background:var(--mod,var(--border));max-width:60px}
.kb-count{margin-inline-start:auto;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 7px;font-size:12px}
.kb-body{padding:6px 10px 12px;display:flex;flex-direction:column;gap:8px;min-height:110px}
.kb-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:grab}
.kb-card:hover{border-color:var(--border-strong)}
.kb-card .id{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.02em}
.kb-card .t{font-weight:600;font-size:13px;margin:3px 0 6px}
.kb-card .m{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.kb-card .m .due{margin-inline-start:auto;color:var(--subtle)}
.kb-empty{color:var(--subtle);font-size:12.5px;padding:14px 6px;text-align:center}
/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tab{padding:10px 16px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.tabpane{display:none}.tabpane.on{display:block}
/* ---------- timeline ---------- */
.tl{position:relative;padding-inline-start:26px}
.tl::before{content:'';position:absolute;inset-inline-start:7px;top:6px;bottom:6px;width:2px;background:var(--hairline)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item::before{content:'';position:absolute;inset-inline-start:-24px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.tl-item.gray::before{background:var(--border-strong)}
.tl-item .t{font-size:12px;color:var(--subtle)}
.tl-item .h{font-size:13.5px;font-weight:600}
.tl-item .h .chip{margin-inline-start:6px}
/* ---------- drawers & modals ---------- */
.scrim{position:fixed;inset:0;background:rgba(14,21,37,.32);z-index:60}
.drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;width:480px;max-width:92vw;background:var(--surface);z-index:61;
box-shadow:0 12px 40px rgba(14,21,37,.18);display:flex;flex-direction:column;animation:slide-in .2s ease-out}
@keyframes slide-in{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
[dir="rtl"] .drawer{animation-name:slide-in-rtl}
@keyframes slide-in-rtl{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{padding:18px 20px;border-bottom:1px solid var(--border)}
.drawer-body{padding:20px;overflow-y:auto;flex:1}
.drawer-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:var(--surface)}
.x-close{margin-inline-start:auto;color:var(--subtle);cursor:pointer;font-size:18px;line-height:1;background:none;border:none}
.modal-back{position:fixed;inset:0;background:rgba(14,21,37,.32);z-index:70;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:var(--surface);border-radius:var(--r-panel);width:640px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(14,21,37,.3);overflow:hidden}
.modal.wide{width:860px}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.modal-head h3{font-size:16px;font-weight:600}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.toasts{position:fixed;bottom:24px;inset-inline-end:24px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--text);color:#fff;border-radius:10px;padding:11px 18px;font-size:13px;font-weight:500;box-shadow:0 12px 32px rgba(14,21,37,.3);display:flex;gap:8px;align-items:center}
.toast::before{content:'\2713';color:#4ade80;font-weight:700}
.toast.warn::before{content:'\26a0';color:#fbbf24}
/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field label .req{color:var(--crit)}
.inp{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--surface);
padding:0 12px;min-height:44px;font-size:13.5px;color:var(--text)}
.inp .ph{color:var(--subtle)}
.inp.err{border-color:var(--crit);background:#fffbfa}
.err-msg{color:var(--crit);font-size:12px;margin-top:5px}
.row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dropzone{border:2px dashed var(--border-strong);border-radius:10px;background:var(--sunken);padding:30px;text-align:center;color:var(--muted)}
.dropzone b{color:var(--accent);font-size:14px}
.dropzone small{display:block;margin-top:4px;font-size:12px}
.file-item{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface);padding:10px 12px;margin-top:8px;font-size:12.5px}
.file-item .rm{margin-inline-start:auto;color:var(--crit);cursor:pointer;font-weight:700}
.attest{display:flex;gap:10px;background:var(--good-bg);border:1px solid var(--good-edge);border-radius:var(--r-ctl);padding:12px;font-size:12.5px;color:#065f46}
.attest .box{width:16px;height:16px;border-radius:4px;border:1.6px solid var(--good);background:#fff;flex:none;margin-top:1px}
.progress{height:5px;border-radius:99px;background:var(--sunken);overflow:hidden}
.progress .fill{height:100%;background:var(--mod,var(--accent));border-radius:99px}
.wiz-steps{display:flex;gap:0;margin-bottom:20px}
.wiz-step{flex:1;text-align:center;font-size:12.5px;color:var(--subtle);position:relative;padding-top:26px}
.wiz-step::before{content:attr(data-n);position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--sunken);color:var(--subtle);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:1}
.wiz-step::after{content:'';position:absolute;top:11px;left:0;right:0;height:2px;background:var(--hairline)}
.wiz-step:first-child::after{left:50%}.wiz-step:last-child::after{right:50%}
.wiz-step.on::before{background:var(--accent);color:#fff}
.wiz-step.done::before{content:'\2713';background:var(--good);color:#fff}
.wiz-step.on{color:var(--text);font-weight:600}
/* ---------- misc ---------- */
.heat{display:grid;gap:4px}
.hcell{min-height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;padding:2px 7px}
.lock-pill{display:inline-flex;align-items:center;gap:6px;background:var(--sunken);color:var(--muted);border-radius:99px;padding:4px 12px;font-size:12px;font-weight:600}
.lock-pill svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.75}
.callout{display:flex;gap:10px;background:var(--accent-soft);border-radius:10px;padding:12px 14px;font-size:12.5px;color:#17389e}
.callout.warn{background:var(--warn-bg);color:var(--warn)}
.callout.bad{background:var(--crit-bg);color:var(--crit)}
.callout svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--subtle);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.empty{border:2px dashed var(--border);border-radius:var(--r-panel);padding:40px;text-align:center;color:var(--muted)}
.empty .big{font-size:34px;margin-bottom:8px;color:var(--border-strong)}
/* ---------- responsive ---------- */
@media (max-width:1280px){
 .app{grid-template-columns:76px minmax(0,1fr)}
 .sb-item .lbl,.sb-brand .pqms,.sb-sec,.sb-count,.sb-item .sb-lock{display:none}
 .sb-item{justify-content:center;padding:10px}
 .grid-2{grid-template-columns:minmax(0,1fr)}
 .content{padding:24px}
 .header{padding:0 20px}
 .context{padding-inline-start:0}
}
@media (max-width:1024px){
 .h-search{display:none}
 .grid-2e{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
 .app{grid-template-columns:minmax(0,1fr)}
 .sidebar{position:fixed;inset-inline-start:0;top:0;bottom:0;z-index:80;transform:translateX(-100%);transition:transform .2s ease-out;width:280px}
 [dir="rtl"] .sidebar{transform:translateX(100%)}
 .sidebar.open{transform:none}
 .menu-btn{display:inline-flex!important}
 .content{padding:16px}
 .title-row h1{font-size:22px}
}
.menu-btn{display:none}

/* ---------- phone header & layout (added) ---------- */
@media (max-width:768px){
 .header{gap:8px;padding:0 12px}
 .crumb,.rolebox .cap{display:none}
 select.sel-ctl.role-select{min-width:0;width:min(200px,52vw);height:36px;font-size:13px}
 .title-divider{display:none}
 .title-ar{flex-basis:100%;margin-top:0}
 .title-row .toolbar{margin-inline-start:0;width:100%}
 .context{padding-inline-start:0}
 .row-2,.row-3{grid-template-columns:minmax(0,1fr)}
 .modal-back{padding:12px}
 .drawer{width:100%;max-width:100%}
 .panel-body{overflow-x:auto}
 .filter-bar{gap:8px}
 .panel-body[style*="display:flex"]{flex-wrap:wrap}
}
/* page layouts with fixed-width columns written inline stack on narrow screens */
@media (max-width:1024px){
 .grid-2[style],.grid-2e[style]{grid-template-columns:minmax(0,1fr)!important}
}
/* ---------- CAPA kanban cards (added) ---------- */
.kb-card .t{font-weight:600;font-size:13.5px;line-height:1.4;margin:4px 0 8px;color:var(--text)}
.kb-card .m{gap:8px}
.kb-card .m .mini-ava{margin:0}
.kb-card .src{display:inline-flex;align-items:center;gap:4px;color:var(--subtle)}
.kb-card .src svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.kb-card .due{display:inline-flex;align-items:center;gap:4px}
.kb-card .due svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.kb-card .due.warn{color:var(--warn);font-weight:600}
.kb-card .due.crit{color:var(--crit);font-weight:600}
.kb-card .due.done{color:var(--good)}
.kb-card a.cr{font-size:12.5px;font-weight:600}
.kb-head .lab{white-space:nowrap}

/* ---------- language toggle & RTL (added) ---------- */
.lang-seg{display:inline-flex;background:var(--sunken);border:1px solid var(--border);border-radius:8px;padding:2px;flex:none}
.lang-seg button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;height:28px;padding:0 10px;border-radius:6px;color:var(--muted);cursor:pointer}
.lang-seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.header .lang-seg{margin-inline-start:auto}
.header .lang-seg + .rolebox{margin-inline-start:0}
html[dir="rtl"] body{letter-spacing:0;line-height:1.6}
html[dir="rtl"] .title-row h1,html[dir="rtl"] .kpi .val,html[dir="rtl"] .big{letter-spacing:0}
html[dir="rtl"] svg{direction:ltr}
html[dir="rtl"] .mono,html[dir="rtl"] .kb-card .id,html[dir="rtl"] kbd{unicode-bidi:isolate}
html[dir="rtl"] .wiz-step::before{left:50%}
html[dir="rtl"] .h-search kbd{direction:ltr}
@media (max-width:768px){
 select.sel-ctl.role-select{width:min(170px,42vw)}
 .lang-seg button{padding:0 8px}
}