/* ============================================================
   Pipnotic — Mobile & Responsive Styles
   Appended to app.css or loaded as a separate file.
   Breakpoints:
     tablet : ≤ 1024px
     mobile : ≤ 768px
     small  : ≤ 480px
   ============================================================ */

/* ── Sidebar — mobile 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 inline display:none */
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    top: 0;
    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) !important;
    min-width: 0;
    overflow-x: hidden;
  }

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

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

/* ── Cards — reduce padding on mobile ───────────────────────── */
@media (max-width: 768px) {
  .card { padding: var(--s4) !important; }

  /* Stat tile grids — collapse to 2 columns */
  [style*="grid-template-columns:repeat(5"] ,
  [style*="grid-template-columns:repeat(4"] ,
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tables — horizontal scroll with visual indicator */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r2);
  }
  .table-wrap::after {
    content: '';
    display: block;
    height: 1px;
  }
  .table th, .table td {
    padding: var(--s2) var(--s3);
    font-size: .8rem;
    white-space: nowrap;
  }

  /* Pagination — hide page numbers, keep prev/next */
  .pagination__numbers { display: none !important; }
  .pagination {
    justify-content: space-between !important;
    gap: var(--s2) !important;
  }

  /* Forms */
  .form-row { grid-template-columns: 1fr !important; }
  .form-stack { gap: var(--s3); }

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

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

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

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

  /* Stat tiles — single column on very small screens */
  [style*="grid-template-columns:repeat(5"] ,
  [style*="grid-template-columns:repeat(4"] ,
  [style*="grid-template-columns:repeat(6"] ,
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

  /* 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; }
}

/* ── Dashboard inline grid overrides for mobile ─────────────── */
/* These target common inline style patterns used across module views */
@media (max-width: 768px) {

  /* Two-column grids become single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Three-column grids become two column */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Filter bars — wrap to 2 cols */
  [style*="grid-template-columns:repeat(9"] ,
  [style*="grid-template-columns:repeat(8"] ,
  [style*="grid-template-columns:repeat(7"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Price data admin symbol table */
  .edge-card-inner {
    grid-template-columns: 1fr !important;
  }

  /* Hide non-essential table columns on mobile */
  .table .hide-mobile { display: none !important; }
}

/* ── Pagination — page numbers hidden on tablet ──────────────── */
@media (max-width: 1024px) {
  /* Hide the "Page X of Y" text and numbered page links */
  /* Keep only ← Prev and Next → buttons */
  .pagination-numbers,
  [class*="pagination"] span:not(.btn):not([class*="btn"]) {
    display: none !important;
  }
}

/* ── Module-specific mobile fixes ───────────────────────────── */

/* Edge monitor filter grid */
@media (max-width: 768px) {
  .edge-filter-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .edge-stat-tiles {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .edge-filter-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .edge-stat-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* COT module */
@media (max-width: 768px) {
  .cot-grid { grid-template-columns: 1fr !important; }
}

/* Admin tables — horizontal scroll */
@media (max-width: 900px) {
  .admin-table-wrap,
  .card > .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Top navigation bar in module views ──────────────────────── */
@media (max-width: 768px) {
  .les-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
  }
  .les-topbar__right {
    width: 100%;
    justify-content: space-between;
  }
  .les-topbar__current {
    max-width: 200px;
    font-size: .72rem;
  }
  .les-bottom-nav {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--s2);
  }
  .les-bottom-nav > div:nth-child(2) { display: none; }
}

/* ── Course views ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .asr-hero { padding: var(--s5) var(--s4) !important; }
  .asr-sec__hd { padding: var(--s3) var(--s4) !important; }
  .asr-sec__body { padding: var(--s4) !important; }
  .asr-table__hd,
  .asr-table__row {
    grid-template-columns: 130px 70px 1fr !important;
    font-size: .75rem;
  }
  .asr-param-row {
    grid-template-columns: 1fr 60px !important;
    font-size: .78rem;
  }
  .asr-param-row__desc { grid-column: 1 / -1; }
  .asr-key-grid { grid-template-columns: 1fr !important; }
  .asr-formula {
    flex-direction: column !important;
    gap: var(--s1) !important;
  }
  .asr-formula__label { min-width: unset !important; }
}

/* ── 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 sizes ──────────────────────────────────────── */
@media (max-width: 768px) {
  .btn--sm { min-height: 36px; }
  .sidebar__link { min-height: 40px; padding: var(--s3); }
  input[type="checkbox"], input[type="radio"] {
    width: 18px;
    height: 18px;
  }
}