/**
 * ite-mobile.css — Icaro Template Engine
 * Override specifici PWA, safe-area, touch target, iOS/Android
 * Versione: 1.0.0
 */

/* ═══════════════════════════════════════════════════════
   SAFE AREA (notch, Dynamic Island, gesture bar)
   ═══════════════════════════════════════════════════════ */
.ite-app {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.ite-sidebar {
  padding-bottom: env(safe-area-inset-bottom);
}

.ite-sticky-bar,
.ite-chat-input-bar {
  padding-bottom: calc(var(--ite-space-3) + env(safe-area-inset-bottom));
}

/* ═══════════════════════════════════════════════════════
   TOUCH TARGETS (minimo 44x44px per WCAG 2.5.5)
   ═══════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .ite-btn,
  .ite-nav-item,
  .ite-page-btn,
  .ite-tab {
    min-height: 44px;
  }

  .ite-btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .ite-toggle {
    width: 44px;
    height: 26px;
  }

  .ite-toggle-thumb {
    width: 20px;
    height: 20px;
  }

  .ite-toggle input:checked ~ .ite-toggle-thumb {
    transform: translateX(18px);
  }

  .ite-input,
  .ite-select,
  .ite-textarea {
    font-size: 16px; /* Previene zoom automatico su iOS */
    min-height: 44px;
  }

  .ite-textarea {
    min-height: 80px;
  }

  .ite-chat-input-bar textarea {
    font-size: 16px;
  }

  /* Padding aumentato per link nav */
  .ite-nav-item {
    padding: 10px 12px;
  }

  /* Paginazione con touch target più grandi */
  .ite-page-btn {
    min-width: 44px;
    height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════
   PWA STANDALONE MODE
   ═══════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  /* Topbar più alta in standalone per accomodare status bar */
  .ite-mobile-topbar {
    height: calc(56px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  /* Main content sposta sotto topbar standalone */
  .ite-main {
    padding-top: calc(56px + env(safe-area-inset-top));
  }

  /* Rimuovi border-radius in standalone per look nativo */
  .ite-card,
  .ite-stat-box {
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   SCROLL TOUCH (smooth su iOS)
   ═══════════════════════════════════════════════════════ */
.ite-chat-messages,
.ite-nav,
.ite-table-wrap,
.ite-tabs,
.ite-kanban {
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════
   PREVENZIONE ZOOM FORM (iOS)
   ═══════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  .ite-input,
  .ite-select,
  .ite-textarea,
  .ite-pin-input,
  .ite-tags-input {
    font-size: max(16px, 1rem);
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE CARD LAYOUT (scroll orizzontale)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ite-kanban {
    flex-direction: column;
  }

  .ite-kanban-col {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }

  .ite-two-col {
    grid-template-columns: 1fr;
  }

  .ite-stepper {
    flex-direction: column;
    gap: var(--ite-space-2);
  }

  .ite-step-line {
    display: none;
  }

  /* Stack stat grid a 2 colonne su schermi piccoli */
  .ite-grid-4,
  .ite-grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  /* Tabs scroll orizzontale senza frecce */
  .ite-tabs {
    padding-bottom: 2px;
  }

  .ite-tab {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ═══════════════════════════════════════════════════════
   ANIMAZIONI RIDOTTE (rispetta preferenza utente)
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ite-sidebar,
  .ite-drawer,
  .ite-modal,
  .ite-toast {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   OFFLINE BANNER
   ═══════════════════════════════════════════════════════ */
#ite-offline-banner {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ═══════════════════════════════════════════════════════
   OVERFLOW ORIZZONTALE — previeni scroll involontario
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Kanban: scroll orizzontale controllato, larghezza colonne ridotta */
  .ite-kanban {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--ite-space-3);
  }
  .ite-kanban-col {
    min-width: 280px;
    max-width: 85vw;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  /* Mobile: kanban colonna quasi full-width */
  .ite-kanban-col {
    min-width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
  }

  /* Previeni overflow orizzontale globale */
  .ite-page,
  .ite-stat-box,
  .ite-two-col {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* Card: max-width senza hidden */
  .ite-card {
    max-width: 100%;
  }

  /* ── TABELLA → CARD su mobile ─────────────────────────── */
  .ite-table-wrap {
    overflow-x: visible;
  }
  .ite-table thead {
    display: none;
  }
  .ite-table,
  .ite-table tbody,
  .ite-table tr,
  .ite-table td {
    display: block;
    width: 100%;
  }
  .ite-table tr {
    border: 1px solid var(--ite-border);
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 2px 0;
    background: var(--ite-surface);
  }
  .ite-table tr:hover {
    background: var(--ite-surface2);
  }
  .ite-table td {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ite-border);
    font-size: 0.82rem;
    word-break: break-word;
  }
  .ite-table td:last-child {
    border-bottom: none;
  }
  .ite-table td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ite-text3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 80px;
    max-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
  }
  .ite-table td[data-label=""]::before {
    display: none;
    min-width: 0;
  }
  /* Colonna azioni: flex-wrap */
  .ite-table td[data-label=""] {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  /* Riga vuota (nessun dato) */
  .ite-table td[colspan]::before {
    display: none;
  }
  .ite-table td[colspan] {
    justify-content: center;
  }

  /* Paginazione compatta */
  .ite-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  /* Topbar actions — nascondi switch tema su schermi piccoli */
  .ite-topbar {
    gap: var(--ite-space-2);
  }

  /* Badge e tag più piccoli */
  .ite-badge,
  .ite-ch,
  .ite-priority,
  .ite-sla {
    font-size: 10px;
  }

  /* Modal fullscreen su mobile */
  .ite-modal-overlay .ite-modal:not(.ite-modal.sm) {
    margin: 0;
    border-radius: 0;
    max-height: 100dvh;
    height: 100dvh;
  }

  /* Drawer full-width su mobile */
  .ite-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stat grid: 2 colonne minimo su mobile */
  .ite-stat-grid,
  [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PWA — BARRA NAVIGAZIONE BOTTOM (solo quando sidebar nascosta)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Spazio in fondo per evitare sovrapposizione con gesture bar */
  .ite-main {
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  }

  /* Input a piè pagina (chat) — rispetta gesture bar */
  .ite-chat-input-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  /* Sticky bar su mobile */
  .ite-sticky-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ite-sticky-bar .ite-btn {
    flex: 1;
    min-width: 120px;
  }
}

/* ═══════════════════════════════════════════════════════
   SCHERMI MOLTO PICCOLI (iPhone 12 mini, SE — ≤375px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  /* Padding ridotto al minimo */
  .ite-page {
    padding: var(--ite-space-2) var(--ite-space-3);
  }

  /* Font-size leggermente ridotta per densità */
  .ite-table {
    font-size: 11px;
  }
  .ite-table th,
  .ite-table td {
    padding: 6px 6px;
  }

  /* Stat-box più compatta */
  .ite-stat-box {
    padding: 10px 12px;
  }
  .ite-stat-value {
    font-size: 1.4rem;
  }

  /* Nav item più compatto */
  .ite-nav-item {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Bottoni full-width su schermi piccoli quando in stack */
  .ite-page-header .ite-btn {
    font-size: 12px;
    padding: 0 10px;
  }

  /* Card padding ridotto */
  .ite-card-body {
    padding: 12px 14px;
  }

  /* Modal — margini ridotti */
  .ite-modal {
    margin: 8px;
    border-radius: var(--ite-radius-sm);
  }

  /* Timeline più compatta */
  .ite-tl-item {
    gap: 8px;
  }

  /* Topbar mobile — brand text più corto */
  .ite-mobile-brand {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════
   FIX: previeni overflow-x su tutti gli schermi
   ═══════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.ite-app {
  max-width: 100vw;
  overflow-x: hidden;
}
.ite-logo-name, .ite-logo-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
@media (max-width: 768px) {
  .ite-main {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .ite-two-col {
    grid-template-columns: 1fr !important;
  }
  form[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ═══════════════════════════════════════════════════════
   STATISTICHE — grid responsive
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .stat-g3 {
    grid-template-columns: 1fr !important;
  }
  .stat-span2 {
    grid-column: span 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   HELPDESK — FIX MOBILE SPAZIATURE E ALLINEAMENTI
   ═══════════════════════════════════════════════════════ */

/* Grid inline 2-col: collassa su mobile stretto */
@media (max-width: 600px) {
  /* Qualsiasi div con display:grid e 2+ colonne inline */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:2fr 2fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:2fr 2fr 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tabella: scroll orizzontale invece di overflow nascosto */
  .ite-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ite-table {
    min-width: 480px;
  }

  /* Card: padding ridotto */
  .ite-card {
    padding: var(--ite-space-3);
  }

  /* Page header: azioni sotto il titolo */
  .ite-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ite-page-actions {
    width: 100%;
  }

  .ite-page-actions .ite-btn {
    width: 100%;
    justify-content: center;
  }

  /* Badge nel subtitle: wrap su mobile */
  .ite-page-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
  }

  /* Form search bar full width */
  .ite-search-bar {
    max-width: 100% !important;
  }

  /* Paginazione: numeri su più righe */
  div[style*="justify-content:center"] {
    flex-wrap: wrap;
  }

  /* Flex row con gap: wrap su mobile */
  div[style*="display:flex"][style*="gap:12px"],
  div[style*="display:flex"][style*="gap:10px"] {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════
   PWA STANDALONE — fix barra di stato e overflow
   ═══════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  /* Evita rimbalzo elastico iOS */
  html, body {
    overscroll-behavior: none;
  }

  /* Sidebar logo: più spazio per safe area */
  .ite-sidebar-logo {
    padding-top: calc(var(--ite-space-4) + env(safe-area-inset-top));
  }
}

/* ═══════════════════════════════════════════════════════
   HAMBURGER — ANIMAZIONE APERTURA
   ═══════════════════════════════════════════════════════ */
.ite-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.ite-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.ite-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}


/* ═══════════════════════════════════════════════════════
   SIDEBAR SCROLL FIX — mobile e PWA
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar mobile: altezza piena viewport senza barra browser */
  .ite-sidebar {
    height: 100vh;
    height: 100svh;
    height: calc(100vh - env(safe-area-inset-top));
  }

  /* Nav area: prende tutto lo spazio e scorre */
  .ite-sidebar .ite-nav {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Spazio in fondo per la gesture bar iOS */
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* Footer sidebar sempre visibile in fondo */
  .ite-sidebar-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--ite-bg2);
    border-top: 1px solid var(--ite-border);
  }
}

/* PWA standalone: stessa fix */
@media (display-mode: standalone) {
  .ite-sidebar {
    height: 100svh;
  }
  .ite-sidebar .ite-nav {
    flex: 1 1 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════
   BOTTONI IN FONDO ALLE PAGINE — distanza da elementi sotto
   ═══════════════════════════════════════════════════════ */

/* Ogni card con bottone submit al fondo: spazio extra */
.ite-card .ite-btn[type="submit"],
.ite-card .ite-btn-group {
  margin-top: var(--ite-space-2);
}

/* Pagina con contenuto scrollabile: spazio in fondo
   evita che l'ultimo bottone tocchi la gesture bar */
@media (max-width: 768px) {
  .ite-page {
    padding-bottom: calc(var(--ite-space-6) + env(safe-area-inset-bottom));
  }

  /* Sticky bar: altezza minima e safe area */
  .ite-sticky-bar {
    padding-bottom: calc(var(--ite-space-3) + env(safe-area-inset-bottom));
    min-height: calc(52px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════
   iPhone 13 mini e schermi ≤375px — FIX SPECIFICI
   ═══════════════════════════════════════════════════════ */

/* Nascondi topbar desktop su mobile (sostituita da mobile-topbar) */
@media (max-width: 768px) {
  .ite-topbar {
    display: none;
  }

  /* Titolo pagina nella mobile topbar */
  .ite-mobile-topbar .ite-mobile-brand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 80px);
  }
}

/* Tabelle: su 375px evita min-width fisso che causa scroll */
@media (max-width: 480px) {
  .ite-table {
    min-width: unset;
  }
}

/* Ticket: layout chat + sidebar collassa in colonna singola */
@media (max-width: 768px) {
  .ite-chat-layout {
    flex-direction: column !important;
  }
  .ite-chat-area {
    width: 100% !important;
    min-width: unset !important;
  }
  .ite-chat-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--ite-border);
  }
  /* Input chat: font 16px per evitare zoom iOS */
  .ite-chat-input-bar textarea,
  .ite-chat-input-bar input {
    font-size: 16px !important;
  }
}

/* Rapporti/form: bottoni azione in colonna su mobile */
@media (max-width: 480px) {
  .ite-sticky-bar .ite-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* ═══════════════════════════════════════════════════════
   CHAT BUBBLE — fix overflow su mobile stretto
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Bubble più larghe su schermi piccoli */
  .ite-msg-content {
    max-width: 90%;
  }

  /* Testo nella bubble: break-word forzato */
  .ite-msg-bubble {
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  /* Area messaggi: padding ridotto per guadagnare spazio */
  .ite-chat-messages {
    padding: var(--ite-space-3);
  }

  /* Intestazione ticket: layout compatto */
  .ite-chat-area > .ite-card:first-child {
    padding: var(--ite-space-2) var(--ite-space-3);
  }
}

/* ═══════════════════════════════════════════════════════
   FIX OVERFLOW CHAT — grid cell deve avere min-width: 0
   ═══════════════════════════════════════════════════════ */
.ite-two-col > div {
  min-width: 0;
}

.ite-chat-area {
  min-width: 0;
  overflow: hidden;
}

.ite-chat-messages {
  min-width: 0;
  overflow-x: hidden;
}

.ite-msg {
  min-width: 0;
  max-width: 100%;
}

.ite-msg-content {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ite-msg-bubble {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}