/* ============================================================
   TEMA "LUSTRO" (adattato a Sample Order) — chiaro + scuro
   Layer di OVERRIDE sopra style.css. Niente backdrop-filter.
   ============================================================ */
@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,.74);
    --heading-color: #f5f7ff;
    --container-bg: #0f1424;
    --border-color: rgba(255,255,255,.12);
    --shadow-color: rgba(129,140,248,.30);
    --error-color: #fb7185; --danger-color: #fb7185; --danger-hover: #f43f5e;
    --t-card: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    --t-panel: rgba(255,255,255,.05);
    --t-panel-2: rgba(255,255,255,.08);
    --t-panel-border: rgba(255,255,255,.16);
    --t-input: rgba(255,255,255,.05);
    --t-input-focus: rgba(129,140,248,.10);
    --t-hover: rgba(255,255,255,.09);
    --t-selected: rgba(129,140,248,.22);
    --t-edge: inset 0 1px 0 rgba(255,255,255,.06);
    --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 (verde/cyan) ---------- */
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: #9cc2c9;
    --shadow-color: rgba(6,182,212,.22);
    --error-color: #ef4444; --danger-color: #ef4444; --danger-hover: #dc2626;
    --t-card: linear-gradient(180deg, #ffffff, #fbfdfd);
    --t-panel: linear-gradient(180deg, #eaf3f4, #dfecee);
    --t-panel-2: #dcebed;
    --t-panel-border: #a6c9cf;
    --t-input: #ffffff;
    --t-input-focus: #ffffff;
    --t-hover: #eef6f6;
    --t-selected: rgba(6,182,212,.15);
    --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(15,34,48,.10);
    --t-dropdown-bg: #ffffff;
    --t-grad-text: linear-gradient(120deg,#0891b2,#10b981);
}

/* ---------- Base + sfondo ambient ---------- */
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%);
}

/* ---------- Card principale ---------- */
.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);
}
.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) !important; }
.header-info 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;
}
.info-item label { color: var(--text-color); font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.info-item span { color: var(--heading-color); }
.header-map { background-color: var(--t-panel-2) !important; border-color: var(--border-color); }

/* ---------- Sezioni ---------- */
.form-section { border-bottom: 1px solid var(--border-color) !important; }
.form-section h2 {
    font-family: 'Space Grotesk', sans-serif; color: var(--heading-color);
    border-left: 4px solid var(--secondary-color);
}
label { color: var(--heading-color); font-family: 'DM Sans', sans-serif; font-weight: 600; }

/* ---------- Campi ---------- */
.styled-select, .input-group input, .input-group select, .input-group textarea, input, select, textarea {
    background: var(--t-input) !important; color: var(--heading-color) !important;
    border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--t-edge);
}
input::placeholder, textarea::placeholder { color: var(--text-color); opacity: .55; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus, .styled-select:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--shadow-color); outline: none;
}
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 ---------- */
button { font-family: 'DM Sans', sans-serif; border-radius: 100px; }
#generatePdfBtn, #login-button {
    background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff; box-shadow: 0 10px 26px -6px var(--shadow-color);
}
#generatePdfBtn:hover, #login-button:hover { transform: translateY(-2px); }
.button-add { background-color: var(--secondary-color) !important; color: #fff; }
.button-add:hover:not(:disabled) { filter: brightness(1.08); }
.button-secondary { background-color: var(--t-panel-2) !important; color: var(--heading-color) !important; border: 1px solid var(--border-color); }
.button-secondary:hover { background-color: var(--t-hover) !important; }
#resetButton { background: var(--t-input); color: var(--text-color); border: 1px solid var(--border-color); }
.geolocate-btn { background: var(--t-panel-2) !important; color: var(--heading-color) !important; }

/* ---------- Tendine / suggerimenti ---------- */
.suggestions-box, .agent-results {
    background: var(--t-dropdown-bg) !important; border-color: var(--border-color);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
}
.suggestion-item { color: var(--heading-color); }
.suggestion-item:hover { background-color: var(--t-hover) !important; }
.suggestion-item strong { color: var(--primary-dark); }
.client-hint, .agent-zona { color: var(--text-color); opacity: .7; }
.agent-trigger { background: var(--t-input) !important; color: var(--heading-color); }
.agent-trigger.placeholder { color: var(--text-color); opacity: .7; }

/* ---------- Blocchi merchandising / sfusi / builder / bolle ---------- */
.controls-box { background: var(--t-panel) !important; border: 1px solid var(--border-color); border-radius: 12px; }
.merchandising-block, .sfusi-block, .custom-panel-block { background: var(--t-panel) !important; border: 1px solid var(--t-panel-border) !important; }
.merchandising-block-header, .sfusi-block-header { background: var(--t-panel-2) !important; border-bottom: 1px solid var(--border-color) !important; }
.merchandising-block-header h3, .sfusi-block-header h3 { color: var(--primary-dark); }
.builder-box { background: var(--t-panel) !important; border: 1px solid var(--t-panel-border) !important; border-radius: 12px; }
.builder-box h3 { color: var(--primary-dark); }
.item-bubble { background-color: var(--t-input) !important; color: var(--heading-color) !important; border: 1px solid var(--border-color); }
.item-bubble:hover { background-color: var(--t-hover) !important; }
/* Bolla selezionata = colore secondario del tema: magenta nel dark, verde smeraldo nel light */
.item-bubble.selected { background: var(--secondary-color) !important; border-color: var(--secondary-color) !important; color: #fff !important; font-weight: 600; box-shadow: 0 2px 8px var(--shadow-color); }
.item-bubble.selected:hover { filter: brightness(1.08); background: var(--secondary-color) !important; }
/* Riga input quantità / misura (era sfondo chiaro fisso -> illeggibile in scuro) */
.item-inputs { background: var(--t-panel-2) !important; }
.item-inputs label { color: var(--text-color) !important; }
.item-inputs input, .item-inputs select { background: var(--t-dropdown-bg) !important; color: var(--heading-color) !important; border-color: var(--border-color) !important; }
/* Campi a sfondo bianco fisso eventuali altrove */
input, select, textarea { color: var(--heading-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); }
#password-input { background: var(--t-input); color: var(--heading-color); border: 1px solid var(--border-color); border-radius: 12px; }

/* ---------- Cambio tema: link-testo in fondo ---------- */
.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; }

/* ---------- Più contrasto in modalità chiara: campi e clic ben distinguibili ---------- */
html[data-theme="light"] .styled-select,
html[data-theme="light"] .input-group input,
html[data-theme="light"] .input-group select,
html[data-theme="light"] .input-group textarea,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .agent-trigger,
html[data-theme="light"] .item-inputs input,
html[data-theme="light"] .item-inputs select {
    border: 1.5px solid #6fa3ad !important;       /* bordo campi più marcato */
    background: #ffffff !important;
}
html[data-theme="light"] .item-bubble:not(.selected),
html[data-theme="light"] .button-secondary,
html[data-theme="light"] #resetButton,
html[data-theme="light"] .geolocate-btn {
    border: 1.5px solid #7faab4 !important;       /* elementi cliccabili ben bordati */
}
html[data-theme="light"] .merchandising-block,
html[data-theme="light"] .sfusi-block,
html[data-theme="light"] .custom-panel-block,
html[data-theme="light"] .controls-box,
html[data-theme="light"] .builder-box { border-color: #93bdc4 !important; }

/* ---------- Referenze multiple del custom panel (chip) ---------- */
.cp-refs-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 28px; }
.cp-refs-empty { color: var(--text-color); opacity: .6; font-size: .85rem; }
.cp-ref-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--t-selected); color: var(--heading-color);
    border: 1px solid var(--primary-color); border-radius: 100px;
    padding: 4px 10px; font-size: .85rem; font-weight: 500;
}
.cp-ref-remove {
    border: none; background: none; cursor: pointer; padding: 0; line-height: 1;
    font-size: 1.1rem; color: var(--secondary-color); opacity: .8; min-height: 0;
}
.cp-ref-remove:hover { opacity: 1; }