/* ═══════════════════════════════════════════════════════════════════════════
   QUANTUM TRADER — Responsive System
   Breakpoint utility classes and container queries.
   Values match the design tokens' breakpoint scale.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Breakpoint Reference (from design tokens) ──────────
   --bp-sm:  640px   — Mobile landscape
   --bp-md:  768px   — Tablet portrait
   --bp-lg:  1024px  — Tablet landscape / small desktop
   --bp-xl:  1280px  — Desktop
   --bp-2xl: 1536px  — Wide desktop
   ────────────────────────────────────────────────────────── */

/* ─── Responsive Visibility ──────────────────────────────── */
.hide-mobile  { display: revert; }
.show-mobile  { display: none; }

/* ─── Responsive Grid Overrides ──────────────────────────── */
@media (max-width: 639px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
  .grid-12 { grid-template-columns: repeat(4, 1fr); }
  .hide-mobile  { display: none; }
  .show-mobile  { display: revert; }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Responsive Hide/Show at breakpoints ───────────────── */
.show-sm { display: none; }
.show-md { display: none; }
.show-lg { display: none; }
.show-xl { display: none; }

@media (min-width: 640px)  { .show-sm { display: revert; } }
@media (min-width: 768px)  { .show-md { display: revert; } }
@media (min-width: 1024px) { .show-lg { display: revert; } }
@media (min-width: 1280px) { .show-xl { display: revert; } }

/* Responsive hide */
.hide-sm { display: revert; }
.hide-md { display: revert; }
.hide-lg { display: revert; }
.hide-xl { display: revert; }

@media (max-width: 639px)  { .hide-sm { display: none; } }
@media (max-width: 767px)  { .hide-md { display: none; } }
@media (max-width: 1023px) { .hide-lg { display: none; } }
@media (max-width: 1279px) { .hide-xl { display: none; } }

/* ─── Responsive Spacing Utilities ───────────────────────── */
@media (max-width: 639px) {
  .p-responsive { padding: var(--space-4); }
  .px-responsive { padding-left: var(--space-4); padding-right: var(--space-4); }
  .py-responsive { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .gap-responsive { gap: var(--space-3); }
}

/* ─── Container Query for Dashboard Cards ──────────────── */
@container (min-width: 400px) {
  .card-container-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

/* ─── Responsive Font Sizes ──────────────────────────────── */
@media (max-width: 639px) {
  .heading-display { font-size: var(--text-2xl); }
  .heading-h1 { font-size: var(--text-xl); }
  .heading-h2 { font-size: var(--text-lg); }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .heading-display { font-size: var(--text-3xl); }
}

/* ─── Responsive Table (horizontal scroll on mobile) ──── */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}