/* P&P Management — modern design system: clean neutral canvas · deep green · emerald accent.
   Font = Cairo (modern Arabic + Latin, variable), bundled offline in fonts/. RTL. */
@font-face{font-family:"Cairo";src:url("fonts/cairo-arabic.woff2") format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0660-0669,U+200C-200F}
@font-face{font-family:"Cairo";src:url("fonts/cairo-latin.woff2") format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F}
:root{
  --bg:#eef1f6; --card:#ffffff;                 /* cool neutral canvas · white surface */
  --navy:#15332b; --navy-d:#0e2620;             /* PRIMARY = deep green (var name kept for cascade) */
  --ink:#1e293b; --slate:#64748b; --muted:#94a3b8;   /* slate text scale */
  --accent:#0e9f6e; --accent-d:#0b7d57;         /* modern emerald */
  --line:#e8edf3; --border:#d4dde8;             /* hairline · border */
  --light:#eef2f8; --zebra:#f6f8fb;             /* chip/hover · zebra */
  --ok:#16a34a; --danger:#dc2626;               /* green · red */
  --font:"Cairo","Segoe UI","Tahoma",Arial,sans-serif;
  --display:"Cairo","Segoe UI",Arial,sans-serif;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07);
  --shadow-lg:0 24px 56px rgba(16,24,40,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(1200px 600px at 100% -10%,rgba(14,159,110,.06),transparent 60%),radial-gradient(900px 520px at -8% 110%,rgba(21,51,43,.05),transparent 55%);
  background-attachment:fixed}
/* modern bold display on the brand + headings */
.brand-title,.page-head h1,.card h2,.auth-logo,.sp-head b{font-family:var(--display);font-weight:800;letter-spacing:0}

/* header */
.app-header{display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;padding:12px 24px;box-shadow:0 2px 10px rgba(0,0,0,.14);border-bottom:3px solid var(--accent)}
.brand{display:flex;align-items:center;gap:13px}
.brand-logo{height:42px;background:#fff;border-radius:8px;padding:4px}
.brand-title{font-size:25px;font-weight:700}
.brand-sub{font-size:15.5px;opacity:.85}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}
/* prominent global search in the header (replaces the old tab) */
.header-search{position:relative;flex:1 1 320px;max-width:520px;min-width:200px}
.header-search>input{width:100%;font-family:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.header-search>input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,159,110,.2)}
.gs-results{position:absolute;top:100%;inset-inline:0;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(40,56,92,.16);max-height:62vh;overflow:auto;z-index:60}
.gs-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.gs-item:last-child{border-bottom:none}
.gs-item:hover{background:var(--light)}
.gs-item .gs-name{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-item .gs-meta{color:var(--slate);font-size:13px;white-space:nowrap}
.gs-empty,.gs-more{padding:11px 13px;color:var(--slate);font-size:14px}
.gs-more{border-top:1px solid var(--line);background:var(--zebra)}
.hk-btn{font-family:var(--font);font-size:16px;border:none;border-radius:10px;padding:8px 14px;cursor:pointer;transition:.15s;white-space:nowrap}
.hk-btn--ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.34)}
.hk-btn--ghost:hover{background:rgba(255,255,255,.26)}
/* on-card / on-modal (light surfaces) — the ghost style is for the navy header only */
.hk-btn--soft{background:var(--light);color:var(--navy);border:1px solid var(--line)}
.hk-btn--soft:hover{background:#e3e7ee}
.hk-btn--big{background:var(--navy);color:#fff;font-size:19px;padding:11px 20px}
.hk-btn--big:hover{background:var(--navy-d)}

/* layout: sidebar + view */
.layout{display:flex;min-height:calc(100vh - 122px)}
.nav{width:230px;flex-shrink:0;background:var(--card);border-inline-start:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--slate);font-size:19px;padding:11px 14px;border-radius:9px;transition:.15s}
.nav a .ic{font-size:21.5px;width:22px;text-align:center}
.nav a:hover{background:var(--light);color:var(--navy)}
.nav a.active{background:var(--navy);color:#fff;font-weight:700;box-shadow:inset -3px 0 0 var(--accent)}
/* grouped sidebar: section labels + Settings pinned to the bottom */
.nav-label{font-size:12px;font-weight:700;color:var(--slate);letter-spacing:.4px;padding:15px 14px 5px;text-transform:none;opacity:.8}
.nav .nav-bottom{margin-top:auto;border-top:1px solid var(--line);margin-block-start:14px;padding-top:16px}
.view-wrap{flex:1;min-width:0;padding:24px 28px;overflow:auto}
#view{max-width:1180px;margin:0 auto}

/* page head */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:16px;flex-wrap:wrap}
.page-head h1{color:var(--navy);font-size:32.5px;margin:0}
.page-head .sub{color:var(--slate);font-size:18px;margin:4px 0 0}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2{color:var(--navy);font-size:24px;margin:0 0 12px;border-bottom:2px solid var(--accent);padding-bottom:7px}
.card h3{color:var(--slate);font-size:20.5px;margin:16px 0 9px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pill{display:inline-block;background:var(--light);color:var(--navy);border-radius:6px;padding:2px 10px;font-size:15.5px;font-weight:700}
.badge-warn{display:inline-block;background:#fdecea;color:#b23;border:1px solid #f3c9c4;border-radius:5px;padding:1px 7px;font-size:13px;font-weight:700;cursor:help;white-space:nowrap}
.ready-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
.ready-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 15px;text-decoration:none;display:block}
.ready-card b{font-size:29px;display:block} .ready-card span{color:var(--slate);font-size:15.5px}
.ready-card.ok b{color:var(--ok)} .ready-card.warn b{color:#b23} .ready-card.info b{color:var(--navy)}
.muted{color:var(--muted);font-size:17px}
.empty-state{color:var(--muted);text-align:center;padding:26px;font-size:18px;background:var(--light);border-radius:10px}
.empty-state .empty-action{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
/* first-run onboarding card */
.onboard-card{border-inline-start:5px solid var(--navy)}
.onboard h2{margin:0 0 4px;border:none;padding:0}
.onboard-steps{list-style:none;counter-reset:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.onboard-steps li{display:flex;flex-direction:column;gap:7px;align-items:flex-start;background:var(--light);border:1px solid var(--line);border-radius:11px;padding:15px}
.onboard-steps li b{color:var(--navy);font-size:17px}
.onboard-steps li span{color:var(--slate);font-size:14.5px;line-height:1.5}
.onboard-steps .onboard-btns{display:flex;gap:8px;flex-wrap:wrap}

/* dashboard */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.stat-card{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;transition:.15s;box-shadow:var(--shadow)}
.stat-card:hover{border-color:var(--navy);transform:translateY(-1px)}
.stat-card b{color:var(--navy);font-size:36px;line-height:1}
.stat-card span{color:var(--slate);font-size:17px}
/* dashboard status-distribution bar */
.status-bar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--light)}
.status-bar .seg{min-width:3px;transition:flex .3s}
.status-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.status-legend .lg{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--slate)}
.status-legend .lg i{width:13px;height:13px;border-radius:3px;display:inline-block}
.status-legend .lg b{color:var(--ink)}
/* dashboard launchpad — quick actions */
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.qa{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:16px;font-weight:700;padding:11px 18px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;cursor:pointer;transition:.15s}
.qa:hover{border-color:var(--navy);transform:translateY(-1px)}
.qa.qa-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.qa.qa-primary:hover{background:var(--navy-d)}
/* header dropdown (native <details>) */
.hdr-menu{position:relative}
.hdr-menu>summary{list-style:none;cursor:pointer}
.hdr-menu>summary::-webkit-details-marker{display:none}
.hdr-menu-pop{position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(40,56,92,.16);padding:6px;min-width:190px;z-index:60;display:flex;flex-direction:column;gap:2px}
.hdr-menu-pop button{font-family:inherit;font-size:15px;text-align:start;padding:9px 12px;border:none;background:none;color:var(--ink);border-radius:7px;cursor:pointer}
.hdr-menu-pop button:hover{background:var(--light);color:var(--navy)}
.hdr-menu-pop button:disabled{cursor:default;background:var(--light);color:var(--navy)}
/* org switcher (header): each org row is name + role/owner pill, right-aligned in RTL.
   max-width caps it so a long Arabic org name wraps onto a second line inside the row
   instead of stretching the popover past the viewport edge (2026-07-15 review finding). */
.org-switch-pop{min-width:240px;max-width:min(320px,92vw)}
.hdr-menu-pop button.hdr-menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.hdr-menu-pop button.hdr-menu-item>span:first-child{flex:1;min-width:0;white-space:normal;overflow-wrap:break-word;text-align:start}
.hdr-menu-pop button.hdr-menu-item>span.pill{flex:none}
/* a11y: a clear keyboard focus ring (offset so it shows even on dark/navy controls) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:5px}
/* keyboard-shortcuts help overlay */
.kbd-help{position:fixed;inset:0;background:rgba(40,56,92,.35);display:flex;align-items:center;justify-content:center;z-index:200}
.kbd-box{background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(40,56,92,.3);min-width:340px;max-width:440px;overflow:hidden}
.kbd-head{display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;padding:12px 16px}
.kbd-head b{font-size:17px}
.kbd-box table{width:100%;border-collapse:collapse}
.kbd-box td{padding:9px 16px;border-bottom:1px solid var(--line);font-size:15px}
.kbd-box .kbd-keys{width:130px;white-space:nowrap}
kbd{display:inline-block;background:var(--light);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 8px;font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);min-width:18px;text-align:center}
/* version diff modal (reuses .kbd-help / .kbd-box overlay) */
.diff-body{max-height:62vh;overflow:auto;padding:6px 4px}
.diff-list{list-style:none;margin:0;padding:0}
.diff-list li{padding:8px 14px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6}
.diff-list li:last-child{border-bottom:none}
.d-old{color:#b42318;text-decoration:line-through} .d-new{color:#1a7a43;font-weight:700}
.d-add{color:#1a7a43;font-weight:700} .d-del{color:#b42318} .d-chg{color:#9a6212}
/* pre-generation validation checklist */
.preflight{border-radius:10px;padding:12px 15px;margin-bottom:14px;font-size:15px;border:1px solid}
.preflight.ok{background:#e9f6ef;border-color:#bfe3cd;color:#1a7a43}
.preflight.warn{background:#fdf3e7;border-color:#f3d9b0;color:#9a6212}
.preflight b{display:block;margin-bottom:4px}
.preflight ul{margin:6px 0 0;padding-inline-start:20px}
.preflight li{margin:3px 0}
/* Settings hub cards */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.set-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;transition:.15s;box-shadow:var(--shadow)}
.set-card:hover{border-color:var(--navy);transform:translateY(-1px)}
.set-card .set-ic{font-size:30px;line-height:1;flex:none}
.set-card .set-txt{display:flex;flex-direction:column;gap:3px}
.set-card .set-txt b{color:var(--navy);font-size:19px}
.set-card .set-txt span{color:var(--slate);font-size:15px}

/* buttons */
.add{background:var(--light);color:var(--accent-d);border:1px dashed var(--accent);border-radius:7px;padding:7px 13px;font-family:var(--font);font-size:17px;cursor:pointer}
.add:hover{background:#e7dfcc}
.del{background:#f6e6e0;color:var(--danger);border:none;border-radius:6px;padding:4px 10px;font-family:var(--font);font-size:15.5px;cursor:pointer}
.del:hover{background:#efd5cd}
.mini{background:var(--light);color:var(--navy);border:none;border-radius:6px;padding:4px 10px;font-family:var(--font);font-size:15.5px;cursor:pointer;text-decoration:none;font-weight:700}
.reorder{background:var(--light);color:var(--navy);border:none;border-radius:5px;padding:2px 6px;font-size:14.5px;cursor:pointer}
.reorder:hover{background:#e7dfcc}
td.nowrap{white-space:nowrap}
.mini:hover{background:#e7dfcc}
.row-actions{margin:10px 0;display:flex;gap:8px;flex-wrap:wrap}

/* forms */
label{display:block;color:var(--slate);font-size:17px;margin:0 0 4px;font-weight:600}
input,textarea,select{width:100%;font-family:var(--font);font-size:16px;color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:10px 13px;background:#fff;transition:.15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,159,110,.16)}
textarea{min-height:70px;resize:vertical;line-height:1.7}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 16px}
.grid2>div,.grid3>div{margin-bottom:4px}

/* tables */
table.tbl{width:100%;border-collapse:collapse;margin-top:6px}
table.tbl th{background:var(--slate);color:#fff;font-weight:700;font-size:17px;padding:8px 10px;border:1px solid var(--border);text-align:center}
table.tbl td{border:1px solid var(--line);padding:5px 8px;vertical-align:middle}
table.tbl td.ctr{text-align:center}
table.tbl td input{border:1px solid transparent;border-radius:6px}
table.tbl td input:focus{border-color:var(--navy)}
table.tbl tr:nth-child(even) td{background:var(--zebra)}
table.tbl a{color:var(--navy);font-weight:700;text-decoration:none}

/* org tree */
.tree{margin-top:6px}
.tree-row{display:flex;align-items:center;gap:8px;padding:7px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;background:#fff;flex-wrap:wrap}
.tree-kind{background:var(--light);color:var(--navy);font-size:14.5px;font-weight:700;border-radius:5px;padding:3px 8px;white-space:nowrap}
.tree-row .t-name{flex:1;min-width:160px}
.tree-row .t-code{width:90px}
.tree-row select{width:auto}
.tree-row .docn{color:var(--slate);font-size:15.5px}
.tree-row .t-name-ro{flex:1;min-width:160px;font-weight:600;color:var(--ink)}
.caret{background:none;border:none;color:var(--slate);font-size:18px;cursor:pointer;width:22px;padding:0}
.struct-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
/* tree/chart view switch */
.view-switch{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.view-switch .vs{border:none;background:#fff;color:var(--slate);font-family:inherit;font-size:15px;font-weight:700;padding:7px 14px;cursor:pointer}
.view-switch .vs+.vs{border-inline-start:1px solid var(--line)}
.view-switch .vs.on{background:var(--navy);color:#fff}
/* org chart: nodes as boxes connected by lines (pure CSS connectors) */
.orgchart-wrap{overflow:auto;padding:14px 6px 6px}
.orgchart{display:inline-block;min-width:100%;direction:ltr;text-align:center}
.orgchart ul{display:flex;justify-content:center;position:relative;padding-top:26px;margin:0;list-style:none}
.orgchart>ul{padding-top:0}
.orgchart li{list-style:none;position:relative;padding:26px 12px 0;display:flex;flex-direction:column;align-items:center}
.orgchart li::before,.orgchart li::after{content:"";position:absolute;top:0;width:50%;height:26px;border-top:2px solid var(--border)}
.orgchart li::before{inset-inline-start:50%}
.orgchart li::after{inset-inline-end:50%;border-inline-end:2px solid var(--border)}
.orgchart li:only-child::before,.orgchart li:only-child::after{display:none}
.orgchart li:only-child{padding-top:26px}
.orgchart li:first-child::after,.orgchart li:last-child::before{border:0 none}
.orgchart li:last-child::after{border-radius:0 6px 0 0}
.orgchart li:first-child::before{border-radius:6px 0 0 0;border-inline-start:2px solid var(--border)}
.orgchart ul ul::before{content:"";position:absolute;top:0;inset-inline-start:50%;height:26px;border-inline-start:2px solid var(--border)}
.orgchart>ul>li::before,.orgchart>ul>li::after{display:none}
.orgchart>ul>li{padding-top:0}
.oc-node{position:relative;display:inline-block;min-width:158px;max-width:230px;background:var(--card);border:1.5px solid var(--line);border-top:4px solid var(--navy);border-radius:11px;padding:9px 12px 11px;box-shadow:0 1px 4px rgba(40,56,92,.08);direction:rtl;text-align:center}
.oc-k-office{border-top-color:#1d3c34} .oc-k-sector{border-top-color:#356054}
.oc-k-general-directorate{border-top-color:#5b8073} .oc-k-department{border-top-color:var(--accent)} .oc-k-section{border-top-color:#a99d86}
.oc-k-unit{border-top-color:#8a97a6} .oc-k-committee{border-top-color:#9a6212}
.oc-head{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}
.oc-kind{font-size:12.5px;font-weight:700;color:var(--navy);background:var(--light);border-radius:5px;padding:2px 8px;white-space:nowrap}
.oc-caret{border:1px solid var(--line);background:#fff;border-radius:6px;min-width:22px;height:21px;padding:0 5px;cursor:pointer;font-weight:700;line-height:1;color:var(--navy);font-family:inherit;font-size:12.5px}
.oc-name{display:block;font-weight:700;color:var(--ink);font-size:15.5px;text-decoration:none;line-height:1.35}
.oc-name:hover{color:var(--navy);text-decoration:underline}
.oc-code{font-size:12.5px;color:var(--slate);margin-top:3px}
.oc-headname{font-size:12.5px;color:var(--accent-d);font-weight:700;margin-top:3px}
.oc-counts{display:flex;gap:5px;justify-content:center;margin-top:7px;flex-wrap:wrap}
.oc-c{font-size:11.5px;border-radius:20px;padding:1px 9px;font-weight:700}
.oc-c-pr{background:#e7ede5;color:var(--navy)} .oc-c-po{background:#fdf0e3;color:#9a6212}
.tree-leaf{background:var(--card)}
.leaf-tag{font-size:13px;font-weight:700;border-radius:5px;padding:2px 8px;white-space:nowrap;color:#fff}
.leaf-tag.tg-pr{background:var(--navy)} .leaf-tag.tg-po{background:var(--slate)}
.leaf-name{flex:1;min-width:140px;color:var(--navy);font-weight:600;text-decoration:none}
.leaf-name:hover{text-decoration:underline}
.leaf-code{color:var(--slate);font-size:15.5px}
.tree-roles{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px 7px;margin-bottom:7px}
.rl-lbl{color:var(--slate);font-size:14.5px;font-weight:700}
.role-chip{background:var(--light);color:var(--navy);border-radius:999px;padding:3px 11px;font-size:15.5px}
.role-chip.ed{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 9px}
.role-chip.ed input{width:110px;border:none;background:transparent;font-size:15.5px;padding:2px}
.role-chip .x{background:none;border:none;color:#b23;cursor:pointer;font-size:17px}
.role-chip.head{background:var(--accent);color:#fff;font-weight:700}
/* per-unit details panel (mandate + roles/head form, expanded under a tree row) */
.unit-detail{border:1px solid var(--line);border-radius:9px;background:var(--light);padding:12px 14px;margin:0 0 7px}
.unit-detail label{margin-top:8px}
.unit-detail table.tbl{margin-bottom:4px}
.head-badge{background:var(--accent);color:#fff;border-radius:999px;padding:2px 10px;font-size:14.5px;font-weight:700;white-space:nowrap}
.mini.on{background:var(--navy);color:#fff}
.add.sm{padding:3px 9px;font-size:14.5px}
.qa.sm{padding:3px 9px;font-size:14.5px}
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.filter-bar label{margin:0;white-space:nowrap}
.filter-bar select{width:auto;min-width:130px}
.gen-set{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:3px 0}
.gen-set b{color:var(--navy)}

/* bpmn editor */
.bpmn-editor{width:100%;height:460px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:8px;position:relative;overflow:hidden}
.bpmn-preview{width:100%;height:360px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:8px;overflow:hidden;position:relative}
.bpmn-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:18px}
.bjs-powered-by{display:none!important}
/* inline preview is read-only: hide the modeler's editing affordances (the full editor keeps them) */
.bpmn-preview .djs-palette,.bpmn-preview .djs-context-pad,.bpmn-preview .djs-direct-editing-parent{display:none!important}
.bpmn-fulledit{height:calc(100vh - 360px);min-height:480px}
.bpmn-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bpmn-toolbar .tb-group{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff}
.bpmn-toolbar .tb-group .mini{margin:0}
.bpmn-dirty{font-size:14px;font-weight:700;padding:5px 12px;border-radius:20px;white-space:nowrap}
.bpmn-dirty.synced{background:#e9f6ef;color:#1a7a43}
.bpmn-dirty.dirty{background:#fdf3e7;color:#9a6212}
.bpmn-warn{background:#b42318;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:help}
/* symbols legend */
.bpmn-legend{margin:6px 0 10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 10px}
.bpmn-legend>summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:15px;padding:5px 0}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 16px;padding:8px 2px;font-size:14px;color:var(--ink)}
.legend-grid .lg-ic{display:inline-block;min-width:20px;text-align:center;color:var(--navy);font-weight:700}
/* colour tasks by responsible lane (view-only marker classes) */
.djs-element.bpmn-c0 .djs-visual>rect{fill:#e8eef7 !important}
.djs-element.bpmn-c1 .djs-visual>rect{fill:#fdf0e3 !important}
.djs-element.bpmn-c2 .djs-visual>rect{fill:#e9f6ef !important}
.djs-element.bpmn-c3 .djs-visual>rect{fill:#f3e8f7 !important}
.djs-element.bpmn-c4 .djs-visual>rect{fill:#fdeaea !important}
.djs-element.bpmn-c5 .djs-visual>rect{fill:#e7f5f8 !important}
.djs-element.bpmn-c6 .djs-visual>rect{fill:#fbf6e0 !important}
.djs-element.bpmn-c7 .djs-visual>rect{fill:#eef0f2 !important}
.bpmn-edit-wrap{display:flex;gap:12px;align-items:stretch}
.bpmn-edit-wrap .bpmn-editor{flex:1;min-width:0;margin-top:0}
.bpmn-props{width:280px;flex-shrink:0;border:1px solid var(--line);border-radius:10px;padding:14px 15px;background:var(--card);overflow:auto;height:calc(100vh - 360px);min-height:480px}
.bpmn-props h4{color:var(--navy);margin:0 0 8px;font-size:19px;border-bottom:1px solid var(--line);padding-bottom:6px}
.bpmn-props label{margin-top:9px;font-size:15.5px}
.bpmn-props .pp-empty{color:var(--muted);font-size:17px;text-align:center;padding:30px 6px;line-height:1.7}
@media(max-width:820px){.bpmn-edit-wrap{flex-direction:column}.bpmn-props{width:auto;height:auto;min-height:0}}
/* full-screen editor: canvas + side info panel fill the viewport */
.bpmn-edit-wrap.bpmn-full{position:fixed;inset:0;z-index:1200;background:#fff;padding:14px;margin:0;gap:12px}
.bpmn-edit-wrap.bpmn-full .bpmn-editor,.bpmn-edit-wrap.bpmn-full .bpmn-props{height:auto;min-height:0}
.bpmn-edit-wrap.bpmn-full .bpmn-props{width:320px}
.bpmn-full-exit{position:fixed;top:16px;left:16px;z-index:1300;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.flow-hint{background:#f4eedf;border:1px solid #e4d9c1;border-radius:8px;color:#5e4d2f;font-size:16px;padding:8px 12px;margin:8px 0}
/* friendly steps guidance: reassurance + a plain-language type legend */
.steps-help{background:#f4eedf;border:1px solid #e4d9c1;border-radius:9px;padding:11px 14px;margin:8px 0 14px}
.steps-help .sh-lead{margin:0 0 9px;color:#5e4d2f;font-size:16px;line-height:1.6}
.type-legend{display:flex;flex-wrap:wrap;gap:8px}
.type-legend .tl{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:14px;color:var(--ink)}
.type-legend .tl-ic{color:var(--navy);font-size:15px;min-width:16px;text-align:center}
/* in-row hint telling the author what a step still needs */
.step-hint{margin-top:4px;font-size:13px;color:#9a6212;font-weight:700}
/* drag-to-reorder handle + advanced toggle */
.drag-handle{cursor:grab;color:var(--slate);font-size:16px;user-select:none;margin-inline-end:4px}
.drag-handle:active{cursor:grabbing}
tr[ondrop].drag-target td{box-shadow:inset 0 2px 0 var(--navy)}
.adv-toggle{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--slate);cursor:pointer}
.adv-toggle input{width:16px;height:16px}

/* tabs (editors) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs .tab{background:none;border:none;border-bottom:3px solid transparent;color:var(--slate);font-family:var(--font);font-size:19px;padding:11px 16px;cursor:pointer}
.tabs .tab:hover{color:var(--navy)}
.tabs .tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:700}

/* breadcrumb */
.crumb{display:flex;gap:6px;align-items:center;color:var(--slate);font-size:17px;margin-bottom:10px}
.crumb a{color:var(--navy);text-decoration:none}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 22px;border-radius:10px;font-size:18px;opacity:0;pointer-events:none;transition:.25s;z-index:999;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* footer */
.app-footer{text-align:center;color:var(--muted);font-size:15.5px;padding:14px;border-top:1px solid var(--line);background:var(--card)}
@media(max-width:820px){.layout{flex-direction:column}.nav{width:auto;flex-direction:row;overflow-x:auto}.two-col,.grid2,.grid3{grid-template-columns:1fr}}

/* auth: login overlay, header user box, role gating */
.auth-locked{overflow:hidden}
.auth-overlay{position:fixed;inset:0;z-index:2000;background:linear-gradient(135deg,var(--navy),var(--navy-d));display:flex;align-items:center;justify-content:center;padding:20px}
.auth-boot{opacity:.85;animation:auth-boot-pulse 1.4s ease-in-out infinite}
@keyframes auth-boot-pulse{0%,100%{opacity:.35}50%{opacity:.95}}
.auth-box{background:#fff;border-radius:20px;box-shadow:0 18px 60px rgba(0,0,0,.4);padding:30px 30px 26px;width:min(400px,100%);display:flex;flex-direction:column}
.auth-logo{color:var(--navy);font-size:23px;font-weight:700;text-align:center}
.auth-sub{color:var(--slate);font-size:15px;text-align:center;margin:4px 0 18px}
.auth-box label{margin-top:12px}
.auth-box .hk-btn--big{margin-top:18px;justify-content:center}
.auth-err{color:var(--danger);font-size:14px;min-height:20px;margin-top:8px;text-align:center}
.auth-userbox{display:inline-flex;align-items:center;gap:8px}
.auth-user{color:#fff;font-size:14px;font-weight:600}
.auth-role{background:rgba(255,255,255,.22);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:700}
.auth-save{color:#d6ffe6;font-size:13px;opacity:0;transition:.2s}
.auth-save.show{opacity:1}
body.role-viewer .add,body.role-viewer .del,body.role-viewer .reorder,body.role-viewer .js-mutate{display:none!important}
body.role-viewer .ro-hint{display:block;background:#fff8e6;border:1px solid #f3d9a0;color:#7a5a12;border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:14px}
.ro-hint{display:none}

/* backup status badge (header) + backup page */
.bk-badge{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;font-weight:700;border-radius:8px;padding:8px 13px;border:1px solid transparent;white-space:nowrap}
.bk-badge.bk-ok{background:rgba(47,125,79,.18);color:#d6ffe6;border-color:rgba(255,255,255,.3)}
.bk-badge.bk-warn{background:rgba(245,166,35,.22);color:#ffe9c2;border-color:rgba(255,255,255,.3)}
.bk-badge.bk-off{background:rgba(178,51,51,.25);color:#ffd9d4;border-color:rgba(255,255,255,.3)}
.bk-status{list-style:none;margin:0;padding:0;line-height:2.1}
.bk-status li{border-bottom:1px solid var(--line);padding:4px 0}
.bk-status b{color:var(--navy)}

/* step type selector + decision branch editor */
.step-type{min-width:120px}
.step-kind{min-width:120px}
.timer-tr td{background:#f3efe3;border-top:none}
.timer-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 6px}
.timer-box>b{color:var(--navy);white-space:nowrap}
.branch-tr td{background:#f4f0e5;border-top:none}
.branch-box{padding:8px 6px;display:flex;flex-direction:column;gap:7px}
.branch-box>b{color:var(--navy)}
.branch-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.branch-row input{max-width:240px}
.branch-row select{max-width:280px}
.branch-row .arr{color:var(--slate);font-weight:700}
.docs-tr td{background:#eff3e9;border-top:none}
.docs-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 6px}
.docs-box{flex-direction:column;align-items:stretch}
.docs-box .dlbl{color:var(--ok);font-weight:700;white-space:nowrap}
.doc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-row input{max-width:240px}
.doc-row .doc-code{max-width:150px}
.doc-row select{width:auto;min-width:110px}
/* DoA (decision picker) + step->system/resource links: reuse .branch-box/.branch-row (layout),
   .role-chip.ed + .x (chip + delete, borrowed from the org-structure role chips) and .adv-toggle
   (checkbox + label); only the row tint below is genuinely new. */
.doa-tr td{background:#eef0f7;border-top:none}
.links-tr td{background:#e9f5f0;border-top:none}

/* governance: status badges, approval/owner panel, comments */
.gov-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gov-det{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.gov-det summary{cursor:pointer;color:var(--navy);font-weight:700;font-size:15px}
.gov-det[open] summary{margin-bottom:8px}
.status-badge{display:inline-block;border-radius:6px;padding:2px 12px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.status-badge.st-draft{background:var(--slate)}
.status-badge.st-review{background:var(--accent)}
.status-badge.st-approved{background:var(--ok)}
.status-badge.st-published{background:var(--navy)}
.lk-approve{background:var(--ok)!important;color:#fff!important;border-color:var(--ok)!important}
.cmt{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;background:#fff}
.cmt.resolved{opacity:.6;background:var(--light)}
.cmt-head{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:3px}
.cmt-add{display:flex;gap:8px;margin-top:8px}
.cmt-add input{flex:1}

/* edit-lock bar (top of an editor) */
.lock-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:15px;font-weight:600}
.lock-bar.lk-free{background:#fff8e6;border:1px solid #f3d9a0;color:#7a5a12}
.lock-bar.lk-mine{background:#e6f2ec;border:1px solid #b9dcc7;color:var(--ok)}
.lock-bar.lk-other{background:#fdecea;border:1px solid #f3c9c4;color:#b23}
.lock-bar span{flex:1;min-width:180px}

/* manual design settings grid */
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 16px;margin-bottom:6px}
.cfg-grid .sp-check{padding:3px 0}

/* per-form JSON toolbar (copy/paste the current editor object) */
.form-json{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.form-json b{color:var(--navy);white-space:nowrap}
.form-json .muted{flex:1;min-width:180px;margin:0}

/* ── Smart Paste (لصق ذكي) ── */
.sp-import{width:100%;min-height:200px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15.5px;line-height:1.5;
  direction:ltr;text-align:left;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--card);resize:vertical}
.sp-import:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(29,60,52,.16)}
.sp-import-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.sp-import-bar label{font-size:17px;color:var(--muted)}
.sp-import-bar select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:var(--font);max-width:280px}
.sp-check{display:inline-flex;align-items:center;gap:6px;color:var(--ink)!important}
.sp-list{margin:6px 0 12px;padding-inline-start:18px;line-height:1.9}
.sp-list li{margin-bottom:3px}
.sp-overlay{position:fixed;inset:0;background:rgba(20,28,45,.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:18px}
.sp-modal{background:#fff;border-radius:14px;width:min(680px,100%);max-height:90vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.3);padding:18px 20px}
.sp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sp-head b{color:var(--navy);font-size:21.5px}
.sp-x{border:none;background:var(--light);color:var(--navy);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:21.5px;line-height:1}
.sp-x:hover{background:var(--navy);color:#fff}
.sp-hint{color:var(--muted);font-size:16px;margin:2px 0 10px;line-height:1.7}
.sp-text{width:100%;min-height:180px;font-family:var(--font);font-size:18px;line-height:1.7;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--card);resize:vertical}
.sp-text:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(29,60,52,.16)}
.sp-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.sp-live{min-height:20px;margin:6px 2px 0;font-size:16px}
.sp-live .sp-ok{color:var(--ok);font-weight:700}
.sp-live .sp-bad{color:var(--danger);font-weight:700}
.sp-tag{display:inline-block;border-radius:5px;padding:1px 8px;font-size:14.5px;font-weight:700;margin-inline-end:6px}
.sp-tag.new{background:#e6f2ec;color:var(--ok)}
.sp-tag.upd{background:#fdeede;color:#9a5b15}
.sp-import-bar code,.muted code{background:var(--light);border-radius:4px;padding:1px 5px;font-size:15px;color:var(--navy)}

/* ════════ polish: motion · depth · premium micro-details ════════ */
::selection{background:rgba(176,125,42,.24)}
/* warm, slim scrollbars */
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#cdbfa2;border-radius:9px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}
/* gentle staggered settle on page render (subtle + fast, not distracting) */
@keyframes riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .card,.stat-card,.ready-card,.set-card,.onboard-steps li{animation:riseIn .34s cubic-bezier(.2,.75,.25,1) both}
  .stat-grid .stat-card:nth-child(2),.ready-grid .ready-card:nth-child(2),.set-grid .set-card:nth-child(2),.onboard-steps li:nth-child(2){animation-delay:.05s}
  .stat-grid .stat-card:nth-child(3),.ready-grid .ready-card:nth-child(3),.set-grid .set-card:nth-child(3),.onboard-steps li:nth-child(3){animation-delay:.1s}
  .stat-grid .stat-card:nth-child(4),.ready-grid .ready-card:nth-child(4){animation-delay:.15s}
  .card:nth-of-type(2){animation-delay:.04s} .card:nth-of-type(3){animation-delay:.09s} .card:nth-of-type(n+4){animation-delay:.13s}
}
/* clearer hover lift on interactive cards */
.stat-card:hover,.set-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ready-card{transition:.16s} .ready-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border)}
.gs-item{transition:background .12s}
/* depth on primary (pine) buttons */
.hk-btn--big{box-shadow:0 2px 9px rgba(20,43,37,.22);transition:.16s}
.hk-btn--big:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(20,43,37,.28)}
.qa.qa-primary{box-shadow:0 2px 9px rgba(20,43,37,.2)}
/* refined card heading: brass underline becomes a soft gradient rule */
.card h2{border-bottom:none;position:relative;padding-bottom:9px}
.card h2::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(to var(--_d,left),var(--accent),rgba(176,125,42,.12));border-radius:2px}
[dir="rtl"] .card h2::after{background:linear-gradient(to left,var(--accent),rgba(176,125,42,.12))}
/* brand lockup refinement on the pine header */
.brand-title{letter-spacing:.3px}
.brand-sub{letter-spacing:.4px;font-weight:500}
/* pills + status badges: a touch more refined */
.pill{letter-spacing:.2px;border:1px solid rgba(176,125,42,.18)}
.status-badge{letter-spacing:.3px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* tables: warmer header with a hairline, softer zebra */
table.tbl th{background:linear-gradient(var(--slate),#6e6453);letter-spacing:.2px;border-color:var(--border)}
/* inputs: smoother focus */
input,textarea,select{transition:border-color .14s,box-shadow .14s,background .14s}
/* nav: a hair more lively */
.nav a{transition:background .14s,color .14s,box-shadow .14s}

/* login language toggle */
.auth-lang{margin-top:16px;align-self:center;background:none;border:none;color:var(--accent-d);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline}
.auth-lang:hover{color:var(--accent)}

/* ============================================================================
   Responsive layer (wave 4): phones, Samsung Fold (344px cover / 673px inner),
   tablets. Appended so it overrides the base rules by cascade. Strategy: the
   page never scrolls horizontally; wide content (tables, org chart, BPMN)
   scrolls inside its own container; touch targets stay >= 44px.
   ========================================================================== */
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* --- tablets and below (also the Fold unfolded, ~673px) --- */
@media (max-width:1024px){
  .view-wrap{padding:18px 16px}
  .header-search{flex:1 1 200px;min-width:140px}
}

/* --- large phones / small tablets --- */
@media (max-width:820px){
  /* horizontal nav bar (base already flips it): make it a finger-friendly rail */
  .nav{position:sticky;top:0;z-index:40;gap:6px;padding:8px 10px;flex-wrap:nowrap;
       border-inline-start:none;border-bottom:1px solid var(--line);
       scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;padding:10px 14px;min-height:44px;font-size:16px}
  .nav-label{display:none}
  .nav .nav-bottom{margin-top:0;border-top:none;margin-block-start:0;padding-top:10px}
  /* header compaction */
  .app-header{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .brand-sub{display:none}
  .header-actions{gap:6px}
  .header-actions .btn,.header-actions button{min-height:42px}
  /* content: cards edge to edge, tables scroll inside the card */
  .view-wrap{padding:12px 10px}
  .card{padding:14px 12px;border-radius:10px}
  .card table,.kbd-box table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table.tbl th{font-size:15px;padding:7px 8px}
  /* the org chart + BPMN already scroll in their wrappers; make sure */
  .orgchart-wrap,.bpmn-canvas-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* forms: full width, no iOS zoom (16px+), comfortable targets */
  input,select,textarea{font-size:16px}
  .two-col,.grid2,.grid3{gap:10px}
  .qa{min-height:44px;display:inline-flex;align-items:center;padding:9px 14px}
  .kbd-box{min-width:0;width:min(92vw,440px)}
  .hdr-menu-pop{max-width:92vw}
}

/* --- phones --- */
@media (max-width:480px){
  html{font-size:15px}
  .brand-title{font-size:17px}
  .brand-logo{height:30px}
  .view-wrap{padding:10px 8px}
  .stat-card b{font-size:22px}
  .ready-card,.stat-card{padding:10px}
  .nav a{padding:9px 11px;font-size:15px}
  .nav a .ic{font-size:19px;width:19px}
  .tree-row .t-name,.tree-row .t-name-ro{min-width:110px}
  .onboard-steps li{padding:10px 8px}
  /* keep dialogs and popovers inside the viewport */
  .kbd-box{width:94vw}
}

/* --- Samsung Fold cover screen and other very narrow devices --- */
@media (max-width:360px){
  html{font-size:14px}
  .app-header{padding:8px 8px}
  .brand{gap:8px}
  .header-search{flex-basis:100%;order:9;max-width:none}
  .view-wrap{padding:8px 6px}
  .card{padding:12px 9px}
  .nav a{padding:8px 9px;font-size:14px;gap:6px}
}

/* --- notch / punch-hole safe areas (iOS + folds in landscape) --- */
@supports (padding: env(safe-area-inset-left)){
  .app-header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .view-wrap{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
}

/* ── Guided setup wizard (#/wizard): stepper rail + module panel ── */
.wiz-wrap{display:flex;align-items:flex-start;gap:18px}
.wiz-main{flex:1;min-width:0}
.wiz-rail{position:sticky;top:12px;flex:0 0 252px;max-height:calc(100vh - 24px);overflow:auto;
  display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 10px;box-shadow:var(--shadow)}
.wiz-rail-title{color:var(--muted);font-size:13.5px;font-weight:700;padding:2px 10px 8px;letter-spacing:.4px}
.wiz-step{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 10px;border:none;border-radius:9px;background:none;
  font-family:inherit;font-size:15.5px;color:var(--slate);cursor:pointer;text-align:start;transition:.15s;white-space:nowrap;width:100%}
.wiz-step:hover{background:var(--light);color:var(--navy)}
.wiz-step.active{background:var(--light);color:var(--navy);font-weight:700}
.wiz-step-n{color:var(--muted);font-size:13px;min-width:17px;text-align:center}
.wiz-step-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.wiz-dot{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--border);box-sizing:border-box}
.wiz-dot.wip{background:#e8b64c;border-color:#c8962e}
.wiz-dot.done{background:var(--ok);border-color:var(--ok)}
.wiz-count{background:var(--light);color:var(--navy);border-radius:10px;padding:0 8px;font-size:12.5px;font-weight:700;line-height:21px}
/* module head: title + status pill + live count */
.wiz-mod-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--accent);padding-bottom:7px;margin-bottom:12px}
.wiz-mod-head h2{border:none;padding:0;margin:0;flex:1;min-width:180px}
.wiz-st.empty{background:var(--light);color:var(--slate)}
.wiz-st.wip{background:#fdf3e7;color:#9a6212}
.wiz-st.done{background:#e9f6ef;color:#1a7a43}
.wiz-goal{margin:0 0 8px;font-size:16.5px;line-height:1.7}
/* questions */
.wiz-q{margin:0 0 16px}
.wiz-qt{font-weight:600;color:var(--ink);font-size:16.5px;line-height:1.65;margin:0 0 6px}
.wiz-req{color:var(--danger)}
.wiz-hint{color:var(--muted);font-size:14px;margin-top:4px}
.wiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.wiz-opts.wiz-yesno{grid-template-columns:repeat(2,minmax(90px,150px))}
.wiz-opt{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 12px;margin:0;border:1px solid var(--line);border-radius:10px;
  background:#fff;cursor:pointer;font-size:15.5px;font-weight:400;line-height:1.5;color:var(--ink)}
.wiz-opt:hover{border-color:var(--accent)}
.wiz-opt:has(input:checked){border-color:var(--accent);background:#f0faf6}
.wiz-opt input{width:18px;height:18px;flex:0 0 auto;margin:0;padding:0;accent-color:var(--accent-d)}
/* uploads */
.wiz-upload{border:1px dashed var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--zebra)}
.wiz-up-txt{font-size:15.5px;line-height:1.7;margin-bottom:8px}
.wiz-up-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wiz-fmt{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-size:12.5px;color:var(--slate);font-weight:700;text-transform:uppercase}
.wiz-chip{background:#f4eedf;border:1px solid #e4d9c1;color:#5e4d2f;border-radius:8px;padding:6px 10px;font-size:14px;line-height:1.6}
.wiz-csv{padding:8px 14px}
.wiz-up-out{color:var(--slate);font-size:14.5px}
/* actions */
.wiz-ai-out{margin-top:10px;font-size:15.5px;line-height:1.9}
.wiz-ai-out:empty{display:none}
.wiz-derives{margin-top:14px;background:var(--light);border-radius:10px;padding:10px 14px;font-size:14.5px;color:var(--slate)}
.wiz-derives b{color:var(--navy);font-size:14.5px}
.wiz-derives ul{margin:6px 0 0;padding-inline-start:20px}
.wiz-derives li{margin:2px 0}
/* done-when checklist + prev/next */
.wiz-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:9px 2px;margin:0;font-size:16px;font-weight:400;color:var(--ink);cursor:pointer;border-bottom:1px dashed var(--line)}
.wiz-check:last-of-type{border-bottom:none}
.wiz-check input{width:19px;height:19px;flex:0 0 auto;margin:3px 0 0;accent-color:var(--ok)}
.wiz-navbtns{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px}
/* narrow screens: the rail collapses to a horizontal scroll strip */
@media(max-width:820px){
  .wiz-wrap{flex-direction:column}
  .wiz-rail{position:static;flex:none;width:100%;max-height:none;flex-direction:row;align-items:center;overflow-x:auto;padding:8px;gap:4px}
  .wiz-rail-title{display:none}
  .wiz-step{flex:0 0 auto;width:auto}
  .wiz-main{width:100%}
  .wiz-opts,.wiz-opts.wiz-yesno{grid-template-columns:1fr}
  .wiz-navbtns .qa{flex:1;justify-content:center;text-align:center}
}

/* ── Model records: the direct-edit tables (Rec) reused by every dimension page ── */
.rec-tabs{margin-bottom:10px}
.rec-tbl td{min-width:96px}
.rec-tbl td.rec-acts,.rec-tbl th.rec-th-act{min-width:0;width:1%}
.rec-tbl th{white-space:nowrap}
.rec-tbl td input,.rec-tbl td select{min-width:90px;font-size:15px;padding:7px 10px}
.rec-tbl .rec-addrow td{background:var(--light);border-top:2px solid var(--border)}
.rec-tbl .rec-editrow td{background:#f0faf6}
.rec-tbl .rec-empty{text-align:center;padding:18px 8px}
.rec-acts{white-space:nowrap}
.rec-addbtn{white-space:nowrap}

/* ── Record detail editor: the full record, grouped, where the grid would need
      thirty columns nobody can read. Replaces the table rather than sitting
      under it, so the form is never below fifty rows where the user cannot see
      it. Logical properties throughout: this layout runs in both directions. ── */
.rec-dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.rec-dhead h2{margin:0}
/* align-items:start so a two-field group is two fields tall, not stretched to
   match the tallest box in its row */
.rec-dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:6px 0 4px;align-items:start}
.rec-dgroup{border:1px solid var(--line);border-radius:12px;background:var(--zebra);
  padding:6px 16px 14px;margin:0;min-width:0}
.rec-dgroup legend{font-weight:700;font-size:14.5px;color:var(--navy);padding:0 6px}
.rec-dfield{display:block;margin-top:10px;min-width:0}
.rec-dfield>span{display:block;font-size:13.5px;color:var(--slate);margin-bottom:4px}
.rec-dfield input,.rec-dfield select,.rec-dfield textarea{
  width:100%;font-family:inherit;font-size:15px;padding:8px 11px;
  border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--ink)}
.rec-dfield textarea{resize:vertical;line-height:1.6}
.rec-dfield input:focus,.rec-dfield select:focus,.rec-dfield textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,159,110,.14)}
/* the save confirmation sits beside the button that caused it: the header flash
   lands off-screen from a form this long, and an unseen confirmation reads as a
   failure and gets pressed again */
.rec-dsaved{align-self:center;font-weight:700;color:var(--ok)}
.rec-dsaved.err{color:var(--danger)}
.rec-dwarn{display:block;margin-top:4px;font-size:13px;color:var(--danger);font-style:normal}
@media (max-width:640px){
  .rec-dgrid{grid-template-columns:1fr}
  .rec-dhead{align-items:flex-start}
}

/* the wizard's create result, next to the button rather than in the header */
.wiz-create-out{margin:10px 0 0;padding:10px 14px;border-radius:10px;
  background:var(--light);border:1px solid var(--border);font-weight:600}
.wiz-unmatched{margin-top:6px;font-weight:400;color:var(--danger)}
.wiz-unmatched b{color:var(--ink)}

/* ── Model-records HUB (#/records): one live card per dimension ── */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hub-card{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;text-decoration:none;transition:.15s;box-shadow:var(--shadow)}
.hub-card:hover{border-color:var(--navy);transform:translateY(-1px)}
.hub-top{display:flex;align-items:center;gap:10px}
.hub-ic{font-size:22px;line-height:1;color:var(--navy);flex:0 0 auto}
.hub-top b{color:var(--navy);font-size:18.5px}
.hub-stat{color:var(--slate);font-size:15.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:28px}
.hub-stat b{color:var(--navy);font-size:21px}
.hub-stat b.hub-warn{color:#b23}
.hub-dot{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;
  color:#1f2937;font-size:13.5px;font-weight:700;border:1px solid rgba(0,0,0,.08)}
.hub-open{margin-top:auto;color:var(--navy);font-weight:700;font-size:15px}

/* ── Dimension pages: shared visual vocabulary (stats row, columns, items, chips, tags) ── */
.dim-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.dim-stat{display:inline-flex;align-items:baseline;gap:7px;background:var(--light);border:1px solid var(--line);border-radius:10px;
  padding:7px 14px;font-size:15px;color:var(--slate)}
.dim-stat b{color:var(--navy);font-size:21px;line-height:1}
.dim-stat.warn{background:#fff4ec;border-color:#f0cdb2}
.dim-stat.warn b{color:#b23}
.dim-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-items:start}
.dim-cols-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.dim-col{background:var(--zebra);border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:9px;min-width:0}
.dim-typecol{border-top:4px solid var(--line)}
.dim-colhead{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.dim-colhead b{color:var(--navy);font-size:16.5px;flex:1;min-width:0}
.dim-item{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;min-width:0}
.dim-item-warn{border-color:#f0cdb2;background:#fffaf5}
.dim-item-critical{border-color:#b42318;border-inline-start:4px solid #b42318;background:#fff3f2}
.dim-item-name{color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.45}
.dim-item-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dim-item-sub{color:var(--muted);font-size:13.5px}
.dim-chip{display:inline-block;background:var(--light);color:var(--navy);border-radius:999px;padding:2px 10px;font-size:13.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dim-chip-owner{background:#e7ede5}
.dim-chip-target{background:#fdf0e3;color:#9a6212}
.dim-chip-sup{background:#e4dfec;color:#4a3d6b}
.dim-tag{display:inline-block;background:#fbe4e4;color:#b42318;border-radius:6px;padding:2px 9px;font-size:13px;font-weight:700;white-space:nowrap}
.dim-tag-crit{display:inline-flex;align-items:center;gap:4px;background:#b42318;color:#fff;border-radius:6px;padding:2px 9px;font-size:13px;font-weight:700;white-space:nowrap}
.dim-dot{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:0 0 auto}
.dim-code{color:var(--muted);font-size:13px;font-weight:400}
.dim-edit-hint{margin:-4px 0 12px;font-size:14.5px}

/* authority matrix */
.dim-legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:14px}
.dim-fw{background:var(--navy);color:#fff}
.dim-lkey{display:inline-flex;align-items:center;gap:6px;color:var(--slate);font-size:14px}
.dim-letter{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;
  font-style:normal;font-size:13.5px;font-weight:700;color:#1f2937;border:1px solid rgba(0,0,0,.1);margin-inline-end:2px}
.dim-matrix th{white-space:nowrap}
.dim-matrix th.dim-mx-proc{text-align:start;font-weight:600;background:var(--card);color:var(--ink);white-space:normal;min-width:190px}
.dim-matrix td.ctr{white-space:nowrap}
tr.dim-gaprow th,tr.dim-gaprow td{background:#fff6ee!important}

/* risk severity blocks */
.dim-sev{background:var(--zebra);border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:9px;min-width:0}
.dim-sevhead{display:flex;align-items:center;gap:8px}
.dim-sevhead b{color:var(--navy);font-size:16.5px;flex:1}
.dim-bar{height:12px;background:var(--light);border-radius:999px;overflow:hidden}
.dim-bar i{display:block;height:100%;border-radius:999px;min-width:2px}

/* capability / service tile grids */
.dim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;align-items:start}
.dim-tile{border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:7px;min-width:0}
.dim-tile.on{background:#f0f8f2;border-color:#bcd9c4;border-inline-start:4px solid #1a7a43}
.dim-tile.off{background:#fffaf0;border-color:#ecd9ac;border-inline-start:4px solid #c8962e}
.dim-svc{min-width:0}
.dim-bigrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.dim-bigrow .dim-stats{margin-bottom:0}
.dim-big{display:flex;flex-direction:column;gap:2px;background:var(--navy);color:#fff;border-radius:12px;padding:12px 22px;text-align:center}
.dim-big b{font-size:34px;line-height:1.1}
.dim-big span{font-size:14px;opacity:.85}
@media(max-width:820px){
  .dim-cols,.dim-cols-3,.dim-grid{grid-template-columns:1fr}
  .dim-matrix th.dim-mx-proc{min-width:130px}
}

/* ---------- welcome chooser: one-time full-page overlay on a fresh tenant ---------- */
.welcome-overlay{overflow-y:auto;padding:40px 20px}
.welcome-panel{background:#fff;border-radius:20px;box-shadow:0 18px 60px rgba(0,0,0,.4);padding:34px 30px;width:min(880px,100%);margin:auto}
.welcome-panel h1{color:var(--navy);margin:0 0 6px}
.welcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:22px}
.welcome-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:start;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;
  font:inherit;color:inherit;cursor:pointer;transition:.15s}
.welcome-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.welcome-card .welcome-ic{font-size:28px;line-height:1}
.welcome-card b{color:var(--navy);font-size:17px}
.welcome-card span:not(.welcome-ic):not(.welcome-badge){color:var(--slate);font-size:14.5px;line-height:1.5}
.welcome-badge{position:absolute;top:-10px;inset-inline-end:12px;background:var(--accent);color:#fff;border-radius:999px;padding:2px 11px;font-size:12.5px;font-weight:700}
.welcome-dismiss{display:block;margin:24px auto 0;background:none;border:none;color:var(--slate);font-size:14.5px;cursor:pointer;text-decoration:underline}
.welcome-dismiss:hover{color:var(--navy)}
@media(max-width:560px){.welcome-grid{grid-template-columns:1fr}}

/* ---------- dashboard setup checklist (replaces the old 3-step onboard card once + stays
   available as a live progress list) ---------- */
.checklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.checklist li{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:none}
.checklist .chk-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800}
.checklist .chk-done .chk-ic{background:#e7f6ec;color:var(--ok)}
.checklist .chk-pending .chk-ic{background:var(--light);color:var(--muted);border:1.5px solid var(--border)}
.checklist .chk-label{flex:1;display:flex;flex-direction:column}
.checklist .chk-label b{font-size:15.5px;color:var(--ink)}
.checklist .chk-done .chk-label b{color:var(--slate);text-decoration:line-through;text-decoration-color:var(--border)}
.checklist .chk-note{font-size:12.5px;color:var(--muted)}
.checklist-progress{color:var(--slate);font-size:15px;margin-top:2px}

/* ---------- shared inline banner (settings -> organization form, etc.) ---------- */
.hk-banner{display:none;border-radius:10px;padding:10px 14px;font-size:14.5px;font-weight:600;margin-bottom:14px}
.hk-banner.show{display:block}
.hk-banner.err{background:#fdecea;color:var(--danger);border:1px solid #f3c9c4}
.hk-banner.info{background:#e7f6ec;color:var(--ok);border:1px solid #bfe6cc}
/* login/recovery secondary links: quiet, keyboard-reachable, not competing with the primary button */
.auth-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.auth-links .linkish{background:none;border:none;padding:4px 2px;font:inherit;font-size:14px;color:var(--navy);text-decoration:underline;cursor:pointer;min-height:24px}
.auth-links .linkish:hover{color:var(--accent)}
/* Actionable empty state: an empty page must say what to do and let you do it, not apologise. */
.empty-cta{text-align:center;padding:34px 18px}
.empty-cta-t{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 6px}
.empty-cta-d{font-size:14px;color:var(--muted);margin:0 auto 16px;max-width:46ch;line-height:1.7}