/* ==========================================================================
   Timbro Digitale Web — Proposta B: PA Moderno
   Basato su Bootstrap Italia 2.12
   Palette: indaco #1A3A6B / blu medio #2B5AA0 / grigio chiaro #F5F7FA
   ========================================================================== */

/* === Variabili di progetto === */
:root {
    --td-primary: #1A3A6B;
    --td-secondary: #2B5AA0;
    --td-bg-light: #F5F7FA;
    --td-bg-banner: #E8EEF5;
    --td-text: #1C2024;
    --td-text-muted: #5A6772;
    --td-border: #D9DADB;
    --td-link: #0066CC;
    --td-success: #008055;
    --td-danger: #CC334D;
    --td-radius: 4px;
}

/* === Sovrascritture Bootstrap Italia per il tema === */
.it-header-slim-wrapper {
    background-color: var(--td-primary);
}

.it-header-center-wrapper {
    background-color: #fff;
    border-bottom: 1px solid var(--td-border);
    padding: 1rem 0;
}

.it-header-center-wrapper .it-brand-text .it-brand-title {
    color: var(--td-primary);
    font-weight: 700;
}

.it-header-center-wrapper .it-brand-text .it-brand-tagline {
    color: var(--td-text-muted);
    font-size: 0.85rem;
}

/* Testata centrale: marchio del servizio a sinistra, logo dell'ente a destra.
   Le regole di flex sono dichiarate qui e non lasciate a Bootstrap Italia perche
   il resto della testata e gia ridefinito da questo foglio: dipendere solo in
   parte dalle sue regole renderebbe il risultato imprevedibile. */
.it-header-center-wrapper .it-header-center-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.it-header-center-wrapper .it-brand-wrapper > a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

/* Marchio del servizio (wwwroot/logo.png). Il box e quadrato con object-fit
   contain: il logo si adatta senza deformarsi qualunque sia il suo rapporto
   dimensionale, quindi sostituire il file non richiede di ritoccare il CSS. */
.td-brand-mark {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Logo dell'ente: rettangolare e di proporzioni ignote, quindi si vincola
   l'altezza e si lascia libera la larghezza entro un massimo. Senza questo un
   logo 5:1 come quello dell'Agenzia Sarda delle Entrate spalanca la testata. */
.td-tenant-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.td-tenant-logo img {
    display: block;
    /* height fissa, non auto: alcuni loghi ente dichiarano solo il viewBox,
       senza width/height. Con entrambi i lati a auto il browser non ha una
       dimensione di ancoraggio da cui derivare l'altra tramite il rapporto
       d'aspetto del viewBox, e l'immagine collassa a 0x0 pur essendo presente
       nel DOM. Fissando l'altezza, la larghezza si calcola comunque in
       proporzione, anche senza width/height nel file sorgente. */
    height: 40px;
    width: auto;
    max-width: 260px;
}

@media (max-width: 575.98px) {
    .it-header-center-wrapper .it-header-center-content-wrapper {
        gap: 0.75rem;
    }

    .td-brand-mark {
        width: 36px;
        height: 36px;
    }

    .td-tenant-logo img {
        height: 28px;
        max-width: 140px;
    }
}

.it-header-navbar-wrapper {
    background-color: var(--td-primary);
}

/* Icone sulle barre scure: apertura del menu nell'header slim, burger e
   chiusura nella barra di navigazione. Stesso difetto del pulsante primario:
   senza un fill dichiarato lo decide il CSS di Bootstrap Italia con un blu
   scuro, invisibile su questi fondi. Sono icone che compaiono solo su mobile,
   quindi il problema non si nota provando il sito da desktop. */
.it-header-slim-wrapper .icon,
.it-header-navbar-wrapper .icon {
    fill: #fff;
}

/* === Main Content === */
.td-main {
    background-color: var(--td-bg-light);
    padding: 2.5rem 0;
    flex: 1;
    min-height: 50vh;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* === Titoli di pagina === */
.td-page-title {
    color: var(--td-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* === Banner Hero leggero === */
.td-banner {
    background-color: var(--td-bg-banner);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
}

.td-banner-title {
    color: var(--td-primary);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.td-banner-text {
    color: var(--td-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
    max-width: 650px;
}

/* === Card === */
.td-card {
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.td-card-accent {
    border-left: 3px solid var(--td-primary);
}

/* === Article separator === */
.td-separator {
    border: none;
    border-top: 1px solid var(--td-border);
    margin: 1.5rem 0;
}

/* === Feature cards (info) === */
.td-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.td-feature {
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.td-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    fill: var(--td-primary);
}

.td-feature-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--td-primary);
    margin-bottom: 0.25rem;
}

.td-feature-text {
    font-size: 0.85rem;
    color: var(--td-text-muted);
    margin: 0;
}

/* === Form upload === */
.td-upload-area {
    display: block;
    width: 100%;
    padding: 2rem;
    border: 2px dashed var(--td-border);
    border-radius: var(--td-radius);
    background: var(--td-bg-light);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    color: var(--td-text-muted);
}

.td-upload-area:hover,
.td-upload-area.dragging {
    border-color: var(--td-secondary);
    background: var(--td-bg-banner);
}

.td-upload-icon {
    width: 32px;
    height: 32px;
    fill: var(--td-text-muted);
    margin-bottom: 0.5rem;
}

.td-upload-label {
    font-size: 0.9rem;
}

.td-upload-label strong {
    color: var(--td-link);
}

/* === Buttons === */
.td-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: var(--td-radius);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
    line-height: 1.5;
}

.td-btn-primary {
    background-color: var(--td-primary);
    color: #fff;
}

.td-btn-primary:hover {
    background-color: var(--td-secondary);
    color: #fff;
}

.td-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.td-btn-outline {
    background: transparent;
    color: var(--td-primary);
    border: 1px solid var(--td-primary);
}

.td-btn-outline:hover {
    background: var(--td-primary);
    color: #fff;
}

.td-btn .icon {
    width: 18px;
    height: 18px;
    /* currentColor e non un colore fisso: cosi l'icona segue il testo del
       pulsante in ogni variante. Su td-btn-primary il testo e bianco, su
       td-btn-outline e --td-primary, e gli stati hover vengono da se.
       Senza questa riga il fill lo decide il CSS di Bootstrap Italia, che usa
       un blu scuro: invisibile sul fondo scuro del pulsante primario. */
    fill: currentColor;
}

/* === Checkbox group === */
.td-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.25rem 0;
    font-size: 0.9rem;
}

.td-checkbox-group input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--td-primary);
}

/* === Info box === */
.td-info-box {
    background: var(--td-bg-banner);
    border: 1px solid #B8D4E8;
    border-left: 3px solid var(--td-secondary);
    border-radius: var(--td-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--td-text);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.td-info-box .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: var(--td-secondary);
    margin-top: 1px;
}

/* === Verification Steps === */
.td-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--td-radius);
    margin-bottom: 0.5rem;
    border: 1px solid var(--td-border);
    background: #fff;
}

.td-step-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
}

.td-step-icon.td-step-success {
    fill: var(--td-success);
}

.td-step-icon.td-step-danger {
    fill: var(--td-danger);
}

.td-step-content {
    flex: 1;
}

.td-step-message {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--td-text);
}

.td-step-detail {
    font-size: 0.8rem;
    color: var(--td-text-muted);
    margin-top: 0.15rem;
}

/* === Result badges === */
.td-result-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--td-radius);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.td-result-success {
    background: #D4EDDA;
    color: #155724;
    border: 1px solid #C3E6CB;
}

.td-result-danger {
    background: #F8D7DA;
    color: #721C24;
    border: 1px solid #F5C6CB;
}

.td-result-badge .icon {
    width: 20px;
    height: 20px;
}

.td-result-success .icon {
    fill: #155724;
}

.td-result-danger .icon {
    fill: #721C24;
}

/* === Tabs === */
.td-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--td-border);
    margin-bottom: 1.5rem;
}

.td-tab-btn {
    background: none;
    border: none;
    padding: 0.65rem 1.25rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--td-text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.td-tab-btn .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.td-tab-btn.active,
.td-tab-btn:hover {
    color: var(--td-primary);
    border-bottom-color: var(--td-primary);
}

.td-tab-panel {
    display: none;
}

.td-tab-panel.active {
    display: block;
}

/* === Preview === */
.td-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.td-preview-card {
    background: var(--td-bg-light);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 1rem;
    text-align: center;
}

.td-preview-card h4 {
    font-size: 0.8rem;
    color: var(--td-text-muted);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.td-preview-card img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}

/* === XML viewer === */
.td-xml-viewer {
    background: #263238;
    color: #CFD8DC;
    padding: 1.25rem;
    border-radius: var(--td-radius);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
}

/* === Loading Spinner === */
.td-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: td-spin 0.7s linear infinite;
}

@keyframes td-spin {
    to {
        transform: rotate(360deg);
    }
}

/* === Section title with separator === */
.td-section-title {
    color: var(--td-primary);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--td-bg-banner);
}

/* === Tables PA style === */
.td-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.td-table th {
    background: var(--td-bg-banner);
    color: var(--td-primary);
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--td-border);
}

.td-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--td-border);
    vertical-align: top;
}

.td-table tbody tr:hover {
    background: var(--td-bg-light);
}

/* === Links === */
.td-main a:not(.td-btn):not(.nav-link):not(.list-item) {
    color: var(--td-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.td-main a:not(.td-btn):not(.nav-link):not(.list-item):hover {
    color: var(--td-primary);
}

/* === Footer === */
.it-footer {
    background-color: var(--td-primary);
    margin-top: auto;
}

.it-footer h4 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.it-footer h4 a {
    color: #fff;
    text-decoration: none;
}

/* Marchio nel footer: SVG inline, non un <img>. Misure esplicite perche il
   disegno dichiara solo il viewBox; 26x24 ne rispetta il rapporto (1074x1011).
   Allineato al testo del titolo, non alla riga di base, altrimenti "galleggia".

   Il colore non e dichiarato qui: le forme usano currentColor e prendono il
   bianco da .it-footer h4 a. Una regola di colore in piu qui sarebbe una
   seconda fonte di verita da tenere allineata al fondo del footer. */
.td-footer-mark {
    width: 26px;
    height: 24px;
    vertical-align: -0.35em;
}

.it-footer p.small {
    color: rgba(255, 255, 255, 0.75);
    margin: 0.2rem 0;
}

.it-footer .link-list .list-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    padding: 0.2rem 0;
    text-decoration: none;
}

.it-footer .link-list .list-item:hover {
    color: #fff;
    text-decoration: underline;
}

.it-footer-small-prints {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 0.75rem 0;
}

.it-footer-small-prints p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* === Responsive === */
@media (max-width: 768px) {
    .td-banner {
        padding: 1.5rem;
    }

    .td-banner-title {
        font-size: 1.25rem;
    }

    .td-preview-grid {
        grid-template-columns: 1fr;
    }

    .td-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .td-card {
        padding: 1.25rem;
    }

    .td-upload-area {
        padding: 1.25rem;
    }
}