/* ============================================================
   Design tokens — fonte unica di colori/spaziature/raggi/ombre.
   Valori invariati rispetto al design esistente: centralizzati per
   coerenza e per rendere modificabili globalmente colori e spaziature.
   ============================================================ */
:root {
    --hc-primary: #007bff;
    --hc-primary-hover: #0056b3;
    --hc-secondary: #6c757d;
    --hc-secondary-hover: #5a6268;
    --hc-surface: #fff;
    --hc-border: #ddd;
    --hc-text-on-accent: #fff;

    --hc-radius: 10px;
    --hc-radius-sm: 6px;
    --hc-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

    --hc-space-sm: 10px;
    --hc-space-md: 15px;
    --hc-space-lg: 20px;
    --hc-font-size: 16px;

    --hc-container-max: 800px;

    /* Form moderni */
    --hc-border-strong: #c7ced6;
    --hc-focus-ring: rgba(0, 123, 255, 0.25);
    --hc-radius-input: 10px;
}

/* Container styles */
.container {
    max-width: var(--hc-container-max);
    margin: var(--hc-space-lg) auto; /* Centers the container horizontally */
    padding: 0 var(--hc-space-md); /* Adds some padding on the sides */
}

.container h1 {
    text-align: center; /* Centers the h1 text */
    margin-bottom: var(--hc-space-lg); /* Adds some space between the h1 and the form */
}

/* Stile "card" solo per le form di inserimento dati (POST); i filtri inline
   (method="get", es. "Elementi per pagina") restano semplici. */
/* Card solo per i form di pagina; :not(.d-inline) esclude i form inline nelle
   tabelle (es. il bottone Elimina), che altrimenti prendono sfondo/ombra/padding. */
form:not([method="get"]):not(.d-inline) {
    background-color: var(--hc-surface);
    padding: 30px;
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow);
    max-width: var(--hc-container-max);
    width: 100%;
    margin: var(--hc-space-lg) auto; /* Centers the form horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers vertically */
}

/* Specific styles for forms with minimal content */
form:only-child,
form:empty {
    min-height: auto; /* Removes minimum height for form with only one field */
    height: auto;
}

/* ============================================================
   Sistema form moderno (2026) — controlli coerenti su tutte le pagine.
   Le regole di "look" sono globali (con esclusione dei componenti Bootstrap
   .form-control/.form-check-input, gestiti da Bootstrap) cosi' ogni form ha
   lo stesso aspetto; la larghezza piena resta legata alle form-card.
   ============================================================ */

/* Larghezza piena solo dentro le form-card (input di testo/textarea/select). */
form:not([method="get"]):not(.d-inline) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.btn),
form:not([method="get"]):not(.d-inline) textarea,
form:not([method="get"]):not(.d-inline) select {
    width: 100%;
    box-sizing: border-box;
}

/* Look moderno condiviso di input di testo / textarea / select — vale anche per
   i widget Bootstrap .form-control (usati da alcuni form Django) cosi' TUTTI i
   form hanno lo stesso aspetto. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.btn),
textarea,
select:not(.custom-select) {
    padding: 11px 14px;
    margin: 8px 0 0;
    /* height:auto annulla l'altezza fissa di Bootstrap .form-control, che con il
       nostro padding taglierebbe il testo in verticale. */
    height: auto;
    border: 1.5px solid var(--hc-border-strong);
    border-radius: var(--hc-radius-input);
    font-size: 15px;
    line-height: 1.45;
    color: #212529;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not(.btn):focus,
textarea:focus,
select:not(.custom-select):focus {
    border-color: var(--hc-primary);
    box-shadow: 0 0 0 3px var(--hc-focus-ring);
    outline: none;
}
::placeholder { color: #98a2b3; opacity: 1; }
textarea { min-height: 110px; resize: vertical; }

/* Select: freccia custom (niente look nativo). min-width evita che i select
   compatti (es. "Elementi per pagina" con .w-auto) restringano troppo la box
   e taglino il testo dietro il chevron. */
select:not(.custom-select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
    min-width: 6rem;
    cursor: pointer;
}

/* Checkbox e radio custom (moderni, accessibili) — sostituiscono i nativi "1997". */
input[type="checkbox"]:not(.form-check-input):not(.custom-control-input),
input[type="radio"]:not(.form-check-input):not(.custom-control-input) {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    vertical-align: -5px;
    border: 1.5px solid var(--hc-border-strong);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    flex: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]:not(.form-check-input):not(.custom-control-input) { border-radius: 6px; }
input[type="radio"]:not(.form-check-input):not(.custom-control-input) { border-radius: 50%; }
input[type="checkbox"]:not(.form-check-input):checked,
input[type="radio"]:not(.form-check-input):checked {
    background-color: var(--hc-primary);
    border-color: var(--hc-primary);
}
input[type="checkbox"]:not(.form-check-input):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 6.5 5 9 9.5 3.5'/%3E%3C/svg%3E");
    background-size: 12px;
}
input[type="radio"]:not(.form-check-input):checked { box-shadow: inset 0 0 0 4px #fff; }
input[type="checkbox"]:not(.form-check-input):focus-visible,
input[type="radio"]:not(.form-check-input):focus-visible {
    box-shadow: 0 0 0 3px var(--hc-focus-ring);
    outline: none;
}

/* Checkbox / radio sulla stessa riga della loro label (checkbox subito dopo la
   frase, non a capo): il wrapper del campo diventa una riga flex e la label torna
   inline. Copre sia i form as_p (<p>) sia quelli con <div>/.form-group. */
form:not([method="get"]):not(.d-inline) p:has(> input[type="checkbox"]),
form:not([method="get"]):not(.d-inline) p:has(> input[type="radio"]),
form:not([method="get"]):not(.d-inline) div:has(> input[type="checkbox"]),
form:not([method="get"]):not(.d-inline) div:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
form:not([method="get"]):not(.d-inline) p:has(> input[type="checkbox"]) label,
form:not([method="get"]):not(.d-inline) p:has(> input[type="radio"]) label,
form:not([method="get"]):not(.d-inline) div:has(> input[type="checkbox"]) label,
form:not([method="get"]):not(.d-inline) div:has(> input[type="radio"]) label {
    display: inline;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

/* File input: bottone moderno via ::file-selector-button (tutti i file input,
   compresi quelli Bootstrap .form-control, per un look coerente). */
input[type="file"] { cursor: pointer; }
input[type="file"]:not(.form-control) { padding: 9px 12px; }
/* .form-control impone height fissa (~38px) da input testuale: il bottone nativo
   ::file-selector-button e' piu' alto e sborda dal bordo. height:auto fa crescere
   il box per contenerlo, coerente con i file input senza .form-control. */
input[type="file"].form-control { height: auto; padding: 9px 12px; line-height: 1.5; }
input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    background-color: var(--hc-primary);
    color: var(--hc-text-on-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}
input[type="file"]::file-selector-button:hover {
    background-color: var(--hc-primary-hover);
}

/* Bottoni dentro le form-card: stesso raggio e spaziatura verticale degli input,
   cosi' submit/annulla sono coerenti con i campi moderni. */
form:not([method="get"]):not(.d-inline) .btn {
    border-radius: var(--hc-radius-input);
    margin-top: var(--hc-space-sm);
    padding-top: 11px;
    padding-bottom: 11px;
}

/* :not(.btn) -> non tocca i pulsanti Bootstrap (btn/btn-sm/...): quelli li
   gestisce Bootstrap. Queste regole valgono solo per i submit "nudi" legacy. */
form button[type="submit"]:not(.btn),
input[type="submit"]:not(.btn) {
    width: auto;               /* Adatta la larghezza del pulsante */
    margin: 3px 0;           /* Spazio sopra e sotto */
    padding: var(--hc-space-sm) var(--hc-space-lg);       /* Spazio interno al pulsante */
    background-color: var(--hc-primary);
    border: none;             /* Imposta nessun bordo, se non desideri un bordo visibile */
    border-radius: var(--hc-radius-sm);
    color: var(--hc-text-on-accent);
    font-size: var(--hc-font-size);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button[type="submit"]:not(.btn):hover,
input[type="submit"]:not(.btn):hover {
    background-color: var(--hc-primary-hover);
}

/* Esclude le label Bootstrap dei check/radio (devono restare inline). */
form:not(.d-inline) label:not(.form-check-label):not(.custom-control-label):not(.col-form-label) {
    display: block;
    margin: var(--hc-space-sm) 0 5px;
    font-weight: bold;
    text-align: left; /* Aligns labels to the left */
}

form .form-group {
    margin-bottom: var(--hc-space-md);
}

/* Bottoni Sì/No del popup prodotti: larghezza fissa identica. Qui (foglio
   globale) e non nel CSS di pagina, cosi' vale anche se quello non carica. */
.popup .btn {
    width: 90px;
    margin: 4px;
}

.btn-secondary:not(.btn),
button.btn-secondary:not(.btn),
input[type="submit"].btn-secondary:not(.btn) {
    /* Solo pulsanti "secondary" legacy senza .btn: i Bootstrap li gestisce Bootstrap. */
    width: auto;               /* Adatta la larghezza del pulsante */
    margin: 3px 0;           /* Spazio sopra e sotto */
    padding: var(--hc-space-sm) var(--hc-space-lg);       /* Spazio interno al pulsante */
    border: none;             /* Nessun bordo */
    border-radius: var(--hc-radius-sm);
    color: var(--hc-text-on-accent);
    font-size: var(--hc-font-size);
    cursor: pointer;
    transition: background-color 0.3s ease;

    /* Colori 'secondary' (grigi) */
    background-color: var(--hc-secondary);
}

.btn-secondary:not(.btn):hover,
button.btn-secondary:not(.btn):hover,
input[type="submit"].btn-secondary:not(.btn):hover {
    background-color: var(--hc-secondary-hover);
}