/* ============================================================
   portale.css - Portale dei tributi
   Estende italia-theme.css (variabili --ita-*): nessun colore scritto a mano oltre a quelli semantici.
   ============================================================ */

.ita-theme, dxbl-popup-root {
    --pt-ok: #008758;
    --pt-dovuto: #a66300;
    --pt-credito: #008758;
    --pt-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    --pt-shadow-hover: 0 8px 24px rgb(0 0 0 / 14%);
    --pt-footer: #202a2e;
}
.ita-theme main { min-height: 50vh; }
.ita-theme a { text-underline-offset: 3px; }

.pt-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 1000; }
.pt-skip:focus { left: 8px; top: 8px; }

/* ---------- fascia del cittadino collegato ---------- */
.pt-userbar { background: var(--ita-bg-light); border-bottom: 1px solid var(--ita-border); }
.pt-userbar .ita-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.pt-userbar small { color: var(--ita-text-muted); }
.pt-link-btn.dxbl-btn, .pt-link-btn { padding: 0 4px; font-weight: 600; white-space: nowrap; }

.pt-azioni { margin-top: 16px; display: flex; gap: 8px; }
.pt-nota { margin-top: 16px; color: var(--ita-text-muted); font-size: .9rem; }
.pt-ok { color: var(--pt-ok); }
.pt-dovuto { color: var(--pt-dovuto); }
.pt-credito { color: var(--pt-credito); }

/* ---------- riepilogo ---------- */
.pt-riepilogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pt-tile {
    display: flex; flex-direction: column; gap: 4px; padding: 20px; text-decoration: none; color: var(--ita-text);
    background: #fff; border: 1px solid var(--ita-border); border-radius: 8px; box-shadow: var(--pt-shadow);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pt-tile:hover { transform: translateY(-2px); box-shadow: var(--pt-shadow-hover); border-color: var(--ita-primary); }
.pt-tile:focus-visible { outline: none; box-shadow: var(--ita-focus); }
.pt-tile-icon { font-size: 1.5rem; color: var(--ita-primary); }
.pt-tile-titolo { font-weight: 700; font-size: 1.125rem; }
.pt-tile-valore { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.pt-tile-nota { color: var(--ita-text-muted); font-size: .9rem; }

/* ---------- avvisi (TARI, IMU, provvedimenti) ---------- */
.pt-avviso { background: #fff; border: 1px solid var(--ita-border); border-radius: 8px; box-shadow: var(--pt-shadow); margin-bottom: 16px; }
.pt-avviso-testata { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; }
.pt-avviso-icona {
    flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; font-size: 1.25rem;
    background: var(--ita-bg-light); color: var(--ita-primary);
}
.pt-avviso-titolo { flex: 1 1 260px; min-width: 0; }
.pt-avviso-titolo h3 { margin: 4px 0 0; font-size: 1.25rem; }
.pt-avviso-estremi { margin-left: 8px; color: var(--ita-text-muted); font-size: .9rem; }
.pt-avviso-importo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pt-avviso-importo small { text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; color: var(--ita-text-muted); }
.pt-avviso-importo strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pt-avviso-corpo { border-top: 1px solid var(--ita-border); padding: 16px 20px 20px; }
.pt-avviso-corpo h4 { margin: 20px 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ita-text-muted); }
.pt-avviso-corpo h4:first-child { margin-top: 0; }
.pt-avviso-nc { border-style: dashed; }

.pt-precedente { margin-bottom: 8px; }
.pt-precedente-riepilogo { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 4px 4px 8px; color: var(--ita-text-muted); }

/* ---------- riquadri (utenze, rate IMU) ---------- */
.pt-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pt-riquadro { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid var(--ita-border); border-radius: 8px; background: var(--ita-bg-light); }
.pt-riquadro p { margin: 0; }
.pt-riquadro-titolo { font-weight: 700; color: var(--ita-primary); }
.pt-riquadro-cod { color: var(--ita-text-muted); }
.pt-riquadro .pt-tab { width: 100%; }
.pt-calcolo { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ita-text-muted); font-size: .9rem; }

/* ---------- tabelle ---------- */
.pt-tab-scroll { overflow-x: auto; }
.pt-tab { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pt-tab th, .pt-tab td { padding: 8px 10px; border-bottom: 1px solid var(--ita-border); text-align: left; vertical-align: middle; }
.pt-tab thead th { background: var(--ita-bg-light); font-weight: 700; white-space: nowrap; }
.pt-tab .pt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-tab-compatta td { padding: 4px 6px; }
.pt-tab .pt-tot td { font-weight: 700; border-top: 2px solid var(--ita-border); border-bottom: 0; }

/* ---------- pagamento ---------- */
.pt-paga { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pt-paga-bottoni { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-paga .ita-alert { margin: 0; font-size: .85rem; padding: 6px 10px; }
.pt-tab .pt-paga { margin-top: 0; }
.pt-btn-sm { min-width: 84px; }

@media (max-width: 600px) {
    .pt-avviso-importo { align-items: flex-start; text-align: left; }
}

/* spaziature per le icone (Bootstrap non è caricato) e collegamenti dei riquadri senza sottolineatura */
.ita-theme .me-1 { margin-right: .25rem; }
.ita-theme .me-2 { margin-right: .5rem; }
.pt-tile, .pt-tile * { text-decoration: none; }

.pt-situazione { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 10px; }

.pt-storico { margin-bottom: 24px; background: #fff; border: 1px solid var(--ita-border); border-radius: 8px; }
.pt-anno { margin: 24px 0 8px; font-size: 1.25rem; }

/* piè di pagina sempre grigio scuro, come nei siti comunali, qualunque sia il colore del tema dell'ente */
.ita-theme .ita-footer-main, .ita-theme .ita-footer-small { background: var(--pt-footer); }
.ita-theme .ita-footer-small { border-top: 1px solid rgb(255 255 255 / 15%); }

.pt-chiave-riga { display: flex; gap: 8px; align-items: flex-start; }
.pt-chiave-riga > :first-child { flex: 1 1 auto; }