/* v.2.01 - + Form placeholders (implementa regola globale 'es. ' + italic grigio) */

/*region VARIABILI E RESET - tema LIGHT come default */
:root {
    /* Colori semantici di tema (light di default).
       --brand e --accent sono iniettati da _header.php in base al tema corrente.
       Gli altri si declinano qui per ciascun tema. */
    --brand: #0066CC;             /* fallback se header.php non inietta */
    --brand-hover: color-mix(in srgb, var(--brand) 85%, black);
    --accent: #004D99;            /* fallback se header.php non inietta */

    --bg: #f5f5f5;                /* sfondo pagina */
    --surface: #ffffff;           /* sfondo wrapper/card */
    --text: #333333;              /* testo principale */
    --text-muted: #666666;        /* testo secondario */
    --border: #dddddd;            /* bordi */

    /* Colore di modulo: HEX iniettato inline dal body (--module-color).
       Le variabili derivate funzionano sia in light che in dark. */
    --module-color: var(--brand);
    --module-color-light: color-mix(in srgb, var(--module-color) 15%, var(--surface));
    --module-color-dark: color-mix(in srgb, var(--module-color) 85%, black);

    --white: #fff;
    --border-color: var(--border);
    --text-color: var(--text);
    --bg-color: var(--bg);

    --font-family: 'Open Sans', sans-serif;
}

/*region Tema DARK - override esplicito */
[data-theme="dark"] {
    --bg: #121212;
    --surface: #1e1e1e;
    --text: #e0e0e0;
    --text-muted: #a0a0a0;
    --border: #333333;

    /* In dark il module-color viene desaturato/mixato per ridurre l'intensita su sfondo scuro.
       --module-color resta l'HEX iniettato, ma le sue declinazioni si adattano. */
    --module-color-light: color-mix(in oklch, var(--module-color) 30%, var(--surface));
    --module-color-dark: color-mix(in oklch, var(--module-color) 80%, white);

    --white: #1e1e1e;             /* alias retrocompat: in dark il "white" e' il surface */
    --border-color: var(--border);
    --text-color: var(--text);
    --bg-color: var(--bg);
}
/*endregion Tema DARK */

/*region Tema AUTO - segue OS via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg: #121212;
        --surface: #1e1e1e;
        --text: #e0e0e0;
        --text-muted: #a0a0a0;
        --border: #333333;

        --module-color-light: color-mix(in oklch, var(--module-color) 30%, var(--surface));
        --module-color-dark: color-mix(in oklch, var(--module-color) 80%, white);

        --white: #1e1e1e;
        --border-color: var(--border);
        --text-color: var(--text);
        --bg-color: var(--bg);
    }
}
/*endregion Tema AUTO */

/* Open Sans SELF-HOSTED (hardening: Google Fonts non e' SRI-abile — CSS per User-Agent — e
   comporta chiamate/IP verso terzi; il woff2 variabile copre i pesi 300-700 in un file solo).
   File: _css/fonts/opensans-latin.woff2 (subset latin, v44). */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/opensans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-family);
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    margin: 0;
    padding: 0;
}
/*endregion VARIABILI E RESET */

/*region LAYOUT GENERALE */

    /*region Navbar */
    .navbar {
        background-color: var(--module-color) !important;
    }

    .navbar .nav-link {
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 14px;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        color: #ffffff !important;
    }

    .navbar .user-info {
        color: #ffffff;
        font-size: 13px;
        padding: 0.5rem 1rem;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        margin-right: 1rem;
    }
    /*endregion Navbar */

    /*region Content area */
    #wrapper {
        max-width: 1200px;
        margin: 80px auto 30px auto;
        padding: 30px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 4px;
    }

    h1 {
        font-size: 28px;
        font-weight: 300;
        color: var(--module-color);
        border-bottom: 1px solid var(--module-color);
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    h2 {
        font-size: 22px;
        font-weight: 400;
        color: var(--module-color);
        margin-bottom: 15px;
    }

    h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--module-color-dark);
        margin-bottom: 10px;
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .page-header h1 {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
    }
    /*endregion Content area */

    /*region Bottoni */
    .btn-module {
        background-color: var(--module-color);
        border-color: var(--module-color);
        color: #ffffff;
    }

    .btn-module:hover {
        background-color: var(--module-color-dark);
        border-color: var(--module-color-dark);
        color: #ffffff;
    }
    /*endregion Bottoni */

    /*region Form placeholders [implementa regola globale ~/.claude/CLAUDE.md - 'Placeholder nei form']
       Prefisso `es. ` nel valore HTML resta responsabilita dell'AI;
       qui lo stile italic+grigio si applica automatico via ::placeholder. */
    input::placeholder,
    textarea::placeholder {
        color: #aaa;
        font-style: italic;
    }
    /*endregion Form placeholders */

    /*region Tabelle */
    .table thead th {
        background-color: var(--module-color);
        color: #ffffff;
        font-weight: 600;
        font-size: 14px;
    }
    /*endregion Tabelle */

    /*region Utilita */
    .text-module { color: var(--module-color); }
    .bg-module { background-color: var(--module-color); }
    .border-module { border-color: var(--module-color) !important; }
    .text-accent { color: var(--accent); }
    .ok { color: #28a745; }
    .ko { color: #dc3545; }
    /*endregion Utilita */

    /*region Toggle tema (REQ-1) - bottone ciclico nel menu */
    .theme-toggle {
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
        padding: 0.4rem 0.7rem;
        margin-right: 0.5rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    .theme-toggle:hover { background: rgba(255, 255, 255, 0.15); }
    .theme-toggle .label-state { font-size: 11px; margin-left: 4px; opacity: 0.85; }
    /*endregion Toggle tema */

/*endregion LAYOUT GENERALE */

/*region LOGIN */
body.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--bg);
}

body.login #wrapper {
    margin: 0;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

body.login .form-signin {
    width: 100%;
    padding: 15px;
}

body.login .form-signin .form-control {
    padding: 10px;
    font-size: 16px;
    margin-bottom: 10px;
}

/* Dentro input-group (es. toggle password) il margine sull'input
   sfalsa l'altezza del bottone affiancato: lo spazio sotto lo da' il wrapper .mb-3 */
body.login .form-signin .input-group .form-control {
    margin-bottom: 0;
}

body.login .form-signin .btn-module {
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    font-size: 16px;
}

body.login .login-error {
    color: #dc3545;
    margin-top: 10px;
    font-size: 14px;
}
/*endregion LOGIN */

/*region SETUP */
body.setup #wrapper {
    max-width: 600px;
}

body.setup #confirmation {
    text-align: center;
}

body.setup #confcontent {
    text-align: left;
    margin: 20px 0;
}

/* Elementi pagine diagnostica/setup - adattamento tema chiaro/scuro */
body.setup table { color: var(--text); border-collapse: collapse; }
body.setup th { background: var(--module-color-light); color: var(--text); }
body.setup th, body.setup td { border-color: var(--border) !important; }
body.setup textarea,
body.setup input[type="text"],
body.setup input[type="number"],
body.setup select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
body.setup code { color: var(--accent); }
/*endregion SETUP */

/*region RESPONSIVE */
@media (max-width: 767px) {
    #wrapper {
        margin: 70px 10px 20px 10px;
        padding: 15px;
    }
}
/*endregion RESPONSIVE */

/*region ALBERO PAYLOAD (.dry-*) - condiviso da analisi-candidati, vista accordion e gestione oggetto.
   Prima era duplicato nei <style> delle singole pagine: centralizzato qui per non divergere. */
.dry-tree { padding-left: .7rem; font-size: 12px; }
.dry-node { display: flex; flex-wrap: wrap; gap: .1rem .75rem; padding: .15rem 0; align-items: baseline; }
.dry-node > .dry-tree { flex-basis: 100%; margin-top: .15rem; }
.dry-key { flex: 0 0 200px; max-width: 200px; font-weight: 600; font-size: 12px; color: var(--bs-primary); }
.dry-val { flex: 1 1 auto; min-width: 0; color: var(--bs-body-color); word-break: break-word; }
.dry-imgtable { border-collapse: collapse; margin: .15rem 0; width: 100%; }
.dry-imgtable td { vertical-align: top; padding: 0 .8rem .25rem 0; }
.dry-imgcell { width: 1%; white-space: nowrap; }
.dry-imgdata { width: 100%; }
.dry-imgtable img { max-width: 140px; max-height: 140px; border-radius: 6px; border: 1px solid var(--bs-border-color); }
.dry-imgacc { flex: 1 1 auto; min-width: 0; }
.dry-imgacc-btn { font-size: 12px; --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .5rem; }
.dry-imgacc-body { margin-top: .3rem; }
.dry-html-code { max-height: 220px; overflow: auto; margin: 0; font-size: .78rem; white-space: pre-wrap; }
.dry-html-view { max-height: 320px; overflow: auto; }
/*endregion ALBERO PAYLOAD */

/*region QUADRATINI DI STATO (.tdh-sq) - riepilogo POI collegati, condiviso lista accordion + gestione oggetto */
.tdh-sq { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px;
          border-radius: .25rem; color: #fff; font-weight: 700; font-size: .78rem; padding: 0 .3rem; line-height: 1; }
.tdh-sq-group { display: inline-flex; gap: 2px; flex-shrink: 0; }
/*endregion QUADRATINI DI STATO */