/* ============================================================================
   TOKENS — the design layer of the app

   One accent, one typeface, quiet surfaces. Sections 1 to 5 are values that
   Bootstrap 5.3 reads through its CSS variables, or central rules that the
   components inherit from; no template changes for them to land. Sections 6
   and 7 are the pieces the redesign added on top of Bootstrap.

   Loaded after haptics.css, main_frame.css and form.css and therefore wins
   wherever the same property is set. This is the only file
   that carries design decisions: two files setting the same property with the
   same specificity means the later load quietly wins, which is how the head's
   tile icon lost its colour once already (PCP-T-2026-2177).

   Layout of the file:
     1. Typeface
     2. Colour tokens (light + dark)
     3. Surfaces: body, cards, tables
     4. Controls: buttons, inputs, badges
     5. Sidebar
     6. Detail pages: head, sections, bricks
     7. Delete page
     8. Tax split editor
     9. Delivery items table
    10. Invoice review
    11. Company documents
   ============================================================================ */


/* --- 1. Typeface ---------------------------------------------------------- */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Inter/Inter_18pt-Regular.37dcabff629c.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Inter/Inter_18pt-Medium.8540f35bf8ac.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Inter/Inter_18pt-SemiBold.e5532d993e2d.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Inter/Inter_18pt-Bold.f77ce9588dcc.ttf") format("truetype");
}

:root {
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.5;
}

body {
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.125rem; }

/* Bold everywhere reads as shouting once the surfaces go quiet. Semibold
   carries the same hierarchy at lower volume. Bootstrap compiles the weight
   utilities as fixed numbers, so they are re-pointed here. */
.fw-bold { font-weight: 600 !important; }
.fw-bolder { font-weight: 700 !important; }

/* Numbers line up in columns. */
.table,
.font-monospace,
.kpi-value {
    font-variant-numeric: tabular-nums;
}


/* --- 2. Colour tokens ----------------------------------------------------- */

:root {
    /* The brand orange is the logo's #FE7F2D. It is too light to carry white
       text (2.53), so the UI uses the same hue in three depths:
         fill   #E4580B  white text 3.68 — buttons, active states
         text   #C2410C  on white   5.18 — links, coloured labels
         tint   brand at 10–14 %             — selected rows, active nav */
    --brand: #FE7F2D;
    --brand-rgb: 254, 127, 45;
    --accent: #E4580B;
    --accent-rgb: 228, 88, 11;
    --accent-hover: #D24F09;
    --accent-active: #C2470A;
    --accent-text: #C2410C;
    --accent-tint: rgba(var(--brand-rgb), 0.12);
    --accent-tint-strong: rgba(var(--brand-rgb), 0.20);
    /* The fill depth that stays put in the dark theme, for the marketing
       button (.btn-awerka) whose gradient must not change with the theme. */
    --brand-deep: #E4580B;
    /* The ink that sits on an accent surface. Named, so that changing the
       accent to something light is one edit and not a hunt for #fff. */
    --on-accent: #fff;
    --on-link: #fff;

    /* Links, tabs and everything Bootstrap calls "primary" take the orange's
       complement (hue 23.5° + 180°, #2fadfe). The orange is left to the one
       main button of a page (.btn-primary), the brand and the sidebar.
         text   #0176C1  on white   4.81 — links, active tab
         line   #0192EF                  — tab underline */
    --link: #0176C1;
    --link-rgb: 1, 118, 193;
    --link-hover: #015E9A;
    --link-hover-rgb: 1, 94, 154;
    --link-line: #0192EF;

    /* Neutral ink, slightly blue so greys do not go muddy. */
    --ink-900: #111827;
    --ink-700: #374151;
    --ink-500: #6B7280;
    --ink-300: #D1D5DB;
    --ink-200: #E5E7EB;
    --ink-100: #F3F4F6;
    --ink-50: #F6F7F9;

    --hairline: rgba(17, 24, 39, 0.08);
    --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.05);
    --shadow-float: 0 4px 12px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-modal: 0 24px 64px rgba(17, 24, 39, 0.18);
    --border-strong: var(--ink-300);

    /* Bootstrap reads these. The *-rgb twins are needed by every bg-/text-
       utility, so they must be kept in step with the hex values. */
    --bs-primary: var(--link);
    --bs-primary-rgb: var(--link-rgb);
    --bs-link-color: var(--link);
    --bs-link-color-rgb: var(--link-rgb);
    --bs-link-hover-color: var(--link-hover);
    --bs-link-hover-color-rgb: var(--link-hover-rgb);
    --bs-focus-ring-color: rgba(var(--link-rgb), 0.35);
    /* DataTables paints selected rows and its loading dots from this */
    --dt-row-selected: var(--link-rgb);

    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.875rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 1.5rem;

    /* The dark surface of the login screen, the subscription tab and a few
       modals (.bg-navy). A deliberate second colour next to the orange. */
    --navy: #004560;
    --navy-rgb: 0, 69, 96;

    /* Warning is an amber of its own, so it does not read as the brand: the
       text depth holds 4.87 on white, the fill depth carries dark ink.
       Danger is a clear red instead of Bootstrap's brick. The -rgb twins
       feed the bg-/text- utilities. */
    --bs-warning: #9A6700;
    --bs-warning-rgb: 154, 103, 0;
    --warning-fill-rgb: 245, 184, 61;
    --bs-danger: #FF1654;
    --bs-danger-rgb: 255, 22, 84;

    /* Status pills in every list row */
    --status-created-bg: #cce5ff;
    --status-created-color: #004085;
    --status-planning-bg: #d1ecf1;
    --status-planning-color: #0c5460;
    --status-in-progress-bg: #fff3cd;
    --status-in-progress-color: #856404;
    --status-critical-bg: #f8d7da;
    --status-critical-color: var(--bs-danger);
    --status-done-bg: #d4edda;
    --status-done-color: #155724;

    /* Initials circles (renderAvatar) */
    --avatar-1: #6366f1;
    --avatar-2: #ec4899;
    --avatar-3: #f59e0b;
    --avatar-4: #10b981;
    --avatar-5: #3b82f6;
    --avatar-6: #8b5cf6;
    --avatar-7: #ef4444;
    --avatar-8: #14b8a6;
}

[data-bs-theme=light] {
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--ink-900);
    --bs-body-color-rgb: 17, 24, 39;
    --bs-secondary-color: var(--ink-500);
    --bs-secondary-color-rgb: 107, 114, 128;
    --bs-tertiary-color: #9CA3AF;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-border-color: var(--ink-200);
    --bs-border-color-translucent: var(--hairline);
    --bs-secondary-bg: var(--ink-100);
    --bs-secondary-bg-rgb: 243, 244, 246;

    --bs-primary-text-emphasis: var(--link-hover);
    --bs-primary-bg-subtle: #E6F2FA;
    --bs-primary-border-subtle: #B0D5EE;

    /* Measured from the mockups: the sidebar is one shade darker than the
       page, the page almost white, the cards white on top of it. */
    --page-bg: #F6F8FA;
    --surface: #fff;

    /* The sidebar's own palette: navy ground, light ink, Awerka blue for
       where the pointer is and where you are. Recolouring the sidebar is
       this block and nothing else. */
    --sidebar-bg: var(--navy);
    /* Darkens towards the edges, lighter in the middle */
    --sidebar-vignette: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
    /* Lightens towards the page, so the edge to the light content is soft */
    --sidebar-sheen: linear-gradient(90deg, transparent 35%, rgba(47, 173, 254, 0.08)), var(--sidebar-vignette);
    --sidebar-fg: rgba(255, 255, 255, 0.80);
    --sidebar-fg-strong: #fff;
    --sidebar-fg-muted: rgba(201, 230, 250, 0.60);
    --sidebar-hover-fg: #7CCBFF;
    --sidebar-hover-bg: rgba(47, 173, 254, 0.12);
    --sidebar-active-fg: #fff;
    --sidebar-active-bg: #0176C1;
    --sidebar-border: rgba(124, 203, 255, 0.14);
    --sidebar-card-bg: rgba(47, 173, 254, 0.10);
    --sidebar-live-rgb: 74, 222, 128;
    --sidebar-close-filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme=dark] {
    --accent: #F26B1D;
    --accent-rgb: 242, 107, 29;
    --accent-hover: #FF7A2E;
    --accent-active: #E4580B;
    --accent-text: #FF9A5C;
    --accent-tint: rgba(var(--brand-rgb), 0.16);
    --accent-tint-strong: rgba(var(--brand-rgb), 0.26);

    --hairline: rgba(255, 255, 255, 0.08);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);
    --border-strong: #3A4048;

    --link: #2FADFE;
    --link-rgb: 47, 173, 254;
    --link-hover: #7CCBFF;
    --link-hover-rgb: 124, 203, 255;
    --link-line: #2FADFE;
    --bs-primary: var(--link);
    --bs-primary-rgb: var(--link-rgb);
    --bs-focus-ring-color: rgba(var(--link-rgb), 0.35);
    --dt-row-selected: var(--link-rgb);
    --bs-warning: #FBBF24;
    --bs-warning-rgb: 251, 191, 36;
    --bs-link-color: var(--link);
    --bs-link-color-rgb: var(--link-rgb);
    --bs-link-hover-color: var(--link-hover);
    --bs-link-hover-color-rgb: var(--link-hover-rgb);

    --bs-body-bg: #111316;
    --bs-body-bg-rgb: 17, 19, 22;
    --bs-body-color: #E5E7EB;
    --bs-body-color-rgb: 229, 231, 235;
    --bs-secondary-color: #9CA3AF;
    --bs-secondary-color-rgb: 156, 163, 175;
    --bs-border-color: #2A2F36;
    --bs-border-color-translucent: var(--hairline);
    --bs-secondary-bg: #1E2126;
    --bs-secondary-bg-rgb: 30, 33, 38;

    --bs-primary-text-emphasis: var(--link-hover);
    --bs-primary-bg-subtle: #0A2233;
    --bs-primary-border-subtle: #12476B;

    /* .bg-light badges and cards would stay a white patch on the dark page */
    --bs-light: #2b3035;
    --bs-light-rgb: 43, 48, 53;

    --status-created-bg: rgba(0, 64, 133, 0.3);
    --status-created-color: #8cb4e0;
    --status-planning-bg: rgba(12, 84, 96, 0.3);
    --status-planning-color: #7ec8d4;
    --status-in-progress-bg: rgba(133, 100, 4, 0.3);
    --status-in-progress-color: #f0d77a;
    --status-critical-bg: rgba(255, 22, 84, 0.2);
    --status-critical-color: #ff6b8a;
    --status-done-bg: rgba(21, 87, 36, 0.3);
    --status-done-color: #7ec89a;

    --page-bg: #101215;
    --surface: #16191C;

    --sidebar-bg: #0B0D0F;
    --sidebar-sheen: none;
    --sidebar-fg: var(--bs-body-color);
    --sidebar-fg-strong: var(--bs-body-color);
    --sidebar-fg-muted: var(--bs-secondary-color);
    --sidebar-hover-fg: var(--accent-text);
    --sidebar-hover-bg: rgba(var(--bs-body-color-rgb), 0.05);
    --sidebar-active-fg: var(--accent-text);
    --sidebar-active-bg: var(--accent-tint);
    --sidebar-border: var(--hairline);
    --sidebar-card-bg: var(--bs-secondary-bg);
    --sidebar-live-rgb: 74, 222, 128;
    --sidebar-close-filter: invert(1) grayscale(100%) brightness(200%);
}

::selection {
    background: var(--link);
    color: var(--on-accent);
}


/* --- 3. Surfaces ---------------------------------------------------------- */

/* The page is a light grey ground, the content sits on white cards. */
body,
[data-bs-theme=light] main,
[data-bs-theme=light] .header-bar,
[data-bs-theme=dark] main,
[data-bs-theme=dark] .header-bar {
    background-color: var(--page-bg) !important;
}

.header-bar {
    padding-bottom: 0.5rem;
}

/* Cards: white, hairline, almost no shadow; the border does the separating.
   The dark twin outweighs the card rules the marketing pages bring along. */
.card,
[data-bs-theme=dark] .card {
    --bs-card-bg: var(--surface);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-card-cap-padding-y: 0.875rem;
    --bs-card-cap-padding-x: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-card);
}

.card.shadow {
    box-shadow: var(--shadow-card) !important;
}

/* Card header: no gradient band, no small caps. A title in the body's own
   size and weight, separated by the same hairline as the card edge. */
.card-header,
.card-header:not([class*="bg-"]) {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--bs-body-color);
}

.card-header .card-title,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Only the title's own icon is muted; icons inside buttons keep their
   button's colour, and the detail head draws its icon as a tile (section 6). */
.card-header:not(.detail-head) .card-title > i:first-child {
    color: var(--bs-secondary-color);
}

.card-footer {
    border-top: 1px solid var(--hairline);
    background: transparent;
}

/* Tables: horizontal hairlines only, no outer double border. base/table.html
   asks for `border border-2`; the wrapper card already frames the table. */
.table,
[data-bs-theme=light] .table,
[data-bs-theme=dark] .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--hairline);
    --bs-table-hover-bg: rgba(var(--bs-body-color-rgb), 0.025);
    --bs-table-striped-bg: rgba(var(--bs-body-color-rgb), 0.015);
    background-color: transparent !important;
    border-color: var(--hairline);
}

.table.border,
.table.border-2 {
    border-width: 0 !important;
    border-color: var(--hairline) !important;
}

/* A selected row takes the same quiet grey as a hovered one, not a flood: DataTables'
   solid fill with white text hid the links, the status pills and the very values the
   selection is about.
   One element more than DataTables' own selector, so load order cannot undo it. */
html table.table.dataTable > tbody > tr.selected > *,
html table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075);
    color: inherit;
}

html table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.11);
}

html table.table.dataTable > tbody > tr.selected a {
    color: var(--bs-link-color);
}

/* The cell border colour is set outright: it would otherwise inherit through
   tbody and tr, and DataTables breaks that chain. */
.table > :not(caption) > * > * {
    padding: 0.75rem 0.875rem;
    border-bottom-width: 1px;
    border-bottom-color: var(--hairline);
}

table.dataTable thead th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color) !important;
    /* The sort arrow and the filter funnel are their own elements next to the
       word. Left to wrap, they drop onto a second line under it. */
    white-space: nowrap;
}

table.dataTable tbody td {
    font-weight: 400;
}

/* Inside a dark card the table reads in body colour, not Bootstrap's pure
   white emphasis, and its cells carry the card's surface. */
[data-bs-theme=dark] .card .table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--bs-body-color);
}

tr.filters th,
[data-bs-theme=dark] tr.filters th {
    background-color: var(--bs-secondary-bg);
}

/* The navy surface. On the dark theme it falls back to the raised grey, a
   navy block on a near-black page would read as a hole. */
.bg-navy {
    background-color: rgba(var(--navy-rgb), var(--bs-bg-opacity, 1)) !important;
}

[data-bs-theme=dark] .bg-navy {
    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Lists inside cards */
.list-group {
    --bs-list-group-border-color: var(--hairline);
}

.list-group-item {
    font-weight: 400;
}

/* Page title on list pages */
.header-bar h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.header-bar h1 .fa-solid,
.header-bar h1 .fa-regular {
    color: var(--bs-secondary-color);
    font-size: 1.125rem;
}

.back-arrow {
    color: var(--bs-secondary-color);
}


/* --- 4. Controls ---------------------------------------------------------- */

/* Buttons keep the haptics from haptics.css (sheen, lift, press). */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--link-rgb), 0.3);
}

/* .btn above sets the padding tokens after Bootstrap's own .btn-sm rule and
   would win the cascade; the small size is stated again here. */
.btn-sm {
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-font-size: 0.8125rem;
}

.btn-primary,
.btn-accent,
.btn-awerka {
    --bs-btn-color: var(--on-accent);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent-active);
    --bs-btn-active-border-color: var(--accent-active);
    --bs-btn-disabled-color: var(--on-accent);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.3);
}

/* Secondary actions are white with a hairline — the mockup's quiet button.
   Both outline variants map to it; the primary outline keeps blue text so
   the hint of "leads somewhere" survives without competing with the one
   orange button. */
.btn-outline-secondary,
.btn-outline-primary,
.btn-secondary,
.btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--bs-border-color);
    --bs-btn-focus-shadow-rgb: var(--link-rgb);
}

[data-bs-theme=dark] .btn-outline-secondary,
[data-bs-theme=dark] .btn-outline-primary,
[data-bs-theme=dark] .btn-secondary,
[data-bs-theme=dark] .btn-light {
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-border-color: var(--border-strong);
}

/* Hovered, the primary outline fills with the blue, never with the orange:
   orange belongs to the one main button of the page. */
.btn-outline-primary,
[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--link);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--link);
    --bs-btn-hover-border-color: var(--link);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--link-hover);
    --bs-btn-active-border-color: var(--link-hover);
}

/* A flat button: no lift, no sheen, no shadow. The haptics are right for a
   button you aim at, and wrong for a button that repeats in every row of a
   table — thirty raised buttons under each other read as noise. Put .btn-flat
   on any button that should sit quietly; the row menus carry it by default. */
.btn-flat,
.btn-list-menu {
    background-image: none;
    box-shadow: none;
}

.btn-flat:hover,
.btn-list-menu:hover {
    transform: none;
    box-shadow: none;
}

.btn-flat:active,
.btn-flat.active,
.btn-flat.show,
.btn-list-menu:active,
.btn-list-menu.active,
.btn-list-menu.show {
    transform: none;
    box-shadow: none;
}

.btn-flat:focus-visible,
.btn-list-menu:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow);
}

/* Inputs keep their well from haptics.css. Only the resting border, the
   surface and the blue focus are set here. */
.form-control,
.form-select,
.input-group-text,
.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--bs-border-color);
    background-color: var(--surface);
}

.form-control:focus,
.form-select:focus,
.field-group:focus-within,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--link);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--link);
    border-color: var(--link);
}

/* White check on the blue fill */
.form-check-input:checked {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-switch .form-check-input: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='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--link);
    box-shadow: 0 0 0 0.25rem rgba(var(--link-rgb), 0.3);
}

/* A data URI cannot read a variable: the knob of a focused switch carries the
   link blue (#0176C1) as a literal. */
.form-switch .form-check-input:focus: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='%230176C1'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb { background-color: var(--link); }
.form-range::-moz-range-thumb { background-color: var(--link); }

.form-label {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--hairline);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-link-active-bg: var(--accent-tint);
    --bs-dropdown-link-active-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
    box-shadow: var(--shadow-float);
    padding: 0.375rem;
}

.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
}

.modal-content {
    border: 1px solid var(--hairline);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--shadow-modal);
}

.modal-header,
.modal-footer {
    border-color: var(--hairline);
}

/* Badges: pills, medium weight, grey ground with a coloured icon — the
   convention from template-patterns.md, now enforced centrally. */
.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-font-size: 0.75rem;
    --bs-badge-padding-x: 0.625em;
    --bs-badge-padding-y: 0.375em;
    --bs-badge-border-radius: 999px;
}

.badge.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--hairline) !important;
    color: var(--bs-body-color) !important;
}

.status-badge {
    font-weight: 500;
    border-radius: 999px;
}

/* Alerts: Bootstrap's tinted alert */
.alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    background-color: var(--bs-alert-bg) !important;
    border-color: var(--bs-alert-border-color) !important;
    color: var(--bs-alert-color) !important;
}

.alert {
    --bs-alert-border-radius: var(--bs-border-radius);
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--link-rgb), 0.3);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-active-bg: rgba(var(--link-rgb), 0.14);
    --bs-pagination-active-color: var(--link);
    --bs-pagination-active-border-color: var(--bs-border-color);
    --bs-pagination-hover-bg: var(--bs-secondary-bg);
    --bs-pagination-color: var(--bs-body-color);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--on-link);
    --bs-nav-pills-link-active-bg: var(--link);
}

.nav-tabs,
.nav-underline {
    --bs-nav-link-color: var(--bs-secondary-color);
    --bs-nav-link-hover-color: var(--bs-body-color);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--hairline);
    --bs-nav-tabs-link-active-color: var(--link);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--link-line) transparent;
}

.nav-underline {
    --bs-nav-underline-link-active-color: var(--link);
}

.nav-tabs .nav-link {
    font-weight: 500;
    border-width: 0 0 2px 0;
    border-radius: 0;
    margin-bottom: -1px;
}

/* A tab bar that scrolls sideways on phones: the links' -1px reach into the
   bottom border made it one pixel too tall, and overflow-x: auto then drew a
   small vertical scrollbar at its end. The hairline is painted inside instead,
   so the active underline still covers it without reaching out. */
.nav-tabs.overflow-x-auto {
    overflow-y: hidden;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--bs-nav-tabs-border-color);
}

.nav-tabs.overflow-x-auto .nav-link {
    margin-bottom: 0;
}

.nav-tabs .nav-link:hover,
.nav-underline .nav-link:hover {
    color: var(--link);
}

.nav-tabs .nav-link.active,
.nav-underline .nav-link.active {
    background: transparent;
    color: var(--link);
    border-bottom: 2px solid var(--link-line);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--link);
    --bs-progress-bar-color: var(--on-link);
}

.list-group {
    --bs-list-group-active-bg: var(--accent-tint);
    --bs-list-group-active-color: var(--bs-body-color);
    --bs-list-group-active-border-color: var(--hairline);
}

.bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-primary { color: var(--on-link) !important; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-primary { color: var(--link) !important; }

/* A filled warning carries dark ink; the text depth of --bs-warning would
   leave it at 4.3 against black. */
.bg-warning { background-color: rgba(var(--warning-fill-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-warning { color: #000 !important; background-color: rgba(var(--warning-fill-rgb), var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: var(--link) !important; text-decoration-color: rgba(var(--link-rgb), 0.5) !important; }
.link-primary:hover,
.link-primary:focus { color: var(--link-hover) !important; text-decoration-color: rgba(var(--link-hover-rgb), 0.5) !important; }

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--link-rgb), 0.3);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--hairline);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--shadow-float);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}


/* --- 5. Sidebar ----------------------------------------------------------- */

/* Colours come from the --sidebar-* tokens in section 2. */
.sidebar .shadowed-sidebar,
[data-bs-theme=light] .sidebar .shadowed-sidebar,
[data-bs-theme=dark] .sidebar .shadowed-sidebar {
    background: var(--sidebar-sheen), var(--sidebar-bg) !important;
    color: var(--sidebar-fg-strong);
    border-right: 1px solid var(--sidebar-border);
}

.sidebar .shadowed-sidebar a,
.sidebar .shadowed-sidebar button,
.sidebar .shadowed-sidebar li,
[data-bs-theme=light] .sidebar a,
[data-bs-theme=light] .sidebar button,
[data-bs-theme=light] .sidebar li,
[data-bs-theme=dark] .sidebar a,
[data-bs-theme=dark] .sidebar button,
[data-bs-theme=dark] .sidebar li {
    color: var(--sidebar-fg);
    text-decoration: none;
    text-shadow: none;
}

/* Menus that open out of the sidebar are white cards and take the page's
   ink back. */
.sidebar .dropdown-menu {
    --sidebar-fg: var(--bs-body-color);
    --sidebar-fg-strong: var(--bs-body-color);
    --sidebar-fg-muted: var(--bs-secondary-color);
    --sidebar-hover-fg: var(--accent-text);
}

/* Hovering a row in the sidebar turns it into the accent, so the pointer
   always says where a click would take you. */
.sidebar .shadowed-sidebar a:hover,
.sidebar .shadowed-sidebar button:not(.sidebar-profile__button):hover,
[data-bs-theme=light] .sidebar a:hover,
[data-bs-theme=light] .sidebar button:not(.sidebar-profile__button):hover,
[data-bs-theme=light] .sidebar li:hover,
[data-bs-theme=dark] .sidebar a:hover,
[data-bs-theme=dark] .sidebar button:not(.sidebar-profile__button):hover,
[data-bs-theme=dark] .sidebar li:hover {
    color: var(--sidebar-hover-fg) !important;
    text-shadow: none;
}

.sidebar .shadowed-sidebar a:active,
.sidebar li a:active {
    color: var(--sidebar-fg-strong) !important;
    text-shadow: none;
}

.sidebar .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius);
    padding: 0.5625rem 0.75rem;
    /* Beats the .gap-2 utility the rows carry in the markup. */
    gap: 1.125rem !important;
}

/* The distance between icon and word is the gap above and nothing else: the
   rows carry a mix of .gap-2 and .ms-1 from when they were written, which
   made the column ragged. */
.sidebar .nav-link > span.ms-1 {
    margin-left: 0 !important;
}

/* Room to breathe between the rows. */
.sidebar .nav-pills > .nav-item + .nav-item {
    margin-top: 0.1875rem;
}

/* main_frame.css pins the icon inside a badge to 0.95rem; the sidebar wants
   it bigger, and in the regular cut rather than the solid one: at this size
   the filled shapes were the loudest thing in a quiet column. Only the weight
   changes, the classes in the templates stay `fa-solid`, and the regular face
   is already loaded, so it costs no extra download. */
.sidebar .icon-badge > i {
    font-size: 1.25rem;
}

.sidebar .nav-link i,
.sidebar .icon-badge > i {
    font-weight: 400;
}

.sidebar .nav-pills > .nav-item > .nav-link:hover {
    background-color: var(--sidebar-hover-bg);
}

.sidebar .nav-pills {
    --bs-nav-pills-link-active-bg: var(--sidebar-active-bg);
    --bs-nav-pills-link-active-color: var(--sidebar-active-fg);
    --bs-nav-pills-border-radius: var(--bs-border-radius);
}

.sidebar .shadowed-sidebar .nav-link.active,
.sidebar .shadowed-sidebar a.active,
.shadowed-sidebar .nav-link.active,
.shadowed-sidebar a.active {
    color: var(--sidebar-active-fg) !important;
    background-color: var(--sidebar-active-bg);
}

/* No tiles around the sidebar icons: a plain icon in the muted ink, the
   accent only on the row you are in (PCP-T-2026-2175). The tiles read as
   inconsistent, because half of the colour variants were barely visible. */
.sidebar .icon-badge,
.sidebar .icon-badge-primary,
.sidebar .icon-badge-red,
.sidebar .icon-badge-light-green,
.sidebar .icon-badge-danger,
.sidebar .icon-badge-black,
[data-bs-theme=dark] .sidebar .icon-badge {
    --badge-bg: transparent;
    --badge-bg-hover: transparent;
    --badge-bg-active: transparent;
    --badge-fg: var(--sidebar-fg-muted);
    --badge-size: 1.5rem;
    background: transparent;
    box-shadow: none;
    color: var(--sidebar-fg-muted);
}

.sidebar .nav-pills .nav-link:hover .icon-badge {
    color: var(--sidebar-hover-fg);
}

/* The row you are in: a tinted pill, the icon and the word in the accent.
   No bar on the edge — the tint plus the colour already say it, and a stub
   that is neither flush with the sidebar nor with the pill reads as a
   mistake. */

.sidebar .nav-pills > .nav-item > .nav-link.active .icon-badge,
.sidebar .nav-pills > .nav-item > .nav-link.active:hover .icon-badge,
.sidebar .nav-link.active .icon-badge {
    color: var(--sidebar-active-fg);
}

/* Sub-navigation under an open module. The links carry Bootstrap's
   .link-body-emphasis, which sets its colour with !important, so these rules
   have to say it as loudly. The favorites under the dashboard are the same
   kind of link. */
.sidebar .btn-toggle-nav a,
.sidebar a.sidebar-favorite {
    color: var(--sidebar-fg) !important;
}

.sidebar .btn-toggle-nav a:hover,
.sidebar a.sidebar-favorite:hover {
    color: var(--sidebar-hover-fg) !important;
}

/* The page you are on: the template marks it with .text-decoration-underline,
   here it is the accent instead of an underline. */
.sidebar .btn-toggle-nav a.text-decoration-underline,
.sidebar a.sidebar-favorite.text-decoration-underline {
    color: var(--sidebar-active-fg) !important;
    text-decoration: none !important;
    font-weight: 500;
}

/* The search field carries the same well as every other input in the app
   (.field-group in haptics.css): the magnifier sits in the trough instead of
   in a white tile of its own. */
.sidebar .sidebar-search-container .form-control::placeholder {
    color: var(--bs-secondary-color);
}

/* Buttons in a sidebar alert (the impersonation banner) keep their own
   button colour; the sidebar-wide link colour above would wash them out. */
[data-bs-theme=light] .sidebar .alert .btn,
[data-bs-theme=dark] .sidebar .alert .btn {
    color: var(--bs-btn-color);
}

/* Plan card and running-timer strip at the bottom */
.sidebar-plan-card,
a.sidebar-plan-card:hover {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--sidebar-card-bg);
    border: 1px solid var(--sidebar-border);
    transition: all 0.2s ease;
}

.sidebar-plan-badge {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sidebar-fg-strong);
}

.sidebar-plan-upgrade {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sidebar-active-fg);
    transition: opacity 0.2s ease;
}

.sidebar .offcanvas-header .btn-close {
    filter: var(--sidebar-close-filter);
}

/* Running timer: a card above the user */
.sidebar-timer {
    margin: 0.25rem 0.75rem 0.75rem;
    padding: 0.625rem 0.75rem;
    max-height: 11rem;
    overflow-y: auto;
    border-radius: var(--bs-border-radius-lg);
    background: var(--sidebar-card-bg);
    border: 1px solid var(--sidebar-border);
}

.sidebar-timer__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--sidebar-live-rgb));
}

.sidebar-timer__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgb(var(--sidebar-live-rgb));
    box-shadow: 0 0 0 3px rgba(var(--sidebar-live-rgb), 0.2);
}

.sidebar-timer__entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-timer__entry + .sidebar-timer__entry {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar .sidebar-timer__link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
    text-decoration: none;
}

.sidebar-timer__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--sidebar-fg);
}

.sidebar-timer__time {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--sidebar-fg-strong);
}

.sidebar .sidebar-timer__link:hover .sidebar-timer__label {
    color: var(--sidebar-hover-fg);
}

.sidebar-timer__stop {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--sidebar-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    transition: background-color 0.15s ease;
}

.sidebar-timer__stop i {
    color: var(--bs-danger);
}

.sidebar-timer__stop:hover,
.sidebar-timer__stop:focus-visible {
    background: rgba(var(--bs-danger-rgb), 0.18);
}

.sidebar-profile {
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-profile__button {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    background: transparent;
    color: var(--sidebar-fg-strong);
    text-align: left;
}

.sidebar-profile__button:hover,
.sidebar-profile__button[aria-expanded="true"] {
    background: var(--sidebar-hover-bg);
}

.sidebar-profile__avatar {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--sidebar-card-bg);
    color: var(--sidebar-fg-muted);
}

.sidebar-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-profile__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.sidebar-profile__name,
.sidebar-profile__org {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-profile__name {
    font-size: 0.875rem;
    font-weight: 600;
}

.sidebar-profile__org {
    font-size: 0.75rem;
    color: var(--sidebar-fg-muted);
}

.sidebar-profile__caret {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--sidebar-fg-muted);
}

.sidebar-profile .dropdown-menu {
    width: calc(100% - 1.5rem);
}


/* --- 5b. Topbar ----------------------------------------------------------- */

/* The strip above the content (base/base.html): the page's own search on the
   left, the bell on the right. Empty on a page that has nothing to search. */
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.625rem 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--hairline);
}

/* The line runs the full width of the content area, not just under the
   text — main carries px-md-4, so the strip reaches back through it. */
@media (min-width: 768px) {
    .topbar {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.topbar__search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 30rem;
}

.topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topbar-search .form-control::placeholder {
    color: var(--bs-secondary-color);
}

#notification-bell,
#support-chat-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
    text-decoration: none;
}

#notification-bell:hover,
#support-chat-button:hover {
    color: var(--bs-body-color);
    background: rgba(var(--bs-body-color-rgb), 0.05);
}

/* The count sits on the bell, not beside it, and it is the accent: red is
   the colour of something going wrong, a waiting notification is not that. */
#notification-bell .notification-badge,
#support-chat-button .notification-badge {
    top: 0.125rem;
    right: 0.125rem;
    display: grid;
    place-items: center;
    /* main_frame.css turns the badge into a flex box, where place-items only
       settles the cross axis — the number then sat left of centre. */
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0.625rem;
    line-height: 1;
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid var(--page-bg);
}

/* The question mark next to a page title is a hint, not a second heading:
   clearly smaller than the words and centred on them. */
.header-bar h1 .help-icon,
.detail-head .help-icon {
    font-size: 0.875rem;
    line-height: 1;
    align-self: center;
}


/* --- 5c. List head -------------------------------------------------------- */

/* generic/list.html: tile, name, count, actions. The hub (generic/hub.html)
   builds the same head from the detail-head bricks. */
.list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.list-head__lead {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.list-head__tile {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.875rem;
    font-size: 1.25rem;
    background: var(--accent-tint);
    color: var(--accent-text);
}

.list-head__tile:empty {
    display: none;
}

.list-head__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.list-head__count {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.list-head__count:empty {
    display: none;
}

.list-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Filter chips over a list: the shape of the status pills in the lead list,
   which is what people already know from the rows below them. */
/* Chips on the left, the table's own buttons on the right, both above the
   card rather than inside it. */
.list-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    min-height: 2rem;
}

.list-toolbar {
    margin-left: auto;
}

.list-toolbar:empty {
    display: none;
}

.list-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* A chip is a button and keeps the haptics: the chosen one is pressed in,
   the way the type filters on the contacts list already work. Only the count
   behind the word is added here. */
.list-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.list-chip__count {
    min-width: 1.25rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background: rgba(var(--bs-body-color-rgb), 0.06);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    text-align: center;
}

.list-chip__count:empty {
    display: none;
}

.list-chips__toggle {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.list-chips__toggle:hover {
    color: var(--bs-body-color);
}

.list-chip.active .list-chip__count {
    background: rgba(var(--bs-body-color-rgb), 0.1);
    color: inherit;
}

/* A chosen chip is pressed in and tinted, not filled: Bootstrap paints an
   active outline button in the full colour, which shouts next to five quiet
   ones. The tone stays readable, the haptics do the saying. */
.list-chip.btn-outline-success.active {
    --bs-btn-active-bg: var(--bs-success-bg-subtle);
    --bs-btn-active-color: var(--bs-success-text-emphasis);
    --bs-btn-active-border-color: var(--bs-success-border-subtle);
}

.list-chip.btn-outline-warning.active {
    --bs-btn-active-bg: var(--bs-warning-bg-subtle);
    --bs-btn-active-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-border-color: var(--bs-warning-border-subtle);
}

.list-chip.btn-outline-danger.active {
    --bs-btn-active-bg: var(--bs-danger-bg-subtle);
    --bs-btn-active-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-border-color: var(--bs-danger-border-subtle);
}

.list-chip.btn-outline-info.active {
    --bs-btn-active-bg: var(--bs-info-bg-subtle);
    --bs-btn-active-color: var(--bs-info-text-emphasis);
    --bs-btn-active-border-color: var(--bs-info-border-subtle);
}

/* A select or input among the actions keeps to itself instead of stretching
   across the row (some lists filter with a dropdown). */
.list-head__actions > .form-control,
.list-head__actions > .form-select {
    width: auto;
    max-width: 14rem;
}

/* The old search-and-buttons slot. Empty once a page has been split. */
.list-head__legacy:empty {
    display: none;
}

.list-head__legacy {
    width: auto;
}


/* The table stands on the page as a card of its own: a hairline frame and a
   surface lighter than the ground, the way the mockups draw it. Inside a card
   (the hubs) it stays plain — one frame is enough. */
.table-wrapper {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: 0.75rem 1rem;
}

.card .table-wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}


/* --- 6. Detail pages ------------------------------------------------------
   The head of generic/card.html: a tinted tile, the small label above the
   prominent value, pills and related links under it, actions and facts on
   the right. Below it the body is built from .detail-section blocks.

   These rules live here and not in main_frame.css on purpose: both files
   styled the same elements with the same specificity, so whichever loaded
   last quietly won, and main_frame.css is fetched asynchronously — the page
   painted as one card before it jumped into the split layout.
   -------------------------------------------------------------------------- */

/* Two columns: the main part left, the side (actions on top, facts below)
   right. Roughly two thirds to one third; one column on narrow screens. */
.detail-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.75rem 1.5rem;
}

@media (max-width: 767.98px) {
    .detail-head__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Hubs carry search and view switches in the actions and keep them wide. */
.hub-page .detail-head__grid {
    grid-template-columns: minmax(min-content, 1fr) minmax(0, auto);
}

.hub-page .detail-head__main {
    grid-template-columns: auto minmax(min-content, 1fr);
}

/* The title column never shrinks below its longest word; when the actions do
   not fit beside it, they wrap instead of breaking the title mid-word. */
.hub-page .hub-actions {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* The tile stands alone on the left and spans the whole head; label, value,
   pills and related links all begin to its right. */
.detail-head__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
}

.detail-head__main > * {
    grid-column: 2;
}

.detail-head__tile {
    grid-column: 1;
    grid-row: 1 / span 12; /* every row the head may have; empty rows cost nothing */
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 0.875rem;
    font-size: 1.375rem;
    background: var(--accent-tint);
    color: var(--accent-text);
}

/* No icon for this model: the left column disappears instead of leaving a gap. */
.detail-head__main:has(> .detail-head__tile:empty) {
    grid-template-columns: minmax(0, 1fr);
}

.detail-head__main:has(> .detail-head__tile:empty) > * {
    grid-column: 1;
}

.detail-head__tile:empty {
    display: none;
}

/* The page's own leading icon is redundant once the tile draws it. */
.detail-head__main:has(> .detail-head__tile:not(:empty)) .card-title > i:first-child {
    display: none;
}

.detail-head .card-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.detail-name,
.detail-head__name > .detail-name {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.detail-head .detail-name {
    margin-top: 0.125rem;
}

/* Pages written before this head carry their object's name in card_title and
   leave card_name empty. There the title is the prominent line and the
   model's own word is not repeated above it; a page that fills card_name
   reads label over value. */
.detail-head__lead:has(.detail-head__name:empty) .card-title {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--bs-body-color);
}

/* Unless the body already carries the name: eleven pages open their body with
   generic/_detail_name.html, and two prominent lines under each other read as
   a stutter. There the head keeps its quiet label. */
.card:has(.card-body .detail-name) .detail-head__lead .card-title {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--bs-secondary-color);
}

.detail-head__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.detail-head__actions {
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

/* A button row wider than the side column wraps instead of spilling left
   over the title. */
.detail-head__actions > .d-flex {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.detail-head__actions:empty {
    display: none;
}

/* The facts block starts under the buttons, at the height of the value, and
   its hairline runs to the bottom of the head. */
.detail-head__aside {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0 0 1.5rem;
    border-left: 1px solid var(--bs-border-color-translucent);
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .detail-head__aside {
        border-left: 0;
        padding-left: 0;
    }
}

.detail-head__aside > * {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-head__aside i {
    color: var(--bs-secondary-color);
}

/* Amount tiles side by side (order finance summary): the figure stays on one
   line and shrinks with its tile instead of breaking before the currency. */
.amount-tile {
    container-type: inline-size;
}

.amount-tile__value {
    white-space: nowrap;
    font-size: clamp(0.6875rem, 14cqi, 0.875rem);
}

.amount-tile__label {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Too narrow for three labels side by side: one tile per line, label left, amount right. */
.amount-tiles {
    container-type: inline-size;
}

@container (max-width: 20rem) {
    .amount-tiles > .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .amount-tiles .amount-tile {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-align: start;
    }

    .amount-tiles .amount-tile__label {
        order: 1;
        font-size: 0.8125rem;
    }

    .amount-tiles .amount-tile__value {
        order: 2;
        margin-left: auto;
    }
}

/* The line of related links under the head: "Employee · Project · Task". */
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.detail-meta > * {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.detail-meta > * + *::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 0.75rem;
    background: var(--bs-border-color);
}

.detail-meta a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.detail-meta a:hover {
    color: var(--link);
}

.detail-footer {
    margin-top: 0;
    font-size: 0.8125rem;
}

/* The page shape. Opt in per page with
   {% block card_page_class %}detail-page detail-split{% endblock %}:
   detail-page makes the outer card invisible so head and body stand as cards
   of their own, detail-split additionally dissolves the body so that every
   .detail-section becomes a card — the way the mockups draw a detail page. */
.detail-page > .card,
.detail-page > .card.shadow {
    background: transparent;
    border: 0;
    box-shadow: none !important;
}

.detail-page > .card > .detail-head,
.detail-page > .card > .card-body,
.detail-split .card-body > .detail-section,
.detail-split .card-body > form > .detail-section {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
}

.detail-page > .card > .detail-head {
    margin-bottom: 1rem;
}

.detail-page > .card > .card-footer {
    border: 0;
    background: transparent;
    padding: 0.75rem 0.25rem 0;
}

.detail-split .card-body,
.detail-split > .card > .card-body {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.detail-split .card-body > .alert {
    margin-top: 1rem;
}

.detail-split .card-body > .detail-section,
.detail-split .card-body > .detail-section:first-child,
.detail-split .card-body > form > .detail-section,
.detail-split .card-body > form > .detail-section:first-child {
    margin-top: 1rem;
}

/* Facts in columns, filled with generic/_detail_stat.html. Cells can sit
   directly in the grid or be grouped in .detail-grid__column, which stacks
   them and draws a hairline to the column on its left. */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 0;
}

.detail-grid__column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 1.5rem;
    border-left: 1px solid var(--bs-border-color-translucent);
}

.detail-grid__column:first-child {
    padding-left: 0;
    border-left: 0;
}

@media (max-width: 767.98px) {
    .detail-grid__column {
        padding: 0;
        border-left: 0;
    }
}

.detail-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.detail-stat__icon {
    flex: 0 0 1.25rem;
    padding-top: 0.125rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.detail-stat__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.125rem;
}

.detail-stat__value {
    font-weight: 500;
}

/* A section inside the card body: title with icon, hairline above. */
.detail-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.detail-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.detail-section__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Only the title's own icon, not one inside a button on the right. */
.detail-section__title > span > i:first-child {
    color: var(--bs-secondary-color);
    margin-right: 0.5rem;
}

/* Add buttons in a section title: the plus carries the blue, the word stays
   in the text colour. The colour marks the action, it does not shout it. */
.detail-section__title .btn-outline-primary,
.detail-head .btn-outline-primary {
    --bs-btn-color: var(--bs-body-color);
}

.detail-section__title .btn-outline-primary > i,
.detail-head .btn-outline-primary > i {
    color: var(--link);
}

.detail-section__title .btn-outline-primary:is(:hover, :active) > i,
.detail-head .btn-outline-primary:is(:hover, :active) > i {
    color: inherit;
}

/* Click-to-edit values: no pencil, a dashed underline on hover instead. */
.editable-field .field-value {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.12s ease;
}

.editable-field .field-value:hover {
    border-bottom-color: var(--bs-secondary-color);
}

.inline-description-editor.is-editable .description-display {
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.inline-description-editor.is-editable .description-display:hover,
.inline-description-editor.is-editable .description-display:focus-visible {
    border-color: var(--bs-secondary-color);
    outline: none;
}

/* Description editor as a section: only the text gets the tinted box. */
.inline-description-editor--section .description-display {
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    background: rgba(var(--bs-secondary-bg-rgb), 0.6);
}

.inline-description-editor--section .description-display > p:last-child {
    margin-bottom: 0;
}

/* Icon-only button: a square with the icon in the middle. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    padding-left: 0;
    padding-right: 0;
}

.btn-icon.btn-sm {
    width: 2rem;
}

.detail-empty {
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
}

.detail-empty i {
    display: block;
    width: auto;
    margin: 0 auto 0.75rem;
    font-size: 1.75rem;
    color: var(--bs-tertiary-color);
}

.detail-empty strong {
    display: block;
    font-weight: 600;
    color: var(--bs-body-color);
}

.detail-empty small {
    display: block;
    margin-top: 0.25rem;
}


/* On a phone the head is one column, in reading order: tile, label, value,
   pills, related links, the facts, and the actions as one wide row at the
   bottom. The desktop head squeezed into 400 px was the noisiest thing on
   the page (PCP-T-2026-2183). */
@media (max-width: 767.98px) {
    .detail-head__grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* The side dissolves so its two parts can take their own place in the
       column instead of forming a block of their own. */
    .detail-head__side {
        display: contents;
    }

    .detail-head__main { order: 1; }
    .detail-head__aside { order: 2; }
    .detail-head__actions { order: 3; }

    /* The tile sits above the label, not beside it. */
    .detail-head__main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .detail-head__tile {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .detail-head__main > * {
        margin-top: 0;
    }

    .detail-head__aside {
        flex: 0 0 auto;
        margin-top: 0;
        padding: 0;
    }

    /* Related links stack, one per line, without the hairlines between them. */
    .detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 0;
    }

    .detail-meta > * + *::before {
        display: none;
    }

    /* The actions take the whole width: the primary one wide, the overflow
       menu beside it. */
    .detail-head__actions,
    .detail-head__actions > .d-flex {
        width: 100%;
    }

    .detail-head__actions .btn-primary {
        flex: 1 1 auto;
    }

    .detail-page > .card > .detail-head,
    .detail-page > .card > .card-body,
    .detail-split .card-body > .detail-section,
    .detail-split .card-body > form > .detail-section {
        padding: 1rem 1.125rem;
    }

    .detail-section__title {
        flex-wrap: wrap;
    }
}

/* Compact file list with a small preview per file (companydocument/_companydocument_files.html). */
.document-files__thumb {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.document-files__thumb img,
.document-files__thumb canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.document-files__thumb canvas {
    background: var(--bs-body-bg);
    visibility: hidden;
}

.document-files__thumb.has-preview canvas {
    visibility: visible;
}


/* --- 7. Delete page (generic/form_delete.html) ---------------------------- */

.delete-confirm {
    max-width: 36rem;
}

.delete-confirm__icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0.5rem auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

.delete-confirm__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* The object summary: child templates hand in <li><strong>Label:</strong>
   value</li>; the strong becomes the muted label column. */
.delete-confirm__summary {
    margin: 1.25rem 0 0;
    padding: 0.25rem 1rem;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
}

.delete-confirm__summary:not(:has(li)) {
    display: none;
}

.delete-confirm__summary li {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.delete-confirm__summary li:last-child {
    border-bottom: 0;
}

.delete-confirm__summary li > strong {
    flex: 0 0 9rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.delete-confirm .card-footer {
    padding: 1rem 1.25rem;
}

/* --- 8. Tax split editor (generic/_booking_tax_split.html) ---------------- */

/* The editor sits in a full-width form, in a modal and in the narrow column
   beside the invoice preview, so it lays its rows out by its own width. */
.split-panel {
    container-type: inline-size;
}

.split-row,
.split-item {
    display: grid;
    gap: 0.5rem;
    align-items: end;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.split-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem;
    grid-template-areas:
        "rate rate remove"
        "net tax tax"
        "account account account";
}

.split-item {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 2rem;
    grid-template-areas:
        "description description description remove"
        "quantity unit price price"
        "rate rate total total"
        "account account account account";
}

.split-row--head,
.split-item--head {
    display: none;
    padding-top: 0;
    padding-bottom: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-secondary-color);
}

.split-cell--description { grid-area: description; }
.split-cell--quantity { grid-area: quantity; }
.split-cell--unit { grid-area: unit; }
.split-cell--price { grid-area: price; }
.split-cell--rate { grid-area: rate; min-width: 0; }
.split-cell--net { grid-area: net; }
.split-cell--tax { grid-area: tax; }
.split-cell--total { grid-area: total; text-align: end; }
.split-cell--remove { grid-area: remove; }
.split-cell--account { grid-area: account; }

.split-cell--total [data-line-total] {
    display: inline-block;
    padding: 0.25rem 0;
}

.split-cell__label {
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split-cell--quantity .split-cell__label,
.split-cell--price .split-cell__label,
.split-cell--net .split-cell__label,
.split-cell--tax .split-cell__label {
    text-align: end;
}

/* A rate typed by hand keeps a readable box next to the select. */
.split-cell--rate [data-field="rate"] {
    flex: 0 0 4.5rem;
}

@container (min-width: 30rem) {
    .split-row {
        grid-template-columns: minmax(0, 1fr) 8rem 8rem 2rem;
        grid-template-areas:
            "rate net tax remove"
            "account account account account";
    }

    .split-row--head {
        display: grid;
    }

    .split-row .split-cell__label {
        display: none;
    }
}

@container (min-width: 38rem) {
    .split-item {
        grid-template-columns: 5.5rem 6rem minmax(6rem, 1fr) 9rem 6rem 2rem;
        grid-template-areas:
            "description description description description description remove"
            "quantity unit price rate total ."
            "account account account account account account";
    }
}

@container (min-width: 50rem) {
    .split-item {
        grid-template-columns: minmax(8rem, 1fr) 5.5rem 6.5rem 7.5rem 10rem 6.5rem 2rem;
        grid-template-areas:
            "description quantity unit price rate total remove"
            "account account account account account account account";
    }

    .split-item--head {
        display: grid;
    }

    .split-item .split-cell__label {
        display: none;
    }
}


/* --- 9. Delivery items table (delivery/delivery_detail.html) -------------- */

/* Below this the table scrolls instead of breaking the name word by word. */
.delivery-items__product {
    min-width: 10rem;
}

.delivery-items__billing {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.delivery-items__billing .billing-ref {
    order: 1;
    flex-basis: 100%;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    white-space: nowrap;
}


/* --- Form page head and sticky footer ------------------------------------- */

/* The line under a form title: what is being edited, its number, its state.
   Indented past the back arrow so it lines up with the title. */
.form-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-left: 2rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.form-head-meta__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.75rem;
    color: var(--bs-body-color);
}

.form-head-meta__status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
}

.form-head-note {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Save stays in reach on a long form: the footer sticks to the bottom of the
   viewport and carries the page ground so content scrolls under it. */
.form-footer--sticky {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    padding-bottom: 0.75rem;
    background: var(--page-bg);
}


/* --- 10. Invoice review (invoice_mailbox/invoice_mail_item_detail.html) --- */

/* Every section of the review form stands as a card of its own, the
   document viewer beside it too, like the sections of a detail-split page. */
.invoice-review__fields .detail-section,
.invoice-review__preview > #pdf-viewer-container,
.invoice-review__preview > .invoice-review__page {
    border: 1px solid var(--hairline);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-card);
}

.invoice-review__fields .detail-section {
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
}

.invoice-review__preview > #pdf-viewer-container {
    overflow: hidden;
}

.invoice-review__types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.invoice-review__type {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--bs-border-radius-lg);
    cursor: pointer;
}

.invoice-review__type .form-check-input {
    flex-shrink: 0;
    margin: 0;
}

.invoice-review__type:has(.form-check-input:checked) {
    border-color: var(--accent);
    background: var(--accent-tint);
}

.invoice-review__type-title {
    display: block;
    font-weight: 600;
}

.invoice-review__type-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.invoice-review__type .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.invoice-review__type .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), 0.3);
}

.invoice-review__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    container-type: inline-size;
}

.invoice-review__save {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.invoice-review__footer .btn {
    white-space: nowrap;
}

.invoice-review__btn-label {
    margin-left: 0.25rem;
}

/* Too narrow for three labels: "Save and next" keeps its icon and tooltip only. */
@container (max-width: 33rem) {
    .invoice-review__btn-label {
        display: none;
    }
}

/* A section head that folds its fields away; looks like the plain heads. */
.invoice-review__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.invoice-review__toggle:hover {
    color: var(--bs-body-color);
}

.invoice-review__toggle-icon {
    margin-left: 0.25rem;
    transition: transform 0.2s;
}

.invoice-review__toggle.collapsed .invoice-review__toggle-icon {
    transform: rotate(-90deg);
}

/* The document stays in view while the extracted fields beside it scroll. */
.invoice-review__page {
    max-height: 80vh;
}

@media (min-width: 992px) {
    /* The column ends above the card foot, so a full-height preview gets
       pushed up at the end of the page; the reserve keeps its toolbar in view. */
    .invoice-review__preview {
        position: sticky;
        top: 1rem;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 7rem);
    }

    .invoice-review__preview > #pdf-viewer-container {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .invoice-review__page {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
}

/* --- 11. Company documents (companydocument/, companydocumentshipment/) --- */

/* Nine columns on a laptop: titles stay on one line so every funnel sits
   beside its title, and the cells sit a little closer. */
.company-document-list #table_wrapper thead th {
    white-space: nowrap;
}

.company-document-list #table_wrapper thead > tr > th,
.company-document-list #table_wrapper tbody > tr > td {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

/* A sortable column keeps room for its arrow, or the arrow lands on the filter funnel. */
.company-document-list #table_wrapper thead > tr > th.dt-orderable-asc,
.company-document-list #table_wrapper thead > tr > th.dt-orderable-desc {
    padding-right: 1.125rem;
}

.company-document-list #table_wrapper thead > tr > th span.dt-column-order {
    right: 0.25rem;
}

/* The star sits in the toolbar beside Export and looks like it. */
.company-document-list #list-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.company-document-list #pinnedGroupsMenu .table-button {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: var(--bs-border-color);
}

.company-document-list .pinned-groups-menu {
    min-width: 18rem;
}

/* Seven columns: titles may wrap and cells sit closer, like the documents list. */
.company-document-shipment-list #table_wrapper thead th {
    white-space: normal;
}

.company-document-shipment-list #table_wrapper thead > tr > th,
.company-document-shipment-list #table_wrapper tbody > tr > td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* The overview matrix is as wide as its columns need: with many companies
   it scrolls sideways instead of squeezing them. */
.company-matrix {
    font-size: 0.875rem;
    width: auto;
    min-width: 100%;
}

.company-matrix th,
.company-matrix td {
    vertical-align: middle;
    white-space: nowrap;
}

/* Keeps the cells' visually hidden labels inside the scrolling box instead of widening the page. */
.company-matrix td {
    position: relative;
}

.company-matrix thead th {
    font-weight: 500;
    color: var(--bs-secondary-color);
    min-width: 7rem;
    vertical-align: top;
}

.company-matrix thead th + th,
.company-matrix tbody td:not([colspan]) {
    border-left: 1px solid var(--bs-border-color-translucent);
}

.company-matrix .company-matrix__kind {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    width: 22rem;
    min-width: 20rem;
    max-width: 26rem;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    box-shadow: inset -1px 0 0 var(--bs-border-color);
}

.company-matrix .matrix-group > * {
    background: var(--bs-tertiary-bg);
}

.company-matrix .matrix-kind:hover > * {
    background: var(--bs-secondary-bg);
}

.company-matrix .company-matrix__dot {
    font-size: 0.55rem;
}

.company-matrix td.is-missing {
    color: var(--bs-tertiary-color);
}

.company-matrix .matrix-row,
.company-matrix .matrix-column {
    margin-top: 0.2em;
}

/* On larger screens the box keeps to the window, so its sideways scrollbar
   is always in reach and the company names stay on top while scrolling down. */
@media (min-width: 576px) {
    .company-matrix-scroll {
        max-height: calc(100vh - 14rem);
        min-height: 20rem;
        overflow: auto;
    }

    .company-matrix thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bs-body-bg);
    }

    .company-matrix thead th.company-matrix__kind {
        z-index: 3;
    }
}

@media (max-width: 575.98px) {
    .company-matrix .company-matrix__kind {
        width: 12.5rem;
        min-width: 12.5rem;
        max-width: 12.5rem;
        overflow-wrap: anywhere;
        font-size: 0.8125rem;
    }

    .company-matrix .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Searching the kinds by typing must not cost the groups their shape: a bold
   heading, the kinds indented below it. The dropdown hangs off <body>, so it
   carries its own class (data-dropdown-css-class on the select). */
.select2-container--bootstrap-5 .select2-dropdown.company-document-type-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    display: block;
    font-weight: 700;
    color: var(--bs-emphasis-color);
    background: var(--bs-tertiary-bg);
}

.select2-container--bootstrap-5 .select2-dropdown.company-document-type-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
    padding-left: 1.75rem;
}

/* Send form: the contact chips sit side by side and wrap; "To" grows with
   its addresses instead of scrolling sideways. */
.shipment-contacts .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.375rem;
}

.shipment-contacts .select2-selection__choice {
    margin-top: 0 !important;
}

.shipment-contacts .select2-container .select2-selection--multiple {
    padding-top: 1.625rem;
}

.shipment-contacts > label {
    height: auto;
}

.shipment-form textarea.shipment-autogrow {
    resize: none;
    overflow: hidden;
}

/* The public download page (companydocumentshipment/public_download.html)
   stands without the app frame: one column of white cards on the page ground. */
.download-page {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.download-card {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--shadow-card);
}

.download-card--narrow {
    max-width: 26rem;
}

.download-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--ink-100);
}

.download-file:first-child {
    border-top: 0;
}

.download-file__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.btn-download {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-active);
    --bs-btn-hover-border-color: var(--accent-active);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent-active);
    --bs-btn-active-border-color: var(--accent-active);
    --bs-btn-active-color: var(--on-accent);
}