/* ═══════════════════════════════════════════════════════════════════
   CecchinatoHR — Design Tokens  ·  v4.9.13
   UNICA sorgente dei token per Workflow, Time Shift e To Do.
   Caricato PRIMA di billing.css / reminders.css / admin.css, che non
   dichiarano piu :root. Modificare un colore qui lo cambia ovunque.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marchio ─────────────────────────────────────────────────────
       v4.9.15: presi dal logo CECCHINATO HR, campionati dal file
       originale. Il blu era #1a4a6e (piu verde del marchio) e l'oro
       #c8963e non esiste nel logo: era un colore inventato.
       Per tornare indietro bastano queste sei righe. */
    --chr-primary:        #28467d;   /* navy del logo */
    --chr-primary-dark:   #1b3159;
    --chr-primary-light:  #eef2f9;
    --chr-primary-soft:   #33589a;

    --chr-accent:         #008dd2;   /* ciano del logo */
    --chr-accent-dark:    #0071a8;
    --chr-accent-light:   #e6f4fc;

    /* ── Semantici ───────────────────────────────────────────────── */
    --chr-success:        #1a7a4a;
    --chr-success-bg:     #eafaf1;
    --chr-error:          #c0392b;
    --chr-error-bg:       #fef2f2;
    --chr-warn:           #d97706;
    --chr-warn-bg:        #fffbeb;
    --chr-info:           #1a6fb5;
    --chr-info-bg:        #eff6ff;

    /* ── Superfici ───────────────────────────────────────────────── */
    --chr-bg:             #f4f6f9;
    --chr-surface:        #ffffff;
    --chr-border:         #dde3ea;
    --chr-border-light:   #eef1f5;
    --chr-text:           #1e2d3d;
    --chr-text-secondary: #4a5568;
    --chr-muted:          #8898aa;

    /* ── Forma ───────────────────────────────────────────────────── */
    --chr-radius:         8px;
    --chr-radius-lg:      12px;
    --chr-radius-xl:      16px;
    --chr-radius-pill:    100px;
    --chr-shadow-xs:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --chr-shadow:         0 4px 16px rgba(40,70,125,.08), 0 1px 4px rgba(0,0,0,.04);
    --chr-shadow-md:      0 8px 28px rgba(40,70,125,.12), 0 2px 8px rgba(0,0,0,.06);
    --chr-shadow-lg:      0 20px 48px rgba(40,70,125,.16), 0 4px 12px rgba(0,0,0,.08);
    --chr-transition:     150ms cubic-bezier(.4,0,.2,1);
    --chr-transition-slow:280ms cubic-bezier(.4,0,.2,1);

    /* ── Tipografia ──────────────────────────────────────────────── */
    --chr-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    --chr-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* ── Layout ──────────────────────────────────────────────────── */
    --chr-app-width: 1100px;

    /* ═══════════════════════════════════════════════════════════════
       Alias legacy --cch-*  (To Do / Agenda)
       reminders.css continua a usarli senza modifiche: ora puntano
       agli stessi valori del resto della suite.
       ═══════════════════════════════════════════════════════════════ */
    --cch-navy:      var(--chr-primary);
    --cch-navy-dark: var(--chr-primary-dark);
    --cch-blue:      var(--chr-info);
    --cch-accent:    var(--chr-accent);
    --cch-bg:        var(--chr-bg);
    --cch-surface:   var(--chr-surface);
    --cch-border:    var(--chr-border);
    --cch-text:      var(--chr-text);
    --cch-muted:     var(--chr-muted);
    --cch-radius:    var(--chr-radius);
    --cch-shadow:    var(--chr-shadow);
    --cch-pending:   var(--chr-warn);
    --cch-sent:      var(--chr-success);
    --cch-danger:    var(--chr-error);
}

/* ═══════════════════════════════════════════════════════════════════
   App bar unificata — identica in Workflow, Time Shift e To Do
   Nota: la classe .chr-app-header e mantenuta perche timeshift.js
   inserisce la propria barra tab con .chr-app-header ).after()
   ═══════════════════════════════════════════════════════════════════ */

.chr-appbar {
    background: linear-gradient(135deg, var(--chr-primary) 0%, var(--chr-primary-soft) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 28px;
    box-shadow: 0 2px 12px rgba(26,74,110,.25);
    position: sticky;
    top: 0;
    z-index: 100;
    font-family: var(--chr-font);
    -webkit-font-smoothing: antialiased;
}

.chr-appbar-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.2;
    flex-shrink: 0;
}
/* Logo ufficiale, versione bianca per il fondo navy */
.chr-appbar-logo {
    display: block;
    height: 22px;
    width: auto;
}
.chr-appbar-brand .chr-logo-text {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.4px;
}
.chr-appbar-brand .chr-logo-sub {
    color: var(--chr-accent);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ── Commutatore fra le tre app ──────────────────────────────────── */
.chr-appnav {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--chr-radius-pill);
    padding: 3px;
    flex-shrink: 0;
}
.chr-appnav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--chr-radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--chr-transition), color var(--chr-transition);
}
.chr-appnav a:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
    text-decoration: none;
}
.chr-appnav a.is-current {
    background: #fff;
    color: var(--chr-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.chr-appnav a.is-current:hover { background: #fff; color: var(--chr-primary); }

.chr-appbar-spacer { flex: 1; }

.chr-appbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.chr-appbar .chr-user-badge,
.chr-appbar .cch-header-user {
    font-size: 12px;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--chr-radius-pill);
    padding: 5px 13px;
    margin: 0;
    white-space: nowrap;
}

.chr-role-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: var(--chr-radius-pill);
    margin-left: 5px;
    vertical-align: middle;
}
.chr-role-admin  { background: var(--chr-accent); color: #fff; }
.chr-role-fidato { background: rgba(255,255,255,.24); color: #fff; }

.chr-appbar-logout {
    background: transparent;
    border: 1px solid rgba(255,255,255,.28);
    color: rgba(255,255,255,.88);
    border-radius: var(--chr-radius);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--chr-transition), color var(--chr-transition);
}
.chr-appbar-logout:hover { background: rgba(255,255,255,.14); color: #fff; }

@media (max-width: 900px) {
    .chr-appbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
    .chr-appbar-logo { height: 19px; }
    .chr-appbar-spacer { display: none; }
    .chr-appnav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .chr-appnav::-webkit-scrollbar { display: none; }
    .chr-appbar-right { margin-left: auto; gap: 8px; }
    .chr-appbar-brand .chr-logo-text { font-size: 15px; }
    .chr-appbar-brand .chr-logo-sub  { font-size: 9px; letter-spacing: 1.4px; }
    .chr-appbar .chr-user-badge { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; }
    .chr-appbar-logout { padding: 5px 11px; }
    .chr-appnav a { padding: 6px 13px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Scala tipografica  ·  v4.9.14
   Prima i titoli avevano 20 combinazioni di stile inline diverse fra
   loro (15px, 16px, 18px, 24px, tre colori, sei margini). Ora sono tre.
   ═══════════════════════════════════════════════════════════════════ */

.chr-h1, .chr-h2, .chr-h3, .chr-h4 {
    font-family: var(--chr-font);
    color: var(--chr-primary);
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
}
.chr-h1 { font-size: 22px; letter-spacing: -.3px; margin: 0 0 10px; }
.chr-h2 { font-size: 18px; letter-spacing: -.2px; margin: 0 0 16px; }
.chr-h3 { font-size: 15px; margin: 0 0 14px; }
.chr-h4 { font-size: 13px; color: var(--chr-text-secondary); margin: 0 0 8px; }

/* Titolo dentro una riga che ha gia il suo margine (header di sezione) */
.chr-h-flush { margin-bottom: 0; }

/* Riga di intestazione: titolo a sinistra, comandi a destra */
.chr-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════════════════
   Logo nelle schermate di accesso (versione a colori su fondo bianco)
   ═══════════════════════════════════════════════════════════════════ */
.chr-brand-logo {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto;
}
.chr-brand-sub {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--chr-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   Time Shift — sotto-navigazione del Report  ·  v4.9.15
   ═══════════════════════════════════════════════════════════════════ */
.chr-rnav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--chr-surface);
    border: 1px solid var(--chr-border);
    border-radius: var(--chr-radius-lg);
    padding: 5px;
    margin-bottom: 20px;
    box-shadow: var(--chr-shadow-xs);
}
.chr-rnav-btn {
    background: none;
    border: none;
    font-family: var(--chr-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--chr-muted);
    padding: 8px 16px;
    border-radius: var(--chr-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--chr-transition), color var(--chr-transition);
}
.chr-rnav-btn:hover { color: var(--chr-primary); background: var(--chr-primary-light); }
.chr-rnav-btn.active {
    background: var(--chr-primary);
    color: #fff;
}
.chr-rnav-btn.active:hover { background: var(--chr-primary); color: #fff; }

@media (max-width: 640px) {
    .chr-rnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .chr-rnav::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Scala di grigi  ·  v4.9.16
   Nell'interfaccia convivevano #888 #aaa #ccc #eee #555 #333 #6b7280
   #9ca3af #374151 #7f8c9a #b0bfc9 #cbd5e0 #f0f2f5 #f3f4f6 #f8fafc
   #f9fafb — quindici neutri per sei livelli reali. Questi sono i sei.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --chr-gray-50:  #f8fafc;
    --chr-gray-100: #f3f4f6;
    --chr-gray-300: #d1d5db;
    --chr-gray-400: #9ca3af;
    --chr-gray-500: #6b7280;
    --chr-gray-600: #4a5568;
    --chr-gray-700: #374151;
}

/* ═══════════════════════════════════════════════════════════════════
   Componenti  ·  v4.9.16
   La stessa "scheda bianca" era scritta a mano in 18 modi diversi.
   ═══════════════════════════════════════════════════════════════════ */
.chr-card {
    background: var(--chr-surface);
    border-radius: var(--chr-radius-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.chr-card-lg     { padding: 20px 24px; }
.chr-card-tight  { padding: 16px 18px; }
.chr-card-flush  { margin-bottom: 0; }
.chr-card-clip   { overflow: hidden; }
.chr-card-scroll { overflow-x: auto; }

/* Tabelle compatte dentro le schede */
.chr-tbl    { width: 100%; border-collapse: collapse; font-size: 13px; }
.chr-tbl-sm { width: 100%; border-collapse: collapse; font-size: 12px; }

/* Etichetta breve sopra un campo */
.chr-label-sm {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--chr-gray-600);
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Font dei controlli di form  ·  v4.9.17
   input, select, textarea e button NON ereditano il font dal genitore:
   senza una regola esplicita il browser usa il proprio. Nel To Do i
   campi e i pulsanti uscivano infatti in un font diverso dal resto.
   Solo la famiglia — dimensioni, colori e bordi restano dove sono.
   Un font-family inline (i due campi monospace) vince comunque su questa.
   ═══════════════════════════════════════════════════════════════════ */
.chr-app-wrap input,   .chr-app-wrap select,   .chr-app-wrap textarea,   .chr-app-wrap button,
.chr-login-wrap input, .chr-login-wrap select, .chr-login-wrap textarea, .chr-login-wrap button,
#cch-prom-app input,   #cch-prom-app select,   #cch-prom-app textarea,   #cch-prom-app button,
.chr-wrap input,       .chr-wrap select,       .chr-wrap textarea,       .chr-wrap button {
    font-family: var(--chr-font);
}

/* ═══════════════════════════════════════════════════════════════════
   Logo: difesa dai temi WordPress  ·  v4.9.20
   Quasi tutti i temi dichiarano img { height:auto } o { max-width:100% },
   spesso con !important. Senza questa difesa il logo nella barra usciva
   a grandezza naturale (560px) e gonfiava l'intestazione.
   ═══════════════════════════════════════════════════════════════════ */
.chr-appbar .chr-appbar-logo {
    height: 22px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: block;
}
.chr-login-logo .chr-brand-logo,
.cch-login-box .chr-brand-logo {
    width: 100% !important;
    max-width: 240px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .chr-appbar .chr-appbar-logo { height: 19px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Selettore a segmenti (To Do / Agenda)  ·  v4.9.20
   Due destinazioni grandi e sempre visibili, con il loro conteggio.
   Nessuna schermata di scelta: la sezione si apre al primo clic.
   ═══════════════════════════════════════════════════════════════════ */
.chr-seg {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--chr-surface);
    border: 1.5px solid var(--chr-border);
    border-radius: 14px;
    padding: 8px;
    margin-bottom: 18px;
    box-shadow: var(--chr-shadow-xs);
    flex-wrap: wrap;
}
.chr-seg-btn {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 13px 16px;
    cursor: pointer;
    text-align: left;
    font-family: var(--chr-font);
    color: var(--chr-gray-500);
    transition: background var(--chr-transition), color var(--chr-transition);
}
.chr-seg-btn:hover { background: var(--chr-primary-light); color: var(--chr-primary); }
.chr-seg-btn.cch-tab-active,
.chr-seg-btn.cch-tab-active:hover { background: var(--chr-primary); color: #fff; }
.chr-seg-btn .chr-i { width: 26px; height: 26px; margin: 0; flex-shrink: 0; }
.chr-seg-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chr-seg-t { font-size: 15px; font-weight: 700; }
.chr-seg-s {
    font-size: 11.5px; font-weight: 600; opacity: .8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chr-seg-n {
    margin-left: auto;
    font-size: 15px; font-weight: 800;
    background: var(--chr-primary-light); color: var(--chr-primary);
    border-radius: var(--chr-radius-pill);
    padding: 2px 13px; flex-shrink: 0;
}
.chr-seg-btn.cch-tab-active .chr-seg-n { background: rgba(255,255,255,.22); color: #fff; }
.chr-seg-n:empty { display: none; }
.chr-seg-n.is-late { background: var(--chr-error-bg); color: var(--chr-error); }
.chr-seg-btn.cch-tab-active .chr-seg-n.is-late { background: rgba(255,255,255,.9); color: var(--chr-error); }

/* Terza voce, secondaria */
.chr-seg-mini {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 7px;
    background: none; border: none; border-radius: 10px;
    padding: 13px 16px; cursor: pointer;
    font: 600 12.5px var(--chr-font); color: var(--chr-gray-400);
}
.chr-seg-mini:hover { background: var(--chr-gray-100); color: var(--chr-gray-600); }
.chr-seg-mini.cch-tab-active { background: var(--chr-gray-100); color: var(--chr-primary); }
.chr-seg-mini .chr-i { width: 17px; height: 17px; margin: 0; }

/* Pulsante che apre il modulo di inserimento */
.chr-newtodo-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }

@media (max-width: 640px) {
    .chr-seg-btn { flex: 1 1 100%; }
    .chr-seg-mini { flex: 1 1 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Time Shift — coda "Email da confermare" in Oggi  ·  v4.9.21
   Il riquadro e lo stesso widget del Report: qui restano solo le email
   da confermare, che sono lavoro da fare. Filtri, sotto-schede e
   statistiche non vengono rimossi dal DOM (il JS li legge) ma nascosti.
   ═══════════════════════════════════════════════════════════════════ */
.chr-et-queue .chr-et2-filters,
.chr-et-queue .chr-et2-tabs,
.chr-et-queue #chr-et2-panel-stats,
.chr-et-queue #chr-et2-client-summary { display: none !important; }

.chr-queue-n {
    display: none;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 800;
    background: var(--chr-warn-bg);
    color: var(--chr-warn);
    border-radius: var(--chr-radius-pill);
    padding: 1px 10px;
}



/* ═══════════════════════════════════════════════════════════════════
   Righe di form: controlli tutti della stessa altezza  ·  v4.9.26
   .chr-row allinea le colonne in basso. Finche i controlli avevano tre
   altezze diverse (input 38px, campo mese 40px, pulsante 42px) le
   etichette sopra si disponevano a scaletta di 2px l'una dall'altra —
   il disallineamento visibile in "Nuova Pratica".
   ═══════════════════════════════════════════════════════════════════ */
.chr-row .chr-input,
.chr-row .chr-select,
.chr-row input[type="text"],
.chr-row input[type="date"],
.chr-row input[type="month"],
.chr-row input[type="number"],
.chr-row select {
    /* v4.9.28: !important come per il logo — molti temi WordPress
       dichiarano altezze o padding sui campi con priorita piu alta e
       rimettevano le tre altezze diverse. */
    height: 40px !important;
    min-height: 40px !important;   /* un tema che imposta min-height vincerebbe su height */
    max-height: 40px !important;
    box-sizing: border-box !important;
}
.chr-row textarea { box-sizing: border-box; }

.chr-row .chr-btn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    /* v4.9.27: senza questo il pulsante con icona si allinea alla linea di
       base del testo e resta 4px piu in alto di quello senza icona
       (vedi "Carica" e "Reset" nella scheda Dettaglio). */
    vertical-align: bottom !important;
}
/* I pulsanti piccoli dentro una riga restano piccoli */
.chr-row .chr-btn-sm { height: 32px !important; min-height: 32px !important; max-height: 32px !important; }

/* ═══════════════════════════════════════════════════════════════════
   Righe di form: l'ancoraggio in basso non deve dipendere dal tema
   v4.9.29
   Misurando gli screenshot dal sito vero: i riquadri dei campi non
   avevano solo altezze diverse, avevano i FONDI a quote diverse (10px).
   Vuol dire che l'`align-items: flex-end` di .chr-row non era in
   vigore — sovrascritto da qualcos'altro nella pagina.
   Qui l'ancoraggio e ridichiarato prioritario e ripetuto anche su
   ogni colonna, cosi regge comunque.
   ═══════════════════════════════════════════════════════════════════ */
.chr-row {
    display: flex !important;
    align-items: flex-end !important;
}
.chr-row > * { align-self: flex-end !important; }

/* v4.9.31 — Allineamento per costruzione, non per deduzione.
   Le due ipotesi precedenti (altezze dei controlli, contenitori vuoti)
   non hanno risolto sul sito vero. Quindi smetto di dipendere dalla
   causa: invece di ancorare le colonne in basso — dove qualunque cosa
   sotto il campo sposta tutto — le ancoro in ALTO e do all'etichetta
   un'altezza fissa. Cosi il campo parte sempre a 19px dal bordo
   superiore della riga, qualunque cosa ci sia sopra o sotto.
   Le colonne senza etichetta (i pulsanti affiancati Carica / Reset)
   ricevono lo stesso rientro di 19px, cosi restano in linea. */
.chr-row {
    display: flex !important;
    align-items: flex-start !important;
}
.chr-row > * { align-self: flex-start !important; }

.chr-row .chr-label {
    display: block !important;
    height: 13px !important;
    line-height: 13px !important;
    margin: 0 0 6px !important;
    overflow: hidden;
    white-space: nowrap;
}
/* Colonne senza etichetta: stesso rientro, per restare in linea */
.chr-row > *:not(:has(> .chr-label)) { margin-top: 19px !important; }

/* ═══════════════════════════════════════════════════════════════════
   La causa vera dello scalino in "Nuova Pratica"  ·  v4.9.30
   Sotto il campo Cliente ci sono due contenitori — il badge del cliente
   e la nota "gestita da" — con margine superiore di 6px e 4px. Quando
   il JavaScript li mostra mentre sono ancora vuoti, non si vede niente
   ma la colonna cresce di **esattamente 10px**: gli stessi 10px
   misurati sullo screenshot del sito.
   La colonna piu alta, essendo ancorata in basso, portava la propria
   etichetta piu in su delle altre. Da qui lo scalino.
   ═══════════════════════════════════════════════════════════════════ */
#chr-client-badge:empty,
#chr-client-gestita-info:empty,
#chr-det-client-badge:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}