/* ==========================================================================
   KOSMOID BRAND SKIN — SQRD "Digital Brand and UI System"
   FR: feature-requests/brand-reskin-sqrd.md
   Loads AFTER styles.css (base.html, public.html, subject_user_form.jinja).
   Part 1 (base) changes colour, type face, weight, corners and borders only:
   no position, width, height, padding, margin or font-size change. New
   outlines use an inset box-shadow ring, so no element grows by a pixel.
   Part 2 (options, chosen by the owner 2026-11-12) changes some sizes.
   ========================================================================== */

/* Inter 4.1 variable (SIL OFL 1.1, static/fonts/inter/LICENSE.txt) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/InterVariable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/InterVariable-Italic.woff2') format('woff2');
}

:root {
    /* Brand working palette (guide p.19) */
    --k-ink: #192637;          /* primary ink */
    --k-ink-deep: #0F1824;     /* hover on ink */
    --k-secondary: #60707D;    /* secondary text */
    --k-label: #404F5E;        /* form labels (p.21) */
    --k-structure: #E1E6E9;    /* hairlines, tracks */
    --k-row-line: #EDF0F2;     /* table row lines (p.21) */
    --k-hover: #F7F9FA;        /* hover field */
    --k-edge: #D5DDE2;         /* control edge */
    --k-edge-strong: #B9C4CC;  /* hover edge */
    --k-btn-edge: #A9B4BD;     /* outline button edge (p.20) */
    --k-pill-edge: #DBE3E8;    /* status pill ring (p.20) */
    --k-muted-fill: #EEF1F4;   /* selected row, active nav */
    /* Status colours (sampled from guide p.20-22): muted, never loud */
    --k-ok: #3D6657;
    --k-ok-fill: #E9F1EC;
    --k-act: #856140;
    --k-act-fill: #F7F0E4;
    --k-bad: #A35452;
    --k-bad-fill: #F6E9E8;
    --k-review: #426378;
    --k-invalid-edge: #BA7D7A;

    /* Re-point the legacy purple tokens: every var(--primary-purple…) in
       styles.css and in inline template styles follows. */
    --primary-purple: var(--k-ink);
    --primary-purple-dark: var(--k-ink-deep);
    --primary-purple-light: var(--k-secondary);
    --accent-purple: var(--k-secondary);
    --light-purple: var(--k-structure);
    --very-light-purple: var(--k-hover);
    --navbar-purple: #ffffff;
    --navbar-purple-dark: #ffffff;
    --accent-500: var(--k-ink);
    --accent-400: var(--k-secondary);
    --accent-50: var(--k-hover);
    --accent-100: var(--k-structure);
    --primary-500: var(--k-ink);
    --primary-600: var(--k-ink);
    --primary-700: var(--k-ink-deep);
    --primary-50: var(--k-hover);
    --primary-100: var(--k-structure);
    --success: var(--k-ok);
    --success-light: var(--k-ok-fill);
    --warning: var(--k-act);
    --warning-light: var(--k-act-fill);
    --danger: var(--k-bad);
    --danger-light: var(--k-bad-fill);
    --gray-50: var(--k-hover);
    --neutral-50: var(--k-hover);
    --neutral-200: var(--k-structure);
    --neutral-300: var(--k-edge);
    --gray-200: var(--k-structure);
    --gray-300: var(--k-edge);
    --neutral-500: var(--k-secondary);
    --neutral-600: var(--k-secondary);
    --gray-600: var(--k-secondary);
    --neutral-700: var(--k-ink);
    --neutral-800: var(--k-ink);
    --neutral-900: var(--k-ink);
    --gray-900: var(--k-ink);

    /* Bootstrap */
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--k-ink);
    --bs-body-color-rgb: 25, 38, 55;
    --bs-emphasis-color: var(--k-ink);          /* tables read this; default is #000 */
    --bs-emphasis-color-rgb: 25, 38, 55;
    --bs-secondary-color: var(--k-secondary);
    --bs-border-color: var(--k-structure);
    --bs-primary: #192637;  --bs-primary-rgb: 25, 38, 55;
    --bs-secondary: #60707D; --bs-secondary-rgb: 96, 112, 125;
    --bs-success: #3D6657;  --bs-success-rgb: 61, 102, 87;
    --bs-info: #60707D;     --bs-info-rgb: 96, 112, 125;
    --bs-warning: #C9A061;  --bs-warning-rgb: 201, 160, 97;
    --bs-danger: #A35452;   --bs-danger-rgb: 163, 84, 82;
    --bs-link-color: var(--k-ink);
    --bs-link-color-rgb: 25, 38, 55;
    --bs-link-hover-color: var(--k-ink-deep);
    --bs-link-hover-color-rgb: 15, 24, 36;
    --bs-focus-ring-color: rgba(25, 38, 55, .18);
}

/* ==========================================================================
   PART 1 — BASE SKIN (no size change)
   ========================================================================== */

/* ---- Type: Inter, tabular figures, calmer weights ---- */
body {
    font-family: var(--bs-body-font-family);
    font-feature-settings: "cv11", "ss01";
    background: #fff;          /* brand app frame is pure white (guide p.23) */
    color: var(--k-ink);
}
.main-content, .page-layout, .page-layout__content { background: #fff; }
/* Headings inherit their colour (body text is ink): a title in a dark dialog header then
   takes the header's white text. A fixed ink colour here made those titles navy on navy. */
h1, h2, h3, .h1, .h2, .h3 { font-weight: 500; letter-spacing: -0.02em; }
h4, h5, h6, .h4, .h5, .h6, .card-title, .modal-title { font-weight: 500; letter-spacing: -0.01em; }
.table-header h4 { font-weight: 500; }
table, .update-date, .progress-percentage, .page-link { font-variant-numeric: tabular-nums; }
.text-muted, .text-secondary, .form-text { color: var(--k-secondary) !important; }
.text-purple, .text-primary { color: var(--k-ink) !important; }
.text-info { color: var(--k-secondary) !important; }
.text-success { color: var(--k-ok) !important; }
.text-danger { color: var(--k-bad) !important; }
.text-warning { color: var(--k-act) !important; }

/* ---- Top bar: white frame, hairline, ink wordmark ---- */
.desktop-navbar, .mobile-navbar {
    background: #fff;
    color: var(--k-ink);
    box-shadow: inset 0 -1px 0 var(--k-structure);
}
.desktop-navbar[data-bs-theme="dark"] {
    --bs-navbar-color: var(--k-ink);
    --bs-navbar-hover-color: var(--k-ink);
    --bs-navbar-active-color: var(--k-ink);
    --bs-nav-link-color: var(--k-ink);
    --bs-nav-link-hover-color: var(--k-ink);
    --bs-body-color: var(--k-ink);
    --bs-emphasis-color: var(--k-ink);
}
.desktop-navbar .navbar-brand img, .mobile-navbar-brand img { filter: none; }
.desktop-navbar .nav-link, .desktop-navbar .text-white, .desktop-navbar .text-white-50,
.mobile-navbar .text-white, .mobile-menu-toggle, .mobile-notification-btn { color: var(--k-ink) !important; }
.desktop-navbar .navbar-nav > .nav-item > .nav-link { border-radius: 999px; }
.desktop-navbar .navbar-nav > .nav-item > .nav-link:hover,
.desktop-navbar .navbar-nav > .nav-item > .nav-link.show { background: var(--k-hover); }
.desktop-navbar .navbar-nav > .nav-item > .nav-link.active { background: var(--k-muted-fill); }
.desktop-navbar .dropdown-menu {
    --bs-dropdown-bg: #fff; --bs-dropdown-color: var(--k-ink);
    --bs-dropdown-link-color: var(--k-ink); --bs-dropdown-link-hover-color: var(--k-ink);
    --bs-dropdown-link-hover-bg: var(--k-hover); --bs-dropdown-border-color: var(--k-structure);
    --bs-dropdown-divider-bg: var(--k-structure); --bs-dropdown-header-color: var(--k-secondary);
}
/* Notification count stays a small filled dot (it is a counter, not a status) */
.desktop-navbar .badge.bg-danger, .mobile-navbar .badge.bg-danger {
    background: var(--k-bad) !important; color: #fff !important; box-shadow: none;
}

/* ---- Surfaces: white, hairline, soft corners, no drop shadows ----
   No dark navy card backgrounds (owner decision 2026-11-12). */
.card {
    --bs-card-border-color: var(--k-structure);
    --bs-card-border-radius: 12px;
    --bs-card-inner-border-radius: 11px;
    --bs-card-cap-bg: #fff;
    border-color: var(--k-structure);
    border-radius: 12px;
    box-shadow: none !important;
}
.entity-view-card { border-color: var(--k-structure); box-shadow: none; }
.entity-view-card .card-header, .card-header {
    background-color: #fff;
    border-bottom-color: var(--k-structure);
}
.entity-view-card .card-title { font-weight: 500; color: var(--k-ink); }
.alert { border-radius: 10px; }
.alert-purple, .alert-info, .alert-light {
    background-color: var(--k-hover) !important;
    border-color: var(--k-edge) !important;
    color: var(--k-ink) !important;
}
.alert-warning { background-color: var(--k-act-fill); border-color: #E8D9BF; color: #6E4A1A; }
.alert-danger  { background-color: var(--k-bad-fill); border-color: #E6C9C7; color: #7E2D29; }
.alert-success { background-color: var(--k-ok-fill); border-color: #CFE0D6; color: #24543E; }
fieldset { border-color: var(--k-structure); background: var(--k-hover); }
fieldset legend { color: var(--k-ink) !important; font-weight: 600; }
.modal {
    --bs-modal-border-color: var(--k-structure);
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 15px;   /* outer radius minus the 1 px border */
}
.modal-content { box-shadow: 0 24px 48px rgba(25, 38, 55, .14); }
/* Dialogs with a coloured header (class or inline style): no light border line above the
   dark header; the header corners follow the box corners. */
.modal-content:has(> .modal-header:is(.bg-purple, .bg-dark, .bg-primary, [class*="text-bg-"], [style*="background"])) {
    --bs-modal-border-width: 0;
    --bs-modal-inner-border-radius: 16px;
}
.modal-header { border-bottom-color: var(--k-structure); }
.modal-footer { border-top-color: var(--k-structure); }
.dropdown-menu {
    --bs-dropdown-border-color: var(--k-structure);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-link-hover-bg: var(--k-hover);
    --bs-dropdown-link-active-bg: var(--k-muted-fill);
    --bs-dropdown-link-active-color: var(--k-ink);
    box-shadow: 0 12px 32px rgba(25, 38, 55, .10);
}
.tooltip { --bs-tooltip-bg: var(--k-ink); --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; }

/* ---- Buttons: pills (guide p.20) ---- */
.btn, .btn-secondary, .btn-outline-secondary, .btn-outline-purple, .btn.btn-outline-purple,
.btn-outline-danger, .btn-outline-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { border-radius: 999px; }
.btn, .btn-primary, .btn-secondary, .btn-outline-secondary { font-weight: 500 !important; }
/* Signature shape: filled navy buttons keep ONE square corner, bottom-left (the
   wordmark's "open terminal"). Outline buttons and pills stay fully round. */
.btn-primary, .btn-purple, .btn.btn-primary, .btn.btn-purple,
.btn[style*="--primary-purple"] { border-radius: 999px 999px 999px 0; }
.btn:focus-visible, .btn-primary:focus, .btn-outline-purple:focus, .btn-purple:focus {
    box-shadow: 0 0 0 3px rgba(25, 38, 55, .16) !important;
}
.btn-primary, .btn-purple { background-color: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.btn-primary:hover, .btn-purple:hover {
    background-color: var(--k-ink-deep); border-color: var(--k-ink-deep);
    box-shadow: none; transform: none;
}
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--k-ink); border-color: var(--k-ink); }
.btn-secondary, .btn-outline-secondary, .btn-outline-purple, .btn.btn-outline-purple, .btn-outline-primary {
    background-color: #fff; border-color: var(--k-btn-edge); color: var(--k-ink);
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-purple:hover,
.btn.btn-outline-purple:hover, .btn-outline-primary:hover {
    background-color: var(--k-hover); border-color: var(--k-edge-strong); color: var(--k-ink);
}
.btn-outline-danger {
    --bs-btn-color: var(--k-bad); --bs-btn-border-color: #E6C9C7;
    --bs-btn-hover-bg: var(--k-bad-fill); --bs-btn-hover-color: var(--k-bad); --bs-btn-hover-border-color: var(--k-bad);
}
/* Stock Bootstrap colour buttons fall back to the brand outline pill */
.btn-success, .btn-info, .btn-warning, .btn-danger {
    --bs-btn-bg: #fff; --bs-btn-color: var(--k-ink); --bs-btn-border-color: var(--k-edge);
    --bs-btn-hover-bg: var(--k-hover); --bs-btn-hover-color: var(--k-ink); --bs-btn-hover-border-color: var(--k-edge-strong);
    --bs-btn-active-bg: var(--k-muted-fill); --bs-btn-active-color: var(--k-ink); --bs-btn-active-border-color: var(--k-edge-strong);
}
.btn-danger { --bs-btn-color: var(--k-bad); --bs-btn-border-color: #E6C9C7; --bs-btn-hover-color: var(--k-bad); --bs-btn-hover-bg: var(--k-bad-fill); }
.btn-link { color: var(--k-ink); }
.btn-action { border-radius: 50%; border-color: var(--k-edge); color: var(--k-ink); }
.btn-action:hover { background: var(--k-hover); border-color: var(--k-edge-strong); color: var(--k-ink); }

/* ---- Status labels: white pill, thin ring, slate text, the icon carries colour (p.20) ---- */
.approval-badge, .status-badge, .risk-score-badge, .badge-entity-type,
.entity-view-card .badge-entity-type.company, .entity-view-card .badge-entity-type.individual {
    background: #fff !important;
    color: var(--k-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--k-edge);
    border-radius: 999px;
    font-weight: 500;
}
.approval-badge.approved i, .status-badge.complete i { color: var(--k-ok); }
.approval-badge.info-required i, .status-badge.incomplete i { color: var(--k-act); }
.approval-badge.pending i { color: var(--k-review); }
.approval-badge.rejected i, .status-badge.missing i { color: var(--k-bad); }
.approval-badge.draft i { color: var(--k-secondary); }
.risk-score-badge.risk-low    { color: var(--k-ok) !important; }
.risk-score-badge.risk-medium { color: var(--k-act) !important; }
.risk-score-badge.risk-high   { color: var(--k-bad) !important; }
.approval-badge:focus { box-shadow: inset 0 0 0 1px var(--k-edge-strong), 0 0 0 3px rgba(25, 38, 55, .12); }
.badge { border-radius: 999px; font-weight: 500; }
.badge.text-bg-secondary, .badge.bg-secondary, .entity-view-card .badge.bg-secondary { background-color: var(--k-secondary) !important; }
.badge.text-bg-info { background-color: var(--k-muted-fill) !important; color: var(--k-ink) !important; }
/* Status chips: no fills, only the text carries the status colour */
.badge.bg-success, .badge.text-bg-success, .badge.bg-danger, .badge.text-bg-danger,
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-warning-subtle, .stats-review-pill {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px var(--k-pill-edge);
    font-weight: 500 !important;
}
.badge.bg-success, .badge.text-bg-success { color: var(--k-ok) !important; }
.badge.bg-danger, .badge.text-bg-danger { color: var(--k-bad) !important; }
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-warning-subtle { color: var(--k-act) !important; }
.stats-review-pill { color: #576670 !important; border-color: transparent !important; }
.stats-review-pill i { color: var(--k-act) !important; }
.risk-score-circle, .risk-score-circle-large {
    background: var(--risk-color) !important;   /* risk-level colours are admin data */
    box-shadow: none !important;
    font-weight: 400;          /* "large figures remain light" (p.19) */
    letter-spacing: -0.03em;
}

/* ---- Progress: ink on a light track (p.20) ---- */
.progress-bar-track { background: var(--k-structure); }
.progress-bar-fill.complete, .progress-bar-fill.partial { background: var(--k-ink); }
.progress-bar-fill.low { background: var(--k-secondary); }
.progress { --bs-progress-bg: var(--k-structure); }
.progress-bar { background-color: var(--k-ink); }
.section-dot.complete   { background: var(--k-ok-fill);  color: var(--k-ok); }
.section-dot.partial    { background: var(--k-act-fill); color: var(--k-act); }
.section-dot.incomplete { background: var(--k-hover);    color: #9AA6B0; }
.entity-type-icon, .entity-type-icon.company, .entity-type-icon.person {
    background: #fff; color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-edge);
}

/* ---- Tables: slate headers, hairline rows (p.21) ---- */
.table {
    --bs-table-color: var(--k-ink);
    --bs-table-border-color: var(--k-row-line);
    --bs-table-hover-bg: var(--k-hover);
    --bs-table-striped-bg: var(--k-hover);
}
.table > thead th, .table-light th, .entity-view-card table thead th {
    background: transparent !important;
    color: var(--k-secondary) !important;
    font-weight: 500;
    letter-spacing: .06em;
}
.table thead, .table-light { --bs-table-bg: transparent; }
.entity-children-table thead, .entity-children-table thead th { background: #fff !important; }
.entity-view-card table tbody tr:hover { background: var(--k-hover); }
.entity-name-link, .entity-name-cell .name { font-weight: 500; color: var(--k-ink); }
.entity-name-link:hover { color: var(--k-ink); }

/* ---- Forms & fields (p.21-22). Border WIDTHS unchanged. ---- */
.form-control, .form-select {
    border-color: var(--k-edge);
    border-radius: 8px;
    color: var(--k-ink);
    background-color: #fff;
}
.form-select { background-color: #FAFCFC; border-color: #E2E8EB; }
.form-control:hover, .form-select:hover { border-color: var(--k-edge-strong); }
.form-control:focus, .form-select:focus { border-color: #6B8A9E; box-shadow: none; }
.form-control::placeholder { color: #8A97A3; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #F5F7F7; color: var(--k-secondary); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--k-invalid-edge); }
.invalid-feedback { color: var(--k-bad); }
.form-label { font-weight: 400; color: var(--k-label); }
.form-check-input { border-color: var(--k-edge-strong); }
.form-check-input:checked { background-color: var(--k-ink); border-color: var(--k-ink); }
.form-check-input:focus { border-color: var(--k-secondary); box-shadow: 0 0 0 3px rgba(25, 38, 55, .12); }
/* Radio: white centre, thin ink ring, solid ink dot (p.20) */
.form-check-input[type="radio"]:checked {
    background-color: #fff;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23192637'/%3e%3c/svg%3e");
}
/* Switch off: slate knob instead of stock grey */
.form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A9B4BD'/%3e%3c/svg%3e");
}
.input-group-text { background: var(--k-hover); border-color: var(--k-edge); color: var(--k-secondary); }

/* ---- Typeahead / search lists (p.22): soft frame, white rows, tinted selected row.
   Covers the dedup panel and every #…typeahead-results / #…-typeahead container. ---- */
:is(.dedup-typeahead-container, [id$="typeahead-results"], [id$="-typeahead"]) .list-group {
    border-color: #E2E8EB !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
}
:is(.dedup-typeahead-container, [id$="typeahead-results"], [id$="-typeahead"]) .list-group-item {
    background: #fff !important;
    border-color: var(--k-row-line) !important;
    color: var(--k-ink);
}
:is(.dedup-typeahead-container, [id$="typeahead-results"], [id$="-typeahead"]) .list-group-item.bg-light {
    background: #fff !important;
    color: var(--k-secondary) !important;
    font-weight: 500 !important;
}
:is(.dedup-typeahead-container, [id$="typeahead-results"], [id$="-typeahead"]) .list-group-item-action:hover { background: var(--k-hover) !important; }
:is(.dedup-typeahead-container, [id$="typeahead-results"], [id$="-typeahead"]) .list-group-item:has(input:checked) { background: #F1F4F6 !important; }
:is(.dedup-typeahead-container, [id$="typeahead-results"], [id$="-typeahead"]) .fw-medium { font-weight: 500; color: var(--k-ink); }

/* ---- Navigation pieces ---- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--k-structure);
    --bs-nav-tabs-link-active-color: var(--k-ink);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--k-ink);
}
.nav-link { color: var(--k-secondary); }
.nav-link.active, .nav-link:hover { color: var(--k-ink); }
.pagination {
    --bs-pagination-color: var(--k-ink); --bs-pagination-hover-color: var(--k-ink);
    --bs-pagination-border-color: var(--k-edge); --bs-pagination-hover-bg: var(--k-hover);
}
.pagination .page-link { color: var(--k-ink); border-color: var(--k-edge); }
.pagination .page-item.active .page-link { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.accordion-button:not(.collapsed) { background-color: var(--k-hover); color: var(--k-ink); }
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.text-decoration-none):not(.entity-name-link) {
    text-decoration-color: var(--k-edge-strong);
    text-underline-offset: 3px;
}

/* ==========================================================================
   PART 2 — OPTIONS (owner chose all three, 2026-11-12). These change sizes.
   ========================================================================== */

/* Option 1: small uppercase table headers (guide p.19 "Metadata 10px / 550 / +8%") */
table thead th, .table > thead th, .table-light th, .entity-view-card table thead th {
    text-transform: uppercase;
    font-size: 10.5px !important;
    font-weight: 550 !important;
    letter-spacing: .08em !important;
    color: var(--k-secondary) !important;
}

/* Option 2a: thin progress bars (p.20) */
.progress-bar-track, .progress { height: 4px !important; border-radius: 999px; }
.progress-bar-fill { border-radius: 999px; }

/* Option 2b: 39 px buttons (p.20 "1px border · 39px height") */
.btn:not(.btn-sm):not(.btn-action):not(.btn-close):not(.approval-badge):not(.btn-link) {
    height: 39px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

/* Option 2c: larger, lighter page titles and section titles (p.19 "Page 38px / 420", "Section 21px / 490") */
/* App pages only: on stand-alone pages (404, link error, invalid invitation) the h2 is
   the title of a small centred card and keeps the page's own size. */
body:not(.k-standalone) :is(h2, .h2, .table-header h4) {
    font-size: 2.375rem !important;
    font-weight: 420 !important;
    letter-spacing: -0.045em !important;
}
.card-title, .entity-view-card .card-title, h5.card-title {
    font-size: 1.3125rem !important;
    font-weight: 490 !important;
    letter-spacing: -0.025em;
}

/* Option 3: unframed sections — no card box and no line; the heading and the 48 px
   section spacing separate the sections (owner chose "no lines", 2026-11-12).
   App pages only: stand-alone pages (<body class="k-standalone">: 404, phone gate,
   token errors, Evrotrust, third-party verification, network diagram) are one card
   each and keep the base-skin frame and their own card-header colours. */
body:not(.k-standalone) .entity-table-container {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body:not(.k-standalone) .card,
body:not(.k-standalone) .entity-view-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    --bs-card-inner-border-radius: 0;
}
body:not(.k-standalone) .card-header,
body:not(.k-standalone) .entity-view-card .card-header {
    background: transparent !important;
    border-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body:not(.k-standalone) :is(.card-body, .card-footer) { padding-left: 0 !important; padding-right: 0 !important; }
body:not(.k-standalone) .card-footer { background: transparent !important; }

/* Option 3 exception (owner, 2026-11-12, after mockup https://claude.ai/artifact/RPisajRXmnTNLQA8d47aqo):
   every client-file section is framed like a tile (guide p.20 "constrained selection
   area"): the full-width sections (.entity-view-card.mb-4) and the side-by-side tiles.
   LBA matter-page cards (q-card, lba-rcard) keep Option 3. The inner padding also
   reaches .card-body inside a .collapse wrapper (Principals, UBOs, Shareholders, …). */
.content-area .entity-view-card.mb-4,
.row > [class*="col-"] > .entity-view-card {
    border: 1px solid var(--k-structure) !important;
    border-radius: 12px !important;
    background: #fff !important;
}
:is(.content-area .entity-view-card.mb-4, .row > [class*="col-"] > .entity-view-card) .card-header,
:is(.content-area .entity-view-card.mb-4, .row > [class*="col-"] > .entity-view-card) .card-body {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}
:is(.content-area .entity-view-card.mb-4, .row > [class*="col-"] > .entity-view-card) > .card-header { padding-top: 1rem !important; }
:is(.content-area .entity-view-card.mb-4, .row > [class*="col-"] > .entity-view-card) .card-body { padding-bottom: 1.25rem !important; }
/* The dashboard notification banner is a link line, not a section: no frame (owner, 2026-11-12). */
#notice-center .entity-view-card.mb-4 { border: 0 !important; }
/* No double rule: the last table row inside a section has no bottom line
   (the next section's top hairline follows right after it). */
.entity-view-card .table > tbody > tr:last-child > * { border-bottom-width: 0; }
.entity-view-card .lba-fm-row:last-child { border-bottom: 0; }   /* Matters list (lba_ch.css) */

/* Section rhythm (owner, 2026-11-12: "looks crammed"): 48 px between sections
   instead of Bootstrap's mb-4 (24 px), as in the guide's example page (p.23).
   Halved the same day (owner: "reduce the spacing between the sections by half"): 24 px.
   Targets the client-file sections (.entity-view-card.mb-4) and the tile row
   (.row.g-4.mb-4); both use the !important utility, hence the extra specificity. */
.content-area .entity-view-card.mb-4,
.content-area .row.g-4.mb-4 { margin-bottom: 1.5rem !important; }

/* Clients dashboard list, top-aligned rows (owner, 2026-11-12, as in the Matters list): every cell's first item is
   centred on one line, 18 px below the cell top (the middle of the 36 px type icon); the sub-lines go below. Offsets
   = 18 px - half the item's height (name line 24, status pill 33, progress line 19, risk badge 32, date 17,
   creator line 18, round buttons 32). From 768 px; below it the smaller icon and buttons keep the centred rows. */
@media (min-width: 768px) {
    #admin-entity-table tbody td { vertical-align: top; }
    #admin-entity-table .entity-name-cell { padding-top: 6px; }
    #admin-entity-table td > .entity-status-line { margin-top: 2px; }
    #admin-entity-table .entity-progress { margin-top: 8px; }
    #admin-entity-table .risk-score-badge { vertical-align: top; margin-top: 2px; }
    #admin-entity-table td > .text-muted:only-child { display: block; padding-top: 7px; }
    #admin-entity-table .update-info { padding-top: 9px; }
    #admin-entity-table .creator-info { padding-top: 9px; }
    #admin-entity-table .action-btns { margin-top: 2px; }
}

/* Clients list: the matter chip beside the status pill (owner, 2026-11-12) replaces the muted line under it, so the
   row keeps one height. Count + a dot in the last matter's status tone (the Matters list colours); the sentence is
   in the tooltip. */
.entity-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.matter-chip {
    display: inline-flex; align-items: center; gap: .3rem; height: 24px; padding: 0 .5rem;
    border: 1px solid var(--k-edge); border-radius: 999px; background: transparent;  /* takes the row colour (hover) */
    color: var(--k-secondary); font-size: .8125rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
}
.matter-chip:hover, .matter-chip:focus-visible { border-color: var(--k-edge-strong); background: var(--k-hover); color: var(--k-ink); }
.matter-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.matter-chip-dot--purple { background: var(--k-ink); }
.matter-chip-dot--amber { background: var(--k-act); }
.matter-chip-dot--grey { background: var(--neutral-400); }

/* Officer dashboard: without the notification banner (removed 2026-11-12) the filter bar sat 32 px under the top
   bar; 16 px more puts it 48 px down, where the client file's first line (Back link, action buttons) sits. */
#main-wrapper > #filter-bar:first-child { margin-top: 1rem; }

/* Client-file sub-headings (Registration Information, Legal Information, Registered Address, …): the buttons in some
   headings (Refresh Registry, the pencil) took the global `.btn { margin-top: 1rem }` and made those headings 39 px
   high, so the two columns' headings did not line up (owner, 2026-11-12). No margin on them; every heading is one
   23 px line (the button height), text centred, with or without buttons. */
.entity-section-header { min-height: 23px; line-height: 23px; }
.entity-section-header .btn { margin-top: 0; }

/* Register documents: the two categories (register extract, articles of association) side by side from 768 px,
   64 px apart like the Details columns; stacked below with 24 px between them (owner, 2026-11-12). */
.register-docs-cols { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
@media (min-width: 768px) { .register-docs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; } }

/* Entity/Individual Details: the two columns sat 24 px apart (Bootstrap gutter); owner
   asked for more air. 64 px gutter; outer content edges unchanged (row margins follow). */
.entity-details > .row { --bs-gutter-x: 4rem; margin-left: 0; margin-right: 0; }
/* Inside the framed section the row must not reach past the card padding: the outer
   columns drop their outer gutter, the 64 px gap stays in the middle. */
.entity-details > .row > [class*="col-"]:first-child { padding-left: 0; }
.entity-details > .row > [class*="col-"]:last-child { padding-right: 0; }

/* Option 4 (owner, 2026-11-12): maximum content width on wide screens. All main pages
   wrap their content in .content-area; centre it at 1320 px (Bootstrap's widest
   container; owner chose 1320 over 1200). Narrower screens are unchanged. */
.content-area {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
/* Top bar: the white bar and hairline stay full width; logo, menu and user menu line
   up with the content edges. On desktop .content-area has 32 px side padding and the
   bar's inner box 12 px (Bootstrap), so 1320 - 2 x 32 + 2 x 12 = 1280 px puts both on
   the same edge (formula verified live at 1920 px with 1200/1160). */
.desktop-navbar > .container-fluid {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}