/*
  Tema Magellano per l'admin Django.

  Regole di base:
  - i colori si dichiarano UNA volta qui, come variabili, in due blocchi
    (chiaro e scuro) che seguono lo stesso schema di dark_mode.css di Django:
    tema chiaro = html[data-theme="light"] + :root, tema scuro = media query
    per chi non ha forzato il chiaro + html[data-theme="dark"] per il toggle;
  - le regole sotto non contengono mai un colore letterale: usano le variabili
    di Django (--body-bg, --body-fg, --border-color...) o le --mag-* definite
    qui, che sono la tavolozza usata anche dai CSS delle pagine strumento
    (progetta modello, configura fori, guida, ecc.).
  Chi aggiunge stili all'admin deve fare lo stesso: un colore fisso torna
  illeggibile appena si passa all'altro tema.
*/

/* ---------------------------------------------------------------- CHIARO */
html[data-theme="light"],
:root {
  /* Identita' Magellano: cromature neutre (grigio) al posto del blu Django.
     --accent resta chiaro nei due temi: e' il nome del sito sull'header e il
     fondo dell'intestazione del calendario, su cui Django scrive in scuro. */
  --primary: #4a4a4a;
  --secondary: #3a3a3a;
  --accent: #b9d4e3;
  --primary-fg: #ffffff;

  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: #454545;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #e6e6e6;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #5e5e5e;

  /* I link restano riconoscibili come tali: grigio su bianco non basta. */
  --link-fg: #1f5c78;
  --link-hover-color: #113c52;
  --link-selected-fg: #1f5c78;

  --object-tools-bg: var(--secondary);
  --object-tools-fg: var(--primary-fg);
  --object-tools-hover-bg: var(--primary);

  /* Tavolozza condivisa con le pagine strumento. */
  --mag-surface: var(--body-bg);            /* pannelli, liste, tooltip */
  --mag-surface-alt: #f3f3f3;               /* barre, intestazioni, box */
  --mag-hover-bg: #ebebeb;                  /* hover di righe e pulsanti neutri */
  --mag-selected-bg: #dfeaf2;               /* riga o voce selezionata */
  --mag-code-bg: #f2f3f5;                   /* code, pre */

  --mag-accent: #2f6f8f;                    /* pulsanti dei tool 3D */
  --mag-accent-hover: #23566f;
  --mag-accent-fg: #ffffff;
  --mag-accent-alt: #7b3fa0;                /* azione secondaria (allinea...) */
  --mag-accent-alt-hover: #5f2f7d;
  --mag-focus-ring: rgba(47, 111, 143, 0.35);
  --mag-disabled-bg: #d9d9d9;
  --mag-disabled-fg: #6f6f6f;

  --mag-success: #2e7d32;
  --mag-success-hover: #256428;
  --mag-success-fg: #ffffff;
  --mag-success-bg: #e3f4e4;
  --mag-success-border: #b7ddb9;
  --mag-success-text: #1b5e20;

  --mag-danger: #c0392b;
  --mag-danger-hover: #9c2c20;
  --mag-danger-fg: #ffffff;
  --mag-danger-bg: #fdecea;
  --mag-danger-border: #f3c3bd;
  --mag-danger-text: #a02218;

  --mag-warning: #c77700;
  --mag-warning-bg: #fff4d6;
  --mag-warning-hover-bg: #ffe9b0;
  --mag-warning-border: #f0d59a;
  --mag-warning-text: #7a5600;

  --mag-info-bg: #e4eff5;
  --mag-info-border: #bcd6e3;
  --mag-info-text: #14485e;

  --mag-neutral-bg: #eceef0;                /* blocchi neutri (parentesi...) */
  --mag-neutral-border: #d3d6d9;

  --mag-tooltip-bg: #3f3f3f;                /* tooltip e fumetti */
  --mag-tooltip-fg: #ffffff;

  /* Sintassi delle formule e dei condizionamenti. */
  --mag-syntax-logico: #0b5cad;
  --mag-syntax-algebrico: #9a5200;
  --mag-syntax-nome: #1a7333;
  --mag-syntax-valore: #b3261e;

  --mag-overlay-bg: rgba(0, 0, 0, 0.7);     /* velo di caricamento */
  --mag-overlay-fg: #ffffff;
  --mag-shadow: rgba(0, 0, 0, 0.18);
  --mag-viewer-bg: #111111;                 /* fondo del canvas 3D: sempre scuro */
  --mag-viewer-flat-bg: #e9e9e9;            /* fondo delle viste 2D */
}

/* ------------------------------------------------------------------ SCURO */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #3d3d3d;
    --secondary: #2e2e2e;
    --accent: #a8c9da;
    --primary-fg: #f2f2f2;

    --header-color: #f2f2f2;
    --header-branding-color: #f2f2f2;
    --header-bg: #242424;
    --header-link-color: #f2f2f2;

    --breadcrumbs-fg: #cfcfcf;
    --breadcrumbs-link-fg: #f2f2f2;
    --breadcrumbs-bg: #2e2e2e;

    --link-fg: #8ecbe6;
    --link-hover-color: #b6e2f5;
    --link-selected-fg: #8ecbe6;

    --object-tools-bg: #3d3d3d;
    --object-tools-fg: #f2f2f2;
    --object-tools-hover-bg: #565656;

    --mag-surface: #1b1b1b;
    --mag-surface-alt: #242424;
    --mag-hover-bg: #303030;
    --mag-selected-bg: #21414f;
    --mag-code-bg: #262626;

    --mag-accent: #35708c;
    --mag-accent-hover: #43869f;
    --mag-accent-fg: #ffffff;
    --mag-accent-alt: #8e5cb0;
    --mag-accent-alt-hover: #a273c2;
    --mag-focus-ring: rgba(79, 149, 181, 0.45);
    --mag-disabled-bg: #3a3a3a;
    --mag-disabled-fg: #8f8f8f;

    --mag-success: #2f7a34;
    --mag-success-hover: #3d9443;
    --mag-success-fg: #ffffff;
    --mag-success-bg: #1d3a20;
    --mag-success-border: #2f5c33;
    --mag-success-text: #a5dca9;

    --mag-danger: #c1483c;
    --mag-danger-hover: #d55a4d;
    --mag-danger-fg: #ffffff;
    --mag-danger-bg: #3a1c19;
    --mag-danger-border: #5d2b26;
    --mag-danger-text: #f1a9a1;

    --mag-warning: #c68a2e;
    --mag-warning-bg: #3a2e12;
    --mag-warning-hover-bg: #4a3b18;
    --mag-warning-border: #5c491f;
    --mag-warning-text: #f0cd8a;

    --mag-info-bg: #1d3340;
    --mag-info-border: #2f4d5e;
    --mag-info-text: #a8d4e8;

    --mag-neutral-bg: #2b2b2b;
    --mag-neutral-border: #3d3d3d;

    --mag-tooltip-bg: #4a4a4a;
    --mag-tooltip-fg: #f5f5f5;

    --mag-syntax-logico: #82bdea;
    --mag-syntax-algebrico: #e3a869;
    --mag-syntax-nome: #7fd08a;
    --mag-syntax-valore: #f0938c;

    --mag-overlay-bg: rgba(0, 0, 0, 0.8);
    --mag-overlay-fg: #ffffff;
    --mag-shadow: rgba(0, 0, 0, 0.6);
    --mag-viewer-bg: #0d0d0d;
    --mag-viewer-flat-bg: #1b1b1b;
  }
}

html[data-theme="dark"] {
  --primary: #3d3d3d;
  --secondary: #2e2e2e;
  --accent: #a8c9da;
  --primary-fg: #f2f2f2;

  --header-color: #f2f2f2;
  --header-branding-color: #f2f2f2;
  --header-bg: #242424;
  --header-link-color: #f2f2f2;

  --breadcrumbs-fg: #cfcfcf;
  --breadcrumbs-link-fg: #f2f2f2;
  --breadcrumbs-bg: #2e2e2e;

  --link-fg: #8ecbe6;
  --link-hover-color: #b6e2f5;
  --link-selected-fg: #8ecbe6;

  --object-tools-bg: #3d3d3d;
  --object-tools-fg: #f2f2f2;
  --object-tools-hover-bg: #565656;

  --mag-surface: #1b1b1b;
  --mag-surface-alt: #242424;
  --mag-hover-bg: #303030;
  --mag-selected-bg: #21414f;
  --mag-code-bg: #262626;

  --mag-accent: #35708c;
  --mag-accent-hover: #43869f;
  --mag-accent-fg: #ffffff;
  --mag-accent-alt: #8e5cb0;
  --mag-accent-alt-hover: #a273c2;
  --mag-focus-ring: rgba(79, 149, 181, 0.45);
  --mag-disabled-bg: #3a3a3a;
  --mag-disabled-fg: #8f8f8f;

  --mag-success: #2f7a34;
  --mag-success-hover: #3d9443;
  --mag-success-fg: #ffffff;
  --mag-success-bg: #1d3a20;
  --mag-success-border: #2f5c33;
  --mag-success-text: #a5dca9;

  --mag-danger: #c1483c;
  --mag-danger-hover: #d55a4d;
  --mag-danger-fg: #ffffff;
  --mag-danger-bg: #3a1c19;
  --mag-danger-border: #5d2b26;
  --mag-danger-text: #f1a9a1;

  --mag-warning: #c68a2e;
  --mag-warning-bg: #3a2e12;
  --mag-warning-hover-bg: #4a3b18;
  --mag-warning-border: #5c491f;
  --mag-warning-text: #f0cd8a;

  --mag-info-bg: #1d3340;
  --mag-info-border: #2f4d5e;
  --mag-info-text: #a8d4e8;

  --mag-neutral-bg: #2b2b2b;
  --mag-neutral-border: #3d3d3d;

  --mag-tooltip-bg: #4a4a4a;
  --mag-tooltip-fg: #f5f5f5;

  --mag-syntax-logico: #82bdea;
  --mag-syntax-algebrico: #e3a869;
  --mag-syntax-nome: #7fd08a;
  --mag-syntax-valore: #f0938c;

  --mag-overlay-bg: rgba(0, 0, 0, 0.8);
  --mag-overlay-fg: #ffffff;
  --mag-shadow: rgba(0, 0, 0, 0.6);
  --mag-viewer-bg: #0d0d0d;
  --mag-viewer-flat-bg: #1b1b1b;
}

/* ------------------------------------------------------- Cromature admin */

/* Pulsanti: il default (azione principale) resta piu' chiaro del neutro. */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  background: var(--secondary);
  color: var(--primary-fg);
}

.button:active, input[type=submit]:active, input[type=button]:active,
.button:focus, input[type=submit]:focus, input[type=button]:focus,
.button:hover, input[type=submit]:hover, input[type=button]:hover {
  background: var(--primary);
  color: var(--primary-fg);
}

.button.default, input[type=submit].default, .submit-row input.default {
  background: var(--mag-accent);
  color: var(--mag-accent-fg);
}

.button.default:active, input[type=submit].default:active,
.button.default:focus, input[type=submit].default:focus,
.button.default:hover, input[type=submit].default:hover {
  background: var(--mag-accent-hover);
  color: var(--mag-accent-fg);
}

/* Intestazioni dei moduli e delle inline. */
.module h2, .module caption, .inline-group h2 {
  background: var(--secondary);
  color: var(--primary-fg);
}

/* Selettore molti-a-molti: le due colonne e i pulsanti di travaso. */
.selector-chosen h2,
.selector-available h2 {
  background: var(--secondary);
  color: var(--primary-fg);
}

.selector .selector-available .selector-filter label {
  color: var(--body-quiet-color);
}

.selector-add, .selector-remove {
  background: var(--secondary);
  color: var(--primary-fg);
}

.selector-add:hover, .selector-remove:hover {
  background: var(--primary);
}

.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
  background-color: var(--mag-accent);
  color: var(--mag-accent-fg);
}

/* Sezioni app collassabili (dashboard + sidebar) - admin-collapse.js */

/* Bottone "comprimi/espandi tutto" sopra l'elenco delle sezioni. */
.mag-collapse-all {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#nav-sidebar .mag-collapse-all {
  padding: 0 16px 0 8px;
}

.mag-collapse-all-btn {
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--link-fg);
  font-size: 0.6875rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.mag-collapse-all-btn::before {
  content: "\25BE";
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s ease;
}

.mag-collapse-all-btn.mag-tutto-chiuso::before {
  transform: rotate(-90deg);
}

.mag-collapse-all-btn:hover,
.mag-collapse-all-btn:focus-visible {
  color: var(--link-hover-color);
  text-decoration: underline;
}
/* Nome app a sinistra, chevron a destra in fondo alla barra.
   Niente display:flex sul caption: perderebbe table-caption e la barra non
   seguirebbe piu' la larghezza della tabella. */
.module > table > caption {
  position: relative;
  padding-right: 28px;
  cursor: pointer;
  /* Tutta la barra e' un toggle: i click ripetuti non devono selezionare
     il testo del titolo (selezione nativa del doppio click). */
  -webkit-user-select: none;
  user-select: none;
}

/* Il nome app resta un link: cursore da link, non da toggle. */
.module > table > caption a.section {
  cursor: pointer;
}

.mag-collapse-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  border-radius: 3px;
  margin: 0;
  padding: 0 2px;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.mag-collapse-toggle:hover,
.mag-collapse-toggle:focus-visible {
  background: rgba(127, 127, 127, 0.28);
}

.mag-collapse-toggle::before {
  content: "\25BE";
  display: inline-block;
  transition: transform 0.15s ease;
}

.module.mag-collapsed .mag-collapse-toggle::before {
  transform: rotate(-90deg);
}

.module.mag-collapsed > table > tbody > tr {
  display: none;
}

/* Con le righe nascoste la tabella perderebbe la larghezza data da
   .dashboard .module table th { width: 100% }: la teniamo a piena riga. */
.module.mag-collapsed > table {
  width: 100%;
}

/* Il filtro rapido della sidebar ha priorita': mostra i match anche nelle
   sezioni compresse (le righe escluse restano nascoste da display inline). */
#nav-sidebar.mag-filtering .module.mag-collapsed > table > tbody > tr {
  display: table-row;
}

/* -------------------------------------- Riquadri e pulsanti delle pagine
   di importazione, esportazione e conferma (al posto degli style inline,
   che restavano chiari anche nel tema scuro). */

.mag-box {
  padding: 15px;
  border-radius: 5px;
  margin: 20px 0;
  background: var(--mag-surface-alt);
  color: var(--body-fg);
  border: 1px solid var(--border-color);
}

/* Titoli e testo del riquadro seguono il colore del riquadro. */
.mag-box > :first-child { margin-top: 0; }
.mag-box > :last-child { margin-bottom: 0; }
.mag-box h1, .mag-box h2, .mag-box h3, .mag-box h4 { color: inherit; }

.mag-box-info {
  background: var(--mag-info-bg);
  color: var(--mag-info-text);
  border-color: var(--mag-info-border);
}

.mag-box-warning {
  background: var(--mag-warning-bg);
  color: var(--mag-warning-text);
  border-color: var(--mag-warning-border);
  border-left: 4px solid var(--mag-warning);
}

.mag-box-danger {
  background: var(--mag-danger-bg);
  color: var(--mag-danger-text);
  border-color: var(--mag-danger-border);
  border-left: 4px solid var(--mag-danger);
}

.mag-box-success {
  background: var(--mag-success-bg);
  color: var(--mag-success-text);
  border-color: var(--mag-success-border);
  border-left: 4px solid var(--mag-success);
}

/* Pulsanti e link-pulsante colorati per esito/azione. */
.mag-btn {
  display: inline-block;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: var(--mag-accent);
  color: var(--mag-accent-fg);
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.mag-btn:link, .mag-btn:visited { color: var(--mag-accent-fg); }
.mag-btn:hover, .mag-btn:focus { background: var(--mag-accent-hover); color: var(--mag-accent-fg); }

.mag-btn-success { background: var(--mag-success); }
.mag-btn-success:hover, .mag-btn-success:focus { background: var(--mag-success-hover); }

.mag-btn-danger { background: var(--mag-danger); }
.mag-btn-danger:hover, .mag-btn-danger:focus { background: var(--mag-danger-hover); }

.mag-btn-alt { background: var(--mag-accent-alt); }
.mag-btn-alt:hover, .mag-btn-alt:focus { background: var(--mag-accent-alt-hover); }

/* Esiti a testo colorato. */
.mag-ok { color: var(--mag-success-text); }
.mag-ko { color: var(--mag-danger-text); }
.mag-attenzione { color: var(--mag-warning-text); }

/* Nella barra degli strumenti della changelist i pulsanti colorati
   mantengono la forma a pillola delle altre voci; il colore va ripetuto qui
   perche' .object-tools a:link e' piu' specifico di .mag-btn. */
.object-tools a.mag-btn:link,
.object-tools a.mag-btn:visited {
  display: block;
  float: left;
  border-radius: 15px;
  padding: 3px 12px;
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--mag-accent);
  color: var(--mag-accent-fg);
}

.object-tools a.mag-btn:focus,
.object-tools a.mag-btn:hover { background: var(--mag-accent-hover); }

.object-tools a.mag-btn-success:link,
.object-tools a.mag-btn-success:visited { background: var(--mag-success); }
.object-tools a.mag-btn-success:focus,
.object-tools a.mag-btn-success:hover { background: var(--mag-success-hover); }

.object-tools a.mag-btn-danger:link,
.object-tools a.mag-btn-danger:visited { background: var(--mag-danger); }
.object-tools a.mag-btn-danger:focus,
.object-tools a.mag-btn-danger:hover { background: var(--mag-danger-hover); }

.object-tools a.mag-btn-alt:link,
.object-tools a.mag-btn-alt:visited { background: var(--mag-accent-alt); }
.object-tools a.mag-btn-alt:focus,
.object-tools a.mag-btn-alt:hover { background: var(--mag-accent-alt-hover); }