/* Application css variables, common classes, transitions and body style */

:root {
    --commonTextColor: #545c5e;
    --mainBackgroundColor: #e2e2e2;
    --mainColor: #1b2931;
    --mainColorLighter: #475562;
    --mainColorLightest: #5e737e;
    /* Same hue as --mainColor; only for plain foreground text (.text-mainColor, .btn-outline-mainColor), lightened in dark mode. */
    --mainColorOnDark: var(--mainColor);
    /* Shared "selected pill/tab" token for our own pills (.select-tab-menu, .pill-tabs .nav-link.active).
       Real Bootstrap .nav-pills redeclare it locally, so they get their own declaration (see .nav-pills in app.css). */
    --bs-nav-pills-link-active-bg: var(--mainColor);
    --navPillsColor: #255480;
    --cardsBackgroundColorDarker: #fff;
    --cardsBackgroundColorLighter: #fff;
    --ithr-calendar-bordas: #cee2f2;
    --ithr-primary: #727cf5;
    --ithr-primary-rgb: 114,124,245;
    --ithr-primary-bg-subtle: #f1f2fe;
    --ithr-success: #28a745;
    --ithr-success-rgb: 40,167,69;
    --ithr-success-bg-subtle: #e7faf5;
    --ithr-info: #39afd1;
    --ithr-info-rgb: 57, 175, 209;
    --ithr-info-bg-subtle: #ebf7fa;
    --ithr-warning: #ffc35a;
    --ithr-warning-rgb: 255,195,90;
    --ithr-warning-bg-subtle: #fff9ef;
    --ithr-main-purple: #727CF5;
    --ithr-danger: #eb4b4b;
    --ithr-danger-bg-subtle: #ffeff2;
    --ithr-secondary-color: var(--commonTextColor);
    --ithr-white: #fff;
    --ithr-lightGreen: #28a745;
    /* Neutral text/surface scale for platform components: add tokens here, don't hardcode grays in component files. */
    --ithr-text-strong: #0f172a;
    --ithr-text-default: #1e293b;
    --ithr-text-emphasis: #334155;
    --ithr-text-muted: #64748b;
    --ithr-text-subtle: #94a3b8;
    --ithr-shadow-color-rgb: 15, 23, 42;
    --ithr-track-color-rgb: 148, 163, 184;
    --ithr-border-subtle: rgba(var(--ithr-shadow-color-rgb), 0.06);
    --ithr-surface-hover: rgba(var(--ithr-shadow-color-rgb), 0.05);
    --ithr-surface-muted: rgba(var(--ithr-shadow-color-rgb), 0.08);
    --ithr-brd-rad-sm: 0.25rem;
    --it-font-size-base: 0.9rem;
    --it-font-size-sm: 0.8rem;
    --it-font-size-lg: 1rem;
    --it-font-size-xl: 1.125rem;
    --theme-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode: flips only the neutral text/surface scale of our custom components (stat cards, pill tabs, ...).
   Theme colors (--mainColor and friends) are untouched: dark mode and theme color are independent settings.
   Toggled via body[data-bs-theme], the attribute Bootstrap reads too (see darkMode.js).

   Palette is Tailwind's gray scale as shipped by Flowbite's admin dashboard (page gray-800 #1f2937, card gray-700 #374151,
   hover/border gray-600 #4b5563). --ithr-text-muted/--ithr-text-subtle are one step lighter: gray-500 measured ~2.1:1 on the
   card (reported as unreadable); #b0b7c3/#9ca3af give ~5.1:1/~4.1:1. */
body[data-bs-theme="dark"] {
    color-scheme: dark;

    /* .bg-light on <body> is a Bootstrap utility with !important, so overriding it needs !important too. */
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;

    /* Bootstrap's own dark tokens: every native component is built from these, so recoloring them carries the palette everywhere. */
    --bs-body-bg: #1f2937;
    --bs-body-bg-rgb: 31, 41, 55;
    --bs-body-color: #e5e7eb;
    --bs-body-color-rgb: 229, 231, 235;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(229, 231, 235, 0.75);
    --bs-secondary-color-rgb: 229, 231, 235;
    --bs-secondary-bg: #374151;
    --bs-secondary-bg-rgb: 55, 65, 81;
    --bs-tertiary-color: rgba(229, 231, 235, 0.5);
    --bs-tertiary-color-rgb: 229, 231, 235;
    --bs-tertiary-bg: #283141;
    --bs-tertiary-bg-rgb: 40, 49, 65;
    --bs-border-color: #4b5563;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);

    --commonTextColor: #d1d5db;
    /* --mainColor stays the tenant's hex in both modes (solid fill + white text reads fine either way). Only plain-text uses
       (.text-mainColor, .btn-outline-mainColor) need a lightened variant: the darkest colors (Cinza) drop under 3:1 on a dark page. */
    --mainColorOnDark: color-mix(in srgb, var(--mainColor) 40%, white 60%);
    --mainBackgroundColor: #4b5563;
    --mainBackgroundColorRGB: 75, 85, 99;
    --cardsBackgroundColorDarker: #374151;
    --cardsBackgroundColorLighter: #374151;
    --ithr-text-strong: #ffffff;
    --ithr-text-default: #e5e7eb;
    --ithr-text-emphasis: #d1d5db;
    --ithr-text-muted: #b0b7c3;
    --ithr-text-subtle: #9ca3af;
    --ithr-shadow-color-rgb: 0, 0, 0;
    --ithr-track-color-rgb: 107, 114, 128;
    --ithr-border-subtle: rgba(107, 114, 128, 0.4);
    --ithr-surface-hover: rgba(107, 114, 128, 0.18);
    --ithr-surface-muted: rgba(107, 114, 128, 0.28);

    /* .badge-ithr-*-lighten: a fixed pale hex looks like a bright patch on dark; a transparent tint works on any surface. */
    --ithr-primary-bg-subtle: color-mix(in srgb, var(--ithr-primary) 18%, transparent);
    --ithr-success-bg-subtle: color-mix(in srgb, var(--ithr-success) 18%, transparent);
    --ithr-info-bg-subtle: color-mix(in srgb, var(--ithr-info) 18%, transparent);
    --ithr-warning-bg-subtle: color-mix(in srgb, var(--ithr-warning) 18%, transparent);
    --ithr-danger-bg-subtle: color-mix(in srgb, var(--ithr-danger) 18%, transparent);

    /* bootstrap-year-calendar custom properties (lib/bootstrap-year-calendar-1.1.0).
       A property declared as var(--bs-body-bg, #fff) at :root is resolved once, at :root, so it keeps the light value and does not
       follow body[data-bs-theme=dark] (verified on a real day cell). Every --calendar-* that wraps a --bs-* token differing between
       modes is therefore re-declared here, where the dark values already hold.
       --calendar-primary/-secondary/-success/-warning/-danger/-info are left out: Bootstrap never changes those --bs-* between modes.
       --calendar-bg-active/-text-muted/-text-light/-border-light/-today-border/-today-bg are never used by the library's CSS;
       they get dark values anyway in case a custom renderer starts using them. */
    --calendar-bg: var(--bs-body-bg);
    --calendar-bg-subtle: var(--bs-secondary-bg);
    --calendar-bg-hover: var(--bs-tertiary-bg);
    --calendar-bg-active: var(--ithr-surface-hover);
    --calendar-text: var(--bs-body-color);
    --calendar-text-secondary: var(--bs-secondary-color);
    --calendar-text-muted: var(--ithr-text-subtle);
    --calendar-border: var(--bs-border-color);
    --calendar-border-subtle: rgba(255, 255, 255, 0.1);
    --calendar-border-light: var(--ithr-border-subtle);
    --calendar-weekend-bg: var(--ithr-surface-muted);
    --calendar-weekend-text: var(--ithr-text-emphasis);
    --calendar-today-bg: color-mix(in srgb, var(--ithr-warning) 18%, transparent);
}

/* Bootstrap's .bg-white/.bg-light/.text-dark are static (they ignore data-bs-theme) but the app uses them as "card surface" and
   "strong text". Route them through the neutral tokens instead of editing every usage; Bootstrap's rules use !important, so these must too. */
body[data-bs-theme="dark"] .bg-white {
    background-color: var(--cardsBackgroundColorDarker) !important;
}

body[data-bs-theme="dark"] .bg-light {
    /* rgba + --bs-bg-opacity (not a flat background-color) so bg-opacity-* combos —
       e.g. the app-wide loading-indicator's "bg-light bg-opacity-75" — keep working. */
    background-color: rgba(var(--mainBackgroundColorRGB), var(--bs-bg-opacity, 1)) !important;
}

body[data-bs-theme="dark"] .text-dark {
    color: var(--ithr-text-strong) !important;
}

/* ...except .text-dark on Bootstrap's fixed light fills (badge bg-warning/bg-info text-dark): keep the dark label there. */
body[data-bs-theme="dark"] .bg-warning.text-dark,
body[data-bs-theme="dark"] .bg-info.text-dark {
    color: #212529 !important;
}

/* .text-secondary/.text-primary/.text-success/.text-danger are fixed "named palette" colors that Bootstrap never adapts to dark mode
   (~2.2:1 on the #374151 card). Route them to the dark-aware tokens Bootstrap already computes, like the .btn-outline-* fix below.
   .text-warning/.text-info are light enough and are left alone. */
body[data-bs-theme="dark"] .text-secondary {
    color: var(--bs-secondary-color) !important;
}

body[data-bs-theme="dark"] .text-primary {
    color: var(--bs-primary-text-emphasis) !important;
}

body[data-bs-theme="dark"] .text-success {
    color: var(--bs-success-text-emphasis) !important;
}

body[data-bs-theme="dark"] .text-danger {
    color: var(--bs-danger-text-emphasis) !important;
}

/* A plain .card has no separation from the page in dark mode (--bs-card-bg defaults to --bs-body-bg, both #1f2937). Give it the
   lighter card surface used for .bg-white. Scoped to ".card" itself: Bootstrap sets --bs-card-bg on the card element, and a local
   declaration beats one inherited from <body>. */
body[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--cardsBackgroundColorDarker);
}

/* .list-group rows default to --bs-list-group-bg = --bs-body-bg: in dark mode that is darker than the card, so the rows of a
   .list-group-flush inside a card showed as dark bands. Transparent lets rows take the surface they sit on, as in light mode. */
body[data-bs-theme="dark"] .list-group-flush {
    --bs-list-group-bg: transparent;
}

/* .table-light is "always light" by design, but the app uses it as the default <thead>, so it gets the same neutral tokens. */
body[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--ithr-text-strong);
    --bs-table-bg: var(--mainBackgroundColor);
    --bs-table-border-color: var(--ithr-border-subtle);
    --bs-table-striped-bg: var(--ithr-surface-muted);
    --bs-table-striped-color: var(--ithr-text-strong);
    --bs-table-active-bg: var(--ithr-surface-hover);
    --bs-table-active-color: var(--ithr-text-strong);
    --bs-table-hover-bg: var(--ithr-surface-hover);
    --bs-table-hover-color: var(--ithr-text-strong);
}

/* .btn-outline-*: Bootstrap hardcodes each variant's color (#0d6efd, #dc3545, ...) as --bs-btn-color, tuned for white; on the dark
   card several measure under 2:1 (.btn-outline-danger ~1.6:1). Wire in the lighter "-text-emphasis" variant Bootstrap already computes
   for dark mode; filled hover/active then needs a dark label. */
body[data-bs-theme="dark"] .btn-outline-primary,
body[data-bs-theme="dark"] .btn-outline-secondary,
body[data-bs-theme="dark"] .btn-outline-success,
body[data-bs-theme="dark"] .btn-outline-danger,
body[data-bs-theme="dark"] .btn-outline-warning,
body[data-bs-theme="dark"] .btn-outline-info,
body[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-hover-color: #1f2937;
    --bs-btn-active-color: #1f2937;
}

body[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
}

body[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-text-emphasis);
    --bs-btn-border-color: var(--bs-secondary-text-emphasis);
    --bs-btn-hover-bg: var(--bs-secondary-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-secondary-text-emphasis);
    --bs-btn-active-bg: var(--bs-secondary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-secondary-text-emphasis);
}

body[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--bs-success-text-emphasis);
    --bs-btn-border-color: var(--bs-success-text-emphasis);
    --bs-btn-hover-bg: var(--bs-success-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-success-text-emphasis);
    --bs-btn-active-bg: var(--bs-success-text-emphasis);
    --bs-btn-active-border-color: var(--bs-success-text-emphasis);
}

body[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-bg: var(--bs-danger-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-bg: var(--bs-danger-text-emphasis);
    --bs-btn-active-border-color: var(--bs-danger-text-emphasis);
}

body[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color: var(--bs-warning-text-emphasis);
    --bs-btn-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-hover-bg: var(--bs-warning-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-bg: var(--bs-warning-text-emphasis);
    --bs-btn-active-border-color: var(--bs-warning-text-emphasis);
}

body[data-bs-theme="dark"] .btn-outline-info {
    --bs-btn-color: var(--bs-info-text-emphasis);
    --bs-btn-border-color: var(--bs-info-text-emphasis);
    --bs-btn-hover-bg: var(--bs-info-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-info-text-emphasis);
    --bs-btn-active-bg: var(--bs-info-text-emphasis);
    --bs-btn-active-border-color: var(--bs-info-text-emphasis);
}

/* .btn-outline-dark is near-black on dark: same -text-emphasis fix. .btn-outline-light is left alone (already near white). */
body[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--bs-dark-text-emphasis);
    --bs-btn-border-color: var(--bs-dark-text-emphasis);
    --bs-btn-hover-bg: var(--bs-dark-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-dark-text-emphasis);
    --bs-btn-active-bg: var(--bs-dark-text-emphasis);
    --bs-btn-active-border-color: var(--bs-dark-text-emphasis);
}

/* .btn-light stays a solid white box in dark mode: recast it as a subtle neutral button with the dark surface tokens and light text. */
body[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--ithr-text-default);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--ithr-text-strong);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--ithr-text-strong);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
}

/* "Gerir Serviço" modal (ServicosEscalasAvancadas/Index.cshtml, #manageServiceModal): the .bg-opacity-10 icon badges nearly vanish on
   the dark .btn-light above, so bump the opacity. Scoped to this modal; the utility is used for unrelated things elsewhere. */
body[data-bs-theme="dark"] #manageServiceModal .bg-opacity-10 {
    --bs-bg-opacity: .22;
}

/* .select-tab-menu (the active top-level nav pill) uses a faint --mainColor tint with --mainColor text, which only works on light pages:
   no single color-mix ratio keeps Cinza legible on dark without turning Indigo/Ciano/Ambar into pastel. Use solid fill + white text,
   as .rail-item.active and .pill-tabs .nav-link.active do. */
body[data-bs-theme="dark"] .select-tab-menu,
body[data-bs-theme="dark"] .select-tab-menu-parent {
    background-color: var(--bs-nav-pills-link-active-bg) !important;
    color: #fff !important;
    border-color: var(--bs-nav-pills-link-active-bg) !important;
}

/* Same problem, same fix, for the Aprovações pending-count pill in the page header. */
body[data-bs-theme="dark"] .aprov-total-pill {
    color: #fff;
    background: var(--bs-nav-pills-link-active-bg);
}

/* .text-mainColor (entity name + date on the dashboards) and .btn-outline-mainColor use --mainColor as plain text/border: route them
   to --mainColorOnDark. The date also stacks .opacity-75, which halves the contrast again, so ease that off in dark mode. */
body[data-bs-theme="dark"] .text-mainColor {
    color: var(--mainColorOnDark) !important;
}

body[data-bs-theme="dark"] .text-mainColor.opacity-75 {
    opacity: 0.9;
}

body[data-bs-theme="dark"] .btn-outline-mainColor {
    border-color: var(--mainColorOnDark);
    color: var(--mainColorOnDark);
}

    body[data-bs-theme="dark"] .btn-outline-mainColor:hover {
        background-color: var(--mainColorOnDark);
        border-color: var(--mainColorOnDark);
        color: #1f2937;
    }

/* .dropdown-item.active/:active (a selected item: current theme swatch, language, ...) uses --mainColor as text, which vanishes on a
   dark menu. Use --mainColorOnDark for text/border; the tint ratios stay as in light mode. Plain :hover already follows Bootstrap's dark mode. */
body[data-bs-theme="dark"] .dropdown-item.active,
body[data-bs-theme="dark"] .dropdown-item:active {
    background-color: color-mix(in srgb, var(--mainColorOnDark) 10%, transparent) !important;
    color: var(--mainColorOnDark) !important;
    border-color: color-mix(in srgb, var(--mainColorOnDark) 25%, transparent) !important;
}

/* Same plain-text-on-dark-page problem, same fix, for the active tab in .nav-tabs (Bootstrap's
   own active-tab background is --bs-body-bg, i.e. the page itself, in both modes). */
body[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--mainColorOnDark);
    border-bottom-color: var(--mainColorOnDark);
}

/* Other plain-text uses of --mainColor (~1.7–2.6:1 on the dark card): .color-main (footer) and the non-active pagination links.
   The active page keeps its solid fill + white text. */
body[data-bs-theme="dark"] .color-main {
    color: var(--mainColorOnDark) !important;
}

body[data-bs-theme="dark"] .pagination .page-item:not(.active):not(.disabled) .page-link {
    color: var(--mainColorOnDark);
}

    /* Light mode hover fills with --mainColorLightest, which the lightened text above would disappear into: neutral hover instead,
       like .dropdown-item/.nav-tabs. */
    body[data-bs-theme="dark"] .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
        background-color: var(--ithr-surface-hover);
    }

/* .navbar.bg-mainColor-gradient (top brand bar): a saturated slab reads as a glowing stripe on a dark page, so keep it on the page's
   neutral surface, separated by a shadow (as Flowbite does). Scoped to the compound selector so modal/card headers and the calendar
   form-control, which share .bg-mainColor-gradient as a branded accent, keep the gradient. */
body[data-bs-theme="dark"] .navbar.bg-mainColor-gradient {
    background: var(--bs-body-bg) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* .stat-card--dark's accent is --bs-dark, a fixed near-black: on a dark card that is dark icon on dark circle on dark card.
   Use a light token in dark mode. */
body[data-bs-theme="dark"] .stat-card--dark {
    --card-accent-1: var(--ithr-text-strong);
}

/* Fancytree (lib/fancytree-master, skin-win8): every department/entity/terminal tree, always with the default "fancytree-plain" class.
   Don't edit ui.fancytree.css (auto-generated from LESS): the overrides live here. */

/* Node titles hardcode color: black — invisible on a dark tree. */
body[data-bs-theme="dark"] span.fancytree-title {
    color: var(--ithr-text-default);
}

/* Hover uses a pale blue fill (#eff9fe/#70c0e7) — reads as a glaring light patch on a dark
   tree. Same neutral hover already used for .dropdown-item/.nav-tabs elsewhere. */
body[data-bs-theme="dark"] .fancytree-plain span.fancytree-node:hover span.fancytree-title {
    background-color: var(--ithr-surface-hover);
    border-color: var(--ithr-border-subtle);
}

/* Active/selected uses a near-white fill (#f7f7f7/#dedede) for the persistent "current node" state: tint it with the brand color,
   like .dropdown-item.active/.select-tab-menu. */
body[data-bs-theme="dark"] .fancytree-plain span.fancytree-active span.fancytree-title,
body[data-bs-theme="dark"] .fancytree-plain span.fancytree-selected span.fancytree-title {
    background-color: color-mix(in srgb, var(--mainColor) 20%, transparent);
    border-color: color-mix(in srgb, var(--mainColor) 45%, transparent);
    color: var(--mainColorOnDark);
}

/* A disabled tree dims to a flat "silver" background — barely different from black/near-black
   at 50% opacity, and not part of the neutral scale used everywhere else. */
body[data-bs-theme="dark"] .ui-fancytree-disabled ul.fancytree-container {
    background-color: var(--ithr-surface-muted);
}

/* 'filter' extension (the only one in use): dimmed titles use a fixed light gray and matches a fixed black. Use the dark-aware
   text tokens, as for the base title. */
body[data-bs-theme="dark"] .fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
    color: var(--ithr-text-subtle);
}

body[data-bs-theme="dark"] .fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
body[data-bs-theme="dark"] .fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title,
body[data-bs-theme="dark"] .fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
body[data-bs-theme="dark"] .fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title,
body[data-bs-theme="dark"] .fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
body[data-bs-theme="dark"] .fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
    color: var(--ithr-text-strong);
}

body[data-bs-theme="dark"] .fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
body[data-bs-theme="dark"] .fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
    color: var(--ithr-text-subtle);
}

/* bootstrap-year-calendar, continued. The header needs no fix (the plugin gives it .bg-white, which already flips with the override
   above). The rules below use a literal hex instead of the --calendar-* properties, so those properties can't reach them. */

/* Right-click day context menu ("add absence", "mark holiday", ...) is a hardcoded white
   popup — same "glaring white box on a dark page" problem as .btn-light/dropdown-menu earlier. */
body[data-bs-theme="dark"] .calendar-context-menu,
body[data-bs-theme="dark"] .calendar-context-menu .submenu {
    background-color: var(--cardsBackgroundColorDarker);
    border-color: var(--ithr-border-subtle);
}

body[data-bs-theme="dark"] .calendar-context-menu .item:hover {
    background: var(--ithr-surface-hover);
}

/* Day-cell and week-number dividers are a fixed light gray (#dddddd/#eee) — invisible against
   a dark page. */
body[data-bs-theme="dark"] .calendar table.month tr td .day-content {
    border-right-color: var(--ithr-border-subtle);
    border-left-color: var(--ithr-border-subtle);
}

body[data-bs-theme="dark"] .calendar table.month td.week-number {
    border-right-color: var(--ithr-border-subtle);
}

/* Disabled dates and next/previous-year labels use very light grays (#ddd/#aaa) meant to look faded on white; on dark they would be
   brighter than the normal text. */
body[data-bs-theme="dark"] .calendar table.month tr td.disabled,
body[data-bs-theme="dark"] .calendar table.month tr td.disabled:hover {
    color: var(--ithr-text-subtle);
}

body[data-bs-theme="dark"] .calendar .year-neighbor {
    color: var(--ithr-text-subtle);
}

body[data-bs-theme="dark"] .calendar .year-neighbor2 {
    color: var(--ithr-text-muted);
}

/* Tom Select dentro de um .form-floating (CAE das Entidades): o padding do .ts-control iguala o de um .form-select nativo (58px),
   com espaço em cima para a etiqueta flutuante e à direita para a seta e o botão de limpar. */
.form-floating > .ts-wrapper .ts-control {
    padding: 1.5rem 3.25rem 0.5rem 0.75rem;
}

/* Tom Select (lib/tom-select): searchable selects in Formações (formadorForm.js, planoCreate.js, planoEditForm.js, sessaoFormacaoCreate.js)
   and the CAE of Entidades (clear_button + dropdown_input). Its CSS hardcodes light-mode grays, so the dark-mode overrides live here, like
   Fancytree/year-calendar. Only reachable rules are covered: every init passes create:false and none use async loading, optgroups or
   optgroup_columns, so their styles are left alone. */

/* Base text color of the control and its option list: hardcoded #343a40, invisible once the control background goes dark. */
body[data-bs-theme="dark"] .ts-control,
body[data-bs-theme="dark"] .ts-dropdown,
body[data-bs-theme="dark"] .ts-control input {
    color: var(--bs-body-color);
}

/* Multi-select "chip" for each selected value: a light gray pill (#efefef bg, #343a40 text,
   #dee2e6 border) that reads as a glaring light patch once the control itself goes dark. */
body[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div {
    background: var(--ithr-surface-muted);
    color: var(--ithr-text-default);
    border-color: var(--ithr-border-subtle);
}

/* Disabled chips are hardcoded flat white — same problem, and it never dims at all since
   white-on-white was already the "disabled" look by design in light mode. */
body[data-bs-theme="dark"] .ts-wrapper.multi.disabled .ts-control > div,
body[data-bs-theme="dark"] .ts-wrapper.multi.disabled .ts-control > div.active {
    background: var(--ithr-surface-muted);
    color: var(--ithr-text-subtle);
    border-color: var(--ithr-surface-muted);
}

/* remove_button plugin: the divider between a chip's label and its "x" (and its disabled color, hardcoded white) is invisible on a dark chip. */
body[data-bs-theme="dark"] .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: var(--ithr-border-subtle);
}

body[data-bs-theme="dark"] .ts-wrapper.plugin-remove_button.rtl .item .remove {
    border-right-color: var(--ithr-border-subtle);
}

body[data-bs-theme="dark"] .ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
    border-left-color: var(--ithr-surface-muted);
}

body[data-bs-theme="dark"] .ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
    border-right-color: var(--ithr-surface-muted);
}

/* Quill (lib/quill, "snow" theme): rich-text editor of Entidades' "normativa" and the RGPD policy text (reusableComponents.js initQuill()).
   Overridden here, not in the vendor file, and only for what the fixed toolbar renders (header/bold/italic/underline/link/blockquote/
   code-block/lists). .ql-editor/.ql-toolbar have no colors of their own and inherit the dark page/card; .ql-code-block-container keeps its
   own dark background by design. The font/size and color pickers are never added to a toolbar, so their CSS is left alone.
   Only the pieces below hardcode a color. */

/* Editor and toolbar borders. */
body[data-bs-theme="dark"] .ql-container.ql-snow,
body[data-bs-theme="dark"] .ql-toolbar.ql-snow {
    border-color: var(--ithr-border-subtle);
}

/* Empty-editor placeholder text — hardcoded near-black, invisible against a dark editor. */
body[data-bs-theme="dark"] .ql-editor.ql-blank::before {
    color: var(--ithr-text-subtle);
}

/* Toolbar button/icon color and the Header picker label: hardcoded #444, invisible on the inherited dark toolbar. The highest-impact fix here. */
body[data-bs-theme="dark"] .ql-snow .ql-stroke,
body[data-bs-theme="dark"] .ql-snow .ql-stroke-miter {
    stroke: var(--ithr-text-muted);
}

body[data-bs-theme="dark"] .ql-snow .ql-fill,
body[data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill {
    fill: var(--ithr-text-muted);
}

body[data-bs-theme="dark"] .ql-snow .ql-picker {
    color: var(--ithr-text-muted);
}

/* Header picker's dropdown panel (H1/H2/Normal) — hardcoded white, a glaring box once the
   toolbar itself is dark. */
body[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--cardsBackgroundColorDarker);
}

body[data-bs-theme="dark"] .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
body[data-bs-theme="dark"] .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: var(--ithr-border-subtle);
}

/* Link-insertion tooltip (the "link" toolbar button) — hardcoded white popup, same problem as
   the picker dropdown above. */
body[data-bs-theme="dark"] .ql-snow .ql-tooltip {
    background-color: var(--cardsBackgroundColorDarker);
    border-color: var(--ithr-border-subtle);
    color: var(--ithr-text-default);
}

body[data-bs-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
    border-color: var(--ithr-border-subtle);
}

body[data-bs-theme="dark"] .ql-snow .ql-tooltip a.ql-action::after {
    border-right-color: var(--ithr-border-subtle);
}

/* Blockquote accent border in the editor content (the "blockquote" toolbar button). */
body[data-bs-theme="dark"] .ql-snow .ql-editor blockquote {
    border-left-color: var(--ithr-border-subtle);
}

/* Touch-device hover fallback for toolbar buttons — same #444 icon color as the base state
   above, needs the same token. */
@media (pointer: coarse) {
    body[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover:not(.ql-active) {
        color: var(--ithr-text-muted);
    }

    body[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
    body[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
        fill: var(--ithr-text-muted);
    }

    body[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
    body[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
        stroke: var(--ithr-text-muted);
    }
}

/* ApexCharts (Dashboard SH/Colaborador, Resultados, Horários, Escalas Avançadas): charts use Apex's light theme, whose foreColor (#373d3f)
   is written straight onto legend labels (inline style, hence !important) and axis labels (SVG fill). Overridden once here instead of setting
   theme.mode per chart. Data labels and the tooltip (white box, dark text) already contrast with their own background. */
body[data-bs-theme="dark"] .apexcharts-legend-text {
    color: var(--ithr-text-default) !important;
}

body[data-bs-theme="dark"] .apexcharts-xaxis-label,
body[data-bs-theme="dark"] .apexcharts-yaxis-label,
body[data-bs-theme="dark"] .apexcharts-xaxis-group-label {
    fill: var(--ithr-text-muted);
}

body[data-bs-theme="dark"] .apexcharts-xaxis-title-text,
body[data-bs-theme="dark"] .apexcharts-yaxis-title-text,
body[data-bs-theme="dark"] .apexcharts-title-text,
body[data-bs-theme="dark"] .apexcharts-subtitle-text {
    fill: var(--ithr-text-emphasis);
}

/* Grid lines (#e7e7e7) and the Auditorias chart's striped rows (#f3f3f3 at 50%) are light
   fills meant for a white card — bright bands/lines on a dark one. */
body[data-bs-theme="dark"] .apexcharts-gridline {
    stroke: var(--ithr-border-subtle);
}

body[data-bs-theme="dark"] .apexcharts-grid-row:not([fill="transparent"]) {
    fill: var(--ithr-surface-hover);
}

/* Smooth theme transitions */
.navbar,
.card,
.btn,
.modal-header,
.badge,
.alert,
.progress-bar {
    transition: var(--theme-transition);
}
body {
    visibility: hidden; /*this visibility is toggled back when setThemeColor is finish*/
    font-size: var(--it-font-size-base);
}

/* Indicador de carregamento: um só desenho (anel com cauda) para o <loading-indicator>, para o loader do DataTables e para o
   .spinner-border do Bootstrap, que a aplicação usa solto (botões de gravar, dashboards, tabelas). O .it-loader leva a cor do tema;
   o .spinner-border continua a herdar a cor do texto (ex.: branco num botão verde), só o text-primary passa a ser a cor do tema. */
.it-loader,
.spinner-border {
    --it-loader-width: 3px;
    display: inline-block;
    flex: 0 0 auto;
    width: var(--it-loader-size, var(--bs-spinner-width));
    height: var(--it-loader-size, var(--bs-spinner-height));
    border: 0;
    border-radius: 50%;
    background: conic-gradient(transparent 5%, currentColor), color-mix(in srgb, currentColor 18%, transparent);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--it-loader-width) - 0.5px), #000 calc(100% - var(--it-loader-width)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--it-loader-width) - 0.5px), #000 calc(100% - var(--it-loader-width)));
    animation: it-loader-spin 0.8s linear infinite;
}

.it-loader {
    --it-loader-size: 1.25rem;
    --it-loader-width: 2px;
    color: var(--mainColorOnDark);
}

.it-loader--sm,
.spinner-border-sm { --it-loader-size: 1rem; --it-loader-width: 2px; }
.it-loader--md { --it-loader-size: 1.75rem; --it-loader-width: 3px; }

body .spinner-border.text-primary { color: var(--mainColorOnDark) !important; }

@keyframes it-loader-spin {
    to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
    .it-loader,
    .spinner-border { animation-duration: 2.4s; }
}

/* O anel com o texto ao lado; --box põe-lhe a cápsula (sobreposições e painéis). */
.it-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: var(--it-font-size-sm);
    font-weight: 600;
    color: var(--ithr-text-subtle);
}

.it-loading--box,
div.dt-processing {
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 50rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    box-shadow: var(--bs-box-shadow-sm);
    backdrop-filter: blur(6px);
}

/* Loader do DataTables: a mesma cápsula e o mesmo anel (o texto vem do idioma da tabela); os quatro pontos de origem saem. */
div.dt-processing {
    width: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: var(--it-font-size-sm);
    font-weight: 600;
    color: var(--ithr-text-subtle);
}

    div.dt-processing > div:last-child {
        display: none;
    }

    div.dt-processing .it-loader {
        --it-loader-size: 1rem;
        vertical-align: -0.2em;
    }