/* Tablet / small-desktop breakpoints */

@media (max-width: 1200px) {
  .terminal {
    grid-template-columns: 1fr 280px;
    grid-template-areas:
      "ticker ticker"
      "chart  book"
      "form   form"
      "panel  panel";
    height: auto;
  }
  .tm-chart { min-height: 420px; }
  .tm-form { max-height: none; }
  .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .page { padding: var(--sp-4); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  /* admin panel responsive rules live in admin.css (self-contained) */
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .app-header { gap: var(--sp-3); }
  .mobile-header { display: flex !important; }
  .mobile-nav { display: flex !important; }
  .mobile-menu-toggle { display: grid !important; }
  body.has-mobile-nav { padding-bottom: calc(var(--mobilenav-h) + env(safe-area-inset-bottom, 0px)); }

  .terminal {
    display: block; height: auto; background: var(--bg-primary);
  }
  .terminal > * { border-bottom: 1px solid var(--border-color); }
  .tm-chart { height: 60vw; min-height: 300px; }
  .tm-book { max-height: 340px; }
  .tm-panel { max-height: 420px; }

  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .wallet-total { grid-template-columns: 1fr 1fr; }
  .page-header h1 { font-size: var(--fs-xl); }
  .hero { padding: 56px 0 44px; }
  .footer-cols { grid-template-columns: 1fr; }
  .toolbar .input, .toolbar .select { width: 100%; min-width: 0; }
  .modal { max-width: 100%; }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .wallet-total { grid-template-columns: 1fr; }
  .ticker-bar { gap: var(--sp-3); }
  .ticker-stat { display: none; }
  .ticker-stat.keep-mobile { display: flex; }
}

@media (max-width: 480px) {
  .page { padding: var(--sp-3); }
  .card-body, .card-pad { padding: var(--sp-3); }
  .btn { padding: 8px 12px; }
  .hero h1 { font-size: 26px; }
  .stat-value { font-size: var(--fs-lg); }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }
}

@media (max-width: 375px) {
  /* hide the wordmark to save space, keep the logo mark visible */
  .brand span:not(.brand-mark) { display: none; }
  .terminal .order-types button { padding: 6px 7px; }
}