/* ============================================================
   Pipnotic — Mobile & Responsive Styles
   Loaded after app.css.
   Breakpoints:
     tablet : ≤ 1024px
     mobile : ≤ 768px
     small  : ≤ 480px

   Phase 1 cleanup:
   - Removed fragile [style*="grid-template-columns:repeat(5"] selectors.
     The new .kpi-grid in app.css is auto-responsive and doesn't need them.
   - Removed duplicate flash handler. flash dismiss now lives in components.js.
   - Removed "Page X of Y" regex matcher. Pagination now uses .pager
     component classes from app.css.
   - All grid responsiveness is now handled by the component classes
     (.kpi-grid, .split-2, .split-3, .filters__grid) — no inline-style
     attribute matching required.
   ============================================================ */

/* ── Mobile sidebar overlay ─────────────────────────────────── */
@media (max-width: 900px) {

  /* Dashboard layout becomes single column */
  .dashboard-layout {
    grid-template-columns: 1fr;
    position: relative;
  }

  /* Sidebar hidden by default, slides in as overlay */
  .sidebar {
    display: block !important; /* override desktop display:none from app.css */
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .25s var(--ease);
    border-right: 1px solid var(--border-2);
    background: var(--surface);
    overflow-y: auto;
    padding-top: var(--s6);
  }
  .sidebar--open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.5);
  }

  /* Overlay backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 299;
    backdrop-filter: blur(2px);
  }
  .sidebar-backdrop--visible { display: block; }

  /* Mobile menu toggle button — shown on mobile */
  .mobile-menu-btn {
    display: flex !important;
    position: fixed;
    bottom: var(--s5);
    left: var(--s4);
    z-index: 298;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 20px rgba(0,229,192,.35);
    transition: transform .2s, box-shadow .2s;
  }
  .mobile-menu-btn:active { transform: scale(.93); }

  /* Dashboard content full width */
  .dashboard-content {
    padding: var(--s4) var(--s4) var(--s8);
    min-width: 0;
    overflow-x: hidden;
  }

  /* Page header */
  .page-header h1 { font-size: 1.4rem; }
}

/* Hide mobile menu button on desktop */
.mobile-menu-btn { display: none; }

/* ── Cards & forms at mobile ────────────────────────────────── */
@media (max-width: 768px) {
  .card { padding: var(--s4); }

  /* Mobile-friendly form spacing */
  .form-row { grid-template-columns: 1fr; }
  .form-stack { gap: var(--s3); }

  /* Flash messages full width */
  .flash-container {
    left: var(--s3);
    right: var(--s3);
    max-width: none;
  }

  /* Tables: tighter padding and horizontal scroll */
  .table th,
  .table td {
    padding: var(--s2) var(--s3);
    font-size: .8rem;
    white-space: nowrap;
  }
  .table-wrap {
    border-radius: var(--r2);
  }
}

/* ── Small mobile ≤ 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  body { font-size: .9375rem; }

  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.15rem; }

  .btn { font-size: .8125rem; padding: .55em 1em; }
  .btn--lg { font-size: .875rem; padding: .7em 1.4em; }

  /* Tighter card padding */
  .card { padding: var(--s3); }

  /* Auth card */
  .auth-card { padding: var(--s5) var(--s4); margin: var(--s4) var(--s3); }

  /* Footer */
  .footer__inner    { flex-direction: column; gap: var(--s5); padding-inline: var(--s4); }
  .footer__nav      { gap: var(--s5); }
  .footer__bottom   { padding-inline: var(--s4); flex-direction: column; gap: var(--s2); text-align: center; }

  /* Page header actions stack */
  .page-header__actions { width: 100%; }
}

/* ── Scrollbar styling for touch devices ────────────────────── */
@media (max-width: 768px) {
  ::-webkit-scrollbar       { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
}

/* ── Touch target sizing ────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar__link { min-height: 40px; padding: var(--s3); }
  input[type="checkbox"],
  input[type="radio"] {
    width: 18px;
    height: 18px;
  }
}