/**
 * Elite Tactician Design System - Responsive v3
 * Extends v2 responsive utilities. Minimal overrides needed
 * since v2 responsive patterns are still correct.
 *
 * Version: 3.0
 * Date: March 2026
 */

/* =========================================
   CONTAINER - Wider max-width for v3
   ========================================= */
@media (min-width: 1280px) {
    .container {
        max-width: 80rem; /* 1280px to match header-v3-inner */
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 80rem; /* cap at 80rem for Elite Tactician */
    }
}

/* ===========================================
   P1-2 — 44px minimum touch targets (mobile only)
   !important is kept only on the icon-control min sizes below: vault.css's
   `.storage-breakdown-header .btn-icon { all: unset }` and plans.css's
   `.table td .btn-sm { min-width: 2.5rem }` load later and would win.
   (The .btn/.btn-sm min-height and checkbox sizes had no later competitor.)
   Mirrors the P1-1 pattern in forms-v3.css.
   =========================================== */
@media (max-width: 768px) {
  /* Text buttons: grow vertically only. min-width is deliberately OMITTED so
     labeled roster/schedule action rows get taller, never wider (no overflow). */
  .btn-sm {
    min-height: 44px;
  }

  /* Regular .btn was ~34px here (components.css mobile padding) — shorter
     than .btn-sm above. Same vertical-only rule, same no-min-width reason. */
  .btn:not(.btn-xs):not(.btn-link) {
    min-height: 44px;
  }

  /* Icon-only controls → square 44×44. */
  .btn-icon,
  .header-v3 .icon-btn,
  .header-v3 .avatar,
  .nav-v3-mobile-toggle,
  .toast-close,
  .modal-close,
  .vault-card__menu-btn,
  .vault-card__actions .vault-favorite-btn,
  .drill-row .drill-actions .btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Bulk-select checkboxes: enlarge modestly for visibility only. The full
     row/card is the real tap target in bulk mode (vault-touch.css), so a
     44px native checkbox is unnecessary and looks broken. */
  .list-item-checkbox,
  .vault-card__select {
    width: 20px;
    height: 20px;
  }

  /* Notification toggle switches: keep the pill visual (h-6/w-11 = 24×44),
     expand tap area to 44px tall via an invisible overlay. The button already
     has position:relative (Tailwind `relative`). No new Tailwind class → no rebuild. */
  .toggle-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* ===========================================
   Mobile scroll lock + small-target hit areas
   =========================================== */
@media (max-width: 768px) {
  /* Stop the page scrolling behind the mobile menu and every modal system.
     On <html>, not <body>: the ad-hoc body.style.overflow locks in page JS
     keep working. Legacy .modal-backdrop modals all toggle via .hidden. */
  html:has(.nav-v3-mobile-menu.is-open),
  html:has(.modal-overlay.active),
  html:has(.modal-backdrop:not(.hidden)) {
    overflow: hidden;
  }

  /* Tag pill "×" is ~16px; a 44px box would blow up the pill, so grow the
     hit area invisibly (same technique as .toggle-btn above). */
  .tag-picker-remove-btn {
    position: relative;
  }

  .tag-picker-remove-btn::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
  }
}

/* Touch devices apply :hover on tap and keep it — the button hover lift
   (buttons.css, buttons-v3.css) then sticks after the tap. */
@media (hover: none) {
  .btn:hover {
    transform: none !important;
  }
}

@media (max-width: 639.98px) {
  /* .btn is nowrap + overflow:hidden everywhere, so long labels in narrow
     rows were clipped silently or pushed the row off-screen. Let them wrap. */
  .btn {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
}