/* ── MOBILE RESPONSIVE ── */

/* Hamburger menu button (hidden on desktop) */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Sidebar overlay backdrop */
.side-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.side-overlay.open {
  display: block;
  opacity: 1;
}

/* ── Tablet (1024px) ── */
@media (max-width: 1024px) {
  .tetris-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .span-7, .span-8 { grid-column: span 6; }
  .span-5, .span-6 { grid-column: span 6; }
  .span-4 { grid-column: span 3; }
  .span-3 { grid-column: span 3; }

  .card-controls { grid-template-columns: repeat(4, 1fr); }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile (768px) ── */
@media (max-width: 768px) {
  /* Show hamburger */
  .mobile-menu-btn { display: flex; }

  /* Sidebar becomes slide-out drawer */
  .side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
    box-shadow: none;
  }
  .side.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }

  /* Main takes full width */
  .main { width: 100%; }

  /* Topbar mobile adjustments */
  .topbar {
    padding: 8px 10px;
    gap: 6px;
  }
  .cmd-search {
    max-width: none;
    padding: 6px 10px;
    font-size: 11px;
    min-width: 0;
  }
  .cmd-search span:not(.cmd-key) { display: none; }
  .cmd-key { display: none; }

  /* Hide Move Money on mobile — accessible via action bar */
  .topbar-accent { display: none; }

  /* Notification: compact */
  .topbar-ghost { padding: 6px 8px; }

  /* Hamburger smaller */
  .mobile-menu-btn { width: 34px; height: 34px; }

  /* Content padding */
  .content {
    padding: 14px 12px;
    gap: 10px;
  }

  /* Welcome title shrink */
  .welcome { font-size: 28px; }

  /* Action bar scroll */
  .action-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    min-height: 38px;
  }
  .action-bar::-webkit-scrollbar { display: none; }
  .action-btn { white-space: nowrap; flex-shrink: 0; }
  .action-spacer { display: none; }

  /* Grid collapse */
  .tetris-grid {
    grid-template-columns: 1fr;
  }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 {
    grid-column: span 1;
  }

  /* Card smaller padding */
  .card { padding: 14px; }

  /* Balance value responsive */
  .balance-value { font-size: 30px; }
  .balance-value .cents { font-size: 18px; }
  .balance-meta { flex-wrap: wrap; gap: 8px; }

  /* Credit card */
  .cc-number { font-size: 12px; letter-spacing: 2px; }
  .cc-bottom { gap: 12px; }

  /* Credit stats */
  .credit-stats { grid-template-columns: 1fr 1fr; }
  .cs-value { font-size: 20px; }

  /* Card controls grid */
  .card-controls { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .ctrl-btn { padding: 10px 4px; }
  .ctrl-ico { width: 30px; height: 30px; }
  .ctrl-label { font-size: 7px; }

  /* Table responsive */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding: 0 14px;
  }
  .table { min-width: 500px; }

  /* Spending rows */
  .spend-cat { width: 60px; font-size: 8px; }
  .spend-val { width: 50px; font-size: 9px; }
  .spend-pct { width: 28px; font-size: 8px; }

  /* Service grid */
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .svc-item { padding: 10px 4px; }
  .svc-label { font-size: 7px; }

  /* Payment schedule */
  .pay-date { width: 38px; height: 38px; }
  .pay-date .day { font-size: 13px; }
  .pay-date .mon { font-size: 7px; }

  /* Task items mobile */
  .task-item { padding: 12px; gap: 10px; }
  .task-meta { flex-wrap: wrap; gap: 6px; }

  /* Sort button */
  .sort-btn { font-size: 9px; padding: 6px 10px; }

  /* Stat cards — keep 3 in a row */
  .stat-value { font-size: 24px; }
  .stat-label { font-size: 8px; letter-spacing: 0.3px; }
  .tetris-grid:has(.stat-value) { grid-template-columns: repeat(3, 1fr); }
  .tetris-grid:has(.stat-value) .span-4 { grid-column: span 1; }

  /* Install items */
  .inst-item { padding: 10px 12px; }

  /* Apply section */
  .apply-card { padding: 12px; }

  /* No-fee banner */
  .no-fee-banner { padding: 12px 14px; }

  /* Settings dropdown position fix for mobile drawer */
  .settings-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
  }

  /* View btns */
  .view-btns { top: 14px; right: 14px; }

  /* Topbar avatar */
  .topbar-avatar { width: 26px; height: 26px; font-size: 9px; }

  /* Theme switch */
  .theme-sw { width: 34px; height: 20px; }
  .theme-sw .dot { width: 14px; height: 14px; }
  [data-theme="dark"] .theme-sw .dot { transform: translateX(14px); }

  /* Cashback */
  .cb-cat { font-size: 11px; }
  .cb-amt { font-size: 9px; }

  /* Security */
  .sec-row { gap: 8px; }
  .sec-ico { width: 28px; height: 28px; }
  .sec-title { font-size: 10px; }
  .sec-sub { font-size: 9px; }
  .sec-status { font-size: 7px; padding: 2px 6px; }
}

/* ── Small phones (480px) ── */
@media (max-width: 480px) {
  .welcome { font-size: 24px; }
  .balance-value { font-size: 26px; }
  .balance-value .cents { font-size: 16px; }
  .card-controls { grid-template-columns: repeat(4, 1fr); }
  .credit-stats { grid-template-columns: 1fr; }
  .content { padding: 12px 10px; }
  .topbar { padding: 8px 10px; }
  .card { padding: 12px; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}