/* ===================================================================================
   PrivacyGuardin — UI v3 (Level 23). Loaded after style.css; re-skins every component to the
   approved design direction: Inter, navy sidebar, teal primary, flat 12px cards, pills with
   dots, one inspector pattern, quiet motion. Presentation only.
   =================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --brand: #0F2742; --paper: #F6F8FA; --surface: #FFFFFF; --surface-2: #FAFBFC; --surface-3: #EEF1F5;
  --ink: #17212B; --dim: #6B7A8C; --line: #E5E9EF; --line-2: #D7DEE6;
  --accent: #0F8A7A; --accent-dark: #0B6E62; --accent-soft: #E4F3F0; --accent-soft-line: #BFE0DA;
  --info: #5B5FD6; --info-soft: #EEEFFB; --info-soft-line: #CDD2F5;
  --green: #1F7A4D; --green-soft: #E6F4EC; --green-soft-line: #BFE1CE;
  --amber: #B7791F; --amber-soft: #FBF1DC; --amber-soft-line: #EBD7A8; --amber-ink: #8A5A0F;
  --red: #C2413B; --red-soft: #FBE7E5; --red-soft-line: #F0C4C1;
  --grey-soft: #EEF1F5; --focus: #0F8A7A;
  --side-bg: #0F2742; --side-ink: #C9D4E3; --side-dim: #7F91A8; --side-hi: #4FD1BE; --side-line: rgba(255,255,255,.08);
  --radius-sm: 8px; --radius-md: 12px;
  --shadow-sm: none; --shadow-md: 0 12px 32px rgba(15, 39, 66, .10);
  --brand-grad: linear-gradient(135deg, #17B7A1, #0F8A7A);
}
[data-theme="dark"] {
  --paper: #0F151C; --surface: #171F2A; --surface-2: #1C2531; --surface-3: #243040;
  --ink: #E6EDF3; --dim: #97A6B6; --line: #2A3647; --line-2: #34435A;
  --accent: #3FBFAC; --accent-dark: #7ED9CB; --accent-soft: #163631; --accent-soft-line: #22544C;
  --info: #8C96F0; --info-soft: #232A4F; --info-soft-line: #38427A;
  --green: #5FB08A; --green-soft: #15302A; --green-soft-line: #24493D;
  --amber: #E0A84A; --amber-soft: #352A14; --amber-soft-line: #5C4620; --amber-ink: #F0C97A;
  --red: #E8756C; --red-soft: #3A1E1D; --red-soft-line: #5E2F2C; --grey-soft: #243040;
  --side-bg: #0B1420; --brand: #E6EDF3;
}

/* ---- base ---- */
html, body, button, input, select, textarea { font-family: var(--font); }
body { background: var(--paper); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .page-title, .dash-head h2 { font-family: var(--font); letter-spacing: -.02em; }
.page-title { font-size: 26px; font-weight: 600; color: var(--brand); }
.dash-head h2 { font-size: 26px; font-weight: 600; color: var(--brand); }
.page-eyebrow, .dash-sub, .meta, .ropa-help, .dc-meta { color: var(--dim); }
.card { border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: none; transition: box-shadow .18s ease, transform .18s ease; }
.card.lift:hover, .dash-tile:hover, .ropa-kpi:hover, .dash-card:hover { box-shadow: 0 10px 28px rgba(15, 39, 66, .08); }

/* ---- buttons ---- */
button.primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600; border-radius: var(--radius-sm); height: 34px; padding: 0 14px; box-shadow: none; display: inline-flex; align-items: center; }
button.primary:hover:not(:disabled) { background: var(--accent-dark); filter: none; box-shadow: none; }
.quiet, button.quiet, a.quiet { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); height: 34px; padding: 0 14px; font-weight: 500; display: inline-flex; align-items: center; }
.quiet:hover { background: var(--surface-2); }
button.primary svg, .quiet svg { width: 14px; height: 14px; margin-right: 7px; }
.icon-btn { border-radius: var(--radius-sm); }
.kbd-hint { border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--dim); height: 32px; padding: 0 12px; }

/* ---- sidebar (navy) ---- */
.sidebar { background: var(--side-bg); color: var(--side-ink); border-right: none; }
.side-brand { color: #fff; font-weight: 600; font-size: 15px; padding: 18px 16px 14px; }
.side-brand img { border-radius: 8px; box-shadow: 0 6px 16px rgba(15, 138, 122, .35); background: var(--brand-grad); }
.side-brand .icon-btn { color: var(--side-dim); } .side-brand .icon-btn:hover { background: var(--side-line); color: #fff; }
.side-context { background: rgba(255, 255, 255, .06); border: 1px solid var(--side-line); border-radius: 10px; margin: 0 14px 14px; }
.side-context:hover { border-color: rgba(79, 209, 190, .4); }
.side-context .ctx-name { color: #fff; } .side-context .ctx-sub { color: #9FB0C6; }
.side-context svg text, .side-context .ring-label { fill: #fff; color: #fff; }
.side-group { color: var(--side-dim); font-size: 11px; margin: 14px 18px 6px; text-transform: none; letter-spacing: 0; }
.side-item { color: var(--side-ink); border-radius: 8px; margin: 0 10px 2px; width: calc(100% - 20px); padding: 7px 10px; font-size: 13.5px; }
.side-item .side-ico { color: #8FA3BC; } .side-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side-item.on { background: rgba(15, 138, 122, .22); color: #fff; box-shadow: inset 3px 0 0 var(--side-hi); }
.side-item.on .side-ico { color: var(--side-hi); }
.side-badge { background: rgba(255, 255, 255, .14); color: #fff; } .side-badge.alert { background: var(--red); }
.side-foot { border-top: 1px solid var(--side-line); }
.side-foot .side-item { color: var(--side-ink); } .side-user { color: var(--side-ink); }
.side-user .avatar { background: var(--side-hi); color: #0F2742; }
.side-user-actions .quiet { background: transparent; border-color: var(--side-line); color: var(--side-ink); height: 28px; padding: 0 10px; font-size: 12px; }
.side-user-actions .quiet:hover { background: rgba(255, 255, 255, .06); }

/* ---- top bar ---- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); height: 52px; }
.crumbs { font-size: 13px; } .crumbs a { color: var(--dim); } .crumbs .here { color: var(--ink); font-weight: 600; } .crumbs .sep { color: #B6C0CC; margin: 0 8px; }
.notif-btn { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); }
.notif-btn .notif-n { background: var(--red); }

/* ---- page header ---- */
.page-head { border-bottom: none; padding-bottom: 6px; margin-bottom: 18px; }
.meta-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 12px; }

/* ---- pills: text + dot, never colour alone ---- */
.dsar-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 9px 3px 7px; border-radius: 999px; border: none; }
.dsar-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; opacity: .85; }
.dsar-badge.tone-green { background: var(--green-soft); color: var(--green); }
.dsar-badge.tone-amber { background: var(--amber-soft); color: var(--amber-ink); }
.dsar-badge.tone-red { background: var(--red-soft); color: var(--red); }
.dsar-badge.tone-grey { background: var(--grey-soft); color: var(--dim); }
.dsar-badge.tone-blue { background: var(--info-soft); color: var(--info); }
.ropa-status-badge, .status-pill { border-radius: 999px; }
.prov { border-radius: 6px; font-weight: 500; }
.prov.imported, .prov.derived { background: var(--info-soft); color: var(--info); border-color: transparent; }
.prov.override { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.prov.frozen { background: var(--grey-soft); color: var(--dim); border-color: transparent; }

/* ---- KPI tiles ---- */
.ropa-kpi, .dash-tile { border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; }
.ropa-kpi .n, .dash-tile-v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.ropa-kpi .l, .dash-tile-l { font-size: 13px; color: var(--dim); margin-top: 6px; }
.dash-tile-s { font-size: 12px; color: #8A98A8; margin-top: 3px; }
.ropa-kpi.tone-red, .dash-tile.alert { border-left: 4px solid var(--red); } .ropa-kpi.tone-red .n, .dash-tile.alert .dash-tile-v { color: var(--red); }
.ropa-kpi.tone-amber { border-left: 4px solid var(--amber); } .ropa-kpi.tone-green { border-left: 4px solid var(--green); } .ropa-kpi.tone-blue { border-left: 4px solid var(--info); }
.tile-ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-right: 14px; flex: none; }
.tile-ic svg { width: 18px; height: 18px; }
.tile-ic.r { background: var(--red-soft); color: var(--red); } .tile-ic.a { background: var(--amber-soft); color: var(--amber-ink); } .tile-ic.t { background: var(--accent-soft); color: var(--accent-dark); } .tile-ic.v { background: var(--info-soft); color: var(--info); }

/* ---- tables ---- */
.ui-table th, .ropa-rules-table th, table.ui-table th { font-weight: 500; color: var(--dim); font-size: 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 10px 14px; }
.ui-table td, .ropa-rules-table td { padding: 12px 14px; border-bottom: 1px solid var(--surface-3); }
.ui-table tbody tr:hover td { background: var(--surface-2); }
.ui-table-wrap { border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.ui-table-tools { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ui-table-q, .ui-filter-q { border-radius: 999px; height: 32px; }

/* ---- filter chips, tabs, navigators ---- */
.ui-chip { font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--line-2); background: var(--surface); }
.ui-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.dsar-filter-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.case-tabs { border-bottom: 1px solid var(--line); } .case-tab { padding: 10px 2px; margin-right: 22px; color: var(--dim); font-size: 13.5px; }
.case-tab.on { color: var(--brand); border-bottom-color: var(--accent); font-weight: 600; }
.req-btn, .dpia-nav-item, .ropa-subnav-item { border-radius: 8px; font-size: 13.5px; padding: 8px 10px; }
.req-btn.active, .dpia-nav-item.on, .ropa-subnav-item.on { background: var(--surface); border: 1px solid var(--line); font-weight: 600; box-shadow: none; }
.req-sidebar, .dpia-nav, .ropa-subnav { background: transparent; }

/* ---- segmented controls ---- */
.cc-btn, .status-btn { font-size: 13px; padding: 7px 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.cc-btn:first-child, .status-btn:first-child { border-radius: 8px 0 0 8px; } .cc-btn:last-child, .status-btn:last-child { border-radius: 0 8px 8px 0; }
.status-btn { border-radius: 8px; margin-right: 6px; }
.cc-btn.on.yes { background: var(--green); border-color: var(--green); } .cc-btn.on.no { background: var(--red); border-color: var(--red); } .cc-btn.on.na { background: var(--dim); border-color: var(--dim); }

/* ---- inspector / dialogs ---- */
.ui-slide { border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(15, 39, 66, .08); }
.ui-slide-head { padding: 20px 24px 12px; } .ui-slide-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ui-slide-body { padding: 0 24px 24px; } .ui-slide-foot { background: var(--surface-2); }
.ui-dialog { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.field label, .field-label { font-size: 12.5px; color: var(--dim); font-weight: 500; }
.field input, .field select, .field textarea, input[type="text"], input[type="date"], input[type="number"], input[type="email"], select, textarea { border: 1px solid var(--line-2); border-radius: 8px; font-size: 13.5px; background: var(--surface); color: var(--ink); }
.field input, .field select, input[type="text"], input[type="date"], input[type="number"], select { height: 36px; padding: 0 12px; }
textarea { padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }

/* ---- motion ---- */
#req-detail > *, #main-container > .dash-head, #main-container > .dash-grid { animation: enter .3s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bar i, .sla-tl-bar span, .rank-bar span, .cm-bar span, .progress span { transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.dash-posture svg circle:last-child, .side-context svg circle:last-child { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); }
.ui-slide { transition: transform .26s ease; }
.pulse-dot { position: relative; } .pulse-dot::after { content: ""; position: absolute; left: -4px; top: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid var(--red); opacity: .6; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.att-dot.red, .inc-band.red .inc-band-l::before { }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- dashboard specifics ---- */
.dash-posture { background: linear-gradient(135deg, var(--surface) 0%, var(--accent-soft) 160%); }
.dash-card-h { font-size: 15px; font-weight: 600; } .dash-card-h span { font-weight: 400; color: var(--dim); }
.att-item { border-top: 1px solid var(--surface-3); padding: 12px 0; } .att-head { font-weight: 500; }
.att-dot.red { box-shadow: 0 0 0 0 var(--red); animation: pulse-soft 1.6s ease-out infinite; }
@keyframes pulse-soft { 0% { box-shadow: 0 0 0 0 rgba(194, 65, 59, .45); } 100% { box-shadow: 0 0 0 8px rgba(194, 65, 59, 0); } }

/* ---- incidents / dpia bands already styled; align radii ---- */
.inc-band, .dpia-result, .rp, .case-head, .dpia-import, .dpia-banner, .q-progress, .bulk-bar, .onboard-step, .empty-state { border-radius: var(--radius-md); }
.step-dot { border-radius: 50%; }
.empty-state .empty-ico { border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); }

/* ---- auth ---- */
.auth-box { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.auth-box .primary { width: 100%; justify-content: center; }

/* sidebar badges: readable counts, red when something is overdue */
.side-item .side-badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; background: rgba(255, 255, 255, .14); color: #fff; }
.side-item .side-badge.alert { background: var(--red); }
.sidebar.collapsed .side-badge { display: none; }

/* Level 23.4 — RoPA department bar */
.ropa-deptbar { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ropa-deptchips { display: flex; flex-wrap: wrap; margin-left: 12px; } .ropa-deptchips .ui-chip { margin: 3px 6px 3px 0; }
.ropa-dir-entity { border-style: dashed; }

/* Level 24 — AI assistant */
.mom-card { padding: 16px 18px; border-left: 4px solid var(--info); }
.mom-row { display: flex; align-items: center; padding: 10px 0; border-top: 1px solid var(--surface-3); }
.mom-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--info-soft); color: var(--info); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex: none; }
.ai-panel { border: 1px solid var(--info-soft-line); background: var(--info-soft); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.ai-panel-h { display: flex; align-items: flex-start; } .ai-panel-h > * + * { margin-left: 10px; }
.ai-panel-s { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin-top: 2px; }
.ai-spark { color: var(--info); font-size: 18px; line-height: 1; }
.ai-follow { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--info-soft-line); font-size: 13px; }
.ai-q { font-size: 13px; line-height: 1.55; }
.ai-prop { display: flex; align-items: center; padding: 10px 0; border-top: 1px dashed var(--amber-soft-line); font-size: 13px; }
.ai-quote { font-size: 12px; color: var(--dim); font-style: italic; margin-top: 2px; }
.prov.ai { background: var(--info-soft); color: var(--info); font-size: 10.5px; padding: 1px 6px; margin-left: 6px; cursor: help; }
.ai-prov { display: flex; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.ai-prov input { margin: 3px 10px 0 0; } .ai-prov.off { opacity: .55; cursor: not-allowed; }

/* Level 30 — entity dashboard */
.ed-grid2 { display: flex; } .ed-grid2 > .card { flex: 1; min-width: 0; } .ed-grid2 > .card + .card { margin-left: 16px; }
.ed-card { padding: 16px 18px; }
.ed-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-3); margin: 14px 0 10px; } .ed-stack span { display: block; height: 100%; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.ed-legend { display: flex; flex-wrap: wrap; font-size: 12.5px; } .ed-legend span { margin: 0 14px 6px 0; display: inline-flex; align-items: center; } .ed-legend i { width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; } .ed-legend strong { margin-left: 5px; }
.ed-rlist { margin-top: 12px; border-top: 1px solid var(--line); } .ed-rrow { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; } .ed-rrow:hover { background: var(--surface-2); } .ed-rrow .n { flex: 1; font-weight: 600; } .ed-rrow .m { color: var(--dim); font-size: 11.5px; margin-right: 10px; white-space: nowrap; }
.ed-note { font-size: 12px; color: var(--dim); margin-top: 10px; line-height: 1.5; }
.ed-bar-row { display: flex; align-items: center; padding: 5px 0; font-size: 12.5px; } .ed-bar-l { width: 150px; flex: none; } .ed-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 0 10px; } .ed-bar span { display: block; height: 100%; border-radius: 4px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.ed-bar-n { width: 34px; text-align: right; font-weight: 600; } .ed-bar-x { font-size: 11px; color: var(--amber-ink); margin-left: 8px; white-space: nowrap; }
.ed-levels { display: flex; font-size: 12.5px; color: var(--dim); margin: 10px 0 4px; } .ed-levels span { margin-right: 16px; } .ed-levels strong { color: var(--ink); }
.ed-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 12px 0 4px; }
.ed-gap { display: flex; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 12.5px; } .ed-gap:hover { background: var(--surface-2); }
.ed-gap-t { flex: 1; min-width: 0; margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed-gap-n { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.ed-depts { display: flex; flex-wrap: wrap; margin: 0 -0.8%; }
.ed-dept { padding: 14px 16px; width: 31.7%; margin: 0 0.8% 14px; box-sizing: border-box; }
@media (max-width: 1200px) { .ed-dept { width: 48.4%; } } @media (max-width: 760px) { .ed-dept { width: 98.4%; } } .ed-dept-n { font-weight: 700; font-size: 15px; } .ed-dept-o { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.ed-dept-m { display: flex; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .ed-dept-m > div { flex: 1; min-width: 0; }
.ed-dept-m span { display: block; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; } .ed-dept-m strong { display: block; font-size: 20px; font-weight: 600; margin-top: 2px; } .ed-dept-m em { display: block; font-style: normal; font-size: 11px; color: var(--dim); }
.ed-dept-m .bad strong { color: var(--red); }
@media (max-width: 1000px) { .ed-grid2 { flex-direction: column; } .ed-grid2 > .card + .card { margin: 14px 0 0; } }

/* Level 30.1 — dashboard charts */
.ed-grid3 { display: flex; } .ed-grid3 > .card { flex: 1; min-width: 0; } .ed-grid3 > .card + .card { margin-left: 16px; }
.ed-pie { display: flex; justify-content: center; margin: 10px 0 8px; }
.ed-donut circle { transition: stroke-dasharray .9s cubic-bezier(.2,.8,.2,1); }
.ed-donut-c { font-size: 26px; font-weight: 700; fill: var(--ink); } .ed-donut-s { font-size: 11px; fill: var(--dim); }
.ed-chart { width: 100%; height: auto; display: block; margin-top: 8px; }
.ed-grid { stroke: var(--line); stroke-width: 1; } .ed-axis { font-size: 11px; fill: var(--dim); } .ed-val { font-size: 11.5px; font-weight: 700; fill: var(--ink); }
.ed-minibar { display: flex; width: 110px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-3); margin-bottom: 3px; } .ed-minibar span { display: block; height: 100%; }
.ed-dept .ed-donut-c { font-size: 18px; } .ed-dept .ed-donut-s { font-size: 9px; }
@media (max-width: 1100px) { .ed-grid3 { flex-direction: column; } .ed-grid3 > .card + .card { margin: 14px 0 0; } }
.ed-dept .ed-dept-m > div { padding-right: 6px; }
.ed-dept .ed-dept-m span { text-transform: none; letter-spacing: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-dept .ed-dept-m em { white-space: normal; line-height: 1.25; }

/* Level 31 — organisation blocks on the home dashboard */
.org-block { padding: 0; margin-bottom: 16px; overflow: hidden; }
.org-head { display: flex; align-items: center; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.org-name { font-size: 17px; font-weight: 700; } .org-sub { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.org-stat { margin: 0 18px; min-width: 120px; } .org-stat > span { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; } .org-stat .dash-prog { display: inline-block; width: 90px; vertical-align: middle; margin-right: 8px; }
.org-depts .ui-table-wrap { border: none; border-radius: 0; box-shadow: none; }
.org-title { flex: 1; min-width: 0; } .org-head .tile-ic { margin-right: 14px; }
.org-section-h { display: flex; align-items: center; margin: 22px 0 8px; }
@media (max-width: 800px) {
  .org-section-h { flex-wrap: wrap; } .org-section-h #org-new { margin: 8px 0 0; }
  .org-title { flex: 1 1 calc(100% - 60px); }
  .org-stat { flex: 1 1 40%; margin: 12px 0 0; min-width: 0; }
  .org-head .org-add-dept, .org-head .org-open { margin: 10px 0 0 !important; width: 100%; justify-content: center; }
}

/* Level 33 — gap review and department overview */
.gv-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .gv-sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.gv-h { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.gv-rstep { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-rs { display: inline-flex; align-items: center; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--dim); cursor: pointer; }
.gv-rs span { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; margin-right: 6px; border: 1px solid var(--line-2); }
.gv-rs.done { color: var(--ink); } .gv-rs.done span { background: var(--accent); border-color: var(--accent); color: #fff; }
.gv-rs.on { color: var(--ink); border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); font-weight: 600; } .gv-rs.on span { border-color: var(--amber); color: var(--amber-ink); }
.dv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; } .dv-why { font-size: 11.5px; color: var(--dim); margin-top: 2px; }

/* Level 34.1 — modern checkboxes and radio buttons (both themes) */
input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: none; margin: 0 8px 0 0; padding: 0; border: 1.5px solid var(--line-2); background: var(--surface); display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
input[type="checkbox"] { border-radius: 5px; } input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .12s; }
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); } input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled) { border-color: var(--accent); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .4; cursor: not-allowed; }
.net-flash { box-shadow: 0 0 0 2px var(--accent), 0 0 28px rgba(34, 211, 238, .35) !important; transition: box-shadow .3s; }

/* Level 35 — department posture rows on Home */
.posture-h { font-size: 11.5px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; padding: 12px 18px 4px; }
.posture-row { display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--line); cursor: pointer; font-size: 13px; flex-wrap: wrap; }
.posture-row:hover { background: var(--surface-2); }
.pr-name { width: 190px; font-weight: 600; } .pr-bar { flex: 1; min-width: 120px; height: 8px; border-radius: 5px; background: var(--surface-3, #EEF1F5); overflow: hidden; } .pr-bar span { display: block; height: 100%; border-radius: 5px; }
.pr-score { width: 110px; text-align: right; } .pr-meta { width: 210px; font-size: 12px; color: var(--dim); }
@media (max-width: 760px) { .pr-name { width: 100%; } .pr-score, .pr-meta { width: auto; } }

/* Level 35 — gap assessment report preview and print */
.rep-paper { color: #17212B; font-size: 13.5px; line-height: 1.65; }
.rep-paper p { margin: 6px 0 10px; }
.rep-cover { border-bottom: 3px solid #0F2742; padding-bottom: 22px; margin-bottom: 22px; }
.rep-h1 { color: #0F2742 !important; font-size: 20px; margin: 26px 0 10px; } .rep-h2 { color: #0F2742 !important; font-size: 16px; margin: 18px 0 2px; } .rep-h3 { font-weight: 700; font-size: 13.5px; margin: 12px 0 2px; color: #16212D; }
.rep-cite { font-size: 11.5px; color: #5B6B7D; font-style: italic; }
.rep-st, .rep-tbl, .rep-kv { border-collapse: collapse; width: 100%; font-size: 12px; margin: 6px 0 10px; } .rep-st th, .rep-tbl th { background: #E3ECF5; color: #17212B; text-align: left; padding: 5px 7px; border: 1px solid #D7DEE6; } .rep-st td, .rep-tbl td, .rep-kv td { padding: 5px 7px; border: 1px solid #D7DEE6; color: #17212B; } .rep-st td { font-weight: 700; } .rep-kv td:first-child { background: #F5F7FA; width: 45%; }
.rep-obs { border-left: 3px solid #D7DEE6; padding-left: 12px; margin: 10px 0; }
.rep-edit { border: 1px solid #D7DEE6; background: #fff; color: #0F2742; border-radius: 6px; cursor: pointer; font-size: 12px; padding: 1px 7px; margin-left: 4px; }
.rep-draft-mark { position: absolute; top: 280px; left: 0; right: 0; text-align: center; font-size: 130px; font-weight: 800; color: rgba(194, 65, 59, .07); transform: rotate(-28deg); pointer-events: none; }
.rep-foot { margin-top: 28px; padding-top: 10px; border-top: 1px solid #D7DEE6; font-size: 11px; color: #5B6B7D; text-align: center; }
@media print { .rep-break { page-break-before: always; } .rep-req, .rep-obs { page-break-inside: avoid; } .rep-draft-mark { position: fixed; top: 38%; } .rep-paper { padding: 0 !important; box-shadow: none !important; } }

/* Level 36 — department switcher on department pages */
.dept-switch { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12.5px; color: var(--dim); flex-wrap: wrap; }
.dept-switch select { min-width: 220px; font-weight: 600; }