/* ============================================================================
   Bessie — override di brand su Bootstrap 5.3 / AdminLTE 4.
   Nessun design system custom: solo colore Redis, theming Grid.js, helper KPI.
   ========================================================================== */

:root {
  --bs-primary: #1d5588;
  --bs-primary-rgb: 29, 85, 136;
  --bs-link-color-rgb: 29, 85, 136;
  --bs-link-hover-color-rgb: 18, 57, 86;
  --brand: #1d5588;
  --brand-dark: #17456d;
  /* Colori istituzionali per le barre (header + sidebar) */
  --brand-bar: #154275;
  --brand-bar-sidebar: #123a63;
  --bar-bg: #e9ecef; /* grigio-chiaro topbar + fascia logo (fisso in entrambi i temi) */
  /* Serie grafici (light) */
  --series-optimized: #2461c8;
  --series-benchmark: #d9673f;
  --series-trades: #2f6fd0;
  --series-battery: #2f9e6f;
  --chart-grid: #e6ecf4;
  --chart-tick: #667891;
}
[data-bs-theme="dark"] {
  --series-optimized: #4f8ad6;
  --series-benchmark: #d67148;
  --series-trades: #5b95dd;
  --series-battery: #38a075;
  --chart-grid: rgba(255, 255, 255, .10);
  --chart-tick: #9fb0c4;
}

.btn-primary {
  --bs-btn-bg: #1d5588; --bs-btn-border-color: #1d5588;
  --bs-btn-hover-bg: #17456d; --bs-btn-hover-border-color: #17456d;
  --bs-btn-active-bg: #123956; --bs-btn-active-border-color: #123956;
  --bs-btn-disabled-bg: #1d5588; --bs-btn-disabled-border-color: #1d5588;
}
.btn-outline-primary {
  --bs-btn-color: #1d5588; --bs-btn-border-color: #1d5588;
  --bs-btn-hover-bg: #1d5588; --bs-btn-hover-border-color: #1d5588;
  --bs-btn-active-bg: #17456d; --bs-btn-active-border-color: #17456d;
}
.text-bg-primary { background-color: #1d5588 !important; }
.bg-primary { background-color: #1d5588 !important; }
.text-primary { color: #1d5588 !important; }

/* Colore istituzionale sulla sidebar; header bianco-grigino con bordo di stacco */
.app-sidebar { background-color: var(--brand-bar-sidebar) !important; }
/* Topbar bianco-grigina fissa (uguale in tema chiaro e scuro; data-bs-theme=light nel markup) */
.app-header.navbar { background-color: var(--bar-bg) !important; height: 3.5rem; border-bottom: 1px solid var(--bs-border-color); }

/* Area brand: fascia chiara integrata con la topbar, logo a colori originali e più grande */
.sidebar-brand { background: var(--bar-bg); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.app-sidebar .brand-link { display: inline-flex; align-items: center; }
.app-sidebar .brand-image { height: 34px; width: auto; }
.app-sidebar .brand-text { font-size: 1rem; }
.sidebar-menu .nav-link.active { background-color: rgba(255, 255, 255, .12); }
.nav-icon svg { width: 20px; height: 20px; }
.nav-header { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; opacity: .7; }

/* Header: icone e chip utente */
.app-header .nav-link svg { width: 20px; height: 20px; }
.user-menu .avatar {
  width: 30px; height: 30px; border-radius: .375rem;
  display: inline-grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 650; font-size: .85rem;
}
.lang-switch__flag {
  width: 17px; height: 12px; border-radius: 1px; margin-right: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); vertical-align: -1px;
}

/* KPI / stat */
.kpi-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.kpi-value { font-size: 1.85rem; font-weight: 620; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-value .unit { font-size: .82rem; color: var(--bs-secondary-color); font-weight: 600; margin-left: 3px; }
.kpi-foot { font-size: .78rem; color: var(--bs-secondary-color); }
.kpi-icon { width: 16px; height: 16px; color: var(--bs-secondary-color); }

/* Header card: AdminLTE mette float:left sul titolo, così il sottotitolo <small>
   gli si incolla accanto sulla stessa riga. Lo rendo block: sottotitolo a capo. */
.card-header .card-title { float: none; display: block; }
.card-header .card-title + small { display: block; margin-top: .15rem; }

/* Grafici */
.chart-box { position: relative; height: 300px; }
.chart-box--tall { height: 420px; }
.chart-box canvas { max-width: 100%; }

/* Grid.js: aggancio ai colori Bootstrap (light + dark) */
/* Responsive: il container Grid.js di default è inline-block e sfora su mobile;
   lo forzo a block+100% così la tabella scrolla DENTRO la card (come .table-responsive). */
.gridjs-container { color: var(--bs-body-color); display: block !important; width: 100%; max-width: 100%; }
.gridjs-wrapper { overflow-x: auto; border-color: var(--bs-border-color) !important; box-shadow: none !important; }
/* La tabella si dimensiona al CONTENUTO (non a tutta la larghezza): con poche
   colonne resta compatta invece di stirarsi (pagine admin). Le celle sono nowrap,
   quindi se il contenuto supera il contenitore il wrapper scrolla in orizzontale
   su mobile (niente wrap carattere-a-carattere). */
.gridjs-table { table-layout: auto !important; width: max-content !important; min-width: 0; max-width: 100%; }
.gridjs-th, .gridjs-td {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
  white-space: nowrap !important;
}
.gridjs-th { background-color: var(--bs-tertiary-bg) !important; }
/* intestazioni non troncate: la colonna si allarga al nome completo */
.gridjs-th-content { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; width: auto !important; }
.gridjs-th-sort:hover, .gridjs-th-sort:focus { background-color: var(--bs-secondary-bg) !important; }
.gridjs-search-input, .gridjs-pagination .gridjs-pages button {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.gridjs-pagination { color: var(--bs-secondary-color); }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background-color: var(--brand) !important; color: #fff !important;
}
.gridjs-footer, .gridjs-head { background: transparent !important; border-color: var(--bs-border-color) !important; box-shadow: none !important; }

/* flatpickr in dark mode */
[data-bs-theme="dark"] .flatpickr-calendar { background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: var(--bs-box-shadow); }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] span.flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-day { color: var(--bs-body-color); fill: var(--bs-body-color); }
[data-bs-theme="dark"] .flatpickr-day.selected { background: var(--brand); border-color: var(--brand); }
[data-bs-theme="dark"] .flatpickr-day:hover { background: var(--bs-tertiary-bg); }

/* Logo pagina di login (scuro su sfondo chiaro; schiarito in dark) */
.auth-logo { max-width: 100%; height: auto; }
[data-bs-theme="dark"] .auth-logo { filter: brightness(0) invert(0.96); }

/* Celle numeriche allineate */
.num { font-variant-numeric: tabular-nums; }

/* Utilità minori */
.spec-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.chart-hint svg { width: 15px; height: 15px; vertical-align: -2px; }
.cursor-help { cursor: help; }