/* =====================================================
   OPENDESK24 — Dark Theme  (Unified System v2)
   Unica fonte di verità per TUTTO il dark mode desktop.
   Caricato da base.html e base_mobile.html.
   ===================================================== */

/* ══════════════════════════════════════════════════════
   1. DESIGN SYSTEM — CSS Variables
   ══════════════════════════════════════════════════════ */

:root {
  /* ── New design tokens (light defaults) ── */
  --bg-main:       #F5F7FA;
  --bg-container:  #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F3F4F6;
  --border-color:  rgba(0,0,0,0.07);

  --text-primary:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;

  --accent-blue:   var(--brand);
  --accent-green:  var(--success);
  --accent-red:    var(--danger);
  --accent-orange: var(--warning);

  /* ── Legacy aliases (backward compat for templates) ── */
  --bg:          var(--bg-main);
  --card:        var(--bg-card);
  --text-main:   var(--text-primary);
  --border:      var(--border-color);
  --border-light: var(--border-color);
  --primary:     var(--accent-blue);

  /* Semantic surfaces */
  --surface-soft:    #f9fafb;
  --surface-alt:     #f3f4f6;
  --surface-warn:    #fffbeb;
  --surface-success: #f0fdf4;
  --surface-info:    #f0f9ff;
  --border-info:     #bae6fd;
  --border-success:  #dcfce7;

  /* Brand */
  --primary-alpha:  rgba(47,107,255,0.15);
  --success:        var(--success);
  --success-alpha:  rgba(34,197,94,0.15);
  --warning:        var(--warning);
  --warning-alpha:  rgba(245,158,11,0.15);
  --danger:         var(--danger);
  --danger-alpha:   rgba(239,68,68,0.15);

  /* Mobile palette */
  --mob-bg:           #020B22;
  --mob-bg-soft:      #06132D;
  --mob-card:         #0D1F3C;
  --mob-card-2:       #12284A;
  /* Border tono navy scuro coordinato con sidebar slate (PR #22).
   * Prima era rgba(132,156,255,0.14) — su display Retina dark appariva
   * come riga bianco-grigia troppo visibile (effetto "marcato bianco").
   * Ora: navy semi-trasparente che definisce le card senza dominarle. */
  --mob-border:       #1E3151;  /* navy slate solido — definisce le card senza halo bianco */
  --mob-border-solid: #1E3151;  /* compat alias */
  --mob-surface:      #12284A;               /* compat alias → mob-card-2 */
  --mob-text:         #F5F7FF;
  --mob-text-soft:    #95A4C8;
  --mob-text-muted:   #6E7FA7;
  --mob-primary:      var(--brand);
  --mob-primary-2:    var(--brand);
  --mob-primary-soft: rgba(111,134,255,0.16);
  --mob-success:      #51E39A;
  --mob-danger:       #FF8A97;
  --mob-warning:      #F7B84B;
  --mob-info:         var(--brand-hover);

  /* Layout */
  --radius:    16px;
  --radius-sm: 10px;
  --spacing:   16px;
}

/* ── Dark theme overrides ─────────────────────────────── */
html[data-theme="dark"] {
  /* Design tokens — dark values */
  --bg-main:       var(--surface-0);
  --bg-container:  var(--surface-2);
  --bg-card:       var(--surface-3);
  --bg-card-hover: var(--surface-4);
  --border-color:  rgba(255,255,255,0.08);

  --text-primary:   #FFFFFF;
  --text-secondary: var(--text-secondary);
  --text-muted:     var(--text-tertiary);

  --accent-blue:   var(--brand);
  --accent-green:  var(--success);
  --accent-red:    var(--danger);
  --accent-orange: var(--warning);

  /* Legacy aliases — dark values */
  --bg:           var(--surface-0);
  --bg-elevated:  var(--surface-2);
  --card:         var(--surface-3);
  --card-soft:    var(--surface-4);
  --border:       rgba(255,255,255,0.08);
  --border-soft:  rgba(255,255,255,0.12);
  --border-light: rgba(255,255,255,0.08);
  --text-main:    #FFFFFF;
  --primary:      var(--brand);

  /* Semantic surfaces */
  --surface-soft:    var(--surface-4);
  --surface-alt:     var(--surface-2);
  --surface-warn:    rgba(245,158,11,0.08);
  --surface-success: rgba(34,197,94,0.08);
  --surface-info:    rgba(47,107,255,0.08);
  --border-info:     rgba(47,107,255,0.2);
  --border-success:  rgba(34,197,94,0.2);

  /* Brand — dark */
  --primary-alpha:  rgba(79,132,255,0.15);
  --success:        var(--success);
  --success-alpha:  rgba(34,197,94,0.15);
  --warning:        var(--warning);
  --warning-alpha:  rgba(245,158,11,0.15);
  --danger:         var(--danger);
  --danger-alpha:   rgba(239,68,68,0.15);
  --mob-surface:    var(--surface-4);

  /* Bootstrap CSS var overrides */
  --bs-body-bg:                  var(--surface-0);
  --bs-body-color:               #FFFFFF;
  --bs-secondary-bg:             var(--surface-2);
  --bs-tertiary-bg:              var(--surface-3);
  --bs-border-color:             rgba(255,255,255,0.1);
  --bs-border-color-translucent: rgba(255,255,255,0.06);
  --bs-success:  var(--success);
  --bs-danger:   var(--danger);
  --bs-warning:  var(--warning);

  color-scheme: dark;
}

html[data-theme="light"] { color-scheme: light; }

/* ══════════════════════════════════════════════════════
   2. BODY + LAYOUT
   ══════════════════════════════════════════════════════ */

/* ── 1. BODY BASE — desktop only (:not(.mob-body) excludes mobile) ── */
html[data-theme="dark"] body:not(.mob-body) {
  background-color: var(--surface-0) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .page-content,
html[data-theme="dark"] .main-wrapper {
  background-color: var(--surface-0) !important;
}

/* ── 2. SIDEBAR ── */
html[data-theme="dark"] .sidebar {
  background-color: var(--sb-bg) !important;
}

/* ── 3. CARDS ── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .card-clean,
html[data-theme="dark"] .white-surface,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .filter-box {
  background-color: var(--surface-3) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* ── 4. TABLES ── */
html[data-theme="dark"] .table {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .table thead tr,
html[data-theme="dark"] .table thead th {
  background-color: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-default) !important;
}
html[data-theme="dark"] .table tbody tr {
  background-color: var(--surface-3) !important;
  border-color: var(--border-default) !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  border-color: var(--border-default) !important;
}

/* ── 5. FORMS ── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* ── 6. MODAL ── */
html[data-theme="dark"] .modal-content {
  background-color: var(--surface-3) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* ── 7. Bootstrap body vars override ── */
html[data-theme="dark"] {
  --bs-body-bg:     var(--surface-0);
  --bs-body-color:  var(--text-primary);
  --bs-tertiary-bg: var(--surface-3);
  --bs-border-color: var(--border-default);
}

/* ══════════════════════════════════════════════════════
   3. CARDS & PANELS
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .card-clean,
[data-theme="dark"] .white-surface,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .alert-card,
[data-theme="dark"] .pl-kpi-card {
  background:   var(--bg-card) !important;
  color:        var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow:   0 1px 4px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2) !important;
}

/* Panel-dark → container level (L2) */
[data-theme="dark"] .panel-dark {
  background:   var(--bg-container) !important;
  color:        var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow:   0 1px 4px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2) !important;
}

/* KPI desk */
[data-theme="dark"] .kpi-desk {
  background:   var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow:   0 1px 3px rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.2);
}

/* Text inside cards */
[data-theme="dark"] .card-clean .text-muted,
[data-theme="dark"] .white-surface .text-muted,
[data-theme="dark"] .card-clean .text-secondary,
[data-theme="dark"] .white-surface .text-secondary { color: var(--text-muted) !important; }

/* Links inside cards (nomi cliente, camera, etc.) */
[data-theme="dark"] .card-clean a:not(.btn):not([class*="btn-"]) { color: var(--text-primary) !important; }
[data-theme="dark"] .card-clean a:not(.btn):not([class*="btn-"]):hover { color: var(--text-secondary) !important; }

/* thead inside card-clean */
[data-theme="dark"] .card-clean thead th,
[data-theme="dark"] .white-surface thead th {
  background:   var(--bg-container) !important;
  color:        var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .card-clean td,
[data-theme="dark"] .card-clean th,
[data-theme="dark"] .white-surface td,
[data-theme="dark"] .white-surface th { border-color: var(--border-color) !important; }
[data-theme="dark"] .card-clean tbody tr:hover,
[data-theme="dark"] .white-surface tbody tr:hover { background: var(--bg-card-hover) !important; }

/* P&L KPI labels / amounts */
[data-theme="dark"] .pl-kpi-label { color: var(--text-secondary) !important; }
[data-theme="dark"] .pl-kpi-amount.text-success { color: var(--accent-green) !important; }
[data-theme="dark"] .pl-kpi-amount.text-danger  { color: var(--accent-red)   !important; }

/* ══════════════════════════════════════════════════════
   4. TABLES — Global (tutte le tabelle)
   ══════════════════════════════════════════════════════ */

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

[data-theme="dark"] .table thead,
[data-theme="dark"] .table thead tr { background: var(--bg-container) !important; }

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {
  background:   var(--bg-container) !important;
  color:        var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .table tbody tr { border-color: var(--border-color) !important; }

[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: var(--border-color) !important; }

/* Hover — leggero shift, non invasivo */
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover { background: var(--bg-card-hover) !important; }
[data-theme="dark"] .table-hover tbody tr:hover td { background: var(--bg-card-hover) !important; }

/* table-light override */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th {
  background: var(--bg-container) !important;
  color: var(--text-secondary) !important;
}

/* Colori semantici nelle tabelle */
[data-theme="dark"] .table .text-success { color: var(--accent-green) !important; }
[data-theme="dark"] .table .text-danger  { color: var(--accent-red)   !important; }
[data-theme="dark"] .table .text-muted   { color: var(--text-muted)   !important; }

/* ── Checkout / Turni table ── */
[data-theme="dark"] .checkout-table th {
  background:   var(--bg-container) !important;
  color:        var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .checkout-table td,
[data-theme="dark"] .checkout-table th { border-color: var(--border-color) !important; }
[data-theme="dark"] .checkout-table tbody tr:hover { background: var(--bg-card-hover) !important; }

/* ── P&L detail table ── */
[data-theme="dark"] .pl-tbl thead th {
  background:   var(--bg-container) !important;
  color:        var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pl-tbl td,
[data-theme="dark"] .pl-tbl th {
  color:        var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pl-tbl tbody tr:hover { background: var(--bg-card-hover) !important; }

/* ══════════════════════════════════════════════════════
   5. FORMS — Input / Select / Textarea
   ══════════════════════════════════════════════════════ */

/* ── SCOPING: aggiunto body:not(.mob-body) a tutte le regole input/form ──
   Motivo: dark-theme.css definisce var(--border-color)=rgba(255,255,255,0.08)
   che sui display Retina mobile rendeva i bordi nettamente bianchi.
   Il mobile gestisce gia' input/form via mobile.css con --mob-border.
*/
[data-theme="dark"] body:not(.mob-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
[data-theme="dark"] body:not(.mob-body) select,
[data-theme="dark"] body:not(.mob-body) textarea,
[data-theme="dark"] body:not(.mob-body) .form-control,
[data-theme="dark"] body:not(.mob-body) .form-select {
  background-color: var(--bg-container) !important;
  border-color:     var(--border-color) !important;
  color:            var(--text-primary) !important;
}

[data-theme="dark"] body:not(.mob-body) input::placeholder,
[data-theme="dark"] body:not(.mob-body) textarea::placeholder { color: var(--text-muted) !important; }

[data-theme="dark"] body:not(.mob-body) input:focus,
[data-theme="dark"] body:not(.mob-body) select:focus,
[data-theme="dark"] body:not(.mob-body) textarea:focus,
[data-theme="dark"] body:not(.mob-body) .form-control:focus,
[data-theme="dark"] body:not(.mob-body) .form-select:focus {
  background-color: var(--bg-container) !important;
  border-color:     var(--accent-blue) !important;
  box-shadow:       0 0 0 3px rgba(47,107,255,0.18) !important;
  color:            var(--text-primary) !important;
  outline: none;
}

[data-theme="dark"] body:not(.mob-body) select option { background: var(--bg-container); color: var(--text-primary); }

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

/* ── File input ── */
[data-theme="dark"] body:not(.mob-body) input[type="file"],
[data-theme="dark"] body:not(.mob-body) .form-control[type="file"] {
  background-color: var(--bg-container) !important;
  border-color:     var(--border-color) !important;
  color:            var(--text-secondary) !important;
}
[data-theme="dark"] body:not(.mob-body) input[type="file"]::file-selector-button {
  background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-secondary); border-radius: 6px;
  padding: 4px 10px; margin-right: 8px; cursor: pointer;
}
[data-theme="dark"] body:not(.mob-body) input[type="file"]::file-selector-button:hover {
  background: var(--bg-card-hover); color: var(--text-primary);
}
[data-theme="dark"] body:not(.mob-body) input[type="file"]::-webkit-file-upload-button {
  background: var(--bg-card) !important; border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important; border-radius: 6px;
  padding: 4px 10px; margin-right: 8px; cursor: pointer;
}
[data-theme="dark"] body:not(.mob-body) input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--bg-card-hover) !important; color: var(--text-primary) !important;
}

/* ── Autofill ── */
[data-theme="dark"] body:not(.mob-body) input:-webkit-autofill,
[data-theme="dark"] body:not(.mob-body) input:-webkit-autofill:hover,
[data-theme="dark"] body:not(.mob-body) input:-webkit-autofill:focus,
[data-theme="dark"] body:not(.mob-body) textarea:-webkit-autofill,
[data-theme="dark"] body:not(.mob-body) select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-container) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}

/* ── Checkbox / Radio ── */
[data-theme="dark"] body:not(.mob-body) .form-check-input {
  background-color: var(--bg-container) !important;
  border-color:     var(--border-color) !important;
}
[data-theme="dark"] body:not(.mob-body) .form-check-input:checked {
  background-color: var(--accent-blue) !important;
  border-color:     var(--accent-blue) !important;
}

/* ── Input group ── */
[data-theme="dark"] body:not(.mob-body) .input-group-text {
  background-color: var(--bg-card) !important;
  border-color:     var(--border-color) !important;
  color:            var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════
   6. MODAL
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .modal-content {
  background-color: var(--bg-card) !important;
  border-color:     var(--border-color) !important;
  color:            var(--text-primary) !important;
}
[data-theme="dark"] .modal-header { border-color: var(--border-color) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .modal-footer { border-color: var(--border-color) !important; }
[data-theme="dark"] .modal-title  { color: var(--text-primary) !important; }
/* Speculare alla regola dark: in light il `.modal-title` ereditava un
   colore indeterminato (in alcuni modali risultava invisibile). Stessa
   forza dell'override dark per garantire la simmetria di leggibilità. */
html[data-theme="light"] body:not(.mob-body) .modal-title { color: var(--text-primary); }
[data-theme="dark"] .btn-close    { filter: invert(1) brightness(0.7); }

/* ══════════════════════════════════════════════════════
   7. DROPDOWN
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-card) !important;
  border-color:     var(--border-color) !important;
}
[data-theme="dark"] .dropdown-item { color: var(--text-secondary) !important; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-card-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .dropdown-divider { border-color: var(--border-color) !important; }

/* ══════════════════════════════════════════════════════
   8. ALERTS
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .alert-info    { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .alert-warning { background: var(--surface-warn); border-color: rgba(245,158,11,0.25); color: var(--accent-orange); }
[data-theme="dark"] .alert-danger  { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); color: var(--accent-red); }
[data-theme="dark"] .alert-success { background: var(--surface-success); border-color: rgba(34,197,94,0.25); color: var(--accent-green); }

/* ══════════════════════════════════════════════════════
   9. BADGES
   ══════════════════════════════════════════════════════ */

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

/* ══════════════════════════════════════════════════════
   10. BUTTONS
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .btn-outline-secondary {
  border-color: var(--border-color) !important; color: var(--text-secondary) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--bg-card) !important; color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-outline-dark {
  border-color: var(--border-color) !important; color: var(--text-secondary) !important;
}
[data-theme="dark"] .btn-outline-dark:hover {
  background: var(--bg-card) !important; color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════
   11. BOOTSTRAP UTILITIES
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .text-muted     { color: var(--text-muted)     !important; }
[data-theme="dark"] .text-secondary { color: var(--text-secondary)  !important; }
[data-theme="dark"] .text-dark      { color: var(--text-primary)    !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-primary); }
[data-theme="dark"] hr             { border-color: var(--border-color) !important; }
[data-theme="dark"] .border        { border-color: var(--border-color) !important; }
[data-theme="dark"] .border-top    { border-top-color:    var(--border-color) !important; }
[data-theme="dark"] .border-bottom { border-bottom-color: var(--border-color) !important; }

/* ══════════════════════════════════════════════════════
   12. CDF BLOCKS (Profit & Loss / Cashflow)
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .cdf-block {
  background:   var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .cdf-block-header {
  background:   var(--bg-card-hover) !important;
  color:        var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .cdf-block-body {
  background: var(--bg-card) !important;
  color:      var(--text-primary) !important;
}
[data-theme="dark"] .cdf-section       { border-color: var(--border-color) !important; }
[data-theme="dark"] .cdf-section-label { color: var(--text-muted) !important; }
[data-theme="dark"] .cdf-row:hover     { background: var(--bg-card-hover) !important; }
[data-theme="dark"] .cdf-empty         { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════════════
   13. SUMMARY / RIEPILOGO BOXES
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .summary-row,
[data-theme="dark"] .riepilogo-row {
  background:   var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color:        var(--text-primary) !important;
}
[data-theme="dark"] .summary-row:nth-child(even),
[data-theme="dark"] .riepilogo-row:nth-child(even) { background: var(--bg-card-hover) !important; }
[data-theme="dark"] .summary-total,
[data-theme="dark"] .riepilogo-total {
  background:   var(--bg-card-hover) !important;
  border-color: var(--border-color) !important;
}

/* ══════════════════════════════════════════════════════
   14. EMPTY STATES
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .empty-state-box,
[data-theme="dark"] .servizi-empty {
  background:   var(--bg-container) !important;
  border-color: var(--border-color) !important;
  color:        var(--text-secondary) !important;
}
[data-theme="dark"] .empty-state-box i,
[data-theme="dark"] .servizi-empty i { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════════════
   15. P&L SPECIFIC
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .pl-section-count {
  background: var(--bg-card-hover) !important;
  color:      var(--text-secondary) !important;
}

/* pl-tbl (custom table senza class="table") */
[data-theme="dark"] .pl-tbl thead th {
  background:   var(--bg-container) !important;
  color:        var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pl-tbl tbody tr {
  background:   var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pl-tbl tbody tr:hover { background: var(--bg-card-hover) !important; }
[data-theme="dark"] .pl-tbl tbody td {
  color:        var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pl-tbl tfoot td {
  background:   var(--bg-container) !important;
  border-color: var(--border-color) !important;
  color:        var(--text-primary) !important;
}

/* P&L filter label */
[data-theme="dark"] .pl-filter-label { color: var(--text-secondary) !important; }

/* P&L cell helpers */
[data-theme="dark"] .pld-muted       { color: var(--text-secondary) !important; }
[data-theme="dark"] .pld-faint       { color: var(--text-muted)     !important; }
[data-theme="dark"] .pld-income      { color: var(--accent-green)   !important; }
[data-theme="dark"] .pld-expense     { color: var(--accent-red)     !important; }
[data-theme="dark"] .pld-total-label { color: var(--text-primary)   !important; }

/* ══════════════════════════════════════════════════════
   16. STRUCTURE TABS
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .tab-structure-bar { background: var(--bg-card) !important; }

/* ══════════════════════════════════════════════════════
   17. SELECT2 (desktop — theme-aware)
   ══════════════════════════════════════════════════════ */

/* Dark: selezione */
[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--bg-container) !important;
  border-color:     var(--border-color) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--text-primary) !important; }
[data-theme="dark"] .select2-container--default .select2-selection__arrow b  { border-color: var(--text-muted) transparent transparent; }

/* Light: ripristino bianco */
[data-theme="light"] .select2-container--default .select2-selection--single  { background-color: #fff; }
[data-theme="light"] .select2-container--default .select2-selection__rendered { color: #111827; }
[data-theme="light"] .select2-container--default .select2-dropdown           { background: #fff; color: #111827; border-color: #d1d5db; }
[data-theme="light"] .select2-results__option                                 { color: #111827; }
[data-theme="light"] .select2-search__field { background: #f9fafb !important; border-color: #d1d5db !important; color: #111827 !important; }

/* ══════════════════════════════════════════════════════
   18. TABLE TFOOT — override hardcoded inline backgrounds
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .table tfoot,
[data-theme="dark"] .table tfoot tr {
  background: var(--bg-container) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .table tfoot td,
[data-theme="dark"] .table tfoot th {
  background: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* ══════════════════════════════════════════════════════
   19. INFO / GUIDA BOXES (registro_movimenti, nuova_transazione)
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .info-box-blue {
  background: var(--surface-info) !important;
  border-color: var(--border-info) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .info-box-blue a { color: var(--accent-blue) !important; }
[data-theme="dark"] .info-box-blue strong { color: var(--text-primary) !important; }

[data-theme="dark"] .info-box-yellow {
  background: var(--surface-warn) !important;
  border-color: rgba(245,158,11,0.25) !important;
  color: var(--accent-orange) !important;
}
[data-theme="dark"] .info-box-yellow a,
[data-theme="dark"] .info-box-yellow strong { color: var(--accent-orange) !important; }

[data-theme="dark"] .guida-box {
  background: var(--surface-info) !important;
  border-color: var(--border-info) !important;
}
[data-theme="dark"] .guida-box .guida-title { color: var(--text-primary) !important; }
[data-theme="dark"] .guida-box .guida-body  { color: var(--text-secondary) !important; }
[data-theme="dark"] .guida-box a            { color: var(--accent-blue) !important; }

/* ══════════════════════════════════════════════════════
   20. SECTION SUB-HEADERS (modal boxes, riepilogo, preview)
   ══════════════════════════════════════════════════════ */

/* Generic subsection header (gray-bg strip inside a bordered box) */
[data-theme="dark"] .subsection-hd {
  background: var(--bg-container) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Income section header in resoconto */
[data-theme="dark"] .income-hd {
  background: rgba(34,197,94,0.08) !important;
  border-color: var(--border-color) !important;
  color: var(--success-text) !important;
}

/* Expense section header in resoconto */
[data-theme="dark"] .expense-hd {
  background: rgba(239,68,68,0.08) !important;
  border-color: var(--border-color) !important;
  color: var(--danger-text) !important;
}

/* Green-highlight total rows (netto proprietario, totale stimato) */
[data-theme="dark"] .total-success-row {
  background: rgba(34,197,94,0.1) !important;
}
[data-theme="dark"] .total-success-row .fw-bold,
[data-theme="dark"] .total-success-row [style*="color:#059669"],
[data-theme="dark"] .total-success-row [style*="color:#065f46"] {
  color: var(--success-text) !important;
}

/* Netto proprietario row */
[data-theme="dark"] .netto-prop-row {
  background: rgba(34,197,94,0.1) !important;
}
[data-theme="dark"] .netto-prop-row .fw-bold,
[data-theme="dark"] .netto-prop-row span { color: var(--success-text) !important; }

/* ══════════════════════════════════════════════════════
   21. CALENDAR LEGEND STRIP
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .cal-legend-strip {
  border-top-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════
   22. MOBILE ALIGNMENT — shared components on dark bg
   ══════════════════════════════════════════════════════ */

/* Mobile base uses its own fixed-dark palette — keep invariant */
/* Only align text-color helpers that bleed through */
.mob-page-bg  { background: var(--mob-bg, var(--surface-0)); }
.mob-card-bg  { background: var(--mob-card, #0E1C3D); }
.mob-surface  { background: var(--mob-surface, var(--surface-3)); }

/* ══════════════════════════════════════════════════════
   23. PREMIUM GLASS SYSTEM — MoneyMap Design v5
   Sovrascrive le card desktop in dark mode con glass
   gradient. Aggiunge utility classes globali riusabili.
   ══════════════════════════════════════════════════════ */

/* Body depth — radial gradient su fondo molto scuro (desktop only) */
html[data-theme="dark"] body:not(.mob-body) {
  background:
    radial-gradient(circle at 20% 10%, rgba(40,80,180,0.12), transparent 40%),
    radial-gradient(circle at 80% 0%,  rgba(20,60,140,0.08), transparent 40%),
    #050B18 !important;
}
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .main-wrapper { background: transparent !important; }

/* Glass card — card-clean, od-kpi, kpi-desk in dark mode (exclude calendars) */
html[data-theme="dark"] .card-clean:not(.cal-card):not(.cal-light-scope),
html[data-theme="dark"] .od-kpi,
html[data-theme="dark"] .kpi-desk {
  background: linear-gradient(145deg, rgba(20,35,70,0.88), rgba(10,20,45,0.96)) !important;
  border: 1px solid rgba(120,160,255,0.12) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Table head inside glass card */
html[data-theme="dark"] .card-clean thead th,
html[data-theme="dark"] .card-clean thead tr {
  background: rgba(10,20,45,0.55) !important;
  border-color: rgba(120,160,255,0.08) !important;
}

/* Separatori interni morbidi */
html[data-theme="dark"] .card-clean td,
html[data-theme="dark"] .card-clean th { border-color: rgba(160,180,220,0.06) !important; }
html[data-theme="dark"] .card-clean .border-bottom,
html[data-theme="dark"] .card-clean .border-top,
html[data-theme="dark"] .card-clean hr { border-color: rgba(160,180,220,0.06) !important; }

/* ── Utility: numeri KPI con impatto visivo ────────── */
.od-value { font-weight: 700; letter-spacing: -0.3px; }
.od-value.positive {
  color: var(--success-text) !important;
  text-shadow: 0 0 12px rgba(34,230,160,0.35);
}
.od-value.negative {
  color: var(--danger-text) !important;
  text-shadow: 0 0 12px rgba(255,90,107,0.30);
}

/* ── Utility: gerarchia tipografica ────────────────── */
.od-label { font-weight: 500; }
html[data-theme="dark"] .od-label { color: rgba(200,215,255,0.75) !important; }
html[data-theme="dark"] .od-sub   { color: rgba(180,200,255,0.55) !important; }

/* ── Utility: icon container ───────────────────────── */
.od-icon {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(120,160,255,0.20), rgba(30,60,120,0.08));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.06),
    0 4px 12px rgba(0,0,0,0.35);
}

/* ── Touch feedback desktop only (.mob-body handles mobile) ── */
html[data-theme="dark"] body:not(.mob-body) .btn {
  transition: transform .12s ease, box-shadow .12s ease;
}
html[data-theme="dark"] body:not(.mob-body) .btn:active { transform: scale(0.985); }