/* Feezo shared mobile responsive rules.
 * Included on every tenant page. Deep per-page mobile layouts live inline
 * in their respective <style> blocks.
 */

@media (max-width: 768px) {
  /* Sidebar on mobile: either squash it above the main content or scroll it
   * horizontally. Since the existing sidebar markup varies across pages,
   * use a broad approach: make <aside> stack above main and scroll its nav
   * items horizontally. Safe for index/students/collections/follow-ups/
   * reports/settings/profile that share the same <aside><nav class="nav">
   * structure. */
  body { overflow-x: hidden; }

  aside {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  aside .brand,
  aside .brand-box,
  aside .logo-wrap {
    padding: 8px 14px !important;
  }

  aside nav.nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  aside nav.nav::-webkit-scrollbar { display: none; }

  aside nav.nav a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap;
    font-size: 13px !important;
  }
  aside nav.nav a svg { width: 16px !important; height: 16px !important; }

  /* Main content fills the width. */
  .main, main {
    margin-left: 0 !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Tables: horizontal scroll instead of overflow. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.table { min-width: 520px; }

  /* Modals: full-width, safer for phones. */
  .modal, .modal-panel, .drawer-panel {
    max-width: 100% !important;
    margin: 8px !important;
  }

  /* Topbar on mobile: tighten spacing + allow wrap. */
  .topbar, header.topbar {
    padding: 8px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* KPI strips: 2 columns instead of 4. */
  .kpis, .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Forms: stack fields. */
  .grid2 { grid-template-columns: 1fr !important; }
  .row { flex-wrap: wrap !important; }
  .field input, .field select, .field textarea { width: 100% !important; box-sizing: border-box; }

  /* Buttons: touch-friendly tap targets (44x44 minimum). */
  .btn {
    min-height: 40px;
    padding: 10px 14px !important;
  }
  .btn-sm {
    min-height: 36px;
    padding: 8px 10px !important;
  }

  /* Leads kanban: stack columns vertically. */
  .board {
    grid-template-columns: 1fr !important;
  }
  .col { min-height: auto !important; }

  /* Inbox: stack two panes top/bottom on mobile, threads above messages. */
  .two-col {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
  }
  .two-col > .card {
    max-height: 50vh;
  }

  /* Fee-plan editor: stack line-row cells. */
  .line-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* PWA install button: avoid overlapping bottom content on small screens. */
  #pwa-install-btn {
    bottom: 80px !important;
    right: 10px !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

/* iOS safe-area support. */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}