/* ==========================================================================
   80 — Pagine fuori dal pannello, tema scuro
   login.php, registrazione.php, forgot_password.php (schermate Porto
   .body-sign), onboarding/* (body.cu-onb-body, css/onboarding.css) e la
   landing dell'invito Referral-landing/ (main.card, stile inline).
   Queste pagine non usano header_script.php: includono theme_head.php a
   mano in fondo al <head>.
   ========================================================================== */

/* ==========================================================================
   Accesso: login, registrazione a codice, recupero password
   ========================================================================== */

/* Sfondo: il gradiente teal di theme.css diventa un bagliore brand su fondo
   scuro (dark-theme.css lo azzera su html/body). */
html[data-theme="dark"] body:has(> section.body-sign) {
    background:
        radial-gradient(1100px 620px at 100% 0%, rgba(39, 163, 140, .20), transparent 62%),
        radial-gradient(900px 520px at 0% 100%, rgba(39, 163, 140, .10), transparent 60%),
        var(--cu-bg);
    background-attachment: fixed;
}

/* Linguetta del titolo ("Accedi o registrati") e bordo superiore della card */
html[data-theme="dark"] .body-sign .card-sign .card-title-sign .title {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme="dark"] .body-sign .card-sign .card-title-sign .title i {
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .body-sign .card-sign .card-body {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-top: 5px solid var(--cu-surface-3);
    box-shadow: var(--cu-shadow-lg);
    color: var(--cu-text-2);
}

/* Campi: theme.css impone .form-control { background-color: #FFF !important } */
html[data-theme="dark"] .body-sign .form-control {
    background-color: var(--cu-surface-2) !important;
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .body-sign .form-control:focus {
    border-color: var(--cu-primary);
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] .body-sign .form-control::placeholder {
    color: var(--cu-text-3);
}

/* Bottone brand: in chiaro l'hover diventa bianco, sul fondo scuro resta scuro */
html[data-theme="dark"] .body-sign .btn-collab {
    background-color: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(39, 163, 140, .55);
}

html[data-theme="dark"] .body-sign .btn-collab:hover,
html[data-theme="dark"] .body-sign .btn-collab:focus {
    background-color: var(--cu-primary-soft-2);
    border-color: var(--cu-primary-hi);
    color: var(--cu-primary-hi);
    box-shadow: none;
}

/* Link: in chiaro sono neri (style="color: black", .btn-link-plain) o #CCC
   (theme.css); sul fondo scuro testo chiaro, teal all'hover */
html[data-theme="dark"] .body-sign .card-body a:not(.apple-signin-btn),
html[data-theme="dark"] .body-sign .btn-link-plain {
    color: var(--cu-text) !important;
}

html[data-theme="dark"] .body-sign .card-body a:not(.apple-signin-btn):hover,
html[data-theme="dark"] .body-sign .btn-link-plain:hover {
    color: var(--cu-primary-hi) !important;
}

/* Link a privacy e termini nelle spunte della registrazione */
html[data-theme="dark"] .body-sign .card-body .signup-check a {
    color: var(--cu-primary-hi) !important;
}

html[data-theme="dark"] .body-sign .card-body .signup-check a:hover {
    color: #6fdcc3 !important;
}

/* Testi: theme.css dà #777 a ogni <p>, gli stili inline #555 alle note e
   teal agli avvisi */
html[data-theme="dark"] .body-sign .card-body p,
html[data-theme="dark"] .body-sign .card-body .reset-note,
html[data-theme="dark"] .body-sign .card-body .signup-note,
html[data-theme="dark"] .body-sign .card-body .signup-check {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .body-sign .card-body .reset-note b,
html[data-theme="dark"] .body-sign .card-body .signup-note b {
    color: var(--cu-text);
}

html[data-theme="dark"] .body-sign .card-body p.reset-notice,
html[data-theme="dark"] .body-sign .card-body p.signup-notice {
    color: var(--cu-primary-hi);
}

/* Messaggio flash / errore sopra il form */
html[data-theme="dark"] .body-sign label.error {
    color: var(--cu-danger);
}

/* Accedi con Apple: su fondo scuro la variante bianca (linee guida Apple) */
html[data-theme="dark"] .body-sign .apple-signin-btn {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .body-sign .apple-signin-btn:hover {
    color: #000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}

/* Pulsante Google (iframe GSI, tema "outline" bianco): solo l'ombra */
html[data-theme="dark"] .body-sign .g_id_signin > div {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* Copyright sotto la card */
html[data-theme="dark"] .body-sign .center-sign > .text-muted {
    color: var(--cu-text-3) !important;
}

/* ==========================================================================
   Onboarding (onboarding/*.php, css/onboarding.css)
   Solo body.cu-onb-body: le stesse classi cu-onb-* in dati_azienda.php
   (dentro il pannello) appartengono all'area account.
   ========================================================================== */
html[data-theme="dark"] body.cu-onb-body {
    background: var(--cu-bg);
    color: var(--cu-text-2);
}

/* Logo: la versione scura del brand ha la scritta nera, si passa alla
   "reverse" (teal + bianco) come sfondo del link */
html[data-theme="dark"] .cu-onb-body .cu-onb-logo {
    background: url("../../img/brand/collaborup-logo-reverse.png") center top / auto 64px no-repeat;
}

html[data-theme="dark"] .cu-onb-body .cu-onb-logo img {
    visibility: hidden;
}

html[data-theme="dark"] .cu-onb-body .cu-onb-card {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    box-shadow: var(--cu-shadow-lg);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-footnote,
html[data-theme="dark"] .cu-onb-body .cu-onb-footnote a {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-footnote a:hover {
    color: var(--cu-primary-hi);
}

/* Progress e "Torna indietro" */
html[data-theme="dark"] .cu-onb-body .cu-onb-progress {
    background: var(--cu-surface-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-steplabel {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-back {
    color: var(--cu-text);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-back:hover {
    color: var(--cu-primary-hi);
}

/* Testi */
html[data-theme="dark"] .cu-onb-body .cu-onb-title {
    color: var(--cu-text);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-sub,
html[data-theme="dark"] .cu-onb-body .cu-onb-hint {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-sub strong {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-section-title {
    color: var(--cu-primary-hi);
}

/* Campi: il contenitore .cu-onb-control fa da input, l'input dentro resta
   trasparente (dark-theme.css colora tutti gli input e il loro focus) */
html[data-theme="dark"] .cu-onb-body .cu-onb-field > label {
    color: var(--cu-text);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control {
    background: var(--cu-surface-2);
    border-color: var(--cu-border-2);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control > i {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control input,
html[data-theme="dark"] .cu-onb-body .cu-onb-control input:focus,
html[data-theme="dark"] .cu-onb-body .cu-onb-control select,
html[data-theme="dark"] .cu-onb-body .cu-onb-control select:focus {
    background: transparent;
    color: var(--cu-text);
    box-shadow: none;
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control input::placeholder {
    color: var(--cu-text-4);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control input:disabled,
html[data-theme="dark"] .cu-onb-body .cu-onb-control input[readonly] {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control.cu-onb-select::after {
    border-color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control:focus-within {
    background: var(--cu-surface-2);
    border-color: var(--cu-primary);
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-control:focus-within > i {
    color: var(--cu-primary-hi);
}

/* Campo bloccato (email verificata) */
html[data-theme="dark"] .cu-onb-body .cu-onb-control.cu-onb-locked {
    background: var(--cu-surface);
    border-color: var(--cu-border);
}

/* Autocompletamento del browser dentro il contenitore */
html[data-theme="dark"] .cu-onb-body .cu-onb-control input:-webkit-autofill {
    -webkit-text-fill-color: var(--cu-text);
    -webkit-box-shadow: 0 0 0 1000px var(--cu-surface-2) inset;
}

/* Errori di validazione (js/onboarding.js) */
html[data-theme="dark"] .cu-onb-body .cu-onb-error {
    color: var(--cu-danger);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-field.cu-onb-invalid .cu-onb-control {
    background: var(--cu-surface-2);
    border-color: var(--cu-danger);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-alert {
    background: var(--cu-danger-soft);
    border-color: rgba(240, 108, 108, .3);
    color: #f6a8a8;
}

html[data-theme="dark"] .cu-onb-body .cu-onb-alert.cu-onb-alert-info {
    background: var(--cu-primary-soft);
    border-color: rgba(60, 196, 166, .3);
    color: var(--cu-primary-hi);
}

/* CTA */
html[data-theme="dark"] .cu-onb-body .cu-onb-cta:hover {
    background: #2fb79d;
    box-shadow: 0 6px 18px -4px rgba(39, 163, 140, .45);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-cta:focus-visible {
    outline: 0;
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-skip {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-skip:hover {
    color: var(--cu-primary-hi);
}

/* Schermata finale (done.php) */
html[data-theme="dark"] .cu-onb-body .cu-onb-done-icon {
    background: var(--cu-primary-soft);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-recap {
    background: var(--cu-surface-2);
    border-color: var(--cu-border);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-recap-item + .cu-onb-recap-item {
    border-top-color: var(--cu-border);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-recap-item dt {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .cu-onb-recap-item dd {
    color: var(--cu-text);
}

/* Suggerimenti Google Places sotto "Via / Indirizzo" (Step 1) */
html[data-theme="dark"] .cu-onb-body .pac-container {
    background-color: var(--cu-surface-2);
    border: 1px solid var(--cu-border-2);
    border-top: 0;
    box-shadow: var(--cu-shadow);
}

html[data-theme="dark"] .cu-onb-body .pac-item {
    border-top-color: var(--cu-border);
    color: var(--cu-text-3);
}

html[data-theme="dark"] .cu-onb-body .pac-item:hover,
html[data-theme="dark"] .cu-onb-body .pac-item-selected {
    background-color: var(--cu-surface-3);
}

html[data-theme="dark"] .cu-onb-body .pac-item-query {
    color: var(--cu-text);
}

html[data-theme="dark"] .cu-onb-body .pac-matched {
    color: var(--cu-primary-hi);
}

/* ==========================================================================
   Landing dell'invito (Referral-landing/index.php)
   La pagina ha già una sua palette per prefers-color-scheme: dark; qui si
   riapplica la stessa con il tema scelto nel pannello e si annullano le
   regole generiche di dark-theme.css (.card trasparente, p ereditato).
   ========================================================================== */
html[data-theme="dark"] body:has(> main.card) {
    background: #101917;
    color: #f2f7f6;
}

html[data-theme="dark"] body > main.card {
    --testo: #f2f7f6;
    --grigio: #9bb0ac;
    --bordo: #29403c;
    --sfondo: #101917;
    --card: #182421;
    background: var(--card);
    border-color: var(--bordo);
    color: var(--testo);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] body > main.card h1 {
    color: var(--testo);
}

html[data-theme="dark"] body > main.card p.sub,
html[data-theme="dark"] body > main.card .etichetta,
html[data-theme="dark"] body > main.card .passi {
    color: var(--grigio);
}

html[data-theme="dark"] body > main.card .codice {
    background: rgba(39, 163, 140, .12);
    color: var(--testo);
}

html[data-theme="dark"] body > main.card .btn-primario {
    background: var(--verde);
    color: #fff;
}

html[data-theme="dark"] body > main.card .btn-secondario,
html[data-theme="dark"] body > main.card .stores a {
    background: transparent;
    border-color: var(--bordo);
    color: var(--testo);
}

html[data-theme="dark"] body > main.card .btn-secondario:hover,
html[data-theme="dark"] body > main.card .stores a:hover {
    border-color: var(--cu-primary-hi);
    color: var(--cu-primary-hi);
}