/* ═══════════════════════════════════════════════════════════════════════
   Iorizzo — Tema Blu Istituzionale + Layout Responsive
   WCAG 2.2 AA · EN 301 549
   Breakpoint: 320 · 430 · 640 · 768 · 1024 · 1280 · 1920 px
   Includere nel template base o nel singolo index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tema blu istituzionale ── */
:root {
  --app-background: linear-gradient(
    135deg,
    #0D3F8A 0%,
    #0A3474 55%,
    #082C63 100%
  );
}

html,
body {
  background: var(--app-background) !important;
  min-height: 100vh;
}

/* ── 2. Neutralizza effetti decorativi globali (glow, blob, before) ── */
body::before,
body::after {
  display: none !important;
}

/* Blob decorativi (green-sharing / EGS Energia) */
.blob-1, .blob-2, .blob-3, .blob { display: none !important; }

/* ── 3. Box model globale ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── 4. Tipografia ── */
body {
  font-size: 1rem;
  line-height: 1.5;
}

/* ── 5. Immagini responsive ── */
img, video, svg {
  max-width: 100%;
  height: auto;
}

/* ── 6. Focus visibile (WCAG 2.4.7) ── */
:focus-visible {
  outline: 3px solid #60a5fa !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── 7. Touch target ── */
button,
a,
[role="button"] {
  min-height: 24px;
}

/* ── 8. Tabelle scrollabili su mobile ── */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 0.875rem;
  }

  th, td {
    white-space: nowrap;
    padding: 8px 10px;
  }
}

/* ── 9. Form responsive ── */
@media (max-width: 640px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="search"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1rem; /* previene zoom iOS */
  }

  /* Grid form su 1 colonna */
  [class*="form-grid"],
  [class*="form-row"],
  [class*="input-grid"],
  [class*="field-group"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 10. Card/stat grid responsive ── */
@media (max-width: 640px) {
  .stats-grid,
  .cards-grid,
  [class*="cards"],
  [class*="stat-grid"],
  [class*="grid-cols"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .stats-grid,
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 11. Modali contenute nello schermo ── */
@media (max-width: 640px) {
  [class*="modal"],
  [class*="dialog"],
  [role="dialog"] {
    width: min(560px, 95vw) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 5vh auto !important;
    border-radius: 12px !important;
  }
}

/* ── 12. Header/topbar responsive ── */
@media (max-width: 640px) {
  header,
  .header,
  .top-bar,
  .topbar,
  [class*="-header"],
  [class*="header-"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ── 13. Main content — nessun overflow orizzontale ── */
main,
.main,
.content,
.page-body,
[class*="-content"],
[class*="main-"] {
  overflow-x: hidden;
  max-width: 100%;
}

/* Sidebar mobile: il contenuto si espande */
@media (max-width: 768px) {
  main,
  .main,
  .content,
  .page-body,
  [class*="-content"] {
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── 14. Safe area (notch iOS) ── */
body {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* ── 15. Overflow wrap testi ── */
h1, h2, h3, h4, p, td, th, li, label, span {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 16. Print ── */
@media print {
  html, body { background: white !important; color: black !important; }
  .blob-1, .blob-2, .blob-3 { display: none !important; }
}