/* ============================================
   Backlixo — Mobile Responsive Styles
   Applies to all app pages (dashboard, alerts,
   settings, reports, onboarding)
   ============================================ */

/* ── Hamburger button (hidden on desktop) ── */
.mob-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 200;
}

/* ── Sidebar overlay backdrop ── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

@media (max-width: 768px) {

  /* ── Hamburger visible ── */
  .mob-menu-btn { display: flex; }

  /* ── Sidebar slides in from left ── */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 200;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .sidebar.open { transform: translateX(0); }

  /* ── Main takes full width ── */
  .main { margin-left: 0 !important; }

  /* ── Topbar ── */
  .topbar { padding: 12px 16px; gap: 8px; }
  .topbar-left { gap: 8px; flex-wrap: wrap; }
  .topbar-right { gap: 6px; }
  .page-title { font-size: 15px; }

  /* ── Stats grid: 2 cols on mobile ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats-grid .stat:last-child {
    grid-column: span 2;
  }

  /* ── Content padding ── */
  .content { padding: 16px !important; }

  /* ── Tables: horizontal scroll ── */
  .table-wrap, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── Filters row: stack ── */
  .filters { flex-direction: column !important; gap: 8px !important; }
  .filters .search-wrap { width: 100% !important; }
  .filters select { width: 100% !important; }

  /* ── Modal: full screen on mobile ── */
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* ── Settings two-col layout ── */
  .content.settings-layout,
  .content > .settings-body,
  [class*="settings"] .content {
    padding: 0 !important;
  }
  .settings-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 12px !important;
    gap: 4px !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav-item {
    flex-shrink: 0;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .settings-nav-icon { display: none; }
  .settings-body { padding: 16px !important; }

  /* ── Reports charts grid ── */
  .charts-row,
  .two-col,
  .stats-row,
  .plan-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Alerts stat cards ── */
  .alerts-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Field rows in forms ── */
  .field-row,
  .fgrid {
    grid-template-columns: 1fr !important;
  }

  /* ── Btn rows ── */
  .btn-row { flex-direction: column !important; }
  .btn-row .btn { width: 100% !important; justify-content: center; }

  /* ── Card padding ── */
  .card, .chart-card, .table-card { border-radius: 10px !important; }
  .card-body, .card-header, .card-footer { padding: 14px 16px !important; }

  /* ── Topbar buttons — hide labels on very small ── */
  @media (max-width: 480px) {
    .btn-label { display: none; }
    .topbar-right .btn { padding: 8px 10px; }
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .topbar { padding: 10px 12px; }
  .content { padding: 12px !important; }
}

/* ── Dashboard specific ── */
@media (max-width: 480px) {
  /* Hide text labels on topbar buttons, keep icons */
  .btn-label { display: none; }
  .btn-add-label { display: none; }

  /* Topbar right: shrink gap */
  .topbar-right { gap: 4px; }
  .btn { padding: 7px 10px; font-size: 12px; }
  .theme-btn { width: 32px; height: 32px; font-size: 13px; }
}