/* ==========================================================================
   NelSenso.Net - tema scuro + pulsante di cambio tema
   Caricato da MasterPageTailwind.master DOPO res/tailwind.min.css.

   Come funziona
   - Il tema scuro e' attivo quando <html> ha la classe "dark" (messa dallo
     script inline in testa al master, che legge localStorage["ns-theme"]).
   - tailwind.min.css e' purgato e compilato con darkMode:false, quindi le
     varianti dark: non esistono: qui si ridefiniscono, sotto html.dark, le
     utility di colore effettivamente presenti nel bundle + i colori fissi
     dei blocchi <style> dei singoli controlli (uc/*.ascx, Default, news).
   - Se aggiungi una nuova utility di colore chiara (bg-*-50, text-*-700...)
     aggiungi qui la riga corrispondente.
   - I file statici hanno cache lunghissima (web.config clientCache): dopo
     ogni modifica incrementa il ?v= nel <link> del master.
   ========================================================================== */

/* ---------- Pulsante cambio tema (valido in entrambi i temi) ---------- */
.ns-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    border: 1px solid #e5e7eb; border-radius: 9999px;
    background: transparent; color: #4b5563; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ns-theme-toggle:hover { background: #f3f4f6; color: #4338ca; }
.ns-theme-toggle:focus { outline: none; }
.ns-theme-toggle:focus-visible { box-shadow: 0 0 0 2px #a5b4fc; }
.ns-theme-toggle svg { width: 1.25rem; height: 1.25rem; }
.ns-theme-toggle .ns-theme-sun { display: none; }
html.dark .ns-theme-toggle { border-color: #475569; color: #fcd34d; }
html.dark .ns-theme-toggle:hover { background: #334155; color: #fde68a; }
html.dark .ns-theme-toggle .ns-theme-sun { display: block; }
html.dark .ns-theme-toggle .ns-theme-moon { display: none; }

/* ---------- Base ---------- */
html.dark { color-scheme: dark; }   /* scrollbar, checkbox, range, popup dei select nativi */
html.dark body { background-color: #0f172a; color: #e2e8f0; }

/* Bordo di default (Tailwind: *{border-color:gray-200}). :where() tiene la
   specificita' a zero, cosi' le utility border-* continuano a vincere. */
:where(html.dark) *, :where(html.dark) ::before, :where(html.dark) ::after { border-color: #334155; }

/* ---------- Superfici ---------- */
html.dark .bg-white    { background-color: #1e293b; }
html.dark .bg-gray-50  { background-color: #172033; }
html.dark .bg-gray-100 { background-color: #273449; }
html.dark .bg-gray-200 { background-color: #334155; }

/* Tinte chiare -> velature del colore sulla superficie scura */
html.dark .bg-indigo-50  { background-color: rgba(99,102,241,.14); }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.24); }
html.dark .bg-blue-50    { background-color: rgba(59,130,246,.14); }
html.dark .bg-green-50   { background-color: rgba(16,185,129,.14); }
html.dark .bg-purple-50  { background-color: rgba(139,92,246,.14); }
html.dark .bg-red-50     { background-color: rgba(239,68,68,.14); }
html.dark .bg-yellow-50  { background-color: rgba(245,158,11,.14); }
html.dark .bg-yellow-100 { background-color: rgba(245,158,11,.24); }

/* Gradienti chiari (i gradienti saturi indigo/blue/purple restano invariati) */
html.dark .from-white     { --tw-gradient-from: #1e293b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30,41,59,0)); }
html.dark .from-gray-50   { --tw-gradient-from: #172033; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(23,32,51,0)); }
html.dark .from-indigo-50 { --tw-gradient-from: #232a52; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(35,42,82,0)); }
html.dark .from-green-50  { --tw-gradient-from: #173a3a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(23,58,58,0)); }
html.dark .from-yellow-50 { --tw-gradient-from: #3a3220; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(58,50,32,0)); }
html.dark .from-red-50    { --tw-gradient-from: #3d2231; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(61,34,49,0)); }
html.dark .to-white       { --tw-gradient-to: #1e293b; }
html.dark .to-green-100   { --tw-gradient-to: #14463f; }
html.dark .to-yellow-100  { --tw-gradient-to: #4a3c1a; }

/* ---------- Testo ---------- */
html.dark .text-gray-900,
html.dark .text-gray-800 { color: #f1f5f9; }
html.dark .text-gray-700 { color: #e2e8f0; }
html.dark .text-gray-600 { color: #cbd5e1; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #8291a7; }
html.dark .text-gray-300 { color: #64748b; }

html.dark .text-indigo-600, html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #c7d2fe; }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-green-600, html.dark .text-green-700,
html.dark .text-green-800, html.dark .text-green-900 { color: #6ee7b7; }
html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800 { color: #fca5a5; }
html.dark .text-yellow-600, html.dark .text-yellow-700,
html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #fcd34d; }
html.dark .text-purple-600, html.dark .text-purple-700 { color: #c4b5fd; }
html.dark .text-pink-600 { color: #f9a8d4; }

/* Testo scuro su fondi che restano saturi/chiari: non va schiarito */
html.dark .bg-yellow-500.text-gray-900,
html.dark .bg-yellow-500.text-gray-800 { color: #1f2937; }

/* ---------- Bordi ---------- */
html.dark .border-gray-100 { border-color: #263347; }
html.dark .border-gray-200 { border-color: #334155; }
html.dark .border-gray-300 { border-color: #475569; }
html.dark .border-indigo-100 { border-color: rgba(129,140,248,.25); }
html.dark .border-indigo-200 { border-color: rgba(129,140,248,.35); }
html.dark .border-indigo-300 { border-color: rgba(129,140,248,.50); }
html.dark .border-blue-200   { border-color: rgba(96,165,250,.35); }
html.dark .border-green-200  { border-color: rgba(52,211,153,.35); }
html.dark .border-purple-200 { border-color: rgba(167,139,250,.35); }
html.dark .border-red-200    { border-color: rgba(248,113,113,.35); }
html.dark .border-yellow-200 { border-color: rgba(251,191,36,.35); }
html.dark .border-yellow-300 { border-color: rgba(251,191,36,.50); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #263347; }

/* ---------- Hover / focus ---------- */
html.dark .hover\:bg-gray-50:hover  { background-color: #273449; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155; }
html.dark .hover\:bg-gray-200:hover { background-color: #3b4a61; }
html.dark .hover\:bg-gray-300:hover { background-color: #475569; }
html.dark .hover\:bg-red-50:hover   { background-color: rgba(239,68,68,.18); }
html.dark .hover\:bg-blue-50:hover  { background-color: rgba(59,130,246,.18); }
html.dark .hover\:text-gray-700:hover   { color: #f8fafc; }
html.dark .hover\:text-blue-600:hover,
html.dark .hover\:text-blue-700:hover   { color: #bfdbfe; }
html.dark .hover\:text-indigo-700:hover { color: #c7d2fe; }
html.dark .hover\:text-red-600:hover    { color: #fecaca; }
html.dark .hover\:text-yellow-800:hover { color: #fde68a; }
html.dark *, html.dark ::before, html.dark ::after { --tw-ring-offset-color: #0f172a; }

/* ---------- Campi dei form ---------- */
html.dark textarea,
html.dark select,
html.dark input:not([type]),
html.dark input[type="text"],
html.dark input[type="url"],
html.dark input[type="email"],
html.dark input[type="search"],
html.dark input[type="number"],
html.dark input[type="password"] {
    background-color: #0f172a;
    color: #f1f5f9;
    border-color: #475569;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }
html.dark select option { background-color: #1e293b; color: #f1f5f9; }

/* ---------- Tabelle dei risultati (stile nel master) ---------- */
html.dark .results-table thead th { background-color: #172033; color: #e2e8f0; border-bottom-color: #334155; }
html.dark .results-table tbody td,
html.dark .results-table tbody th { color: #e2e8f0; border-top-color: #334155; }
html.dark .results-table tbody th[scope="row"] { color: #94a3b8; }
html.dark .results-table tbody tr:hover > td,
html.dark .results-table tbody tr:hover > th { background-color: #273449; }

/* ---------- Modal dei risultati (uc/UC_Summazer, Irezer, Clustezer, ...) ---------- */
html.dark #ResultsModalCard { background-color: #1e293b; box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); }
html.dark #ResultsModalCard > div:last-child { background-color: rgba(30,41,59,.92); border-top-color: #334155; }
html.dark #ResultsModalCard #DivMessage { background-color: rgba(16,185,129,.15); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(52,211,153,.4); }

/* ---------- Five W's (uc/UC_FiveWs) ---------- */
html.dark .fivews-card { background-color: rgba(30,41,59,.95) !important; }
html.dark .fivews-card:hover { background-color: #1e293b !important; }
html.dark [id$="divWhat"]  > div > div:last-child > div:first-child { color: #c4b5fd; }
html.dark [id$="divWho"]   > div > div:last-child > div:first-child { color: #93c5fd; }
html.dark [id$="divWhere"] > div > div:last-child > div:first-child { color: #6ee7b7; }
html.dark [id$="divWhen"]  > div > div:last-child > div:first-child { color: #fcd34d; }
html.dark [id$="divHow"]   > div > div:last-child > div:first-child { color: #f0abfc; }
html.dark [id$="divWhat"]  > div > div:last-child > div:last-child,
html.dark [id$="divWho"]   > div > div:last-child > div:last-child,
html.dark [id$="divWhere"] > div > div:last-child > div:last-child,
html.dark [id$="divWhen"]  > div > div:last-child > div:last-child,
html.dark [id$="divHow"]   > div > div:last-child > div:last-child,
html.dark [id$="divWhy"] h5 { color: #f1f5f9; }
html.dark [id$="divWhy"] [id$="litWhy"] { color: #fda4af !important; }

/* ---------- Titletizer (uc/UC_Titletizer) ---------- */
html.dark .tt-analysis { color: #cbd5e1; }
html.dark .tt-sec, html.dark .tt-tile-label { color: #94a3b8; }
html.dark .tt-card { background: #172033; border-color: #334155; border-left-color: #818cf8; }
html.dark .tt-card-type { color: #a5b4fc; }
html.dark .tt-card-text, html.dark .tt-tile-value { color: #f1f5f9; }
html.dark .tt-copy { background: rgba(99,102,241,.2); color: #c7d2fe; }
html.dark .tt-copy:hover { background: rgba(99,102,241,.35); }
html.dark .tt-copy.is-done { background: rgba(16,185,129,.25); color: #6ee7b7; }
html.dark .tt-tile { background: #172033; border-color: #334155; }
html.dark .tt-tile.tt-pos { background: rgba(16,185,129,.14); border-color: rgba(52,211,153,.4); }
html.dark .tt-tile.tt-pos .tt-tile-value { color: #6ee7b7; }
html.dark .tt-tile.tt-neg { background: rgba(239,68,68,.14); border-color: rgba(248,113,113,.4); }
html.dark .tt-tile.tt-neg .tt-tile-value { color: #fca5a5; }
html.dark .tt-tile.tt-neu { background: #273449; border-color: #475569; }

/* ---------- Clustezer: HTML con colori inline generato dal code-behind ---------- */
html.dark #ResultsModalCard [style*="color:#374151"] { color: #e2e8f0 !important; }
html.dark #ResultsModalCard [style*="color:#4b5563"] { color: #cbd5e1 !important; }
html.dark #ResultsModalCard [style*="background:#f9fafb"] { background: #172033 !important; border-color: #334155 !important; }
html.dark #ResultsModalCard [style*="background:#f3f4f6"] { background: #334155 !important; }

/* ---------- Cruscotti SVG (App_Code/JSControls.cs) e Google Charts ---------- */
html.dark svg text[fill="#1e293b"] { fill: #f1f5f9; }
html.dark svg [stroke="#e2e8f0"]   { stroke: #334155; }
/* I Google Charts sono SVG a fondo bianco non tematizzabili via CSS:
   inversione di luminosita' mantenendo le tinte. */
html.dark #litGraph, html.dark #gaussGraph { filter: invert(.9) hue-rotate(180deg); }

/* ---------- Nuvola hashtag (uc/UC_HashtagCloud) e pulsante foto/OCR ---------- */
html.dark .ns-cloud .ns-more,
html.dark #PhotoOcrRow label.nel-photo-btn { background: rgba(99,102,241,.16); border-color: rgba(129,140,248,.4); color: #a5b4fc; }
html.dark .ns-cloud .ns-more:hover,
html.dark #PhotoOcrRow label.nel-photo-btn:hover { background: rgba(99,102,241,.3); color: #c7d2fe; }
html.dark #PhotoOcrRow .nel-photo-hint { color: #94a3b8; }
html.dark #PhotoOcrStatus { color: #e2e8f0; }

/* ---------- Promptizer ---------- */
html.dark .dropdown-header { color: #cbd5e1; background-color: #273449; }

/* ---------- Stelle di valutazione (uc/UC_FiveStars, UC_RatingViewer) ---------- */
html.dark .star-rating label { color: #475569; }
html.dark .star-rating input[type="radio"]:checked ~ label,
html.dark .star-rating label:hover,
html.dark .star-rating label:hover ~ label { color: #f5b301; }
html.dark .ratings i, html.dark .small-ratings i { color: #475569; }

/* ---------- Home (Default.aspx) ---------- */
html.dark .home-group-title { color: #a5b4fc; }
html.dark #toolsIntroGrid .intro-clamp-toggle { color: #a5b4fc; }

/* ---------- News (news.aspx) ---------- */
html.dark .nws-badge { background: #272e57; color: #c7d2fe; box-shadow: 0 0 0 4px #0f172a; }
html.dark .nws-card { background: #1e293b; border-color: #334155; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
html.dark .nws-card:hover { box-shadow: 0 12px 24px -10px rgba(0,0,0,.6); }
html.dark .nws-msg { color: #e2e8f0; }
html.dark .nws-hashtag { color: #c4b5fd; background: rgba(139,92,246,.16); }
html.dark .nws-page { color: #a5b4fc; background: #1e293b; border-color: #334155; }
html.dark a.nws-page:hover { background: #273449; }
html.dark .nws-page--current { color: #fff; border-color: transparent; }
html.dark .nws-page--gap { background: none; color: #64748b; }
html.dark .nws-pageinfo { color: #94a3b8; }

/* ---------- Contenitori pubblicita' (il contenuto dell'annuncio e' un iframe) ---------- */
/* Wrapper, skeleton e <ins> scuri: finche' l'annuncio non e' caricato (o se non
   riempie lo slot) non resta un riquadro bianco. !important perche' alcuni
   wrapper hanno "background: white" inline. L'interno dell'iframe resta di Google. */
html.dark .adsense-top-wrapper,
html.dark .adsense-content,
html.dark .adsense-skeleton,
html.dark .adv-footer-wrapper,
html.dark .adv-footer-skeleton,
html.dark .adv-block-wrapper,
html.dark .adv-block-skeleton,
html.dark .adv-searchimg-wrapper,
html.dark ins.adsbygoogle { background: #1e293b !important; }
html.dark .adsense-top-wrapper,
html.dark .adv-footer-wrapper { border-radius: 8px; }
html.dark .adv-searchimg-skeleton { background: linear-gradient(90deg, #1e293b 25%, #273449 50%, #1e293b 75%); background-size: 200% 100%; }
html.dark #AdvLabel { color: #94a3b8 !important; }