/* GestionaleAffitti — app.css */
:root{ --side-w:248px; }

/* Sidebar */
#sidebar{ width:var(--side-w); min-height:100vh; flex-shrink:0; transition:transform .25s ease; z-index:1040; }
.side-link{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.78); text-decoration:none;
  padding:.5rem .75rem; border-radius:7px; margin:1px 4px; font-size:.9rem; transition:background .15s,color .15s; }
.side-link:hover{ color:#fff; background:rgba(255,255,255,.1); }
.side-link.active{ color:#fff; background:#0d6efd; }
.side-link i{ width:18px; text-align:center; flex-shrink:0; }
.side-link .badge{ font-size:.65rem; }
.topbar{ z-index:1030; }

@media(max-width:991.98px){
  #sidebar{ position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); }
  #sidebar.show{ transform:translateX(0); }
  .side-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1035; }
  .side-overlay.show{ display:block; }
}

/* Cards */
.stat-card{ border:none; border-radius:12px; transition:transform .15s,box-shadow .15s; }
.stat-card:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.stat-ico{ width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; }
.card-hover{ transition:box-shadow .15s; }
.card-hover:hover{ box-shadow:0 4px 16px rgba(0,0,0,.12); }

/* Status badges */
.sb{ font-size:.72rem; font-weight:600; padding:.25em .55em; border-radius:6px; text-transform:uppercase; letter-spacing:.4px; display:inline-block; }
.sb-active,.sb-paid,.sb-completed,.sb-low{ background:#d1f0e0; color:#0a6640; }
.sb-pending,.sb-medium{ background:#fff3cd; color:#7a5700; }
.sb-late,.sb-urgent,.sb-failed{ background:#fde8e8; color:#7a0000; }
.sb-partial,.sb-high{ background:#ffe5cc; color:#7a3300; }
.sb-expired,.sb-cancelled{ background:#e8e8e8; color:#555; }
.sb-terminated{ background:#e2cef5; color:#4a1280; }

/* Provider pills */
.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:20px; font-size:.75rem; font-weight:600; }
.pill-local{ background:#dbeafe; color:#1e40af; } .pill-wasabi{ background:#fef9c3; color:#92400e; }
.pill-s3{ background:#fff7ed; color:#c2410c; } .pill-r2{ background:#ede9fe; color:#5b21b6; }

/* Auth */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); padding:1.5rem; }
.auth-wrap.auth-admin{ background:linear-gradient(135deg,#1e293b 0%,#7f1d1d 100%); }
.auth-card{ max-width:440px; width:100%; border:none; border-radius:18px;
  box-shadow:0 25px 70px rgba(0,0,0,.3); overflow:hidden; }
.auth-card-head{ padding:2.2rem 2rem 1.4rem; }
.auth-card-body{ padding:0 2rem 2rem; }
.auth-logo{ width:64px; height:64px; margin:0 auto 1rem; border-radius:18px;
  background:linear-gradient(135deg,#0d6efd,#5b8def); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:2rem; box-shadow:0 8px 20px rgba(13,110,253,.35); }
.auth-logo-admin{ background:linear-gradient(135deg,#dc3545,#7f1d1d); box-shadow:0 8px 20px rgba(220,53,69,.35); }
.auth-card .form-control-lg{ font-size:1rem; }
.auth-card .input-group-text{ background:#f8f9fa; color:#6c757d; }

/* AI chat */
.chat-msg{ padding:.5rem .75rem; border-radius:12px; max-width:85%; font-size:.9rem; white-space:pre-wrap; }
.chat-msg.me{ background:#0d6efd; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-msg.ai{ background:#f1f3f5; color:#212529; align-self:flex-start; border-bottom-left-radius:4px; }
[data-bs-theme=dark] .chat-msg.ai{ background:#2c3034; color:#e9ecef; }
#chatStream{ display:flex; flex-direction:column; gap:8px; }

/* Credit pack cards */
.pack-card{ border:2px solid transparent; border-radius:14px; transition:border-color .15s,transform .15s; }
.pack-card:hover{ border-color:#0d6efd; transform:translateY(-3px); }

.form-label{ font-weight:500; font-size:.875rem; }
.cursor-pointer{ cursor:pointer; }
.w-fit{ width:fit-content; }

/* ── Admin: UX configurazioni ───────────────────────────────── */
.settings-tabs .nav-link{
  color:#475569; background:#f1f5f9; border:1px solid transparent;
  border-radius:10px; padding:.5rem .9rem; font-size:.9rem; font-weight:500;
  transition:all .15s ease;
}
.settings-tabs .nav-link:hover{ background:#e2e8f0; color:#1e293b; }
.settings-tabs .nav-link.active{
  background:#0d6efd; color:#fff; box-shadow:0 4px 12px rgba(13,110,253,.3);
}
[data-bs-theme="dark"] .settings-tabs .nav-link{ background:#1e293b; color:#94a3b8; }
[data-bs-theme="dark"] .settings-tabs .nav-link:hover{ background:#334155; color:#e2e8f0; }

/* Card configurazioni più ariose */
.settings-tabs ~ .row .card,
.settings-tabs ~ .card{ border:1px solid #e9ecef; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card-header.fw-semibold{ background:#fafbfc; border-bottom:1px solid #eef0f2; padding:.85rem 1.1rem; }
[data-bs-theme="dark"] .card-header.fw-semibold{ background:#1a2332; border-bottom-color:#2a3645; }

/* Form switch più grandi e leggibili nelle impostazioni */
.form-switch .form-check-input{ cursor:pointer; }

/* Zona pericolosa (eliminazione account) */
.danger-zone{ border:1px solid #f5c2c7; border-radius:12px; background:#fff5f5; padding:1rem; }
[data-bs-theme="dark"] .danger-zone{ background:#2d1a1d; border-color:#5c2a30; }

/* ── Ottimizzazioni mobile mirate ────────────────────────────── */
@media (max-width: 575.98px){
  /* Evita lo zoom-in automatico di iOS al focus: i campi devono avere >=16px */
  input.form-control, input.form-control-sm,
  select.form-select, select.form-select-sm,
  textarea.form-control{ font-size: 16px; }

  /* Sidebar mobile leggermente più stretta su schermi molto piccoli */
  #sidebar{ width: 80vw; max-width: 300px; }

  /* Titoli pagina più compatti */
  h4{ font-size: 1.2rem; }

  /* Card e contenitori con padding ridotto per guadagnare spazio */
  .card-body{ padding: 0.9rem; }
  main.p-3, main.p-lg-4{ padding: 0.75rem !important; }

  /* Bottoni nei gruppi azione vanno a capo ordinatamente */
  .d-flex.gap-2.flex-wrap .btn{ flex: 1 1 auto; }

  /* Tab impostazioni scrollabili orizzontalmente invece di andare a capo */
  .settings-tabs{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; }
  .settings-tabs .nav-link{ white-space: nowrap; }

  /* Tabelle: testo un filo più piccolo per stare nello schermo */
  .table{ font-size: .9rem; }
}

/* Touch target minimi (accessibilità) su tutti i dispositivi touch */
@media (hover: none) and (pointer: coarse){
  .btn, .side-link, .nav-link, .page-link{ min-height: 40px; display: inline-flex; align-items: center; }
  .btn-sm{ min-height: 36px; }
}

@media (max-width: 575.98px){
  /* Nomi file: tronca più corto per non sforare */
  .text-truncate[style*="max-width:240px"]{ max-width: 140px !important; }
}

/* ── Tabelle come card su mobile ─────────────────────────────── */
@media (max-width: 767.98px){
  table.table-cards thead{ display:none; }
  table.table-cards, table.table-cards tbody, table.table-cards tr, table.table-cards td{ display:block; width:100%; }
  table.table-cards tr{
    margin-bottom:.75rem; border:1px solid var(--bs-border-color);
    border-radius:12px; padding:.6rem .8rem; background:var(--bs-body-bg);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  table.table-cards td{
    border:0; padding:.3rem 0; text-align:right;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  /* Etichetta colonna a sinistra, valore a destra */
  table.table-cards td::before{
    content: attr(data-label);
    font-weight:600; color:var(--bs-secondary-color);
    text-align:left; font-size:.8rem; flex-shrink:0;
  }
  /* Celle senza etichetta (es. azioni) occupano tutta la larghezza */
  table.table-cards td[data-label=""]{ justify-content:flex-end; padding-top:.5rem; }
  table.table-cards td[data-label=""]::before{ content:none; }
  /* Riga "nessun dato" resta centrata */
  table.table-cards td[colspan]{ justify-content:center; text-align:center; }
  table.table-cards td[colspan]::before{ content:none; }
  table.table-cards tfoot tr{ background:var(--bs-secondary-bg); font-weight:600; }
}

/* Feature toggle admin */
.feature-toggle-ico{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════
   OTTIMIZZAZIONI UX — Mobile & Desktop
   ═══════════════════════════════════════════════════════════════ */

/* — Desktop: contenuto più leggibile, spaziatura respiro — */
@media (min-width: 992px){
  .main-content{ max-width:1280px; }
  .card{ border-radius:14px; }
  /* Hover più fluido su elementi cliccabili */
  .side-link{ transition:background .12s, color .12s, padding-left .12s; }
  .side-link:hover{ padding-left:1.1rem; }
  .table-hover tbody tr{ transition:background .1s; }
}

/* — Tablet e mobile: tipografia e tap target — */
@media (max-width: 991.98px){
  body{ font-size:.95rem; }
  h4, .h4{ font-size:1.3rem; }
  h5, .h5{ font-size:1.1rem; }
  /* I bottoni e i campi sono più comodi da toccare */
  .btn{ padding:.5rem .9rem; }
  .btn-sm{ padding:.35rem .6rem; }
  .card-body{ padding:1rem; }
  /* Le righe di pulsanti d'azione vanno a capo invece di stringersi */
  .d-flex.gap-1, .d-flex.gap-2{ flex-wrap:wrap; }
}

/* — Mobile vero (≤575px) — */
@media (max-width: 575.98px){
  .main-content{ padding-left:.85rem; padding-right:.85rem; }
  /* Modali a tutto schermo: più spazio per compilare i form */
  .modal-dialog:not(.modal-fullscreen){ margin:.4rem; }
  .modal-content{ border-radius:14px; }
  /* I bottoni nei footer dei modali si impilano e diventano full-width */
  .modal-footer{ flex-direction:column-reverse; gap:.4rem; }
  .modal-footer > .btn{ width:100%; margin:0; }
  /* KPI e statistiche: 2 per riga invece di stringersi */
  .stat-ico{ width:40px; height:40px; font-size:1.2rem; }
  /* Titoli pagina + azioni: vanno a capo con ordine */
  .page-head{ flex-wrap:wrap; gap:.5rem; }
  /* Bottoni primari d'azione full-width per pollice */
  .btn-block-mobile{ width:100%; }
  /* Tab/pills scrollabili orizzontalmente senza rompere il layout */
  .nav-pills{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.3rem; }
  .nav-pills::-webkit-scrollbar{ height:0; }
  .nav-pills .nav-link{ white-space:nowrap; }
}

/* — Accessibilità tocco: target minimo 44px su dispositivi touch — */
@media (hover: none) and (pointer: coarse){
  .btn, .side-link, .nav-link, .form-select, .page-link{ min-height:44px; }
  .btn-sm{ min-height:38px; }
  /* Niente hover "appiccicoso" su touch */
  .stat-card:hover{ transform:none; }
}

/* — Riduzione movimento per chi lo preferisce — */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* — Focus visibile per accessibilità tastiera — */
.btn:focus-visible, .form-control:focus-visible, .side-link:focus-visible{
  outline:2px solid var(--bs-primary); outline-offset:2px;
}