/* =========================
   INTERFACE FONT
   ========================= */

/* Inter 4.1 (SIL Open Font License), served from Ratio itself so every device renders the same
   typeface and no font request leaves the application. One variable file per style covers every
   weight the interface uses (400–850); see static/core/fonts/inter/manifest.json. */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable.2bf3d951bf9d.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable-Italic.8d1dc86da258.woff2") format("woff2");
}

/* =========================
   THEME TOKENS
   =========================
   Every colour in the application comes from these tokens. The raw navy and blue palette
   stays constant for the permanently dark brand shell; everything else uses semantic tokens
   that have a light value here and a dark value in the two dark blocks below. The light
   block also applies to .light-theme-scope, so rendered documents, PDF pages and e-mail
   previews keep their paper colours inside a dark application. */
:root,
.light-theme-scope {
    color-scheme: light;
    --navy-950: #071727; --navy-900: #0b2239; --navy-800: #12395d;
    --blue-700: #17639a; --blue-600: #1f78b4; --blue-500: #3192d0;
    --blue-200: #cfe9fa; --blue-100: #eaf6fd; --blue-050: #f4faff;
    /* Permanently dark brand shell: sidebar, sign-in page and RIA launcher. */
    --shell-surface: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
    --shell-brand-surface: var(--navy-950);
    /* Shell highlights stay identical in both themes because the shell itself does not change. */
    --shell-highlight: #528bef; --shell-highlight-border: #9bc0ff; --shell-online: #62d6ac; --shell-idle: #9aa8bc;
    --login-page-surface: radial-gradient(circle at 18% 18%, rgba(49, 146, 208, 0.24), transparent 32%), linear-gradient(145deg, var(--navy-950), var(--navy-800));
    /* Neutral surfaces, from the page background up to raised menus and dialogs. */
    --background: #f3f7fb; --surface: #ffffff; --surface-raised: #ffffff;
    --surface-subtle: #f8fafb; --surface-muted: #eef2f5; --surface-strong: #e2e8ee;
    --surface-inverse: #0b2239; --field-surface: #ffffff;
    /* Overview headings use a neutral surface, independent of hover and selection. */
    --table-header-surface: #f5f8fb;
    /* Text, from headings to placeholders; on-fill text sits on saturated fills. */
    --text: #17324a; --text-strong: #0b2239; --text-emphasis: #12395d; --text-secondary: #3f566a;
    --muted: #6d8193; --text-subtle: #8798a7; --on-fill: #ffffff; --on-accent: #071727; --logo-plate: #ffffff;
    /* Borders and dividers; field outlines keep 3:1 against their surface in dark mode. */
    --border: rgba(18, 57, 93, 0.12); --border-strong: rgba(18, 57, 93, 0.22);
    --field-outline: rgba(18, 57, 93, 0.22); --field-border: #91a7b8;
    --interface-border-strong: #c8d4dd;
    /* Interaction: links, primary fills, focus rings, hover and selection tints. */
    --link: #17639a; --link-hover: #12395d; --primary: #17639a; --primary-hover: #1f78b4;
    --focus: #3192d0; --selected-border: #1f78b4; --info-border: #b8d4e4;
    --hover-surface: #f4faff; --selected-surface: #eaf6fd; --selected-surface-strong: #cfe9fa;
    --accent: #f59e0b; --accent-hover: #d98906;
    /* Status families: text, strong text, light surface, border and saturated fill. */
    --success: #15803d; --success-strong: #1d6b39; --success-light: #e8f7ee; --success-border: #b9ddc7; --success-fill: #15803d;
    --warning: #9a6200; --warning-strong: #735216; --warning-light: #fff2da; --warning-border: #f0cf8a; --warning-fill: #d97706;
    --danger: #dc2626; --danger-strong: #a32a24; --danger-light: #fdecec; --danger-border: #f0c8c8; --danger-fill: #dc2626;
    --violet: #6d4bb0; --violet-strong: #4f3591; --violet-light: #f0eaff; --violet-border: #ddd6fa; --violet-fill: #7c5cc4;
    /* Shared informational status palette for cards, pills, and legends. */
    --document-status-blue-accent: var(--focus); --document-status-blue-background: var(--selected-surface); --document-status-blue-text: var(--link);
    /* Account-chosen colours used as text are lifted towards the text colour on dark surfaces. */
    --user-color-lift: 0%;
    /* Shadows mix one ink colour; dark mode swaps the ink and softens the elevation. */
    --shadow-ink: #071727;
    --shadow-small: 0 2px 8px rgba(7, 23, 39, 0.05); --shadow: 0 10px 28px rgba(7, 23, 39, 0.08);
    /* Select arrows are drawn in the muted text colour of the active theme. */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23586f82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* The interface typeface; system fonts only cover the moment before Inter has loaded. */
    --interface-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --radius-small: 7px; --radius: 10px; --radius-large: 13px;
    /* Shared brandbook contract for application cards, controls, and copy. */
    --interface-content-width: 1400px; --interface-card-padding: 20px;
    --interface-card-radius: 12px; --interface-tile-radius: 9px;
    --interface-control-height: 40px; --interface-control-padding: 8px 10px;
    --interface-heading-size: 16px; --interface-tile-heading-size: 14px;
    --interface-label-size: 11px; --interface-value-size: 12px;
    --interface-helper-size: 9.5px; --interface-placeholder: #8798a7;
    --interface-border: #dfe4e8; --interface-divider: #e7ebee;
    --interface-edit-surface: #fbfcfd;
    /* Standard read-only records keep white cards around softly tinted fields. */
    --interface-view-card-surface: #ffffff; --interface-view-field-surface: #f8fafb;
    --interface-view-field-text: #17324a;
    --interface-view-surface: var(--interface-view-field-surface);
    /* Disabled editor controls are a shared interaction state, independent of record type. */
    --interface-disabled-field-surface: #eef2f5; --interface-disabled-field-text: #637789;
    --interface-locked-surface: var(--interface-disabled-field-surface);
    --interface-locked-text: var(--interface-disabled-field-text);
    /* Commercial documents deliberately retain their denser locked-field variant. */
    --interface-commercial-tile-heading-size: 12px; --interface-commercial-view-card-surface: #f8fafb;
    --interface-commercial-field-surface: #eef2f5; --interface-commercial-field-text: #637789;
    --sidebar-width: 255px;
}

/* Paper-coloured regions inherit light text even when the surrounding page is dark. */
.light-theme-scope { color: var(--text); }

/* An explicit choice also fixes the browser's own controls and scrollbars. */
:root:not([data-theme]) { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Dark theme, followed automatically when the account keeps the system setting. */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --shell-surface: linear-gradient(180deg, #040d17 0%, #071727 55%, #0b2239 100%);
        --shell-brand-surface: #040d17;
        --login-page-surface: radial-gradient(circle at 18% 18%, rgba(49, 146, 208, 0.14), transparent 34%), linear-gradient(145deg, #040d17, #0b2239);
        --background: #071727; --surface: #0f2438; --surface-raised: #15304a;
        --surface-subtle: #132b42; --surface-muted: #1a3350; --surface-strong: #22405d;
        --surface-inverse: #2a4864; --field-surface: #0c1e31;
        --table-header-surface: #132b42;
        --text: #e3ecf4; --text-strong: #f4f8fc; --text-emphasis: #cfe0ee; --text-secondary: #c0d1e0;
        --muted: #9fb3c6; --text-subtle: #8299ad; --on-fill: #ffffff; --on-accent: #071727; --logo-plate: #ffffff;
        --border: rgba(207, 233, 250, 0.12); --border-strong: rgba(207, 233, 250, 0.24);
        --field-outline: #6a8299; --field-border: #6a8299;
        --interface-border-strong: #3b5a77;
        --link: #7cc4f0; --link-hover: #b5defa; --primary: #1f6fa6; --primary-hover: #2a7fba;
        --focus: #4aa8e0; --selected-border: #5cb3e6; --info-border: #2b5a7e;
        --hover-surface: #12304b; --selected-surface: #163a5a; --selected-surface-strong: #1e4c72;
        --accent: #f59e0b; --accent-hover: #fbb13c;
        --success: #4ade80; --success-strong: #86efac; --success-light: #10322a; --success-border: #24603f; --success-fill: #15803d;
        --warning: #fbbf24; --warning-strong: #fcd34d; --warning-light: #3a2e12; --warning-border: #6b5320; --warning-fill: #d97706;
        --danger: #f87171; --danger-strong: #fca5a5; --danger-light: #3a1e27; --danger-border: #7a3340; --danger-fill: #c42b2b;
        --violet: #b79cf5; --violet-strong: #d4c4fb; --violet-light: #2b2350; --violet-border: #4d3f86; --violet-fill: #7c5cc4;
        --user-color-lift: 55%;
        --shadow-ink: #000000;
        --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%239fb3c6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        --interface-placeholder: #8299ad;
        --interface-border: #29445e; --interface-divider: #1f3a54;
        --interface-edit-surface: #0d2135;
        --interface-view-card-surface: #0f2438; --interface-view-field-surface: #132b42;
        --interface-view-field-text: #e3ecf4;
        --interface-disabled-field-surface: #1a3149; --interface-disabled-field-text: #93a8bb;
        --interface-commercial-view-card-surface: #132b42;
        --interface-commercial-field-surface: #1a3149; --interface-commercial-field-text: #93a8bb;
    }
}

/* Dark theme chosen explicitly in personal settings, regardless of the system setting. */
@media screen {
    :root[data-theme="dark"] {
        --shell-surface: linear-gradient(180deg, #040d17 0%, #071727 55%, #0b2239 100%);
        --shell-brand-surface: #040d17;
        --login-page-surface: radial-gradient(circle at 18% 18%, rgba(49, 146, 208, 0.14), transparent 34%), linear-gradient(145deg, #040d17, #0b2239);
        --background: #071727; --surface: #0f2438; --surface-raised: #15304a;
        --surface-subtle: #132b42; --surface-muted: #1a3350; --surface-strong: #22405d;
        --surface-inverse: #2a4864; --field-surface: #0c1e31;
        --table-header-surface: #132b42;
        --text: #e3ecf4; --text-strong: #f4f8fc; --text-emphasis: #cfe0ee; --text-secondary: #c0d1e0;
        --muted: #9fb3c6; --text-subtle: #8299ad; --on-fill: #ffffff; --on-accent: #071727; --logo-plate: #ffffff;
        --border: rgba(207, 233, 250, 0.12); --border-strong: rgba(207, 233, 250, 0.24);
        --field-outline: #6a8299; --field-border: #6a8299;
        --interface-border-strong: #3b5a77;
        --link: #7cc4f0; --link-hover: #b5defa; --primary: #1f6fa6; --primary-hover: #2a7fba;
        --focus: #4aa8e0; --selected-border: #5cb3e6; --info-border: #2b5a7e;
        --hover-surface: #12304b; --selected-surface: #163a5a; --selected-surface-strong: #1e4c72;
        --accent: #f59e0b; --accent-hover: #fbb13c;
        --success: #4ade80; --success-strong: #86efac; --success-light: #10322a; --success-border: #24603f; --success-fill: #15803d;
        --warning: #fbbf24; --warning-strong: #fcd34d; --warning-light: #3a2e12; --warning-border: #6b5320; --warning-fill: #d97706;
        --danger: #f87171; --danger-strong: #fca5a5; --danger-light: #3a1e27; --danger-border: #7a3340; --danger-fill: #c42b2b;
        --violet: #b79cf5; --violet-strong: #d4c4fb; --violet-light: #2b2350; --violet-border: #4d3f86; --violet-fill: #7c5cc4;
        --user-color-lift: 55%;
        --shadow-ink: #000000;
        --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%239fb3c6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        --interface-placeholder: #8299ad;
        --interface-border: #29445e; --interface-divider: #1f3a54;
        --interface-edit-surface: #0d2135;
        --interface-view-card-surface: #0f2438; --interface-view-field-surface: #132b42;
        --interface-view-field-text: #e3ecf4;
        --interface-disabled-field-surface: #1a3149; --interface-disabled-field-text: #93a8bb;
        --interface-commercial-view-card-surface: #132b42;
        --interface-commercial-field-surface: #1a3149; --interface-commercial-field-text: #93a8bb;
    }
}

/* =========================
   USER MANAGEMENT
   ========================= */

.user-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.user-summary { display: flex; flex-direction: column; gap: 2px; }
.user-summary strong { color: var(--text-emphasis); font-size: 22px; }
.user-summary span, .muted { color: var(--muted); }
.user-search { display: flex; gap: 10px; margin-bottom: 18px; }
.user-search input { flex: 1; }
.user-table { width: 100%; border-collapse: collapse; }
.user-table th, .user-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.user-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.user-table td small { display: block; color: var(--muted); }
.user-list-shell .article-list-card { overflow: hidden; }
.user-list-shell .user-table-card { overflow: auto; border-top: 1px solid var(--border); }
.user-list-shell .user-table { min-width: 850px; }
.user-list-shell .user-table tbody tr { cursor: pointer; }
.user-list-shell .user-table tbody tr:hover { background: var(--hover-surface); }
.user-list-shell .user-table tbody tr:last-child td { border-bottom: 0; }
.user-identity { color: var(--text-strong); text-decoration: none; }
.user-row-arrow { color: var(--link); font-size: 23px; text-decoration: none; }
.user-list-empty { display: flex; align-items: center; flex-direction: column; gap: 4px; padding: 40px; color: var(--muted); text-align: center; }
.user-list-empty strong { color: var(--text-strong); }

.status-pill.active { color: var(--success); background: var(--success-light); }
.status-pill.inactive { color: var(--danger); background: var(--danger-light); }
.state-toggle-button{display:inline-flex!important;align-items:center;justify-content:center;width:112px!important;min-width:112px!important;box-sizing:border-box;text-align:center;white-space:nowrap}
.account-switches { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.account-switches label { display: flex; align-items: center; gap: 9px; font-weight: 650; }
.employee-link-state { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-small); background: var(--hover-surface); }
.employee-link-state span { color: var(--muted); }
.permission-legend { display: flex; gap: 15px; color: var(--muted); font-size: 12px; }
.permission-search { margin-bottom: 14px; }
.permission-search input { width: 100%; }
.permission-branch[hidden], .permission-child[hidden], [data-permission-children][hidden] { display: none !important; }
.permission-tree { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.permission-branch + .permission-branch { border-top: 1px solid var(--border-strong); }
.permission-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; min-height: 48px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.permission-row:last-child { border-bottom: 0; }
.permission-row > div { display: flex; align-items: center; gap: 9px; }
.permission-row select { min-height: 36px; padding: 6px 30px 6px 10px; }
.permission-parent { background: var(--hover-surface); }
.permission-child { padding-left: 40px; background: var(--surface); }
.permission-parent .permission-toggle { width: 34px; min-width: 34px; height: 34px; min-height: 34px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--muted); box-shadow: var(--shadow-small); }
.permission-parent .permission-toggle:hover { border-color: var(--info-border); background: var(--hover-surface); color: var(--link); box-shadow: var(--shadow-small); }
.permission-parent .permission-toggle svg { width: 18px; height: 18px; }
.tree-bullet { width: 34px; color: var(--link); text-align: center; }
.tree-line { color: var(--border-strong); font-size: 18px; }
.permission-empty { margin: 0; padding: 24px; color: var(--muted); text-align: center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Keep document preview actions visually quiet while retaining an accessible label. */
.preview-icon-button{position:relative!important;display:grid!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border:1px solid var(--border-strong)!important;background:var(--surface)!important;color:var(--muted)!important;box-shadow:none!important;place-items:center!important}.document-topbar-icon-action[data-compact-tooltip],.compact-tooltip[data-compact-tooltip]{position:relative!important}
.preview-icon-button svg{display:block;width:20px;height:20px}.preview-icon-button svg path,.preview-icon-button svg circle{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.preview-icon-button:hover,.preview-icon-button:focus-visible{border-color:var(--selected-border)!important;background:var(--hover-surface)!important;color:var(--link)!important;box-shadow:none!important}.preview-icon-button::after,.document-topbar-icon-action[data-compact-tooltip]::after,.compact-tooltip[data-compact-tooltip]::after{position:absolute;z-index:240;top:calc(100% + 7px);right:0;padding:6px 9px;border-radius:999px;background:var(--surface-inverse);color:var(--on-fill);font-size:10px;font-weight:700;line-height:1.2;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-3px);transition:opacity .06s ease,transform .06s ease,visibility 0s!important;white-space:nowrap}.preview-icon-button::after{content:attr(aria-label)}.document-topbar-icon-action[data-compact-tooltip]::after,.compact-tooltip[data-compact-tooltip]::after{content:attr(data-compact-tooltip)}.preview-icon-button:hover::after,.preview-icon-button:focus-visible::after,.document-topbar-icon-action[data-compact-tooltip]:hover::after,.document-topbar-icon-action[data-compact-tooltip]:focus-visible::after,.compact-tooltip[data-compact-tooltip]:hover::after,.compact-tooltip[data-compact-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translateY(0)}details[open]>.document-topbar-icon-action[data-compact-tooltip]::after{opacity:0!important;visibility:hidden}
/* Disabled text actions reuse the icon tooltip, with readable bounded explanations. */
.compact-tooltip[data-compact-tooltip]::after{width:max-content;max-width:min(320px,calc(100vw - 32px));border-radius:var(--radius-small);white-space:normal;text-align:left}
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.user-editor .errorlist { margin: 5px 0 0; padding: 0; color: var(--danger); list-style: none; font-size: 11px; }
.user-editor small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--interface-helper-size); line-height: 1.5; }

@media (max-width: 760px) {
    .user-summary-grid { grid-template-columns: 1fr; }
    .permission-legend { display: none; }
    .permission-row { grid-template-columns: 1fr; gap: 6px; }
    .permission-child { padding-left: 24px; }
    .employee-link-state { flex-direction: column; gap: 4px; }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;

    background: var(--background);
    color: var(--text);

    font-family: var(--interface-font-family);

    line-height: 1.5;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--text-emphasis);
}

/* Shared inline links keep record references distinct within explanatory text. */
.text-link {
    color: var(--text-emphasis);
    font-weight: 600;
}

.text-link,
.text-link:hover,
.text-link:focus-visible {
    text-decoration: none;
}

.text-link:hover,
.text-link:focus-visible {
    color: var(--link);
}

.text-link:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* =========================
   APPLICATION LAYOUT
   ========================= */

.app-layout {
    display: grid;
    grid-template-columns:
                var(--sidebar-width)
                minmax(0, 1fr);

    min-height: 100vh;
    min-height: 100dvh;
}

.app-main {
    grid-column: 2;
    min-width: 0;
}

/* =========================
   SIDEBAR
   ========================= */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;

    display: flex;
    flex-direction: column;

    width: var(--sidebar-width);
    /* The visible height: mobile browser toolbars otherwise cover the sidebar's last items. */
    height: 100vh;
    height: 100dvh;

    padding: 0 14px 18px;

    overflow: hidden;

    color: var(--on-fill);

    background: var(--shell-surface);

    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--on-fill) 14%, transparent) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--on-fill) 14%, transparent);
}

/* =========================
   LOGO
   ========================= */

.sidebar-brand-zone {
    position: relative;
    flex: 0 0 126px;
    min-height: 126px;
    background: var(--shell-brand-surface);
}
/* Keep a navy clearance below RIA even when the navigation is scrolled. */
.sidebar-brand-zone:has(.sidebar-ria) { flex-basis: 140px; min-height: 140px; }

.sidebar-brand {
    display: block;
    height: 82px;

    color: var(--on-fill);
    text-decoration: none;
}

.sidebar-brand:hover {
    color: var(--on-fill);
}

.brand-logo {
    position: absolute;
    top: -20px;
    left: 8px;
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;

    object-fit: contain;
}

.brand-logo-small {
    display: none;
}

/* Organisation logos: centred vertically in the brand link instead of Ratio's offset artwork. */
.brand-logo--organisation {
    top: 17px;
    left: 18px;
    width: auto;
    max-width: 200px;
    max-height: 48px;
}

/* A light plate keeps a logo made for light backgrounds readable on the dark sidebar. */
.brand-logo-plate {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius-small);
    background: var(--logo-plate);
}

.brand-logo-plate img {
    display: block;
    max-width: 180px;
    max-height: 36px;
    object-fit: contain;
}

/* =========================
   SVG ICONS
   ========================= */

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 21px;

    width: 21px;
    height: 21px;

    color: currentColor;
}

.menu-icon svg {
    display: block;

    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================
   SIDEBAR NAV
   ========================= */

.sidebar-nav {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
    min-height: 0;

    gap: 3px;
    padding-top: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--on-fill) 14%, transparent) transparent;
}

/* =========================
   DASHBOARD
   ========================= */

.sidebar-dashboard {
    margin-bottom: 13px;
}

.sidebar-link {
    display: flex;
    align-items: center;

    gap: 11px;

    min-height: 42px;

    padding: 9px 11px;

    border-radius: var(--radius-small);

    color: color-mix(in srgb, var(--on-fill) 78%, transparent);

    font-size: 13.5px;
    font-weight: 650;

    text-decoration: none;

    transition: background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.sidebar-link:hover {
    background: color-mix(in srgb, var(--on-fill) 7%, transparent);
    color: var(--on-fill);

    transform: translateX(2px);
}

.sidebar-link.active {
    position: relative;
    margin-left: 5px;
    padding-left: 14px;
    background: transparent;
    color: var(--on-fill);
    box-shadow: inset 2px 0 0 var(--on-fill);
    text-decoration: none;
}

/* =========================
   MENU GROUP
   ========================= */

.sidebar-group {
    margin-bottom: 5px;
}

.sidebar-group-button {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 40px;

    gap: 10px;

    padding: 8px 10px;

    border: 0;
    border-radius: var(--radius-small);

    background: transparent;
    color: color-mix(in srgb, var(--on-fill) 88%, transparent);

    box-shadow: none;

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition: background 0.15s ease,
    color 0.15s ease;
}

.sidebar-group-button:hover {
    background: color-mix(in srgb, var(--on-fill) 6%, transparent);
    color: var(--on-fill);

    box-shadow: none;
    transform: none;
}

.sidebar-group-button.open {
    color: var(--on-fill);
}

.sidebar-group-button.active {
    margin-left: 5px;
    width: calc(100% - 5px);
    padding-left: 13px;
    background: transparent;
    color: var(--on-fill);
    box-shadow: inset 2px 0 0 var(--on-fill);
    text-decoration: none;
}

.sidebar-group-button.active .sidebar-chevron {
    color: var(--on-fill);
}

.sidebar-group-name {
    flex: 1;
}

/* =========================
   CHEVRON
   ========================= */

.sidebar-chevron {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;
    width: 42px;
    height: 40px;
    margin: -8px -10px -8px 0;
    border-radius: 6px;

    color: color-mix(in srgb, var(--on-fill) 42%, transparent);

    transition: color 0.15s ease,
    background 0.15s ease;
}

.sidebar-chevron:hover {
    background: color-mix(in srgb, var(--on-fill) 8%, transparent);
    color: var(--on-fill);
}

.sidebar-chevron svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.20s ease;
}

.sidebar-group-button.open
.sidebar-chevron {
    color: color-mix(in srgb, var(--on-fill) 78%, transparent);
}

.sidebar-group-button.open
.sidebar-chevron svg {
    transform: rotate(90deg);
}

/* =========================
   SUBMENU
   ========================= */

.sidebar-submenu {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition: grid-template-rows 0.20s ease,
    opacity 0.16s ease;
}

.sidebar-submenu.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Restored menu heights must be final before their saved scroll position is applied. */
.sidebar-nav.is-restoring .sidebar-submenu {
    transition: none;
}

.sidebar-submenu-inner {
    min-height: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    gap: 1px;

    padding-left: 41px;
}

.sidebar-submenu.open
.sidebar-submenu-inner {
    padding-bottom: 6px;
}

.sidebar-submenu-link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 30px;

    padding: 5px 10px;

    border-radius: 6px;

    color: color-mix(in srgb, var(--on-fill) 53%, transparent);

    font-size: 12.5px;
    font-weight: 500;

    text-decoration: none;

    transition: background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.sidebar-submenu-link:hover {
    background: color-mix(in srgb, var(--on-fill) 5.5%, transparent);
    color: var(--on-fill);

    transform: translateX(2px);
}

.sidebar-submenu-link.active {
    background: transparent;
    color: var(--on-fill);

    font-weight: 700;
}

.sidebar-submenu-link.active::before {
    content: none;
}

/* =========================
RELATION TYPE & STATUS
========================= */

.relation-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.relation-meta-column {
    min-width: 0;
}

.relation-meta-title {
    margin: 0 0 14px;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 750;
}

@media (max-width: 900px) {
    .relation-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   REPORTS
   ========================= */

.sidebar-single-link {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 40px;

    padding: 8px 10px;

    border-radius: var(--radius-small);

    color: color-mix(in srgb, var(--on-fill) 88%, transparent);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: background 0.15s ease,
    color 0.15s ease;
}

.sidebar-single-link:hover {
    background: color-mix(in srgb, var(--on-fill) 6%, transparent);
    color: var(--on-fill);
}

.sidebar-single-link.active {
    margin-left: 5px;
    padding-left: 13px;
    background: transparent;
    color: var(--on-fill);
    box-shadow: inset 2px 0 0 var(--on-fill);
    text-decoration: none;
}

/* =========================
   SECTION LANDING PAGE
   ========================= */

.section-landing {
    max-width: 1120px;
    margin: 0 auto;
}

.section-landing-header {
    max-width: 680px;
    margin-bottom: 22px;
}

.section-landing-header h2 {
    margin: 0 0 5px;
    color: var(--text-strong);
    font-size: clamp(20px, 2vw, 22px);
    line-height: 1.25;
}

.section-landing-header > p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.section-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.section-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 22px 16px;
    min-height: 190px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--text-emphasis) 10%, transparent);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

a.section-card:hover {
    border-color: color-mix(in srgb, var(--focus) 45%, transparent);
    color: var(--text);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.section-card-icon {
    display: grid;
    place-items: center;
    grid-column: 1;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--selected-surface), var(--selected-surface));
    color: var(--link);
}

.section-card-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.section-card-copy,
.section-card-copy strong,
.section-card-copy span {
    display: block;
}

.section-card-copy {
    grid-column: 1 / -1;
    align-self: end;
}

.section-card-copy strong {
    margin-bottom: 7px;
    color: var(--text-strong);
    font-size: 18px;
}

.section-card-copy span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.section-card-arrow {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--hover-surface);
    color: var(--link);
    font-size: 22px;
}

.section-card-muted {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.section-card-muted .section-card-icon {
    background: var(--surface-muted);
    color: var(--muted);
}

.section-card-status {
    grid-column: 2;
    grid-row: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-card-muted {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

.section-card:nth-child(4n + 2) .section-card-icon {
    background: linear-gradient(145deg, var(--warning-light), var(--warning-border));
    color: var(--warning);
}

.section-card:nth-child(4n + 3) .section-card-icon {
    background: linear-gradient(145deg, var(--success-light), var(--success-border));
    color: var(--success);
}

.section-card:nth-child(4n + 4) .section-card-icon {
    background: linear-gradient(145deg, var(--violet-light), var(--violet-light));
    color: var(--violet);
}

.section-card:target {
    border-color: color-mix(in srgb, var(--focus) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 10%, transparent), var(--shadow);
}

@media (max-width: 760px) {
    .section-card-grid { grid-template-columns: 1fr; }
    .section-card { padding: 18px; }
}

/* Compact shared navigation for main sections and settings. */
.section-card {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    grid-template-rows: auto;
    align-items: center;
    gap: 16px;
    min-height: 104px;
    padding: 18px;
    border-radius: 11px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-ink) 3.5%, transparent);
}

a.section-card:hover {
    border-color: color-mix(in srgb, var(--focus) 38%, transparent);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--shadow-ink) 7%, transparent);
    transform: translateY(-1px);
}

.section-card-icon {
    grid-column: 1;
    grid-row: 1;
    width: 42px;
    height: 42px;
    border-radius: 9px;
}

.section-card-icon svg {
    width: 20px;
    height: 20px;
}

.section-card-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.section-card-copy strong {
    margin-bottom: 4px;
    font-size: 15px;
}

.section-card-copy span {
    font-size: 12px;
    line-height: 1.45;
}

.section-card-arrow {
    grid-column: 3;
    grid-row: 1;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    font-size: 19px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

a.section-card:hover .section-card-arrow {
    background: var(--hover-surface);
    color: var(--link);
    transform: translateX(2px);
}

.section-card-status {
    grid-column: 3;
    grid-row: 1;
    white-space: nowrap;
}

.section-card.section-card-muted {
    grid-template-columns: 44px minmax(0, 1fr) max-content;
}

.section-settings-page {
    max-width: 920px;
}

.section-settings-page .section-landing-header {
    margin-bottom: 24px;
}

.section-settings-page .section-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-ink) 4%, transparent);
}

.section-settings-page .section-card {
    grid-template-columns: minmax(0, 1fr) 28px;
    min-height: 78px;
    padding: 15px 18px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.section-settings-page .section-card:last-child {
    border-bottom: 0;
}

.section-settings-page .section-card-copy {
    grid-column: 1;
}

/* Short settings titles need a small optical adjustment beside longer labels. */
.section-settings-page .section-card-title-short {
    font-size: 16px;
}

.section-settings-page .section-card-muted {
    grid-template-columns: minmax(0, 1fr) auto;
}

.section-settings-page .section-card-arrow,
.section-settings-page .section-card-status {
    grid-column: 2;
}

.section-settings-page a.section-card:hover {
    border-color: var(--border);
    background: var(--hover-surface);
    box-shadow: inset 3px 0 0 var(--selected-border);
    transform: none;
}

@media (max-width: 760px) {
    .section-card { min-height: 92px; padding: 15px; }
    /* Keep long availability badges below the card copy on narrow screens. */
    .section-landing:not(.section-settings-page) .section-card.section-card-muted { grid-template-columns: 44px minmax(0, 1fr); row-gap: 12px; }
    .section-landing:not(.section-settings-page) .section-card-status { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; white-space: normal; }
    .section-settings-page .section-card { min-height: 74px; padding: 14px 15px; }
}

/* Main-menu links never use underlines, including after browser or cache overrides. */
.sidebar .sidebar-link,
.sidebar .sidebar-link:hover,
.sidebar .sidebar-link:focus,
.sidebar .sidebar-link:active,
.sidebar .sidebar-group-button,
.sidebar .sidebar-group-button:hover,
.sidebar .sidebar-group-button:focus,
.sidebar .sidebar-group-button:active,
.sidebar .sidebar-group-name,
.sidebar .sidebar-single-link,
.sidebar .sidebar-single-link:hover,
.sidebar .sidebar-single-link:focus,
.sidebar .sidebar-single-link:active {
    text-decoration: none !important;
}

.sidebar .sidebar-link.active,
.sidebar .sidebar-group-button.active,
.sidebar .sidebar-single-link.active {
    position: relative;
    box-shadow: none;
}

.sidebar .sidebar-link.active::before,
.sidebar .sidebar-group-button.active::before,
.sidebar .sidebar-single-link.active::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 23px;
    border-radius: 999px;
    background: var(--on-fill);
    content: "";
    transform: translateY(-50%);
}

/* =========================
   DIVIDER
   ========================= */

.sidebar-divider {
    height: 1px;

    margin: 10px 10px 14px;

    background: color-mix(in srgb, var(--on-fill) 10%, transparent);
}

/* =========================
   RIA AI ASSISTANT
   ========================= */

.sidebar-ria {
    position: absolute;
    right: 8px;
    bottom: 16px;
    left: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 11px 0 9px;
    border: 1px solid color-mix(in srgb, var(--shell-highlight-border) 38%, transparent);
    border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--shell-highlight) 22%, transparent), color-mix(in srgb, var(--shell-highlight) 10%, transparent));
    color: var(--on-fill);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-ink) 16%, transparent);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.sidebar-ria:hover {
    border-color: color-mix(in srgb, var(--shell-highlight-border) 70%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--shell-highlight) 32%, transparent), color-mix(in srgb, var(--shell-highlight) 15%, transparent));
    color: var(--on-fill);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--shadow-ink) 24%, transparent);
}

.sidebar-ria.active {
    border-color: var(--shell-highlight-border);
    background: color-mix(in srgb, var(--shell-highlight) 30%, transparent);
}

.sidebar-ria-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.sidebar-ria-icon svg {
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-ria-icon .sidebar-ria-spark {
    stroke: var(--shell-highlight-border);
    stroke-width: 1.9;
}

.sidebar-ria-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: .01em;
}

.sidebar-ria-status {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--shell-online);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-online) 12%, transparent);
}

.sidebar-ria-status.offline {
    background: var(--shell-idle);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-idle) 13%, transparent);
}

/* =========================
   USER
   ========================= */

.sidebar-user {
    flex: 0 0 auto;

    margin-top: 14px;
    padding-top: 16px;

    border-top: 1px solid color-mix(in srgb, var(--on-fill) 10%, transparent);
}

.user-card {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 10px;

    padding: 9px;

    border-radius: var(--radius);

    background: color-mix(in srgb, var(--on-fill) 6%, transparent);
}

.user-avatar {
    display: grid;
    place-items: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--focus);
    color: var(--on-fill);

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;
}

.user-details {
    min-width: 0;
}

.user-name {
    overflow: hidden;

    color: var(--on-fill);

    font-size: 13px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role {
    margin-top: 2px;

    color: color-mix(in srgb, var(--on-fill) 55%, transparent);

    font-size: 11px;
}

.logout-form {
    margin: 0;
}

.logout-button {
    width: 100%;

    padding: 9px 11px;

    border: 1px solid color-mix(in srgb, var(--on-fill) 12%, transparent);

    border-radius: var(--radius-small);

    background: transparent;

    color: color-mix(in srgb, var(--on-fill) 72%, transparent);

    text-align: left;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: none;
}

.logout-button:hover {
    background: color-mix(in srgb, var(--on-fill) 7%, transparent);
    color: var(--on-fill);

    transform: none;
    box-shadow: none;
}

/* =========================
   ORGANISATION SWITCH
   ========================= */

.sidebar-organisation-switch {
    display: block;

    margin: 0 0 8px;
    padding: 7px 11px;

    border: 1px solid color-mix(in srgb, var(--on-fill) 12%, transparent);
    border-radius: var(--radius-small);

    color: color-mix(in srgb, var(--on-fill) 72%, transparent);

    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.sidebar-organisation-switch:hover {
    background: color-mix(in srgb, var(--on-fill) 7%, transparent);
    color: var(--on-fill);
}

/* =========================
   TOPBAR
   ========================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 80;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    min-height: 60px;

    padding: 10px 30px;

    border-bottom: 1px solid var(--border);

    background: color-mix(in srgb, var(--surface) 94%, transparent);

    backdrop-filter: blur(12px);
}

/* Open document action menus cover feedback cards below the header. */
body:not(.modal-open) .topbar:has(.document-topbar-menu[open]) {
    z-index: 10001;
}

.topbar-left {
    display: flex; flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    gap: 14px;
}
.topbar-left > div {min-width: 0}
.page-title {
    margin: 0;

    overflow: hidden;

    color: var(--text-strong);

    font-size: 23px;
    font-weight: 750;

    letter-spacing: -0.02em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

/* Shared contextual navigation stays left of the heading on every Ratio page. */
.topbar-back-action{flex:0 0 41px;width:41px;height:41px;min-height:41px;padding:0;border-radius:9px}
.topbar-back-icon{display:block;flex:0 0 20px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.topbar:has(.topbar-back-action) .topbar-actions{flex:none}
@media(max-width:620px){.topbar:has(.topbar-back-action) .topbar-left{flex:1}.topbar:has(.topbar-back-action) .topbar-left>div{min-width:0;flex:1}.topbar:has(.topbar-back-action) .page-title{max-width:100%}}

/* Editor pages keep the top bar visible at native browser zoom levels. */
body:has([data-tabs]) .topbar {
    position: fixed;
    right: 0;
    left: var(--sidebar-width);
}

body:has([data-tabs]) .content {
    padding-top: calc(var(--tabs-topbar-height, 65px) + 28px);
}

/* Shared detail heading: labels and identifiers always start on the same edge. */
.page-title .editor-page-heading{display:flex;min-width:0;align-items:flex-start;flex-direction:column;gap:2px;overflow:hidden;line-height:1.1;white-space:normal}.page-title .editor-page-heading small{display:block;max-width:min(55vw,620px);margin:0;overflow:hidden;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.page-title .editor-page-heading small::before{content:none}.editor-topbar-action{position:relative;justify-content:center;width:112px}.editor-action-icon{display:none;flex:0 0 24px;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Ratio article numbers use one consistent emphasis in every interface context. */
.article-number-text{font-weight:700}
@media(max-width:760px){.page-title .editor-page-heading small{max-width:min(48vw,300px)}.editor-topbar-action{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0}.editor-action-icon{display:block}.editor-action-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.editor-topbar-action::after{position:absolute;top:calc(100% + 7px);right:0;z-index:120;padding:5px 9px;border-radius:999px;background:var(--surface-inverse);color:var(--on-fill);content:attr(aria-label);font-size:11px;font-weight:650;line-height:1.2;opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .14s ease,transform .14s ease;white-space:nowrap}.editor-topbar-action:hover::after,.editor-topbar-action:focus-visible::after{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.page-title .editor-page-heading small{max-width:35vw}.topbar-actions{gap:7px}}

/* =========================
   CONTENT
   ========================= */

.content {
    width: 100%;
    max-width: var(--interface-content-width);

    margin: 0 auto;

    padding: 28px 30px 42px;
}
/* Fixed feedback clears the actual topbar while staying above dialogs without shifting content. */
.app-messages {
    --app-messages-top: max(16px, env(safe-area-inset-top), calc(var(--app-messages-header-bottom, 60px) + 8px));
    position: fixed; inset: var(--app-messages-top) 16px auto auto;
    display: grid; gap: 8px; width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--app-messages-top) - 16px); overflow-y: auto; margin: 0; padding: 0;
    border: 0; background: transparent; z-index: 10000; pointer-events: none;
}
.app-messages[hidden] { display: none; }
.app-message {
    position: relative; padding: 14px 44px 14px 16px; border: 1px solid var(--border);
    border-radius: var(--radius-small); background: var(--surface); color: var(--text-strong);
    font-size: var(--interface-value-size); line-height: 1.5; overflow-wrap: anywhere;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--shadow-ink) 18%, transparent); pointer-events: auto;
}
.app-message.error { border-color: var(--danger-border); background: var(--danger-light); color: var(--danger-strong); }
.app-message.success { border-color: var(--success-border); background: var(--success-light); color: var(--success-strong); }
.app-message .app-message-close {
    --ratio-action-control-size: 32px;
    --ratio-action-glyph-size: 18px;
    position: absolute; inset: 2px 2px auto auto; display: grid; place-items: center;
    width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-subtle);
    box-shadow: none; font-size: 19px; font-weight: 400; line-height: 1; transform: none;
}
/* Feedback dismissal stays visually separate from the shared overlay close control. */
.app-message .app-message-close:hover { background: transparent; color: var(--text-secondary); box-shadow: none; transform: none; }
.app-message .app-message-close:focus-visible { outline: 2px solid var(--selected-border); outline-offset: 1px; }
/* Phone feedback stays compact while long errors remain scrollable and dismissible. */
@media (max-width: 620px) {
    .app-messages {
        right: max(12px, env(safe-area-inset-right));
        width: min(300px, calc(100vw - 40px));
        max-height: min(40dvh, 240px);
        gap: 6px;
    }
    .app-message {
        padding: 10px 40px 10px 12px;
        font-size: 12px;
        line-height: 1.35;
    }
}


/* =========================
   BUTTONS
   ========================= */

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: var(--interface-control-height);

    padding: 8px 12px;

    border: 0;
    border-radius: var(--radius-small);

    background: var(--primary);
    color: var(--on-fill);

    font: inherit;

    font-size: var(--interface-value-size);
    font-weight: 700;

    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;

    box-shadow: 0 3px 8px color-mix(in srgb, var(--shadow-ink) 16%, transparent);

    transition: transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* Native hidden actions stay out of layout despite the shared flex presentation. */
.button[hidden],
button[hidden] {
    display: none !important;
}

.button:hover,
button:hover {
    color: var(--on-fill);
    background: var(--primary-hover);

    transform: translateY(-1px);

    box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow-ink) 20%, transparent);
}

.button:active,
button:active {
    transform: translateY(0);
}

.button-accent {
    background: var(--accent);
    color: var(--on-accent);

    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent);
}

.button-accent:hover {
    background: var(--accent-hover);
    color: var(--on-accent);

    box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}

.button-secondary {
    border: 1px solid var(--border-strong);

    background: var(--surface);
    color: var(--text-emphasis);

    box-shadow: none;
}

.button-secondary:hover {
    border-color: var(--selected-border);

    background: var(--hover-surface);
    color: var(--text-strong);

    box-shadow: none;
}

/* Compact actions retain the shared button colors and interaction states. */
.button-compact {
    box-sizing: border-box;
    min-height: 30px;
    padding: 4px 10px;
}

.button-danger {
    background: var(--danger-fill);
}

.button-danger:hover {
    background: var(--danger-fill);
}

.icon-button-danger {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--danger-border);
    border-radius: 7px;
    background: var(--danger-light);
    color: var(--danger);
    cursor: pointer;
}

.icon-button-danger:hover {
    border-color: var(--danger);
    background: var(--danger-light);
    color: var(--danger-strong);
}

.icon-button-danger svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Dialog visibility must override the generic inline-flex button presentation. */
.unsaved-modal[hidden], .unsaved-modal-actions .button[hidden] { display: none; }
.unsaved-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; }
.unsaved-modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--shadow-ink) 58%, transparent); backdrop-filter: blur(3px); }
.unsaved-modal-panel { position: relative; width: min(450px,100%); padding: 26px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: 0 24px 70px color-mix(in srgb, var(--shadow-ink) 30%, transparent); }
.unsaved-modal-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 15px; border-radius: 50%; background: var(--warning-light); color: var(--warning); font-size: 23px; font-weight: 850; }
.unsaved-modal-panel h2 { margin: 0 0 8px; color: var(--text-strong); font-size: 19px; text-align: center; }
.unsaved-modal-panel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; }
.unsaved-modal-panel .confirm-modal-warning { margin: 0 0 8px; color: var(--danger); font-weight: 800; }
.unsaved-modal-panel [data-confirm-details] { display:grid; gap:8px; margin:14px 0 0; padding:10px 12px; border:1px solid var(--interface-border); border-radius:10px; background:var(--interface-view-field-surface); text-align:left; }
.unsaved-modal-panel [data-confirm-details][hidden] { display:none; }
.unsaved-modal-panel [data-confirm-details-title] { margin:0; color:var(--muted); font-size:var(--interface-label-size); font-weight:750; text-align:left; }
.unsaved-modal-panel [data-confirm-details]:has(.confirm-modal-change-row) [data-confirm-details-title] { color:var(--text-strong); font-weight:800; }
.unsaved-modal-panel [data-confirm-details-list] { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.unsaved-modal-panel [data-confirm-details-list] li { display:flex; justify-content:space-between; align-items:baseline; gap:12px; color:var(--text-emphasis); font-size:13px; line-height:1.35; }
.unsaved-modal-panel [data-confirm-details-list] strong { font-weight:750; }
.unsaved-modal-panel [data-confirm-details-list] span { color:var(--text-emphasis); font-weight:650; white-space:nowrap; }
/* Structured process changes keep every arrow in one column while values wrap safely. */
.unsaved-modal-panel:has(.confirm-modal-change-row) { box-sizing:border-box; width:fit-content; min-width:min(450px,100%); max-width:min(1120px,100%); max-height:calc(100dvh - 40px); overflow-y:auto; }
.unsaved-modal-panel [data-confirm-details]:has(.confirm-modal-change-row) { box-sizing:border-box; width:fit-content; max-width:100%; margin-inline:auto; }
.unsaved-modal-panel [data-confirm-details-list]:has(.confirm-modal-change-row) { grid-template-columns:minmax(0,max-content) minmax(0,max-content) 20px minmax(0,max-content); column-gap:10px; row-gap:10px; width:fit-content; max-width:100%; }
.unsaved-modal-panel [data-confirm-details-list] li.confirm-modal-change-row { display:grid; grid-column:1/-1; grid-template-columns:subgrid; align-items:start; min-width:0; }
.unsaved-modal-panel .confirm-modal-change-row strong { grid-column:1; min-width:0; color:var(--muted); font-weight:500; overflow-wrap:anywhere; }
.unsaved-modal-panel .confirm-modal-change-row span { min-width:0; font-weight:750; white-space:normal; overflow-wrap:anywhere; }
.unsaved-modal-panel .confirm-modal-change-row .confirm-modal-change-from { grid-column:2; text-align:right; }
.unsaved-modal-panel .confirm-modal-change-row .confirm-modal-change-arrow { grid-column:3; text-align:center; white-space:nowrap; }
.unsaved-modal-panel .confirm-modal-change-row .confirm-modal-change-to { grid-column:4; }
@media(max-width:560px){
    .unsaved-modal-panel [data-confirm-details-list]:has(.confirm-modal-change-row) { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); column-gap:8px; width:100%; }
    .unsaved-modal-panel .confirm-modal-change-row strong { grid-column:1/-1; }
    .unsaved-modal-panel .confirm-modal-change-row .confirm-modal-change-from { grid-column:1; }
    .unsaved-modal-panel .confirm-modal-change-row .confirm-modal-change-arrow { grid-column:2; }
    .unsaved-modal-panel .confirm-modal-change-row .confirm-modal-change-to { grid-column:3; }
}
@media(max-width:380px){.unsaved-modal-panel:has(.confirm-modal-change-row){padding:20px}.unsaved-modal-panel [data-confirm-details]:has(.confirm-modal-change-row){padding:10px 9px}}
.unsaved-modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 23px; }
.unsaved-modal-actions .button { min-width: 100px; justify-content: center; }
@media(max-width:480px){.unsaved-modal-actions{align-items:stretch;flex-direction:column}.unsaved-modal-actions .button{width:100%}}

.actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 20px;
}

/* =========================
   CARDS
   ========================= */

.card {
    margin-bottom: 20px;

    padding: var(--interface-card-padding);

    border: 1px solid var(--interface-border);
    border-radius: var(--interface-card-radius);

    background: var(--surface);

    box-shadow: var(--shadow-small);
}

.card:last-child {
    margin-bottom: 0;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 18px;
    padding-bottom: 14px;

    border-bottom: 1px solid var(--interface-divider);
}

.card-title {
    margin: 0;

    color: var(--text-strong);

    font-size: var(--interface-heading-size);
    font-weight: 700;
    line-height: 1.25;
}

.card-subtitle {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: var(--interface-helper-size);
    font-weight: 500;
    line-height: 1.5;
}

/* =========================
   HERO
   ========================= */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    padding: 27px;

    border-color: color-mix(in srgb, var(--focus) 14%, transparent);

    background: linear-gradient(
            135deg,
            var(--selected-surface) 0%,
            var(--surface) 68%
    );
}

.hero h1,
.hero h2 {
    margin: 0 0 7px;

    color: var(--text-strong);

    font-size: 27px;

    letter-spacing: -0.025em;
}

.hero p {
    max-width: 680px;

    margin: 0;

    color: var(--muted);
}

/* =========================
   STATISTICS
   ========================= */

.stats-grid {
    display: grid;

    grid-template-columns:
                repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 20px;
}

.stat-card {
    position: relative;

    overflow: hidden;

    min-height: 138px;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow-small);
}

.stat-card::after {
    position: absolute;
    inset: 0 0 auto;

    height: 3px;

    background: var(--focus);

    content: "";
}

.stat-label {
    margin-bottom: 11px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 650;
}

.stat-value {
    color: var(--text-strong);

    font-size: 31px;
    font-weight: 800;

    letter-spacing: -0.03em;
}

.stat-note {
    margin-top: 7px;

    color: var(--muted);

    font-size: 12px;
}

.grid-2 {
    display: grid;

    grid-template-columns:
                minmax(0, 2fr)
                minmax(280px, 1fr);

    gap: 20px;
}

.grid-equal {
    display: grid;

    grid-template-columns:
                repeat(2, minmax(0, 1fr));

    gap: 20px;
}

/* =========================
   TABLES
   ========================= */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 12px;

    border-bottom: 1px solid var(--border);

    text-align: left;
    vertical-align: middle;

    font-size: var(--interface-value-size);
}

th {
    color: var(--muted);
    background: var(--table-header-surface);

    font-size: var(--interface-label-size);
    font-weight: 750;

    letter-spacing: 0.03em;
    text-transform: uppercase;
}

tbody tr {
    transition: background 0.15s ease;
}

tbody tr:hover {
    background: var(--surface-subtle);
}

tbody tr:last-child td {
    border-bottom: 0;
}

td a {
    font-weight: 700;
    text-decoration: none;
}

/* =========================
   STATUS
   ========================= */

.status {background: var(--selected-surface);color: var(--link);}

.status-success {
    background: var(--success-light);
    color: var(--success);
}

.status-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.status-neutral {
    background: var(--surface-muted);
    color: var(--muted);
}

/* =========================
   FORMS
   ========================= */

form p {
    margin: 0 0 18px;
}

label {
    display: block;

    margin-bottom: 5px;

    color: var(--text-strong);

    font-size: var(--interface-label-size);
    font-weight: 750;
    line-height: 1.5;
}

input,
select,
textarea {
    width: 100%;
    min-height: var(--interface-control-height);

    padding: var(--interface-control-padding);

    border: 1px solid var(--field-outline);
    border-radius: var(--radius-small);

    outline: none;

    background: var(--field-surface);
    color: var(--text);

    font-family: inherit;
    font-size: var(--interface-value-size);
    font-weight: 450;
    line-height: 1.5;

    transition: border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 48px;
    background-color: var(--field-surface);
    background-image:
        var(--select-arrow),
        linear-gradient(var(--border), var(--border));
    background-repeat: no-repeat, no-repeat;
    background-position: right 13px center, right 39px center;
    background-size: 12px 8px, 1px 56%;
    cursor: pointer;
}

select:not([multiple]):disabled {
    cursor: not-allowed;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--focus);

    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent);
}

ul.errorlist {
    margin: 0 0 7px;
    padding: 0;

    list-style: none;
}

ul.errorlist li {
    color: var(--danger);

    font-size: 12px;
    font-weight: 650;
}

.helptext {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: var(--interface-helper-size);
    font-weight: 500;
    line-height: 1.5;
}

/* =========================
   DETAILS
   ========================= */

.details {
    display: grid;

    grid-template-columns:
                190px minmax(0, 1fr);

    margin: 0;
}

.details dt,
.details dd {
    padding: 13px 0;

    border-bottom: 1px solid var(--interface-divider);
}

.details dt {
    color: var(--muted);

    font-size: 13px;
    font-weight: 700;
}

.details dd {
    margin: 0;

    color: var(--text);

    white-space: pre-wrap;
}

/* =========================
   LOGIN
   ========================= */

.login-page {
    display: grid;
    place-items: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 24px;

    background: var(--login-page-surface);
}

.login-wrapper {
    width: min(430px, 100%);
}

.login-logo {
    display: flex;
    justify-content: center;

    margin-bottom: 20px;
}

.login-brand-logo {
    display: block;

    width: 210px;
    max-width: 80%;

    height: auto;
}

.login-card {
    padding: 28px;

    border: 1px solid color-mix(in srgb, var(--on-fill) 20%, transparent);

    border-radius: var(--radius-large);

    background: var(--surface);

    box-shadow: 0 22px 55px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.login-card h1 {
    margin: 0 0 7px;

    color: var(--text-strong);

    font-size: 25px;
}

.login-intro {
    margin: 0 0 22px;

    color: var(--muted);

    font-size: 14px;
}

.login-card button {
    width: 100%;
}

/* =========================
   MOBILE
   ========================= */

.mobile-menu-button,
.mobile-menu-button[data-icon-action] {
    display: none !important;

    align-items: center;
    justify-content: center;

    flex: 0 0 44px;
    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--border);

    background: var(--surface);
    color: var(--text-strong);

    box-shadow: none;
}

.mobile-menu-icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.mobile-overlay {
    display: none;
}

/* =========================
   COMPACT DESKTOP SIDEBAR
   ========================= */

.sidebar-collapse-button {
    position: fixed;
    top: 76px;
    left: calc(var(--sidebar-width) - 12px);
    z-index: 110;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--blue-700);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sidebar-collapse-button:hover {
    border-color: var(--blue-500);
    background: var(--blue-050);
    color: var(--navy-800);
    transform: none;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}
#sidebar-collapse-button svg {
    width: 14px !important;
    height: 14px !important;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}
#sidebar-collapse-button svg,
#sidebar-collapse-button svg path {
    stroke-width: 1.7 !important;
}

/* Shared arrow controls collapse navigation and editing drawers with the same geometry. */
.panel-collapse-button {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--link);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
}
.panel-collapse-button:hover {
    border-color: var(--focus);
    background: var(--hover-surface);
    color: var(--text-emphasis);
    transform: none;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}
.panel-collapse-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

@media (min-width: 821px) {
    html.sidebar-is-collapsed { --sidebar-width: 76px; }
    /* Animate an explicit handle click, never a viewport breakpoint change. */
    html.sidebar-is-manually-toggling .sidebar { transition: width .2s ease; }
    html.sidebar-is-manually-toggling .app-layout { transition: grid-template-columns .2s ease; }
    html.sidebar-is-manually-toggling .sidebar-collapse-button,
    html.sidebar-is-manually-toggling body:has([data-tabs]) .topbar { transition: left .2s ease; }
    html.sidebar-is-collapsed .sidebar {
        padding-inline: 10px;
    }
    html.sidebar-is-collapsed .sidebar-brand {
        width: 56px;
        height: 82px;
    }
    html.sidebar-is-collapsed .brand-logo {
        display: none;
    }
    html.sidebar-is-collapsed .brand-logo-small {
        position: absolute;
        top: 19px;
        left: 5px;
        display: block;
        width: 46px;
        height: 46px;
        object-fit: contain;
    }
    html.sidebar-is-collapsed .sidebar-collapse-button svg {
        transform: rotate(180deg);
    }
    html.sidebar-is-collapsed .sidebar-link,
    html.sidebar-is-collapsed .sidebar-group-button,
    html.sidebar-is-collapsed .sidebar-single-link {
        justify-content: center;
        width: 100%;
        margin-left: 0;
        padding-inline: 0;
        gap: 0;
    }
    html.sidebar-is-collapsed .sidebar-link > span:not(.menu-icon),
    html.sidebar-is-collapsed .sidebar-group-name,
    html.sidebar-is-collapsed .sidebar-chevron,
    html.sidebar-is-collapsed .sidebar-single-link > span:not(.menu-icon),
    html.sidebar-is-collapsed .sidebar-submenu,
    html.sidebar-is-collapsed .user-details,
    html.sidebar-is-collapsed .sidebar-organisation-switch,
    html.sidebar-is-collapsed .logout-form {
        display: none;
    }
    html.sidebar-is-collapsed .sidebar-divider {
        margin-inline: 5px;
    }
    html.sidebar-is-collapsed .sidebar-ria {
        right: 8px;
        bottom: 16px;
        left: 8px;
        justify-content: center;
        width: auto;
        height: 34px;
        padding: 0;
        border-radius: 10px;
    }
    html.sidebar-is-collapsed .sidebar-ria-label,
    html.sidebar-is-collapsed .sidebar-ria-status {
        display: none;
    }
    html.sidebar-is-collapsed .sidebar-user {
        display: flex;
        justify-content: center;
    }
    html.sidebar-is-collapsed .user-card {
        margin: 0;
        padding: 6px;
        background: transparent;
    }
    html.sidebar-is-collapsed .sidebar .sidebar-link.active::before,
    html.sidebar-is-collapsed .sidebar .sidebar-group-button.active::before,
    html.sidebar-is-collapsed .sidebar .sidebar-single-link.active::before {
        left: 1px;
    }
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns:
                    repeat(2, minmax(0, 1fr));
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {

    #sidebar-collapse-button {
        display: none !important;
    }

    .app-layout {
        display: block;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    /* A breakpoint hides the sidebar at once; only a user-opened drawer slides. */
    body.mobile-menu-interacted .sidebar { transition: transform 0.22s ease; }

    body.menu-open .sidebar {
        transform: translateX(0);
    }

    .app-main {
        min-width: 0;
    }

    .mobile-menu-button,
    .mobile-menu-button[data-icon-action] {
        display: inline-flex !important;
    }

    .topbar {
        min-height: 60px;

        padding: 10px 18px;
    }

    body:has([data-tabs]) .topbar {
        left: 0;
    }

    body:has([data-tabs]) .content {
        padding-top: calc(var(--tabs-topbar-height, 65px) + 20px);
    }

    .topbar-left {
        display: flex;
        align-items: center;

        gap: 12px;
    }

    .page-title {
        max-width: 240px;

        font-size: 20px;
    }

    .content {
        padding: 20px 18px 34px;
    }

    body.menu-open
    .mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 90;

        display: block;

        background: color-mix(in srgb, var(--shadow-ink) 55%, transparent);
    }

    .hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .grid-equal {
        grid-template-columns: 1fr;
    }
}

.relation-link {
    color: inherit;
    text-decoration: none;
}

.relation-link:hover {
    color: var(--link);
    text-decoration: underline;
}

@media (max-width: 620px) {

    .topbar-actions
    .button-text {
        display: none;
    }

    .content {
        padding-inline: 14px;
    }

    .card {
        padding: 18px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .details {
        grid-template-columns: 1fr;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead {
        display: none;
    }

    tbody tr {
        margin-bottom: 12px;

        padding: 10px;

        border: 1px solid var(--border);
        border-radius: var(--radius-small);

        background: var(--surface);
    }

    td {
        padding: 6px 2px;
        border: 0;
    }
}

/* =========================
   RELATION SEARCH AND FILTERS
   ========================= */

.relation-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 18px;
}

.relation-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.relation-search {
    display: flex;
    align-items: center;

    gap: 12px;

    width: min(100%, 420px);
    margin-left: 0;
    margin-right: auto;
}

.relation-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.relation-search .button {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .relation-search {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================
   RELATION TOOLBAR
   ========================= */

.relation-toolbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 14px;

    margin: 18px 0;
}

/* Search bar. */

.relation-search {
    display: flex;
    align-items: center;

    gap: 10px;
}

.relation-search input[type="search"] {
    width: 340px;
    height: 42px;

    padding: 0 14px;

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);

    background: var(--surface);
    color: var(--text);

    font: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.relation-search input[type="search"]:focus {
    border-color: var(--focus);

    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--focus) 10%, transparent);
}

/* Filter buttons. */

.relation-tabs {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 4px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--hover-surface);
}

.relation-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 6px 13px;

    border-radius: 7px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.relation-tab:hover {
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--text-strong);
}

.relation-tab.active {
    background: var(--surface);
    color: var(--link);

    box-shadow:
        0 1px 4px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
}

/* Native controls and static values share one square, without changing row geometry. */
input[type="checkbox"],
.ratio-checkbox-value {
    --checkbox-size: 20px;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    position: relative;
    display: inline-grid;
    place-content: center;
    flex: 0 0 var(--checkbox-size);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-height: var(--checkbox-size);
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--field-border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--link);
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease,
        box-shadow .15s ease;
}

input[type="checkbox"]::before,
.ratio-checkbox-value::before {
    width: calc(var(--checkbox-size) * .45);
    height: calc(var(--checkbox-size) * .25);
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: "";
    opacity: 0;
    transform: translateY(-1px) rotate(-45deg);
    transition: opacity .12s ease;
}

input[type="checkbox"]:enabled:hover {
    border-color: var(--link);
}

input[type="checkbox"]:checked {
    border-color: var(--focus);
    background: var(--selected-surface);
    color: var(--link);
    box-shadow: none;
}

input[type="checkbox"]:checked::before,
.ratio-checkbox-value.is-on::before {
    opacity: 1;
}

input[type="checkbox"]:focus-visible {
    border-color: var(--selected-border);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}

input[type="checkbox"]:disabled,
.ratio-checkbox-value {
    border-color: var(--interface-border-strong);
    background: var(--surface-subtle);
    color: var(--link);
    cursor: default;
    opacity: 1;
    box-shadow: none;
}

input[type="checkbox"]:disabled:checked,
.ratio-checkbox-value.is-on {
    background: var(--surface-strong);
}

/* Compact consumers vary only in size; colour, mark and interaction remain central. */
.choice-filter-options input[type="checkbox"],
.column-picker-list input[type="checkbox"],
.remember-columns input[type="checkbox"],
.document-selection-column input[type="checkbox"],
.supplier-link-toggle > .ratio-checkbox-value,
.status-filter-popover > label input[type="checkbox"] {
    --checkbox-size: 16px;
}

/* Table input sizing must not enlarge the central checkbox inside a filter popover. */
.choice-filter-popover .choice-filter-options input[type="checkbox"] {
    box-sizing: border-box;
    flex: 0 0 var(--checkbox-size);
    width: var(--checkbox-size);
    min-width: var(--checkbox-size);
    max-width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-height: var(--checkbox-size);
    margin: 0;
    padding: 0;
}

.contact-picker-results input[type="checkbox"],
.article-picker-table .article-select-check,
.dashboard-action-choice input[type="checkbox"],
.mail-language-layout-choice input[type="checkbox"],
.document-generation-table input[type="checkbox"],
.owned-object-sale-table input[type="checkbox"] {
    --checkbox-size: 17px;
}

.document-purchase-order-flags input[type="checkbox"],
.pipeline-status-choice input[type="checkbox"],
.supplier-preferred-control input[type="checkbox"],
.purchase-supplier-preference-choice input[type="checkbox"],
.recognition-confirmation input[type="checkbox"],
.boolean-value-control > input[type="checkbox"],
.boolean-value > .ratio-checkbox-value {
    --checkbox-size: 18px;
}

/* Commercial headers size other inputs generously; retain the compact flag footprint. */
.commercial-document-header .document-purchase-order-flags input[type="checkbox"],
label.boolean-value-control > input[type="checkbox"] {
    flex: 0 0 var(--checkbox-size);
    width: var(--checkbox-size);
    max-width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-height: var(--checkbox-size);
    margin: 0;
    padding: 0;
}

/* Shared boolean choice cards follow the central field and interaction contract. */
.boolean-choice{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:46px;margin:0;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-small);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.boolean-choice:hover{border-color:var(--focus);background:var(--hover-surface)}.boolean-choice:focus-within{border-color:var(--selected-border);box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent)}.boolean-choice:has(input:checked){border-color:var(--focus);background:var(--hover-surface)}
.boolean-choice>strong{font-size:12px}.boolean-choice>span:not(.info-tip){display:flex;flex-direction:column}.boolean-choice>.info-tip{margin-left:auto}.boolean-choice.is-disabled,.boolean-choice:has(input:disabled){border-color:var(--border);background:var(--surface-muted);cursor:not-allowed;opacity:.72}.boolean-choice.has-error{border-color:var(--danger);background:var(--danger-light);box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 8%, transparent)}
/* Every pill switch draws its off mark from the thumb geometry, independent of font metrics. */
.ratio-switch{--ratio-switch-width:40px;--ratio-switch-height:23px;--ratio-switch-thumb-size:17px;--ratio-switch-inset:3px;--ratio-switch-travel:calc(var(--ratio-switch-width) - var(--ratio-switch-thumb-size) - var(--ratio-switch-inset) - var(--ratio-switch-inset) - 2px);--ratio-switch-mark-size:calc(var(--ratio-switch-thumb-size) * .5);--ratio-switch-mark-offset:0px;--ratio-switch-off-background:var(--interface-border-strong);--ratio-switch-off-border:transparent;--ratio-switch-on-background:var(--primary-hover);--ratio-switch-on-border:transparent;position:relative;display:inline-block;box-sizing:border-box;flex:0 0 var(--ratio-switch-width);width:var(--ratio-switch-width);height:var(--ratio-switch-height);border:1px solid var(--ratio-switch-off-border);border-radius:999px;background:var(--ratio-switch-off-background);color:var(--muted);transition:background-color .15s ease,border-color .15s ease}
.ratio-switch>i{position:absolute;z-index:1;top:50%;left:var(--ratio-switch-inset);width:var(--ratio-switch-thumb-size);height:var(--ratio-switch-thumb-size);border-radius:50%;background:var(--surface);box-shadow:0 1px 3px color-mix(in srgb, var(--shadow-ink) 20%, transparent);transform:translateY(-50%);transition:transform .15s ease}
input:not(:checked)+.ratio-switch::after{position:absolute;top:50%;right:calc(var(--ratio-switch-inset) - var(--ratio-switch-mark-offset));width:var(--ratio-switch-thumb-size);height:var(--ratio-switch-thumb-size);content:"";background-image:linear-gradient(45deg,transparent calc(50% - .75px),currentColor calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)),linear-gradient(-45deg,transparent calc(50% - .75px),currentColor calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px));background-position:center;background-repeat:no-repeat;background-size:var(--ratio-switch-mark-size) var(--ratio-switch-mark-size);transform:translateY(-50%)}
input:checked+.ratio-switch{border-color:var(--ratio-switch-on-border);background:var(--ratio-switch-on-background)}
input:checked+.ratio-switch>i{transform:translate(var(--ratio-switch-travel), -50%)}
input:focus-visible+.ratio-switch{outline:2px solid var(--selected-border);outline-offset:2px}
input:disabled+.ratio-switch{opacity:.62}
/* The compact variant inherits the same measured mark and thumb alignment. */
.ratio-switch-compact{--ratio-switch-width:38px;--ratio-switch-height:22px;--ratio-switch-thumb-size:16px;--ratio-switch-inset:3px;--ratio-switch-off-background:var(--interface-border-strong)}
/* Compact switches with a visible state caption share the same off-mark spacing. */
.ratio-switch-with-state{--ratio-switch-mark-offset:2px}
.ratio-switch-state{min-width:28px;color:var(--text-emphasis);font-size:var(--interface-label-size);font-weight:750}
/* Boolean labels retain their existing spacing and use the native or static shared square. */
.boolean-value,.boolean-value-control{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--text-strong);font-size:12px;font-weight:650;line-height:1.2;white-space:nowrap}.boolean-value{cursor:default}.boolean-value-control{position:relative;cursor:pointer}.boolean-value-control:has(input:disabled){cursor:default}
label.boolean-value-control{display:inline-flex!important;margin:0!important}