/* ==========================================================================
   OSTEO THEME TOKENS — the single source of truth for colour in both apps.

   WHAT THIS FILE IS
   -----------------
   One semantic token set, defined once for LIGHT on :root and overridden once
   for DARK under [data-theme="dark"]. There is no light.css and no dark.css:
   a theme switch changes variable VALUES, not which rules apply.

   The light values are the Osteo palette exactly as it already was — the navy
   (#101a3c / #17246b), the teal (#0bb27b), the mint tints, the slate borders.
   Nothing about light mode is a redesign. If you load this file and switch
   nothing, every screen renders the colour it rendered before.

   HOW THE REST OF THE CSS REACHES IT
   ----------------------------------
   This application already had a token cascade, in families named for the area
   that owns them:

       osteo-brand.css        --oa-*     the brand palette
       dashboard-shell.css    --ds-*     the portal shell, built ON --oa-*
       events.css             --ev-*     built on --ds-*
       osteo-modal.css        --om-*     built on --ds-*
       notifications.css      --nf-*     built on --ds-*
       health-records.css     --hr-*     was literal
       filter-drawer.css      --of-*     was literal
       admin.css (Dominator)  --ad-*     was literal

   Those families are kept. What changed is where the CHAIN BOTTOMS OUT: the
   literals at the root of each family are now var(--token, #literal). So the
   families still mean what they meant, component CSS is untouched, and one
   switch moves all of them. That is why this task did not need to rewrite
   eighty thousand lines of component styles.

   EVERY REFERENCE CARRIES ITS OLD LITERAL AS A FALLBACK — var(--bg-surface,
   #ffffff), not var(--bg-surface). If this stylesheet ever fails to load, the
   application renders in its current light palette rather than unstyled. That
   is deliberate and should be preserved in anything added later.

   TWO COPIES, ONE CONTENT
   -----------------------
   Osteo and Osteo.Dominator have separate wwwroot trees, so this file exists
   twice and the two copies are byte-identical by construction. If you change
   one, change the other. The APP-SPECIFIC parts are not in here — they live in
   each application's own stylesheets.

   NAMING
   ------
   Tokens are named for their ROLE, never their appearance. --bg-surface, not
   --white; --text-secondary, not --grey5. A token whose name describes a colour
   cannot survive a theme switch, which is the whole problem this file exists to
   solve.
   ========================================================================== */

/* ==========================================================================
   1. LIGHT  (the default, and the current Osteo appearance unchanged)
   ========================================================================== */

:root {
    /* tells the browser to render native widgets, scrollbars, form controls
       and autofill in the matching scheme. Cheapest correctness win there is. */
    color-scheme: light;

    /* ---- surfaces ------------------------------------------------------ */
    --bg-page: #f4f9f7; /* the page behind everything */
    --bg-surface: #ffffff; /* cards, panels, tables, modals */
    --bg-surface-2: #fcfdff; /* a surface laid on a surface */
    --bg-surface-hover: #f5f7fc; /* row/menu hover */
    --bg-sidebar: #ffffff;
    --bg-sidebar-accent: #f2fbf7; /* the sidebar's mint foot */
    --bg-sidebar-accent-2: #e6f8f0;
    --bg-header: rgba(255, 255, 255, 0.92); /* sticky, blurred */
    --bg-input: #f5f7fc;
    --bg-input-disabled: #eef1f8;

    /* ---- text ---------------------------------------------------------- */
    --text-primary: #101a3c; /* headings */
    --text-heading: #17246b; /* secondary headings, links at rest */
    --text-body: #2b3769; /* body copy */
    --text-secondary: #6a7aae; /* labels, captions */
    --text-muted: #8b98c2; /* placeholders, de-emphasised meta */
    --text-icon: #7d8bb5; /* standalone glyphs */
    --text-inverse: #ffffff; /* on a brand/solid fill */

    /* ---- borders ------------------------------------------------------- */
    --border-default: #e3e8f5;
    --border-strong: #d3dbee;

    /* ---- brand --------------------------------------------------------- */
    --brand-primary: #0bb27b;
    --brand-primary-hover: #069a68;
    --brand-primary-ink: #0a8f63; /* brand as TEXT, on a light background */
    --brand-primary-light: #35cd97;
    --brand-on-primary: #ffffff; /* text on a brand fill */
    --brand-soft-weak: #f2fbf7; /* mint 50  */
    --brand-soft: #e6f8f0; /* mint 100 */
    --brand-soft-strong: #d5f4e7; /* mint 200 */
    --brand-soft-stronger: #bfeeda; /* mint 300 */
    --brand-soft-strongest: #a5e5cb; /* mint 400 */

    /* ---- status -------------------------------------------------------- */
    /* Each status has three parts, and they are not interchangeable:
         --x        the saturated colour, for a solid fill or a 1px rule
         --x-ink    the same hue darkened enough to be READ on --x-soft
         --x-soft   the chip/banner background
       Badges in this application are light chips with dark text, so the text
       colour is --x-ink. Using --x there is the usual way a status badge ends
       up unreadable. */
    --state-success: #0bb27b;
    --state-success-ink: #0a8f63;
    --state-success-soft: #e6f8f0;
    --state-warning: #e8a02c;
    --state-warning-ink: #a4761b;
    --state-warning-soft: #fdf3d8;
    --state-danger: #e8434f;
    --state-danger-ink: #c62d38;
    --state-danger-soft: #fdeaec;
    --state-info: #2f6fd6;
    --state-info-ink: #2159b4;
    --state-info-soft: #eaf1fd;

    /* ---- elevation, overlay, focus ------------------------------------- */
    --elev-sm: 0 1px 2px rgba(16, 26, 60, 0.04);
    --elev-md: 0 1px 2px rgba(16, 26, 60, 0.04), 0 8px 24px rgba(16, 26, 60, 0.05);
    --elev-lg: 0 24px 64px rgba(16, 26, 60, 0.22);
    --elev-menu: 0 18px 44px rgba(17, 36, 90, 0.14);
    --overlay: rgba(16, 26, 60, 0.45);
    --focus-ring: 0 0 0 3px rgba(11, 178, 123, 0.35);
    --focus-ring-color: #0bb27b;

    /* ---- chart surfaces (consumed by the dashboards' chart options) ----- */
    --chart-grid: #e8edf7;
    --chart-axis: #7d8bb5;
    --chart-tooltip-bg: #ffffff;
    --chart-tooltip-text: #2b3769;

    /* ---- images -------------------------------------------------------- */
    /* Applied to logos and line illustrations that are drawn in dark ink on a
       transparent background. Light: untouched. Dark: see below. */
    --img-onlight-filter: none;
    --avatar-ring: #ffffff;
}

/* ==========================================================================
   2. DARK

   Deep navy rather than black, lifted teal, soft off-white text, muted
   blue-grey secondary text, slate borders. No neon, no purple, no glow.

   The brand teal is LIFTED from #0bb27b to #24c795. This is not a change of
   brand: #0bb27b on a #151e33 surface is about 3.1:1, which fails AA for the
   small text this application uses it for (links, menu state, badge text).
   #24c795 is about 6.6:1. The light theme keeps the exact brand value.

   --brand-on-primary flips to a near-black navy in dark mode for the same
   reason: white on the lifted teal is roughly 2.0:1, dark ink on it is above
   7:1. A filled primary button therefore reads dark-on-teal in dark mode,
   which is the usual treatment and is deliberate, not an oversight.
   ========================================================================== */

/* SPECIFICITY NOTE. A bare [data-theme="dark"] and a bare :root have the SAME
   specificity (0,1,0), so which one wins would depend on stylesheet order — and
   this application loads two dozen stylesheets whose order varies by layout.
   :root[data-theme="dark"] is (0,2,0) and wins outright, which is why every
   token override in this solution is written that way. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-page: #0e1526;
    --bg-surface: #151e33;
    --bg-surface-2: #1a2440;
    --bg-surface-hover: #1f2a48;
    --bg-sidebar: #121a2d;
    --bg-sidebar-accent: #14213a;
    --bg-sidebar-accent-2: #16284a;
    --bg-header: rgba(18, 26, 45, 0.92);
    --bg-input: #1b2540;
    --bg-input-disabled: #161e33;

    --text-primary: #eef2fb;
    --text-heading: #e4ebfa;
    --text-body: #cdd6ea;
    --text-secondary: #9aa8c6;
    --text-muted: #7c8aab;
    --text-icon: #8694b5;
    --text-inverse: #0e1526;

    --border-default: #27334f;
    --border-strong: #3a4a72;

    --brand-primary: #24c795;
    --brand-primary-hover: #38d4a5;
    --brand-primary-ink: #4fdcb0;
    --brand-primary-light: #5fe0bb;
    --brand-on-primary: #06281e;
    --brand-soft-weak: #122a24;
    --brand-soft: #16352c;
    --brand-soft-strong: #1b4538;
    --brand-soft-stronger: #225443;
    --brand-soft-strongest: #2a6553;

    --state-success: #27c08a;
    --state-success-ink: #5fdcae;
    --state-success-soft: #14362b;
    --state-warning: #e0a33a;
    --state-warning-ink: #f0c274;
    --state-warning-soft: #3a2e14;
    --state-danger: #f0646f;
    --state-danger-ink: #ff8d95;
    --state-danger-soft: #3a1b20;
    --state-info: #5c93e8;
    --state-info-ink: #8fb6f2;
    --state-info-soft: #16274a;

    /* A 4%-alpha navy shadow is invisible on a navy surface. Dark elevation is
       carried by near-black at a much higher alpha, plus the surface step. */
    --elev-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --elev-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.45);
    --elev-lg: 0 24px 64px rgba(0, 0, 0, 0.60);
    --elev-menu: 0 18px 44px rgba(0, 0, 0, 0.55);
    --overlay: rgba(4, 8, 18, 0.65);
    --focus-ring: 0 0 0 3px rgba(36, 199, 149, 0.45);
    --focus-ring-color: #24c795;


    /* ---- inverse surfaces (DARK MODE ONLY, deliberately) ----------------
       A panel that is already dark in light mode — Metronic's near-black
       (#181c32), the brand lockup chip, a dark hero. Stage 2 found four of
       them and they had four slightly different near-blacks.

       These two are declared ONLY under dark, and never on :root. That is the
       point: in light every var(--bg-inverse, #181C32) falls through to its own
       original literal, so light mode is bit-exact and no site loses its
       particular near-black. In dark they all land on one raised dark panel,
       which is what a dark theme needs — an inverse surface must stay dark
       rather than flipping to near-white the way an ink token does. */
    --bg-inverse: #1a2440;
    /* ---- overlays that float on map tiles (DARK ONLY) -------------------
       A legend or a state panel sitting on a map is a near-opaque white pill:
       rgba(255,255,255,.94). On dark tiles that is a bright blob, and its text
       colour is a token that has turned light — so it reads white on white.

       Declared only under dark, exactly like --bg-inverse: in light every
       var(--map-overlay, rgba(255,255,255,.94)) falls through to the value the
       rule always had, so the light maps are untouched. Translucent on purpose,
       because the tiles should still show through. */
    --map-overlay: rgba(21, 30, 51, .94);
    --map-overlay-weak: rgba(21, 30, 51, .86);

    --text-on-inverse: #eef2fb;
    --chart-grid: #27334f;
    --chart-axis: #8694b5;
    --chart-tooltip-bg: #1a2440;
    --chart-tooltip-text: #cdd6ea;

    /* Dark-ink logos and line art drawn for a white background: inverted and
       hue-rotated back, which keeps a teal mark teal instead of turning it
       magenta. Applied ONLY where a stylesheet opts in with
       filter: var(--img-onlight-filter) — never blanket-applied, because it
       must not touch a practitioner's photograph or a patient's avatar. */
    --img-onlight-filter: invert(1) hue-rotate(180deg) brightness(1.08);
    --avatar-ring: #27334f;
}

/* ==========================================================================
   3. BASE SURFACE

   The smallest set of element rules that make a page dark at all. Scoped to
   [data-theme="dark"] so light mode inherits exactly what it had: this file
   adds no light-mode rules beyond the token block above.
   ========================================================================== */

[data-theme="dark"] body {
    background-color: var(--bg-page);
    color: var(--text-body);
}

[data-theme="dark"] ::selection {
    background: var(--brand-soft-stronger);
    color: var(--text-primary);
}

/* Scrollbars. color-scheme handles Firefox and most of Chromium; this covers
   the WebKit track explicitly so a pale gutter does not frame a dark page. */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-page);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   4. VENDOR SURFACES

   Metronic (asset/css/style.bundle.css), Bootstrap, DataTables, select2,
   flatpickr, bootstrap-timepicker and fullcalendar ship their own light
   colours, and this application does not own those files — they are vendor
   bundles and editing them means losing the edit at the next update.

   So they are remapped here, in a bounded list, under [data-theme="dark"]
   only. Two rules for anything added to this section:

     1. It must be a SURFACE, BORDER or TEXT colour. Layout, spacing and
        behaviour belong to the vendor.
     2. It must name a specific vendor class. No bare element selectors, no
        !important sprees, nothing that would quietly restyle application
        components that happen to sit inside a vendor container.

   Metronic's own variables are set first where it exposes them, because a
   variable the vendor already consumes reaches far more of its stylesheet than
   any list of selectors could.
   ========================================================================== */

:root[data-theme="dark"] {
    /* ---- Bootstrap 5 ---------------------------------------------------- */
    --bs-body-bg: var(--bg-page);
    --bs-body-color: var(--text-body);
    --bs-border-color: var(--border-default);
    --bs-secondary-bg: var(--bg-surface-2);
    --bs-tertiary-bg: var(--bg-surface-hover);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-link-color: var(--brand-primary-ink);
    --bs-link-hover-color: var(--brand-primary-light);

    /* ---- Metronic ------------------------------------------------------- */
    --kt-body-bg: var(--bg-page);
    --kt-body-color: var(--text-body);
    --kt-card-bg: var(--bg-surface);
    --kt-card-border-color: var(--border-default);
    --kt-border-color: var(--border-default);
    --kt-gray-100: var(--bg-surface-2);
    --kt-gray-200: var(--bg-surface-hover);
    --kt-gray-300: var(--border-default);
    --kt-gray-400: var(--border-strong);
    --kt-gray-500: var(--text-muted);
    --kt-gray-600: var(--text-secondary);
    --kt-gray-700: var(--text-body);
    --kt-gray-800: var(--text-heading);
    --kt-gray-900: var(--text-primary);
    --kt-text-muted: var(--text-secondary);
    --kt-input-bg: var(--bg-input);
    --kt-input-color: var(--text-body);
    --kt-input-border-color: var(--border-default);
    --kt-dropdown-bg: var(--bg-surface);
    --kt-modal-bg: var(--bg-surface);
    --kt-modal-content-bg: var(--bg-surface);
    --kt-drawer-bg-color: var(--bg-surface);
    --kt-table-color: var(--text-body);
    --kt-table-bg: transparent;
    --kt-table-striped-bg: var(--bg-surface-2);
    --kt-table-hover-bg: var(--bg-surface-hover);
    --kt-table-border-color: var(--border-default);
    --kt-tooltip-bg: var(--bg-surface-2);
    --kt-tooltip-color: var(--text-body);
    --kt-popover-bg: var(--bg-surface);
    --kt-component-hover-bg: var(--bg-surface-hover);
}

/* ---- the utility classes the views actually use ------------------------- */
/* These are Bootstrap/Metronic helpers written straight into Razor markup, so
   they cannot be reached through a variable. Each one is a background or text
   colour that is hard-coded white or near-white in the vendor bundle. */
[data-theme="dark"] .bg-body,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .menu-sub-dropdown,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .drawer,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .popover,
[data-theme="dark"] .toast {
    background-color: var(--bg-surface);
    color: var(--text-body);
    border-color: var(--border-default);
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-light-secondary,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-header {
    background-color: var(--bg-surface-2);
    border-color: var(--border-default);
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
    color: var(--text-body) !important;
}

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] hr,
[data-theme="dark"] .separator {
    border-color: var(--border-default);
    background-color: var(--border-default);
}

/* ---- forms -------------------------------------------------------------- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--bg-input);
    color: var(--text-body);
    border-color: var(--border-default);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1; /* Firefox dims placeholders by default; the token already is dim */
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--bg-input);
    color: var(--text-body);
    border-color: var(--focus-ring-color);
    box-shadow: var(--focus-ring);
}

/* DISABLED AND READONLY ARE DIFFERENT STATES AND MUST LOOK DIFFERENT.
   Disabled means "you cannot use this"; readonly means "this is a real value
   you may read and copy, but not edit". Flattening them to one grey is how a
   readonly field gets mistaken for a broken one. */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] .form-control[disabled] {
    background-color: var(--bg-input-disabled);
    color: var(--text-muted);
    border-color: var(--border-default);
    opacity: 1;
}

[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] input[readonly],
[data-theme="dark"] textarea[readonly] {
    background-color: var(--bg-surface-2);
    color: var(--text-body);
    border-style: dashed;
}

/* The native calendar/clock pickers are black glyphs on a transparent field. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    opacity: 0.75;
}

[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button {
    filter: invert(1) brightness(1.6);
}

/* AUTOFILL. Chromium paints its own pale yellow over the field and ignores
   background-color. The only reliable override is an inset shadow the width of
   the control plus a text-fill colour, with a long transition so the browser's
   own repaint never wins. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-body);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
    box-shadow: 0 0 0 1000px var(--bg-input) inset;
    caret-color: var(--text-body);
    transition: background-color 5000s ease-in-out 0s;
}

[data-theme="dark"] .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-strong);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: var(--text-secondary);
}

[data-theme="dark"] .invalid-feedback,
[data-theme="dark"] .field-validation-error,
[data-theme="dark"] .text-danger {
    color: var(--state-danger-ink) !important;
}

[data-theme="dark"] .is-invalid,
[data-theme="dark"] .input-validation-error {
    border-color: var(--state-danger) !important;
}

/* ---- tables ------------------------------------------------------------- */
[data-theme="dark"] .table {
    --bs-table-color: var(--text-body);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-default);
    --bs-table-striped-bg: var(--bg-surface-2);
    --bs-table-striped-color: var(--text-body);
    --bs-table-hover-bg: var(--bg-surface-hover);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: var(--brand-soft);
    --bs-table-active-color: var(--text-primary);
    color: var(--text-body);
    border-color: var(--border-default);
}

[data-theme="dark"] .table > thead {
    color: var(--text-secondary);
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border-default);
    box-shadow: none;
}

/* A sticky header must be opaque or the rows scroll through it. */
[data-theme="dark"] .table thead th.sticky-top,
[data-theme="dark"] .table-sticky thead th {
    background-color: var(--bg-surface);
}

/* ---- DataTables --------------------------------------------------------- */
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_length,
[data-theme="dark"] .dataTables_filter {
    color: var(--text-secondary);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="dark"] .page-link {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-body) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary) !important;
}

[data-theme="dark"] .page-item.disabled .page-link {
    color: var(--text-muted) !important;
    background-color: transparent;
}

/* ---- modal, backdrop, drawer -------------------------------------------- */
/* The backdrop must stay VISIBLE in dark mode. Bootstrap's default is black at
   50%, which on a near-black page reads as nothing at all and the dialog looks
   like it is floating in the page rather than over it. */
[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .drawer-overlay,
[data-theme="dark"] .offcanvas-backdrop {
    background-color: var(--overlay);
    opacity: 1;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-default);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.8);
}

/* ---- dropdowns and menus ------------------------------------------------ */
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .menu-link {
    color: var(--text-body);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .menu-link:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-default);
}

/* ---- select2 ------------------------------------------------------------ */
[data-theme="dark"] .select2-container--bootstrap5 .select2-selection,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-input);
    border-color: var(--border-default);
    color: var(--text-body);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-body);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-body);
}

[data-theme="dark"] .select2-search__field {
    background-color: var(--bg-input) !important;
    color: var(--text-body) !important;
    border-color: var(--border-default) !important;
}

[data-theme="dark"] .select2-results__option {
    color: var(--text-body);
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: var(--brand-soft-strong);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-selection__choice {
    background-color: var(--brand-soft) !important;
    border-color: var(--brand-soft-stronger) !important;
    color: var(--text-primary) !important;
}

/* ---- flatpickr ---------------------------------------------------------- */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--elev-md);
    color: var(--text-body);
}

[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--bg-surface);
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom:before,
[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--bg-surface);
}

[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-weekdays,
[data-theme="dark"] span.flatpickr-weekday {
    background: var(--bg-surface);
    color: var(--text-secondary);
    fill: var(--text-secondary);
}

[data-theme="dark"] .flatpickr-day {
    color: var(--text-body);
}

[data-theme="dark"] .flatpickr-day:hover {
    background: var(--bg-surface-hover);
    border-color: var(--bg-surface-hover);
}

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--brand-primary);
}

[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--text-muted);
}

[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    background: var(--bg-surface);
    color: var(--text-body);
}

[data-theme="dark"] .numInputWrapper span {
    border-color: var(--border-default);
}

/* ---- bootstrap-timepicker ----------------------------------------------- */
[data-theme="dark"] .bootstrap-timepicker-widget.dropdown-menu,
[data-theme="dark"] .bootstrap-timepicker-widget table td input {
    background-color: var(--bg-surface);
    color: var(--text-body);
    border-color: var(--border-default);
}

[data-theme="dark"] .bootstrap-timepicker-widget a.btn,
[data-theme="dark"] .bootstrap-timepicker-widget input {
    color: var(--text-body);
}

/* ---- fullcalendar -------------------------------------------------------- */
[data-theme="dark"] .fc {
    --fc-page-bg-color: var(--bg-surface);
    --fc-neutral-bg-color: var(--bg-surface-2);
    --fc-border-color: var(--border-default);
    --fc-today-bg-color: var(--brand-soft-weak);
    --fc-list-event-hover-bg-color: var(--bg-surface-hover);
    --fc-highlight-color: var(--brand-soft);
    color: var(--text-body);
}

[data-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-theme="dark"] .fc .fc-daygrid-day-number,
[data-theme="dark"] .fc .fc-list-day-text,
[data-theme="dark"] .fc .fc-list-day-side-text {
    color: var(--text-body);
}

[data-theme="dark"] .fc .fc-button {
    background-color: var(--bg-surface-2);
    border-color: var(--border-default);
    color: var(--text-body);
}

[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
[data-theme="dark"] .fc .fc-button-primary:not(:disabled):active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

/* ---- ion.rangeSlider ----------------------------------------------------- */
[data-theme="dark"] .irs-line,
[data-theme="dark"] .irs-grid-text {
    background-color: var(--bg-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .irs-bar {
    background-color: var(--brand-primary);
}

[data-theme="dark"] .irs-from,
[data-theme="dark"] .irs-to,
[data-theme="dark"] .irs-single {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

/* ---- SweetAlert2 (OsteoAlert) -------------------------------------------- */
[data-theme="dark"] .swal2-popup {
    background: var(--bg-surface);
    color: var(--text-body);
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container {
    color: var(--text-body);
}

[data-theme="dark"] .swal2-container {
    background-color: var(--overlay);
}

/* ---- toastr -------------------------------------------------------------- */
[data-theme="dark"] #toast-container > div {
    box-shadow: var(--elev-md);
}

/* ==========================================================================
   5. THEME CONTROL

   The Light / Dark / System control itself, shared by both applications.
   Deliberately lives with the tokens rather than in a shell stylesheet,
   because the control has to exist on screens that load a different shell —
   the sign-in page, the public pages and the admin.
   ========================================================================== */

.osteo-theme {
    position: relative;
    display: inline-flex;
}

.osteo-theme__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 184px;
    padding: 6px;
    border: 1px solid var(--border-default, #e3e8f5);
    border-radius: 12px;
    background: var(--bg-surface, #ffffff);
    box-shadow: var(--elev-menu, 0 18px 44px rgba(17, 36, 90, 0.14));
}

.osteo-theme__menu[hidden] {
    display: none;
}

.osteo-theme__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body, #2b3769);
    text-align: left;
    cursor: pointer;
}

.osteo-theme__option:hover {
    background: var(--bg-surface-hover, #f5f7fc);
    color: var(--text-primary, #101a3c);
}

.osteo-theme__option:focus-visible {
    outline: 2px solid var(--focus-ring-color, #0bb27b);
    outline-offset: -2px;
}

.osteo-theme__option > i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--text-icon, #7d8bb5);
}

/* THE SELECTED STATE IS NOT CARRIED BY THE ICON. The icon says which MODE a row
   is; the tick and the weight say which one is CHOSEN. A user who cannot tell a
   sun from a moon — or who has icons failing to load — still sees which row is
   active. */
.osteo-theme__option[aria-checked="true"] {
    background: var(--brand-soft, #e6f8f0);
    color: var(--brand-primary-ink, #0a8f63);
    font-weight: 600;
}

.osteo-theme__option[aria-checked="true"] > i {
    color: var(--brand-primary-ink, #0a8f63);
}

.osteo-theme__tick {
    margin-left: auto;
    font-size: 11px;
    opacity: 0;
}

.osteo-theme__option[aria-checked="true"] .osteo-theme__tick {
    opacity: 1;
}

/* The control before theme.js has run: the trigger is usable, the menu stays
   shut. Progressive enhancement, so a script failure cannot leave an open
   panel sitting over the header. */
.osteo-theme:not([data-ready]) .osteo-theme__menu {
    display: none;
}

/* A trigger for a shell that has no round icon-button of its own — the auth and
   public header, which is a text nav. Sized to sit on the same baseline as an
   .oa-nav__link without borrowing its text padding. */
.osteo-theme__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border-default, #e3e8f5);
    border-radius: 10px;
    background: var(--bg-surface, #ffffff);
    color: var(--text-icon, #7d8bb5);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.osteo-theme__btn:hover {
    color: var(--brand-primary-ink, #0a8f63);
    border-color: var(--brand-primary, #0bb27b);
}

.osteo-theme__btn:focus-visible {
    outline: 2px solid var(--focus-ring-color, #0bb27b);
    outline-offset: 2px;
}

/* ==========================================================================
   6. THE LEGACY METRONIC SHELL

   Views/Shared/_Layout.cshtml still carries data-kt-app-layout="dark-sidebar",
   which is Metronic telling itself to paint a dark sidebar while the rest of
   the page is light. In dark mode that leaves a second, differently-dark
   sidebar beside this theme's navy — two dark greys that do not match read
   worse than one. Pinned to the theme's own sidebar surface.
   ========================================================================== */

[data-theme="dark"] [data-kt-app-layout="dark-sidebar"] .app-sidebar,
[data-theme="dark"] .app-sidebar {
    background-color: var(--bg-sidebar);
    border-color: var(--border-default);
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .app-toolbar {
    background-color: var(--bg-header);
    border-color: var(--border-default);
}

[data-theme="dark"] .app-sidebar .menu-item .menu-link {
    color: var(--text-body);
}

[data-theme="dark"] .app-sidebar .menu-item .menu-link:hover,
[data-theme="dark"] .app-sidebar .menu-item .menu-link.active {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* ==========================================================================
   7. GOOGLE MAPS

   The tiles themselves are styled in JavaScript — no stylesheet can reach
   inside them — by FormScripts/map-theme.js, which holds the dark palette and
   re-applies it to every live map on a theme change.

   What IS reachable from here is the chrome Google renders around an
   InfoWindow: a white rounded panel, a white tail triangle and a dark close
   glyph. GoogleMapScript.js still opens InfoWindows (Event Create, Event
   Detail, the practitioner dashboard), and CustomStyle.css already strips their
   padding so the application's own card sits inside — which means in dark mode
   the card would have sat on a white ring.

   Deliberately narrow: surface, border and the tail. Nothing about the
   InfoWindow's size, position or behaviour is touched, and the Google logo and
   attribution strip are left exactly as they are — their terms require them to
   stay legible, and they are drawn over the tiles rather than over the page.
   ========================================================================== */

[data-theme="dark"] .gm-style .gm-style-iw-c,
[data-theme="dark"] .gm-style .gm-style-iw-d,
[data-theme="dark"] .gm-style .gm-style-iw {
    background-color: var(--bg-surface);
    color: var(--text-body);
}

/* The little triangle that points at the pin is a rotated square sharing the
   panel's background, so it has to move with it or the panel grows a white nib. */
[data-theme="dark"] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, var(--bg-surface) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%);
}

[data-theme="dark"] .gm-style .gm-style-iw-tc::after {
    background: var(--bg-surface);
}

/* Google's close button is a dark glyph on a transparent ground. */
[data-theme="dark"] .gm-style .gm-ui-hover-effect > span,
[data-theme="dark"] .gm-style button.gm-ui-hover-effect > span {
    background-color: var(--text-secondary);
}

/* The zoom / fullscreen controls are white buttons with dark glyphs. */
[data-theme="dark"] .gm-style .gm-bundled-control button,
[data-theme="dark"] .gm-style .gm-control-active {
    background-color: var(--bg-surface) !important;
}

/* The pane behind the tiles, visible for the moment before they arrive and in
   the gutters when a map is zoomed out past the world. */
[data-theme="dark"] .gm-style > div:first-child {
    background-color: var(--bg-page);
}