/*
    Incandera Revolution
    Version: R5
    Brand layer: "incandescence" (see E:\Dev\Incandera.Web\BRAND.md)

    Loaded AFTER view-overrides.css so it re-tunes the token layer without
    touching it. Remove the two <link> tags (main layout + fullscreen layout)
    to revert entirely.

    Palette: ink #17130e · paper #f7f3eb · ember #c8410a (primary) ·
    ember-deep #a83407 · ember-bright #e0651c · amber #efa02b ·
    clinical blue #1a4d8f / #3d74b8 · module green #1a6b4a / #2a8a64 ·
    crimson (danger) #c22945

    Accent discipline (the "ember is not a warning" rules):
    - Ember fill is reserved for THE primary action; secondary actions use
      ink, warm-slate, or soft treatments.
    - Danger is a visibly cooler CRIMSON (#c22945) — never the ember family —
      and views pair it with an icon; color is never the only signal.
    - Amber is a glow/fill, never small text on light surfaces (.text-warning
      drops to ochre for legibility).
    - The entire neutral ramp is WARM so warm accents sit in a warm field
      instead of fighting cool grays.
*/

/* Fonts (Fraunces / DM Sans / DM Mono) are loaded via <link> tags in
   _Layout.cshtml and _LayoutFullScreen.cshtml — NOT @import here. An
   @import blocks this entire stylesheet from applying until the fetch
   resolves, which flashed the underlying indigo theme on every
   navigation. */

/* ============================================================
   Light tokens — the warm neutral ramp + semantic remap.
   Utilities (.text-*, .bg-*, .border-*) read the *-rgb vars;
   pagination/text-muted/form text read the gray ramp.
   ============================================================ */

:root {
    /* Theme indirection vars — feature CSS, inline view styles, and chart JS
       read these via var(--r5-*, classicFallback) / getComputedStyle. When this
       stylesheet is absent (Serenity), the fallbacks restore the classic look. */
    --r5-accent: #c8410a;
    --r5-accent-soft: rgba(200, 65, 10, 0.08);
    --r5-accent-softer: rgba(200, 65, 10, 0.04);
    --r5-accent-surface: #f7e8dd;
    --r5-danger: #c22945;
    --r5-danger-hover: #a52239;
    --r5-border: #d8d0c2;
    --r5-hover-surface: #f0ece2;
    --r5-surface-muted: #f6f2e9;
    --r5-chart-primary: #c8410a;
    --r5-chart-primary-alt: #e0651c;
    --r5-chart-success: #2a8a64;
    --r5-chart-danger: #c22945;
    --r5-chart-warning: #efa02b;
    --r5-chart-info: #3d74b8;
    --r5-chart-muted: #7d7365;
    --r5-chart-muted-light: #a89d8c;
    --r5-video-canvas: #17130e;
    --r5-video-canvas-raised: #241e16;
    --r5-consent-bg: rgba(239, 160, 43, 0.92);
    --r5-consent-fg: #17130e;

    /* Brand primary: indigo → ember */
    --bs-primary: #c8410a;
    --bs-primary-rgb: 200, 65, 10;
    --bs-blue: #c8410a;

    /* Links get ember-deep for small-text contrast on light surfaces */
    --bs-link-color: #a83407;
    --bs-link-color-rgb: 168, 52, 7;
    --bs-link-hover-color: #8a2b06;

    /* Semantic accents.
       danger: crimson — cooler, bluer red; deliberately far from ember
       success: module green (deep, calm — not template mint)
       warning: amber (fills/glows only; text usage is overridden below)
       info: clinical blue */
    --bs-danger: #c22945;
    --bs-danger-rgb: 194, 41, 69;
    --bs-success: #2a8a64;
    --bs-success-rgb: 42, 138, 100;
    --bs-warning: #efa02b;
    --bs-warning-rgb: 239, 160, 43;
    --bs-info: #3d74b8;
    --bs-info-rgb: 61, 116, 184;
    --bs-red: #c22945;
    --bs-green: #2a8a64;
    --bs-yellow: #efa02b;
    --bs-cyan: #3d74b8;

    /* Full paper page bg — the website's section-band DNA. Adds subtle
       weight and defines card boundaries against the #fffdf9 surfaces
       (Allen 2026-07-19; supersedes the earlier #faf8f3 near-white pick) */
    --bs-body-bg: #f7f3eb;
    --bs-body-bg-rgb: 247, 243, 235;

    /* Warm text ramp: body text and headings shift from cool slate/charcoal
       to warm ink tones */
    --bs-body-color: #423b30;
    --bs-body-color-rgb: 66, 59, 48;
    --bs-heading-color: #251f16;

    /* Warm gray ramp — feeds text-muted (600), form text (700),
       pagination (600/400), borders, disabled states */
    --bs-gray-100: #f6f2e9;
    --bs-gray-200: #e8e3d9;
    --bs-gray-300: #efeae0;
    --bs-gray-400: #d8d0c2;
    --bs-gray-500: #a89d8c;
    --bs-gray-600: #7d7365;
    --bs-gray-700: #464034;
    --bs-gray-800: #2b251c;
    --bs-gray-900: #1d1811;

    /* Warm hairline neutrals */
    --bs-border-color: #e8e3d9;
    --bs-hr-border-color: #e8e3d9;

    /* Contextual surfaces: light = warm parchment, dark = ink,
       secondary = warm slate */
    --bs-light: #f2eee4;
    --bs-light-rgb: 242, 238, 228;
    --bs-dark: #251f16;
    --bs-dark-rgb: 37, 31, 22;
    --bs-secondary: #7d7365;
    --bs-secondary-rgb: 125, 115, 101;

    /* Chrome surfaces: topbar (heading-bg), search pill, footer */
    --bs-heading-bg: #fffdf9;
    --bs-topbar-search-bg: #f2eee4;
    --bs-header-item-color: #5c5347;
    --bs-heading-dark-bg: #251f16;
    --bs-boxed-body-bg: #efe9dc;
    --bs-footer-bg: #f2eee4;
    --bs-footer-color: #7d7365;
    --bs-menu-item-color: #5c5347;

    /* Cards / inputs / pagination read this "custom white" */
    --bs-custom-white: #fffdf9;

    /* Callout accent follows the ember family */
    --accent-callout: #f0d9c8;

    /* Inputs & focus */
    --bs-input-border-color: #d8d0c2;
    --bs-input-focus-border-color: #dd9a72;
    --bs-focus-ring-color: rgba(200, 65, 10, 0.2);
    --bs-form-check-input-border: rgba(23, 19, 14, 0.15);

    /* UI sans: DM Sans leads; Geist/Inter remain as fallbacks */
    --bs-font-sans-serif: "DM Sans", "Geist", "Inter", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Cards: warm white surface, not clinical #fff (a pure-white card reads
   cool next to the warm page bg — the exact incongruity we're killing) */
.card {
    --bs-card-bg: #fffdf9;
}

.modal {
    --bs-modal-bg: #fffdf9;
}

.offcanvas,
.offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-bg: #fffdf9;
}

/* ============================================================
   Typography — display serif for identity moments only: page
   titles, dashboard stat values, auth headings. Data UI stays sans.
   ============================================================ */

.page-title-box h1,
.page-title-box h4,
.mini-stats-wid h4,
.auth-full-page-content h3 {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.01em;
}

/* Technical voice utility — codes (CPT/ICD), IDs, timestamps. Opt-in. */
.font-mono {
    font-family: "DM Mono", "Cascadia Code", monospace;
}

/* ============================================================
   Small icon-only buttons — optical centering. The global
   svg.lucide vertical-align (-0.18em, view-overrides) is tuned for
   icons sitting NEXT TO text on a shared baseline; in btn-sm
   icon-only controls (survey editor trash/x, Emergency Contacts
   sub-row deletes) there is no text and the baseline drop leaves
   the glyph sitting low. -0.08em is the DevTools-tuned optical
   center — the small-button counterpart of view-overrides' big
   repeater-delete normalization.
   ============================================================ */

/* (Small icon-button optical centering moved to view-overrides.css —
   geometry, not color; both themes get it.) */

/* ============================================================
   Buttons — Bootstrap 5.3 buttons read their own component vars,
   compiled from the old theme; remap every family.
   Signature interaction: primary buttons glow on hover.
   ============================================================ */

.btn-primary {
    --bs-btn-bg: #c8410a;
    --bs-btn-border-color: #c8410a;
    --bs-btn-hover-bg: #a83407;
    --bs-btn-hover-border-color: #a83407;
    --bs-btn-active-bg: #8a2b06;
    --bs-btn-active-border-color: #8a2b06;
    --bs-btn-disabled-bg: #c8410a;
    --bs-btn-disabled-border-color: #c8410a;
    --bs-btn-focus-shadow-rgb: 200, 65, 10;
}

.btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(200, 65, 10, 0.25), 0 4px 18px rgba(200, 65, 10, 0.28);
}

.btn-outline-primary {
    --bs-btn-color: #a83407;
    --bs-btn-border-color: #c8410a;
    --bs-btn-hover-bg: #c8410a;
    --bs-btn-hover-border-color: #c8410a;
    --bs-btn-active-bg: #a83407;
    --bs-btn-active-border-color: #a83407;
    --bs-btn-focus-shadow-rgb: 200, 65, 10;
}

.btn-soft-primary {
    background-color: rgba(200, 65, 10, 0.10);
    color: #a83407;
    border-color: transparent;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus {
    background-color: #c8410a;
    color: #fff;
}

/* Secondary: warm slate — the quiet workhorse next to the one ember action */
.btn-secondary {
    --bs-btn-bg: #7d7365;
    --bs-btn-border-color: #7d7365;
    --bs-btn-hover-bg: #6b6255;
    --bs-btn-hover-border-color: #6b6255;
    --bs-btn-active-bg: #5c5347;
    --bs-btn-active-border-color: #5c5347;
    --bs-btn-disabled-bg: #7d7365;
    --bs-btn-disabled-border-color: #7d7365;
    --bs-btn-focus-shadow-rgb: 125, 115, 101;
}

.btn-outline-secondary {
    --bs-btn-color: #5c5347;
    --bs-btn-border-color: #a89d8c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7d7365;
    --bs-btn-hover-border-color: #7d7365;
    --bs-btn-active-bg: #6b6255;
    --bs-btn-active-border-color: #6b6255;
    --bs-btn-focus-shadow-rgb: 125, 115, 101;
}

.btn-soft-secondary {
    background-color: rgba(125, 115, 101, 0.10);
    color: #5c5347;
    border-color: transparent;
}

.btn-soft-secondary:hover,
.btn-soft-secondary:focus {
    background-color: #7d7365;
    color: #fff;
}

/* Danger: crimson, not ember. Views pair these with icons. */
.btn-danger {
    --bs-btn-bg: #c22945;
    --bs-btn-border-color: #c22945;
    --bs-btn-hover-bg: #a52239;
    --bs-btn-hover-border-color: #a52239;
    --bs-btn-active-bg: #8f1e32;
    --bs-btn-active-border-color: #8f1e32;
    --bs-btn-disabled-bg: #c22945;
    --bs-btn-disabled-border-color: #c22945;
    --bs-btn-focus-shadow-rgb: 194, 41, 69;
}

.btn-outline-danger {
    --bs-btn-color: #a8213a;
    --bs-btn-border-color: #c22945;
    --bs-btn-hover-bg: #c22945;
    --bs-btn-hover-border-color: #c22945;
    --bs-btn-active-bg: #a52239;
    --bs-btn-active-border-color: #a52239;
    --bs-btn-focus-shadow-rgb: 194, 41, 69;
}

.btn-soft-danger {
    background-color: rgba(194, 41, 69, 0.08);
    color: #a8213a;
    border-color: transparent;
}

.btn-soft-danger:hover,
.btn-soft-danger:focus {
    background-color: #c22945;
    color: #fff;
}

/* Success: module green */
.btn-success {
    --bs-btn-bg: #2a8a64;
    --bs-btn-border-color: #2a8a64;
    --bs-btn-hover-bg: #227353;
    --bs-btn-hover-border-color: #227353;
    --bs-btn-active-bg: #1a6b4a;
    --bs-btn-active-border-color: #1a6b4a;
    --bs-btn-disabled-bg: #2a8a64;
    --bs-btn-disabled-border-color: #2a8a64;
    --bs-btn-focus-shadow-rgb: 42, 138, 100;
}

.btn-outline-success {
    --bs-btn-color: #1a6b4a;
    --bs-btn-border-color: #2a8a64;
    --bs-btn-hover-bg: #2a8a64;
    --bs-btn-hover-border-color: #2a8a64;
    --bs-btn-active-bg: #227353;
    --bs-btn-active-border-color: #227353;
    --bs-btn-focus-shadow-rgb: 42, 138, 100;
}

.btn-soft-success {
    background-color: rgba(42, 138, 100, 0.08);
    color: #1a6b4a;
    border-color: transparent;
}

.btn-soft-success:hover,
.btn-soft-success:focus {
    background-color: #2a8a64;
    color: #fff;
}

/* Warning: amber fill carries DARK text — white-on-amber fails contrast
   and reads like a danger button */
.btn-warning {
    --bs-btn-color: #17130e;
    --bs-btn-bg: #efa02b;
    --bs-btn-border-color: #efa02b;
    --bs-btn-hover-color: #17130e;
    --bs-btn-hover-bg: #d68c1a;
    --bs-btn-hover-border-color: #d68c1a;
    --bs-btn-active-color: #17130e;
    --bs-btn-active-bg: #c37e14;
    --bs-btn-active-border-color: #c37e14;
    --bs-btn-disabled-color: #17130e;
    --bs-btn-disabled-bg: #efa02b;
    --bs-btn-disabled-border-color: #efa02b;
    --bs-btn-focus-shadow-rgb: 239, 160, 43;
}

.btn-outline-warning {
    --bs-btn-color: #a06508;
    --bs-btn-border-color: #efa02b;
    --bs-btn-hover-color: #17130e;
    --bs-btn-hover-bg: #efa02b;
    --bs-btn-hover-border-color: #efa02b;
    --bs-btn-active-color: #17130e;
    --bs-btn-active-bg: #d68c1a;
    --bs-btn-active-border-color: #d68c1a;
    --bs-btn-focus-shadow-rgb: 239, 160, 43;
}

.btn-soft-warning {
    background-color: rgba(239, 160, 43, 0.14);
    color: #a06508;
    border-color: transparent;
}

.btn-soft-warning:hover,
.btn-soft-warning:focus {
    background-color: #efa02b;
    color: #17130e;
}

/* Info: clinical blue */
.btn-info {
    --bs-btn-bg: #3d74b8;
    --bs-btn-border-color: #3d74b8;
    --bs-btn-hover-bg: #315f9a;
    --bs-btn-hover-border-color: #315f9a;
    --bs-btn-active-bg: #2a5288;
    --bs-btn-active-border-color: #2a5288;
    --bs-btn-disabled-bg: #3d74b8;
    --bs-btn-disabled-border-color: #3d74b8;
    --bs-btn-focus-shadow-rgb: 61, 116, 184;
}

.btn-outline-info {
    --bs-btn-color: #2a5288;
    --bs-btn-border-color: #3d74b8;
    --bs-btn-hover-bg: #3d74b8;
    --bs-btn-hover-border-color: #3d74b8;
    --bs-btn-active-bg: #315f9a;
    --bs-btn-active-border-color: #315f9a;
    --bs-btn-focus-shadow-rgb: 61, 116, 184;
}

.btn-soft-info {
    background-color: rgba(61, 116, 184, 0.08);
    color: #2a5288;
    border-color: transparent;
}

.btn-soft-info:hover,
.btn-soft-info:focus {
    background-color: #3d74b8;
    color: #fff;
}

/* Light / dark neutrals */
.btn-light {
    --bs-btn-color: #2b251c;
    --bs-btn-bg: #f2eee4;
    --bs-btn-border-color: #e8e3d9;
    --bs-btn-hover-color: #17130e;
    --bs-btn-hover-bg: #e8e3d9;
    --bs-btn-hover-border-color: #ddd6c9;
    --bs-btn-active-color: #17130e;
    --bs-btn-active-bg: #ddd6c9;
    --bs-btn-active-border-color: #d3ccbc;
    --bs-btn-focus-shadow-rgb: 216, 208, 194;
}

.btn-outline-light {
    --bs-btn-color: #7d7365;
    --bs-btn-border-color: #e8e3d9;
    --bs-btn-hover-color: #2b251c;
    --bs-btn-hover-bg: #f2eee4;
    --bs-btn-hover-border-color: #e8e3d9;
    --bs-btn-active-color: #17130e;
    --bs-btn-active-bg: #e8e3d9;
    --bs-btn-active-border-color: #ddd6c9;
}

.btn-dark {
    --bs-btn-bg: #251f16;
    --bs-btn-border-color: #251f16;
    --bs-btn-hover-bg: #17130e;
    --bs-btn-hover-border-color: #17130e;
    --bs-btn-active-bg: #17130e;
    --bs-btn-active-border-color: #17130e;
    --bs-btn-focus-shadow-rgb: 37, 31, 22;
}

.btn-outline-dark {
    --bs-btn-color: #251f16;
    --bs-btn-border-color: #251f16;
    --bs-btn-hover-bg: #251f16;
    --bs-btn-hover-border-color: #251f16;
    --bs-btn-active-bg: #17130e;
    --bs-btn-active-border-color: #17130e;
    --bs-btn-focus-shadow-rgb: 37, 31, 22;
}

/* ============================================================
   Badges — soft family re-tints (compiled literals in bootstrap.min.css)
   + the .bg-soft utility variants.
   ============================================================ */

.badge-soft-primary {
    background-color: rgba(200, 65, 10, 0.10);
    color: #a83407;
}

.badge-soft-primary[href]:hover,
.badge-soft-primary[href]:focus {
    background-color: rgba(200, 65, 10, 0.18);
}

/* Sidebar count badges sit on ink in BOTH modes, where the light-surface
   soft values above read faint. One notch up — deliberately shy of the
   solid badges beside them. The ID selector outranks the mode variants. */
#sidebar-menu ul li .badge.badge-soft-primary {
    background-color: rgba(224, 101, 28, 0.26);
    color: #f7b183;
}

.badge-soft-secondary {
    background-color: rgba(125, 115, 101, 0.12);
    color: #5c5347;
}

.badge-soft-success {
    background-color: rgba(42, 138, 100, 0.12);
    color: #1a6b4a;
}

.badge-soft-danger {
    background-color: rgba(194, 41, 69, 0.10);
    color: #a8213a;
}

.badge-soft-warning {
    background-color: rgba(239, 160, 43, 0.16);
    color: #a06508;
}

.badge-soft-info {
    background-color: rgba(61, 116, 184, 0.12);
    color: #2a5288;
}

.badge-soft-dark {
    background-color: rgba(37, 31, 22, 0.12);
    color: #251f16;
}

.badge-soft-light {
    background-color: rgba(242, 238, 228, 0.18);
    color: #f2eee4;
}

.bg-primary.bg-soft { background-color: rgba(200, 65, 10, 0.18) !important; }
.bg-secondary.bg-soft { background-color: rgba(125, 115, 101, 0.20) !important; }
.bg-success.bg-soft { background-color: rgba(42, 138, 100, 0.18) !important; }
.bg-danger.bg-soft { background-color: rgba(194, 41, 69, 0.16) !important; }
.bg-warning.bg-soft { background-color: rgba(239, 160, 43, 0.22) !important; }
.bg-info.bg-soft { background-color: rgba(61, 116, 184, 0.18) !important; }
.bg-light.bg-soft { background-color: rgba(242, 238, 228, 0.25) !important; }
.bg-dark.bg-soft { background-color: rgba(37, 31, 22, 0.20) !important; }

/* Welcome callout (dashboard + practitioner profile): parchment band with
   ochre text — the incandera.com section-band DNA. Dark mode keeps its
   soft-ember tint (re-asserted below; the dark .text-primary lift stays
   in charge of the text there); the h5 resize applies to both modes,
   matching the practitioner-name size beneath the portrait. */
.welcome-callout.bg-soft {
    background-color: #f0eadd !important;
}

.welcome-callout .text-primary {
    color: #9a6511 !important;
}

.welcome-callout h5 {
    font-size: 15px;
}

[data-layout-mode=dark] .welcome-callout.bg-soft {
    background-color: rgba(200, 65, 10, 0.18) !important;
}

/* ============================================================
   Semantic text legibility — amber is never small text on light;
   .text-warning drops to ochre (same family, readable).
   ============================================================ */

.text-warning {
    color: #a06508 !important;
}

/* ============================================================
   Alerts — compiled pastel sets re-derived from the new semantics.
   ============================================================ */

.alert-primary {
    --bs-alert-color: #8a2b06;
    --bs-alert-bg: #fbe7db;
    --bs-alert-border-color: #f6d6c2;
}

.alert-secondary {
    --bs-alert-color: #4a4335;
    --bs-alert-bg: #efebe1;
    --bs-alert-border-color: #e4ddcf;
}

.alert-success {
    --bs-alert-color: #1a6b4a;
    --bs-alert-bg: #def1e8;
    --bs-alert-border-color: #c8e8d9;
}

.alert-danger {
    --bs-alert-color: #8f1e32;
    --bs-alert-bg: #fbe4e8;
    --bs-alert-border-color: #f6d0d8;
}

.alert-warning {
    --bs-alert-color: #8a5a08;
    --bs-alert-bg: #fdf1da;
    --bs-alert-border-color: #f9e5c0;
}

.alert-info {
    --bs-alert-color: #2a5288;
    --bs-alert-bg: #e3ecf7;
    --bs-alert-border-color: #cfdff0;
}

/* ============================================================
   Navs — tabs, custom tabs, pills, checkout rail, pagination.
   ============================================================ */

.nav-tabs {
    --bs-nav-tabs-link-active-color: #a83407;
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: #a83407;
}

.nav-tabs-custom .nav-item .nav-link::after {
    background: #c8410a;
}

.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #c8410a;
}

/* Checkout/wizard rail (view-overrides): light-fill active with side bar */
.checkout-tabs .nav-pills .nav-link.active {
    background-color: rgba(200, 65, 10, 0.08) !important;
    color: #a83407 !important;
    border-left: 4px solid #c8410a;
}

/* Pager: the active page takes a MUTED ember (soft fill, deep text) so
   the pager never competes with the view's one saturated ember action */
.pagination {
    --bs-pagination-hover-color: #a83407;
    --bs-pagination-focus-color: #a83407;
    --bs-pagination-active-color: #a83407;
    --bs-pagination-active-bg: rgba(200, 65, 10, 0.12);
    --bs-pagination-active-border-color: rgba(200, 65, 10, 0.30);
}

[data-layout-mode=dark] .pagination {
    --bs-pagination-active-color: #f39a5e;
    --bs-pagination-active-bg: rgba(224, 101, 28, 0.16);
    --bs-pagination-active-border-color: rgba(224, 101, 28, 0.35);
}

/* ============================================================
   Tables & DataTables — warm the header bars, frame lines, group
   rows, hover feedback, and the chrome under the grid.
   ============================================================ */

/* Control band above the grid (search / entries / buttons / New):
   matches the topbar band tone — sits better than the residual gray */
.dataTables_wrapper .top {
    background-color: #f0eadd;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
    background-color: #f3efe6;
}

.dataTables_wrapper table.dataTable {
    border-bottom-color: #eae3d5;
}

.dataTables_wrapper .bottom {
    background-color: #f5f1e8;
    border-top-color: #e6dfd0;
}

/* Data-table links: ink at rest, ember on hover. A column of ember-deep
   names reads as a column of alerts — the exact anti-goal. Interaction,
   not rest state, carries the accent. Buttons rendered as anchors
   (.btn) keep their own component colors. */
table.dataTable tbody a:not(.btn) {
    color: #2b251c;
    font-weight: 500;
}

table.dataTable tbody a:not(.btn):hover {
    color: #a83407;
}

[data-layout-mode=dark] table.dataTable tbody a:not(.btn) {
    color: #e8e1d3;
}

[data-layout-mode=dark] table.dataTable tbody a:not(.btn):hover {
    color: #f39a5e;
}

/* Row hover: a whisper of ember warmth — pointer feedback, not alarm.
   The wash was originally 0.04, which computes to a 1.06 contrast ratio
   against a white row — below Serenity's 1.09 blue-grey, so in practice
   only the two border rules read as the hover and the fill vanished.
   0.09 lands at 1.14. That sits deliberately a little above Serenity's
   ratio: this is a warm tint on a warm field, which separates less
   readily than Serenity's cool tint on white, so matching the number
   exactly would still under-read. */
table.dataTable tbody tr:hover > td {
    background-color: rgba(200, 65, 10, 0.06);
    border-top: 1px solid rgba(200, 65, 10, 0.15);
    border-bottom: 1px solid rgba(200, 65, 10, 0.15);
}

/* DataTables stamps every custom button with a default btn-secondary
   alongside the view's className; when a view opts a button into
   btn-primary (the "New"/primary action), primary must win the var tie
   in both modes. */
.dt-buttons .btn.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #c8410a;
    --bs-btn-border-color: #c8410a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a83407;
    --bs-btn-hover-border-color: #a83407;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8a2b06;
    --bs-btn-active-border-color: #8a2b06;
    --bs-btn-focus-shadow-rgb: 200, 65, 10;
}

/* ColVis dropdown checkmarks */
.dt-button-collection .dt-button.active::after,
.dt-button-collection .dt-button:not(.disabled).active::after {
    color: #a83407;
}

/* Grouped-row hierarchy (Forms/All etc.): patient level keeps a clinical
   blue tint (distinct identity band); referral/TR levels go warm neutral */
.group-header td {
    border-bottom-color: #ddd6c9;
}

.group-patient td {
    background-color: #e7eef8;
}

.group-referral td {
    background-color: #f2ede2;
}

.group-tr td {
    background-color: #f8f4ec;
}

/* Modal footer band */
.modal-footer-colored {
    background-color: #f2eee4;
}

/* Sidebar "toolbox" cards (Referrals/New, Patients/New, Forms) */
.card-toolbox {
    background-color: #f6f2e9;
}

.card-toolbox .accordion-button:not(.collapsed) {
    background-color: rgba(200, 65, 10, 0.08) !important;
    color: #a83407 !important;
}

/* ============================================================
   Forms — checked controls, focus, validation, select2, dropzones.
   ============================================================ */

.form-check-input:checked {
    background-color: #c8410a;
    border-color: #c8410a;
}

.form-check-primary .form-check-input:checked,
.form-radio-primary .form-check-input:checked {
    background-color: #c8410a;
    border-color: #c8410a;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-input-focus-border-color);
    box-shadow: 0 0 0 0.15rem rgba(200, 65, 10, 0.12);
}

/* Validation: crimson error / module-green success, icons re-tinted */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #c22945;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c22945'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c22945' stroke='none'/%3e%3c/svg%3e");
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: #c22945;
    box-shadow: 0 0 0 0.15rem rgba(194, 41, 69, 0.15);
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: #c22945;
}

.invalid-feedback,
.invalid-tooltip {
    color: #a8213a;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #2a8a64;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232a8a64' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: #2a8a64;
}

.valid-feedback {
    color: #1a6b4a;
}

/* select2: highlight follows the brand, chips go warm */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #c8410a;
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f2ede2;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f2eee4;
    border-color: #ddd6c9;
}

/* Profile image dropzone + keylink drop targets */
.profile-image-dropzone:hover,
.profile-image-dropzone-hover {
    border-color: #c8410a !important;
    background-color: rgba(200, 65, 10, 0.05);
}

.keylinks-drop-active {
    outline-color: #c8410a;
    background-color: rgba(200, 65, 10, 0.05);
}

/* ============================================================
   List-group selection (Create Form modal patient/TR picker etc.):
   compiled active state is a saturated indigo fill; the brand
   treatment is a soft ember tint with ink text — selection, not alarm.
   ============================================================ */

.list-group {
    --bs-list-group-active-color: #17130e;
    --bs-list-group-active-bg: #f7e8dd;
    --bs-list-group-active-border-color: #ecd3bf;
}

[data-layout-mode=dark] .list-group {
    --bs-list-group-active-color: #f1ece1;
    --bs-list-group-active-bg: rgba(224, 101, 28, 0.18);
    --bs-list-group-active-border-color: rgba(224, 101, 28, 0.32);
}

/* ============================================================
   Dropdowns & topbar search — warm hover/active surfaces.
   ============================================================ */

.dropdown-menu {
    --bs-dropdown-link-active-bg: #f2ede2;
    --bs-dropdown-link-active-color: #17130e;
}

/* Global search dropdown (topbar) */
.header-search-dropdown {
    border-color: #ddd6c9;
}

.search-category-header {
    background-color: #f6f2e9;
    border-bottom-color: #ddd6c9;
}

.search-result-item {
    border-bottom-color: #efeae0;
}

.search-result-item:hover,
.search-result-item.active {
    background-color: rgba(200, 65, 10, 0.07);
}

.search-result-icon {
    background-color: #f2ede2;
    color: #a83407;
}

#app-search-clear {
    color: #a83407 !important;
}

/* ============================================================
   Toastr — the four semantic toasts follow the new accent set.
   ============================================================ */

#toast-container > .toast-success { background-color: #2a8a64 !important; }
#toast-container > .toast-error { background-color: #c22945 !important; }
#toast-container > .toast-info { background-color: #3d74b8 !important; }
#toast-container > .toast-warning { background-color: #d68c1a !important; }

/* ============================================================
   Viewport footer — product names echo the copyright's weight;
   the version marks glow amber.
   ============================================================ */

.footer a {
    color: var(--bs-footer-color);
}

.footer .footer-brand-word {
    color: #464034;
    font-weight: 600;
}

.footer .footer-v5 {
    color: #c37e14;
    font-weight: 600;
}

[data-layout-mode=dark] .footer .footer-brand-word {
    color: #d6cdbd;
}

[data-layout-mode=dark] .footer .footer-v5 {
    color: #efa02b;
}

/* ============================================================
   Calendar (TUI) accents.
   ============================================================ */

.tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-more-schedules {
    color: #a83407 !important;
    background-color: #f2ede2 !important;
}

.lnb-new-schedule-link {
    color: #a83407;
}

/* ============================================================
   Sidebar — cool navy → warm ink. The brand box and menu text warm
   up with it; ember/amber take over the active accents.
   ============================================================ */

body[data-sidebar=dark] .vertical-menu,
body[data-sidebar=dark] .navbar-brand-box {
    background-color: #17130e;
}

body[data-sidebar=dark] #sidebar-menu ul li a {
    color: #a89e90;
}

body[data-sidebar=dark] #sidebar-menu ul li a i {
    color: #a89e90;
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover,
body[data-sidebar=dark] #sidebar-menu ul li a:hover i {
    color: #f7f3eb;
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
    color: #968c7e;
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #f7f3eb;
}

/* Active trail: paper text, amber icon — the "lit" item */
body[data-sidebar=dark] .mm-active,
body[data-sidebar=dark] .mm-active > a,
body[data-sidebar=dark] .mm-active > a i,
body[data-sidebar=dark] .mm-active .active,
body[data-sidebar=dark] .mm-active .active i {
    color: #f7f3eb !important;
}

body[data-sidebar=dark] .mm-active > a i,
body[data-sidebar=dark] .mm-active .active i {
    color: #efa02b !important;
}

body[data-sidebar=dark] .menu-title {
    color: #7d7365;
}

/* Sidebar personal-section count badges: keep readable on warm ink */
.vertical-menu .badge.badge-soft-primary {
    background-color: rgba(239, 160, 43, 0.16);
    color: #efa02b;
}

/* Sidebar greeting: let the name pop in paper (the flex-eaten space
   after "Hey," is restored theme-neutrally in view-overrides.css). */
.menu-title-centered-line strong {
    color: #f7f3eb;
}

/* Tenant name at the sidebar foot: a quiet amber signature. Scoped to match
   view-overrides' serenity fallback so this (later) rule wins the tie. */
body[data-sidebar=dark] .vertical-menu .sidebar-tenant-name {
    color: #efa02b;
    letter-spacing: 0.05em;
}

/* Sidebar count badges — optical centering. The badge's line-height:1
   sizes the text box to the font's em-square, which reserves descender
   space below the baseline that digits never use, so glyphs sit high of
   geometric center: ~0.04em more top than bottom padding pushes them to
   the optical center. Horizontally, the old override set only
   padding-left (0.48em) against Bootstrap's default 0.4em right — the
   asymmetry was the rule itself; this restores symmetry. Values are the
   DevTools-tuned optical set for DM Sans digits. */
/* (The optical padding rule itself moved to view-overrides.css —
   geometry, not color; both themes get it.) */

/* ============================================================
   Brand mark — inline SVG + wordmark in the header and login.
   ============================================================ */

/* The base .brand-inc mark styles live in view-overrides.css — the logo is
   brand, not theme, and must render identically under Serenity. */

/* ============================================================
   Login — the showcase moment: warm ink backdrop, ember radial
   glow, and a large faint ember-mark ring as the brand-owned hero
   motif behind the testimonial pane. Warm paper form panel.
   ============================================================ */

/* Layers, top to bottom: giant ember-mark glyph top-left (echoing the
   old Skote-glyph composition — semi-transparent, cropped by the
   corner), a bottom scrim for the testimonial text, the incandescence
   hero photo, paper fallback. */
.auth-full-bg {
    background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3ccircle cx='32' cy='32' r='21' fill='none' stroke='%23a83407' stroke-opacity='0.25' stroke-width='7' stroke-linecap='round' stroke-dasharray='106 200' transform='rotate(-10 32 32)'/%3e%3ccircle cx='46.9' cy='17.1' r='11' fill='%23c8410a' fill-opacity='0.18'/%3e%3ccircle cx='46.9' cy='17.1' r='7' fill='%23c8410a' fill-opacity='0.45'/%3e%3c/svg%3e") no-repeat -170px -60px / 720px 720px,
        linear-gradient(to top, rgba(23, 19, 14, 0.60), rgba(23, 19, 14, 0.18) 38%, transparent 60%),
        url('/images/bg-auth-light-incandescence.jpg') center / cover no-repeat,
        #f7f3eb;
}

.auth-full-bg .bg-overlay {
    background: transparent;
}

.auth-full-bg::before {
    display: none;
}

.auth-full-page-content {
    background-color: #f0eadd;
}

/* Dark layout mode: view-overrides pins the OLD hero image
   (bg-auth.jpg) onto .auth-full-bg with a dark-scoped rule; re-assert
   the incandescence night hero. !important matches theirs on
   background-color. The glyph flips to a paper stroke with an
   ember-bright dot against the dark sky. */
[data-layout-mode=dark] .auth-full-bg {
    background:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3ccircle cx='32' cy='32' r='21' fill='none' stroke='%23f7f3eb' stroke-opacity='0.10' stroke-width='7' stroke-linecap='round' stroke-dasharray='106 200' transform='rotate(-10 32 32)'/%3e%3ccircle cx='46.9' cy='17.1' r='11' fill='%23e0651c' fill-opacity='0.15'/%3e%3ccircle cx='46.9' cy='17.1' r='7' fill='%23e0651c' fill-opacity='0.40'/%3e%3c/svg%3e") no-repeat -170px -60px / 720px 720px,
        linear-gradient(to top, rgba(10, 8, 5, 0.65), transparent 55%),
        url('/images/bg-auth-incandescence.jpg') center / cover no-repeat,
        #17130e !important;
}

/* Dark layout mode: the auth logo's ink ring and wordmark disappear on
   the dark panel — flip them to paper. (CSS stroke wins over the SVG
   presentation attribute; the gradient dot has no stroke and is
   untouched.) */
[data-layout-mode=dark] .auth-logo .brand-inc .brand-inc-word {
    color: #f7f3eb;
}

[data-layout-mode=dark] .auth-logo .brand-inc svg circle[stroke] {
    stroke: #f7f3eb;
}

/* Testimonial carousel dots — compiled owl theme carries the old indigo */
.auth-review-carousel .owl-dot span {
    background: rgba(247, 243, 235, 0.30) !important;
}

.auth-review-carousel .owl-dot.active span {
    background: #efa02b !important;
}

/* ============================================================
   Selection — matches the brand.
   ============================================================ */

::selection {
    background: #c8410a;
    color: #fffdf8;
}

/* ============================================================
   Compiled component tail — Skote components in app.min.css carry
   indigo literals that no token reaches; retune the ones R5 uses.
   ============================================================ */

/* Stat-card icon circles (dashboard mini-stats and avatar chips) */
.avatar-title {
    background-color: #c8410a;
}

/* Mini-stat counters are read, not clicked — the ember circle read as a
   CTA competing with the real buttons on the dashboard and practitioner
   profile. Muted bronze demotes the disc to a container so the numeral
   carries the emphasis. Scoped to .mini-stat-icon so the bg-soft avatar
   chips elsewhere are untouched.

   .stat-icons-vivid opts a card row back out: where the circles are the only
   color in the band (Reference Data's six cards) they do structural work
   holding the row together, and muting flattens it. */
.row:not(.stat-icons-vivid) .mini-stat-icon .avatar-title {
    background-color: #886e47;
}

/* Targets both the pre-render <i data-lucide> and the rendered svg.lucide —
   Lucide replaces the element and renames the attribute to
   data-lucide-rendered, so a [data-lucide] selector alone stops matching. */
.row:not(.stat-icons-vivid) .mini-stat-icon .avatar-title svg.lucide,
.row:not(.stat-icons-vivid) .mini-stat-icon .avatar-title [data-lucide] {
    opacity: 0.65;
}

/* Light-mode .table-light header bands (Latest Invoices etc.) */
.table-light {
    --bs-table-color: #251f16;
    --bs-table-bg: #f3efe6;
    --bs-table-border-color: #ddd6c9;
    --bs-table-striped-bg: #ece7db;
    --bs-table-striped-color: #251f16;
    --bs-table-active-bg: #e6e0d3;
    --bs-table-active-color: #251f16;
    --bs-table-hover-bg: #e9e3d6;
    --bs-table-hover-color: #251f16;
}

/* ============================================================
   Collapsed-sidebar flyouts.
   When the sidebar is icon-only, hovering a section opens a floating
   submenu panel. Those panels are styled by a separate
   `body[data-sidebar=dark].vertical-collpsed` block in app.css that the
   expanded-sidebar overrides above never reach, so they kept the compiled
   Serenity navy (#2a3042 panel, #2e3548 hover row, #79829c link text)
   against the warm ink rail. Same palette as the expanded menu, so the
   two states agree.
   ============================================================ */

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
    color: #e0651c;
}

/* The hover row on the rail itself (the labelled bar beside the icon) */
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    background: #241e16;
    color: #f7f3eb;
}

body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
    color: #e0651c;
}

/* The floating panel — both the first level and any nested level */
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    background-color: #1d1811;
}

/* Panel links: same warm muted tone as the expanded sub-menu */
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    color: #968c7e;
}

body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
    color: #f7f3eb;
}

/* Panel shadow: the compiled one is a cool blue-grey (54, 61, 71) that
   reads as a halo against warm ink. Warm it and deepen it. */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul ul {
    box-shadow: -3px 5px 14px 0 rgba(23, 19, 14, 0.45);
}

/* Active item inside a flyout: paper text + amber icon, matching the
   expanded menu's "lit" treatment. app.css sets these to #ffffff with
   !important, so these have to carry it too. */
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
    color: #f7f3eb !important;
}

body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active i {
    color: #efa02b !important;
}

/* The non-dark base rule also targets .active links in a flyout with a
   near-white that is not the brand paper tone. */
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul li.active a {
    color: #f7f3eb;
}

/* Ripple + spinner accents */
.waves-effect.waves-primary .waves-ripple {
    background-color: rgba(200, 65, 10, 0.4);
}

.chase-dot:before {
    background-color: #c8410a;
}

/* Card-radio pickers */
.card-radio-input:checked + .card-radio {
    border-color: #c8410a !important;
}

/* Bootstrap-toast primary frame (notification popups) */
.toast-primary {
    border-color: #c8410a !important;
    background-color: rgba(200, 65, 10, 0.85) !important;
}

/* select2: hover on an already-selected option kept a compiled indigo */
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: #c8410a;
    color: #fff;
}

/* Legacy switch inputs (input[switch]) */
input[switch]:checked + label,
input[switch=primary]:checked + label {
    background-color: #c8410a;
}

/* Time/date pickers */
.bootstrap-timepicker-widget table td a:hover {
    color: #a83407;
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background-color: #c8410a !important;
}

.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
    background-color: rgba(200, 65, 10, 0.15);
    color: #a83407;
}

.datepicker-panel > ul > li.highlighted,
.datepicker-panel > ul > li.highlighted:hover,
.datepicker-panel > ul > li:hover {
    background-color: #c8410a;
    color: #fff;
}

/* Multi-step wizard (Patients/New, Referrals/New): lit current step */
.wizard .steps .number {
    color: #a83407;
    border-color: rgba(200, 65, 10, 0.35);
}

.wizard .steps .current a,
.wizard .steps .current a:active,
.wizard .steps .current a:hover {
    background-color: rgba(200, 65, 10, 0.10);
    color: #a83407;
}

.wizard .steps .current a .number,
.wizard .steps .current a:active .number,
.wizard .steps .current a:hover .number {
    background-color: #c8410a;
    border-color: #c8410a;
    color: #fff;
}

.wizard > .actions a,
.wizard > .actions a:active,
.wizard > .actions a:hover {
    background-color: #c8410a;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:active,
.wizard > .actions .disabled a:hover {
    background-color: #c8410a;
    opacity: 0.55;
}

/* Responsive DataTables row-expand control */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: #c8410a;
}

/* Chat bubbles (conversation views) */
.chat-conversation .conversation-list .ctext-wrap {
    background-color: rgba(200, 65, 10, 0.08);
}

.chat-conversation .conversation-list .ctext-wrap .conversation-name,
.chat-conversation .last-chat .conversation-list:before {
    color: #a83407;
}

/* Activity timeline dots. (Do NOT retint .profile-user-wid — it is a
   transparent portrait wrapper on the dashboard/profile cards; Skote's
   indigo on it applies only to a media-query carousel arrow.) */
.verti-timeline .event-list.active .event-timeline-dot {
    color: #c8410a;
}

/* FullCalendar accents (legacy calendar bits) */
.fc-event-dot {
    background-color: #c8410a;
}

/* ============================================================
   DARK MODE — the warm-ink evolution. Mirrors the navy ramp in
   app.css ([data-layout-mode=dark] token block + ~39 targeted
   selectors) with ink/ember values; view-overrides' dark rules are
   mostly white-alpha overlays and inherit the warmth automatically.
   ============================================================ */

[data-layout-mode=dark] {
    /* Dark redefines for the theme indirection vars (see :root). Only the
       accent family varies by mode — the sweep kept chart palettes and
       warm-tint surfaces mode-independent. */
    --r5-accent: #e0651c;
    --r5-accent-soft: rgba(224, 101, 28, 0.14);
    --r5-accent-softer: rgba(224, 101, 28, 0.08);

    --bs-gray-100: #201a13;
    --bs-gray-200: #2c251b;
    --bs-gray-300: #3a3123;
    --bs-gray-400: #a19682;
    --bs-gray-500: #b6ab97;
    --bs-gray-600: #c6bba6;
    --bs-gray-700: #f1ece1;
    --bs-gray-800: #f6f2ea;
    --bs-gray-900: #faf7f0;
    --bs-body-bg: #1b1712;
    --bs-body-bg-rgb: rgb(27, 23, 18);
    --bs-body-color: #b8ad99;
    --bs-body-color-rgb: 184, 173, 153;
    --bs-heading-color: #f1ece1;
    --bs-border-color: #3a3123;
    --bs-custom-white: #241e16;
    --bs-input-border-color: #3a3123;
    --bs-input-focus-border-color: #5a4a30;
    --bs-hr-border-color: #3a3123;
    --bs-form-check-input-border: #4a3f2c;
    --bs-light: #3a3123;
    --bs-light-rgb: 58, 49, 35;
    --bs-dark: #f1ece1;
    --bs-dark-rgb: 241, 236, 225;
    --bs-heading-bg: #211b14;
    --bs-header-item-color: #b8ad99;
    --bs-topbar-search-bg: #2c251b;
    --bs-heading-dark-bg: #c8410a;
    --bs-boxed-body-bg: #2c251b;
    --bs-topnav-bg: #251f17;
    --bs-menu-item-color: #a19682;
    --bs-footer-bg: #211b14;
    --bs-footer-color: #a19682;
    --bs-focus-ring-color: rgba(224, 101, 28, 0.25);
}

/* Surfaces: cards sit one step above the body; popovers one more */
[data-layout-mode=dark] .card {
    --bs-card-bg: #241e16;
}

[data-layout-mode=dark] .modal {
    --bs-modal-bg: #241e16;
}

[data-layout-mode=dark] .offcanvas,
[data-layout-mode=dark] .offcanvas-lg,
[data-layout-mode=dark] .offcanvas-md,
[data-layout-mode=dark] .offcanvas-sm,
[data-layout-mode=dark] .offcanvas-xl,
[data-layout-mode=dark] .offcanvas-xxl {
    --bs-offcanvas-bg: #241e16;
}

[data-layout-mode=dark] .list-group {
    --bs-list-group-bg: #241e16;
    --bs-list-group-color: #f1ece1;
    --bs-list-group-border-color: #3a3123;
}

[data-layout-mode=dark] .dropdown-menu {
    --bs-dropdown-bg: #2a231a;
    --bs-dropdown-link-color: #b8ad99;
    --bs-dropdown-border-color: #3a3123;
    --bs-dropdown-divider-bg: #3a3123;
    --bs-dropdown-link-hover-bg: #3a3123;
    --bs-dropdown-link-hover-color: #f1ece1;
    --bs-dropdown-link-active-bg: #3a3123;
    --bs-dropdown-link-active-color: #f1ece1;
}

[data-layout-mode=dark] .toast {
    --bs-toast-header-bg: #2a231a;
    --bs-toast-header-color: #c6bba6;
    --bs-toast-bg: #2a231a;
}

/* Neutral buttons on ink */
[data-layout-mode=dark] .btn-light {
    --bs-btn-color: #c6bba6;
    --bs-btn-bg: #3a3123;
    --bs-btn-border-color: #3a3123;
}

[data-layout-mode=dark] .btn-outline-light {
    --bs-btn-color: #c6bba6;
    --bs-btn-border-color: #3a3123;
}

[data-layout-mode=dark] .btn-light,
[data-layout-mode=dark] .btn-outline-light {
    --bs-btn-hover-color: #f1ece1;
    --bs-btn-hover-bg: #453b2a;
    --bs-btn-hover-border-color: #453b2a;
    --bs-btn-active-color: #f1ece1;
    --bs-btn-active-bg: #453b2a;
    --bs-btn-active-border-color: #453b2a;
    --bs-btn-focus-shadow-rgb: 58, 49, 35;
}

[data-layout-mode=dark] .btn-dark {
    --bs-btn-color: #1b1712;
    --bs-btn-bg: #b6ab97;
    --bs-btn-border-color: #b6ab97;
    --bs-btn-hover-bg: #c6bba6;
}

[data-layout-mode=dark] .btn-outline-dark {
    --bs-btn-color: #b6ab97;
    --bs-btn-border-color: #b6ab97;
}

[data-layout-mode=dark] .btn-dark,
[data-layout-mode=dark] .btn-outline-dark {
    --bs-btn-hover-color: #1b1712;
    --bs-btn-hover-bg: #c6bba6;
    --bs-btn-hover-border-color: #c6bba6;
    --bs-btn-active-bg: #c6bba6;
    --bs-btn-active-border-color: #c6bba6;
    --bs-btn-focus-shadow-rgb: 198, 187, 166;
}

/* Tabs & accordions: active accents shift to ember-bright (reads better
   on ink than full-saturation ember) */
[data-layout-mode=dark] .nav-tabs {
    --bs-nav-tabs-link-active-bg: #241e16;
    --bs-nav-tabs-link-active-border-color: #4a3f2c;
    --bs-nav-tabs-border-color: #4a3f2c;
    --bs-nav-tabs-link-hover-border-color: #4a3f2c;
    --bs-nav-tabs-link-active-color: #e0651c;
}

[data-layout-mode=dark] .nav-tabs-custom .nav-item .nav-link.active {
    color: #e0651c;
}

[data-layout-mode=dark] .nav-tabs-custom .nav-item .nav-link::after {
    background: #e0651c;
}

[data-layout-mode=dark] .accordion {
    --bs-accordion-active-bg: rgba(224, 101, 28, 0.10);
}

[data-layout-mode=dark] .checkout-tabs .nav-pills .nav-link.active {
    background-color: rgba(224, 101, 28, 0.12) !important;
    color: #f39a5e !important;
    border-left-color: #e0651c;
}

/* Tables: warm-alpha stripes and frames */
[data-layout-mode=dark] .table {
    --bs-table-striped-bg: rgba(214, 199, 176, 0.04);
    --bs-table-hover-bg: rgba(214, 199, 176, 0.05);
    --bs-table-active-bg: rgba(214, 199, 176, 0.05);
}

[data-layout-mode=dark] .table-light {
    --bs-table-color: #b8ad99;
    --bs-table-bg: #3a3123;
    --bs-table-border-color: #3a3123;
}

[data-layout-mode=dark] .table-dark {
    --bs-table-color: #b8ad99;
    --bs-table-bg: #3a3123;
    --bs-table-border-color: #4a3f2c;
}

[data-layout-mode=dark] table.dataTable tbody tr:hover > td {
    background-color: rgba(224, 101, 28, 0.05);
    border-top-color: rgba(224, 101, 28, 0.18);
    border-bottom-color: rgba(224, 101, 28, 0.18);
}

/* Grouped-row hierarchy on ink */
[data-layout-mode=dark] .group-patient td {
    background-color: rgba(61, 116, 184, 0.16);
    color: #a8c6e8;
}

[data-layout-mode=dark] .group-referral td {
    background-color: rgba(214, 199, 176, 0.08);
    color: #d6cdbd;
}

[data-layout-mode=dark] .group-tr td {
    background-color: rgba(214, 199, 176, 0.04);
    color: #c6bba6;
}

/* Alerts on ink: low-alpha fills, brightened text */
[data-layout-mode=dark] .alert-primary {
    background-color: rgba(224, 101, 28, 0.12);
    border-color: rgba(224, 101, 28, 0.22);
    color: #f0a061;
}

[data-layout-mode=dark] .alert-secondary {
    background-color: rgba(168, 157, 140, 0.12);
    border-color: rgba(168, 157, 140, 0.20);
    color: #b6ab97;
}

[data-layout-mode=dark] .alert-success {
    background-color: rgba(42, 138, 100, 0.14);
    border-color: rgba(42, 138, 100, 0.25);
    color: #6cc4a1;
}

[data-layout-mode=dark] .alert-danger {
    background-color: rgba(194, 41, 69, 0.14);
    border-color: rgba(194, 41, 69, 0.25);
    color: #e78ba0;
}

[data-layout-mode=dark] .alert-warning {
    background-color: rgba(239, 160, 43, 0.12);
    border-color: rgba(239, 160, 43, 0.22);
    color: #ecc27a;
}

[data-layout-mode=dark] .alert-info {
    background-color: rgba(61, 116, 184, 0.14);
    border-color: rgba(61, 116, 184, 0.25);
    color: #8fb3e0;
}

/* Semantic text: lightened variants for legibility on ink */
[data-layout-mode=dark] .text-danger { color: #e46a83 !important; }
[data-layout-mode=dark] .text-success { color: #4fbf93 !important; }
[data-layout-mode=dark] .text-info { color: #7fa8d9 !important; }
[data-layout-mode=dark] .text-warning { color: #f2b04a !important; }
[data-layout-mode=dark] .text-primary { color: #f39a5e !important; }

/* Soft badges brighten their text on ink */
[data-layout-mode=dark] .badge-soft-primary { color: #f39a5e; background-color: rgba(224, 101, 28, 0.16); }
[data-layout-mode=dark] .badge-soft-secondary { color: #b6ab97; background-color: rgba(168, 157, 140, 0.16); }
[data-layout-mode=dark] .badge-soft-success { color: #6cc4a1; background-color: rgba(42, 138, 100, 0.18); }
[data-layout-mode=dark] .badge-soft-danger { color: #e78ba0; background-color: rgba(194, 41, 69, 0.16); }
[data-layout-mode=dark] .badge-soft-warning { color: #ecc27a; background-color: rgba(239, 160, 43, 0.16); }
[data-layout-mode=dark] .badge-soft-info { color: #8fb3e0; background-color: rgba(61, 116, 184, 0.18); }
[data-layout-mode=dark] .badge-soft-dark { color: #f1ece1; background-color: rgba(241, 236, 225, 0.14); }

/* Search dropdown, toolbox, dropzone accents — indigo leftovers → ember */
[data-layout-mode=dark] .card-toolbox .accordion-button:not(.collapsed) {
    background-color: rgba(224, 101, 28, 0.14) !important;
    color: #f39a5e !important;
}

[data-layout-mode=dark] .search-result-item:hover,
[data-layout-mode=dark] .search-result-item.active {
    background-color: rgba(224, 101, 28, 0.14);
}

[data-layout-mode=dark] .profile-image-dropzone:hover,
[data-layout-mode=dark] .profile-image-dropzone-hover {
    background-color: rgba(224, 101, 28, 0.10);
}

/* Quill toolbar active state */
[data-layout-mode=dark] .ql-toolbar button:hover .ql-stroke,
[data-layout-mode=dark] .ql-toolbar button.ql-active .ql-stroke {
    stroke: #e0651c;
}

[data-layout-mode=dark] .ql-toolbar button:hover .ql-fill,
[data-layout-mode=dark] .ql-toolbar button.ql-active .ql-fill {
    fill: #e0651c;
}

/* bootstrap-datepicker popup caret: the popup itself themes via
   .dropdown-menu vars, but the caret triangle is a literal white
   border in the lib CSS — match it to the dark popup surface with a
   hairline outline. */
[data-layout-mode=dark] .datepicker-dropdown::before {
    border-bottom-color: #3a3123;
}

[data-layout-mode=dark] .datepicker-dropdown::after {
    border-bottom-color: #2a231a;
}

[data-layout-mode=dark] .datepicker-dropdown.datepicker-orient-top::before {
    border-top-color: #3a3123;
}

[data-layout-mode=dark] .datepicker-dropdown.datepicker-orient-top::after {
    border-top-color: #2a231a;
}

/* TUI calendar "N more" on ink */
[data-layout-mode=dark] .tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-more-schedules {
    color: #f39a5e !important;
    background-color: rgba(224, 101, 28, 0.15) !important;
}

/* Login panel in dark layout keeps its warm surface, one step up from ink */
[data-layout-mode=dark] .auth-full-page-content {
    background-color: #241e16;
}