/* ============================================================
   TEMA "LUSTRO" v2 — chiaro + scuro, leggero (NIENTE backdrop-filter)
   Effetto "vetro" simulato con gradienti/ombre -> nessun lag.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- palette SCURO ---------- */
html[data-theme="dark"] {
    --primary-color: #818cf8;
    --primary-dark: #a5b4fc;
    --secondary-color: #f472b6;
    --background-color: #080b16;
    --text-color: rgba(233,236,247,.72);
    --heading-color: #f5f7ff;
    --container-bg: #0f1424;
    --border-color: rgba(255,255,255,.10);
    --shadow-color: rgba(129,140,248,.30);
    --error-color: #fb7185;
    --t-card: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    --t-panel: rgba(255,255,255,.065);
    --t-panel-border: rgba(255,255,255,.16);
    --t-input: rgba(255,255,255,.045);
    --t-input-focus: rgba(129,140,248,.10);
    --t-readonly: rgba(255,255,255,.025);
    --t-hover: rgba(255,255,255,.07);
    --t-edge: inset 0 1px 0 rgba(255,255,255,.07);
    --t-card-shadow: 0 28px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
    --t-dropdown-bg: #141a2c;
    --t-grad-text: linear-gradient(120deg,#fff 0%,#a5b4fc 50%,#f472b6 100%);
}
/* ---------- palette CHIARO ---------- */
html[data-theme="light"] {
    --primary-color: #06b6d4;
    --primary-dark: #0e7490;
    --secondary-color: #10b981;
    --background-color: #e8f4f3;
    --text-color: #44555a;
    --heading-color: #0f2230;
    --container-bg: #ffffff;
    --border-color: #d9ebec;
    --shadow-color: rgba(6,182,212,.22);
    --error-color: #ef4444;
    --t-card: linear-gradient(180deg, #ffffff, #fbfcff);
    --t-panel: linear-gradient(180deg, #eaf3f4, #dfecee);
    --t-panel-border: #c8dde1;
    --t-input: #ffffff;
    --t-input-focus: #ffffff;
    --t-readonly: #f1f4fb;
    --t-hover: #f1f4fe;
    --t-edge: inset 0 1px 0 #ffffff;
    --t-card-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 50px -18px rgba(6,182,212,.30), 0 10px 24px -12px rgba(17,21,36,.10);
    --t-dropdown-bg: #ffffff;
    --t-grad-text: linear-gradient(120deg,#0891b2,#10b981);
}

/* ---------- Base + sfondo ambient (dipinto una volta, niente lag) ---------- */
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--background-color);
    color: var(--text-color);
    transition: background .35s ease, color .35s ease;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
html[data-theme="dark"] body::before {
    background:
        radial-gradient(circle at 15% 18%, rgba(129,140,248,.32), transparent 52%),
        radial-gradient(circle at 85% 82%, rgba(244,114,182,.24), transparent 52%),
        radial-gradient(circle at 50% 50%, rgba(34,211,238,.13), transparent 62%);
}
html[data-theme="light"] body::before {
    background:
        radial-gradient(circle at 15% 18%, rgba(141,202,255,.55), transparent 52%),
        radial-gradient(circle at 85% 82%, rgba(109,255,158,.45), transparent 52%),
        radial-gradient(circle at 50% 50%, rgba(179,251,255,.50), transparent 62%);
}

/* ---------- Contenitore = card (vetro simulato) ---------- */
.container {
    position: relative;
    background: var(--t-card);
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--t-card-shadow);
    overflow: visible;
}
/* striscia accento a gradiente in cima alla card */
.container::after {
    content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: .9;
}

/* ---------- Header ---------- */
header { border-bottom: 1px solid var(--border-color); }
header h1 {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.03em;
    background: var(--t-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
header p { color: var(--text-color); }
.header-icon { color: var(--primary-color); }

/* ---------- Fieldset = pannello ---------- */
fieldset {
    background: var(--t-panel);
    border: 1px solid var(--t-panel-border);
    border-radius: 16px;
    box-shadow: var(--t-edge), 0 2px 10px rgba(0,0,0,.05);
}
legend {
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    text-transform: uppercase; letter-spacing: .16em; font-size: .8em;
    color: var(--primary-dark);
    padding: 2px 12px; border: 1px solid var(--border-color); border-radius: 100px;
    background: var(--container-bg);
}
label { color: var(--heading-color); font-family: 'DM Sans', sans-serif; font-weight: 600; }

/* ---------- Campi ---------- */
input[type="text"], input[type="date"], select, textarea {
    background: var(--t-input);
    color: var(--heading-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--t-edge);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder, textarea::placeholder { color: var(--text-color); opacity: .55; }
.form-group::before { display: none !important; }   /* via il bordo animato pesante */
.form-group:focus-within input, .form-group:focus-within select, .form-group:focus-within textarea {
    border-color: var(--primary-color);
    background: var(--t-input-focus);
    box-shadow: 0 0 0 4px var(--shadow-color);
    outline: none;
}
input[readonly] { background: var(--t-readonly) !important; color: var(--text-color); font-style: normal; box-shadow: none; }
.form-group:focus-within label { color: var(--primary-dark); }
select option { background: var(--t-dropdown-bg); color: var(--heading-color); }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.55); }

/* ---------- Bottoni (pillole) ---------- */
button { font-family: 'DM Sans', sans-serif; border-radius: 100px; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s; }
#generatePdfBtn, #login-button {
    background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff; border: none; box-shadow: 0 10px 26px -6px var(--shadow-color);
}
#generatePdfBtn:hover, #login-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px var(--shadow-color); }
.button-secondary, #generateIcsBtn { background: var(--t-input); color: var(--heading-color); border: 1px solid var(--border-color); box-shadow: var(--t-edge); }
.button-secondary:hover, #generateIcsBtn:hover { background: var(--t-hover); transform: translateY(-1px); }
#resetButton { background: var(--t-input); color: var(--text-color); border: 1px solid var(--border-color); }
.remove-interlocutore-btn { background: var(--error-color); }
.phrase-btn, .geolocate-btn { color: var(--heading-color); }

/* ---------- Tendine / autocomplete ---------- */
#autocompleteResults, #clientAutocompleteResults, .phrase-results, .agent-results {
    background: var(--t-dropdown-bg); border-color: var(--border-color);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
}
.autocomplete-item { color: var(--heading-color); }
.autocomplete-item:hover, .autocomplete-item.active, .phrase-item:hover { background: var(--t-hover); }
.autocomplete-item strong, .phrase-group-title { color: var(--primary-dark); }
.dept-hint, .required-note, .agent-zona { color: var(--text-color); opacity: .7; }
.phrase-group-title { background: var(--t-panel); }

/* ---------- Interlocutori / sezioni ---------- */
.interlocutore-group { border: 1px dashed var(--border-color); background: var(--t-panel); border-radius: 12px; }
.reminder-section { background: var(--t-panel); border: 1px solid var(--border-color); border-radius: 12px; }
.slider { background-color: var(--border-color); }
input:checked + .slider { background-color: var(--primary-color); }

/* ---------- Login ---------- */
#login-overlay { background: rgba(8,11,22,.78); }
.login-box { background: var(--container-bg); border: 1px solid var(--border-color); border-radius: 20px; box-shadow: var(--t-card-shadow); }
.login-box h2 { font-family: 'Space Grotesk', sans-serif; color: var(--heading-color); }
.login-box p { color: var(--text-color); }
#password-input { background: var(--t-input); color: var(--heading-color); border: 1px solid var(--border-color); border-radius: 12px; }

/* ---------- Cambio tema: link-testo discreto in fondo alla pagina ---------- */
.theme-switch { text-align: center; padding: 24px 16px 40px; }
.theme-link {
    display: inline-block; min-height: 0;
    background: none; border: none; cursor: pointer; padding: 6px 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 400; letter-spacing: .08em;
    color: var(--text-color); opacity: .6; border-radius: 8px;
    transition: opacity .2s, color .2s;
}
.theme-link:hover { opacity: 1; color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .theme-link .ts-dark { display: inline; }
html[data-theme="dark"] .theme-link .ts-light { display: none; }
html[data-theme="light"] .theme-link .ts-dark { display: none; }
html[data-theme="light"] .theme-link .ts-light { display: inline; }