/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS  —  Drop-in responsiveness for the POS dashboard
   Add AFTER index.css and dashboard.css:
     <link rel="stylesheet" href="responsive.css">
   Pairs with responsive.js (hamburger + sidebar drawer).
   Only ADDS rules — nothing in your existing files is changed.
═══════════════════════════════════════════════════════════════ */

/* ── Hamburger button (injected by responsive.js) ───────────────── */
.nav-hamburger {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 102;
  width: 38px;
  height: 38px;
  border: 1px solid var(--glass-border, rgba(100,160,220,.3));
  border-radius: 10px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;                 /* shown only on small screens below */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(60,100,180,0.16);
}
.nav-hamburger span,
.nav-hamburger span::before,
.nav-hamburger span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #1a5fa8);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-hamburger span { position: relative; }
.nav-hamburger span::before { position: absolute; top: -6px; }
.nav-hamburger span::after  { position: absolute; top: 6px; }
body.nav-open .nav-hamburger span { background: transparent; }
body.nav-open .nav-hamburger span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-hamburger span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ── Dim overlay behind the drawer (injected by responsive.js) ──── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(13,42,82,0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }

/* ═══════════════════════════════════════════════════════════════
   TABLET & DOWN  (≤ 1024px)  — sidebar becomes a slide-in drawer
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav-hamburger { display: flex; }

  /* Sidebar off-canvas, full-label drawer */
  .sidenav {
    width: 232px !important;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow: 8px 0 40px rgba(60,100,180,0.22);
  }
  body.nav-open .sidenav { transform: translateX(0); }

  /* Always show labels while it's a drawer (no hover dependency) */
  .sidenav .nav-label,
  .sidenav .nav-section-label,
  .sidenav .nav-arrow { opacity: 1 !important; }

  /* Topbar + content reclaim the sidebar's 64px gutter */
  .topbar { left: 0; padding-left: 62px; }
  .main-content { margin-left: 0; }

  /* The diagonal white side-panels look odd narrow — soften them */
  .topbar::before,
  .topbar::after { width: 0; }

  /* Nav actions now live in the drawer — hide them from the bar so the
     brand, search and right-side icons aren't cramped */
  .topbar-action,
  .topbar-diag { display: none; }
  .topbar-search-wrap { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   LARGE TABLET  (≤ 1100px) — extend the existing 1-col stack nicely
   (index.css already stacks .dashboard-layout here; we tidy spacing)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .main-content { padding: 86px 18px 28px; }
  .dashboard-right .grid { gap: 16px; }

  /* Layout is single-column here, so the weekly card is full width:
     a 2×2 grid reads far better than 4 cramped columns */
  .weekly-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px 26px;
  }
  .weekly-stats .ws-divider { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET PORTRAIT  (≤ 880px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Top metric cards: 4-up → 2-up */
  .totals-row-4 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Calendar / Payments / Expenses & bottom row: 3-up → keep readable */
  .totals-row { grid-template-columns: 1fr 1fr !important; }

  /* Topbar search reclaims full width (nav actions hidden at ≤1024) */
  .topbar-search-wrap { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   PHONE  (≤ 640px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .main-content { padding: 78px 10px 22px; }

  /* Everything to a single column */
  .totals-row-4,
  .totals-row { grid-template-columns: 1fr !important; }
  .weekly-stats { grid-template-columns: 1fr; }

  /* Stat chips: tighter, scroll-free wrap */
  .stats-row { gap: 6px; margin-bottom: 12px; }
  .stat-chip { font-size: 11px; padding: 5px 10px; }

  /* Wide data table → horizontal scroll, keep columns intact */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 660px; }
  .table-wrap .table-header { position: sticky; left: 0; }

  /* Topbar slims: logo + search + actions only */
  .topbar { gap: 10px; padding: 0 12px 0 60px; }
  .topbar-brand-name { font-size: 1.1rem; }
  .topbar-brand-sub { display: none; }
  .topbar-left { flex: 0 0 auto; }
  .topbar-center { flex: 1; }
  .topbar-right { gap: 6px; }
  .topbar-user-info { display: none; }       /* keep avatar, drop name/role */
  .topbar-sep { display: none; }

  /* Card inner padding eases up */
  .card { padding: 18px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL PHONE  (≤ 430px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  /* Brand text out, logo stays — maximises room for search */
  .topbar-brand > div { display: none; }
  .topbar-search-input { font-size: 13px; }

  /* Hide the two IMEI / repair quick-icons to de-clutter; bell + user stay */
  #repairsNotifWrap,
  #imeiNotifWrap { display: none; }

  .table-wrap table { min-width: 600px; }
  .card-compact { padding: 16px 13px !important; }
}