/* ============================================================
   EndlessMed — Portale relay — TEMA "portale"
   Design system EndlessMed + brand Poliambulatorio (palette da
   polispecialisticoviterbo.it) + font Montserrat + pulsanti squadrati.
   ------------------------------------------------------------
   Layer caricato per ULTIMO sopra area.css (AREA RISERVATA: login/dashboard).
   Il SITO PUBBLICO usa Tailwind (assets/tailwind.css), non questo file.
   Spec: _docs/PORTALE_WEB_DESIGN.md
   ============================================================ */

/* ── Font Montserrat (variabile, self-host — GDPR: no Google Fonts CDN) ── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-wght-italic.woff2') format('woff2');
}

:root {
  /* ── Font ── */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ── Palette brand Poliambulatorio ── */
  --c-primary:      #4268c1;   /* blu brand: azione / link / focus */
  --c-primary-2:    #5a7fd6;   /* companion chiaro per gradienti brand */
  --c-accent:       #2fae76;   /* verde: positivo / specializzazione */
  --c-ink:          #1f2124;   /* testo primario / titoli */
  --c-body:         #3a3f47;   /* body */
  --c-soft:         #69727d;   /* testo soft / label / meta */
  --c-line:         #e1e5eb;   /* bordo brand */
  --c-bg:           #f5f7fb;   /* sfondo pagina */
  --c-surface:      #ffffff;
  --c-primary-soft: #eaf0fb;   /* superficie blu tenue */

  --radius:    12px;           /* card */
  --radius-sm: 6px;            /* input */
  --shadow:    0 10px 30px rgba(2,32,71,.07);
  --shadow-sm: 0 2px 8px rgba(2,32,71,.06);

  /* firme brand */
  --c-navy:      #203d5a;
  --c-navy-deep: #16283c;
  --c-success:   #2fae76;
  --c-danger:    #d9534f;
  --c-warn:      #f0a437;
  --c-pink:      #c22076;
  --c-gold:      #f9b744;

  --btn-radius:  3px;          /* pulsanti: radius MINIMO (squadrati) */
}

/* Font Montserrat su tutto (body + controlli) */
body, .btn, button, input, select, textarea, .swal2-popup { font-family: var(--font) !important; }
body { background: var(--c-bg) !important; }

/* Titoli */
h1, h2, h3 { color: var(--c-ink); letter-spacing: -0.01em; font-weight: 700; }
.hero h1, .page-head h1, .auth-card h1 { font-weight: 700; letter-spacing: -0.01em; }

/* ── Pulsanti: SQUADRATI (radius 3px), primario gradiente blu→navy ── */
.btn, .btn--primary, .btn--ghost, .btn--ok, .btn--confirm, .btn--danger, .btn--light, .btn-reserved,
.swal2-styled, .swal-btn { border-radius: var(--btn-radius) !important; }
.btn--primary, .btn-reserved {
  background: linear-gradient(135deg, var(--c-primary), var(--c-navy)) !important;
  color: #fff !important; border-color: transparent !important;
}
.btn--primary:hover, .btn-reserved:hover { filter: brightness(1.06); }
.btn--ghost { background: #fff; border-color: var(--c-line); color: var(--c-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn--ghost:hover { border-color: var(--c-primary); }
.btn--ok, .btn--confirm { background: linear-gradient(135deg, var(--c-success), #229463) !important; color: #fff !important; }
.btn--danger { background: linear-gradient(135deg, var(--c-danger), #c0392b) !important; color: #fff !important; }
.btn--light { background: #f2f5fa !important; border-color: var(--c-line) !important; color: var(--c-ink) !important; }

/* ── Superfici bianche piene (annulla eventuale glass) ── */
.ql-card, .card, .pres-item, .doc-item, .doc-body, .hours, .medico,
.panel, .card2, .paz, .modtile, .convcard, .modal__card, .auth-card, .settings-panel {
  background: var(--c-surface) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}
.ql-card:hover, .modtile:hover, .convcard:hover { border-color: var(--c-primary) !important; box-shadow: var(--shadow) !important; }

/* Header/topbar */
.site-header { background: rgba(255,255,255,.92) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line) !important; }
.topbar { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--c-line) !important; }

/* ── Testata pannello NAVY (firma) ── */
.panel__head, .modal__head {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 100%) !important;
  border-bottom: none !important;
}
.panel__head h2, .modal__head h3 { color: #fff !important; }
.panel__head .tot, .panel__head .tot span { color: rgba(255,255,255,.85) !important; }
.modal__x { color: rgba(255,255,255,.75) !important; }
.modal__x:hover { color: #fff !important; }

/* Brand / avatar / mark */
.brand__mark, .auth-mark, .topbar__brand .mk, .medico__avatar {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)) !important;
}
.medico__avatar { color: var(--c-primary); }

/* ── Input / focus: radius 6px, ring blu brand ── */
.field input, .field select, .field textarea, .search, .ifield__inp,
input[type="text"], input[type="search"], input[type="date"], input[type="password"], input[type="email"], textarea, select,
.swal2-input, .swal2-textarea {
  border-radius: 6px !important; border-color: #c3ccd8 !important;
}
.field input:focus, .field select:focus, .field textarea:focus, .search:focus,
.ifield__inp:focus, input:focus, textarea:focus, select:focus, .swal2-input:focus {
  outline: none !important;
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(66,104,193,.15) !important;
}

/* ── SweetAlert stile EndlessMed: spaziatura pulsanti ── */
.swal2-actions { gap: 14px !important; }

/* ── Nav / pills / stati attivi ── */
.site-nav a.is-active { color: var(--c-primary); background: var(--c-primary-soft); }
.psec__btn--active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.modtile__go { color: var(--c-primary); }

/* ── Badge / tag ── */
.badge--dur, .doc-type--informativa { background: var(--c-primary-soft); color: var(--c-primary); }
.rtag--ok, .badge--price, .doc-type--preparazione, .st--completato { background: rgba(47,174,118,.12); color: #23935f; }
.rtag--warn, .doc-type--comunicato, .st--in_lavorazione { background: rgba(240,164,55,.14); color: #b5730c; }

/* ── Card paziente: gradiente primary→navy ── */
.cardpz { background: linear-gradient(135deg, var(--c-primary), var(--c-navy)) !important; }

/* ── Toast sessione: navy ── */
.sess-toast { background: var(--c-navy) !important; }

/* ── Hero / page-head: wash blu tenue brand ── */
.page-head { background: linear-gradient(135deg, #eaf0fb, #f0f4fb) !important; }
.hero { background: radial-gradient(1200px 400px at 70% -10%, #e2eaf7 0%, transparent 60%) !important; }

/* ── Footer: navy ── */
.site-footer { background: var(--c-navy) !important; }

/* ── Icone Lucide (svg): dimensioni per contesto ── */
.psec__ic { width: 16px; height: 16px; }
.modtile__ic { width: 30px; height: 30px; color: var(--c-primary); }
.soon__ic { width: 46px; height: 46px; color: var(--c-primary); display: inline-block; }
.sess-toast__ic { width: 18px; height: 18px; }
.convcard__logo--ph svg { width: 22px; height: 22px; color: var(--c-soft); }
.ql-card__ic svg { width: 26px; height: 26px; color: var(--c-primary); }
.brand__mark svg, .auth-mark svg, .topbar__brand .mk svg { width: 22px; height: 22px; color: #fff; }