/* TouchDesk — foglio di base.
 *
 * Stessi gettoni del CRM Feel The Yarn: un tema scritto per quello funziona
 * anche qui. La regola d'ordine e' quella collaudata la': prima questo foglio,
 * poi i valori del marchio, poi il tema. Al contrario vincerebbe il foglio di
 * base — stessa specificita', vince l'ultimo — e il marchio non si vedrebbe.
 */

:root {
    --bg: #FFFFFF;
    --fg: #101828;
    --muted: #667085;
    --border: #E4E7EC;
    --row-alt: #F9FAFB;
    --green: #4F46E5;              /* colore del marchio, da BRAND_COLORE */
    --grey: #CCCCCC;
    --danger: #B42318;
    --warn: #B54708;
    --ok: #027A48;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-titoli: var(--font);

    /* Forma e ritmo: li ridefinisce il tema, non i template. */
    --raggio: 0;
    --raggio-grande: 0;
    --ombra: none;
    --maiuscolo: uppercase;
    --tracking: 0.08em;
    --azione-bg: var(--fg);
    --azione-fg: var(--bg);
    --superficie: transparent;
    --focus-bordo: var(--fg);
    --focus-alone: none;
    --h-logo: 30px;
    --w-logo-accesso: 260px;

    /* Semaforo del controllo di prontezza delle destinazioni. */
    --stato-pronta: #027A48;
    --stato-incompleta: #B54708;
    --stato-irraggiungibile: #B42318;
    --stato-ignoto: #98A2B3;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #111111;
    --fg: #E8EAED;
    --muted: #98A2B3;
    --border: #2E3238;
    --row-alt: #17191C;
    --grey: #555555;
    --danger: #E57373;
    --warn: #E0A458;
    --ok: #6FA87C;
    color-scheme: dark;
}
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .login-logo { filter: invert(1) brightness(1.1); }

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--fg);
    font-family: var(--font);
    font-size: 16px; line-height: 1.5;
}

a { color: var(--fg); }

h1, h2, h3 { font-family: var(--font-titoli); font-weight: 700; letter-spacing: 0.01em; }
h1 { font-size: 2rem; margin: 0 0 1rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

.container { max-width: 1400px; margin: 2rem auto; padding: 0 1.5rem; }
.page-title { margin-top: 0; }
.sottotitolo { color: var(--muted); margin: -0.5rem 0 1.5rem; }

/* --- Barra in alto ------------------------------------------------------- */

.site-header {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky; top: 0; z-index: 100;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.brand-logo { height: var(--h-logo); width: auto; display: block; }
.brand-sub {
    font-weight: 700; text-transform: var(--maiuscolo);
    letter-spacing: var(--tracking); font-size: 0.95rem;
}
.app-version { color: var(--muted); font-size: 0.7rem; letter-spacing: 0; text-transform: none; }

.main-nav { display: flex; align-items: center; gap: 0.3rem; flex: 1; flex-wrap: wrap; }
.main-nav a {
    text-decoration: none; color: var(--fg);
    padding: 0.45rem 0.7rem; font-size: 0.9rem;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
}
.main-nav a:hover { background: var(--row-alt); }
.main-nav a.attivo { background: var(--green); color: #fff; }

.header-actions { display: inline-flex; align-items: center; gap: 0.8rem; margin-left: auto; }
.current-user { color: var(--muted); font-size: 0.85rem; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--fg);
              padding: 0.35rem 0.6rem; cursor: pointer; }

/* Scambiatore di azienda: chi ne ha una sola non lo vede proprio. */
.switch-azienda select {
    font-size: 0.85rem; padding: 0.3rem 0.5rem;
    max-width: 220px;
}

/* --- Avvisi -------------------------------------------------------------- */

.alert {
    border: 1px solid var(--border); border-left-width: 3px;
    padding: 0.8rem 1rem; margin: 0 0 1.2rem;
    border-radius: var(--raggio);
    background: var(--superficie);
}
.alert-ok    { border-left-color: var(--ok);     color: var(--ok); }
.alert-error { border-left-color: var(--danger); color: var(--danger); }
.alert-warn  { border-left-color: var(--warn);   color: var(--warn); }
.alert-info  { border-left-color: var(--muted);  color: var(--muted); }

/* --- Bottoni ------------------------------------------------------------- */

button, input[type=submit], .btn {
    display: inline-block;
    background: transparent; color: var(--fg);
    border: 1px solid var(--fg);
    padding: 0.6rem 1.3rem; font-size: 0.88rem;
    font-family: inherit;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    text-decoration: none; text-align: center;
    border-radius: var(--raggio);
    cursor: pointer; transition: all 0.15s;
}
button:hover, .btn:hover { background: var(--fg); color: var(--bg); }

.btn-primary { background: var(--azione-bg); color: var(--azione-fg); border-color: var(--azione-bg); }
.btn-primary:hover { filter: brightness(1.1); background: var(--azione-bg); color: var(--azione-fg); }

.btn-secondary { border-color: var(--border); color: var(--fg); background: var(--bg); }
.btn-secondary:hover { background: var(--row-alt); color: var(--fg); }

.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-small { padding: 0.35rem 0.8rem; font-size: 0.78rem; }

button:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Campi --------------------------------------------------------------- */

label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], select, textarea {
    width: 100%; padding: 0.6rem 0.7rem;
    border: 1px solid var(--border); border-radius: var(--raggio);
    background: var(--bg); color: var(--fg);
    font-family: inherit; font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--focus-bordo); box-shadow: var(--focus-alone);
}
.campo { margin-bottom: 1rem; }
.aiuto { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.errore-campo { font-size: 0.8rem; color: var(--danger); margin-top: 0.3rem; }
.checkbox-riga { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-riga input { width: auto; }
.checkbox-riga label { margin: 0; }

/* --- Schede -------------------------------------------------------------- */

.card {
    border: 1px solid var(--border); border-radius: var(--raggio-grande);
    box-shadow: var(--ombra); background: var(--superficie);
    padding: 1.2rem; margin-bottom: 1.2rem;
}
.card-titolo { margin: 0 0 0.8rem; font-size: 1.05rem; }
.griglia { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* --- Elenchi ------------------------------------------------------------- */

table.elenco { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.elenco th, table.elenco td {
    padding: 0.6rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table.elenco th {
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    font-size: 0.78rem; color: var(--muted); font-weight: 600;
    border-bottom: 2px solid var(--border);
}
table.elenco tr:nth-child(even) td { background: var(--row-alt); }
table.elenco td.azioni { white-space: nowrap; width: 1%; }
.tabella-scorrevole { overflow-x: auto; }

.vuoto { color: var(--muted); padding: 2.5rem 1rem; text-align: center; }

/* --- Semaforo e pastiglie ------------------------------------------------ */

.pastiglia {
    display: inline-block; padding: 0.15rem 0.55rem;
    border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    border: 1px solid currentColor; white-space: nowrap;
}
.pastiglia-ok      { color: var(--ok); }
.pastiglia-attesa  { color: var(--warn); }
.pastiglia-errore  { color: var(--danger); }
.pastiglia-spenta  { color: var(--muted); }

.semaforo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; }
.semaforo-pronta         { background: var(--stato-pronta); }
.semaforo-incompleta     { background: var(--stato-incompleta); }
.semaforo-irraggiungibile{ background: var(--stato-irraggiungibile); }
.semaforo-ignoto         { background: var(--stato-ignoto); }

/* Elenco dei controlli sulla pagina: cosa c'e' e cosa manca. */
.controlli { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.controlli li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.87rem; }
/* min-width e non width: la colonna ospita sia una spunta sia "635 ms", e con
   una larghezza fissa il testo piu' lungo andava a capo dentro la cella. */
.controlli .esito { font-weight: 700; min-width: 1.2rem; display: inline-block; white-space: nowrap; }
.controlli .si { color: var(--ok); }
.controlli .no { color: var(--danger); }

/* --- Integrazioni -------------------------------------------------------- */

.integrazione { display: flex; align-items: flex-start; gap: 1rem; }
.integrazione-corpo { flex: 1; }
.integrazione h3 { margin: 0 0 0.2rem; }
.integrazione .descrizione { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.8rem; }

/* --- Accesso ------------------------------------------------------------- */

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.login-card { width: 100%; max-width: 400px; }
.login-logo { display: block; margin: 0 auto 1.5rem; max-width: var(--w-logo-accesso); width: 70%; height: auto; }
.login-claim { text-align: center; color: var(--muted); margin: -0.8rem 0 1.6rem; font-size: 0.9rem; }
.login-footer { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 1.5rem; }

/* --- Schermi stretti ------------------------------------------------------ */

@media (max-width: 900px) {
    .nav-toggle { display: inline-block; order: 3; margin-left: auto; }
    .main-nav {
        display: none; order: 4; width: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
    }
    .main-nav.aperta { display: flex; }
    .main-nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
    .header-actions { order: 2; margin-left: 0; }
    .site-header { flex-wrap: wrap; }
    .container { margin: 1.2rem auto; padding: 0 1rem; }
    h1 { font-size: 1.6rem; }
}

/* --- Accesso con Google --------------------------------------------------- */

.oauth { margin-top: 1.2rem; }
.oauth-separatore {
    text-align: center; color: var(--muted); font-size: 0.8rem;
    margin: 0 0 0.8rem; position: relative;
}
.oauth-separatore::before {
    content: ""; position: absolute; top: 50%; left: 0; right: 0;
    border-top: 1px solid var(--border);
}
.oauth-separatore span { background: var(--bg); padding: 0 0.7rem; position: relative; }
.oauth-logo {
    font-weight: 700; margin-right: 0.5rem;
    /* I quattro colori del marchio Google: e' il segno per cui il pulsante si
       riconosce senza leggerlo. */
    background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}