/**
 * public/tablet.css
 *
 * SMARTSTACK — iPad / tablet intermediate (Plan 25 Phase 15)
 *
 * =============================================================================
 * R2 + D5 LAWS:
 * - Phone shell / bottom bar stay at max-width 640px (public/mobile.css only).
 * - THIS FILE: only (min-width: 641px) and (max-width: 1023px) for layout polish,
 *   plus defensive min-width: 641px hides for leftover phone chrome.
 * - NEVER put rules here that apply at ≥1024 without an upper bound (desktop must
 *   stay first-class: multi-col, dense tables, full sidebar, co-pilot rail).
 * - Policy: tablet uses desktop sidebar (narrower) — NO phone bottom bar / More sheet.
 * =============================================================================
 */

/* ── Defensive: phone chrome must never paint on tablet or desktop (R2) ───── */
@media (min-width: 641px) {
  .ss-mobile-bottom-bar,
  .ss-mobile-more-sheet,
  .ss-mobile-only,
  .pull-to-refresh,
  #tx-mobile-tools-btn,
  #tx-mobile-fab {
    display: none !important;
  }
  #tab-transactions #tx-mobile-day-groups {
    display: none !important;
  }
  .inv-ht-mobile-cards,
  .inv-ht-caption-mobile {
    display: none !important;
  }
}

/* ── Tablet band only: 641–1023 ───────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1023px) {
  /*
   * Sidebar: desktop nav stays (no bottom bar policy), but narrower so content
   * is not crushed on iPad portrait (~768–834).
   */
  #main-app aside.w-64,
  #main-app .w-64.flex-shrink-0,
  #main-app .w-64 {
    width: 12.5rem !important; /* 200px vs default 16rem */
    min-width: 12.5rem !important;
    max-width: 12.5rem !important;
  }

  #main-app .w-64 .tab-btn,
  #main-app .w-64 button.tab-btn {
    padding-left: 0.65rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.8125rem;
  }

  /* Main column: less horizontal padding on intermediate widths */
  #main-content-scroll {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #main-app .bg-white.border-b.px-8.py-4,
  #main-app [class*='px-8'].border-b {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Cap 3–4 column grids → 2 columns (presentation only; R1 logic unchanged) ─ */

  /* Overview KPIs: lg:grid-cols-4 → 2 on tablet */
  #tab-overview [data-overview-widget='kpis'],
  #tab-overview .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Overview cashflow row often lg:grid-cols-5 — stack sensibly */
  #tab-overview [data-overview-widget='cashflow'],
  #tab-overview .grid.grid-cols-1.lg\:grid-cols-5 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Goals / Debt KPI strips */
  #tab-goals #goals-kpi-strip,
  #tab-goals .grid.grid-cols-1.sm\:grid-cols-3,
  #tab-debt #debt-summary,
  #tab-debt .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Net worth KPI + insights */
  #tab-net-worth #nw-kpi-row,
  #tab-net-worth .grid.grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #tab-net-worth #nw-insights-grid,
  #tab-net-worth .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Reports / budgets dense grids → max 2 cols */
  #tab-reports .grid.grid-cols-1.lg\:grid-cols-3,
  #tab-budgets .grid.grid-cols-2.md\:grid-cols-4,
  #tab-budgets .grid.grid-cols-1.md\:grid-cols-3,
  #tab-budgets .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Investments market pulse tiles */
  #tab-investments .grid.grid-cols-2.sm\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Touch comfort on tablet (not phone 44 law for every button — keep key CTAs) */
  #main-app .settings-btn-primary,
  #main-app .settings-btn-secondary,
  #main-app .tab-btn {
    min-height: 40px;
  }

  /* Settings: 768–1023 already desktop list+detail via panels.js (compact ≤767).
     On 641–767 compact list-detail still applies (Settings own breakpoint).
     Slightly tighter settings content padding in whole tablet band. */
  #settings-shell {
    max-width: 100%;
  }

  #settings-shell .settings-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Dark: keep tablet sidebar readable */
  [data-appearance='dark'] #main-app .w-64 {
    border-color: rgb(51 65 85 / 0.9);
  }
}

/*
 * Desktop control (R2 smoke target ≥1024):
 * No additional rules here that restyle pure desktop multi-col / full sidebar.
 * Co-pilot rail (≥1440) is intentionally untouched.
 */