/* Dark-mode adjustments for WorxBay CRM.
   Loaded after styles.css in layouts/base.html and layouts/vertical.html.
   Bootstrap 5.3 core dark-mode variables and the Modernize kit rules
   ([data-bs-theme=dark] in styles.css) are already handled there; this file
   fixes the light-only utility classes hardcoded across the templates
   (.text-dark / .bg-light / .bg-white) and the few custom assets that carry
   fixed light backgrounds. */

[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.text-bg-warning):not(.text-bg-info):not(.text-bg-success):not(.text-bg-danger):not(.text-bg-primary):not(.text-bg-secondary) {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .bg-light .text-dark:not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-primary):not(.bg-secondary) {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-body-bg) !important;
}

/* FullCalendar paints sticky sections (staff header band, list sticky rows)
   with its own light-only variables (--fc-page-bg-color: #fff, --fc-border-color:
   #ddd) that Bootstrap never remaps in dark mode: remap them once on the .fc root. */
[data-bs-theme="dark"] .app-calendar .fc {
  --fc-page-bg-color: var(--bs-body-bg);
  --fc-border-color: var(--bs-border-color);
  --fc-neutral-bg-color: rgba(255, 255, 255, 0.06);
  /* FullCalendar ships rgba(255,220,40,.15) (muddy olive on navy): in the Staff
     view every resource column is fc-day-today, so all lanes become unreadable. */
  --fc-today-bg-color: rgba(255, 255, 255, 0.04);
}

/* Agenda calendar: events and context menu use fixed white backgrounds. */
[data-bs-theme="dark"] .app-calendar .fc-timegrid-event,
[data-bs-theme="dark"] .app-calendar .fc-daygrid-event {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}

/* FullCalendar "today" cell and list rows use --bs-gray-100 / --bs-white,
   which stay light in dark mode (defined on :root only in styles.css). */
[data-bs-theme="dark"] .app-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .app-calendar .fc .fc-list-sticky .fc-list-day > *,
[data-bs-theme="dark"] .app-calendar .fc .fc-list-event:hover td {
  background-color: var(--bs-body-bg);
}

/* List view: shaded day-header cushions keep their light tint in dark mode. */
[data-bs-theme="dark"] .app-calendar .fc .fc-list-day-cushion,
[data-bs-theme="dark"] .app-calendar .fc .fc-cell-shaded {
  background-color: var(--bs-secondary-bg);
}

/* Calendar toolbar buttons: styles.css paints the idle state with
   --bs-white (not redefined by Bootstrap in dark mode), leaving light
   blocks on dark pages. Hover/active states stay primary-blue. */
[data-bs-theme="dark"] .app-calendar .fc .fc-button-primary:not(:hover):not(.fc-button-active):not(:disabled) {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-primary);
}

/* Disabled toolbar buttons (e.g. "Oggi" on the current date) keep the base
   --bs-white paint in dark mode: mute them instead of the light block. */
[data-bs-theme="dark"] .app-calendar .fc .fc-button-primary:disabled {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}

/* ── Agenda (templates/agenda/index.html) ── */

/* Staff-view tooltip card */
[data-bs-theme="dark"] #staff-event-tooltip {
  background: rgba(33, 37, 41, 0.97);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] #staff-event-tooltip::after {
  background: #212529;
  border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] #staff-event-tooltip .tt-row,
[data-bs-theme="dark"] #staff-event-tooltip .tt-overlap {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] #staff-event-tooltip .tt-overlap:first-of-type,
[data-bs-theme="dark"] #staff-event-tooltip .tt-treatment {
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] #staff-event-tooltip .tt-label {
  color: var(--bs-secondary-color);
}

/* Staff options panel (disponibilità, mansioni, timeline, ...) */
[data-bs-theme="dark"] #staff-options-dropdown {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #staff-options-dropdown .filter-label {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] #staff-options-dropdown .filter-btn {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] #staff-options-dropdown .filter-btn:hover {
  background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] #duty-list li {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #duty-list li .drag-handle {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] #duty-list li .duty-hide-btn {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] #duty-list li .duty-hide-btn:hover {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] #duty-list li.duty-hidden .duty-hide-btn {
  color: var(--bs-primary);
}

[data-bs-theme="dark"] #duty-list li.dragging {
  background: var(--bs-primary-bg-subtle);
}

/* Staff timeline readability: the 21 narrow resource lanes make 1px letter
   spacing wrap customer names one letter per row; slot lines keep the
   template's hardcoded #eee. Scope: dark mode + timeline layout only. */
[data-bs-theme="dark"] #calendar.staff-view .fc-timegrid-slot {
  border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] #calendar.staff-view.staff-timeline-visible .fc-timegrid-event {
  letter-spacing: 0.2px;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 3px 5px;
}

[data-bs-theme="dark"] #calendar.staff-view.staff-timeline-visible .fc-timegrid-event .fc-event-customer-name {
  font-size: 0.78em;
  letter-spacing: 0.2px;
}

/* Break events: stripes at the light-mode opacity stay too loud on navy lanes */
[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-break {
  background: repeating-linear-gradient(
    45deg,
    rgba(253, 230, 138, 0.12),
    rgba(253, 230, 138, 0.12) 6px,
    rgba(253, 224, 71, 0.08) 6px,
    rgba(253, 224, 71, 0.08) 12px
  ) !important;
}

/* Loading overlay over the calendars: light translucent dark veil (softer than
   the datepicker overlay) so events stay faintly visible while fetching. */
[data-bs-theme="dark"] .calendar-loader {
  background: rgba(15, 23, 42, 0.45);
}

[data-bs-theme="dark"] .calendar-loader-spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #3b82f6;
}

/* Unavailable operator events (grey stripes) keep readable text on dark */
[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-unavailable {
  background-color: rgba(148, 163, 184, 0.18) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}

[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-unavailable .fc-event-customer-name,
[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-unavailable .fc-event-service-name,
[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-unavailable .fc-event-operator-name {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-unavailable .fc-event-time {
  color: var(--bs-secondary-color) !important;
}

/* Break events: soften the yellow stripes and keep text readable */
[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-break {
  background: repeating-linear-gradient(
    45deg,
    rgba(253, 230, 138, .25),
    rgba(253, 230, 138, .25) 6px,
    rgba(253, 224, 71, .15) 6px,
    rgba(253, 224, 71, .15) 12px
  ) !important;
}

[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-break .fc-event-time {
  color: #f7c948 !important;
}

[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-bg-break {
  color: #f7c948 !important;
}

/* Overlap booking: purple tint instead of solid light purple */
[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-event-overlap {
  background-color: rgba(167, 139, 250, 0.16) !important;
}

[data-bs-theme="dark"] .app-calendar .fc-timegrid-event.fc-event-overlap.fc-bg-unavailable {
  background-color: rgba(167, 139, 250, 0.16) !important;
}

/* Unavailable operator column highlight (staff view) */
[data-bs-theme="dark"] #calendar.staff-view .fc-col-header-cell.staff-disabled-col {
  background: rgba(220, 53, 69, 0.15) !important;
}

[data-bs-theme="dark"] #calendar.staff-view .fc-col-header-cell.staff-disabled-col .fc-col-header-cell-cushion {
  color: #ff8f98 !important;
}

/* Unavailable operator body column: the template uses 6% red, which barely
   separates the lanes from the header band on navy: give both a consistent
   subtle tint and keep the slot grid lines visible through it. */
[data-bs-theme="dark"] #calendar.staff-view .fc-timegrid-col.staff-disabled-col {
  background: rgba(220, 53, 69, 0.08) !important;
}

[data-bs-theme="dark"] #calendar.staff-view .fc-timegrid-col.staff-disabled-col .fc-timegrid-slot {
  border-bottom-color: rgba(220, 53, 69, 0.25) !important;
}

/* ── Shifts calendar (templates/shift/calendar.html) ── */

[data-bs-theme="dark"] .wrx-shift-req:hover {
  background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .wrx-shift-ava {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .wrx-shift-type {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .wrx-shift-type:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .agenda-context-menu {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .agenda-context-menu-item {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .agenda-context-menu-item:hover {
  background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .agenda-context-menu-item.danger {
  color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .agenda-context-menu-item.danger:hover {
  background: var(--bs-danger-bg-subtle);
}

[data-bs-theme="dark"] .agenda-context-menu-item.disabled {
  color: var(--bs-secondary-color);
}

/* Knowledgebase page: hardcoded light palette in its inline <style> block,
   so these overrides need !important to win over the page-level styles. */
[data-bs-theme="dark"] .kb-page .kb-cat-pills .kb-pill {
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .kb-page .kb-cat-pills .kb-pill:hover {
  background: var(--bs-primary-bg-subtle) !important;
}

[data-bs-theme="dark"] .kb-page .kb-cat-pills .kb-pill .pill-count {
  background: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .kb-page .kb-search-box input {
  background: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .kb-page .kb-card {
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .kb-page .kb-card .kb-card-title {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .kb-page .kb-card .kb-card-meta {
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .kb-page .kb-card .kb-card-preview {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .kb-page .kb-card .kb-card-footer {
  border-top-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .kb-page .kb-file-badge {
  background: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="dark"] .kb-page .kb-empty .kb-empty-icon {
  background: var(--bs-secondary-bg) !important;
}

/* ── Select2 (select2-bootstrap-5-theme.min.css ships hardcoded light values,
   no [data-bs-theme=dark] variants): mirror the kit's dark form palette. ── */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
  /* kit's dark arrow (styles.css [data-bs-theme=dark] .form-select svg) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c8fac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

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

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: #aec3ff;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  color: var(--bs-body-color);
  background-color: var(--bs-primary-bg-subtle);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--disabled,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option .select2-results__option--disabled {
  color: var(--bs-secondary-color);
}

/* ── Tempus Dominus: configs.html always passes theme:"light" and the shipped
   stylesheet is var-driven, so remap the light palette under data-bs-theme
   instead of touching the shared JS config. ── */

[data-bs-theme="dark"] .tempus-dominus-widget,
[data-bs-theme="dark"] .tempus-dominus-widget.light {
  --td-widget-background: var(--bs-body-bg);
  --td-font-color: var(--bs-body-color);
  --td-active-bg: var(--bs-primary);
  --td-active-color: #fff;
  --td-active-border-color: var(--bs-primary);
  --td-range-bg: #01419e;
  --td-btn-hover-bg: var(--bs-secondary-bg);
  --td-disabled-color: var(--bs-secondary-color);
  --td-alternate-color: hsla(36, 10%, 90%, 0.38);
  --td-secondary-border-color: var(--bs-border-color);
  --td-secondary-border-color-rgba: hsla(36, 10%, 90%, 0.2);
  --td-primary-border-color: var(--bs-body-bg);
  --td-text-shadow: none;
  --td-dow-color: var(--bs-secondary-color);
}

/* Dual listbox: shipped CSS hardcodes the placeholder grey */
[data-bs-theme="dark"] .bootstrap-duallistbox-container .filter.placeholder {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .bootstrap-duallistbox-container.duallistbox-disabled .btn {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
}

/* Page-transition preloader: the kit paints it white inline (styles.css
   .preloader { background: #fff }) regardless of the active theme. Its
   static/logo.png is an opaque white square with black letters, so invert +
   screen-blend it: the white box vanishes over the dark surface and the
   letters render white. */
[data-bs-theme="dark"] .preloader {
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .preloader img.lds-ripple {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* ── ApexCharts: the library ships dark-on-light hardcoded defaults
   (foreColor #373d3f, white tooltips/menus). SVG labels draw fill as a
   presentation attribute, so stylesheet rules override them without
   !important; legend text and inline-colored spans need it instead. ── */

[data-bs-theme="dark"] .apexcharts-text {
  fill: var(--bs-body-color);
}

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

[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: var(--bs-secondary-bg);
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .apexcharts-tooltip-rangebar .category {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .apexcharts-menu {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .apexcharts-theme-light .apexcharts-menu-item:hover {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* ── Bootstrap table color variants: Bootstrap 5.3 defines their palette
   once (e.g. .table-primary --bs-table-bg: #dfe7ff) without dark overrides,
   so total/summary rows stay bright lavender under data-bs-theme=dark. Remap
   every variant to its dark subtle pair; text stays #fff to match the kit's
   table color in dark. ── */

[data-bs-theme="dark"] .table-primary {
  --bs-table-bg: var(--bs-primary-bg-subtle);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: rgba(255, 255, 255, 0.07);
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: var(--bs-secondary-bg-subtle);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-success {
  --bs-table-bg: var(--bs-success-bg-subtle);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-info {
  --bs-table-bg: var(--bs-info-bg-subtle);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-warning {
  --bs-table-bg: var(--bs-warning-bg-subtle);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-danger {
  --bs-table-bg: var(--bs-danger-bg-subtle);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--bs-secondary-bg);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-active > td,
[data-bs-theme="dark"] .table-active > th {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* ── Cash register numeric keypad: the kit's filled variant colors (amber
   numeric keys, salmon CANC, saturated info/primary/success) glare on the
   dark surfaces. Swap fills for translucent tinted surfaces with warm
   borders and tinted text, per keypad button ids only (operator/staff lists
   share .button-group elsewhere and are untouched). ── */

[data-bs-theme="dark"]:root[data-color-theme] [id^="keypad-"].btn-warning {
  --bs-btn-bg: rgba(255, 174, 31, 0.14);
  --bs-btn-border-color: rgba(255, 174, 31, 0.35);
  --bs-btn-color: #ffd07e;
  --bs-btn-hover-bg: rgba(255, 174, 31, 0.22);
  --bs-btn-hover-border-color: rgba(255, 174, 31, 0.5);
  --bs-btn-hover-color: #ffd07e;
  --bs-btn-active-bg: rgba(255, 174, 31, 0.26);
  --bs-btn-active-border-color: rgba(255, 174, 31, 0.55);
  --bs-btn-active-color: #ffd07e;
  --bs-btn-disabled-bg: rgba(255, 174, 31, 0.14);
  --bs-btn-disabled-border-color: rgba(255, 174, 31, 0.35);
  --bs-btn-disabled-color: rgba(255, 208, 126, 0.6);
}

[data-bs-theme="dark"]:root[data-color-theme] [id^="keypad-"].btn-danger {
  --bs-btn-bg: rgba(220, 53, 69, 0.16);
  --bs-btn-border-color: rgba(220, 53, 69, 0.38);
  --bs-btn-color: #ff9a9a;
  --bs-btn-hover-bg: rgba(220, 53, 69, 0.24);
  --bs-btn-hover-border-color: rgba(220, 53, 69, 0.5);
  --bs-btn-hover-color: #ff9a9a;
  --bs-btn-active-bg: rgba(220, 53, 69, 0.28);
  --bs-btn-active-border-color: rgba(220, 53, 69, 0.55);
  --bs-btn-active-color: #ff9a9a;
}

[data-bs-theme="dark"]:root[data-color-theme] [id^="keypad-"].btn-info {
  --bs-btn-bg: rgba(13, 202, 240, 0.14);
  --bs-btn-border-color: rgba(13, 202, 240, 0.35);
  --bs-btn-color: #7fd8f7;
  --bs-btn-hover-bg: rgba(13, 202, 240, 0.22);
  --bs-btn-hover-border-color: rgba(13, 202, 240, 0.5);
  --bs-btn-hover-color: #7fd8f7;
  --bs-btn-active-bg: rgba(13, 202, 240, 0.26);
  --bs-btn-active-border-color: rgba(13, 202, 240, 0.55);
  --bs-btn-active-color: #7fd8f7;
}

[data-bs-theme="dark"]:root[data-color-theme] [id^="keypad-"].btn-primary {
  --bs-btn-bg: rgba(93, 135, 255, 0.16);
  --bs-btn-border-color: rgba(93, 135, 255, 0.38);
  --bs-btn-color: #b9ccff;
  --bs-btn-hover-bg: rgba(93, 135, 255, 0.24);
  --bs-btn-hover-border-color: rgba(93, 135, 255, 0.5);
  --bs-btn-hover-color: #b9ccff;
  --bs-btn-active-bg: rgba(93, 135, 255, 0.28);
  --bs-btn-active-border-color: rgba(93, 135, 255, 0.55);
  --bs-btn-active-color: #b9ccff;
  --bs-btn-disabled-bg: rgba(93, 135, 255, 0.16);
  --bs-btn-disabled-border-color: rgba(93, 135, 255, 0.38);
  --bs-btn-disabled-color: rgba(185, 204, 255, 0.6);
}

[data-bs-theme="dark"]:root[data-color-theme] [id^="keypad-"].btn-secondary {
  --bs-btn-bg: rgba(255, 255, 255, 0.07);
  --bs-btn-border-color: rgba(255, 255, 255, 0.22);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.14);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.32);
  --bs-btn-active-color: var(--bs-body-color);
}

[data-bs-theme="dark"]:root[data-color-theme] [id^="keypad-"].btn-success {
  --bs-btn-bg: rgba(45, 206, 137, 0.16);
  --bs-btn-border-color: rgba(45, 206, 137, 0.38);
  --bs-btn-color: #7fe0b6;
  --bs-btn-hover-bg: rgba(45, 206, 137, 0.24);
  --bs-btn-hover-border-color: rgba(45, 206, 137, 0.5);
  --bs-btn-hover-color: #7fe0b6;
  --bs-btn-active-bg: rgba(45, 206, 137, 0.28);
  --bs-btn-active-border-color: rgba(45, 206, 137, 0.55);
  --bs-btn-active-color: #7fe0b6;
  --bs-btn-disabled-bg: rgba(45, 206, 137, 0.08);
  --bs-btn-disabled-border-color: rgba(45, 206, 137, 0.2);
  --bs-btn-disabled-color: rgba(127, 224, 182, 0.45);
}

/* Tempus Dominus datepicker slot-availability loading overlay (styles are
   injected at runtime by js-scripts.html, so these higher-specificity overrides
   win in dark mode; translucent dark, matching the calendar loader). */
[data-bs-theme="dark"] .td-loading-overlay {
  background: rgba(15, 23, 42, 0.72);
}
[data-bs-theme="dark"] .td-loading-spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #3b82f6;
}