/* =============================================
   TEMA SCURO — solo token + override Bootstrap/legacy.
   I componenti leggono i token (--surface, --text-2, --accent...) da src/app/ui.css.
   ============================================= */

html:root {
  color-scheme: dark;

  /* ---- Token design system ---- */
  --bg: #070C17;
  --surface: #0E1626;
  --surface-2: #131E31;
  --surface-3: #1A273D;
  --surface-glass: rgba(10, 17, 31, 0.92);
  --border: #1E2B41;
  --border-strong: #2B3B57;
  --text: #E6ECF5;
  --text-2: #9DAAC0;
  --text-3: #7B8AA3;
  --accent: #4F8CFF;
  --accent-2: #74A5FF;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --accent-contrast: #FFFFFF;
  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --info: #38BDF8;
  --info-soft: rgba(56, 189, 248, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(79, 140, 255, 0.3);
  --scrim: rgba(3, 6, 12, 0.62);

  /* ---- Legacy (componenti non ancora migrati) ---- */
  --background: var(--bg);
  --foreground: var(--text);
  --card-bg: var(--surface);
  --text-secondary: var(--text-2);

  /* ---- Bootstrap ---- */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-card-bg: var(--surface);
  --bs-border-color: var(--border);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-secondary-color: var(--text-2);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-link-color: var(--accent-2);
  --bs-link-hover-color: #9CC0FF;
  --bs-link-color-rgb: 116, 165, 255;
  --bs-link-hover-color-rgb: 156, 192, 255;

  /* ---- Tailwind: rimappa la scala grigi, così le classi text-gray-* restano leggibili ---- */
  --color-gray-900: var(--text);
  --color-gray-800: var(--text);
  --color-gray-700: var(--text);
  --color-gray-600: var(--text-2);
  --color-gray-500: var(--text-2);
  --color-gray-400: var(--text-3);
  --color-gray-300: var(--border-strong);
  --color-gray-200: var(--border);
  --color-gray-100: var(--surface-2);
  --color-gray-50: var(--surface-2);
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.pagebkg {
  background:
    radial-gradient(ellipse 70% 45% at 15% -5%, rgba(79, 140, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 95% 105%, rgba(124, 58, 237, 0.06) 0%, transparent 55%),
    var(--bg);
}

/* ---- Bootstrap cards ---- */
.card { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
.card-header, .card-footer { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text); }

/* ---- Modal ---- */
.modal-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--border) !important; }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---- Form ---- */
.form-control, .form-select {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--ring) !important;
}
.form-control::placeholder { color: var(--text-3) !important; }
.form-select option, select option { background: var(--surface-2); color: var(--text); }
.form-check-input { background-color: var(--surface-3); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-label { color: var(--text-2); }

/* ---- Tabella ---- */
.table { --bs-table-bg: var(--surface); --bs-table-color: var(--text); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); color: var(--text); }
.table td, .table th { border-color: var(--border); }

/* ---- Utilities ---- */
.bg-light  { background-color: var(--surface-2) !important; }
.bg-white  { background-color: var(--surface) !important; }
.text-dark { color: var(--text) !important; }
.text-muted { color: var(--text-3) !important; }
.shadow    { box-shadow: var(--shadow-sm) !important; }

.dropdown-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; }
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background: var(--surface-2) !important; }

.bg-danger-subtle  { background-color: var(--danger-soft) !important; }
.bg-success-subtle { background-color: var(--success-soft) !important; }
.bg-warning-subtle { background-color: var(--warning-soft) !important; }
.bg-info-subtle    { background-color: var(--info-soft) !important; }

.alert-info    { background-color: var(--info-soft) !important;    border-color: rgba(56,189,248,.3) !important;  color: #7DD3FC !important; }
.alert-success { background-color: var(--success-soft) !important; border-color: rgba(52,211,153,.3) !important;  color: #6EE7B7 !important; }
.alert-warning { background-color: var(--warning-soft) !important; border-color: rgba(251,191,36,.3) !important;  color: #FDE68A !important; }
.alert-danger  { background-color: var(--danger-soft) !important;  border-color: rgba(248,113,113,.3) !important; color: #FCA5A5 !important; }

.btn-outline-secondary { color: var(--text-2); border-color: var(--border-strong); }
.btn-outline-secondary:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.btn-secondary { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }

/* ---- Logo ---- */
.smarteer-logo-light { display: none  !important; }
.smarteer-logo-dark  { display: block !important; }