/* =========================================================================
   Admin premium theme — porta lo stile SaaS del frontend-partner sull'admin.
   Caricato PER ULTIMO: raffina token, chrome (sidebar/topbar) e componenti
   Bootstrap senza toccare il markup. Recolor premium, light + dark.
   ========================================================================= */

/* ----------------------------- TOKEN (light) ----------------------------- */

:root, [data-bs-theme="light"] {
  --ap-primary: #8e09f9;
  --ap-primary-700: #6406b0;
  --ap-primary-soft: rgba(142, 9, 249, .10);
  --ap-primary-softer: rgba(142, 9, 249, .05);
  --ap-bg: #f6f5f9;
  --ap-surface: #ffffff;
  --ap-surface-2: #faf9fc;
  --ap-border: #ece8f2;
  --ap-text: #1c1626;
  --ap-text-muted: #6c6678;
  --ap-text-faint: #9a93a8;
  --ap-shadow-sm: 0 1px 2px rgba(28, 22, 38, .04), 0 1px 3px rgba(28, 22, 38, .06);
  --ap-shadow-md: 0 4px 14px rgba(28, 22, 38, .06), 0 2px 4px rgba(28, 22, 38, .04);
  --ap-shadow-lg: 0 18px 40px rgba(76, 35, 120, .14);
  --ap-radius: 16px;
  --ap-radius-sm: 11px;
  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-border-color: var(--ap-border);
  --bs-border-color-translucent: var(--ap-border);
  --bs-body-bg: var(--ap-bg);
  --bs-secondary-bg: var(--ap-surface-2);
  --bs-tertiary-bg: var(--ap-surface-2);
  --bs-secondary-color: var(--ap-text-muted);
  --bs-tertiary-color: var(--ap-text-faint);
  --bs-emphasis-color: var(--ap-text);
}

/* ------------------------------ TOKEN (dark) ----------------------------- */

[data-bs-theme="dark"] {
  --ap-primary: #a23bff;
  --ap-primary-700: #9a2bff;
  --ap-primary-soft: rgba(162, 59, 255, .16);
  --ap-primary-softer: rgba(162, 59, 255, .08);
  --ap-bg: #131019;
  --ap-surface: #1b1726;
  --ap-surface-2: #211c30;
  --ap-border: #2c2740;
  --ap-text: #f2eff8;
  --ap-text-muted: #a59fb5;
  --ap-text-faint: #756e86;
  --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --ap-shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --ap-shadow-lg: 0 20px 44px rgba(0, 0, 0, .5);
  --bs-border-color: var(--ap-border);
  --bs-border-color-translucent: var(--ap-border);
  --bs-body-bg: var(--ap-bg);
  --bs-body-color: var(--ap-text);
  --bs-secondary-bg: var(--ap-surface-2);
  --bs-tertiary-bg: var(--ap-surface-2);
  --bs-secondary-color: var(--ap-text-muted);
  --bs-tertiary-color: var(--ap-text-faint);
  --bs-emphasis-color: var(--ap-text);
  --bs-primary: #a23bff;
  --bs-primary-rgb: 162, 59, 255;
}

/* ------------------------------- BASE ------------------------------------ */

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--ap-bg);
  color: var(--ap-text);
}

#content-wrapper {
  background-color: var(--ap-bg) !important;
}

/* ------------------------------ SIDEBAR ---------------------------------- */

.sidebar {
  background-color: var(--ap-surface) !important;
  border-right: 1px solid var(--ap-border);
  box-shadow: none !important;
}

.sidebar .sidebar-brand, .sidebar .sidebar-brand-text span, .sidebar .navbar-nav.text-light .nav-link, .sidebar .nav-item .nav-link {
  color: var(--ap-text) !important;
}

.sidebar .sidebar-heading, .sidebar .sidebar-heading p {
  color: var(--ap-text-faint) !important;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.sidebar-divider {
  border-color: var(--ap-border) !important;
  opacity: 1;
}

/* Nav items → pillola partner a TUTTA LARGHEZZA.
   Il gutter è dato dal padding orizzontale dell'<ul>; i link riempiono (width:100%,
   margin 0) come nel partner. align-items:stretch + width:100% blindano contro lo
   shrink-to-fit del flex della navbar. display:block per non rompere i chevron. */

.sidebar .navbar-nav {
  width: 100% !important;
  align-items: stretch !important;
  padding: 6px 10px !important;
}

.sidebar .nav-item {
  width: 100% !important;
}

.sidebar .nav-item .nav-link {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: var(--ap-text-muted) !important;
  margin: 2px 0 !important;
  padding: .6rem .75rem !important;
  border-radius: var(--ap-radius-sm);
  font-weight: 500;
  font-size: .9rem;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}

.sidebar .sidebar-heading, .sidebar .sidebar-heading p {
  padding-left: .55rem !important;
}

.sidebar .nav-item .nav-link i, .sidebar .nav-item .nav-link svg {
  color: inherit !important;
  width: 1.05rem;
}

.sidebar .nav-item .nav-link:hover {
  background-color: var(--ap-surface-2);
  color: var(--ap-text) !important;
}

.sidebar .nav-item .nav-link.active {
  background-color: var(--ap-primary-soft);
  color: var(--ap-primary) !important;
  font-weight: 600;
}

.sidebar .nav-item .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ap-primary);
}

/* Sottomenu accordion (Developers/Utilities/Admin) — restyle premium */

.sidebar .collapse-inner, .sidebar .collapsing .collapse-inner {
  background-color: var(--ap-surface-2) !important;
  border-radius: var(--ap-radius-sm) !important;
  margin: 0 0 8px !important;
}

.sidebar .collapse-item {
  color: var(--ap-text-muted) !important;
  border-radius: 8px !important;
  font-size: .85rem;
}

.sidebar .collapse-item:hover {
  background-color: var(--ap-primary-softer) !important;
  color: var(--ap-text) !important;
}

.sidebar .collapse-item.active {
  color: var(--ap-primary) !important;
  font-weight: 600;
}

/* Account in fondo alla sidebar */

.dropdown-account .nav-link, .dropdown-account span {
  color: var(--ap-text) !important;
}

/* ------------------------------- TOPBAR ---------------------------------- */

.topbar {
  background-color: var(--ap-surface) !important;
  border-bottom: 1px solid var(--ap-border);
  box-shadow: none !important;
}

.topbar .navbar-nav .nav-item .nav-link, .topbar .nav-link, #emailNavbarUp {
  color: var(--ap-text-muted) !important;
}

.topbar .nav-link:hover {
  color: var(--ap-text) !important;
}

.topbar-divider {
  border-color: var(--ap-border) !important;
}

/* ------------------------------- CARDS ----------------------------------- */

.card {
  background-color: var(--ap-surface);
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-sm);
}

.card .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--ap-border);
  font-weight: 700;
  color: var(--ap-text);
}

/* --------------------------- BOTTONI ------------------------------------- */

.btn {
  border-radius: var(--ap-radius-sm);
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-700)) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(142, 9, 249, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(142, 9, 249, .30);
}

/* Stato disabled CHIARO: il gradiente !important del primario mascherava il
   disabled (bottone bloccato uguale ad attivo). Reso grigio/neutro così il
   passaggio bloccato→sbloccato (es. "Importa" dopo l'anteprima) è visibile. */

.btn:disabled, .btn.disabled {
  opacity: .65;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

.btn-primary:disabled, .btn-primary.disabled {
  background: var(--bs-secondary-bg) !important;
  color: var(--ap-text-faint) !important;
  border: 1px solid var(--ap-border) !important;
}

.btn-outline-primary {
  border-color: var(--ap-border);
  color: var(--ap-primary);
}

.btn-outline-primary:hover {
  background-color: var(--ap-primary-soft);
  border-color: var(--ap-primary-soft);
  color: var(--ap-primary);
}

.btn-light, .btn-secondary {
  background-color: var(--ap-surface);
  border: 1px solid var(--ap-border);
  color: var(--ap-text);
}

.btn-light:hover, .btn-secondary:hover {
  background-color: var(--ap-surface-2);
  border-color: var(--ap-primary-soft);
  color: var(--ap-text);
}

/* ---------------------------- FORM / INPUT ------------------------------- */

.form-control, .form-select {
  background-color: var(--ap-surface-2);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  color: var(--ap-text);
}

.form-control:focus, .form-select:focus {
  background-color: var(--ap-surface-2);
  border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px var(--ap-primary-soft);
  color: var(--ap-text);
}

.form-check-input:checked {
  background-color: var(--ap-primary);
  border-color: var(--ap-primary);
}

.form-check-input:focus {
  border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px var(--ap-primary-soft);
}

/* ------------------------------- TABELLE --------------------------------- */

.table {
  --bs-table-bg: transparent;
  color: var(--ap-text);
}

.table > thead th, .table > thead td {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .03em;
  font-weight: 700;
  color: var(--ap-text-faint);
  border-bottom: 1px solid var(--ap-border);
}

.table > tbody > tr {
  border-color: var(--ap-border);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--ap-surface-2);
}

/* -------------------------------- MODALI --------------------------------- */

.modal-content {
  background-color: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: 18px;
  box-shadow: var(--ap-shadow-lg);
}

.modal-header, .modal-footer {
  border-color: var(--ap-border);
}

/* ------------------------------ DROPDOWN --------------------------------- */

.dropdown-menu {
  background-color: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  box-shadow: var(--ap-shadow-md);
  padding: 6px;
}

.dropdown-item {
  border-radius: 8px;
  color: var(--ap-text);
  font-size: .9rem;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--ap-surface-2);
  color: var(--ap-text);
}

.dropdown-divider {
  border-color: var(--ap-border);
}

/* --------------------------- NAV PILLS (tab) ----------------------------- */

.nav-pills .nav-link {
  color: var(--ap-text-muted);
  border-radius: var(--ap-radius-sm);
}

.nav-pills .nav-link.active {
  background-color: var(--ap-primary);
  color: #fff;
}

/* ----------------------------- BADGE / PILL ------------------------------ */

.badge.bg-primary, .badge.text-bg-primary {
  background: var(--ap-primary) !important;
}

/* ----------------------------- SCROLLBAR --------------------------------- */

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  background: var(--ap-border);
  border-radius: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------- KPI dashboard: usa i token (dark-safe) ------------ */

.dash-kpi-ico.k-conv {
  background: rgba(45, 156, 219, .12);
  color: #2d9cdb;
}

[data-bs-theme="dark"] .dash-kpi-ico.k-conv {
  background: rgba(86, 182, 236, .16);
  color: #56b6ec;
}

/* =========================================================================
   FIX post-review: battere le regole !important pre-esistenti di custom.css
   e garantire leggibilità in dark (specificity/!important deliberati).
   ========================================================================= */

/* (HIGH) Pagine auth/pubbliche su .bg-gradient-primary: gradient on-brand +
   card sempre leggibile anche se il toggle tema le mette in dark. */

.bg-gradient-primary {
  background: linear-gradient(135deg, #8e09f9, #6406b0) !important;
}

body.bg-gradient-primary .card, body.bg-gradient-primary .card .card-body {
  background-color: #ffffff !important;
  color: #1c1626 !important;
}

body.bg-gradient-primary .card .text-dark, body.bg-gradient-primary .card h1, body.bg-gradient-primary .card h2, body.bg-gradient-primary .card h3, body.bg-gradient-primary .card h4 {
  color: #1c1626 !important;
}

/* (HIGH) Etichette/stato dashboard leggibili in dark */

[data-bs-theme="dark"] .dash-chip.voce {
  background: rgba(240, 183, 90, .16);
  color: #f0b75a;
}

[data-bs-theme="dark"] .dash-warn-3 {
  color: #ff6b81;
}

[data-bs-theme="dark"] .dash-warn-4 {
  color: #9aa3b2;
}

/* (MEDIUM) Focus ring premium sugli input — batte custom.css !important */

.form-control:focus, .form-select:focus, textarea:focus {
  border-color: var(--ap-primary) !important;
  box-shadow: 0 0 0 3px var(--ap-primary-soft) !important;
}

[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] textarea:focus {
  border-color: var(--ap-primary) !important;
  box-shadow: 0 0 0 3px var(--ap-primary-soft) !important;
}

/* (MEDIUM) Superficie input flat anche in dark — batte i gradient di custom.css */

[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea {
  background: var(--ap-surface-2) !important;
  border-color: var(--ap-border) !important;
  color: var(--ap-text) !important;
}

/* (MEDIUM) Hover sottomenu accordion — match della profondità di custom.css */

[data-bs-theme="light"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, [data-bs-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover {
  background-color: var(--ap-primary-softer) !important;
  color: var(--ap-text) !important;
}

/* =========================================================================
   Piede sidebar: toggle tema come icon-button centrato verticalmente
   sull'account. Il contenitore-piede (absolute bottom:0) ha altezza = solo
   l'account (hr nascosto, wrapper toggle collassato), quindi top:50% +
   translateY(-50%) centra il toggle SULL'account a prescindere dall'altezza.
   Solo CSS, nessuna modifica al markup.
   ========================================================================= */

.sidebar div:has( > .text-center.mb-3 > #themeSwitcherNavbar) {
  left: 0;
  right: 0;
  box-shadow: 0 -1px 0 var(--ap-border);
}

/* hr del piede nascosto (sostituito dalla box-shadow sopra) */

.sidebar div:has( > .text-center.mb-3 > #themeSwitcherNavbar) .sidebar-divider {
  display: none !important;
}

/* Il wrapper centrato del toggle non occupa spazio (toggle in absolute) */

.sidebar .text-center.mb-3:has( > #themeSwitcherNavbar) {
  margin: 0 !important;
  height: 0;
}

/* Toggle = icon-button, centrato verticalmente sull'account, a destra */

.sidebar #themeSwitcherNavbar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  z-index: 3;
  margin: 0 !important;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  background: var(--ap-surface);
  color: var(--ap-text-muted) !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sidebar #themeSwitcherNavbar:hover {
  background: var(--ap-surface-2);
  color: var(--ap-text) !important;
  border-color: var(--ap-primary-soft);
}

.sidebar #themeSwitcherNavbar svg {
  width: 18px;
  height: 18px;
}

/* Account: ripristina il flex (la regola .nav-link display:block per le pillole
   lo colpisce, scentando l'avatar dalle 2 righe di testo) + spazio per il toggle */

.sidebar .dropdown-account .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding-right: 52px;
}