/* T-022 PolisEnergia - accessibilita globale + modalita "app telefono centrata".
   Palette: blu #004C94, oro #F4B221, blu scuro #00335F. */
:root{ --pe-blu:#004C94; --pe-blu-scuro:#00335F; --pe-oro:#F4B221; }
:focus-visible{ outline:2px solid var(--pe-oro); outline-offset:2px; border-radius:2px; }
.btn-accent,.bg-accent,.di-btn--accent{ color:var(--pe-blu-scuro); }
table td,table th,.amount,[data-amount]{ font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }

/* ===== MODALITA APP TELEFONO: attiva solo su schermi larghi (>=760px) ===== */
/* Sui telefoni veri (<760px) NON si attiva: il sito resta a tutto schermo. */
@media (min-width:760px){
  html,body{ background:#e6eaf1 !important; }
  body{ margin:0 !important; }
  #root{
    max-width:440px !important;
    margin:22px auto !important;
    min-height:calc(100vh - 44px) !important;
    background:#ffffff !important;
    border-radius:38px !important;
    box-shadow:0 26px 70px rgba(3,20,45,.28) !important;
    border:1px solid rgba(0,0,0,.06) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  /* niente elementi che sforano la colonna telefono */
  #root *{ max-width:100% !important; }
  /* barra di navigazione: va a capo invece di sforare */
  #root header,#root nav{ flex-wrap:wrap !important; row-gap:6px !important; }
  /* card affiancate -> impilate in colonna (Tailwind grid-cols-*) */
  #root [class*="grid-cols-"]{ grid-template-columns:1fr !important; }
  /* tema scuro: interno coerente */
  .theme-dark #root,[data-theme="dark"] #root,html.dark #root{ background:#0B0F1A !important; }
}