/* ============================================================
   StayMastery HUB — Mobile Stylesheet
   Attivo SOLO su viewport ≤ 768px
   NON modifica nulla del layout desktop
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV — barra navigazione fissa in basso
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none; /* nascosta su desktop */
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER BUTTON — visibile solo mobile
   ═══════════════════════════════════════════════════════════ */
.btn-hamburger {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BACK BUTTON (messaggi)
   ═══════════════════════════════════════════════════════════ */
.mobile-back-btn {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   BREAKPOINT PRINCIPALE: ≤ 768px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── HAMBURGER ─────────────────────────────────────────── */
  .btn-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    border: none;
    background: transparent;
    color: var(--dark);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-fast);
    -webkit-tap-highlight-color: transparent;
  }
  .btn-hamburger:active { background: var(--bg-alt); }

  /* ── TOPBAR ────────────────────────────────────────────── */
  .topbar {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }
  .topbar-title {
    font-size: var(--text-base);
    font-weight: var(--fw-heavy);
  }
  /* Nasconde data e sync su mobile — troppo affollato */
  .topbar-date { display: none; }
  #syncBtn { display: none; }

  /* ── BOTTOM NAV ────────────────────────────────────────── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: var(--white);
    border-top: 1px solid var(--border);
    z-index: var(--z-sidebar);
    box-shadow: 0 -4px 20px rgba(26,23,20,.08);
    padding: 0 var(--sp-1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: var(--r-md);
    color: var(--muted);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    transition: color var(--dur-fast), background var(--dur-fast);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .mobile-bottom-nav .nav-item:hover,
  .mobile-bottom-nav .nav-item:active {
    color: var(--coral);
    background: var(--coral-pale);
  }
  .mobile-bottom-nav .nav-item.active {
    color: var(--coral);
    background: transparent;
  }
  .mobile-bottom-nav .nav-item.active .mob-nav-icon {
    background: var(--coral-pale);
  }
  .mob-nav-icon {
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    font-size: 18px;
    transition: background var(--dur-fast);
  }
  .mob-nav-label {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: .02em;
  }
  /* Badge messaggi sul bottom nav */
  .mob-nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    background: var(--coral);
    color: white;
    font-size: 9px;
    font-weight: var(--fw-black);
    min-width: 16px;
    height: 16px;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* ── MAIN AREA — padding bottom per bottom nav ─────────── */
  .main {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }

  /* ── PAGE CONTENT ──────────────────────────────────────── */
  .page-content {
    padding: var(--sp-3) var(--sp-3);
  }

  /* ── PAGE HEADER ───────────────────────────────────────── */
  .page-header {
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .page-header h1 {
    font-size: var(--text-xl);
  }
  .page-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .page-actions .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* ── KPI GRID: già 2 colonne in layout.css, qui raffiniamo */
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .kpi-card {
    padding: var(--sp-3);
  }
  .kpi-value {
    font-size: var(--text-xl);
  }

  /* ── CONTENT GRIDS ─────────────────────────────────────── */
  .content-grid-2,
  .content-grid-3,
  .content-grid-sidebar,
  .content-grid-sidebar-lg {
    grid-template-columns: 1fr;
  }
  .content-grid {
    gap: var(--sp-3);
  }

  /* ── CARDS ─────────────────────────────────────────────── */
  .card-body {
    padding: var(--sp-3);
  }

  /* ── FILTERS BAR ───────────────────────────────────────── */
  .filters-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
    gap: var(--sp-2);
  }
  .filters-bar::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; }

  /* ── TABS ──────────────────────────────────────────────── */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; }

  /* ── TABLES — scroll orizzontale ───────────────────────── */
  .table-wrap,
  [id$="Table"],
  .card > .card-body > table,
  .card-body > table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  table {
    min-width: 500px;
  }
  /* Eccezioni: tabelle piccole che funzionano già */
  .fdoc-lines-table { min-width: unset; }

  /* ── ════ MESSAGGI ════ ─────────────────────────────────── */
  /* Layout messaggi: pannello singolo su mobile */
  #page-messaggi {
    padding: 0;
    overflow: hidden;
  }
  #page-messaggi .page-header {
    display: none; /* nasconde header "Messaggi" su mobile — topbar lo mostra già */
  }
  .msg-layout {
    display: block;
    height: calc(100vh - var(--topbar-h) - 62px);
    border: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
  }
  /* Lista conversazioni: pannello principale */
  .msg-list {
    position: absolute;
    inset: 0;
    border-right: none;
    transform: translateX(0);
    transition: transform var(--dur-slow) var(--ease);
    background: var(--white);
  }
  /* Thread: nascosto a destra */
  .msg-thread {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease);
    background: var(--white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Quando thread è aperto: lista va a sinistra, thread viene in primo piano */
  .msg-layout.thread-open .msg-list {
    transform: translateX(-100%);
  }
  .msg-layout.thread-open .msg-thread {
    transform: translateX(0);
  }
  /* Bottone back nei messaggi */
  .mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--coral);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--sp-2) 0;
    margin-bottom: var(--sp-2);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-back-btn:active { opacity: .7; }
  /* Thread header: diventa verticale su mobile */
  .msg-thread-header {
    padding: var(--sp-3) var(--sp-4);
    flex-direction: column;
    gap: var(--sp-2);
    flex-shrink: 0;
  }
  .msg-thread-header > div:last-child {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  /* Reply bar: padding ridotto */
  .msg-reply-bar {
    padding: var(--sp-3) var(--sp-3) var(--sp-3);
  }
  /* Filters messaggi: scroll orizzontale */
  .msg-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-2);
  }
  .msg-filters::-webkit-scrollbar { display: none; }
  .msg-filter-btn { flex-shrink: 0; font-size: 11px; padding: 4px 10px; }
  /* Bubbles messaggi: più larghe su mobile */
  .msg-bubble-wrap { max-width: 86%; }

  /* ── CALENDARIO ────────────────────────────────────────── */
  /* Già ha overflow-x auto nel container, ma aggiungiamo touch */
  .cal-container {
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
  }
  .cal-unit-label { width: 140px; font-size: 9px; }
  .cal-unit-cell  { width: 140px; }
  .cal-unit-name  { font-size: var(--text-xs); }
  .cal-property-name { font-size: 9px; }

  /* ── PROPRIETÀ PILLOLE ─────────────────────────────────── */
  .kb-prop-cards {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
  }
  .kb-prop-cards::-webkit-scrollbar { display: none; }
  .kb-prop-card { flex-shrink: 0; min-width: 140px; }

  /* ── KB GRIDS ──────────────────────────────────────────── */
  .kb-grid-2,
  .kb-grid-3 {
    grid-template-columns: 1fr;
  }

  /* ── MODALI — full screen su mobile ─────────────────────── */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-shell,
  .tmpl-modal-shell {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .fdoc-shell {
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  /* Grids dentro modal */
  .tmpl-row-2,
  .tmpl-row-3,
  .fdoc-top {
    grid-template-columns: 1fr;
  }
  .tmpl-modal-body {
    padding: var(--sp-4);
  }
  .tmpl-modal-footer {
    padding: var(--sp-3) var(--sp-4);
    flex-direction: column-reverse;
    gap: var(--sp-2);
  }
  .tmpl-modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── CONTABILITÀ ───────────────────────────────────────── */
  /* Tabs proprietà: scroll */
  .ow-tab { padding: 8px 12px; font-size: 12px; }

  /* ── PULIZIE GRID ──────────────────────────────────────── */
  .cleaning-grid {
    grid-template-columns: 1fr;
  }

  /* ── TODAY COLUMNS ─────────────────────────────────────── */
  .today-cols-grid {
    grid-template-columns: 1fr;
  }

  /* ── BOOKING CARDS ─────────────────────────────────────── */
  .booking-card {
    padding: var(--sp-3);
  }

  /* ── TODAY BOOKING CARDS ───────────────────────────────── */
  .bookings-today-grid {
    grid-template-columns: 1fr;
  }

  /* ── BUTTONS FULL WIDTH in alcune sezioni ─────────────── */
  .btn-full-mobile {
    width: 100%;
    justify-content: center;
  }

  /* ── INPUT / SELECT ────────────────────────────────────── */
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px; /* previene zoom automatico su iOS */
  }

  /* ── TOAST ─────────────────────────────────────────────── */
  .toast-container {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: var(--sp-3);
    right: var(--sp-3);
  }
  .toast {
    max-width: 100%;
  }

  /* ── LOGIN ─────────────────────────────────────────────── */
  .login-card {
    padding: var(--sp-8) var(--sp-5);
    border-radius: var(--r-xl);
  }

  /* ── EMPTY STATES ──────────────────────────────────────── */
  .empty-state {
    padding: var(--sp-8) var(--sp-4);
  }

  /* ── AVATAR ────────────────────────────────────────────── */
  .avatar { touch-action: manipulation; }

  /* ── SIDEBAR: testo visibile quando aperta ─────────────── */
  .sidebar.open .sidebar-logo-text,
  .sidebar.open .sidebar-logo-badge,
  .sidebar.open .nav-item span:not(.nav-icon):not(.nav-badge),
  .sidebar.open .nav-section-label,
  .sidebar.open .sidebar-user-info {
    display: block;
    opacity: 1;
  }

  /* ── CONTABILITÀ TABS (proprietari/co) ─────────────────── */
  .ow-prop-pill { font-size: 12px; padding: 5px 12px; }

  /* ── RECHARTS / GRAFICI ─────────────────────────────────── */
  [class*="recharts"],
  [class*="chart"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

} /* end @media 768px */

/* ════════════════════════════════════════════════════════════
   BREAKPOINT FINE: ≤ 480px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .kpi-value { font-size: var(--text-lg); }
  .kpi-card { padding: var(--sp-2) var(--sp-3); }

  .page-header h1 { font-size: var(--text-lg); }

  /* Bottom nav label ancora più piccola */
  .mob-nav-label { font-size: 8px; }
  .mob-nav-icon { font-size: 16px; width: 28px; height: 24px; }
  .mobile-bottom-nav { height: 58px; }
  .main { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  .page-content { padding: var(--sp-2) var(--sp-2); }
  .card-body { padding: var(--sp-2) var(--sp-3); }

  /* Topbar compatto */
  .topbar { padding: 0 var(--sp-2); }
  .topbar-title { font-size: var(--text-sm); }

} /* end @media 480px */