@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ========== RESET ========== */
* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

img {
  max-width: 100%;
  display: block
}

button,
input,
select,
textarea {
  font: inherit
}

a {
  text-decoration: none;
  color: inherit
}

/* ========== TOKENS (VARIABILI GLOBALI) ========== */
:root {
  /* Canvas: gradiente leggerissimo blu → crema */
  --spa-canvas: #F4F7FB;
  --spa-canvas-gradient: linear-gradient(135deg, #E8EEF8 0%, #FBF8F3 100%);

  /* Sidebar blu desaturato (come screenshot) */
  --spa-panel: #3D5A73;
  --spa-panel-dark: #2F4A5F;
  --spa-panel-darker: #26404F;
  --spa-panel-shadow: 0 22px 55px rgba(45, 65, 85, .30);

  /* Card: bianco caldo (non grigio) */
  --spa-card: #FFFDFB;

  /* Testi */
  --spa-ink: #1F2937;
  --spa-muted: #6B7280;

  /* Linee / bordi: grigio-blu chiarissimo */
  --spa-line: #E2E8F0;

  /* Ombre soft */
  --spa-shadow: 0 18px 45px rgba(50, 70, 90, .08);

  /* Accenti */
  --spa-salmon: #D9534F;
  --spa-salmon-dark: #C9443F;

  --spa-mint: #4A7BA7;
  --spa-forest: #2F4A5F;

  /* Pulsante Guida: giallo soft */
  --spa-guide: #F8D864;
  --spa-guide-text: #4A4A36;

  /* UI */
  --spa-radius: 18px;
  --spa-pill: 999px;

  /* Blu coerente con sidebar */
  --spa-primary: #4A7BA7;
  --spa-primary-2: #3D6A94;
  --spa-active: #4A7BA7;
  --spa-soft: #F5F8FC;

  /* ========== TITOLI FORZATI ========== */
  --spa-title-page: 30px;
  --spa-title-section: 22px;
}

/* ========== BASE ========== */
body {
  font-family: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--spa-ink);
  background: var(--spa-canvas) !important;
  min-height: 100vh;
  padding: 40px 48px 48px;
}

/* SOLO DASHBOARD: spazio per il menu verticale */
body.layout-dashboard {
  padding: 24px 34px 34px 314px;
}

/* GRADIENTE SFONDO PAGINA FORZATO */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #E8EEF8 0%, #FBF8F3 100%) !important;
  z-index: -2;
}

.muted {
  color: var(--spa-muted);
  font-size: .92rem
}

/* Mobile */
@media (max-width:1024px) {
  body {
    padding: 90px 16px 32px;
    background: var(--spa-canvas) !important;
  }

  body.layout-dashboard {
    padding: 90px 16px 32px;
  }
}

/* ========================================== */
/* ========== SIDEBAR BLU FORZATO ========== */
/* ========================================== */

/* Sidebar principale */
body.layout-dashboard .topbar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  padding: 28px 22px;
  background: linear-gradient(180deg, #3D5A73 0%, #2F4A5F 55%, #26404F 100%) !important;
  border-radius: 0;
  box-shadow: var(--spa-panel-shadow);
  display: flex;
  flex-direction: column;
  gap: 26px;
  z-index: 50;
}

/* Forza sfondo blu per .topbar, sidebar, nav laterale con selettori multipli */
.topbar,
.sidebar,
aside.sidebar,
nav.sidebar,
.menu-laterale,
[class*="sidebar"],
[class*="menu-left"],
[class*="sidenav"] {
  background: linear-gradient(180deg, #3D5A73 0%, #2F4A5F 55%, #26404F 100%) !important;
}

body.layout-dashboard .topbar-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100%;
}

body.layout-dashboard .topbar .brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff !important;
}

body.layout-dashboard .topbar .salone-name {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .9rem;
  opacity: .95;
  color: #fff !important;
}

/* Menu links - TESTO BIANCO/GRIGIO CHIARO FORZATO */
body.layout-dashboard .topbar nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.layout-dashboard .topbar nav a {
  background: transparent !important;
  color: rgba(255, 255, 255, .88) !important;
  border-radius: var(--spa-pill);
  padding: 10px 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}

body.layout-dashboard .topbar nav a .icon {
  width: 18px;
  opacity: .95;
}

/* Stato attivo - leggermente più chiaro */
body.layout-dashboard .topbar nav a.is-current,
body.layout-dashboard .topbar nav a:hover,
body.layout-dashboard .topbar nav a.active {
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .25) !important;
  box-shadow: 0 10px 24px rgba(74, 123, 167, .35);
}

/* Forza colori su qualsiasi link nella sidebar */
.topbar a,
.sidebar a,
aside.sidebar a,
nav.sidebar a,
[class*="sidebar"] a,
[class*="menu-left"] a,
[class*="sidenav"] a {
  color: rgba(255, 255, 255, .9) !important;
}

/* CTA Nuovo appuntamento / Nuovo incasso */
body.layout-dashboard .topbar .nav-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.layout-dashboard .topbar .nav-cta .btn-cta {
  width: 100%;
  justify-content: center;
  color: #fff !important;
  border-radius: 12px;
  display: block;
  padding: 12px 16px;
  font-weight: 700;
  border: 0;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

body.layout-dashboard .topbar .nav-cta .btn-cta:first-child {
  background: linear-gradient(180deg, #4A7BA7 0%, #3D6A94 100%) !important;
}

body.layout-dashboard .topbar .nav-cta .btn-cta:last-child {
  background: linear-gradient(180deg, #D9534F 0%, #C9443F 100%) !important;
}

/* Sidebar su mobile */
@media (max-width:1024px) {
  body.layout-dashboard .topbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 14px 14px;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 10px 26px rgba(45, 65, 85, .25);
    background: linear-gradient(90deg, #3D5A73 0%, #2F4A5F 100%) !important;
  }

  body.layout-dashboard .topbar-inner {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  body.layout-dashboard .topbar nav {
    flex-direction: row;
    flex: 1;
    justify-content: center;
    gap: 8px;
  }

  body.layout-dashboard .topbar nav a {
    padding: 9px 12px;
    border-radius: 12px;
  }

  body.layout-dashboard .topbar .nav-cta {
    margin-top: 0;
    flex-direction: row;
    gap: 10px;
  }

  body.layout-dashboard .topbar .nav-cta .btn-cta {
    width: auto;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: none;
  }
}

/* ========== LAYOUT CONTENUTO GENERICO ========== */
.page-wrap {
  max-width: 1200px;
  margin: 0 auto 90px;
  padding: 0 24px;
}

/* ========== HEADER DASHBOARD ========== */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}

.main-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, #4A7BA7, #3D6A94) !important;
  display: grid;
  place-items: center;
  color: #fff !important;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 14px 28px rgba(74, 123, 167, .18);
}

.brand-text {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.brand-text .pro {
  color: var(--spa-muted);
  font-weight: 600;
  text-transform: none;
}

.main-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Pulsante Guida - giallo soft FORZATO */
.btn-guide {
  background: #F8D864 !important;
  color: #4A4A36 !important;
  border: none !important;
}

.hello-and-logout {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hello-block {
  text-align: right;
}

.hello-text {
  display: block;
  font-size: .9rem;
  color: var(--spa-muted);
}

.hello-name {
  display: block;
  font-weight: 700;
}

@media (max-width:1024px) {
  .main-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 12px;
  }

  .main-header-right {
    align-items: flex-start;
  }

  .hello-and-logout {
    justify-content: flex-start;
  }
}

/* ============================================= */
/* ========== CARD BIANCO CALDO FORZATO ======= */
/* ============================================= */

.card {
  background: #FFFDFB !important;
  border-radius: 14px;
  padding: 22px 22px;
  box-shadow: 0 18px 45px rgba(50, 70, 90, .08) !important;
  border: 1px solid #E2E8F0 !important;
}

/* Forza sfondo bianco caldo su tutte le varianti card */
.card.small,
.card-agenda,
.card-kpi,
[class*="card"]:not(.card-header) {
  background: #FFFDFB !important;
  border: 1px solid #E2E8F0 !important;
}

.card.small {
  padding: 18px 20px
}

.card-manual-messages {
  margin-bottom: 26px;
}

.card-agenda {
  margin-bottom: 18px
}

/* ========== AGENDA DI OGGI ========== */
.next-appointment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 18px;
}

.next-appointment .time {
  font-weight: 800;
  font-size: 1.05rem;
}

.next-appointment .client {
  font-weight: 700;
}

.next-appointment .service {
  color: var(--spa-muted);
  font-size: .95rem;
}

.next-appointment .actions {
  margin-left: auto;
}

.other-appointments {
  border-top: 1px solid var(--spa-line);
  padding-top: 14px;
}

.other-appointments .row {
  font-size: .95rem;
  margin-bottom: 6px;
}

/* ========== KPI ROW ========== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.kpi-label {
  font-size: .95rem;
  color: var(--spa-muted);
}

.kpi-value {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 6px 0 2px;
}

.kpi-note {
  font-size: .9rem;
  color: var(--spa-muted);
}

.sms-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}

.sms-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(74, 123, 167, .12);
  display: grid;
  place-items: center;
  color: #4A7BA7;
}

.meter {
  height: 8px;
  border-radius: 999px;
  background: var(--spa-line);
  overflow: hidden;
  margin-top: 8px;
}

.meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4A7BA7, #6A9BC3) !important;
}

/* ============================================= */
/* ========== PULSANTI FORZATI ================ */
/* ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 800;
  cursor: pointer;
}

/* Primario - blu coerente con sidebar */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary {
  background: linear-gradient(180deg, #4A7BA7 0%, #3D6A94 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(74, 123, 167, .20);
  border: none !important;
}

/* Guida - giallo soft */
.btn-guide,
.btn.btn-guide,
button.btn-guide,
a.btn-guide {
  background: #F8D864 !important;
  color: #4A4A36 !important;
  border: none !important;
}

/* Violet/Danger - rosso soft */
.btn-violet,
.btn.btn-violet,
button.btn-violet,
a.btn-violet,
.btn-danger,
.btn.btn-danger {
  background: linear-gradient(180deg, #D9534F 0%, #C9443F 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(217, 83, 79, .18);
  border: none !important;
}

/* Ghost - grigio chiaro */
.btn-ghost,
.btn.btn-ghost,
button.btn-ghost,
a.btn-ghost {
  background: #f8f9fa !important;
  border: 1px solid #E2E8F0 !important;
  color: #2F4A5F !important;
}

.btn-small {
  padding: 8px 14px;
  font-size: .9rem;
  border-radius: 12px;
}

/* ========== FORM GLOBALI ========== */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.field-group label {
  font-weight: 700;
  color: var(--spa-ink)
}

.field-group input,
.field-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--spa-line);
  background: #fff;
  color: var(--spa-ink);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* ========== LISTA PRODOTTI ========== */
ul.prodotti {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prod-desc span {
  font-size: .95rem
}

.pill-remove {
  background: #fff;
  border: 1px solid var(--spa-line);
  color: var(--spa-ink);
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
}

/* ========== GRID ========== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

body.layout-dashboard .grid {
  margin-top: 22px;
}

/* ============================================= */
/* ========== ALERT FORZATI =================== */
/* ============================================= */

.alert-ok {
  background: rgba(74, 123, 167, .10) !important;
  border: 1px solid rgba(74, 123, 167, .18) !important;
  color: #2F4A5F !important;
  padding: 12px 16px;
  border-radius: 12px;
}

.alert-err {
  background: rgba(217, 83, 79, .10) !important;
  border: 1px solid rgba(217, 83, 79, .18) !important;
  color: #8B3A37 !important;
  padding: 12px 16px;
  border-radius: 12px;
  margin-top: 8px;
}

/* Alert scadenza - rosso soft (NON acceso) */
.alert-expiry {
  background: #FEF5F4 !important;
  border: 1px solid #E8C4C2 !important;
  color: #8B3A37 !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-expiry a {
  color: #8B3A37;
  text-decoration: underline;
  margin-left: auto;
}

/* Forza alert warning simili */
.alert,
.alert-warning,
[class*="alert-warn"] {
  background: #FEF5F4 !important;
  border: 1px solid #E8C4C2 !important;
  color: #8B3A37 !important;
}

/* ========== IMPERSONA BANNER ========== */
.impersona-banner {
  position: fixed;
  left: 314px;
  right: 34px;
  top: 14px;
  z-index: 60;
  background: rgba(217, 83, 79, .12);
  border: 1px solid rgba(217, 83, 79, .22);
  color: #8B3A37;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 800;
}

.btn-exit-imp {
  background: linear-gradient(180deg, #D9534F 0%, #C9443F 100%) !important;
  color: #fff !important;
  border: 0;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 900;
  cursor: pointer;
}

.banner-spacer {
  height: 56px
}

@media (max-width:1024px) {
  .impersona-banner {
    left: 16px;
    right: 16px;
    top: 80px;
  }
}

/* ===== GF MODAL ===== */
body.gf-modal-open {
  overflow: hidden;
}

.gf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.gf-modal {
  width: min(720px, 100%);
  max-height: min(78vh, 680px);
  background: #FFFDFB !important;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gf-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #E2E8F0;
}

.gf-modal-kicker {
  font-size: .85rem;
  color: var(--spa-muted);
  margin-bottom: 2px;
}

.gf-modal-title {
  margin: 0;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.gf-modal-x {
  border: 0;
  background: #F5F8FC;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  line-height: 38px;
}

.gf-modal-body {
  padding: 14px 16px;
  overflow: auto;
}

.gf-guide-block {
  background: #F5F8FC;
  border-radius: 14px;
  padding: 12px 12px;
  margin-bottom: 12px;
}

.gf-guide-block h3 {
  margin: 0 0 6px 0;
  font-size: 1.02rem;
}

.gf-guide-block p {
  margin: 0 0 8px 0;
  color: var(--spa-ink);
}

.gf-guide-block p:last-child {
  margin-bottom: 0;
}

.gf-guide-list {
  margin: 0;
  padding-left: 18px;
}

.gf-guide-last {
  margin-bottom: 0;
}

.gf-modal-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================= */
/* ========== TITOLI FORZATI (AUMENTATI) ====== */
/* ============================================= */

/* Titoli pagina principali - 30px FORZATI */
h1,
.page-title,
.main-title,
[class*="page-title"],
[class*="main-title"] {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

/* Titoli card/sezione - 22-24px FORZATI */
h3,
.card-header,
.card h2,
.card-title,
.section-title,
[class*="card-header"],
[class*="card-title"],
[class*="section-title"] {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  color: #1F2937 !important;
}

h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Titolo Agenda speciale */
.card-agenda-title {
  font-size: 30px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
}

.card-agenda-subtitle {
  margin: 0 0 18px;
  font-weight: 600;
  color: var(--spa-muted);
}

/* ============================================= */
/* ========== OVERRIDE FINALI FORZATI ========= */
/* ============================================= */

/* Sfondo pagina - forza gradiente visibile */
html {
  background: linear-gradient(135deg, #E8EEF8 0%, #FBF8F3 100%) !important;
}

/* Body sfondo fallback */
body {
  background-color: #F4F7FB !important;
}

/* Forza sidebar blu su qualsiasi struttura */
.layout-dashboard .topbar,
.layout-dashboard aside,
.layout-dashboard .sidebar,
.layout-dashboard nav.main-nav,
.layout-dashboard [role="navigation"] {
  background: linear-gradient(180deg, #3D5A73 0%, #2F4A5F 55%, #26404F 100%) !important;
  color: #fff !important;
}

/* Forza testo bianco sulla sidebar */
.layout-dashboard .topbar *,
.layout-dashboard aside *,
.layout-dashboard .sidebar * {
  color: rgba(255, 255, 255, .9);
}

/* Esclusione pulsanti che devono avere colori diversi */
.layout-dashboard .topbar .btn-cta {
  color: #fff !important;
}

/* Forza card bianco caldo su qualsiasi contenitore box */
.box,
.panel,
.widget,
[class*="box"],
[class*="panel"],
[class*="widget"] {
  background: #FFFDFB !important;
  border: 1px solid #E2E8F0 !important;
}

/* ========== FINE STILI GLOBALI ========== */


/* ============================================= */
/* ========== FIX: NO BORDI SUI TITOLI ========= */
/* ============================================= */

/* Rimuove quei bordi sottili “a riquadro” su titoli e sottotitoli */
h1, h2, h3, h4,
.card-agenda-title,
.card-agenda-subtitle,
.card-header,
.page-title, .main-title,
.card-title, .section-title {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  /* se qualche regola li “inscatola” con padding */
  padding: 0 !important;

  /* se qualche regola li rende squadrati */
  border-radius: 0 !important;
}

/* Se il bordo arriva da un “wrapper” specifico dentro le card (caso frequente) */
.card > h1, .card > h2, .card > h3, .card > p {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}