/* DCMS theme layer on top of Bootstrap 5.3.8 */
/* =========================================================
   DCMS theme layer — sits on top of Bootstrap 5.3.8
   Put this in public/assets/css/dcms.css in the CI4 build
   ========================================================= */
:root, [data-bs-theme=light] {
  color-scheme: light;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bs-body-font-size: .875rem;
  --bs-body-bg: #F2F4F7;
  --bs-body-color: #1B2433;
  --bs-emphasis-color: #0E1522;
  --bs-secondary-color: #5D6A7E;
  --bs-border-color: #DAE0E8;
  --bs-border-color-translucent: rgba(20, 32, 58, .12);
  --bs-secondary-bg: #E8ECF2;
  --bs-tertiary-bg: #F6F7FA;
  --bs-primary: #1F3A68;
  --bs-primary-rgb: 31, 58, 104;
  --bs-link-color: #1F3A68;
  --bs-link-color-rgb: 31, 58, 104;
  --bs-link-hover-color: #142849;
  --bs-link-hover-color-rgb: 20, 40, 73;
  --bs-focus-ring-color: rgba(31, 58, 104, .28);

  --dc-surface: #FFFFFF;
  --dc-surface-2: #F7F8FB;
  --dc-primary: #1F3A68;
  --dc-primary-hover: #172D52;
  --dc-on-primary: #FFFFFF;
  --dc-brass: #9A6B14;
  --dc-brass-soft: #F5EAD3;
  --dc-sidebar-bg: #111C31;
  --dc-sidebar-fg: #B7C2D6;
  --dc-sidebar-fg-strong: #FFFFFF;
  --dc-sidebar-hover: rgba(255, 255, 255, .06);
  --dc-sidebar-active: rgba(212, 170, 86, .14);
  --dc-sidebar-accent: #D4AA56;
  --dc-paper: #FFFFFF;
  --dc-paper-line: #E3E7EE;
  --dc-shadow: 0 1px 2px rgba(17, 28, 49, .06), 0 1px 1px rgba(17, 28, 49, .03);

  /* status hues */
  --c-draft: #5D6A7E;
  --c-review: #1C6BB0;
  --c-pending: #A15C00;
  --c-approved: #0E7470;
  --c-active: #1C7431;
  --c-revision: #6A3DB0;
  --c-superseded: #6B7280;
  --c-obsolete: #3E4553;
  --c-archived: #7A5A36;
  --c-rejected: #B42318;
  --c-danger: #B42318;
  --c-warn: #A15C00;
  --c-ok: #1C7431;
}
[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-bg: #0D131E;
  --bs-body-color: #D8DEE9;
  --bs-emphasis-color: #F3F6FB;
  --bs-secondary-color: #93A0B5;
  --bs-border-color: #263246;
  --bs-border-color-translucent: rgba(255, 255, 255, .1);
  --bs-secondary-bg: #1B2536;
  --bs-tertiary-bg: #141C2A;
  --bs-primary: #8FB1EC;
  --bs-primary-rgb: 143, 177, 236;
  --bs-link-color: #8FB1EC;
  --bs-link-color-rgb: 143, 177, 236;
  --bs-link-hover-color: #B4CBF3;
  --bs-link-hover-color-rgb: 180, 203, 243;
  --bs-focus-ring-color: rgba(143, 177, 236, .3);

  --dc-surface: #141C2A;
  --dc-surface-2: #182132;
  --dc-primary: #8FB1EC;
  --dc-primary-hover: #A9C3F1;
  --dc-on-primary: #0D131E;
  --dc-brass: #E0B563;
  --dc-brass-soft: rgba(224, 181, 99, .12);
  --dc-sidebar-bg: #090E17;
  --dc-sidebar-fg: #9AA7BD;
  --dc-paper: #1A2334;
  --dc-paper-line: #2A3650;
  --dc-shadow: 0 1px 2px rgba(0, 0, 0, .35);

  --c-draft: #A6B1C4;
  --c-review: #72B4F0;
  --c-pending: #F0B25A;
  --c-approved: #4FCFC2;
  --c-active: #63CC7E;
  --c-revision: #B99EF2;
  --c-superseded: #9CA3AF;
  --c-obsolete: #C4C9D3;
  --c-archived: #CDA77E;
  --c-rejected: #F48C84;
  --c-danger: #F48C84;
  --c-warn: #F0B25A;
  --c-ok: #63CC7E;
}

[hidden] { display: none !important; }
body { background: var(--bs-body-bg); color: var(--bs-body-color); font-feature-settings: "tnum" 1; }
.mono, .doc-id { font-family: var(--bs-font-monospace); }
.doc-id { font-weight: 600; font-size: .8rem; letter-spacing: .01em; white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.text-muted, .text-secondary { color: var(--bs-secondary-color) !important; }
.eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
h1, h2, h3, h4, h5 { text-wrap: balance; color: var(--bs-emphasis-color); }

/* Bootstrap component surfaces */
.card { --bs-card-bg: var(--dc-surface); --bs-card-border-color: var(--bs-border-color); --bs-card-cap-bg: transparent; --bs-card-spacer-y: 1rem; box-shadow: var(--dc-shadow); }
.card-header { padding-block: .85rem; display: flex; align-items: center; gap: .75rem; }
.card-title-sm { font-size: .95rem; font-weight: 600; margin: 0; color: var(--bs-emphasis-color); }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--bs-tertiary-bg); --bs-table-striped-bg: var(--bs-tertiary-bg); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .65rem .75rem; border-bottom-color: var(--bs-border-color); vertical-align: middle; }
.table thead th { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); background: var(--dc-surface-2); white-space: nowrap; }
.form-control, .form-select { background-color: var(--dc-surface); border-color: var(--bs-border-color); font-size: .875rem; }
.form-control:focus, .form-select:focus { border-color: var(--dc-primary); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-control[readonly], .form-control:disabled { background-color: var(--bs-secondary-bg); }
.form-label { font-weight: 500; font-size: .8rem; margin-bottom: .3rem; color: var(--bs-emphasis-color); }
.form-text { font-size: .75rem; }
.req::after { content: " *"; color: var(--c-danger); }
.form-check-input:checked { background-color: var(--dc-primary); border-color: var(--dc-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); border-color: var(--dc-primary); }
.dropdown-menu { --bs-dropdown-bg: var(--dc-surface); --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-link-active-bg: var(--dc-primary); --bs-dropdown-link-active-color: var(--dc-on-primary); --bs-dropdown-font-size: .85rem; box-shadow: 0 8px 24px rgba(10, 18, 34, .14); }
.modal { --bs-modal-bg: var(--dc-surface); --bs-modal-border-color: var(--bs-border-color); }
.offcanvas { --bs-offcanvas-bg: var(--dc-surface); }
.nav-tabs { --bs-nav-tabs-link-active-bg: var(--dc-surface); --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--dc-surface); --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); --bs-nav-link-font-size: .85rem; }
.nav-tabs .nav-link.active { color: var(--bs-emphasis-color); font-weight: 600; }
.nav-underline { --bs-nav-underline-link-active-color: var(--bs-emphasis-color); --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-font-size: .85rem; gap: 1.25rem; }
.nav-underline { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-underline .nav-link { white-space: nowrap; }
.nav-underline .nav-link.active { border-bottom-color: var(--dc-primary); }
.pagination { --bs-pagination-bg: var(--dc-surface); --bs-pagination-active-bg: var(--dc-primary); --bs-pagination-active-border-color: var(--dc-primary); --bs-pagination-active-color: var(--dc-on-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-font-size: .8rem; }
.btn { --bs-btn-font-size: .85rem; --bs-btn-font-weight: 500; }
.btn-sm { --bs-btn-font-size: .78rem; }
.btn-primary { --bs-btn-bg: var(--dc-primary); --bs-btn-border-color: var(--dc-primary); --bs-btn-color: var(--dc-on-primary); --bs-btn-hover-bg: var(--dc-primary-hover); --bs-btn-hover-border-color: var(--dc-primary-hover); --bs-btn-hover-color: var(--dc-on-primary); --bs-btn-active-bg: var(--dc-primary-hover); --bs-btn-active-border-color: var(--dc-primary-hover); --bs-btn-active-color: var(--dc-on-primary); --bs-btn-disabled-bg: var(--dc-primary); --bs-btn-disabled-border-color: var(--dc-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
.btn-outline-primary { --bs-btn-color: var(--dc-primary); --bs-btn-border-color: var(--dc-primary); --bs-btn-hover-bg: var(--dc-primary); --bs-btn-hover-border-color: var(--dc-primary); --bs-btn-hover-color: var(--dc-on-primary); --bs-btn-active-bg: var(--dc-primary); --bs-btn-active-color: var(--dc-on-primary); --bs-btn-active-border-color: var(--dc-primary); }
.btn-light-soft { --bs-btn-bg: var(--dc-surface); --bs-btn-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color); }
.btn-approve { --bs-btn-bg: var(--c-active); --bs-btn-border-color: var(--c-active); --bs-btn-color: var(--dc-on-primary); --bs-btn-hover-bg: var(--c-active); --bs-btn-hover-color: var(--dc-on-primary); --bs-btn-hover-border-color: var(--c-active); --bs-btn-active-bg: var(--c-active); --bs-btn-active-color: var(--dc-on-primary); }
[data-bs-theme=light] .btn-approve { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-reject { --bs-btn-color: var(--c-rejected); --bs-btn-border-color: var(--c-rejected); --bs-btn-hover-bg: var(--c-rejected); --bs-btn-hover-border-color: var(--c-rejected); --bs-btn-hover-color: var(--dc-surface); --bs-btn-active-bg: var(--c-rejected); --bs-btn-active-color: var(--dc-surface); }
:focus-visible { outline: 2px solid var(--dc-primary); outline-offset: 2px; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar-shell { flex: 0 0 0; }
@media (min-width: 992px) {
  .sidebar-shell { flex: 0 0 256px; width: 256px; background: var(--dc-sidebar-bg); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar { --bs-offcanvas-bg: var(--dc-sidebar-bg); --bs-offcanvas-width: 272px; color: var(--dc-sidebar-fg); }
.sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; width: 100%; }
.brand { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.25rem 1rem; color: var(--dc-sidebar-fg-strong); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; background: #D4AA56; color: #111C31; font-family: var(--bs-font-monospace); font-weight: 600; font-size: .78rem; letter-spacing: -.02em; flex: none; }
.brand-name { font-weight: 600; font-size: .95rem; line-height: 1.15; }
.brand-sub { font-size: .68rem; color: var(--dc-sidebar-fg); letter-spacing: .06em; text-transform: uppercase; }
.nav-group { padding: .9rem 1.25rem .35rem; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: #6F7D96; font-weight: 600; }
.side-nav { list-style: none; margin: 0; padding: 0 .65rem; }
.side-nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 6px; color: var(--dc-sidebar-fg); text-decoration: none; font-size: .86rem; position: relative; }
.side-nav a i { font-size: 1rem; width: 1.1rem; text-align: center; opacity: .85; }
.side-nav a:hover { background: var(--dc-sidebar-hover); color: var(--dc-sidebar-fg-strong); }
.side-nav a.active { background: var(--dc-sidebar-active); color: var(--dc-sidebar-fg-strong); font-weight: 500; }
.side-nav a.active i { color: var(--dc-sidebar-accent); opacity: 1; }
.side-nav .count { margin-left: auto; font-size: .68rem; font-weight: 600; background: #D4AA56; color: #111C31; border-radius: 999px; padding: .08rem .45rem; font-variant-numeric: tabular-nums; }
.side-nav .count.alert-c { background: #E5675B; color: #fff; }
.sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; font-size: .72rem; color: #6F7D96; border-top: 1px solid rgba(255,255,255,.06); }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1020; background: var(--dc-surface); border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; min-height: 58px; }
.topbar .search { position: relative; flex: 1 1 360px; max-width: 440px; }
.topbar .search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.topbar .search .form-control { padding-left: 2.1rem; background: var(--bs-tertiary-bg); }
.topbar .search kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .65rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--bs-secondary-color); position: relative; }
.icon-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.icon-btn .pip { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-rejected); border: 2px solid var(--dc-surface); }
.role-btn { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--bs-border-color); background: var(--dc-surface); border-radius: 8px; padding: .25rem .6rem .25rem .3rem; color: var(--bs-body-color); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--dc-brass-soft); color: var(--dc-brass); font-weight: 600; font-size: .72rem; flex: none; }
.role-btn .who { line-height: 1.1; text-align: left; }
.role-btn .who b { font-size: .8rem; font-weight: 600; display: block; }
.role-btn .who span { font-size: .68rem; color: var(--bs-secondary-color); }
.company-select { width: auto; font-weight: 600; font-size: .8rem; }

.content { padding: 1.5rem 1.25rem 3rem; width: 100%; max-width: 1480px; margin-inline: auto; }
@media (min-width: 1200px) { .content { padding-inline: 2rem; } .topbar { padding-inline: 2rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.page-head p { margin: .2rem 0 0; color: var(--bs-secondary-color); }
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.crumbs { font-size: .78rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--bs-link-color); }

.role-banner { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 8px; background: var(--dc-brass-soft); color: var(--bs-emphasis-color); font-size: .82rem; margin-bottom: 1rem; }
.role-banner i { color: var(--dc-brass); }

/* ---------- Status pills ---------- */
.st { --st-c: var(--c-draft); display: inline-flex; align-items: center; gap: .4em; padding: .22em .62em; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--st-c); background: color-mix(in srgb, var(--st-c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--st-c) 22%, transparent); }
.st::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.st-draft { --st-c: var(--c-draft); }
.st-under_review { --st-c: var(--c-review); }
.st-pending_approval { --st-c: var(--c-pending); }
.st-approved { --st-c: var(--c-approved); }
.st-active { --st-c: var(--c-active); }
.st-revision_in_progress { --st-c: var(--c-revision); }
.st-superseded { --st-c: var(--c-superseded); }
.st-obsolete { --st-c: var(--c-obsolete); }
.st-archived { --st-c: var(--c-archived); }
.st-rejected { --st-c: var(--c-rejected); }
.st-submitted { --st-c: var(--c-review); }
.rev { font-family: var(--bs-font-monospace); font-size: .75rem; font-weight: 600; padding: .12rem .42rem; border-radius: 4px; background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; padding: .15rem .5rem; border-radius: 4px; background: var(--bs-secondary-bg); color: var(--bs-body-color); white-space: nowrap; }
.chip-conf-confidential { background: color-mix(in srgb, var(--c-rejected) 12%, transparent); color: var(--c-rejected); }
.chip-conf-public { background: color-mix(in srgb, var(--c-ok) 12%, transparent); color: var(--c-ok); }
.ftype { font-size: 1.05rem; }
.ft-pdf { color: #C8372D; } .ft-docx { color: #2B5FB4; } .ft-xlsx { color: #1E7A45; } .ft-pptx { color: #C65A1E; } .ft-jpg, .ft-png { color: #7A55B8; }
[data-bs-theme=dark] .ft-pdf { color: #F07C73; } [data-bs-theme=dark] .ft-docx { color: #7FA8EE; } [data-bs-theme=dark] .ft-xlsx { color: #5FC98A; } [data-bs-theme=dark] .ft-pptx { color: #F09B63; } [data-bs-theme=dark] .ft-jpg { color: #B89AEF; }
.due-soon { color: var(--c-warn); font-weight: 600; }
.due-over { color: var(--c-danger); font-weight: 600; }

/* ---------- KPI tiles ---------- */
.kpi { display: block; text-decoration: none; color: inherit; background: var(--dc-surface); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: .95rem 1rem; box-shadow: var(--dc-shadow); height: 100%; transition: border-color .15s, transform .15s; }
.kpi:hover { border-color: color-mix(in srgb, var(--dc-primary) 45%, var(--bs-border-color)); color: inherit; }
.kpi .k-label { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.kpi .k-label i { font-size: .95rem; }
.kpi .k-val { font-size: 1.85rem; font-weight: 600; line-height: 1.1; margin-top: .45rem; font-variant-numeric: tabular-nums; color: var(--bs-emphasis-color); letter-spacing: -.02em; }
.kpi .k-sub { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .2rem; }
.kpi.is-danger .k-val, .kpi.is-danger .k-label i { color: var(--c-danger); }
.kpi.is-warn .k-val, .kpi.is-warn .k-label i { color: var(--c-warn); }

/* ---------- Status distribution bar ---------- */
.dist { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.dist span { display: block; height: 100%; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem 1rem; margin-top: 1rem; font-size: .8rem; }
.legend div { display: flex; align-items: center; gap: .5rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: .6rem; font-size: .8rem; padding-block: .28rem; }
.hbar .track { height: 8px; background: var(--bs-secondary-bg); border-radius: 4px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--dc-primary); border-radius: 4px; }
.hbar b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Expiry list ---------- */
.exp-row { display: grid; grid-template-columns: 58px 1fr; gap: .8rem; align-items: center; padding: .7rem 1rem; border-top: 1px solid var(--bs-border-color); }
.exp-row:first-child { border-top: 0; }
.days { text-align: center; border-radius: 8px; padding: .3rem 0; line-height: 1.05; font-variant-numeric: tabular-nums; }
.days b { display: block; font-size: 1.05rem; font-weight: 600; }
.days small { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.days.d-expired { background: color-mix(in srgb, var(--c-danger) 14%, transparent); color: var(--c-danger); }
.days.d-critical { background: color-mix(in srgb, var(--c-danger) 10%, transparent); color: var(--c-danger); }
.days.d-warn { background: color-mix(in srgb, var(--c-warn) 13%, transparent); color: var(--c-warn); }
.days.d-ok { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.life { height: 6px; border-radius: 3px; background: var(--bs-secondary-bg); overflow: hidden; margin-top: .35rem; }
.life > span { display: block; height: 100%; border-radius: 3px; }
.alert-steps { display: inline-flex; gap: .25rem; flex-wrap: nowrap; }
td.tnum, .table td.mono { white-space: nowrap; }
.alert-steps span { white-space: nowrap; font-size: .66rem; font-family: var(--bs-font-monospace); padding: .08rem .35rem; border-radius: 3px; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.alert-steps span.sent { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); border-color: transparent; }
.alert-steps span.sent::before { content: "✓ "; }

/* ---------- Activity feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 30px 1fr auto; gap: .75rem; align-items: start; padding: .7rem 1rem; border-top: 1px solid var(--bs-border-color); font-size: .84rem; }
.feed li:first-child { border-top: 0; }
.feed .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: .85rem; }
.feed .ic.approved { color: var(--c-active); background: color-mix(in srgb, var(--c-active) 12%, transparent); }
.feed .ic.rejected { color: var(--c-rejected); background: color-mix(in srgb, var(--c-rejected) 12%, transparent); }
.feed .ic.review { color: var(--c-review); background: color-mix(in srgb, var(--c-review) 12%, transparent); }
.feed time { font-size: .74rem; color: var(--bs-secondary-color); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Filters ---------- */
.filterbar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto; gap: .6rem; align-items: end; }
@media (max-width: 991.98px) { .filterbar { grid-template-columns: 1fr 1fr; } .filterbar > :first-child { grid-column: 1 / -1; } }
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-chips .chip { background: color-mix(in srgb, var(--dc-primary) 10%, transparent); color: var(--dc-primary); }
.filter-chips .chip button { border: 0; background: none; color: inherit; padding: 0; line-height: 1; }
.quick-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.quick-tabs button, .quick-tabs a { text-decoration: none; display: inline-block; line-height: 1.4; }
.quick-tabs button, .quick-tabs a { border: 1px solid var(--bs-border-color); background: var(--dc-surface); color: var(--bs-body-color); border-radius: 999px; padding: .28rem .8rem; font-size: .8rem; }
.quick-tabs a b, .quick-tabs button b { font-weight: 600; margin-left: .3rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.quick-tabs a.on, .quick-tabs button.on { background: var(--dc-primary); border-color: var(--dc-primary); color: var(--dc-on-primary); }
.quick-tabs a.on b, .quick-tabs button.on b { color: inherit; opacity: .75; }
.doc-link { text-decoration: none; }
.doc-link:hover .doc-name { text-decoration: underline; }
.doc-name { color: var(--bs-emphasis-color); font-weight: 500; }
.doc-sub { font-size: .75rem; color: var(--bs-secondary-color); }

/* ---------- Detail page ---------- */
.doc-head { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.doc-head h1 { font-size: 1.45rem; font-weight: 600; margin: .15rem 0 .5rem; }
.doc-head .meta-line { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.doc-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.dl-grid > div { padding: .6rem 1rem; border-top: 1px solid var(--bs-border-color); }
.dl-grid > div:nth-child(-n+2) { border-top: 0; }
.dl-grid > div:nth-child(odd) { border-right: 1px solid var(--bs-border-color); }
.dl-grid dt { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.dl-grid dd { margin: 0; font-size: .86rem; color: var(--bs-emphasis-color); }
.dl-grid .span-2 { grid-column: 1 / -1; border-right: 0 !important; }

/* controlled paper preview */
.paper-wrap { background: var(--bs-secondary-bg); border-radius: 8px; padding: 1.25rem; display: grid; place-items: center; }
.paper { background: var(--dc-paper); width: 100%; max-width: 440px; aspect-ratio: 1 / 1.35; box-shadow: 0 2px 10px rgba(10, 18, 34, .14); border-radius: 2px; padding: 5% 6%; position: relative; overflow: hidden; font-size: .6rem; color: var(--bs-body-color); }
.paper table { width: 100%; border-collapse: collapse; font-size: .55rem; }
.paper td { border: 1px solid var(--dc-paper-line); padding: .25rem .35rem; }
.paper td.lbl { color: var(--bs-secondary-color); width: 22%; }
.paper .ptitle { font-weight: 600; font-size: .85rem; margin: .9rem 0 .5rem; color: var(--bs-emphasis-color); }
.paper .line { height: 5px; background: var(--dc-paper-line); border-radius: 3px; margin: .45rem 0; }
.paper .line.h { height: 7px; width: 40%; background: color-mix(in srgb, var(--dc-paper-line) 60%, var(--bs-secondary-color)); margin-top: .9rem; }
.stamp { position: absolute; right: 7%; top: 34%; transform: rotate(-12deg); border: 2px solid var(--dc-brass); color: var(--dc-brass); border-radius: 6px; padding: .35rem .7rem; text-align: center; font-family: var(--bs-font-monospace); font-weight: 600; letter-spacing: .08em; background: color-mix(in srgb, var(--dc-paper) 80%, transparent); }
.stamp b { display: block; font-size: .78rem; }
.stamp small { display: block; font-size: .5rem; letter-spacing: .04em; }
.paper .pfoot { position: absolute; left: 6%; right: 6%; bottom: 3.5%; display: flex; justify-content: space-between; font-size: .5rem; color: var(--bs-secondary-color); border-top: 1px solid var(--dc-paper-line); padding-top: .3rem; }
.file-strip { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-top: 1px solid var(--bs-border-color); }
.file-strip .ftype { font-size: 1.6rem; }
.hash { font-family: var(--bs-font-monospace); font-size: .7rem; color: var(--bs-secondary-color); word-break: break-all; }

/* lifecycle stepper */
.stepper { list-style: none; display: flex; margin: 0; padding: 0; overflow-x: auto; }
.stepper li { flex: 1 1 0; min-width: 118px; position: relative; padding-top: 1.9rem; padding-right: .5rem; font-size: .76rem; }
.stepper li::before { content: ""; position: absolute; top: .62rem; left: 0; right: 0; height: 2px; background: var(--bs-border-color); }
.stepper li:first-child::before { left: .7rem; }
.stepper li:last-child::before { right: auto; width: .7rem; }
.stepper li .nd { position: absolute; top: 0; left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--dc-surface); border: 2px solid var(--bs-border-color); font-size: .7rem; color: var(--bs-secondary-color); z-index: 1; }
.stepper li.done::before { background: var(--c-active); }
.stepper li.done .nd { background: var(--c-active); border-color: var(--c-active); color: var(--dc-surface); }
.stepper li.now .nd { border-color: var(--c-pending); color: var(--c-pending); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-pending) 18%, transparent); }
.stepper li.bad .nd { background: var(--c-rejected); border-color: var(--c-rejected); color: var(--dc-surface); }
.stepper b { display: block; font-weight: 600; color: var(--bs-emphasis-color); font-size: .78rem; }
.stepper span { display: block; color: var(--bs-secondary-color); font-size: .72rem; }

/* thread / comments */
.thread { list-style: none; margin: 0; padding: 0; }
.thread li { display: grid; grid-template-columns: 30px 1fr; gap: .7rem; padding: .75rem 0; border-top: 1px solid var(--bs-border-color); }
.thread li:first-child { border-top: 0; }
.thread .who { font-weight: 600; color: var(--bs-emphasis-color); font-size: .84rem; }
.thread .when { font-size: .74rem; color: var(--bs-secondary-color); margin-left: .4rem; }
.thread p { margin: .2rem 0 0; font-size: .84rem; }

/* ---------- Forms ---------- */
.form-section { padding: 1.25rem; border-top: 1px solid var(--bs-border-color); }
.form-section:first-child { border-top: 0; }
.form-section h3 { font-size: .92rem; font-weight: 600; margin: 0 0 .15rem; }
.form-section .hint { font-size: .78rem; color: var(--bs-secondary-color); margin-bottom: 1rem; }
.locked { position: relative; }
.locked .form-control { padding-right: 2rem; }
.locked > i { position: absolute; right: .7rem; top: 2.05rem; color: var(--bs-secondary-color); font-size: .8rem; }
.id-preview { font-family: var(--bs-font-monospace); font-size: 1.05rem; font-weight: 600; color: var(--bs-emphasis-color); padding: .5rem .75rem; border-radius: 6px; background: var(--bs-secondary-bg); display: inline-block; letter-spacing: .02em; }
.dropzone { border: 1.5px dashed color-mix(in srgb, var(--dc-primary) 35%, var(--bs-border-color)); border-radius: 8px; padding: 1.4rem 1rem; text-align: center; background: var(--dc-surface-2); cursor: pointer; }
.dropzone:hover, .dropzone.drag { background: color-mix(in srgb, var(--dc-primary) 6%, var(--dc-surface)); }
.dropzone i { font-size: 1.6rem; color: var(--dc-primary); }
.dropzone .types { font-size: .72rem; color: var(--bs-secondary-color); margin-top: .35rem; }
.dropzone.is-invalid { border-color: var(--c-danger); }
.picked { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--bs-border-color); border-radius: 8px; margin-top: .6rem; background: var(--dc-surface); }
.next-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.next-steps li { position: relative; padding: 0 0 1rem 2.1rem; font-size: .82rem; }
.next-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-secondary-bg); font-weight: 600; font-size: .72rem; color: var(--bs-emphasis-color); }
.next-steps li::after { content: ""; position: absolute; left: .7rem; top: 1.55rem; bottom: .15rem; width: 1px; background: var(--bs-border-color); }
.next-steps li:last-child::after { display: none; }
.next-steps b { color: var(--bs-emphasis-color); display: block; font-weight: 600; }
.sticky-side { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); }
.rule-note { display: flex; gap: .6rem; font-size: .8rem; padding: .7rem .85rem; border-radius: 8px; background: var(--bs-secondary-bg); }
.rule-note i { color: var(--dc-brass); margin-top: .1rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--bs-border-color); background: var(--dc-surface-2); border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }

/* access matrix */
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.yes { color: var(--c-ok); } .no { color: var(--bs-border-color); }

.min-w-0 { min-width: 0; }
.task-type { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.age { font-variant-numeric: tabular-nums; }
.lock-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--bs-secondary-color); }
.toast { --bs-toast-bg: var(--dc-surface); --bs-toast-border-color: var(--bs-border-color); --bs-toast-font-size: .84rem; }
.table-responsive { border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 575.98px) {
  .content { padding-inline: 1rem; }
  .topbar { padding-inline: 1rem; gap: .4rem; }
  .role-btn .who { display: none; }
  .dl-grid { grid-template-columns: 1fr; }
  .dl-grid > div { border-right: 0 !important; }
  .dl-grid > div:nth-child(2) { border-top: 1px solid var(--bs-border-color); }
  .kpi .k-val { font-size: 1.5rem; }
}

/* ---------- CI4 build additions ---------- */
.flash-stack { display: grid; gap: .5rem; margin-bottom: 1rem; }
.alert { --bs-alert-padding-y: .65rem; font-size: .85rem; border-radius: 8px; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--dc-sidebar-bg); }
.login-card { width: 100%; max-width: 400px; background: var(--dc-surface); border-radius: 12px; padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.login-card .brand-mark { width: 42px; height: 42px; font-size: .9rem; }
.empty { text-align: center; color: var(--bs-secondary-color); padding: 2.5rem 1rem; }
.empty i { font-size: 1.6rem; display: block; margin-bottom: .4rem; opacity: .6; }
.stat-inline { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.stat-inline div { font-size: .8rem; color: var(--bs-secondary-color); }
.stat-inline b { display: block; font-size: 1rem; color: var(--bs-emphasis-color); font-weight: 600; }
.notif-item.unread { background: color-mix(in srgb, var(--dc-primary) 6%, transparent); }
.temp-pass { font-family: var(--bs-font-monospace); font-size: 1.1rem; font-weight: 600; letter-spacing: .05em; }
.company-form { margin: 0; }
.table .actions-cell { white-space: nowrap; text-align: right; }
.withdrawn-row td { opacity: .6; }
.diff-desc { white-space: pre-line; }
.brand-sub { white-space: nowrap; }
.btn-check:checked + .btn-light-soft { background: color-mix(in srgb, var(--dc-primary) 12%, var(--dc-surface)); border-color: var(--dc-primary); color: var(--dc-primary); font-weight: 600; }
.table td.diff-desc { min-width: 180px; }


/* =====================================================================
   OCEAN BLUE THEME (selected 28-09-2026)
   Blue header bar · white sidebar · Manrope + IBM Plex Mono
   ===================================================================== */
:root, [data-bs-theme=light] {
  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: #EDF2F8; --bs-body-color: #1B2A3D; --bs-emphasis-color: #0B1A2C; --bs-secondary-color: #5B6B80;
  --bs-border-color: #D8E1EC; --bs-border-color-translucent: rgba(11, 26, 44, .12);
  --bs-secondary-bg: #E5ECF5; --bs-tertiary-bg: #F4F7FB;
  --bs-primary: #0A5BB5; --bs-primary-rgb: 10, 91, 181;
  --bs-link-color: #0A5BB5; --bs-link-color-rgb: 10, 91, 181; --bs-link-hover-color: #084A94; --bs-link-hover-color-rgb: 8, 74, 148;
  --bs-focus-ring-color: rgba(10, 91, 181, .25);
  --dc-surface: #FFFFFF; --dc-surface-2: #F6F9FC;
  --dc-primary: #0A5BB5; --dc-primary-hover: #084A94; --dc-on-primary: #FFFFFF;
  --dc-brass: #0E8A6A; --dc-brass-soft: #DDF3EC;
  --dc-sidebar-bg: #FFFFFF; --dc-sidebar-fg: #43546A; --dc-sidebar-fg-strong: #0B1A2C;
  --dc-sidebar-hover: #F0F5FB; --dc-sidebar-active: #0A5BB5; --dc-sidebar-accent: #FFFFFF;
  --dc-sidebar-group: #8193A8; --dc-sidebar-line: #D8E1EC;
  --dc-topbar-bg: #0A4D98; --dc-brand-bg: #083F7E; --dc-topbar-fg: #FFFFFF; --dc-topbar-muted: #BFD3EE;
  --dc-count-bg: #E6EEF8; --dc-count-fg: #0A5BB5;
  --dc-shadow: 0 1px 3px rgba(11, 26, 44, .08);
  --dc-paper: #FFFFFF; --dc-paper-line: #E1E8F1;
}
[data-bs-theme=dark] {
  --bs-body-bg: #0C1422; --bs-body-color: #D6DFEB; --bs-emphasis-color: #F2F6FB; --bs-secondary-color: #93A3B8;
  --bs-border-color: #23324A; --bs-border-color-translucent: rgba(255, 255, 255, .1);
  --bs-secondary-bg: #182438; --bs-tertiary-bg: #121C2D;
  --bs-primary: #6AA8F0; --bs-primary-rgb: 106, 168, 240;
  --bs-link-color: #6AA8F0; --bs-link-color-rgb: 106, 168, 240; --bs-link-hover-color: #93C0F5; --bs-link-hover-color-rgb: 147, 192, 245;
  --bs-focus-ring-color: rgba(106, 168, 240, .3);
  --dc-surface: #121C2D; --dc-surface-2: #16223A;
  --dc-primary: #6AA8F0; --dc-primary-hover: #93C0F5; --dc-on-primary: #0B1422;
  --dc-brass: #4FD1A5; --dc-brass-soft: rgba(79, 209, 165, .12);
  --dc-sidebar-bg: #0F1929; --dc-sidebar-fg: #A7B5C8; --dc-sidebar-fg-strong: #FFFFFF;
  --dc-sidebar-hover: rgba(255, 255, 255, .05); --dc-sidebar-active: #1D5AA6; --dc-sidebar-accent: #FFFFFF;
  --dc-sidebar-group: #6B7C93; --dc-sidebar-line: #1E2B40;
  --dc-topbar-bg: #0D2747; --dc-brand-bg: #0A1F3A; --dc-topbar-fg: #FFFFFF; --dc-topbar-muted: #8FB0D8;
  --dc-count-bg: rgba(106, 168, 240, .16); --dc-count-fg: #9CC4F5;
  --dc-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --dc-paper: #172238; --dc-paper-line: #2A3A55;
}
.sidebar-shell { border-right: 1px solid var(--dc-sidebar-line); }
.brand { background: var(--dc-brand-bg); color: #fff; min-height: 58px; padding-block: .7rem; }
.brand .brand-sub { color: var(--dc-topbar-muted); }
.brand-mark { background: #fff; color: var(--dc-brand-bg); }
.nav-group { color: var(--dc-sidebar-group); }
.side-nav a.active { color: #fff; }
.side-nav .count { background: var(--dc-count-bg); color: var(--dc-count-fg); }
.side-nav a.active .count { background: rgba(255, 255, 255, .22); color: #fff; }
.side-nav .count.alert-c { background: #D93A2B; color: #fff; }
.sidebar-foot { border-top-color: var(--dc-sidebar-line); color: var(--dc-sidebar-group); }
.topbar { background: var(--dc-topbar-bg); border-bottom: 0; color: var(--dc-topbar-fg); }
.topbar .search .form-control { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
.topbar .search .form-control::placeholder { color: var(--dc-topbar-muted); }
.topbar .search .form-control:focus { background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); }
.topbar .search i { color: var(--dc-topbar-muted); }
.topbar .search kbd { background: rgba(255, 255, 255, .15); color: #DCE8F7; border-color: transparent; }
.topbar .icon-btn { color: #DCE8F7; }
.topbar .icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topbar .icon-btn .pip { border-color: var(--dc-topbar-bg); background: #FFB020; }
.topbar .role-btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
.topbar .role-btn .who span, .topbar .role-btn .text-muted { color: var(--dc-topbar-muted) !important; }
.topbar .avatar { background: #fff; color: var(--dc-topbar-bg); }
.topbar .company-select, .topbar .chip { background-color: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
.topbar .company-select option { color: #0B1A2C; }
.topbar :focus-visible { outline-color: #fff; }
.card { --bs-card-border-radius: 8px; --bs-card-inner-border-radius: 7px; }
.card-header { background: var(--dc-surface-2); }
.kpi { border-radius: 8px; border-top: 3px solid var(--dc-primary); }
.kpi.is-warn { border-top-color: var(--c-warn); }
.kpi.is-danger { border-top-color: var(--c-danger); }
.kpi .k-val { font-weight: 800; }
.page-head h1, .doc-head h1 { font-weight: 800; }
.login-wrap { background: var(--dc-brand-bg); }
.login-card .brand-mark { background: var(--dc-primary); color: #fff; }
.stamp { border-color: var(--dc-brass); color: var(--dc-brass); }

/* =====================================================================
   REVISION COMPARE
   ===================================================================== */
:root, [data-bs-theme=light] { --cmp-del-bg: #FDECEC; --cmp-del-mark: #F7C1C1; --cmp-del-fg: #9B1C1C; --cmp-ins-bg: #E8F7EE; --cmp-ins-mark: #B5E6C6; --cmp-ins-fg: #11653A; --cmp-empty: repeating-linear-gradient(135deg, #F4F6F9 0 6px, #EEF1F5 6px 12px); }
[data-bs-theme=dark] { --cmp-del-bg: rgba(244, 108, 108, .1); --cmp-del-mark: rgba(244, 108, 108, .35); --cmp-del-fg: #F7A1A1; --cmp-ins-bg: rgba(99, 204, 126, .1); --cmp-ins-mark: rgba(99, 204, 126, .32); --cmp-ins-fg: #8BE0A3; --cmp-empty: repeating-linear-gradient(135deg, #131D2E 0 6px, #172338 6px 12px); }
.cmp-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
@media (max-width: 991.98px) { .cmp-pick { grid-template-columns: 1fr; } .cmp-swap { justify-self: center; transform: rotate(90deg); } }
.cmp-file { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: .8rem .9rem; min-width: 0; }
.cmp-old { border-left: 4px solid #D14343; } .cmp-new { border-left: 4px solid #1F9254; }
.cmp-tag { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 4px; color: #fff; background: #D14343; }
.cmp-new .cmp-tag, .cmp-tag-new { background: #1F9254; }
.cmp-tag-old { background: #D14343; }
.cmp-swap { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bs-border-color); background: var(--dc-surface); color: var(--dc-primary); }
.cmp-swap:hover { background: var(--bs-tertiary-bg); }
.cmp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cmp-stats div { border-radius: 8px; padding: .55rem .7rem; }
.cmp-stats b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cmp-stats span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cmp-stats .s-add { background: var(--cmp-ins-bg); color: var(--cmp-ins-fg); }
.cmp-stats .s-del { background: var(--cmp-del-bg); color: var(--cmp-del-fg); }
.cmp-stats .s-mod { background: color-mix(in srgb, var(--c-warn) 12%, transparent); color: var(--c-warn); }
.cmp-verdict.ok { color: var(--c-ok); font-weight: 600; }
.cmp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); background: var(--dc-surface-2); position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 3; }
.cmp-legend del, .diff del { background: var(--cmp-del-mark); color: var(--cmp-del-fg); text-decoration: line-through; text-decoration-thickness: 1px; border-radius: 2px; padding: 0 1px; }
.cmp-legend ins, .diff ins { background: var(--cmp-ins-mark); color: var(--cmp-ins-fg); text-decoration: none; border-radius: 2px; padding: 0 1px; }
.cmp-legend { font-size: .8rem; display: inline-flex; gap: .6rem; }
.diff { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .84rem; min-width: 760px; }
.diff thead th { position: sticky; top: 0; background: var(--dc-surface-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color); }
.diff td { padding: .3rem .6rem; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent); word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.5; }
.diff td.ln { color: var(--bs-secondary-color); font-family: var(--bs-font-monospace); font-size: .72rem; text-align: right; user-select: none; background: var(--dc-surface-2); }
.diff td.tx:first-of-type, .diff td:nth-child(2) { border-right: 1px solid var(--bs-border-color); }
.diff tr.d-del td:nth-child(2), .diff tr.d-mod td:nth-child(2) { background: var(--cmp-del-bg); }
.diff tr.d-ins td:nth-child(4), .diff tr.d-mod td:nth-child(4) { background: var(--cmp-ins-bg); }
.diff tr.d-ins td:nth-child(2), .diff tr.d-del td:nth-child(4) { background: var(--cmp-empty); }
.diff tr.d-sec td { background: var(--bs-secondary-bg); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: .3rem .75rem; }
.diff tr.d-gap td { text-align: center; background: var(--bs-tertiary-bg); padding: .2rem; }
.diff tr.is-current td { box-shadow: inset 0 2px 0 var(--dc-primary), inset 0 -2px 0 var(--dc-primary); }
.diff.show-all tr.d-gap { display: none; }
.cells-diff .c-oldv { color: var(--cmp-del-fg); text-decoration: line-through; }
.cells-diff .c-newv { color: var(--cmp-ins-fg); font-weight: 600; }
.cmp-sheet + .cmp-sheet { border-top: 1px solid var(--bs-border-color); }
.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
@media (max-width: 991.98px) { .viz-grid { grid-template-columns: 1fr; } }
.viz-pane { border: 1px solid var(--bs-border-color); border-radius: 8px; overflow: hidden; background: var(--dc-surface); min-width: 0; }
.viz-head { padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color); background: var(--dc-surface-2); font-size: .82rem; display: flex; gap: .5rem; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-frame { display: block; width: 100%; height: 78vh; border: 0; background: #525659; }
.viz-img { padding: .75rem; background: var(--bs-tertiary-bg); text-align: center; }
.viz-img img { max-width: 100%; }
.viz-overlay { padding: 1rem; }
.ov-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.ov-stage img { max-width: 100%; display: block; }
.ov-top { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; border-right: 2px solid var(--dc-primary); }
.ov-top img { max-width: none; }
#diffCanvas { max-width: 100%; border: 1px solid var(--bs-border-color); }
.change-card { border-left: 4px solid var(--dc-primary); }
.viz-pages { height: 78vh; overflow: auto; padding: 12px; background: var(--bs-secondary-bg); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.viz-page { position: relative; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); background: #fff; line-height: 0; max-width: 100%; }
.viz-page canvas { max-width: 100%; height: auto; }
.viz-pno { position: absolute; right: 6px; bottom: 6px; line-height: 1; font-size: .68rem; background: rgba(11, 26, 44, .7); color: #fff; padding: .15rem .4rem; border-radius: 3px; }
.viz-loading { padding: 2rem; color: var(--bs-secondary-color); font-size: .85rem; }
.viz-diff { padding: 1rem; display: grid; gap: 1rem; justify-items: center; }
.viz-diff-page { width: 100%; max-width: 900px; border: 1px solid var(--bs-border-color); border-radius: 8px; overflow: hidden; background: var(--dc-surface); }
.viz-diff-page canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.viz-diff-head { padding: .5rem .75rem; font-size: .82rem; border-bottom: 1px solid var(--bs-border-color); background: var(--dc-surface-2); display: flex; gap: .6rem; flex-wrap: wrap; }
.viz-diff-page.is-same .viz-diff-head { border-bottom: 0; }
.ov-stage canvas { max-width: 100%; height: auto; display: block; }
.ov-top canvas { max-width: none; }
.cmp-file > .d-flex:first-child { flex-wrap: wrap; }
.cmp-file select { max-width: 100%; min-width: 0; }
@media (max-width: 575.98px) { .cmp-toolbar { position: static; } .cmp-legend { margin-left: 0 !important; } }