/* ==========================================================================
   theme.css — tema RE.DIS sopra AdminLTE 3.2 / Bootstrap 4.6
   Un solo punto per i colori del brand: sostituisce gli override sparsi in
   customstyle.css e gli hex ripetuti nelle viste. Va incluso DOPO adminlte.min.css.
   Classi AdminLTE attese sul markup (vedi layouts/app e layouts/navigation):
   body.sidebar-mini.layout-fixed.layout-navbar-fixed, nav.navbar-navy,
   aside.sidebar-light-navy (sidebar-dark-navy in dark), ul.nav-sidebar.nav-child-indent.
   Il tema scuro è body.dark-mode (classe nativa AdminLTE) gestito da js/app/theme-toggle.js.
   ========================================================================== */

:root {
  --rd-navy:        #154275;   /* navbar, sfondo brand */
  --rd-heading:     #154275;   /* titoli e testo forte (in dark diventa chiaro) */
  --rd-blue:        #1D5AA0;   /* azione primaria, voce attiva */
  --rd-blue-hover:  #154275;
  --rd-blue-light:  #2572CB;   /* link, hover */
  --rd-blue-soft:   #E8F0FA;   /* selezioni, hover righe, badge tipo */
  --rd-ground:      #F3F5F8;   /* fondo pagina (grigio a bias blu) */
  --rd-surface:     #FFFFFF;   /* card, tabelle, navbar dropdown */
  --rd-surface-2:   #FAFBFD;   /* barra filtri, footer modale */
  --rd-border:      #DDE3EA;
  --rd-row-border:  #EEF1F5;
  --rd-text:        #1F2A37;
  --rd-muted:       #6B7A8C;
  --rd-faint:       #B7C1CE;   /* icone spente, separatori breadcrumb */
  --rd-ok:          #2E8B57;   /* semantici: separati dall'accento */
  --rd-warn:        #D99A00;
  --rd-danger:      #C8392B;
  --rd-ok-bg:       #E6F4EC;  --rd-ok-fg:     #1F6B41;
  --rd-warn-bg:     #FFF3CD;  --rd-warn-fg:   #7A5A00;
  --rd-danger-bg:   #FBE9E7;  --rd-danger-fg: #9C2A1F;
  --rd-focus:       rgba(29, 90, 160, .25);
  /* pulsanti di riga: una tinta per azione (base = pieno all'hover, -fg = icona a riposo) */
  --rd-h-blue: #1D5AA0; --rd-h-blue-fg: #1D5AA0;
  --rd-h-sky: #0284C7; --rd-h-sky-fg: #0284C7;
  --rd-h-teal: #0F766E; --rd-h-teal-fg: #0F766E;
  --rd-h-green: #15803D; --rd-h-green-fg: #15803D;
  --rd-h-olive: #4D7C0F; --rd-h-olive-fg: #4D7C0F;
  --rd-h-amber: #B7791F; --rd-h-amber-fg: #8A5A00;
  --rd-h-orange: #C2410C; --rd-h-orange-fg: #C2410C;
  --rd-h-brown: #7C4A2D; --rd-h-brown-fg: #7C4A2D;
  --rd-h-slate: #475569; --rd-h-slate-fg: #475569;
  --rd-h-red: #C8392B; --rd-h-red-fg: #9C2A1F;
  --rd-input-bg:    #FFFFFF;
  --rd-input-border:#CED4DA;
}

/* Tema scuro: stessi token, valori diversi. Attivato da body.dark-mode
   (classe nativa AdminLTE) e salvato in localStorage, vedi js/app/theme-toggle.js. */
body.dark-mode {
  --rd-heading:     #D5E3F5;
  --rd-blue:        #2A6BBF;
  --rd-blue-hover:  #3A7FD6;
  --rd-blue-light:  #6FA8E8;
  --rd-blue-soft:   #223A57;
  --rd-ground:      #161C25;
  --rd-surface:     #1F2732;
  --rd-surface-2:   #232D3A;
  --rd-border:      #303B49;
  --rd-row-border:  #2A3441;
  --rd-text:        #E4E9F0;
  --rd-muted:       #B6C2D1;   /* alzato: sotto ~#98A6B8 il testo secondario si perdeva sul fondo scuro */
  --rd-faint:       #7C8B9D;
  --rd-ok:          #4CC38A;
  --rd-warn:        #F2B84B;
  --rd-danger:      #F0716A;
  --rd-ok-bg:       rgba(76,195,138,.16);  --rd-ok-fg:     #7ED9A8;
  --rd-warn-bg:     rgba(242,184,75,.16);  --rd-warn-fg:   #F5CB7A;
  --rd-danger-bg:   rgba(240,113,106,.16); --rd-danger-fg: #F49B96;
  --rd-focus:       rgba(111,168,232,.35);
  --rd-h-blue-fg: #6FA8E8;
  --rd-h-sky-fg: #7DD3FC;
  --rd-h-teal-fg: #2DD4BF;
  --rd-h-green-fg: #4ADE80;
  --rd-h-olive-fg: #A3E635;
  --rd-h-amber-fg: #F2C265;
  --rd-h-orange-fg: #FB923C;
  --rd-h-brown-fg: #D6A77A;
  --rd-h-slate-fg: #CBD5E1;
  --rd-h-red-fg: #F49B96;
  --rd-input-bg:    #161C25;
  --rd-input-border:#3A4757;
  color-scheme: dark;
}

/* ---- fondo e testo ---------------------------------------------------- */
body { background: var(--rd-ground); color: var(--rd-text); }
.content-wrapper { background: var(--rd-ground); }
a { color: var(--rd-blue-light); }
a:hover { color: var(--rd-heading); }

/* ---- navbar ----------------------------------------------------------- */
.main-header.navbar-navy { background-color: var(--rd-navy); border-bottom: 1px solid var(--rd-navy); }
.navbar-navy .navbar-nav .nav-link { color: rgba(255,255,255,.82); }
.navbar-navy .navbar-nav .nav-link:hover,
.navbar-navy .navbar-nav .nav-link.active { color: #fff; }
.env-pill {
  display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: #FFD466; border: 1px solid rgba(255,212,102,.55);
  border-radius: 999px; padding: .15rem .55rem; line-height: 1.2; vertical-align: middle;
}
.user-avatar {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--rd-blue-light); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem;
}
.navbar .dropdown-menu { border: 1px solid var(--rd-border); box-shadow: 0 8px 24px rgba(21,66,117,.12); }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rd-muted); }

/* ---- sidebar ---------------------------------------------------------- */
.main-sidebar { box-shadow: none; border-right: 1px solid var(--rd-border); }
/* stessa altezza della navbar: 3.5rem + 1px di bordo */
.main-sidebar .brand-link { border-bottom: 1px solid var(--rd-border); padding: .8125rem .9rem; height: calc(3.5rem + 1px); box-sizing: border-box; }
.main-sidebar { background: var(--rd-surface); }
.sidebar-light-navy .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--rd-blue); color: #fff; box-shadow: none;
}
.sidebar-light-navy .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--rd-blue-soft); color: var(--rd-heading); font-weight: 600;
}
.sidebar-light-navy .nav-sidebar > .nav-item > .nav-link:not(.active):hover,
.sidebar-light-navy .nav-sidebar .nav-treeview > .nav-item > .nav-link:not(.active):hover {
  background-color: var(--rd-ground); color: var(--rd-heading);
}
.nav-sidebar .nav-link { border-radius: .3rem; }
.nav-sidebar .nav-header { font-size: .68rem; letter-spacing: .08em; color: var(--rd-muted); }

/* ---- primary (tutte le classi Bootstrap che usavano #007bff) ---------- */
.btn-primary { background-color: var(--rd-blue); border-color: var(--rd-blue); }
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active { background-color: var(--rd-blue-hover); border-color: var(--rd-blue-hover); }
.btn-primary:focus-visible, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem var(--rd-focus); }
.btn-outline-primary { color: var(--rd-blue); border-color: var(--rd-blue); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--rd-blue); border-color: var(--rd-blue); color: #fff;
}
.btn-outline-primary:focus-visible { box-shadow: 0 0 0 .2rem var(--rd-focus); }
/* il fuoco restituito dal mouse (es. chiusura di una modale) non deve lasciare il pulsante "premuto" */
.btn:focus:not(:focus-visible) { box-shadow: none; }
.btn-link { color: var(--rd-blue-light); }
.badge-primary, .bg-primary { background-color: var(--rd-blue) !important; }
.text-primary { color: var(--rd-blue) !important; }
.card-primary.card-outline { border-top-color: var(--rd-blue); }
.card-primary:not(.card-outline) > .card-header { background-color: var(--rd-blue); }
.page-link { color: var(--rd-blue); }
.page-item.active .page-link { background-color: var(--rd-blue); border-color: var(--rd-blue); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--rd-blue); border-color: var(--rd-blue); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--rd-focus); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #7FA6D6; }
.form-control, .custom-select { background-color: var(--rd-input-bg); border-color: var(--rd-input-border); color: var(--rd-text); }
.form-control::placeholder { color: var(--rd-muted); opacity: .8; }
.input-group-text { background: var(--rd-surface-2); border-color: var(--rd-input-border); color: var(--rd-muted); }
.form-control:focus, .custom-select:focus { border-color: #7FA6D6; box-shadow: 0 0 0 .2rem var(--rd-focus); background-color: var(--rd-input-bg); color: var(--rd-text); }
.nav-pills .nav-link.active { background-color: var(--rd-blue); }
.card-outline-tabs > .card-header a.active { border-top-color: var(--rd-blue) !important; }
.progress-bar { background-color: var(--rd-blue); }

/* ---- intestazione pagina ---------------------------------------------- */
.content-header { padding: 1.1rem .5rem .6rem; }
.content-header h1 { font-size: 1.45rem; font-weight: 700; color: var(--rd-heading); letter-spacing: -.01em; }
.content-header .breadcrumb { background: transparent; font-size: .84rem; margin: 0; padding: .35rem 0 0; }
.content-header .breadcrumb-item + .breadcrumb-item::before { color: var(--rd-faint); }
.content-header .breadcrumb-item a { color: var(--rd-muted); }
.content-header .breadcrumb-item.active { color: var(--rd-heading); font-weight: 600; }

/* ---- card ------------------------------------------------------------- */
.card { border: 1px solid var(--rd-border); box-shadow: none; border-radius: .4rem; }
.card-header { background: var(--rd-surface); border-bottom: 1px solid var(--rd-border); padding: .7rem 1rem; }
.card-title { font-weight: 600; color: var(--rd-heading); font-size: 1rem; }
.card-title .badge { font-weight: 600; vertical-align: middle; margin-left: .35rem; }
.card-tools .btn-tool { color: var(--rd-muted); }
.card-footer { background: var(--rd-surface); border-top: 1px solid var(--rd-border); }
.card-title-count { color: var(--rd-muted); font-weight: 400; }

/* ---- barra filtri (stessa in tutte le liste) --------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
  padding: .9rem 1rem; border-bottom: 1px solid var(--rd-border); background: var(--rd-surface-2);
}
.filter-bar .form-group { margin: 0; flex: 1 1 170px; max-width: 260px; }
.filter-bar label {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--rd-muted); font-weight: 600; margin-bottom: .25rem;
}
.filter-bar .filter-actions { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) {
  .filter-bar .form-group { max-width: none; flex-basis: 100%; }
  .filter-bar .filter-actions { margin-left: 0; width: 100%; }
  .filter-bar .filter-actions .btn { flex: 1; }
}

/* ---- tabelle elenco ---------------------------------------------------- */
.table-list { margin: 0; font-size: .92rem; }
.table-list thead th {
  border-top: 0; border-bottom: 1px solid var(--rd-border); background: var(--rd-surface);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rd-muted);
  font-weight: 600; white-space: nowrap; padding: .6rem .75rem;
}
.table-list td { vertical-align: middle; border-top: 1px solid var(--rd-row-border); padding: .55rem .75rem; }
.table-hover tbody tr:hover { background-color: var(--rd-blue-soft); }
.table-list tr.selected td { background-color: var(--rd-blue-soft); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cell-title { font-weight: 600; color: var(--rd-text); }
.cell-sub { display: block; font-size: .78rem; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.badge-type { background: var(--rd-blue-soft); color: var(--rd-heading); font-weight: 600; padding: .35em .6em; font-size: .78rem; }
.status { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }
.status-ok { color: var(--rd-ok); }
.status-warn { color: var(--rd-warn); }
.status-danger { color: var(--rd-danger); }
.status .status-note { color: var(--rd-muted); font-size: .8rem; }

/* azioni di riga: icona su fondo tenue, pieno all'hover. Ogni azione ha la sua
   tinta, ricavata dall'icona (vale anche per i pulsanti generati via JS), così
   il pulsante si riconosce a colpo d'occhio: ambra modifica, rosso
   (btn-icon-danger) azioni distruttive, blu visualizza e tutto ciò che non è
   mappato. Le icone che convivono nella stessa colonna azioni hanno tinte diverse;
   niente rosa/viola. */
.row-actions { display: flex; gap: .25rem; justify-content: flex-end; }
.btn-icon {
  --bi: var(--rd-h-blue-fg); --bi-solid: var(--rd-h-blue);
  width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .3rem; line-height: 1;
  color: var(--bi);
  background: color-mix(in srgb, var(--bi) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bi) 32%, transparent);
}
.btn-icon:has(.fa-cloud-sun, .fa-download, .fa-chart-line) { --bi: var(--rd-h-sky-fg); --bi-solid: var(--rd-h-sky); }
.btn-icon:has(.fa-file-lines, .fa-handshake, .fa-clock, .fa-square-root-variable) { --bi: var(--rd-h-teal-fg); --bi-solid: var(--rd-h-teal); }
.btn-icon:has(.fa-map-marker-alt, .fa-file-excel, .fa-plus) { --bi: var(--rd-h-green-fg); --bi-solid: var(--rd-h-green); }
.btn-icon:has(.fa-layer-group, .fa-solar-panel) { --bi: var(--rd-h-olive-fg); --bi-solid: var(--rd-h-olive); }
.btn-icon:has(.fa-pen-to-square, .fa-edit, .fa-pen, .fa-pencil) { --bi: var(--rd-h-amber-fg); --bi-solid: var(--rd-h-amber); }
.btn-icon:has(.fa-address-book, .fa-envelope, .fa-clipboard-list) { --bi: var(--rd-h-orange-fg); --bi-solid: var(--rd-h-orange); }
.btn-icon:has(.fa-industry, .fa-clock-rotate-left, .fa-file-pdf) { --bi: var(--rd-h-brown-fg); --bi-solid: var(--rd-h-brown); }
.btn-icon:has(.fa-users, .fa-users-rectangle, .fa-cloud, .fa-copy, .fa-user-secret) { --bi: var(--rd-h-slate-fg); --bi-solid: var(--rd-h-slate); }
/* lista Impianti: "Scheda" (verde acqua) e "Mappa" (verde) affiancati si
   confondevano. La scheda prende il blu della palette, quello delle azioni di
   consultazione; la mappa resta verde come in omni. */
.btn-icon.btn-icon-detail { --bi: var(--rd-h-blue-fg); --bi-solid: var(--rd-h-blue); }
/* dopo le tinte: a parità di specificità vince il rosso esplicito */
.btn-icon.btn-icon-danger { --bi: var(--rd-h-red-fg); --bi-solid: var(--rd-h-red); }
.btn-icon:hover, .btn-icon:focus-visible { background: var(--bi-solid); border-color: var(--bi-solid); color: #fff; box-shadow: none; }
.btn-icon:focus:not(:focus-visible):not(:hover) { box-shadow: none; }
.btn-icon:focus-visible { outline: 2px solid var(--rd-blue-light); outline-offset: 1px; }

/* ---- stati: overlay e vuoto (classi native, solo tinta) --------------- */
.card > .overlay { background: rgba(255,255,255,.75); color: var(--rd-blue); border-radius: .4rem; }
.callout.callout-info { border-left-color: var(--rd-blue-light); background: var(--rd-surface); }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--rd-muted); }
.empty-state i { font-size: 1.8rem; color: var(--rd-faint); margin-bottom: .6rem; display: block; }

/* ---- footer ----------------------------------------------------------- */
.main-footer { font-size: .78rem; color: var(--rd-muted); background: var(--rd-surface); border-top: 1px solid var(--rd-border); }

/* ---- login ------------------------------------------------------------ */
.login-page { background: var(--rd-navy); }
.login-box .card { border: 0; border-radius: .5rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.login-box .card-header { padding: 1.6rem 1rem 1rem; }
.login-box .login-box-msg { color: var(--rd-muted); }
.login-page .login-foot { color: rgba(255,255,255,.65); font-size: .76rem; text-align: center; margin-top: 1.25rem; }

/* ---- card-header su schermi stretti: azioni a capo, titolo intero ---- */
.card-header .card-title { white-space: nowrap; }
@media (max-width: 575.98px) {
  .card-header.d-flex { flex-wrap: wrap; }
  .card-header .card-tools { width: 100%; margin-top: .5rem; margin-left: 0 !important; }
  .card-header .card-tools .btn:not(.btn-tool) { flex: 1; }
}

/* ---- tema scuro: raccordi con le regole native .dark-mode di AdminLTE ---- */
body.dark-mode, .dark-mode .content-wrapper { background-color: var(--rd-ground); color: var(--rd-text); }
.dark-mode .card, .dark-mode .card-header, .dark-mode .card-footer, .dark-mode .modal-content, .dark-mode .dropdown-menu,
.dark-mode .table-list thead th, .dark-mode .main-footer, .dark-mode .list-group-item { background-color: var(--rd-surface); color: var(--rd-text); }
.dark-mode .filter-bar, .dark-mode .modal-footer { background: var(--rd-surface-2); }
/* Card annidata (es. pannello contratti nel dettaglio impianto): AdminLTE la scurisce con
   .dark-mode .card .card, più specifica del raccordo sopra. Stessa superficie della card esterna. */
.dark-mode .card .card { background-color: var(--rd-surface); color: var(--rd-text); }
.dark-mode .card .card-footer { background-color: var(--rd-surface); }
.dark-mode .card-header, .dark-mode .card-footer, .dark-mode .modal-header, .dark-mode .modal-footer, .dark-mode .main-footer, .dark-mode .dropdown-menu, .dark-mode .dropdown-divider { border-color: var(--rd-border); }
.dark-mode .table td, .dark-mode .table th, .dark-mode .table-list td, .dark-mode .table-list thead th { border-color: var(--rd-row-border); color: var(--rd-text); }
.dark-mode .table-hover tbody tr:hover, .dark-mode .table-hover tbody tr:hover td { background-color: var(--rd-blue-soft); color: var(--rd-text); }
.dark-mode .dropdown-item { color: var(--rd-text); } .dark-mode .dropdown-item:hover { background: var(--rd-blue-soft); color: var(--rd-text); }
.dark-mode .breadcrumb-item.active { color: var(--rd-heading); }
/* Paginazione: AdminLTE usa .dark-mode .page-item:not(.active) .page-link (e !important sui disabled),
   quindi servono selettori almeno altrettanto specifici. */
.dark-mode .page-item:not(.active) .page-link { background-color: var(--rd-surface-2); border-color: var(--rd-input-border); color: var(--rd-text); }
.dark-mode .page-item:not(.active):not(.disabled) .page-link:hover,
.dark-mode .page-item:not(.active):not(.disabled) .page-link:focus { background-color: var(--rd-blue-soft); border-color: var(--rd-blue-light); color: var(--rd-heading); }
.dark-mode .page-item.disabled .page-link { background-color: var(--rd-surface) !important; border-color: var(--rd-border) !important; color: var(--rd-faint); }
.dark-mode .page-item.active .page-link { background-color: var(--rd-blue); border-color: var(--rd-blue-light); color: #fff; font-weight: 600; }
.dark-mode .page-item.active .page-link:hover, .dark-mode .page-item.active .page-link:focus { color: #fff !important; }
.dark-mode .btn-outline-secondary { color: var(--rd-text); border-color: var(--rd-input-border); }
.dark-mode .btn-outline-secondary:hover { background: var(--rd-blue-soft); border-color: var(--rd-input-border); color: var(--rd-text); }
/* outline-primary (es. "Scarica selezionati"): nel chiaro il testo è blu scuro, che sul
   fondo scuro non si legge; qui testo e icona chiari come l'outline-secondary, bordo blu chiaro.
   Il disabilitato va ripetuto: AdminLTE ha una regola .dark-mode ...:disabled più specifica. */
.dark-mode .btn-outline-primary,
.dark-mode .btn-outline-primary.disabled, .dark-mode .btn-outline-primary:disabled { color: var(--rd-text); border-color: var(--rd-blue-light); }
.dark-mode .btn-outline-primary:hover, .dark-mode .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--rd-blue); border-color: var(--rd-blue); color: #fff; }
.dark-mode .custom-control-label::before { background: var(--rd-input-bg); border-color: var(--rd-input-border); }
.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--rd-blue); border-color: var(--rd-blue); }
.dark-mode .close { color: var(--rd-text); text-shadow: none; }
.dark-mode .card > .overlay { background: rgba(22,28,37,.7); color: var(--rd-blue-light); }
.dark-mode .callout { background: var(--rd-surface); color: var(--rd-text); }
.dark-mode .text-muted { color: var(--rd-muted) !important; }
.dark-mode .main-sidebar { background: var(--rd-surface); }
.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link { color: var(--rd-text); }
.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link.active { background-color: var(--rd-blue); color: #fff; }
.dark-mode .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link { color: var(--rd-muted); }
.dark-mode .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active { background-color: var(--rd-blue-soft); color: var(--rd-heading); font-weight: 600; }
.dark-mode .main-sidebar .nav-sidebar .nav-link:not(.active):hover { background-color: var(--rd-ground); color: var(--rd-text); }
/* La sidebar nasce sidebar-light-navy e diventa sidebar-dark-navy solo quando
   theme-toggle.js gira (in fondo alla pagina). Le regole scure qui sopra
   dipendono quindi solo da body.dark-mode, applicato prima del primo paint:
   altrimenti al caricamento il riquadro del logo restava bianco per un attimo.
   Questa regola batte quella di AdminLTE con la navbar fissa
   (.layout-navbar-fixed .wrapper .sidebar-light-navy .brand-link → #fff). */
.dark-mode .wrapper .main-sidebar .brand-link:not([class*=navbar]), .dark-mode .brand-link { background: var(--rd-surface); }
.dark-mode .brand-link img.logo-xl { filter: brightness(0) invert(.92); }
.dark-mode .login-box .card { box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.dark-mode .login-box .login-logo-wrap img { filter: brightness(0) invert(.92); }

/* interruttore tema nella navbar */
.theme-toggle { color: rgba(255,255,255,.82) !important; }
.theme-toggle:hover { color: #fff !important; }
.theme-toggle .sun { display: none; } .theme-toggle .moon { display: inline; }
.dark-mode .theme-toggle .sun { display: inline; } .dark-mode .theme-toggle .moon { display: none; }
/* navbar: resta navy anche in dark, AdminLTE la farebbe grigia e sbiadita */
.dark-mode .main-header.navbar-navy { background-color: var(--rd-navy); }
.dark-mode .navbar-navy .navbar-nav .nav-link { color: rgba(255,255,255,.85); }
.dark-mode .navbar-navy .navbar-nav .nav-link:hover { color: #fff; }

/* pulsante tema sulla pagina di login (fuori dalla navbar) */
.login-theme { position: fixed; top: 1rem; right: 1rem; z-index: 10; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.login-theme:hover { border-color: #fff; }
.login-box .login-logo img { height: 46px; }

/* ==========================================================================
   Componenti condivisi delle liste (usati da x-list-card e dalle DataTable)
   ========================================================================== */

/* ---- badge semantici e pillole ----------------------------------------- */
.badge-ok, .badge-warn, .badge-danger, .badge-muted, .badge-type { font-weight: 600; padding: .35em .6em; font-size: .78rem; }
.badge-ok { background: var(--rd-ok-bg); color: var(--rd-ok-fg); }
.badge-warn { background: var(--rd-warn-bg); color: var(--rd-warn-fg); }
.badge-danger { background: var(--rd-danger-bg); color: var(--rd-danger-fg); }
.badge-muted { background: var(--rd-row-border); color: var(--rd-muted); }
/* badge-light di Bootstrap resta bianco nel tema scuro: segue la superficie. */
.dark-mode .badge-light { background-color: var(--rd-surface-2); color: var(--rd-text); border-color: var(--rd-border) !important; }
.count-pill { display: inline-block; min-width: 1.6rem; text-align: center; background: var(--rd-blue-soft); color: var(--rd-heading); border-radius: 999px; font-size: .78rem; font-weight: 600; padding: .1em .5em; font-variant-numeric: tabular-nums; }
.count-pill[data-toggle="tooltip"] { cursor: help; }
.count-pill-zero { background: transparent; color: var(--rd-faint); font-weight: 400; }
.dark-mode .count-pill { background: var(--rd-blue-soft); color: #fff; }
.dark-mode .count-pill-zero { background: transparent; color: var(--rd-faint); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.status.status-muted { color: var(--rd-faint); }

/* ---- tab nell'intestazione card ----------------------------------------
   Schede a pillola dentro l'intestazione: niente margini negativi di
   .card-header-tabs (sporgevano dalla card) né bordi/sottolineature di
   .nav-tabs e .card-outline-tabs. L'attiva è un fondo azzurro tenue. */
.card-tabs > .card-header { padding: .5rem .75rem; }
.card-header-tabs { margin: 0; border-bottom: 0; gap: .25rem; }
.card-header-tabs .nav-item { margin: 0; }
.card-header-tabs .nav-link, .card-outline-tabs > .card-header a:hover, .card-outline-tabs > .card-header a.active { color: var(--rd-muted); font-weight: 600; border: 0 !important; border-radius: .3rem; padding: .45rem .9rem; margin: 0; background: transparent; }
.card-header-tabs .nav-link.active { color: var(--rd-heading); background: var(--rd-blue-soft); }
.card-header-tabs .nav-link:hover:not(.active) { color: var(--rd-text); background: var(--rd-ground); }
.card-header-tabs .nav-link .badge { vertical-align: baseline; margin-left: .2rem; }
.tab-count { font-weight: 600; border-radius: 999px; padding: .1em .5em; font-size: .74rem; margin-left: .35rem; background: var(--rd-row-border); color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.card-header-tabs .nav-link.active .tab-count:not(.warn):not(.ok) { background: var(--rd-surface); color: var(--rd-heading); }
.tab-count.warn { background: var(--rd-warn-bg); color: var(--rd-warn-fg); }
.tab-count.ok { background: var(--rd-ok-bg); color: var(--rd-ok-fg); }

/* ---- modali -------------------------------------------------------------- */
.modal-header { border-bottom: 1px solid var(--rd-border); }
.modal-title { font-weight: 700; color: var(--rd-heading); font-size: 1.05rem; }
.modal-footer { border-top: 1px solid var(--rd-border); background: var(--rd-surface-2); }
.modal-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rd-blue-light); font-weight: 700; margin: .5rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--rd-border); }

/* ---- DataTables 3 dentro una .card ---------------------------------------
   Il wrapper è div.dt-container (con Bootstrap 4 le righe sono div.row): la prima riga (lunghezza + ricerca) diventa
   una fascia sopra la tabella, l'ultima (info + paginazione) il piè della card.
   La tabella va marcata .table-list (niente griglia verticale). */
.card > .dt-container, .card > .table-responsive > .dt-container { margin: 0; }
.dt-container > .row:has(.dt-length), .dt-container > .row:has(.dt-search) { padding: .6rem 1rem; border-bottom: 1px solid var(--rd-border); background: var(--rd-surface); margin: 0; }
.dt-container > .row:has(.dt-info), .dt-container > .row:has(.dt-paging) { padding: .6rem 1rem; border-top: 1px solid var(--rd-border); background: var(--rd-surface); margin: 0; font-size: .85rem; color: var(--rd-muted); }
.dt-container > .row:not(.dt-layout-table) > div { padding: 0; }
.dt-container .dt-layout-table { margin: 0; }
.dt-container .dt-layout-table > div { padding: 0; }
.dt-container .dt-length label, .dt-container .dt-search label { font-size: .85rem; color: var(--rd-muted); margin: 0; }
.dt-container .dt-length select { width: auto; display: inline-block; margin: 0 .35rem; }
.dt-container .dt-search input { width: 14rem; max-width: 100%; margin-left: .5rem; }
.dt-container .dt-search .btn { margin-left: .5rem; }
/* DataTables tiene il riepilogo su una riga: "…(filtrati da N elementi totali)"
   su un telefono esce dallo schermo e Safari iOS allarga tutta la pagina. */
.dt-container .dt-info { padding: 0; }
div.dt-container div.dt-info { white-space: normal; }
.dt-container .pagination { margin: 0; }
.dt-container table.dataTable.table-list { margin: 0 !important; border-collapse: collapse; }
table.dataTable.table-list > thead > tr > th, table.dataTable.table-list > thead > tr > td { border-bottom: 1px solid var(--rd-border); }
table.dataTable.table-list > tbody > tr > td { border-top: 1px solid var(--rd-row-border); }
table.dataTable.table-list thead th { border-top: 0; }
/* ordine sempre "titolo, poi frecce": DataTables 3 lo rovescia da solo per le colonne che riconosce
   come numeriche (dt-type-numeric); nelle colonne allineate a destra il gruppo sta sul bordo destro */
table.dataTable thead th.dt-type-numeric div.dt-column-header, table.dataTable thead th.dt-type-date div.dt-column-header,
table.dataTable thead th.dt-right div.dt-column-header { flex-direction: row; }
table.dataTable thead th.text-right div.dt-column-header, table.dataTable thead th.dt-type-numeric div.dt-column-header,
table.dataTable thead th.dt-type-date div.dt-column-header, table.dataTable thead th.dt-right div.dt-column-header { justify-content: flex-end; }
/* frecce di ordinamento: DataTables le disegna con bordi e le colora tramite queste variabili */
table.dataTable { --dt-order-arrow_color: var(--rd-muted); --dt-order-arrow_opacity: .55; --dt-order-arrow_color-current: var(--rd-blue); --dt-order-arrow_opacity-current: 1; }
.dark-mode table.dataTable { --dt-order-arrow_color: #fff; --dt-order-arrow_opacity: .5; --dt-order-arrow_color-current: #fff; }
/* freccia "espandi riga" di Responsive: blu del brand, più grande, bianca in scuro */
:root { --dtr-control-triangle_size: 6px; --dtr-control-triangle_color: var(--rd-blue); }
.dark-mode { --dtr-control-triangle_color: #fff; }
table.dataTable > tbody > tr > td.dtr-control { cursor: pointer; }
/* checkbox di selezione riga: bordo marcato, visibili anche su fondo scuro */
.table-list .custom-checkbox .custom-control-label::before { border: 2px solid var(--rd-muted); background: var(--rd-surface); width: 1.1rem; height: 1.1rem; top: .15rem; }
.table-list .custom-checkbox .custom-control-label::after { width: 1.1rem; height: 1.1rem; top: .15rem; }
.dark-mode .table-list .custom-checkbox .custom-control-label::before { border-color: rgba(255,255,255,.7); background: var(--rd-surface-2); }
.dark-mode .table-list .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background: var(--rd-blue); border-color: var(--rd-blue); }
table.dataTable.table-list tbody tr.selected > td { background-color: var(--rd-blue-soft) !important; color: var(--rd-text) !important; box-shadow: none; }
table.dataTable.table-list tbody tr.selected a { color: var(--rd-blue-light) !important; }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--rd-row-border); }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--rd-muted); }
.dark-mode table.dataTable > tbody > tr > td.dtr-control::before { border-color: transparent transparent transparent var(--rd-blue-light); }

/* stato "Elaborazione…": velo sull'intera tabella al posto del popup che oggi
   galleggia sopra le intestazioni. DataTables lo mostra/nasconde con uno stile
   inline (display: block/none), che batterebbe il display: flex: per questo il
   flex è forzato con !important solo quando lo stile inline lo mostra. Con
   Bootstrap 4 il velo riceve anche la classe .card (bordo, colonna): annullati. */
div.dt-container div.dt-processing { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; margin: 0; transform: none; padding: 0; background: rgba(255,255,255,.65); border: 0; border-radius: 0; box-shadow: none; z-index: 5; flex-direction: row; align-items: center; justify-content: center; color: var(--rd-heading); font-weight: 600; }
div.dt-container div.dt-processing[style*="block"] { display: flex !important; }
div.dt-container div.dt-processing > div { display: none; }
/* mentre il velo è visibile la cella "Caricamento…" della tabella vuota resta nascosta (non raddoppia il messaggio) */
div.dt-container:has(div.dt-processing[style*="block"]) table.dataTable td.dt-empty { visibility: hidden; }
.dark-mode div.dt-container div.dt-processing { background: rgba(22,28,37,.7); }
div.dt-container div.dt-processing::after { content: ""; display: block; flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border: 3px solid var(--rd-blue-light); border-right-color: transparent; border-radius: 50%; margin-left: .6rem; animation: rd-spin .8s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { div.dt-container div.dt-processing::after { animation: none; } }

/* ---- SweetAlert2: coerente con i token ---------------------------------- */
.swal2-popup { font-family: inherit; border-radius: .5rem; }
.swal2-title { color: var(--rd-heading); font-size: 1.25rem; }
.swal2-styled.swal2-confirm { background-color: var(--rd-blue) !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 .2rem var(--rd-focus) !important; }
.swal2-styled.swal2-deny { background-color: var(--rd-danger) !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background-color: var(--rd-muted) !important; box-shadow: none !important; }

/* login in dark: AdminLTE farebbe il fondo grigio; resta il navy del brand e il
   logo (blu scuro) viene schiarito */
.dark-mode.login-page, .dark-mode .login-page { background-color: var(--rd-navy) !important; } /* AdminLTE mette !important sul grigio di .dark-mode */
.dark-mode .login-logo img, .dark-mode .login-box .login-logo-wrap img { filter: brightness(0) invert(.92); }

/* righe colorate di Bootstrap (table-success/warning/secondary/danger) leggibili anche in dark */
.dark-mode .table .table-success, .dark-mode .table .table-success > td { background-color: rgba(76,195,138,.14); color: var(--rd-text); }
.dark-mode .table .table-warning, .dark-mode .table .table-warning > td { background-color: rgba(242,184,75,.14); color: var(--rd-text); }
.dark-mode .table .table-danger, .dark-mode .table .table-danger > td { background-color: rgba(240,113,106,.14); color: var(--rd-text); }
.dark-mode .table .table-secondary, .dark-mode .table .table-secondary > td { background-color: rgba(152,166,184,.14); color: var(--rd-muted); }

/* barra filtri applicata al markup esistente (form-group con ml-3, w-25, input-group mb-3) */
.filter-bar .form-group.ml-3, .filter-bar .form-group.mr-3, .filter-bar .form-group.ml-2 { margin-left: 0 !important; margin-right: 0 !important; }
.filter-bar .form-group.w-25 { width: auto !important; flex-basis: 260px; max-width: 320px; }
.filter-bar .form-group .input-group.mb-3, .filter-bar .form-group.mb-3 { margin-bottom: 0 !important; }
.filter-bar .form-group > label:empty, .filter-bar .form-group > label.sr-only { display: none; }
.filter-bar .btn-sm { height: calc(1.5em + .5rem + 2px); }
.card-body > .row > .col-md-12.filter-bar, .tab-pane > .row > .col-md-12.filter-bar, .tab-pane > .filter-bar { margin: 0 0 1rem; border: 1px solid var(--rd-border); border-radius: .3rem; }
/* barra filtri con azioni massive (Report): Ripristina accanto al campo, le azioni sulla tabella a destra */
.filter-bar .filter-actions.filter-actions-inline { margin-left: 0; }
.filter-bar .bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.filter-bar .bulk-actions .dt-buttons { display: inline-flex; gap: .5rem; margin: 0; }
.filter-bar .bulk-actions .dt-buttons .btn { border-radius: .25rem !important; }
@media (max-width: 767.98px) { .filter-bar .bulk-actions { margin-left: 0; width: 100%; } }
/* filtri per colonna sotto le intestazioni: input bassi, senza raddoppiare l'altezza dell'intestazione */
.table-list tr.filt-head th { padding: .25rem .5rem .6rem; }
.table-list tr.filt-head input.form-control { height: calc(1.5em + .5rem + 2px); padding: .2rem .5rem; font-size: .82rem; }
/* checkbox native (selezione righe) col colore del brand, visibili anche in dark */
input[type="checkbox"], input[type="radio"] { accent-color: var(--rd-blue); }


/* ---- campi disabilitati in tema scuro ---------------------------------
   Bootstrap e select2 usano grigi chiari con testo scuro: sul fondo scuro il
   contenuto sparisce. Fondo appena più chiaro della card, testo attenuato. */
.dark-mode .form-control:disabled, .dark-mode .form-control[readonly],
.dark-mode .custom-select:disabled { background-color: var(--rd-surface-2); color: var(--rd-muted); border-color: var(--rd-border); }
.dark-mode .select2-container--default.select2-container--disabled .select2-selection--single,
.dark-mode .select2-container--default.select2-container--disabled .select2-selection--multiple,
.dark-mode .select2-container--bootstrap4.select2-container--disabled .select2-selection { background-color: var(--rd-surface-2); border-color: var(--rd-border); }
.dark-mode .select2-container--disabled .select2-selection__rendered,
.dark-mode .select2-container--disabled .select2-selection__placeholder { color: var(--rd-muted) !important; }
.dark-mode .select2-container--disabled .select2-selection__choice { background-color: var(--rd-surface); color: var(--rd-text); border-color: var(--rd-border); }
.dark-mode .custom-control-input:disabled ~ .custom-control-label { color: var(--rd-muted); }

/* ---- Errore di caricamento DataTables (js/app/datatables-defaults.js) ---- */
table.dataTable td.dt-error { padding: 1.25rem .75rem; color: var(--rd-danger); font-weight: 600; }
table.dataTable td.dt-error .dt-retry { font-weight: 600; }

/* ---- Impianti: pillola tipo ------------------------------------------ */
.type-pill { display: inline-flex; align-items: center; gap: .4em; background: var(--rd-surface-2); border: 1px solid var(--rd-border); color: var(--rd-text); border-radius: .3rem; padding: .2em .6em; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.type-pill i { color: var(--rd-muted); font-size: .85em; }
.status-dot { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; white-space: nowrap; }
.status-dot::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status-available { color: #1E8E3E; }
.status-reduced { color: #C77700; }
.status-unavailable { color: var(--rd-danger); }
.status-note { font-size: .78rem; color: var(--rd-muted); white-space: nowrap; }
.status-note::before { content: "·"; margin: 0 .35em; }
.table-list td.actions-cell { white-space: nowrap; }
/* nomi lunghi (SPV, gruppo) su una riga con puntini: la larghezza la decide la colonna */
.table-list .cell-ellipsis { display: block; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plant-table .cell-sub { white-space: nowrap; }
.table-list td.status-cell { white-space: nowrap; }
/* colonne "a contenuto" (id, tipo, numeri, stato, azioni): lo spazio libero va alle colonne testuali */
.table-list th.shrink, .table-list td.shrink { width: 1%; white-space: nowrap; }
.text-faint { color: var(--rd-faint); }
.table-list td.tabular { font-variant-numeric: tabular-nums; }
.dark-mode .status-available { color: #4CC26A; }
.dark-mode .status-reduced { color: #F0A93B; }
.dark-mode .type-pill { background: var(--rd-surface-2); border-color: var(--rd-border); color: #fff; }

/* ---- Calendari: daterangepicker e tempusdominus -------------------------
   Selezione e intervallo con i colori del brand in entrambi i temi; in scuro
   fondi, bordi, frecce e celle fuori mese seguono i token. Il widget di
   tempusdominus è un .dropdown-menu: fondo e bordo arrivano già dalle regole
   dark dei dropdown, qui restano solo le celle.
   I CSS vendor arrivano dalla sezione styles della pagina, cioè dopo questo
   file: le regole del tema chiaro sono prefissate con body per vincere. */
body .daterangepicker { font-family: inherit; border-color: var(--rd-border); box-shadow: 0 8px 24px rgba(21,66,117,.12); }
body .daterangepicker td.in-range { background-color: var(--rd-blue-soft); color: var(--rd-text); }
body .daterangepicker td.active, body .daterangepicker td.active:hover,
body .daterangepicker .ranges li.active { background-color: var(--rd-blue); color: #fff; }
body .daterangepicker .drp-buttons .btn-primary { background-color: var(--rd-blue); border-color: var(--rd-blue); }
body .bootstrap-datetimepicker-widget table td.active, body .bootstrap-datetimepicker-widget table td.active:hover,
body .bootstrap-datetimepicker-widget table td span.active { background-color: var(--rd-blue); color: #fff; text-shadow: none; }
body .bootstrap-datetimepicker-widget table td.today:before { border-bottom-color: var(--rd-blue); }
body .bootstrap-datetimepicker-widget table td.active.today:before { border-bottom-color: #fff; }
body .bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn { color: var(--rd-blue-light); }

.dark-mode .daterangepicker { background-color: var(--rd-surface); border-color: var(--rd-border); color: var(--rd-text); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.dark-mode .daterangepicker:before { border-bottom-color: var(--rd-border); }
.dark-mode .daterangepicker:after { border-bottom-color: var(--rd-surface); }
.dark-mode .daterangepicker.drop-up:before { border-top-color: var(--rd-border); }
.dark-mode .daterangepicker.drop-up:after { border-top-color: var(--rd-surface); }
.dark-mode .daterangepicker .calendar-table { background-color: var(--rd-surface); border-color: var(--rd-surface); }
.dark-mode .daterangepicker .calendar-table .next span, .dark-mode .daterangepicker .calendar-table .prev span { border-color: var(--rd-text); }
.dark-mode .daterangepicker td.off, .dark-mode .daterangepicker td.off.in-range,
.dark-mode .daterangepicker td.off.start-date, .dark-mode .daterangepicker td.off.end-date { background-color: var(--rd-surface); color: var(--rd-faint); }
.dark-mode .daterangepicker td.in-range { background-color: var(--rd-blue-soft); color: var(--rd-text); }
.dark-mode .daterangepicker td.active, .dark-mode .daterangepicker td.active:hover { background-color: var(--rd-blue); color: #fff; }
.dark-mode .daterangepicker td.available:hover, .dark-mode .daterangepicker th.available:hover,
.dark-mode .daterangepicker .ranges li:hover { background-color: var(--rd-surface-2); color: var(--rd-text); }
.dark-mode .daterangepicker td.week, .dark-mode .daterangepicker th.week,
.dark-mode .daterangepicker td.disabled, .dark-mode .daterangepicker option.disabled { color: var(--rd-faint); }
.dark-mode .daterangepicker .drp-buttons, .dark-mode .daterangepicker.show-ranges.ltr .drp-calendar.left,
.dark-mode .daterangepicker.show-ranges.rtl .drp-calendar.right { border-color: var(--rd-border); }
.dark-mode .daterangepicker select.monthselect, .dark-mode .daterangepicker select.yearselect,
.dark-mode .daterangepicker select.hourselect, .dark-mode .daterangepicker select.minuteselect,
.dark-mode .daterangepicker select.secondselect, .dark-mode .daterangepicker select.ampmselect { background: var(--rd-input-bg); border: 1px solid var(--rd-input-border); color: var(--rd-text); }
.dark-mode .daterangepicker .drp-buttons .btn-default { background: transparent; border: 1px solid var(--rd-input-border); color: var(--rd-text); }

.dark-mode .bootstrap-datetimepicker-widget { color: var(--rd-text); }
.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: var(--rd-surface); }
.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: var(--rd-surface); }
.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-bottom-color: var(--rd-border); }
.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.top:before { border-top-color: var(--rd-border); }
.dark-mode .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .bootstrap-datetimepicker-widget table td.hour:hover,
.dark-mode .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .bootstrap-datetimepicker-widget table td.second:hover,
.dark-mode .bootstrap-datetimepicker-widget table td span:hover,
.dark-mode .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: var(--rd-surface-2); }
.dark-mode .bootstrap-datetimepicker-widget table td.old, .dark-mode .bootstrap-datetimepicker-widget table td.new,
.dark-mode .bootstrap-datetimepicker-widget table td span.old, .dark-mode .bootstrap-datetimepicker-widget table td.cw,
.dark-mode .bootstrap-datetimepicker-widget table td.disabled, .dark-mode .bootstrap-datetimepicker-widget table th.disabled { color: var(--rd-faint); }
.dark-mode .bootstrap-datetimepicker-widget table td.active, .dark-mode .bootstrap-datetimepicker-widget table td span.active { background-color: var(--rd-blue); color: #fff; }