/* =====================================================================
   rm7-theme.css — bridges Bootstrap 5.3 onto the fluid-ui house style.

   Load order (see rm7ThemeHead() in app/view/theme.php):
     bootstrap.min.css → bootstrap-icons → fluid-ui.css → rm7-theme.css → page CSS
   fluid-ui.css is the unmodified skill asset; everything RM7-specific lives here.

   Accent colour: configured ONCE via RM7_ACCENT_COLOR in .env. rm7ThemeHead()
   emits it as --accent / --accent-rgb, which everything below derives from.

   Deliberate deviation from the skill: RM7 is a normal browser app, not an
   overlay, so the page gets a solid near-black background instead of transparent.
   ===================================================================== */

/* ---------- 1. Tokens → Bootstrap variables ---------- */
:root,
[data-bs-theme='dark'] {
    color-scheme: dark;

    --page-bg: rgb(9, 9, 11);
    --page-bg-rgb: 9, 9, 11;
    /* Solid equivalents of the layered fills, for places that cannot be translucent. */
    --surface-1: rgb(35, 35, 39); /* --fill over --material */
    --surface-2: rgb(43, 43, 47); /* --fill-2 over --material */
    --gray: #8e8e93;

    --bs-body-font-family: var(--font);
    --bs-font-sans-serif: var(--font);
    --bs-font-monospace: var(--mono);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.45;

    --bs-body-bg: var(--page-bg);
    --bs-body-bg-rgb: var(--page-bg-rgb);
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: var(--text);
    --bs-secondary-color: var(--text-2);
    --bs-secondary-color-rgb: 235, 235, 245;
    --bs-tertiary-color: var(--text-3);
    --bs-tertiary-color-rgb: 235, 235, 245;
    --bs-secondary-bg: var(--surface-2);
    --bs-secondary-bg-rgb: 43, 43, 47;
    --bs-tertiary-bg: var(--material);
    --bs-tertiary-bg-rgb: 22, 22, 26;

    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: var(--r-card);
    --bs-border-radius-xl: var(--r-panel);
    --bs-border-radius-xxl: var(--r-panel);

    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: var(--accent-rgb);
    --bs-link-hover-color: var(--accent);
    --bs-link-hover-color-rgb: var(--accent-rgb);
    --bs-focus-ring-color: rgba(var(--accent-rgb), 0.35);
    --bs-highlight-bg: rgba(var(--accent-rgb), 0.3);

    /* system palette (semantic: green good, yellow warning, red bad) */
    --bs-secondary: var(--gray);
    --bs-secondary-rgb: 142, 142, 147;
    --bs-success: var(--green);
    --bs-success-rgb: 48, 209, 88;
    --bs-danger: var(--red);
    --bs-danger-rgb: 255, 69, 58;
    --bs-warning: var(--yellow);
    --bs-warning-rgb: 255, 214, 10;
    --bs-info: var(--teal);
    --bs-info-rgb: 48, 176, 199;
    --bs-light-rgb: 235, 235, 245;
    --bs-dark-rgb: 22, 22, 26;

    /* tinted "subtle" surfaces used by alerts, list-group variants, text-*-emphasis */
    --bs-primary-bg-subtle: rgba(var(--accent-rgb), 0.16);
    --bs-primary-border-subtle: transparent;
    --bs-primary-text-emphasis: color-mix(in srgb, var(--accent) 70%, #fff);
    --bs-success-bg-subtle: rgba(48, 209, 88, 0.14);
    --bs-success-border-subtle: transparent;
    --bs-success-text-emphasis: #7ee49a;
    --bs-danger-bg-subtle: rgba(255, 69, 58, 0.15);
    --bs-danger-border-subtle: transparent;
    --bs-danger-text-emphasis: #ff8a82;
    --bs-warning-bg-subtle: rgba(255, 214, 10, 0.13);
    --bs-warning-border-subtle: transparent;
    --bs-warning-text-emphasis: #ffe36b;
    --bs-info-bg-subtle: rgba(48, 176, 199, 0.15);
    --bs-info-border-subtle: transparent;
    --bs-info-text-emphasis: #7fd3e2;
    --bs-secondary-bg-subtle: var(--fill-2);
    --bs-secondary-border-subtle: transparent;
    --bs-secondary-text-emphasis: var(--text-2);
    --bs-light-bg-subtle: var(--fill);
    --bs-dark-bg-subtle: var(--fill);

    --bs-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    --bs-box-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --bs-box-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ---------- 2. Page ---------- */
html,
body {
    background: var(--page-bg);
}
body {
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
::selection {
    background: rgba(var(--accent-rgb), 0.35);
}
* {
    scrollbar-width: thin;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 700;
    letter-spacing: -0.018em;
}
/* page titles in the content column use the fluid title scale */
main > .flex-grow-1 h1,
main > .flex-grow-1 .h1 {
    font-size: 1.75rem;
    letter-spacing: -0.022em;
    line-height: 1.15;
    margin-bottom: 0;
}
@media (max-width: 36rem) {
    main > .flex-grow-1 h1,
    main > .flex-grow-1 .h1 {
        font-size: 1.375rem;
    }
}
main > .flex-grow-1 > hr,
main > .flex-grow-1 > div > hr {
    /* no hard dividers under headers: keep the spacing, drop the line */
    border: 0;
    margin: 0.25rem 0 0.75rem;
    opacity: 0;
}
hr {
    border-color: var(--sep);
    opacity: 1;
}
a {
    text-underline-offset: 0.15em;
}
.text-muted,
.text-secondary {
    color: var(--text-2) !important;
}
.text-body-secondary {
    color: var(--text-2) !important;
}
code,
kbd,
pre,
.font-monospace {
    font-family: var(--mono);
}
.num,
.badge,
td,
.font-monospace {
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. Collisions between fluid-ui and Bootstrap class names ----------
   fluid-ui's .row is a list row; Bootstrap's .row is the grid. Undo the list-row
   styling everywhere except inside a fluid .list. :where() keeps the specificity
   at a single class so page CSS can still override. */
.row:where(:not(.list > .row)) {
    position: static;
    align-items: normal;
    gap: 0;
    width: auto;
    min-height: 0;
    padding: 0;
    transition: none;
}
.row + .row:where(:not(.list > .row))::before {
    content: none;
}

/* fluid .card is a padded fill block; Bootstrap cards bring their own padding parts */
.card:has(> .card-body, > .card-header, > .card-footer, > .list-group, > .card-img-top) {
    padding: 0;
}

/* ---------- 4. Buttons ---------- */
.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 0.75rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: auto;
    min-height: 2.5rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    border-radius: var(--bs-btn-border-radius);
    font-size: var(--bs-btn-font-size);
    letter-spacing: -0.005em;
    transition:
        transform 100ms ease-out,
        opacity 160ms,
        color 140ms,
        background-color 140ms,
        box-shadow 140ms;
}
.btn > .fa-solid {
    line-height: 1;
}
.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-border-radius: 0.6rem;
    min-height: 1.875rem;
}
.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0.875rem;
    min-height: 3rem;
}
.btn:disabled,
.btn.disabled {
    opacity: 0.38;
}

/* filled */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 88%, #fff);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--accent) 85%, #000);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--accent);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--green) 88%, #fff);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--green) 85%, #000);
    --bs-btn-disabled-bg: var(--green);
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--red) 88%, #fff);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--red) 85%, #000);
    --bs-btn-disabled-bg: var(--red);
}
.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: color-mix(in srgb, var(--yellow) 85%, #fff);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: color-mix(in srgb, var(--yellow) 85%, #000);
    --bs-btn-disabled-bg: var(--yellow);
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--teal) 88%, #fff);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--teal) 85%, #000);
}
/* ghost (secondary) */
.btn-secondary,
.btn-light,
.btn-dark {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--fill-2);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--fill-press);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--fill-press);
    --bs-btn-disabled-color: var(--text);
    --bs-btn-disabled-bg: var(--fill-2);
}
/* outline → tinted (Apple style: coloured text on a soft fill, no border) */
[class*='btn-outline-'] {
    --tint: var(--accent);
    --bs-btn-color: var(--tint);
    --bs-btn-bg: color-mix(in srgb, var(--tint) 14%, transparent);
    --bs-btn-hover-color: var(--tint);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tint) 22%, transparent);
    --bs-btn-active-color: var(--tint);
    --bs-btn-active-bg: color-mix(in srgb, var(--tint) 28%, transparent);
    --bs-btn-disabled-color: var(--tint);
    --bs-btn-disabled-bg: color-mix(in srgb, var(--tint) 14%, transparent);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
}
.btn-outline-success {
    --tint: var(--green);
}
.btn-outline-danger {
    --tint: var(--red);
}
.btn-outline-warning {
    --tint: var(--yellow);
}
.btn-outline-info {
    --tint: var(--teal);
}
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
    --tint: var(--text-2);
    --bs-btn-bg: var(--fill-2);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--fill-press);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--fill-press);
    --bs-btn-disabled-bg: var(--fill-2);
}
.btn-check:checked + [class*='btn-outline-'],
[class*='btn-outline-'].active {
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tint);
}
/* links */
.btn-link {
    --bs-btn-color: var(--accent);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-active-color: var(--accent);
    background: none;
    min-height: 0;
    text-decoration: none;
}
.btn-link:hover {
    opacity: 0.75;
}
/* fluid's .btn.small is a filled chip; RM7 uses "btn-link small" for text links */
.btn-link.small {
    height: auto;
    background: none;
    border-radius: 0;
}

.btn-close {
    --bs-btn-close-opacity: 0.75;
    --bs-btn-close-hover-opacity: 1;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    background-color: var(--fill-2);
    background-size: 0.7rem;
    transition:
        transform 100ms ease-out,
        background-color 120ms;
}
.btn-close:hover {
    background-color: var(--fill-press);
}
.btn-close:active {
    transform: scale(0.92);
}

/* ---------- 5. Forms ---------- */
.form-label,
.col-form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 0.35rem;
}
.form-text {
    color: var(--text-3);
    font-size: 0.75rem;
}
.form-control,
.form-select {
    --bs-border-width: 0;
    background-color: var(--fill);
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 0.625rem;
    min-height: 2.5rem;
    font-size: 0.9375rem;
    transition:
        background-color 140ms,
        border-color 140ms,
        box-shadow 140ms;
}
.form-control:hover,
.form-select:hover {
    background-color: var(--fill-2);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--fill-2);
    color: var(--text);
    border-color: rgba(var(--accent-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}
.form-control::placeholder {
    color: var(--text-3);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-2);
}
.form-control-sm,
.form-select-sm {
    min-height: 1.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}
.form-control-lg,
.form-select-lg {
    min-height: 3rem;
    border-radius: 0.75rem;
}
.form-select option {
    background: var(--material);
    color: var(--text);
}
.input-group-text {
    background: var(--fill-2);
    color: var(--text-2);
    border: 1px solid transparent;
    border-radius: 0.625rem;
}
.form-check-input {
    --bs-border-color: rgba(255, 255, 255, 0.25);
    background-color: var(--fill-2);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input:focus {
    border-color: rgba(var(--accent-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}
/* switches follow the fluid toggle: green when on */
.form-switch {
    padding-left: 3.1em;
}
.form-switch .form-check-input {
    margin-left: -3.1em;
    width: 2.4em;
    height: 1.4em;
    margin-top: 0.05em;
    border: 0;
    background-color: rgba(120, 120, 128, 0.36);
}
.form-switch .form-check-input:checked {
    background-color: var(--green);
}
.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--red) !important;
}
.invalid-feedback {
    color: var(--red);
}
.valid-feedback {
    color: var(--green);
}

/* ---------- 6. Tables → grouped surfaces ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--sep);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.022);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.045);
    --bs-table-hover-color: var(--text);
    --bs-table-active-bg: var(--fill-2);
    --bs-table-active-color: var(--text);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--material);
    border-radius: var(--r-card);
    box-shadow: inset 0 0 0 0.5px var(--material-edge);
    overflow: hidden;
}
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--sep);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.022);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.045);
}
.table > :not(caption) > * > * {
    padding: 0.65rem 0.85rem;
    border-bottom: 0.5px solid var(--sep);
    vertical-align: middle;
}
.table > thead > tr > th,
.table > thead > tr > td {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.02);
}
.table > tbody > tr:last-child > *,
.table > tfoot > tr:last-child > * {
    border-bottom: 0;
}
.table-sm > :not(caption) > * > * {
    padding: 0.4rem 0.6rem;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0 0 0.5px;
}
/* tables nested in panels/modals sit on a fill instead of a second panel */
.modal .table,
.card .table,
.offcanvas .table,
.list-group .table {
    background: var(--fill);
    box-shadow: none;
}
.table-responsive {
    border-radius: var(--r-card);
}
.table-responsive > .table {
    margin-bottom: 0;
}

/* ---------- 7. Cards, list groups, accordions ---------- */
.card {
    --bs-card-bg: var(--material);
    --bs-card-color: var(--text);
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--r-card);
    --bs-card-inner-border-radius: var(--r-card);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 0.85rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    background: var(--material);
    box-shadow:
        inset 0 0 0 0.5px var(--material-edge),
        0 2px 10px rgba(0, 0, 0, 0.25);
}
.modal .card,
.card .card,
.offcanvas .card {
    background: var(--fill);
    box-shadow: none;
}
.card-header {
    border-bottom: 0.5px solid var(--sep);
    font-weight: 600;
}
.card-footer {
    border-top: 0.5px solid var(--sep);
    background: rgba(0, 0, 0, 0.16);
}
.card-title {
    font-weight: 650;
    letter-spacing: -0.012em;
}

.list-group {
    --bs-list-group-bg: var(--fill);
    --bs-list-group-color: var(--text);
    --bs-list-group-border-color: var(--sep);
    --bs-list-group-border-width: 0.5px;
    --bs-list-group-border-radius: var(--r-card);
    --bs-list-group-item-padding-x: 0.85rem;
    --bs-list-group-item-padding-y: 0.7rem;
    --bs-list-group-action-color: var(--text);
    --bs-list-group-action-hover-color: var(--text);
    --bs-list-group-action-hover-bg: rgba(255, 255, 255, 0.03);
    --bs-list-group-action-active-color: var(--text);
    --bs-list-group-action-active-bg: var(--fill-press);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--accent);
    --bs-list-group-active-border-color: var(--accent);
    --bs-list-group-disabled-color: var(--text-3);
    --bs-list-group-disabled-bg: transparent;
    overflow: hidden;
}
.list-group-item {
    border-left: 0;
    border-right: 0;
}
.list-group-item:first-child {
    border-top: 0;
}
.list-group-item:last-child {
    border-bottom: 0;
}
.list-group-flush {
    --bs-list-group-bg: transparent;
}

.accordion {
    --bs-accordion-bg: var(--fill);
    --bs-accordion-color: var(--text);
    --bs-accordion-border-color: var(--sep);
    --bs-accordion-border-radius: var(--r-card);
    --bs-accordion-inner-border-radius: var(--r-card);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-active-bg: var(--fill-2);
    --bs-accordion-active-color: var(--text);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}

/* ---------- 8. Modals (fluid panel look; spring motion lives in ui.js) ---------- */
.modal {
    --bs-modal-bg: var(--material);
    --bs-modal-color: var(--text);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--r-panel);
    --bs-modal-inner-border-radius: var(--r-panel);
    --bs-modal-box-shadow: var(--bs-box-shadow-lg);
    --bs-modal-header-padding: 1.25rem 1.25rem 0.5rem;
    --bs-modal-header-border-width: 0;
    --bs-modal-padding: 0.75rem 1.25rem 1.25rem;
    --bs-modal-footer-border-width: 0;
    --bs-modal-footer-gap: 0.5rem;
}
.modal-content {
    box-shadow:
        inset 0 0 0 0.5px var(--material-edge),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 28px 80px rgba(0, 0, 0, 0.5),
        0 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.2;
}
.modal-title > .fa-solid {
    color: var(--accent);
}
.modal-header .btn-close {
    margin: 0 0 0 auto;
}
.modal-footer {
    padding: 0.75rem 1rem 1rem;
    background: rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 0.5px 0 var(--sep);
}
.modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.6;
}
/* the dialog's position/scale is driven by a Spring (see ui.js), not a CSS transition */
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
    transition: none;
    transform: none;
}

/* ---------- 9. Dropdowns, popovers, tooltips, offcanvas ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--material);
    --bs-dropdown-color: var(--text);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--r-card);
    --bs-dropdown-padding-x: 0.3rem;
    --bs-dropdown-padding-y: 0.3rem;
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--fill-2);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--accent);
    --bs-dropdown-divider-bg: var(--sep);
    --bs-dropdown-header-color: var(--text-3);
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-item-padding-y: 0.45rem;
    --bs-dropdown-font-size: 0.875rem;
    box-shadow:
        inset 0 0 0 0.5px var(--material-edge),
        0 12px 32px rgba(0, 0, 0, 0.45);
}
.dropdown-item {
    border-radius: 0.5rem;
}
.dropdown-header {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.popover {
    --bs-popover-bg: var(--material);
    --bs-popover-border-color: var(--material-edge);
    --bs-popover-border-radius: var(--r-card);
    --bs-popover-header-bg: transparent;
    --bs-popover-body-color: var(--text);
}
.tooltip {
    --bs-tooltip-bg: var(--surface-2);
    --bs-tooltip-color: var(--text);
    --bs-tooltip-border-radius: 0.5rem;
}
.offcanvas {
    --bs-offcanvas-bg: var(--material);
    --bs-offcanvas-color: var(--text);
    --bs-offcanvas-border-width: 0;
}

/* ---------- 10. Navigation: tabs → segmented look, pills, pagination ---------- */
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    gap: 2px;
    padding: 2px;
    border-radius: 0.625rem;
    background: var(--fill);
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}
.nav-tabs .nav-link {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
    transition:
        color 160ms,
        background-color 160ms;
}
.nav-tabs .nav-link:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--text);
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.3),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.15);
}
.nav-pills {
    --bs-nav-pills-border-radius: 0.625rem;
    --bs-nav-pills-link-active-bg: var(--accent);
    --bs-nav-pills-link-active-color: #fff;
}
.nav-link {
    --bs-nav-link-color: var(--text-2);
    --bs-nav-link-hover-color: var(--text);
}
.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--text-2);
    --bs-pagination-border-width: 0;
    --bs-pagination-border-radius: 0.5rem;
    --bs-pagination-hover-bg: var(--fill-2);
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-focus-bg: var(--fill-2);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--text-3);
    gap: 0.25rem;
}
.page-link {
    border-radius: 0.5rem !important;
    min-width: 2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- 11. Badges, alerts, progress, spinners ---------- */
.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 1rem;
    --bs-badge-padding-x: 0.55em;
    --bs-badge-padding-y: 0.32em;
    letter-spacing: 0.01em;
}
.badge.bg-warning,
.badge.text-bg-warning,
.badge.bg-light {
    color: #1a1a1a !important;
}
.badge.bg-secondary {
    background-color: var(--fill-press) !important;
    color: var(--text) !important;
}
.alert {
    --bs-alert-border-width: 0;
    --bs-alert-border-radius: var(--r-card);
    --bs-alert-padding-x: 0.95rem;
    --bs-alert-padding-y: 0.75rem;
    font-size: 0.875rem;
}
.progress,
.progress-stacked {
    --bs-progress-bg: rgba(255, 255, 255, 0.08);
    --bs-progress-border-radius: 1rem;
    --bs-progress-bar-bg: var(--accent);
}
.spinner-border,
.spinner-grow {
    color: var(--accent);
}

/* ---------- 12. Toasts (fluid component, extended with info + close) ---------- */
.toasts {
    z-index: 11000;
}
/* Bootstrap hides any .toast without .show; fluid toasts animate with .in instead */
.toasts > .toast:not(.show) {
    display: flex;
}
.toast.info .toast-icon {
    background: var(--accent);
}
.toast.notification .toast-icon {
    background: var(--accent);
}
.toast {
    position: relative;
    pointer-events: auto;
    max-width: 22rem;
}
.toast.clickable {
    cursor: pointer;
}
.toast-body-text {
    flex: 1;
    min-width: 0;
}
.toast-detail {
    word-break: break-word;
}
.toast-dismiss {
    flex: none;
    align-self: flex-start;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.15rem -0.35rem 0 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--text-3);
    transition:
        background-color 120ms,
        color 120ms;
}
.toast-dismiss:hover {
    background: var(--fill-2);
    color: var(--text);
}
.toast-dismiss .ic {
    width: 0.85rem;
    height: 0.85rem;
}

/* ---------- 13. App dialogs (appConfirm / appChoice / appPrompt) ---------- */
.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 200ms ease;
}
.app-dialog-backdrop.show {
    opacity: 1;
}
.app-dialog {
    width: min(26rem, 100%);
    will-change: transform, opacity;
}
.app-dialog .panel-head {
    padding-bottom: 0.25rem;
}
.app-dialog .title {
    white-space: normal;
    font-size: 1.125rem;
}
.app-dialog-body {
    padding: 0.25rem 1.25rem 1.25rem;
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-line;
}
.app-dialog-input {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0 0.85rem;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: var(--fill);
    color: var(--text);
    font: inherit;
    white-space: normal;
}
.app-dialog-input:focus {
    outline: none;
    background: var(--fill-2);
    border-color: rgba(var(--accent-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}
.app-dialog .foot {
    justify-content: flex-end;
    flex-wrap: wrap;
}
.app-dialog .foot .btn {
    min-height: 2.5rem;
}
.tile.tile-red {
    --ic: var(--red);
}
.tile.tile-orange {
    --ic: var(--orange);
}
.tile.tile-accent {
    --ic: var(--accent);
}

/* ---------- 14. Icons (Font Awesome 6, solid) ---------- */
.fa-solid,
.fa-regular,
.fa-brands {
    line-height: 1;
    vertical-align: -0.125em; /* optical baseline for icons next to text */
}
/* fixed width where icons line up in rows; decorative icons (empty states) keep their natural size */
:is(
        .btn,
        .nav-link,
        .tab-item,
        .dropdown-item,
        .list-group-item,
        .badge,
        .form-label,
        .card-header,
        .modal-title,
        .alert,
        td,
        th,
        label,
        .tile,
        .icon-btn,
        .toast-icon,
        .toast-dismiss,
        .sidebar-flyout-item
    )
    > :is(.fa-solid, .fa-regular, .fa-brands),
:is(.nav-link, .card-header, .modal-title) :is(.fa-solid, .fa-regular, .fa-brands) {
    width: 1.25em;
    text-align: center;
}
/* in flex rows the gap does the spacing; ad-hoc margins would make it uneven */
.btn > [class*='fa-'],
.nav-link [class*='fa-'],
.tab-item > [class*='fa-'],
.dropdown-item > [class*='fa-'] {
    margin: 0 !important;
}
.dropdown-item,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.list-group-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-tabs .nav-link [class*='fa-'] {
    color: var(--text-3);
}
.nav-tabs .nav-link.active [class*='fa-'] {
    color: var(--accent);
}
.badge [class*='fa-'] {
    width: auto;
    margin-right: 0.2em;
    vertical-align: -0.05em;
}
.card-header [class*='fa-'],
.modal-title [class*='fa-'] {
    color: var(--accent);
}

/* ---------- 15. Page rhythm ---------- */
main > .flex-grow-1 h1,
main > .flex-grow-1 .h1 {
    line-height: 2.5rem; /* same box as a button, so titles align with or without actions */
}
main > .flex-grow-1 h1 + .text-muted,
main > .flex-grow-1 h1 + .text-body-secondary,
main > .flex-grow-1 h1 + p {
    margin-top: 0.1rem;
    font-size: 0.9375rem;
    color: var(--text-2) !important;
}
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.012em;
}
.card-header [class*='fa-'] {
    margin: 0 !important;
}

/* ---------- 16. Row actions in tables ---------- */
td .btn-group,
td > .d-flex {
    gap: 0.3rem;
}
td .btn-group > .btn {
    border-radius: var(--bs-btn-border-radius) !important;
    margin-left: 0 !important;
}
td .btn-sm {
    --bs-btn-padding-x: 0.55rem;
    min-width: 2rem;
}
/* neutral buttons, coloured glyphs: calmer than three tinted blocks side by side */
td [class*='btn-outline-'] {
    --bs-btn-bg: var(--fill-2);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tint) 22%, transparent);
    --bs-btn-active-bg: color-mix(in srgb, var(--tint) 30%, transparent);
}

/* counts in badges keep a stable width */
.badge {
    min-width: 1.6em;
}

/* Font Awesome glyphs inside fluid icon containers */
.tile,
.icon-btn {
    font-size: 0.9375rem;
    line-height: 1;
}
.toast-icon {
    font-size: 0.8125rem;
    line-height: 1;
}
.toast-dismiss {
    font-size: 0.75rem;
    line-height: 1;
}
.tile > [class*='fa-'],
.icon-btn > [class*='fa-'],
.toast-icon > [class*='fa-'],
.toast-dismiss > [class*='fa-'] {
    vertical-align: 0;
}

/* ---------- 17. Page-built overlays share the panel look ---------- */
/* Custom filter modals, centred modals and detail sidebars written per page. */
body .filter-modal,
body .modal-centered,
body .details-sidebar {
    background: var(--material);
    border: 0;
    border-radius: var(--r-panel);
    box-shadow:
        inset 0 0 0 0.5px var(--material-edge),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 28px 80px rgba(0, 0, 0, 0.5),
        0 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
body .filter-modal-header,
body .details-sidebar-header,
body .modal-centered .modal-header {
    background: transparent;
    border-bottom: 0;
}
body .filter-modal-footer,
body .combination-modal-footer {
    background: rgba(0, 0, 0, 0.16);
    border-top: 0;
    box-shadow: inset 0 0.5px 0 var(--sep);
}
body .filter-backdrop {
    background: rgba(0, 0, 0, 0.6);
}
/* detail sidebars float like the docked notification panel */
body .details-sidebar {
    top: var(--gutter);
    height: calc(100vh - 2 * var(--gutter));
    max-width: calc(100vw - 2 * var(--gutter));
}
body .details-sidebar.show {
    right: var(--gutter);
}

/* ---------- 18. Fluid list rows used as links ---------- */
.list > a.row {
    color: inherit;
    text-decoration: none;
}
.list > a.row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.list > a.row:active {
    background: var(--fill-press);
    transition: none;
}
.list > .row > .badge {
    flex: none;
}
.list > .row .chev [class*='fa-'] {
    font-size: 0.8rem;
}

/* Inside a fluid .list, .row is a list row: undo Bootstrap's grid behaviour
   (wrapping, negative margins, full-width gutter children). */
.list > .row {
    flex-wrap: nowrap;
    margin: 0;
}
/* fixed-size parts (tile, switch, dot) keep their own width */
.list > .row > * {
    max-width: none;
    margin-top: 0;
}
.list > .row > :not(.tile, .switch, .row-dot, .icon-btn) {
    width: auto;
    padding-inline: 0;
    flex-shrink: 1;
}
.list > .row > .tile,
.list > .row > .badge,
.list > .row > .chev,
.list > .row > .switch,
.list > .row > .row-dot {
    flex-shrink: 0;
}
.list > .row > .row-main {
    flex: 1;
    min-width: 0;
}
.list > .row > .badge {
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
}

/* ---------- 19. Either/or choices (radio .btn-check groups) → segmented control ---------- */
.btn-group:has(> .btn-check) {
    gap: 2px;
    padding: 2px;
    border-radius: 0.75rem;
    background: var(--fill);
}
.btn-group:has(> .btn-check) > .btn {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--text-2);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.14);
    --bs-btn-active-color: var(--text);
    min-height: 2.25rem;
    border-radius: 0.6rem !important;
    margin-left: 0 !important;
    font-size: 0.8125rem;
    transition:
        color 160ms,
        background-color 160ms,
        box-shadow 160ms;
}
.btn-group:has(> .btn-check) > .btn-check:checked + .btn {
    color: var(--text);
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.3),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.15);
}
.btn-group:has(> .btn-check) > .btn-check:checked + .btn [class*='fa-'] {
    color: var(--accent);
}

/* ---------- 20. Menus sit on an elevated surface so they separate from the panel below ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface-1);
    box-shadow:
        inset 0 0 0 0.5px var(--material-edge),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 40px rgba(0, 0, 0, 0.55);
}
.dropdown-item [class*='fa-'] {
    color: var(--text-2);
}
.dropdown-item:hover [class*='fa-'],
.dropdown-item:active [class*='fa-'] {
    color: inherit;
}

/* ---------- 21. Legacy colour utilities → fluid surfaces ---------- */
/* "bg-dark" boxes sit inside panels: a layered fill reads as nested, not as a second panel */
.bg-dark {
    background-color: var(--fill) !important;
}
.border-secondary {
    border-color: var(--sep) !important;
}
.card.bg-dark,
.list-group-item.bg-dark {
    box-shadow: none;
}

/* ---------- 22. Icon containers always centre their glyph ----------
   Tiles, icon buttons and toast icons are fixed-size boxes; no page rule, flex parent
   or Bootstrap grid gutter may change their layout model or padding. */
.tile,
.icon-btn,
.toast-icon,
.toast-dismiss {
    display: grid !important;
    place-items: center;
    padding: 0 !important;
}
.tile > [class*='fa-'],
.icon-btn > [class*='fa-'],
.toast-icon > [class*='fa-'],
.toast-dismiss > [class*='fa-'] {
    display: block;
    margin: 0 !important;
    width: 1.25em;
    text-align: center;
}