/*
 * HRCC — hrcc-components.css
 * Libreria componenti condivisa (Fase 2b, 23/09/2026): un solo sistema di bottoni,
 * un solo sistema di modale, un solo sistema di badge — basati sulle variabili
 * --hrcc-* di theme.css (va sempre incluso PRIMA di questo file).
 *
 * Applicato in questo giro a: templates/dashboard.html, templates/contracts_search.html
 * (bottoni), e alla topbar condivisa (templates/partials/_topbar.html) usata da
 * dashboard.html, templates/it/it_base.html, templates/mnt/mnt_base.html,
 * templates/mnt/tl/mnt_tl_base.html.
 *
 * NON ancora applicato a: i bottoni/badge del contenuto di Monitoring/IT.Full
 * (restano su .mnt-btn/.mnt-badge di mnt.css) e a Front Office (resta com'è,
 * l'header operatore ha una logica sua diversa da una topbar di navigazione,
 * come previsto da PIANO_RESTYLING.md) — migrazione modulo per modulo in Fase 3.
 */

/* ---- Bottoni: 5 varianti ---- */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: var(--hrcc-radius-sm);
  padding: 10px 16px;
  font-family: var(--hrcc-font-body);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--hrcc-transition);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled,
.btn.btn-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--hrcc-color-primary), var(--hrcc-color-primary-2));
  color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--hrcc-color-primary-2) 35%, transparent);
}

.btn-secondary {
  background: var(--hrcc-color-surface);
  color: var(--hrcc-color-text);
  border: 1px solid var(--hrcc-color-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--hrcc-color-surface-2); }

.btn-danger {
  background: color-mix(in srgb, var(--hrcc-color-danger) 16%, transparent);
  color: var(--hrcc-color-danger);
  border: 1px solid color-mix(in srgb, var(--hrcc-color-danger) 30%, transparent);
}
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--hrcc-color-danger) 26%, transparent); }

.btn-ghost {
  background: transparent;
  color: var(--hrcc-color-muted);
  border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) { color: var(--hrcc-color-text); background: var(--hrcc-color-surface); }

/* Varianti aggiuntive (oltre alle 5 di base), usate ad es. in contracts_search.html
   per azioni "positive"/"attenzione" meno critiche di primario/pericolo */
.btn-success {
  background: color-mix(in srgb, var(--hrcc-color-success) 16%, transparent);
  color: var(--hrcc-color-success);
  border: 1px solid color-mix(in srgb, var(--hrcc-color-success) 30%, transparent);
}
.btn-success:hover:not(:disabled) { background: color-mix(in srgb, var(--hrcc-color-success) 26%, transparent); }

.btn-warning {
  background: color-mix(in srgb, var(--hrcc-color-warning) 16%, transparent);
  color: var(--hrcc-color-warning);
  border: 1px solid color-mix(in srgb, var(--hrcc-color-warning) 30%, transparent);
}
.btn-warning:hover:not(:disabled) { background: color-mix(in srgb, var(--hrcc-color-warning) 26%, transparent); }

.btn-sm { padding: 5px 10px; font-size: .8rem; border-radius: calc(var(--hrcc-radius-sm) - 4px); gap: 5px; }
.btn-icon { padding: 6px 9px; }

/* ---- Page shell + pannello "vetro": PILOTA (23/09/2026), fase 3 ----
   Sostituisce, sulle pagine in cui viene applicata, la coppia .page-shell/
   .glass-panel che oggi e' duplicata (con colori fissi, non a variabile) in
   una quarantina di template HR. Applicata per ora SOLO su contracts_search.html,
   materiali.html e logins_pool.html (Daniele, 23/09/2026) per verificare la
   regola prima di estenderla a tutte le pagine. */
.page-shell {
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at top left,  color-mix(in srgb, var(--hrcc-color-primary) 18%, transparent), transparent 36%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--hrcc-color-primary-2) 20%, transparent), transparent 38%),
    var(--hrcc-color-bg);
  background-attachment: fixed;
  color: var(--hrcc-color-text);
}

.glass-panel {
  background: var(--hrcc-color-surface-2);
  border: 1px solid var(--hrcc-color-border);
  border-radius: var(--hrcc-radius-sm);
  box-shadow: var(--hrcc-shadow);
  padding: 20px;
  margin-bottom: 18px;
}

/* ---- Badge: stato/etichetta ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.5;
}
.badge-success { background: color-mix(in srgb, var(--hrcc-color-success) 18%, transparent); color: var(--hrcc-color-success); }
.badge-danger  { background: color-mix(in srgb, var(--hrcc-color-danger) 18%, transparent);  color: var(--hrcc-color-danger); }
.badge-warning { background: color-mix(in srgb, var(--hrcc-color-warning) 18%, transparent); color: var(--hrcc-color-warning); }
.badge-info    { background: color-mix(in srgb, var(--hrcc-color-primary) 18%, transparent); color: var(--hrcc-color-primary); }
.badge-neutral { background: color-mix(in srgb, var(--hrcc-color-muted) 20%, transparent);   color: var(--hrcc-color-muted); }

/* ---- Modale ---- */
/* Stesso comportamento di apertura di .mnt-modal-backdrop.open (classe "open" su backdrop) */

.hrcc-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
.hrcc-modal-backdrop.open { display: flex; }

.hrcc-modal {
  background: var(--hrcc-color-surface);
  border: 1px solid var(--hrcc-color-border);
  border-radius: var(--hrcc-radius-sm);
  width: 100%;
  max-width: 520px;
  padding: 24px;
  position: relative;
  animation: hrcc-modal-in .15s ease;
  box-shadow: var(--hrcc-shadow);
}

@keyframes hrcc-modal-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.hrcc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.hrcc-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hrcc-color-text);
  margin: 0;
}
.hrcc-modal-close {
  background: none;
  border: none;
  color: var(--hrcc-color-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.hrcc-modal-close:hover { color: var(--hrcc-color-text); }

.hrcc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ---- Estensione Monitoring/IT.Full (Fase 2b, 23/09/2026) ----
   Le classi mnt-btn-*, badge- e mnt-badge- restano quelle di sempre (mnt.css,
   nessun template toccato: solo il colore sorgente cambia, per essere
   coerente col resto dell'app). Il raggio/le spaziature di mnt.css NON sono
   toccati: quella convergenza resta subordinata alla conferma esplicita di
   Daniele su HR (vedi PIANO_RESTYLING.md), qui tocchiamo solo i colori. */

.mnt-btn-primary {
  background: var(--hrcc-color-primary);
  color: #fff;
  border-color: var(--hrcc-color-primary);
}
.mnt-btn-secondary {
  background: var(--hrcc-color-surface);
  color: var(--hrcc-color-text);
  border-color: var(--hrcc-color-border);
}
.mnt-btn-danger {
  color: var(--hrcc-color-danger);
  border-color: var(--hrcc-color-danger);
}
.mnt-btn-warning {
  color: var(--hrcc-color-warning);
  border-color: var(--hrcc-color-warning);
}

.badge-ok, .mnt-badge-ok, .mnt-badge-success {
  background: color-mix(in srgb, var(--hrcc-color-success) 20%, transparent);
  color: var(--hrcc-color-success);
}
.badge-warn, .mnt-badge-warn, .mnt-badge-warning {
  background: color-mix(in srgb, var(--hrcc-color-warning) 20%, transparent);
  color: var(--hrcc-color-warning);
}
.badge-danger, .mnt-badge-danger {
  background: color-mix(in srgb, var(--hrcc-color-danger) 20%, transparent);
  color: var(--hrcc-color-danger);
}
.badge-info, .mnt-badge-info {
  background: color-mix(in srgb, var(--hrcc-color-primary) 20%, transparent);
  color: var(--hrcc-color-primary);
}
.badge-neutral, .mnt-badge-neutral {
  background: color-mix(in srgb, var(--hrcc-color-muted) 16%, transparent);
  color: var(--hrcc-color-muted);
}
/* .badge-prep non ha un token dedicato in theme.css: lasciata com'era in mnt.css */

/* ---- Estensione Front Office (Fase 2b, 23/09/2026) ----
   Stesso principio: solo il colore sorgente dei .fo-btn-* cambia. Stile
   (pieno, non tenue) invariato apposta — è una console operativa ad alta
   densità, non l'elenco tabellare di Gestione Contratti, la scelta stilistica
   "tenue" fatta lì non è stata chiesta qui. Struttura/logica della console
   (pausa, sessione, notifiche) non toccate in nessun modo. */

.fo-btn-primary   { background: var(--hrcc-color-primary); color: var(--fo-on-primary, #fff); }
.fo-btn-success   { background: var(--hrcc-color-success); color: var(--fo-on-success, #fff); }
.fo-btn-warning   { background: var(--hrcc-color-warning); color: var(--fo-on-warning, #000); }
.fo-btn-danger    { background: var(--hrcc-color-danger);  color: var(--fo-on-danger, #fff); }
.fo-btn-secondary { background: var(--hrcc-color-surface); color: var(--hrcc-color-text); border: 1px solid var(--hrcc-color-border); }

/* ---- Topbar condivisa (templates/partials/_topbar.html) ---- */

.hrcc-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--hrcc-color-surface);
  border-bottom: 1px solid var(--hrcc-color-border);
  flex-wrap: wrap;
}
.hrcc-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.hrcc-topbar-logo { width: 34px; height: 34px; border-radius: 9px; }
.hrcc-topbar-name { font-weight: 800; font-size: 15px; color: var(--hrcc-color-text); }
.hrcc-topbar-sub  { font-size: 12px; color: var(--hrcc-color-muted); }
.hrcc-topbar-sep  { flex: 1; }
.hrcc-topbar-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  font-size: 13px;
}
.hrcc-topbar-user strong { color: var(--hrcc-color-text); }
.hrcc-topbar-user span   { color: var(--hrcc-color-muted); font-size: 11.5px; }

/* IT.Full, Monitoring Admin e Monitoring TL usano ancora il layout a sidebar
   fissa di mnt.css (vedi .mnt-layout/.mnt-sidebar), che si aspetta una topbar
   fissa in cima con altezza nota (--mnt-topbar-h). Qui ripristiniamo quel
   comportamento solo per quei moduli: senza, la topbar (ora 'in flusso') e la
   sidebar fissa (ancorata a --mnt-topbar-h) finiscono per sovrapporsi. */
.mnt-body .hrcc-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--mnt-topbar-h);
  box-sizing: border-box;
  flex-wrap: nowrap;
}
/* Il vecchio "overflow: hidden" qui sopra tagliava anche il pannello a comparsa
   "Aspetto" (.hrcc-aspect-panel), che e' un figlio della topbar posizionato
   subito sotto di essa (bug segnalato da Daniele, 23/09/2026: il pannello
   appariva "dietro" il contenuto della pagina invece che sopra, perche' veniva
   di fatto tagliato via). La vera esigenza (evitare che nome/ruolo utente troppo
   lunghi facciano crescere la topbar oltre --mnt-topbar-h, sovrapponendola alla
   sidebar fissa sotto) resta coperta in modo mirato solo qui, troncando il testo
   invece di tagliare l'intero contenitore. */
.mnt-body .hrcc-topbar-name,
.mnt-body .hrcc-topbar-sub,
.mnt-body .hrcc-topbar-user strong,
.mnt-body .hrcc-topbar-user span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ---- Selettore "🎨 Aspetto" (Fase 2c, 23/09/2026) ----
   Menu a comparsa nella topbar condivisa: palette, dimensione testo, font.
   Scrive/legge i 3 cookie hrcc_palette / hrcc_font_scale / hrcc_font_family
   già previsti da theme.css/theme.js (Fase 2a). Solo preferenza di
   visualizzazione lato client, nessun dato personale, nessun tracciamento. */
.hrcc-aspect { position: relative; }

.hrcc-aspect-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--hrcc-color-surface-2);
  border: 1px solid var(--hrcc-color-border);
  border-radius: var(--hrcc-radius-sm);
  box-shadow: var(--hrcc-shadow);
  padding: 16px;
  z-index: 200;
  color: var(--hrcc-color-text);
}
.hrcc-aspect-panel[hidden] { display: none; }

.hrcc-aspect-group { margin-bottom: 14px; }
.hrcc-aspect-group:last-of-type { margin-bottom: 10px; }
.hrcc-aspect-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--hrcc-color-muted);
  margin-bottom: 8px;
}

.hrcc-aspect-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hrcc-aspect-swatch {
  appearance: none;
  cursor: pointer;
  border-radius: var(--hrcc-radius-sm);
  border: 2px solid transparent;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--hrcc-color-text) 4%, transparent);
  transition: var(--hrcc-transition);
}
.hrcc-aspect-swatch:hover { background: color-mix(in srgb, var(--hrcc-color-text) 8%, transparent); }
.hrcc-aspect-swatch[aria-pressed="true"] {
  border-color: var(--hrcc-color-primary);
  background: color-mix(in srgb, var(--hrcc-color-primary) 14%, transparent);
}
.hrcc-aspect-swatch-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
}
.hrcc-aspect-swatch-label { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--hrcc-color-text); }

.hrcc-swatch-scuro-blu             { background: linear-gradient(135deg, #0b1020 50%, #35c2ff 50%); }
.hrcc-swatch-scuro-slate           { background: linear-gradient(135deg, #0d1117 50%, #7c6cf6 50%); }
.hrcc-swatch-chiaro-neutro         { background: linear-gradient(135deg, #f7f8fb 50%, #3562e3 50%); }
.hrcc-swatch-chiaro-alto-contrasto { background: linear-gradient(135deg, #ffffff 50%, #1d4ed8 50%); }
.hrcc-swatch-scuro-petrolio        { background: linear-gradient(135deg, #071e1c 50%, #2dd4bf 50%); }
.hrcc-swatch-chiaro-caldo          { background: linear-gradient(135deg, #faf6f0 50%, #b45309 50%); }

.hrcc-aspect-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.hrcc-aspect-choice {
  appearance: none;
  cursor: pointer;
  border-radius: var(--hrcc-radius-sm);
  border: 1px solid var(--hrcc-color-border);
  background: color-mix(in srgb, var(--hrcc-color-text) 4%, transparent);
  color: var(--hrcc-color-text);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  transition: var(--hrcc-transition);
}
.hrcc-aspect-choice:hover { background: color-mix(in srgb, var(--hrcc-color-text) 8%, transparent); }
.hrcc-aspect-choice[aria-pressed="true"] {
  border-color: var(--hrcc-color-primary);
  background: color-mix(in srgb, var(--hrcc-color-primary) 18%, transparent);
  color: var(--hrcc-color-primary);
}

.hrcc-aspect-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--hrcc-color-muted);
  border-top: 1px solid var(--hrcc-color-border);
  padding-top: 10px;
  margin-top: 4px;
}