/* ============================================================================
   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
   ============================================================================ */


/* --- 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;
}

/* 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;
}

.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-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(0, 1fr) auto;
}

/* 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 {
    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 {
    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 {
        padding: 1rem 1.125rem;
    }

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


/* --- 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) --- */

/* 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;
    }
}