/* Variabili di palette/tipografia condivise da tutte le pagine del portale — valori ripresi dal mockup di design (header gradiente, verde d'accento, card bianche con angoli arrotondati). */
:root {
  --ordinoo-bg: #EDEAF0;
  --ordinoo-ink: #250D35;
  /* Testo secondario del mock: sempre una trasparenza dell'ink primario
     (#250D35), non un grigio a sé — l'alpha varia per contesto (.42-.78) nel
     mock; .62 è il valore più ricorrente per label/hint, usato come default. */
  --ordinoo-ink-soft: rgba(37, 13, 53, .62);
  --ordinoo-accent: #0f8f6b;
  --ordinoo-accent-hover: #0f6f57;
  --ordinoo-header-from: #250D35;
  --ordinoo-header-via: #3A1352;
  --ordinoo-header-to: #0E5E5A;
  --ordinoo-border: #eceef1;
  --ordinoo-danger: #dc2626;
  --ordinoo-danger-bg: rgba(239, 68, 68, .12);
  --ordinoo-radius: 14px;
  /* Riposo di ogni card bianca nel mock — non un'ombra "sollevata": quella
     arriva solo su hover, dove serve (vedi .ordinoo-card:hover sotto). */
  --ordinoo-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --ordinoo-shadow-hover: 0 8px 22px rgba(16, 24, 40, .12);
  --ordinoo-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ordinoo-bg);
  color: var(--ordinoo-ink);
  font-family: var(--ordinoo-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ordinoo-accent);
  text-decoration: none;
}

a:hover {
  color: var(--ordinoo-accent-hover);
}

.ordinoo-card {
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: var(--ordinoo-radius);
  box-shadow: var(--ordinoo-shadow);
}

.ordinoo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font: 600 15px/1 var(--ordinoo-font);
  color: #fff;
  background: var(--ordinoo-accent);
  cursor: pointer;
  transition: background .15s ease;
}

.ordinoo-btn:hover {
  background: var(--ordinoo-accent-hover);
}

.ordinoo-btn:disabled {
  opacity: .6;
  cursor: default;
}

.ordinoo-field label {
  display: block;
  font: 600 13px/1.4 var(--ordinoo-font);
  color: var(--ordinoo-ink-soft);
  margin-bottom: 6px;
}

.ordinoo-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ordinoo-border);
  border-radius: 10px;
  font: 500 15px/1.4 var(--ordinoo-font);
  color: var(--ordinoo-ink);
  background: #fafafb;
}

.ordinoo-field input:focus {
  outline: 2px solid var(--ordinoo-accent);
  outline-offset: 1px;
  background: #fff;
}

.ordinoo-alert {
  border-radius: 10px;
  padding: 10px 14px;
  font: 500 13px/1.4 var(--ordinoo-font);
  color: var(--ordinoo-danger);
  background: var(--ordinoo-danger-bg);
}

/* Componenti condivisi tra le viste dati (Panoramica, Customer Success, …) —
   un solo posto per bottoni pillola, titoli di card/sezione, badge N/A e
   indicatori di trend, mai duplicati per vista (regola DRY di CLAUDE.md). */

.ordinoo-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.ordinoo-section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
}

.ordinoo-loading {
  color: var(--ordinoo-ink-soft);
}

.ordinoo-preset-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ordinoo-preset-btn {
  border: 1px solid #e4e7ec;
  background: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font: 600 12px var(--ordinoo-font);
  color: rgba(37, 13, 53, .78);
  cursor: pointer;
}

/* Stato attivo "cool" (default) del mock — es. il preset "Anno" o "Tutti" di
   un filtro, non un filtro reale selezionato. */
.ordinoo-preset-btn.is-active {
  background: #3d2657;
  border-color: #3d2657;
  color: #fff;
}

/* Stato attivo "hot" — un filtro reale è selezionato (non l'opzione di
   default): il mock lo distingue con il magenta d'accento invece del viola.
   Usato solo dove chi chiama sa qual è l'opzione di default (vedi
   `presetBtnClass()` in success.js). */
.ordinoo-preset-btn.is-active.is-hot {
  background: #FF01A4;
  border-color: #FF01A4;
}

.ordinoo-preset-btn:disabled {
  opacity: .4;
  cursor: default;
}

/* Dato richiesto dal mockup di design ma non ancora fornito da nessun
   endpoint — vedi docs/frontend-data-gaps.md. Mostrato sempre nel layout,
   mai omesso, in ogni vista che ne ha bisogno. */
.ordinoo-na-badge {
  flex: none;
  font: 800 10px/1.6 var(--ordinoo-font);
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(179, 38, 30, .1);
  color: var(--ordinoo-danger);
}

.ordinoo-trend {
  font: 700 12px var(--ordinoo-font);
  white-space: nowrap;
}

.ordinoo-trend.is-up {
  color: var(--ordinoo-accent);
}

.ordinoo-trend.is-down {
  color: var(--ordinoo-danger);
}

.ordinoo-tab-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ordinoo-border);
  margin-bottom: 20px;
}

.ordinoo-tab-btn {
  border: none;
  background: transparent;
  padding: 10px 4px;
  margin-right: 20px;
  font: 700 13px var(--ordinoo-font);
  color: var(--ordinoo-ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

/* Footer "Mostra tutti" sotto una tabella — pattern condiviso da più viste. */
.ordinoo-table-more {
  display: flex;
  justify-content: center;
  padding: 13px;
  border-top: 1px solid var(--ordinoo-border);
  background: #fafbfc;
}

.ordinoo-tab-btn.is-active {
  color: var(--ordinoo-ink);
  border-bottom-color: var(--ordinoo-accent);
}

/* Modale generico — vedi public/assets/js/shared/modal.js */
.ordinoo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(16, 10, 26, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ordinoo-modal {
  background: #fff;
  border-radius: 16px;
  width: min(460px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(16, 10, 26, .35);
}

/* Variante per modali con contenuto denso (grafici, tabelle) — vedi
   OrdinooModal.open(title, bodyHtml, { wide: true }). */
.ordinoo-modal.is-wide {
  width: min(820px, 94vw);
}

.ordinoo-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: -22px -22px 14px;
  padding: 22px 22px 14px;
  position: sticky;
  top: -22px;
  background: #fff;
  z-index: 1;
}

/* .ordinoo-icon-btn è bianco di default (pensato per l'header/sidebar scuri)
   — su sfondo bianco del modale va scurito, altrimenti la X di chiusura è
   invisibile. Doppia classe nel selettore: shell.css (dove sta
   .ordinoo-icon-btn) si carica DOPO base.css, quindi a parità di
   specificità vincerebbe lui — qui serve una specificità più alta, non
   l'ordine nel file. */
.ordinoo-icon-btn.ordinoo-modal-close {
  color: var(--ordinoo-ink-soft);
}

.ordinoo-icon-btn.ordinoo-modal-close:hover {
  background: var(--ordinoo-bg);
  color: var(--ordinoo-ink);
}

/* Tooltip condiviso dei grafici SVG scritti a mano — vedi
   public/assets/js/shared/tooltip.js. */
.ordinoo-chart-tooltip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--ordinoo-border);
  border-radius: 8px;
  padding: 7px 11px;
  font: 600 11.5px var(--ordinoo-font);
  color: var(--ordinoo-ink);
  box-shadow: 0 8px 22px rgba(16, 24, 40, .16);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .1s ease, transform .1s ease;
  white-space: nowrap;
}

.ordinoo-chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ordinoo-chart-tooltip-label {
  color: var(--ordinoo-ink-soft);
  font-weight: 500;
  margin-right: 6px;
}

/* Intestazione di pagina del mock (Materiale formativo, Recupero crediti):
   titolo, contatore, ricerca e spaziatore prima delle azioni a destra. */
.ordinoo-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 16px;
  flex-wrap: wrap;
}

.ordinoo-page-head h2 {
  font: 800 20px/1.2 var(--ordinoo-font);
  color: #250D35;
  margin: 0;
}

.ordinoo-page-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 200px;
  max-width: 280px;
}

.ordinoo-page-search svg {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 11px;
  pointer-events: none;
}

.ordinoo-page-search input {
  width: 100%;
  font: 500 12px/1 var(--ordinoo-font);
  color: #250D35;
  padding: 8px 11px 8px 32px;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  outline: none;
  background: #fff;
}

.ordinoo-page-spacer {
  flex: 1;
  min-width: 12px;
}

/* Tabella-elenco dentro una card del mock (Recupero crediti, Coda di oggi):
   intestazioni, cella cliente cliccabile, bottoni azione e "Mostra tutti". */
.ordinoo-list-card {
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  transition: box-shadow .15s, transform .15s;
  overflow: hidden;
}

.ordinoo-list-card:hover {
  box-shadow: 0 8px 22px rgba(16, 24, 40, .12);
  transform: translateY(-2px);
}

.ordinoo-list-scroll {
  overflow-x: auto;
}

.ordinoo-list-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ordinoo-font);
}

.ordinoo-list-table thead tr {
  background: #fafbfc;
}

.ordinoo-list-table th {
  text-align: left;
  padding: 12px 16px;
  font: 700 11px/1.3 var(--ordinoo-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(37, 13, 53, .62);
  border-bottom: 1px solid #eceef1;
  white-space: nowrap;
}

.ordinoo-list-table tbody tr {
  border-bottom: 1px solid #f4f5f7;
}

.ordinoo-list-table td {
  padding: 11px 16px;
  white-space: nowrap;
}

.ordinoo-list-table .is-right {
  text-align: right;
}

.ordinoo-list-client {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ordinoo-font);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ordinoo-list-client:hover {
  opacity: .72;
}

.ordinoo-list-client-name {
  font: 700 13px/1.2 var(--ordinoo-font);
  color: #3d2657;
}

.ordinoo-list-client-sub {
  font: 500 11px/1.2 var(--ordinoo-font);
  color: rgba(37, 13, 53, .62);
}

.ordinoo-list-table td.ordinoo-list-actions {
  padding: 9px 16px;
  text-align: right;
}

.ordinoo-list-actions-row {
  display: inline-flex;
  gap: 8px;
}

.ordinoo-list-btn {
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  background: #fff;
  color: #3d2657;
  font: 700 12px/1 var(--ordinoo-font);
  cursor: pointer;
}

.ordinoo-list-btn.is-primary {
  border: none;
  background: #3d2657;
  color: #fff;
}

.ordinoo-list-btn.is-green {
  color: #0f8f6b;
}

.ordinoo-list-more {
  display: flex;
  justify-content: center;
  padding: 14px;
  border-top: 1px solid #f0f1f3;
}

.ordinoo-list-more.is-shaded {
  padding: 13px;
  background: #fafbfc;
}

.ordinoo-list-more button {
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid #e4e7ec;
  background: #fff;
  color: #3d2657;
  font: 700 12px/1 var(--ordinoo-font);
  cursor: pointer;
}

.ordinoo-list-empty {
  padding: 18px 16px;
  font: 500 12px/1.4 var(--ordinoo-font);
  color: rgba(37, 13, 53, .62);
}