/*
    Incandera Revolution
    Version: R5
    View overrides/fixes CSS
*/

/* ============================================================
   Visual language tokens and global tweaks.
   Shifts the original reference admin template toward a calmer,
   more current look: hairline borders instead of card shadows,
   warmer neutral border tone, desaturated brand hue, low-alpha
   soft badges, heavier headings, slightly larger body text.
   ============================================================ */

:root {
    /* Warm, slightly desaturated neutral border tone (replaces #eff2f7) */
    --bs-border-color: #e9eaec;
    --bs-gray-200: #e9eaec;

    /* Desaturated brand — keeps indigo identity, drops template-y saturation */
    --bs-primary: #5365cf;
    --bs-primary-rgb: 83, 101, 207;
    --bs-link-color: #5365cf;
    --bs-link-color-rgb: 83, 101, 207;
    --bs-link-hover-color: #424ea6;
    --bs-blue: #5365cf;

    /* Page bg: keep a meaningful delta from white card bg so hairline-bordered
       cards pop without shadows. */
    --bs-body-bg: #f6f7f9;
    --bs-body-bg-rgb: 246, 247, 249;

    /* Callout/emphasis border for sidebar "toolbox" cards and equivalent
       framed regions. Named for role, not color, so the hue can be retuned
       without renaming the token. */
    --accent-callout: #f1d5db;

    /* UI sans stack — Geist Sans is loaded by the layout files. Inter is the
       battle-tested fallback; system-ui covers the rest. Overrides Bootstrap's
       `--bs-font-sans-serif: "Poppins", sans-serif` (bootstrap.css). Hind
       Siliguri is kept for form-action / patient-facing views (see
       form-actions.css) — do not mass-replace. */
    --bs-font-sans-serif: "Geist", "Inter", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Body: 14px is the modern admin baseline (Linear, Vercel, GitHub, shadcn).
   Up from 13.5px / Reference admin template default 13px. */
body {
    font-size: 0.875rem;
}

/* Heading scale tightened from Bootstrap default (32.5/26/22.75/19.5/16.25/13)
   to a five-step scale with clear jumps and weight 600 throughout. */
h1, .h1 { font-size: 1.75rem; font-weight: 600; }   /* 28px */
h2, .h2 { font-size: 1.375rem; font-weight: 600; }  /* 22px */
h3, .h3 { font-size: 1.125rem; font-weight: 600; }  /* 18px */
h4, .h4 { font-size: 0.9375rem; font-weight: 600; } /* 15px */
h5, .h5 { font-size: 0.8125rem; font-weight: 600; } /* 13px */
h6, .h6 { font-weight: 600; }

/* Modal titles — anchor every modal at h3 weight regardless of which heading
   element the markup uses (.modal-title is the stable Bootstrap hook). */
.modal-title { font-size: 1.125rem; font-weight: 600; }

/* Page title — Reference admin template's `.page-title-box h4` rule (in app.css) 
   sets weight 100 uppercase letterspaced on the page heading. Override to confident 
   sentence case at 26px / 600. Targets both h1 and h4 because views vary on which
   heading element they use inside `.page-title-box`. */
.page-title-box h1,
.page-title-box h4 {
    font-size: 1.625rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Modal tabs (`.nav-tabs-custom`): keep the tab label and the validation-error
   count badge on a single line. TabValidationIndicator (views-common-utils.js)
   appends the badge after the title span; without nowrap on the link itself,
   the badge wraps below the title in narrower modals. */
.nav-tabs-custom .nav-link {
    white-space: nowrap;
}

/* Hairline border on cards. Bootstrap's `.card` has `--bs-card-border-width: 0`
   by default — this rule re-introduces a 1px border using the warm neutral
   from `--bs-border-color`. Card shadow rules are zeroed out at their source
   locations further down in this file (alpha set to 0.00). */
.card {
    border: 1px solid var(--bs-border-color);
}

/* Drop chrome-surface shadows too (sidebar, topnav, navbar-header,
   layout-wrapper). The hairline border on `--bs-border-color` carries the
   structure now. */
.vertical-menu,
.topnav,
.navbar-header,
#layout-wrapper {
    box-shadow: none;
}

/* Page topbar — remove the pink bottom-accent border. It read as personality
   on the old indigo palette but fights the warmer neutral. The default
   border-color on adjacent surfaces does the separation now. */
#page-topbar::after {
    display: none;
}

/* Soft badges — drop alpha from 18% to 10%, lighten hover from 40% to 18% */
.badge-soft-primary {
    background-color: rgba(83, 101, 207, 0.10);
    color: #5365cf;
}
.badge-soft-primary[href]:hover,
.badge-soft-primary[href]:focus {
    background-color: rgba(83, 101, 207, 0.18);
}
.badge-soft-secondary {
    background-color: rgba(116, 120, 141, 0.10);
}
.badge-soft-secondary[href]:hover,
.badge-soft-secondary[href]:focus {
    background-color: rgba(116, 120, 141, 0.18);
}
.badge-soft-success {
    background-color: rgba(52, 195, 143, 0.10);
}
.badge-soft-success[href]:hover,
.badge-soft-success[href]:focus {
    background-color: rgba(52, 195, 143, 0.18);
}
.badge-soft-info {
    background-color: rgba(80, 165, 241, 0.10);
}
.badge-soft-info[href]:hover,
.badge-soft-info[href]:focus {
    background-color: rgba(80, 165, 241, 0.18);
}
.badge-soft-warning {
    background-color: rgba(241, 180, 76, 0.10);
}
.badge-soft-warning[href]:hover,
.badge-soft-warning[href]:focus {
    background-color: rgba(241, 180, 76, 0.18);
}
.badge-soft-danger {
    background-color: rgba(244, 106, 106, 0.10);
}
.badge-soft-danger[href]:hover,
.badge-soft-danger[href]:focus {
    background-color: rgba(244, 106, 106, 0.18);
}
.badge-soft-pink {
    background-color: rgba(232, 62, 140, 0.10);
}
.badge-soft-pink[href]:hover,
.badge-soft-pink[href]:focus {
    background-color: rgba(232, 62, 140, 0.18);
}
.badge-soft-dark {
    background-color: rgba(52, 58, 64, 0.10);
}
.badge-soft-dark[href]:hover,
.badge-soft-dark[href]:focus {
    background-color: rgba(52, 58, 64, 0.18);
}

/* Page title token. Apply class="ir-page-title" to a page-heading element
   for the small-uppercase "admin template" treatment. Opt-in; not yet rolled
   out across all views. */
.ir-page-title {
    font-size: 0.75rem;        /* 12px */
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #74788d;
    margin-bottom: 0.5rem;
}

/* Acronym tag used in Practitioner Type / Company Type columns. Pairs with
   the full type name in the same cell — the tag does the categorization, the
   name does the disambiguation. Fixed min-width so the tags align in a
   vertical column at high row counts. */
.badge.type-abbr {
    min-width: 36px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Data tables: drop internal row dividers from `.table-bordered`.
   Bootstrap's `.table-bordered > :not(caption) > *` puts a 1px top+bottom
   border on every <tr>, and `.table-bordered > :not(caption) > * > *` puts a
   1px left+right border on every cell. Zero both — the header underline is
   already drawn by `.dataTables_wrapper thead { border-bottom: 2px ... }`
   later in this file, so list views still have row separation at the top. */
.table-bordered > :not(caption) > * {
    border-width: 0;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0;
}

/* KPI mini-stat cards: bigger value, fainter sparkline.
   The card structure (see mini-charts.js buildCardHtml) is:
     .card.mini-stats-wid > .card-body > .d-flex > .flex-grow-1 > h4   ← value
                                                  > .flex-shrink-0     ← sparkline div
   The container-scoped rule (`#mini-charts-container .mini-stats-wid h4`)
   later in this file sets h4 to 1.15rem; this rule overrides it. */
.card.mini-stats-wid .card-body h4 {
    font-size: 1.875rem !important;  /* 30px — was 1.15rem (~18px) */
    font-weight: 600;
    line-height: 1.1;
}

.card.mini-stats-wid .flex-shrink-0 svg {
    opacity: 0.55;
}

/* Footer chip on KPI cards — strip the pill fill so it reads as plain text
   with a leading colored glyph instead of a saturated pill. The bx-* icon is
   colored per badge-soft-* variant and acts as the dot; the trailing label is
   muted so the icon carries the status signal. */
.card.mini-stats-wid > .card-body.border-top .badge {
    background-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
    font-weight: 400;
    color: var(--bs-secondary-color, #74788d) !important;
}
/* Re-color the leading icon by badge-soft-* variant so it acts as the colored dot */
.card.mini-stats-wid > .card-body.border-top .badge-soft-primary i { color: var(--bs-primary); }
.card.mini-stats-wid > .card-body.border-top .badge-soft-success i { color: #34c38f; }
.card.mini-stats-wid > .card-body.border-top .badge-soft-info i    { color: #50a5f1; }
.card.mini-stats-wid > .card-body.border-top .badge-soft-warning i { color: #f1b44c; }
.card.mini-stats-wid > .card-body.border-top .badge-soft-danger i  { color: #f46a6a; }

/* Footer link strings ("Revolution Platform v5", "Incandera Core v5") read as
   muted gray rather than brand-blue — they're a status string, not a CTA. */
.footer a {
    color: var(--bs-secondary-color, #74788d);
    text-decoration: none;
}
.footer a:hover {
    color: var(--bs-body-color);
}

/* Ensure page content fills full viewport height (prevents gap on theme switch) */
.page-content {
    min-height: 100vh;
}

/* Global header — icon hover scale */
#page-topbar .noti-icon > i,
#page-topbar .right-bar-toggle > i {
    transition: transform 0.15s ease;
    display: inline-block;
}

#page-topbar .noti-icon:hover > i,
#page-topbar .right-bar-toggle:hover > i {
    transform: scale(1.30);
}

/* Notifications dropdown — height caps.
   Replaces JS-measured per-item height arithmetic that broke after the Geist/Lucide
   modernization (variable item heights from wrapped 2-line titles + post-render SVG
   icons made first-item measurement unreliable). The caps are pure CSS — let item
   content size itself, and let SimpleBar take over once the cap is reached.
   The expanded cap also clamps to viewport so the dropdown can never overflow. */
#notifications-list {
    max-height: 21rem; /* ~3 worst-case items, including 2-line title wrap */
    transition: max-height 0.2s ease;
}
#notifications-list.is-expanded {
    max-height: min(48rem, calc(100vh - 12rem));
}

/* Global header — bottom border (offset to avoid overlapping the sidebar brand-box) */
#page-topbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 250px;
    right: 0;
    height: 1px;
    background-color: #f1d5db;
}

.vertical-collpsed #page-topbar::after {
    left: 70px;
}

@media (max-width: 992px) {
    #page-topbar::after {
        left: 0;
    }
}

/* Dark Mode — header bottom border */
[data-layout-mode="dark"] #page-topbar::after {
    background-color: var(--bs-border-color);
}

/* Collapsed sidebar — remove theme's hardcoded 1760px min-height on body that creates massive empty space */
body[data-sidebar="dark"].vertical-collpsed {
    min-height: auto !important;
}

/* Collapsed sidebar — force submenu flyout on hover.
   MetisMenu adds .mm-collapse to submenus and hides them with display:none (via
   .mm-collapse:not(.mm-show)) plus inline height:0 + overflow:hidden during transitions.
   The SimpleBar wrapper div has inline overflow:hidden which clips the flyout panels;
   override it to visible when the sidebar is collapsed so flyouts can escape the sidebar. */
body.vertical-collpsed .vertical-menu [data-simplebar] {
    overflow: visible !important;
}

body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.mm-collapse,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.mm-collapse.sub-menu {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
}

/* Maximize content rendering to available Viewport height */
.card-body-defaultheight {
    height: calc(100vh - 250px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* DataTables ColVis checkmarks fix */
.dt-button-collection .dt-button.active::after,
.dt-button-collection .dt-button:not(.disabled).active::after {
    content: "\2713";
    position: absolute;
    right: 23px;
    color: #556ee6;
    font-weight: bold;
}

.dt-button-collection .dt-button {
    position: relative;
    padding-right: 30px;
}

/* DataTables ColVis dropdown positioning and styling */
.dt-buttons {
    position: relative;
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: stretch;
}

/* Match icon-only DataTable buttons to Bootstrap btn height */
.dt-buttons .dt-control-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .375rem .75rem;
    line-height: 1.5;
    font-size: 1rem;
}

/* Tiny indicator dot on colvis button when columns are hidden */
.dt-buttons .buttons-colvis.has-hidden-columns {
    position: relative;
}

.dt-buttons .buttons-colvis.has-hidden-columns::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    background-color: #f1b44c;
    border-radius: 50%;
    pointer-events: none;
}

/* Round the right edge of the last visible toolbar button.
   Bootstrap's .btn-group strips border-radius from :not(:last-child) buttons,
   but when the "New" button is hidden (d-none) it's still :last-child in the DOM,
   so the last visible icon button loses its right-side rounding. Override with !important. */
.dt-buttons .dt-control-button:has(+ .d-none) {
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

div.dt-button-collection {
    right: 9px !important;
    left: auto !important;
}

/* Dark Mode Harmonization for DataTables Buttons */
[data-layout-mode="dark"] div.dt-button-collection {
    border-color: var(--bs-gray-300) !important; /* Seamless border */
    background-color: var(--bs-gray-300) !important;
}

[data-layout-mode="dark"] div.dt-button-collection .dt-button {
    background-color: var(--bs-gray-300) !important;
    color: var(--bs-body-color) !important;
    border: none !important;
}

[data-layout-mode="dark"] div.dt-button-collection .dt-button:hover,
[data-layout-mode="dark"] div.dt-button-collection .dt-button.active {
    background-color: var(--bs-gray-300) !important;
    color: var(--bs-body-color) !important;
}

/* Dark Mode — toolbar icon buttons sit in the filter area, not on it */
[data-layout-mode="dark"] .dt-buttons .dt-control-button {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .dt-buttons .dt-control-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

/* jQuery Steps skipped step styling */
.steps li.skipped-step a,
.steps li.skipped-step a:hover {
    color: #ccc !important;
}

/* Dark Mode Harmonization */

/* Modal Footer */
.modal-footer-colored {
    background-color: #f2f2f2; /* Light mode default */
}

[data-layout-mode="dark"] .modal-footer-colored {
    background-color: var(--bs-gray-200); /* Dark mode card background */
    border-top-color: var(--bs-border-color);
}

/* Dark Mode: Modal form fields */
[data-layout-mode="dark"] .modal .form-control,
[data-layout-mode="dark"] .modal .form-select,
[data-layout-mode="dark"] .modal .input-group-text {
    background-color: var(--bs-gray-300);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Dark Mode: Disabled / read-only form fields — subtle, dimmer treatment */
[data-layout-mode="dark"] .modal .form-control:disabled,
[data-layout-mode="dark"] .modal .form-control[readonly],
[data-layout-mode="dark"] .modal .form-select:disabled,
[data-layout-mode="dark"] .modal .form-select[readonly],
[data-layout-mode="dark"] .modal .select2-container--disabled .select2-selection--single,
[data-layout-mode="dark"] .modal .select2-container--disabled .select2-selection--multiple {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
}

[data-layout-mode="dark"] .modal .select2-container--disabled .select2-selection__rendered,
[data-layout-mode="dark"] .modal .select2-container--disabled .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark Mode: Subdued page-level form fields (Incandera admin tools, etc.) */
[data-layout-mode="dark"] .dark-form-subdued .form-control,
[data-layout-mode="dark"] .dark-form-subdued .form-select,
[data-layout-mode="dark"] .dark-form-subdued .input-group-text,
[data-layout-mode="dark"] .dark-form-subdued .select2-container .select2-selection--single,
[data-layout-mode="dark"] .dark-form-subdued .select2-container .select2-selection--multiple {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .dark-form-subdued .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .dark-form-subdued .select2-container .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.35);
}

[data-layout-mode="dark"] .dark-form-subdued .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.35) transparent transparent transparent;
}

[data-layout-mode="dark"] .dark-form-subdued .form-control:disabled,
[data-layout-mode="dark"] .dark-form-subdued .form-control[readonly],
[data-layout-mode="dark"] .dark-form-subdued .form-select:disabled,
[data-layout-mode="dark"] .dark-form-subdued .form-select[readonly],
[data-layout-mode="dark"] .dark-form-subdued .select2-container--disabled .select2-selection--single,
[data-layout-mode="dark"] .dark-form-subdued .select2-container--disabled .select2-selection--multiple {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

[data-layout-mode="dark"] .dark-form-subdued .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

[data-layout-mode="dark"] .dark-form-subdued .form-text {
    color: rgba(255, 255, 255, 0.45);
}

/* Dark Mode: bg-light helper (used in notification text, referral cards, result panels) */
[data-layout-mode="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--bs-body-color);
}

/* Dark Mode: Alert callouts — soften brightness */
[data-layout-mode="dark"] .alert-info {
    background-color: rgba(85, 110, 230, 0.12);
    border-color: rgba(85, 110, 230, 0.2);
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .alert-warning {
    background-color: rgba(241, 180, 76, 0.12);
    border-color: rgba(241, 180, 76, 0.2);
    color: #e8c97a;
}

[data-layout-mode="dark"] .alert-secondary {
    background-color: rgba(116, 120, 141, 0.15);
    border-color: rgba(116, 120, 141, 0.25);
    color: #a6aab4;
}

/* Dark Mode: list-group-item-action hover (news feed, form create modal) */
[data-layout-mode="dark"] .list-group-item-action:hover,
[data-layout-mode="dark"] .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--bs-body-color);
}

/* DataTables / Tables */
[data-layout-mode="dark"] .table thead th {
    background-color: var(--bs-gray-200);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .table {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .table-bordered td,
[data-layout-mode="dark"] .table-bordered th {
    border-color: var(--bs-border-color);
}

/* DataTables Layout & Styling */
.dataTables_wrapper .top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: #eee; /* Default Light Mode */
    padding: 8px;
    border-top: none;
}

[data-layout-mode="dark"] .dataTables_wrapper .top {
    background-color: rgba(255, 255, 255, 0.03); /* Subliminal block structure */
    border-top: none;
}

[data-layout-mode="dark"] .dataTables_filter input,
[data-layout-mode="dark"] .dataTables_length select,
[data-layout-mode="dark"] .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--multiple,
[data-layout-mode="dark"] .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--single,
[data-layout-mode="dark"] .dataTables_wrapper .filter-length .dt-inline-filter input.form-control {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-border-color) !important;
}

/* Table header row — keep current bg, 2px subtle bottom border */
.dataTables_wrapper thead {
    border-bottom: 2px solid #eee;
}

[data-layout-mode="dark"] .dataTables_wrapper thead {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
    background-color: #f3f4f6;
    border-bottom: none !important;
}

[data-layout-mode="dark"] .dataTables_wrapper table.dataTable thead th,
[data-layout-mode="dark"] .dataTables_wrapper table.dataTable thead td {
    background-color: var(--bs-gray-200);
}

/* Table content area — subliminal bottom border */
.dataTables_wrapper table.dataTable {
    border-bottom: 2px solid #f0f0f0;
}

[data-layout-mode="dark"] .dataTables_wrapper table.dataTable {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

/* Internal cell borders — transparent 1px (preserves layout on hover swap) */
.dataTables_wrapper table.dataTable tbody tr > td {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

/* Dark Mode — paginator borders tuned to match survey card tone */
[data-layout-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
[data-layout-mode="dark"] .dataTables_wrapper .dataTables_paginate .page-link {
    border-color: rgba(255, 255, 255, 0.08);
}

.dataTables_wrapper .filter-length {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 1.25em;
}

/* DataTables Toolbar — Inline filter containers (status, date range, etc.)
   Flex-shrink so filters compress at narrow viewports instead of wrapping. */
.dataTables_wrapper .filter-length .dt-inline-filter {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    margin-left: 1.25em;
}

/* Neutralize any theme margin on Select2 containers inside toolbar filters */
.dataTables_wrapper .filter-length .dt-inline-filter .select2-container {
    margin-top: 0;
    margin-bottom: 0;
}

/* Status filter: give it a flex-basis so it has room to fill, then shrinks */
#referral-status-filter-container.dt-inline-filter {
    flex: 1 1 540px;
    max-width: 540px;
    min-width: 180px;
}

/* Date range filter: 3 inline elements (column select + 2 date inputs) */
#referral-date-range-container.dt-inline-filter {
    flex: 0 1 370px;
    max-width: 370px;
    min-width: 200px;
}

/* Patient status filter: Select2 + "With TR(s) only" checkbox */
#patient-status-filter-container.dt-inline-filter {
    flex: 1 1 640px;
    max-width: 640px;
    min-width: 180px;
}

/* Form instance status filter */
#form-status-filter-container.dt-inline-filter {
    flex: 1 1 300px;
    max-width: 300px;
    min-width: 140px;
}

/* Form instance billing status filter */
#form-billing-filter-container.dt-inline-filter {
    flex: 1 1 300px;
    max-width: 300px;
    min-width: 140px;
}

/* Company type filter */
#company-type-filter-container.dt-inline-filter {
    flex: 1 1 640px;
    max-width: 640px;
    min-width: 180px;
}

/* Practitioner type filter */
#practitioner-type-filter-container.dt-inline-filter {
    flex: 1 1 640px;
    max-width: 640px;
    min-width: 180px;
}

/* Notification type filter */
#notification-type-filter-container.dt-inline-filter {
    flex: 1 1 300px;
    max-width: 300px;
    min-width: 140px;
}

/* Notification priority filter */
#notification-priority-filter-container.dt-inline-filter {
    flex: 1 1 260px;
    max-width: 260px;
    min-width: 130px;
}

/* Notification date range filter */
#notification-date-range-container.dt-inline-filter {
    flex: 0 1 370px;
    max-width: 370px;
    min-width: 200px;
}

/* Invoice status filter */
#status-filter-container.dt-inline-filter {
    flex: 1 1 300px;
    max-width: 300px;
    min-width: 140px;
}

/* Invoice date range filter */
#invoice-date-range-container.dt-inline-filter {
    flex: 0 1 370px;
    max-width: 370px;
    min-width: 200px;
}

/* FormSet discipline filter */
#discipline-filter-container.dt-inline-filter {
    flex: 1 1 640px;
    max-width: 640px;
    min-width: 180px;
}

/* Log level filter */
#log-level-filter-container.dt-inline-filter {
    flex: 1 1 480px;
    max-width: 480px;
    min-width: 180px;
}

/* Log date range filter */
#log-date-range-container.dt-inline-filter {
    flex: 0 1 260px;
    max-width: 260px;
    min-width: 160px;
}

/* Audit action filter */
#audit-action-filter-container.dt-inline-filter {
    flex: 1 1 480px;
    max-width: 480px;
    min-width: 180px;
}

/* Audit date range filter */
#audit-date-range-container.dt-inline-filter {
    flex: 0 1 260px;
    max-width: 260px;
    min-width: 160px;
}

/* Keep search box and length selector at fixed sizes — they're compact already */
.dataTables_wrapper .filter-length .dataTables_filter,
.dataTables_wrapper .filter-length .dataTables_length {
    flex-shrink: 0;
    margin-bottom: 0;
}

.dataTables_wrapper .bottom {
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    background-color: #f5f5f5;
    border-top: 1px solid #e8e8e8;
    border-bottom: 2px solid #eee;
}

[data-layout-mode="dark"] .dataTables_wrapper .bottom {
    background-color: rgba(255, 255, 255, 0.01);
    border-top-color: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* DataTables Filter Input */
.dataTables_filter input {
    width: 200px;
    height: 28px;
    background-color: #fff;
}

.dataTables_filter label {
    font-weight: 600; /* fw-semibold */
    margin-bottom: 0;
}

/* DataTables Length Select */
.dataTables_length {
    margin-left: 1.25em;
}

.dataTables_length select {
    height: 28px;
    background-color: #fff;
    padding-top: 5px; /* Nudge text down for better vertical centering */
}

[data-layout-mode="dark"] .dataTables_length select {
    background-color: var(--bs-input-bg);
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .dataTables_length select option {
    background-color: var(--bs-input-bg);
    color: var(--bs-body-color);
}

.dataTables_length label {
    margin-bottom: 0;
}

/* DataTables Toolbar — Select2 filter controls height (excludes datepicker inputs) */
.dataTables_wrapper .filter-length .dt-inline-filter .select2-container {
    height: 28px !important;
    font-size: 0.8125rem !important; /* Match theme's input font size */
}

.dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--multiple,
.dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--single {
    height: 28px !important;
    min-height: 28px !important;
    background-color: #fff;
    border-color: #ced4da !important;
}

/* Single-select specific arrow fix */
.dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--single .select2-selection__arrow {
    height: 26px !important;
    width: 20px !important;
    top: 1px !important;
    right: 1px !important;
    left: auto !important;
}

.dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--single .select2-selection__arrow b {
    margin-top: -2px !important;
}

/* Single-select rendered text — vertically centered within 28px (minus 2px border = 26px) */
    .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--single .select2-selection__rendered {
        line-height: 26px !important;
        padding-top: 0 !important;
        padding-right: 25px !important; /* Room for arrow */
    }

    /* Selected items (choices) in multi-select filters */
    .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--multiple .select2-selection__rendered {
        padding: 0 0 0 4px !important;
        line-height: 26px !important; /* Match container inner height */
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* Keep choices and clear on one line */
        overflow: hidden !important;
    }

    .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--multiple .select2-selection__choice {
        height: 22px !important;
        line-height: 20px !important; /* 22px minus 2px border = 20px inner → centered text */
        margin-top: 0.08em !important;
        margin-bottom: 0 !important;
        margin-right: 5px !important;
        padding: 0 4px 0 0 !important;
        font-size: 12px !important;
        background-color: var(--bs-gray-200) !important;
        border: 1px solid var(--bs-gray-300) !important;
    }

    /* Clear-all button ('×') — blue, right-aligned, matching native search clear */
    .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--multiple .select2-selection__clear,
    .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--single .select2-selection__clear {
        order: 999; /* Flex order: always rightmost */
        margin-left: auto !important; /* Push to far right of flex container */
        margin-right: 6px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        color: #556ee6 !important; /* Theme primary blue, matching browser search clear */
        font-size: 14px !important;
        line-height: 26px !important; /* Vertically center within 28px - 2px border */
        cursor: pointer;
        float: none !important; /* Use flex ordering, not float */
        position: relative;
        z-index: 1;
    }

    .dataTables_wrapper .filter-length .dt-inline-filter .select2-selection--multiple .select2-search__field {
        margin-top: 0 !important;
        height: 22px !important;
        line-height: 22px !important;
        font-size: 12px !important;
        margin-left: 2px !important;
    }

/* DataTables Toolbar — Datepicker inputs inside inline filters */
.dataTables_wrapper .filter-length .dt-inline-filter input.form-control {
    height: 28px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    background-color: #fff;
    margin-left: 6px;
}

/* Authentication Pages */
.auth-full-bg {
    background-image: url('/images/bg-auth-light.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-full-bg .bg-overlay {
    background-color: rgba(0, 0, 0, 0.21);
    opacity: 0.63;
}

/* Authentication Pages Dark Mode */
[data-layout-mode="dark"] .auth-body-bg {
    background-color: var(--bs-body-bg) !important;
}

[data-layout-mode="dark"] .auth-full-bg {
    background-color: var(--bs-card-bg) !important;
    background-image: url('/images/bg-auth.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-layout-mode="dark"] .auth-full-page-content {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .auth-logo .auth-logo-dark {
    display: none !important;
}

[data-layout-mode="dark"] .auth-logo .auth-logo-light {
    display: block !important;
}

[data-layout-mode="dark"] .text-muted {
    color: var(--bs-gray-400) !important;
}

[data-layout-mode="dark"] .text-primary,
[data-layout-mode="dark"] .auth-full-bg h4,
[data-layout-mode="dark"] .auth-full-bg h4 span,
[data-layout-mode="dark"] .auth-full-bg p {
    color: #fff !important;
}

[data-layout-mode="dark"] .auth-full-bg .bg-overlay {
    background-color: rgba(0, 0, 0, 0.0);
    opacity: 0.42;
}

/* Page Title Icons Styling */
h1 i.ph-duotone {
    position: relative;
    top: 0.15rem;
}

/*
   Override for vertical tabs (checkout-tabs) to be less overpowering.
   Changes the active state from solid primary fill to a light background with a border indicator.
*/
.checkout-tabs .nav-pills .nav-link.active {
    background-color: rgba(85, 110, 230, 0.1) !important;
    color: #556ee6 !important;
    border-left: 4px solid #556ee6;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Sidebar "Toolbox" Styling (used in Referrals/New, Patients/New, and Forms) */
.card-toolbox {
    background-color: #f8f9fa; /* Light mode: Very light gray */
    border: 1px solid var(--accent-callout); /* Role-named token; see :root */
    overflow: hidden; /* Fixes "bitten off" corners by clipping child backgrounds */
}

[data-layout-mode="dark"] .card-toolbox {
    background-color: var(--bs-gray-300); /* Dark mode: Slightly lighter than standard card */
    border-color: var(--bs-border-color);
}

.card-toolbox .card-title {
    font-weight: 600;
}

/* Unified Sidebar Table Density (Matching /Referrals/New ideal) */
.card-toolbox .table-sm tbody td,
.card-toolbox .table-sm thead th {
    padding: 0.3rem 0.5rem !important;
}

/* DataTables Controls in Sidebar */
.card-toolbox .dataTables_wrapper .top {
    padding: 8px;
}

.card-toolbox .dataTables_filter input {
    width: 100% !important;
    max-width: 140px;
    font-size: 0.8rem;
}

.card-toolbox .dataTables_filter input::placeholder {
    font-size: 0.75rem;
}

/* Remove margin-bottom from search label to fix vertical centering */
.card-toolbox .dataTables_filter label {
    margin-bottom: 0;
}

.card-toolbox .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.card-toolbox .dataTables_length select {
    padding: 0.2rem 1.5rem 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.card-toolbox .dataTables_info {
    font-size: 0.75rem;
    margin-top: 8px !important;
    padding-top: 0 !important;
}

.card-toolbox .dataTables_length {
    margin-top: 1px !important;
}

.card-toolbox .dataTables_paginate {
    padding-top: 0 !important;
}

.card-toolbox .dataTables_paginate .paginate_button {
    padding: 0 !important;
}

.card-toolbox .dataTables_paginate .paginate_button .page-link {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem;
}

/* Fix for "doubled up" borders when an accordion is inside a toolbox card */
.card-toolbox .accordion,
.card-toolbox .accordion-item,
.card-toolbox .accordion-header,
.card-toolbox .accordion-button {
    border: none !important;
    background-color: transparent !important;
}

.card-toolbox .accordion-button:not(.collapsed) {
    box-shadow: none !important;
    background-color: rgba(85, 110, 230, 0.1) !important; /* Subtle light blue for active item */
    color: #556ee6 !important;
}

[data-layout-mode="dark"] .card-toolbox .accordion-button:not(.collapsed) {
    background-color: rgba(85, 110, 230, 0.15) !important;
    color: #7b8fda !important;
}

/* ============================================================================
   SIDEBAR-SPECIFIC OVERRIDES
   These apply ONLY to specific sidebar tables (Referrals/New, Patients/New, Forms/Index)
   using table ID selectors to avoid affecting other card-toolbox tables like Forms/New
   ============================================================================ */

/* Sidebar Quick Lookup DataTables - Specific table overrides */
#patients-available-table_wrapper .top,
#referrals-available-table_wrapper .top,
#available-forms-table_wrapper .top {
    padding-top: 8px;
}

/* Font size overrides for specific sidebar tables only */
#patients-available-table_wrapper .dataTables_length label,
#referrals-available-table_wrapper .dataTables_length label,
#available-forms-table_wrapper .dataTables_length label {
    font-size: 0.7rem;
}

#patients-available-table tbody td,
#referrals-available-table tbody td,
#available-forms-table tbody td {
    font-size: 0.7rem;
}

#patients-available-table_wrapper .dataTables_info,
#referrals-available-table_wrapper .dataTables_info,
#available-forms-table_wrapper .dataTables_info {
    font-size: 0.7rem;
    margin-top: 10px;
}

/* ============================================================================
   HEADER UNIVERSAL SEARCH DROPDOWN
   ============================================================================ */

.header-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    width: max-content;
    max-width: 450px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    margin-top: 4px;
}

/* Reset any inherited styles that might interfere */
.header-search-dropdown * {
    box-sizing: border-box;
}

/* Override .app-search span { position: absolute } from app.css */
.header-search-dropdown span {
    position: static !important;
    z-index: auto !important;
    right: auto !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

[data-layout-mode="dark"] .header-search-dropdown {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-border-color);
}

/* Category Headers */
.search-category-header {
    display: block;
    position: relative;
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

[data-layout-mode="dark"] .search-category-header {
    background-color: var(--bs-gray-300);
    color: var(--bs-gray-400);
    border-color: var(--bs-border-color);
}

/* Result Items */
.search-result-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
    background-color: rgba(85, 110, 230, 0.1);
}

[data-layout-mode="dark"] .search-result-item {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-border-color);
}

[data-layout-mode="dark"] .search-result-item:hover,
[data-layout-mode="dark"] .search-result-item.active {
    background-color: rgba(85, 110, 230, 0.2);
}

/* Result Icon */
.search-result-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-color: #f0f0f0;
    border-radius: 50%;
    color: #556ee6;
}

[data-layout-mode="dark"] .search-result-icon {
    background-color: var(--bs-gray-300);
}

.search-result-icon i {
    font-size: 1rem;
}

/* Result Content */
.search-result-content {
    flex: 1 1 auto;
    min-width: 150px;
    overflow: hidden;
}

.search-result-text {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #343a40 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

[data-layout-mode="dark"] .search-result-text {
    color: #e9ecef !important;
}

.search-result-subtext {
    display: block;
    font-size: 0.75rem;
    color: #6c757d !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

[data-layout-mode="dark"] .search-result-subtext {
    color: #adb5bd !important;
}

/* No Results State */
.search-no-results {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

[data-layout-mode="dark"] .search-no-results {
    color: var(--bs-gray-400);
}

/* Loading State */
.search-loading {
    padding: 20px;
    text-align: center;
    color: #6c757d;
}

.search-loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #556ee6;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Position relative for the search container */
.app-search .position-relative {
    position: relative !important;
}

/* Wider search input field */
.app-search .form-control {
    width: 290px;
}

/* ============================================================================
   TABLE DENSITY PREFERENCES
   ============================================================================ */

body[data-table-density="dense"] .main-content table.dataTable tbody tr td,
body[data-table-density="dense"] .main-content table.dataTable thead tr th {
    padding: 0.25rem 0.5rem !important;
}

body[data-table-density="spacious"] .main-content table.dataTable tbody tr td,
body[data-table-density="spacious"] .main-content table.dataTable thead tr th {
    padding: 1.25rem 1rem !important;
}

/* ============================================================================
   QUILL RICH TEXT EDITOR
   Shared styling for all Quill editor instances (via RichTextEditor utility
   and the Notification-specific implementation).
   ============================================================================ */

/* --- Shared Quill Styles (apply to all editors) --- */

/* Override Quill's .ql-container { height: 100% } which breaks layout
   inside Bootstrap flex rows. These elements ARE the .ql-container. */
.quill-editor-container,
#notification-text-editor {
    height: auto !important;
}

.quill-editor-container .ql-toolbar.ql-snow,
#notification-text-editor .ql-toolbar.ql-snow {
    border-radius: 0.25rem 0.25rem 0 0;
    border-color: var(--bs-border-color);
    padding: 4px 8px;
}

.quill-editor-container .ql-container.ql-snow,
#notification-text-editor .ql-container.ql-snow {
    border-radius: 0 0 0.25rem 0.25rem;
    border-color: var(--bs-border-color);
    font-family: inherit;
}

.quill-editor-container .ql-editor,
#notification-text-editor .ql-editor {
    height: auto;              /* Override Quill's height:100% */
    min-height: 92px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

.quill-editor-container .ql-editor.ql-blank::before,
#notification-text-editor .ql-editor.ql-blank::before {
    font-style: italic;
    color: var(--bs-secondary-color);
}

/* Read-only mode: no toolbar, subtle background */
.quill-editor-container.ql-readonly .ql-container.ql-snow,
#notification-text-editor.ql-readonly .ql-container.ql-snow {
    border-radius: 0.25rem;
}

/* Validation error state */
.quill-editor-container.ql-validation-error .ql-toolbar.ql-snow,
.quill-editor-container.ql-validation-error .ql-container.ql-snow,
#notification-text-editor.ql-validation-error .ql-toolbar.ql-snow,
#notification-text-editor.ql-validation-error .ql-container.ql-snow {
    border-color: var(--bs-danger);
}

/* --- Notification-specific: tighter dimensions for modal context --- */

#notification-text-editor {
    margin-bottom: 4px;
}

#notification-text-editor .ql-editor {
    height: auto !important;
    min-height: 92px !important;
    max-height: 200px !important;
}

/* --- Dark Mode --- */

[data-layout-mode="dark"] .ql-toolbar.ql-snow {
    background-color: var(--bs-gray-300);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-layout-mode="dark"] .ql-container.ql-snow {
    background-color: var(--bs-input-bg);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-layout-mode="dark"] .ql-editor {
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .ql-toolbar .ql-stroke {
    stroke: var(--bs-body-color);
}

[data-layout-mode="dark"] .ql-toolbar .ql-fill {
    fill: var(--bs-body-color);
}

[data-layout-mode="dark"] .ql-toolbar .ql-picker-label {
    color: var(--bs-body-color);
}

[data-layout-mode="dark"] .ql-toolbar button:hover .ql-stroke,
[data-layout-mode="dark"] .ql-toolbar button.ql-active .ql-stroke {
    stroke: #556ee6;
}

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

[data-layout-mode="dark"] .ql-snow .ql-tooltip {
    background-color: var(--bs-gray-300);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-layout-mode="dark"] .ql-snow .ql-tooltip input[type="text"] {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Settings View Min-Height Fix */
.settings-view-min-height {
    min-height: calc(100vh - 180px);
}

/* Sidebar Menu Group Delineators */
.menu-title-line {
    display: flex !important;
    align-items: center;
    padding-right: 24px !important;
}

.menu-title-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .06);
    margin-left: 10px;
}

.menu-title-centered-line {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding-right: 24px !important;
}

.menu-title-centered-line::before,
.menu-title-centered-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .06);
}

.menu-title-centered-line::before {
    margin-right: 10px;
}

.menu-title-centered-line::after {
    margin-left: 10px;
}

/* --- Sidebar section divider title brightness --- */
body[data-sidebar=dark] .menu-title {
    color: #8f97ad;
}

/* --- Sidebar divider line visibility --- */
.menu-title-line::after {
    background: rgba(255, 255, 255, .12);
}

.menu-title-centered-line::before,
.menu-title-centered-line::after {
    background: rgba(255, 255, 255, .12);
}

/* --- Sidebar tenant name brightness --- */
body[data-sidebar=dark] .vertical-menu .text-muted.font-size-11 {
    color: #8f97ad !important;
}

/* --- Sidebar section icon tonal palette --- */
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-personal > a i {
    color: #7b8ec7;
}

body[data-sidebar=dark] #sidebar-menu ul li.nav-section-manage > a i {
    color: #6a9fb0;
}

body[data-sidebar=dark] #sidebar-menu ul li.nav-section-admin > a i {
    color: #b0a06a;
}

body[data-sidebar=dark] #sidebar-menu ul li.nav-section-incandera > a i {
    color: #b07a8a;
}

/* Preserve white icon on hover */
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-personal > a:hover i,
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-manage > a:hover i,
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-admin > a:hover i,
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-incandera > a:hover i {
    color: #ffffff;
}

/* Preserve active state (primary blue → white) */
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-personal.mm-active > a i,
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-manage.mm-active > a i,
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-admin.mm-active > a i,
body[data-sidebar=dark] #sidebar-menu ul li.nav-section-incandera.mm-active > a i {
    color: #ffffff !important;
}

/* Active section header — scale up the top-level parent menu item to 130% */
#sidebar-menu > ul > li > a.active-section-header {
    font-size: 16.9px;       /* 13px × 1.3 */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
#sidebar-menu > ul > li > a.active-section-header i {
    font-size: 1.625rem;     /* 1.25rem × 1.3 */
}

/* ============================================================================
   PROFILE IMAGE UPLOAD
   ============================================================================ */

/* Cropper container */
.profile-image-cropper-container {
    max-height: 400px;
    overflow: hidden;
}

.profile-image-cropper-container img {
    display: block;
    max-width: 100%;
}

/* Dropzone */
.profile-image-dropzone {
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.profile-image-dropzone:hover,
.profile-image-dropzone-hover {
    border-color: #556ee6 !important;
    background-color: rgba(85, 110, 230, 0.05);
}

/* Profile avatar — larger image overlap into banner */
#practitionerSummaryCard .profile-user-wid {
    margin-top: -46px;
}

/* Camera overlay on avatar */
.profile-image-camera-overlay {
    position: absolute;
    bottom: 8px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #556ee6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    text-decoration: none;
    border: 2px solid #fff;
}

.profile-image-camera-overlay:hover {
    opacity: 1;
    color: #fff;
}

[data-layout-mode="dark"] .profile-image-camera-overlay {
    border-color: var(--bs-gray-200);
}

[data-layout-mode="dark"] .profile-image-dropzone:hover,
[data-layout-mode="dark"] .profile-image-dropzone-hover {
    background-color: rgba(85, 110, 230, 0.1);
}

/* Clickable avatar images - view modal */
#practitioner-profile-avatar[data-viewable="true"],
#patient-profile-avatar {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#practitioner-profile-avatar[data-viewable="true"]:hover,
#patient-profile-avatar:hover {
    opacity: 0.8;
}

/* ============================================================================
   PROFILE IMAGE POPOVER (list views)
   ============================================================================ */

.popover.profile-image-popover {
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    text-align:center;
}

.popover.profile-image-popover .popover-header {
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: none;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
}

.popover.profile-image-popover .popover-body {
    padding: 0.4rem;
}

/* Fix arrow border gap — use BS5 CSS variables so the arrow matches the custom border.
   Also set per-placement selectors as fallback for older Bootstrap builds. */
.popover.profile-image-popover {
    --bs-popover-border-color: rgba(0, 0, 0, 0.25);
    --bs-popover-arrow-border: rgba(0, 0, 0, 0.25);
}

.popover.bs-popover-end.profile-image-popover .popover-arrow::before {
    border-right-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-end.profile-image-popover .popover-arrow::after {
    border-right-color: #fff !important;
}

.popover.bs-popover-start.profile-image-popover .popover-arrow::before {
    border-left-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-start.profile-image-popover .popover-arrow::after {
    border-left-color: #fff !important;
}

.popover.bs-popover-top.profile-image-popover .popover-arrow::before {
    border-top-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-top.profile-image-popover .popover-arrow::after {
    border-top-color: #fff !important;
}

.popover.bs-popover-bottom.profile-image-popover .popover-arrow::before {
    border-bottom-color: rgba(0, 0, 0, 0.25) !important;
}

.popover.bs-popover-bottom.profile-image-popover .popover-arrow::after {
    border-bottom-color: #fff !important;
}

/* ============================================================================
   KEY LINKS FLYOUT
   ============================================================================ */

/* Flush the flyout against the header (no Popper positioning on manual toggle) */
#keylinks-menu.show {
    margin-top: 0;
}

/* Drop-target highlight during dragover */
.keylinks-drop-active {
    outline: 2px dashed #556ee6;
    outline-offset: -2px;
    background-color: rgba(85, 110, 230, 0.05);
    border-radius: 4px;
    min-height: 60px;
}

/* Link items — position relative for overlays */
.keylinks-item {
    position: relative;
}

/* Remove button — hidden by default, visible on hover */
.keylinks-item-remove {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #dc3545;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

.keylinks-item:hover .keylinks-item-remove {
    display: block;
}

[data-layout-mode="dark"] .keylinks-item-remove {
    background-color: rgba(42, 48, 66, 0.9);
    color: #f46a6a;
}

/* Admin lock badge */
.keylinks-item-admin-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: #74788d;
    opacity: 0.6;
}

/* Empty state hint */
.keylinks-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    text-align: center;
    color: #74788d;
    font-size: 0.8rem;
    gap: 6px;
}

[data-layout-mode="dark"] .keylinks-empty-hint {
    color: var(--bs-gray-400);
}

/* Settings page — Key Links admin editor rows */
.keylinks-admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.keylinks-admin-row input {
    font-size: 0.85rem;
}

.keylinks-admin-row select {
    font-size: 0.85rem;
    width: auto;
    min-width: 140px;
}

.keylinks-admin-row .btn-remove-link {
    flex-shrink: 0;
}

/* ====================================================
   Notification Dropdown — Dark Mode Border Compensation
   The dark theme adds a 1px border to .dropdown-menu
   that doesn't exist in light mode. This narrows the
   content area, causing text to wrap and overflow.
   ==================================================== */

/* Widen the header notifications dropdown */
#notifications-container .dropdown-menu.dropdown-menu-lg {
    width: 335px;
}

[data-layout-mode="dark"] #notifications-container .dropdown-menu.dropdown-menu-lg {
    border-width: 0 !important;
}

/* MyNotifications / Invoices — white background on filter controls (light mode) */
#notification-type-filter-container .select2-selection--multiple,
#notification-priority-filter-container .select2-selection--multiple,
#status-filter-container .select2-selection--multiple,
#invoice-date-range-container .select2-selection--single {
    background-color: #fff;
}

[data-layout-mode="dark"] #notification-type-filter-container .select2-selection--multiple,
[data-layout-mode="dark"] #notification-priority-filter-container .select2-selection--multiple,
[data-layout-mode="dark"] #status-filter-container .select2-selection--multiple,
[data-layout-mode="dark"] #invoice-date-range-container .select2-selection--single {
    background-color: var(--bs-input-bg);
}

/* ====================================================
   DataTable Action Icons — Hover Scale
   Enlarges action-column icons on hover for clarity.
   ==================================================== */

table.dataTable td a:not(.btn) > i {
    transition: transform 0.15s ease;
    display: inline-block;
}

table.dataTable td a:not(.btn):hover > i {
    transform: scale(1.30);
}

/* ====================================================
   DataTable Cell Hyperlinks — Underline on Hover
   Applies only to text/badge navigation links, not to
   icon-only action buttons or Bootstrap .btn elements.
   ==================================================== */

table.dataTable td a.dt-link:hover,
table.dataTable td a.dt-link:hover .badge {
    text-decoration: underline !important;
}

/* ====================================================
   Forms Tree Grouping — Group Header Rows
   ==================================================== */

/* Base group header styling */
.group-header td {
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    cursor: default;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    white-space: nowrap;
}

/* Patient-level header */
.group-patient td {
    background-color: #e8f0fe;
    font-size: 0.95rem;
    color: #1a3e72;
}

/* Referral-level header */
.group-referral td {
    background-color: #f0f4f8;
    font-size: 0.9rem;
    color: #2c5282;
}

/* Treatment Record-level header */
.group-tr td {
    background-color: #f7f9fb;
    font-size: 0.875rem;
    color: #3a6ea5;
}

/* Indentation spacers */
.group-indent-1 {
    display: inline-block;
    width: 20px;
}

.group-indent-2 {
    display: inline-block;
    width: 40px;
}

/* Toggle icon */
.group-toggle {
    cursor: pointer;
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.15s ease;
}

.group-toggle i {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* Collapsed data rows */
tr.group-collapsed {
    display: none !important;
}

/* Dark mode variants */
[data-layout-mode="dark"] .group-patient td {
    background-color: rgba(56, 103, 214, 0.15);
    color: #a4c4f4;
}

[data-layout-mode="dark"] .group-referral td {
    background-color: rgba(56, 103, 214, 0.10);
    color: #8ab4f0;
}

[data-layout-mode="dark"] .group-tr td {
    background-color: rgba(56, 103, 214, 0.06);
    color: #7aa8e8;
}

[data-layout-mode="dark"] .group-header td {
    border-bottom-color: var(--bs-gray-300);
}

/* ============================================================================
   SURVEY EDITOR — DARK MODE QUESTION CARDS
   Tone down the light-mode header/border colors so they blend with the dark theme.
   ============================================================================ */

[data-layout-mode="dark"] .question-card {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-layout-mode="dark"] .question-card .card-header {
    background: rgba(255, 255, 255, 0.04);
}

[data-layout-mode="dark"] .question-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-layout-mode="dark"] .question-type-config {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-layout-mode="dark"] .drag-handle {
    color: rgba(255, 255, 255, 0.25);
}

[data-layout-mode="dark"] .drag-handle:hover {
    color: rgba(255, 255, 255, 0.5);
}

[data-layout-mode="dark"] .question-card .option-row .option-text[readonly] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

/* ============================================================================
   PROFILE AVATAR LAZY LOADING
   Hide avatar images until loaded to prevent broken-image flash on slow networks.
   Images use inline onload/onerror handlers to add the .loaded class.
   ============================================================================ */

img.avatar-lazy {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

img.avatar-lazy.loaded {
    opacity: 1;
}

.centered-bx-control {
    position: relative;
    top: 1px;
}

/* Settings page bullet+label+input rows. Pre-modernization these used a
   flex `.row` with a Boxicon `<i class="bx bx-minus">` and negative margins
   to overlap the label; under Lucide that hack rendered the dash so small
   it disappeared. Replaced with a clean three-item flex layout: a fixed
   bullet column, a flexible label, and a sized input column. */
.setting-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setting-bullet {
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
}

.setting-bullet svg.lucide {
    width: 18px;
    height: 18px;
    vertical-align: 0;
}

.setting-label {
    flex: 0 0 360px;
    margin-bottom: 0;
}

.setting-input {
    flex: 0 0 70px;
}

.setting-input-wide {
    flex-basis: 90px;
}

/* Repeater delete buttons: the legacy `padding: 9px 10px 5px` (asymmetric
   top/bottom) was a Boxicon-baseline-drop compensation that's no longer
   needed under Lucide. Normalize to a symmetric padding and reset the
   global svg.lucide vertical-align so the trash glyph centers in the
   button. The `.btn .centered-bx-control` reset covers the small "remove"
   buttons that used the legacy 1px-down nudge — they don't need it now. */
.btn[data-repeater-delete]:not(.btn-sm),
.btn[data-nested-repeater-delete]:not(.btn-sm),
.btn.remove-repeater-item:not(.btn-sm) {
    padding: 7px 10px;
}

.btn[data-repeater-delete]:not(.btn-sm) svg.lucide,
.btn[data-nested-repeater-delete]:not(.btn-sm) svg.lucide,
.btn.remove-repeater-item:not(.btn-sm) svg.lucide,
.btn:not(.btn-sm) .centered-bx-control {
    vertical-align: middle;
    top: 0;
}

/* Small repeater trash buttons (Emergency Contacts modal: phone/email/
   address sub-rows, POA clear-all). Nudge them 1px right so they line up
   with the column edges of fields above; the .me-1 (4px) gap stays. */
.btn-sm[data-nested-repeater-delete],
.btn-sm.poa-clear-all {
    position: relative;
    right: -0.05em;
}

/* Mini-chart stat cards (sparkline cards on list pages) */
#mini-charts-container .mini-stats-wid,
#submissions-charts-container .mini-stats-wid {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.00);
}

#mini-charts-container .mini-stats-wid .card-body,
#submissions-charts-container .mini-stats-wid .card-body {
    padding: 0.85rem 1rem;
}

#mini-charts-container .mini-stats-wid h4,
#submissions-charts-container .mini-stats-wid h4 {
    font-size: 1.15rem;
}

/* Compact footer on horizontal sparkline cards */
.mini-stats-wid .border-top.py-3 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Radial bar chart table — compact rows */
#mini-charts-container .table td,
#submissions-charts-container .table td {
    padding: 0.5rem 0.5rem;
}

/* TUI CALENDAR — Brighten icons in dark mode (edit, delete, etc. are dark PNGs) */
[data-layout-mode="dark"] .tui-full-calendar-icon {
    filter: invert(0.85);
}

/* Calendar detail popup — wider to reduce title wrapping on long patient names.
   TUI sets an inline width on .popup-container, so min-width is needed to override it. */
.tui-full-calendar-popup-detail {
    width: 420px !important;
}
.tui-full-calendar-popup-detail .tui-full-calendar-popup-container {
    min-width: 420px !important;
}

/* Calendar popup — more pronounced drop-shadow, rounded corners, arrow colors */
.tui-full-calendar-popup-container {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    border-color: #ced4da !important;
    border-radius: 6px !important;
}

/* Arrow border (outer triangle) — match popup border color per direction */
/* Nudge 1px toward popup so the base aligns with the popup's outer border */
.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border { border-bottom-color: #ced4da !important; top: -8px !important; }
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border { border-top-color: #ced4da !important; bottom: -8px !important; }
.tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-border { border-right-color: #ced4da !important; left: -8px !important; }
.tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-border { border-left-color: #ced4da !important; right: -8px !important; }

/* Arrow fill (inner triangle) — match popup background */
.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill { border-bottom-color: #fff !important; }
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill { border-top-color: #fff !important; }
.tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-fill { border-right-color: #fff !important; }
.tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-fill { border-left-color: #fff !important; }

/* Dark mode */
[data-layout-mode="dark"] .tui-full-calendar-popup-container {
    box-shadow: 0 4px 20px rgba(180, 190, 210, 0.25) !important;
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-border-color) !important;
}

[data-layout-mode="dark"] .tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border { border-bottom-color: var(--bs-border-color) !important; top: -6px !important; }
[data-layout-mode="dark"] .tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border { border-top-color: var(--bs-border-color) !important; bottom: -6px !important; }
[data-layout-mode="dark"] .tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-border { border-right-color: var(--bs-border-color) !important; left: -6px !important; }
[data-layout-mode="dark"] .tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-border { border-left-color: var(--bs-border-color) !important; right: -6px !important; }

[data-layout-mode="dark"] .tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill { border-bottom-color: var(--bs-card-bg) !important; }
[data-layout-mode="dark"] .tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill { border-top-color: var(--bs-card-bg) !important; }
[data-layout-mode="dark"] .tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-fill { border-right-color: var(--bs-card-bg) !important; }
[data-layout-mode="dark"] .tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-fill { border-left-color: var(--bs-card-bg) !important; }

/* Calendar "N more" link — subtle badge so it stands out among colorful events */
.tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-more-schedules {
    color: #556ee6 !important;
    background-color: #eff2f7 !important;
    border-radius: 3px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    line-height: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
}

[data-layout-mode="dark"] .tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-more-schedules {
    color: #8da2e6 !important;
    background-color: rgba(85, 110, 230, 0.15) !important;
}

/* Calendar "N more" popup — dark mode */
[data-layout-mode="dark"] .tui-full-calendar-month-more {
    background-color: var(--bs-card-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-layout-mode="dark"] .tui-full-calendar-month-more-title {
    background-color: var(--bs-card-bg) !important;
}

[data-layout-mode="dark"] .tui-full-calendar-month-more-title-day-label,
[data-layout-mode="dark"] .tui-full-calendar-month-more-title-day {
    color: var(--bs-body-color) !important;
}

[data-layout-mode="dark"] .tui-full-calendar-month-more-list {
    background-color: var(--bs-card-bg) !important;
}

[data-layout-mode="dark"] .tui-full-calendar-month-more-close {
    color: var(--bs-body-color) !important;
}

/* Calendar "today" indicator — must exceed specificity of app.css grid-date color rules
   (app.css uses 4-class selector with !important on .weekday-grid-date; the decorator
   shares that class on the same element, so we need higher specificity to win) */
.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-grid-date.tui-full-calendar-weekday-grid-date-decorator {
    color: #fff !important;
}

/* Calendar legend + new-item row — vertically center and align */
.lnb-new-schedule-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #556ee6;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
    position: relative;
    top: -3px;
}
.lnb-new-schedule-link:hover {
    color: #3b4ec4;
    text-decoration: none;
}
.lnb-new-schedule-link .new-schedule-icon {
    font-size: 26px;
    line-height: 1;
}

/* DataTable row hover — desaturated brand at low opacity. Stays in the
   neutral family so pointer feedback doesn't compete with content emphasis
   or the sidebar callout color (--accent-callout). */
table.dataTable tbody tr:hover > td {
    background-color: rgba(83, 101, 207, 0.05);
    border-top: 1px solid rgba(83, 101, 207, 0.18);
    border-bottom: 1px solid rgba(83, 101, 207, 0.18);
}

[data-layout-mode="dark"] table.dataTable tbody tr:hover > td {
    border-top-color: var(--bs-border-color);
    border-bottom-color: var(--bs-border-color);
}

/* ============================================================================
   FORM CHECK INPUTS — Stronger Border
   Bootstrap 5 default radio/checkbox borders are very faint (#dee2e6).
   Darken them for better visibility.
   ============================================================================ */

.form-check-input {
    border-color: #adb5bd !important;
}

[data-layout-mode="dark"] .form-check-input {
    border-color: #6c757d !important;
}

/* ============================================================================
   SURVEY RENDERER — Vertical Centering of Answer Options
   The question container is a flex column. The question text stays at the top;
   the answer area (.survey-answer-area) fills remaining space and centers its
   content vertically.
   ============================================================================ */

#survey-question-container {
    display: flex;
    flex-direction: column;
    min-height: 350px;
}

#survey-question-container .survey-answer-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -40px;
}

#survey-question-container .survey-answer-area.survey-answer-freetext {
    justify-content: flex-start;
    margin-top: 0;
}

#survey-question-container .survey-answer-area .d-inline-block {
    text-align: left;
}

/* Survey assessment collapse chevron rotation on Face Sheet */
.collapse-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
}

[aria-expanded="true"] > .collapse-chevron {
    transform: rotate(90deg);
}

/* ============================================================================
   DASHBOARD / FACE SHEET — Elevated Card Shadows
   Subtle drop-shadow on cards for visual depth and section distinction.
   ============================================================================ */

.facesheet-section,
.dashboard-cards > .row .card,
.dashboard-cards > .card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.00);
}

[data-layout-mode="dark"] .facesheet-section,
[data-layout-mode="dark"] .dashboard-cards > .row .card,
[data-layout-mode="dark"] .dashboard-cards > .card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.00);
}

/* --- Spacing between major Face Sheet cards --- */
.facesheet-section {
    margin-bottom: 1.25rem;
}

.facesheet-section:last-child {
    margin-bottom: 0;
}

/* TUI CALENDAR — Darken the hourly gridlines in Daily/Weekly timegrid views */
.tui-full-calendar-timegrid-gridline {
    border-color: #d8d8d8 !important;
}
[data-layout-mode="dark"] .tui-full-calendar-timegrid-gridline {
    border-color: #3a3f51 !important;
}

/* TUI CALENDAR — Darken the Milestone / Task / All Day lane borders */
.tui-full-calendar-splitter,
.tui-full-calendar-left,
.tui-full-calendar-dayname-container,
.tui-full-calendar-time-date {
    border-color: #e6e6e6 !important;
}
[data-layout-mode="dark"] .tui-full-calendar-splitter,
[data-layout-mode="dark"] .tui-full-calendar-left,
[data-layout-mode="dark"] .tui-full-calendar-dayname-container,
[data-layout-mode="dark"] .tui-full-calendar-time-date {
    border-color: #414660 !important;
}

/* ============================================================================
   TUI CALENDAR — Wider calendar-type dropdown in creation popup.
   With up to 11 calendar types the dropdown menu needs more room.
   ============================================================================ */

/* Widen TUI calendar type selector text — prevent truncation/ellipsis */
.tui-full-calendar-section-calendar .tui-full-calendar-dropdown-button {
    white-space: nowrap !important;
}

.tui-full-calendar-section-calendar .tui-full-calendar-dropdown-button .tui-full-calendar-content {
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.tui-full-calendar-dropdown-menu {
    min-width: 220px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #ced4da !important;
}

/* Survey editor — clinician-only question card */
.clinician-only-header {
    background-color: #fff3cd;
}

.question-card.clinician-only {
    border-left: 3px solid #f1b44c;
}

[data-layout-mode="dark"] .clinician-only-header {
    background-color: rgba(241, 180, 76, 0.15);
}

[data-layout-mode="dark"] .question-card.clinician-only {
    border-left-color: #f1b44c;
}

/* FaceSheet mini-chart datepicker inputs */
.fc-datepicker {
    border-radius: 3px !important;
    cursor: pointer;
}

/* ======================== */
/* Workflow Timeline         */
/* ======================== */

.wf-timeline {
    position: relative;
    padding: 0 20px 0 25px;
}

.wf-timeline-item {
    position: relative;
    display: flex;
    padding-bottom: 24px;
    min-height: 60px;
}

.wf-timeline-item-last {
    padding-bottom: 0;
}

/* Vertical connector line */
.wf-timeline-line {
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    opacity: 0.3;
}

/* Node icon circle */
.wf-timeline-node {
    flex-shrink: 0;
    width: 36px;
    margin-right: 16px;
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.wf-timeline-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

/* Pulse animation for current/running step */
.wf-pulse {
    animation: wf-pulse-anim 2s ease-in-out infinite;
}

@keyframes wf-pulse-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), 0); }
}

/* Content area */
.wf-timeline-content {
    flex: 1;
    padding-top: 4px;
    min-width: 0;
}

/* Workflow status badge in referral DataTable */
.wf-status-badge {
    cursor: pointer;
    transition: opacity 0.15s;
}

.wf-status-badge:hover {
    opacity: 0.8;
}

/* Dark mode adjustments */
[data-layout-mode="dark"] .wf-timeline-line {
    opacity: 0.2;
}

[data-layout-mode="dark"] #wf-json-content {
    background-color: var(--bs-dark) !important;
    color: var(--bs-light);
}

/* ── Icon vertical alignment fixes ── */
/* Icon font glyphs sit ~1-2px high relative to adjacent text.                   */
/* Nudge them down so they appear optically centred.                              */

/* Boxicons in <button> elements: 2px */
.btn > .bx,
.btn > i.bx {
    position: relative;
    top: 2px;
}

/* Boxicons in <a> styled as buttons: 1px is enough */
a.btn > .bx,
a.btn > i.bx {
    top: 1px;
}

/* MDI icons in input-group addons (calendar icon, etc.): 2px */
.input-group-text > .mdi {
    position: relative;
    top: 2px;
}

/* Phosphor icons in buttons/links: 1px */
.btn > .ph-duotone,
.btn > i[class*="ph-"] {
    position: relative;
    top: 1px;
}

/* Workflow "View" badges rendered inside DataTable cells */
.badge-soft-info > .bx {
    position: relative;
    top: 1px;
}

/* Repeater trash buttons with custom padding — 1px only */
.btn[data-repeater-delete] > .bx,
.btn.remove-repeater-item > .bx {
    position: relative;
    top: 1px;
}

/* Tiny compact buttons (POA remove-file, etc.) — 1px only */
.btn.poa-doc-delete > .bx,
.btn.proof-of-insurance-delete > .bx {
    position: relative;
    top: 1px;
}

/* Exempt tiny icon-only buttons in the form editor */
.element-controls .btn > .bx,
.field-properties-group-btn > .bx {
    top: 0;
}

/* ══════════════════════════════════════════════════════════════
   DataTable Filter Collapse (mobile / desktop split)
   ══════════════════════════════════════════════════════════════ */

/* Desktop: hide the toggle button; collapse wrapper is layout-transparent */
.dt-filter-toggle {
    display: none;
}

.dt-filter-collapse {
    display: contents !important;
}

/* ══════════════════════════════════════════════════════════════
   Mobile / Narrow Viewport Overrides  (≤ 767px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── 1. DataTable toolbar: allow wrapping so buttons don't overwrite filters ── */
    .dataTables_wrapper .top {
        flex-wrap: wrap;
        gap: 6px;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Filter-length area: allow wrapping for toggle + collapse layout */
    .dataTables_wrapper .filter-length {
        flex-wrap: wrap;
        flex-basis: 100%;
        margin-right: 0;
        gap: 6px;
        overflow: hidden;
    }

    /* Zero out left margins on all filter-area children */
    .dataTables_wrapper .filter-length .dataTables_length,
    .dataTables_wrapper .filter-length .dataTables_filter,
    .dataTables_wrapper .filter-length .dt-inline-filter {
        margin-left: 0;
    }

    /* Fallback for DataTables without wrapFiltersForMobile — stack controls */
    .dataTables_wrapper .filter-length > .dataTables_filter {
        flex-basis: 100%;
        text-align: left;
    }

    .dataTables_wrapper .filter-length > .dataTables_filter input {
        width: 100%;
        margin-right: 0;
    }

    .dataTables_wrapper .filter-length > .dt-inline-filter {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Toolbar buttons: auto-place after filters */
    .dt-buttons {
        margin-left: auto;
    }

    /* Show the filter toggle button on mobile — flush right */
    .dt-filter-toggle {
        display: inline-flex;
        align-items: center;
        font-size: 0.8rem;
        padding: 2px 10px;
        margin-left: auto;
    }

    /* inline-flex + align-items:center already centres the icon;
       neutralise the global .btn > .bx { top:2px } nudge */
    .dt-filter-toggle > .bx {
        top: 0 !important;
    }

    /* Collapse panel: override the desktop flex display; let Bootstrap control visibility */
    .dt-filter-collapse {
        display: none !important;
        flex-wrap: wrap;
        flex-basis: 100%;
        padding-top: 6px;
        overflow: hidden;
        max-width: 100%;
    }

    .dt-filter-collapse.show {
        display: flex !important;
        gap: 8px;
    }

    .dt-filter-collapse.collapsing {
        display: flex !important;
    }

    /* Controls inside the collapse panel stack vertically, left-aligned */
    .dt-filter-collapse .dataTables_filter {
        flex-basis: 100%;
        text-align: left;
        max-width: 100%;
    }

    .dt-filter-collapse .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
    }

    .dt-filter-collapse .dataTables_filter input {
        flex: 1;
        width: auto;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        box-sizing: border-box;
    }

    .dt-filter-collapse .dataTables_length {
        margin-left: 0;
        max-width: 100%;
    }

    .dt-filter-collapse .dt-inline-filter {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0;
        overflow: hidden;
        box-sizing: border-box;
        display: flex !important;
        flex-wrap: nowrap;
        gap: 6px;
    }

    /* Select2 inside collapse: fill parent by default (status filter, etc.) */
    .dt-filter-collapse .dt-inline-filter .select2-container {
        flex: 1 1 100% !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Date-range filters: cap the column selector so date pickers share space.
       Targets containers that hold a Select2 + date inputs side-by-side.
       :has() is supported on Android Chrome/Edge 105+ (2022). */
    .dt-filter-collapse .dt-inline-filter:has(> input.form-control) .select2-container {
        flex: 0 1 40% !important;
        max-width: 40% !important;
    }

    /* Date/text inputs inside collapse: equal share of remaining space */
    .dt-filter-collapse .dt-inline-filter input.form-control {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-left: 0 !important;  /* neutralize JS inline margin */
    }

    /* Select elements inside collapse panel */
    .dt-filter-collapse .dataTables_length select,
    .dt-filter-collapse .dt-inline-filter select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ── 2. DataTable responsive (+) control: prevent overlap with cell text ──
       DataTables Responsive CDN CSS positions the control on the LEFT (padding-left / left).
       Increase padding so the (+) circle doesn't overlap cell text. */
    .table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
        padding-left: 28px !important;
        position: relative;
    }

    /* ── 3. Responsive child-row detail: align labels and values cleanly ── */
    table.dataTable > tbody > tr.child ul.dtr-details > li {
        display: flex;
        justify-content: flex-start;
        gap: 0.5em;
    }

    table.dataTable > tbody > tr.child .dtr-title {
        flex-shrink: 0;
        min-width: 0;
    }

    table.dataTable > tbody > tr.child .dtr-data {
        text-align: left !important;
    }

    /* Action icons in responsive child rows — flush left */
    table.dataTable > tbody > tr.child ul.dtr-details > li:last-child .text-center {
        text-align: left !important;
    }

    /* ── 4. DataTable pagination: compact for narrow screens ── */
    .dataTables_wrapper .bottom {
        flex-wrap: wrap;
        gap: 6px;
    }

    .dataTables_wrapper .dataTables_info {
        font-size: 0.8rem;
    }
}

/* ── Sidebar: mobile touch scrolling fix ──
   SimpleBar's content wrapper needs -webkit-overflow-scrolling for
   momentum scrolling on iOS, and the sidebar overlay needs explicit
   height constraints so the scrollable area is bounded. */
@media (max-width: 992px) {
    body.sidebar-enable .vertical-menu {
        z-index: 1005;
    }

    body.sidebar-enable .vertical-menu [data-simplebar] {
        overflow: auto !important;
    }

    body.sidebar-enable .vertical-menu .simplebar-content-wrapper {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Dynamic Forms: Repeatable Fields ── */
.repeatable-container {
    position: relative;
}
.repeatable-item {
    position: relative;
    transition: border-color 0.2s;
}
.repeatable-item:not(:first-child) {
    border-left: 2px solid #0d6efd;
    padding-left: 10px;
    margin-top: 0.5rem;
}
.repeatable-item .repeatable-remove-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 1;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}
.repeatable-add-btn {
    font-size: 0.8rem;
}
.repeatable-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Shepherd.js tour popover offset (11px gap from target) ── */
.shepherd-element[data-popper-placement^="bottom"] { transform: translateY(11px) !important; }
.shepherd-element[data-popper-placement^="top"]    { transform: translateY(-11px) !important; }
.shepherd-element[data-popper-placement^="left"]   { transform: translateX(-11px) !important; }
.shepherd-element[data-popper-placement^="right"]  { transform: translateX(11px) !important; }

/* Sidebar Menu Badges — Square shape with centered alignment */
#sidebar-menu ul li .badge {
    padding-top: 0.38em;
    padding-left: 0.48em;
    border-radius: 0.25rem; /* Standard Bootstrap rounded corner (not pill) */
}

/*
    Row-action outline buttons (Copy / Send link) in DataTables —
    soften the borders so they don't compete with the row content,
    and make the disabled state clearly faint (matching the inline
    View/Retract icon convention).
*/
.copy-link-btn.btn-outline-primary,
.send-link-btn.btn-outline-primary,
.btn-send-join-link.btn-outline-primary {
    border-color: rgba(108, 117, 125, 0.4); /* lighter blue-grey */
}

.copy-link-btn.btn-outline-primary:hover,
.send-link-btn.btn-outline-primary:hover,
.btn-send-join-link.btn-outline-primary:hover {
    border-color: rgba(108, 117, 125, 0.6);
}

.copy-link-btn.btn-outline-primary:disabled,
.send-link-btn.btn-outline-primary:disabled,
.btn-send-join-link.btn-outline-primary:disabled,
.copy-link-btn.btn-outline-primary.disabled,
.send-link-btn.btn-outline-primary.disabled,
.btn-send-join-link.btn-outline-primary.disabled {
    opacity: 0.2;
    pointer-events: none;
}

/*
    Logs — expanded log entry detail. Long messages (e.g. stack traces)
    used to overflow horizontally and produce a huge scrollbar. Keep
    original line breaks, wrap long tokens, and stay within the row.
*/
.entry-detail {
    max-width: 100%;
    overflow-x: hidden;
}

.entry-detail .wordwrap {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: inherit;
}

/*
    Sidebar count badges — bring the `badge-soft-*` variant closer in hue
    to its solid sibling so paired items (Referrals/Patients, Visits/Forms)
    read as the same colour family. Default soft uses 0.18 alpha which
    drifts too far toward grey on the dark vertical-menu background.
*/
.vertical-menu .badge.badge-soft-success {
    background-color: rgba(52, 195, 143, 0.55);
    color: #ffffff;
}

.vertical-menu .badge.badge-soft-primary {
    background-color: rgba(85, 110, 230, 0.55);
    color: #ffffff;
}

/*
    Field-group repeater triggers: suppress the default focus ring / click outline
    on the inline (+) and (-) buttons that sit next to a repeatable group's title.
    They're rendered as .btn-link for styling only — there's no meaningful focus
    state to signal, so the box-shadow halo on click is just visual noise.
*/
.repeatable-group-add-btn,
.repeatable-group-remove-btn {
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none;
}

.repeatable-group-add-btn:focus,
.repeatable-group-add-btn:focus-visible,
.repeatable-group-add-btn:active,
.repeatable-group-remove-btn:focus,
.repeatable-group-remove-btn:focus-visible,
.repeatable-group-remove-btn:active {
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   Select2 (bootstrap-5 theme) — match .form-control sizing.
   The vendor theme hard-codes font-size:1rem and a min-height
   computed from 1rem, which makes Select2 widgets visibly
   taller than sibling .form-control inputs (whose font-size
   inherits the page's 0.875rem body). Inheriting font-size and
   recomputing min-height from it puts Select2 flush with its
   neighbours and re-centers the placeholder vertically.
   ============================================================ */
.select2-container--bootstrap-5 .select2-selection {
    font-size: inherit;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    font-size: inherit;
    line-height: 1.5;
}

/* ============================================================
   Lucide iconography — design-system sizes.
   Lucide ships SVGs with width="24" height="24" attributes;
   we override to the design tokens:
     - 16px default (inline / table-action / buttons)
     - 20px in chrome (sidebar, topbar, page-title, avatar tiles)
   Buttons keep a subtle 130% hover bump in DataTables action
   columns, restoring the affordance the Boxicons era had.

   See DESIGN_SYSTEM.md §Iconography.
   ============================================================ */

/* Default sizing is em-based so Lucide SVGs follow the surrounding
   font-size. Bootstrap's `fs-X` utilities, `font-size-N` helpers, badge
   chrome, and headings then all scale icons naturally without per-context
   overrides. The 1em "default" is the same shape Boxicons had as a font.

   We deliberately do NOT clamp font-size here. Earlier I tried `font-size:
   1rem` as a "floor," but it overrode any parent font-size class on the SVG
   itself (e.g. `<i data-lucide class="display-3">` couldn't grow because
   svg.lucide and .display-3 both had 1-class specificity and svg.lucide,
   loaded later, won). Inheriting from the parent gives the right behavior
   in every context, including direct utility classes on the icon. */
svg.lucide {
    width: 1em;
    height: 1em;
    vertical-align: -0.18em;
    transition: transform 0.12s ease-out;
}

/* Sidebar menu icons — original Boxicons rule was on the <i>; re-state
   the relevant pieces for the post-Lucide <svg>. Kept here rather than as
   an `em` cascade because the sidebar's font-size belongs to the label
   text, not the icon (we want the icon to be larger than 13px label).
   The translateY(-1px) corrects a small baseline drop that vertical-align
   middle leaves on Lucide's 24x24 viewBox; the active rule below adds an
   extra -1px to compensate for the scale offset. */
#sidebar-menu ul li a svg.lucide {
    width: 20px;
    height: 20px;
    font-size: 20px;
    vertical-align: middle;
    min-width: 1.75rem;
    color: #7f8387;
    transform: translateY(-1px);
    transition: all 0.4s;
}

#sidebar-menu ul li a:hover svg.lucide {
    color: #383c40;
}

/* The currently-selected sidebar item: brand color + 1.30 scale pin, so it
   reads as "you are here" instead of just "darker." metisMenu writes
   `.mm-active` on the <li>; some active links also get `.active` directly.
   translateY(-2px) keeps the scaled-up icon visually aligned with the
   surrounding label text. */
#sidebar-menu ul li.mm-active > a svg.lucide,
#sidebar-menu ul li > a.active svg.lucide {
    color: var(--bs-primary);
    transform: translateY(-2px) scale(1.30);
    transform-origin: center;
}

/* Topbar / page-title — 20px chrome, vertical-align:middle so icons sit
   centered next to heading text rather than dropping to the baseline. */
#page-topbar svg.lucide,
.navbar-header svg.lucide,
.page-title-box svg.lucide {
    width: 20px;
    height: 20px;
    font-size: 20px;
    vertical-align: middle;
}

/* Avatar tiles hold a centered icon that should fill the inner area rather
   than sit at body-text size. Avatar tiles use flex centering, so vertical
   alignment is moot — reset to baseline. */
.avatar-title svg.lucide {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    vertical-align: 0;
}

.avatar-xs .avatar-title svg.lucide {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

.avatar-sm .avatar-title svg.lucide {
    width: 1.375rem;
    height: 1.375rem;
    font-size: 1.375rem;
}

.avatar-lg .avatar-title svg.lucide,
.avatar-xl .avatar-title svg.lucide {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.75rem;
}

/* Vertical pill-tabs whose icon sits ABOVE the label (Forms/New, Settings/Index,
   etc.). The legacy class .check-nav-icon set font-size:36px on the <i>;
   re-state for the SVG and add `display: block` + `margin: auto` so the
   icon centers horizontally within the tab pill. */
.check-nav-icon,
svg.lucide.check-nav-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 36px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: 0;
}

/* Hover bump on icon buttons — restores the prior Boxicons-era affordance.
   Applies to .btn AND the <a> tags that DT-row action icons live in
   ("Face Sheet" / "Delete" / "Inspect" / "Update" — see e.g.
   patients-index.js renderActionButtons), since those are buttons in
   intent if not in tag. */
.btn svg.lucide,
td a > svg.lucide,
.dt-action svg.lucide {
    transition: transform 0.12s ease-out;
}

.btn:hover svg.lucide,
td a:hover > svg.lucide,
.dt-action:hover svg.lucide {
    transform: scale(1.30);
}

/* Badges: shrink the icon slightly and use vertical-align:middle so the
   line-box doesn't stretch to accommodate the SVG's descender area. Without
   this, my default vertical-align (-0.18em pushes the SVG below baseline)
   pads the badge taller than text-only sibling badges. */
.badge svg.lucide {
    width: 0.85em;
    height: 0.85em;
    vertical-align: -0.12em;
}

/* Form editor element-controls (the edit / delete / template overlay that
   appears on Section / Field hover). Position only — let icons inherit the
   global em-based sizing now that font-size cascades correctly. */
.element-controls {
    top: -0.06em;
    right: 4px;
}

/* Field-row indicator badges (Vertical stack, Repeatable, ...). Sizing for
   the badge chrome lives in form-editor.css under .field-stack-badge .badge
   (so its 2-class specificity wins over the global .badge svg.lucide rule);
   here we only size the icon inside and tighten line-height / vertical-align
   so the chip baseline-aligns with the adjacent .element-controls buttons. */
.field-indicator-badge {
    line-height: 1.2;
    vertical-align: top;
}

.field-indicator-badge svg.lucide {
    width: 1em;
    height: 1em;
    vertical-align: -0.10em;
}

/* Form editor toolbox — left-rail "Add Section / Text Field / ..." buttons.
   Original .toolbox-elements .btn i { margin-right: 6px } targeted <i> only;
   restate for the post-Lucide <svg> so the gutter between icon and label
   survives. The translateY hint applied to the sidebar icons isn't needed
   here — vertical-align:middle on the <svg> alongside text in a button
   gives a clean center on its own. */
.toolbox-elements .btn svg.lucide {
    margin-right: 6px;
    vertical-align: middle;
}

/* Search-box icon — the legacy rule (`.search-box .search-icon { font-size:
   16px; line-height: 38px; top: 0; }`) used line-height on the <i> as a
   vertical centering trick that doesn't apply to <svg>. Center via top/
   transform instead, and keep the gentle muted color the original had. */
.search-box .search-icon {
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    color: #74788d;
}

/* === Dashboard / Practitioner Profile post-Dark-Mode tweaks === */

/* KPI mini-stat numeric value — switch the anchor from primary blue to white
   in dark mode for stronger contrast against the dark card body. Light mode
   keeps the default primary so the value still reads against a white card. */
[data-layout-mode="dark"] .card.mini-stats-wid .card-body h4 a,
[data-layout-mode="dark"] .card.mini-stats-wid .card-body h4 a:hover,
[data-layout-mode="dark"] .card.mini-stats-wid .card-body h4 a:focus {
    color: #fff;
}

/* Activities & Alerts card — drop the title-area bottom border and the
   pagination footer's top border for a cleaner card. */
#activities-alerts-card > .card-header {
    border-bottom: 0 !important;
}
#activities-alerts-card .card-body div.border-top {
    border-top: 0 !important;
}

/* Today in Healthcare (DashboardNewsFeed) — strip the inter-item separator
   borders that list-group-flush draws between rows. */
.card .list-group-flush > .list-group-item {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Patient Treatment by Discipline — remove the per-row table separators on
   the AJAX-rendered breakdown table. */
#discipline-breakdown table > tbody > tr > td,
#discipline-breakdown table > tbody > tr {
    border-bottom-width: 0 !important;
    border-top-width: 0 !important;
}

/* Practitioner Profile "Recent activity" — drop the top border above the
   pagination footer. The `_RecentActivity.cshtml` partial wraps that footer
   in a div with `pt-2 border-top`. */
.recent-activity-list + .d-flex.border-top {
    border-top: 0 !important;
}

/* === Patient Face Sheet post-Dark-Mode tweaks === */

/* Patient Summary — drop the divider below the profile-image / name block.
   The card itself draws a hairline at the card edges; the inner section
   border was redundant visual noise. The other border-bottom (alert-flag
   banner) is kept since it separates a colored banner from the body. */
#patientSummaryCard > .card-body.border-bottom {
    border-bottom: 0 !important;
}
/* Re-restore the alert-flag banner divider that the rule above just zeroed. */
#patientSummaryCard > #patient-alert-flag-banner.border-bottom {
    border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Activities & Alerts (Face Sheet variant — no #activities-alerts-card id).
   Drop the title-area bottom border and the pagination footer's top border.
   Scoped to `.facesheet-section` cards that have a `.card-header`, which
   on this view is uniquely _PatientActivitiesCard. */
.facesheet-section > .card-header.border-bottom {
    border-bottom: 0 !important;
}
#patient-alerts-wrapper div.border-top {
    border-top: 0 !important;
}

/* Contact Information / Insurance / Emergency Contacts subcards — these
   render as `<div class="border p-3 rounded">` inside a parent
   `.facesheet-section > .card-body`. Strip the inner border so the parent
   card's hairline carries the organization, and zero the per-row `<li>`
   separators inside Emergency Contacts and Insurance. Padding is kept
   so the content still has breathing room. */
.facesheet-section > .card-body .border.p-3.rounded,
#facesheet-payors > .border.p-3.rounded {
    border: 0 !important;
}
.facesheet-section > .card-body .border.p-3.rounded ul.list-unstyled > li.border-bottom,
#facesheet-payors ul.list-unstyled > li.border-bottom {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Forms & Visits (JS-rendered into `#facesheet-forms-chart` and
   `#facesheet-visits-chart`). Each card is a `.border.p-3.mini-stats-wid`
   stacked pair (Forms on top, Visits below with `border-top-0`), with an
   inner `.border-top.mt-2.pt-2` row separating headline from badges. The
   parent `.facesheet-section` card already provides the hairline frame —
   strip the outer subcard borders and the inner separator. */
#facesheet-forms-chart > .border,
#facesheet-visits-chart > .border {
    border: 0 !important;
}
#facesheet-forms-chart .border-top,
#facesheet-visits-chart .border-top {
    border-top: 0 !important;
}

/* Visit Stats / Form Stats sidebars — `MiniCharts.renderRadialCards()` builds
   a `<table class="table">` whose default Bootstrap `border-bottom-width: 1px`
   on `<td>` cells draws hairlines between every stat row. Zero those so the
   rows read as a clean stack inside the sidebar card. */
#mini-charts-container > .table-responsive > table.table > tbody > tr > td {
    border-bottom-width: 0 !important;
    border-top-width: 0 !important;
}

/* Referrals / Patients top mini-charts — the `buildCardHtml` helper renders
   each card's subtitle/badge footer as `<div class="card-body border-top py-3">`.
   Drop that internal divider; the `.mini-stats-wid` card's outer hairline
   already frames the card. */
.mini-stats-wid > .card-body.border-top {
    border-top: 0 !important;
}

/* `.nav-tabs` bottom border — drop sitewide. In dark mode the
   `--bs-nav-tabs-border-color: #3a425a` paints a clearly visible line that
   competes with the active-tab indicator and adds extraneous chrome; the
   active underline alone carries the affordance just fine. Removed in
   light mode too for consistency (the line was near-invisible there
   anyway). */
.nav-tabs,
.nav-tabs-custom {
    border-bottom: 0 !important;
}

/* Modal header — Bootstrap's default `.modal-header` border-bottom is
   distracting against the otherwise clean modal chrome. The header's
   typographic weight + the close button on the right are sufficient to
   delineate the title area from the body. */
.modal-header {
    border-bottom: 0 !important;
}