/* =========================================================
   SEGNA — TEMA CHIARO / SCURO
   ========================================================= */

:root {
  --segna-surface: #FFFDF8;
  --segna-control-bg: #FFFFFF;
  --segna-control-hover: #F5F1E8;
  --segna-media-stage: #EEE9DF;
}

/* ---------------------------------------------------------
   TEMA SCURO
   --------------------------------------------------------- */

html[data-theme="dark"] {
  color-scheme: dark;

  --segna-paper: #11100F;
  --segna-ink: #F7F3EA;
  --segna-red: #FF4B42;
  --segna-red-dark: #FF5A50;
  --segna-muted: #C8C1B7;
  --segna-line: #48443F;
  --segna-control-line: #8B847A;
  --segna-white: #1B1A18;

  --segna-surface: #181715;
  --segna-control-bg: #201F1C;
  --segna-control-hover: #2A2824;
  --segna-media-stage: #292722;

  --territory-bg: #11100F;
  --territory-card: #1B1A18;
  --territory-text: #F7F3EA;
  --territory-muted: #C8C1B7;
  --territory-line: #48443F;
  --territory-red: #FF5A50;
}

html[data-theme="dark"] body {
  background: var(--segna-paper);
  color: var(--segna-ink);
}

/* ---------------------------------------------------------
   LEVETTA HEADER
   --------------------------------------------------------- */

.segna-theme-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: .55rem;
  padding: 0 .65rem;
  border: 1px solid var(--segna-control-line, #8A847A);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  cursor: pointer;
}

.segna-theme-toggle:hover {
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.segna-theme-switch {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.segna-theme-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: currentColor;
  transition: transform .16s ease;
}

html[data-theme="dark"] .segna-theme-switch::after {
  transform: translateX(1rem);
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

html[data-theme="dark"] .segna-install-button {
  border-color: var(--segna-control-line);
  color: var(--segna-ink);
}

html[data-theme="dark"] .segna-install-button:hover,
html[data-theme="dark"] .segna-install-button:focus-visible {
  background: var(--segna-ink);
  color: var(--segna-paper);
}

html[data-theme="dark"]
:where(a, button, input, select, textarea, [tabindex]):focus-visible,
html[data-theme="dark"] .segna-site-brand:focus-visible {
  outline-color: var(--segna-ink);
}

/* ---------------------------------------------------------
   HOME / ARCHIVIO
   --------------------------------------------------------- */

html[data-theme="dark"] .discovery,
html[data-theme="dark"] .nearby-tools,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .empty-state {
  background: var(--segna-surface);
}

html[data-theme="dark"] .nearby-controls select,
html[data-theme="dark"] .territory-grid select {
  border-color: var(--segna-control-line);
  background: var(--segna-control-bg);
  color: var(--segna-ink);
}

html[data-theme="dark"] select option {
  background: var(--segna-control-bg);
  color: var(--segna-ink);
}

/*
 * Le locandine NON vengono invertite.
 * Il loro stage resta neutro/chiaro per non alterare i colori.
 */
html[data-theme="dark"] .card-link img {
  background: #FFFFFF;
}

/* ---------------------------------------------------------
   SCHEDA EVENTO / PROGRAMMA
   --------------------------------------------------------- */

html[data-theme="dark"] .event-hero {
  background: var(--segna-surface);
}

html[data-theme="dark"] .poster {
  background: var(--segna-media-stage);
}

html[data-theme="dark"] .event-action-secondary,
html[data-theme="dark"] .continue-browsing .territory-links a {
  border-color: var(--segna-control-line);
  background: var(--segna-control-bg);
  color: var(--segna-ink);
}

html[data-theme="dark"] .event-action-secondary:hover,
html[data-theme="dark"] .event-action-secondary:focus-visible,
html[data-theme="dark"] .continue-browsing .territory-links a:hover,
html[data-theme="dark"] .continue-browsing .territory-links a:focus-visible {
  background: var(--segna-control-hover);
}

html[data-theme="dark"] .continue-browsing .territory-links .all-events-link {
  border-color: var(--segna-red-dark);
  background: var(--segna-red-dark);
  color: #FFFFFF;
}

html[data-theme="dark"] .event-calendar-options {
  border-color: var(--segna-line);
  background: var(--segna-surface);
}

html[data-theme="dark"] .event-calendar-options a {
  color: var(--segna-ink);
}

html[data-theme="dark"] .event-calendar-options a:hover,
html[data-theme="dark"] .event-calendar-options a:focus-visible {
  background: var(--segna-control-hover);
}

/* ---------------------------------------------------------
   TERRITORI
   --------------------------------------------------------- */

html[data-theme="dark"] .territory-link {
  background: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .territory-link:hover {
  background: rgba(255, 255, 255, .095);
}

html[data-theme="dark"] .territory-empty {
  background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .territory-event-image {
  background: var(--segna-media-stage);
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 560px) {
  .segna-theme-toggle {
    min-height: 40px;
    padding-inline: .55rem;
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .segna-theme-switch::after {
    transition: none;
  }
}

/* =========================================================
   SEGNA — TEMA SCURO
   Pagine legacy / upload / risultato / correzione
   ========================================================= */

html[data-theme="dark"] {
  --ink: #F7F3EA;
  --muted: #C8C1B7;
  --paper: #11100F;
  --card: #1B1A18;
  --green: #FF5A50;
  --lime: #3B3320;
  --line: #48443F;
  --yellow: #332C18;
  --amber: #F0C36A;
  --shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

/* Contenitori principali */
html[data-theme="dark"] .upload-card,
html[data-theme="dark"] .poster-panel,
html[data-theme="dark"] .data-panel,
html[data-theme="dark"] .correction-card,
html[data-theme="dark"] .structure-panel,
html[data-theme="dark"] .event-preview-card,
html[data-theme="dark"] .section-preview-card {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
}

/* Area upload */
html[data-theme="dark"] .dropzone {
  border-color: #777168;
  background: #181715;
}

html[data-theme="dark"] .dropzone:hover {
  border-color: var(--green);
  background: #201D1A;
}

html[data-theme="dark"] .upload-icon {
  background: #3B3320;
  color: #FFD96A !important;
}

/* Campi / pannelli */
html[data-theme="dark"] .field {
  background: var(--card);
}

html[data-theme="dark"] .fields {
  background: var(--line);
}

html[data-theme="dark"] .button.secondary {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
}

/* Form correzione */
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea {
  border-color: #777168;
  background: var(--segna-control-bg);
  color: var(--ink);
}

html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder {
  color: var(--muted);
}

/* Poster: immagine sempre naturale */
html[data-theme="dark"] .poster-panel img {
  background: #FFFFFF;
}

/* Messaggi di stato: leggibili anche su fondo scuro */
html[data-theme="dark"] .success-notice {
  border-color: #4F8A61;
  background: #183322;
  color: #D9F3DF;
}

html[data-theme="dark"] .form-error {
  border-color: #A85B52;
  background: #3A1C19;
  color: #FFDCD7;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .date-warning,
html[data-theme="dark"] .structure-panel.ambiguous,
html[data-theme="dark"] .form-field.confidence-low,
html[data-theme="dark"] .field.confidence-low {
  border-color: #8F7430;
  background: var(--yellow);
  color: #F7E8B5;
}

/* Link e footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] footer a {
  color: var(--muted);
}

html[data-theme="dark"] footer a {
  color: var(--segna-red-dark);
}

/* =========================================================
   SEGNA — TOGGLE MOBILE FIX
   ========================================================= */

@media (max-width: 560px) {

  /* Nav più ordinata */
  .segna-site-nav {
    row-gap: .6rem;
  }

  /* Toggle compatto, spinto a destra */
  .segna-theme-toggle {
    margin-left: auto;
    margin-top: .2rem;
    min-height: auto;
    padding: .35rem;
    gap: 0;
    border-radius: 999px;
  }

  /* Nasconde il testo solo visivamente su mobile */
  .segna-theme-toggle [data-theme-label] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Switch un po' più leggibile */
  .segna-theme-switch {
    width: 2.6rem;
    height: 1.5rem;
  }

  .segna-theme-switch::after {
    top: 3px;
    left: 3px;
    width: 1rem;
    height: 1rem;
  }

  html[data-theme="dark"] .segna-theme-switch::after {
    transform: translateX(1.05rem);
  }
}


/* =========================================================
   SEGNA — TOGGLE MOBILE ALLINEATO AL LOGO
   ========================================================= */

@media (max-width: 560px) {

  .segna-site-header {
    position: relative;
  }

  .segna-theme-toggle {
    position: absolute;
    top: 1.35rem;
    right: 0;

    margin: 0;
    min-height: auto;
    padding: .35rem;
    gap: 0;

    border-radius: 999px;
  }

  .segna-theme-toggle [data-theme-label] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .segna-theme-switch {
    width: 2.6rem;
    height: 1.5rem;
  }

  .segna-theme-switch::after {
    top: 3px;
    left: 3px;
    width: 1rem;
    height: 1rem;
  }

  html[data-theme="dark"] .segna-theme-switch::after {
    transform: translateX(1.05rem);
  }
}


/* =========================================================
   SEGNA — DARK MODE REFINEMENT
   Locandine + linee strutturali
   ========================================================= */

html[data-theme="dark"] {
  --segna-dark-line: #514D47;
  --segna-dark-line-strong: #6A645D;
}

/* ---------------------------------------------------------
   1. LOCANDINE
   Nessuna alterazione dell'immagine.
   Viene eliminato soltanto lo stage bianco circostante.
   --------------------------------------------------------- */

html[data-theme="dark"] .card-link img {
  background: var(--segna-surface);
  border-color: var(--segna-line);
}

/* Card homepage / archivio */
html[data-theme="dark"] .event-card {
  border-color: var(--segna-dark-line);
}

/* Pagine territoriali */
html[data-theme="dark"] .territory-event-image {
  background: var(--territory-card);
}

html[data-theme="dark"] .territory-event-card {
  border-color: var(--segna-dark-line);
}

/* Scheda evento: stage della locandina */
html[data-theme="dark"] .poster {
  background: var(--segna-surface);
}


/* ---------------------------------------------------------
   2. LINEE STRUTTURALI
   Evitiamo il bianco/crema troppo aggressivo.
   --------------------------------------------------------- */

html[data-theme="dark"] .home-intro,
html[data-theme="dark"] .nearby-tools,
html[data-theme="dark"] .discovery,
html[data-theme="dark"] .events-section,
html[data-theme="dark"] .signal-service,
html[data-theme="dark"] .site-footer {
  border-color: var(--segna-dark-line);
}

/* Le separazioni principali restano visibili ma meno dure */
html[data-theme="dark"] .home-intro,
html[data-theme="dark"] .discovery,
html[data-theme="dark"] .events-section,
html[data-theme="dark"] .signal-service {
  border-top-color: var(--segna-dark-line-strong);
  border-bottom-color: var(--segna-dark-line);
}

/* Scheda evento */
html[data-theme="dark"] .event-hero,
html[data-theme="dark"] .event-shell > footer,
html[data-theme="dark"] .continue-browsing {
  border-color: var(--segna-dark-line);
}

html[data-theme="dark"] .event-hero {
  border-top-color: var(--segna-dark-line-strong);
}

/* Territori */
html[data-theme="dark"] .territory-link,
html[data-theme="dark"] .territory-empty {
  border-color: var(--segna-dark-line);
}