/**
 * mobile-responsive.css — TWC-308
 *
 * Progressive-enhancement stylesheet for the /login/ app area.
 * Loaded after portal.css / adminlte.css so it can safely override.
 *
 * Goals:
 *   1. Touch-target sizing  — minimum 44×44 px for all interactive elements
 *   2. Responsive tables    — card layout on viewports < 640 px
 *   3. Mobile nav           — collapsible sidebar drawer on small screens
 *   4. No horizontal scroll — overflow-x guard on the root
 *   5. Readable type        — base font-size bumped on small screens
 *
 * Breakpoints:
 *   xs  ≤ 640 px   (phone portrait)
 *   sm  ≤ 768 px   (phone landscape / small tablet)
 *   md  ≤ 1024 px  (tablet)
 */

/* ── 0. Global overflow guard ─────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ── 1. Touch-target sizing ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Buttons */
  .btn, button, [role="button"],
  .wd-btn, .app-btn-primary, .explore-btn-view,
  .btn-watch, .btn-track {
    min-height: 44px;
    min-width: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    touch-action: manipulation;
  }

  /* Inline / small buttons — preserve layout but keep target */
  .btn-sm, .btn-xs {
    min-height: 36px;
    padding: 6px 12px;
  }

  /* Dropdown items get flex for alignment */
  .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Nav links — minimum touch target height only; keep existing display (block) */
  .nav-link, .app-nav a {
    min-height: 44px;
  }


  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS auto-zoom */
  }

  /* Checkboxes / radio — larger tap area */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}

/* ── 2. Responsive Tables → Card Layout (≤ 640 px) ───────────────────────── */
@media (max-width: 640px) {
  /*
   * Tables that should stack as cards on mobile get the
   * class .table-stack-cards (added by JS below) or can be marked with
   * data-mobile-stack="true" in HTML.
   *
   * Fallback: apply to ALL .table inside .table-responsive on small screens.
   */
  .table-responsive .table,
  table.table-stack-cards {
    display: block;
    width: 100%;
  }

  .table-responsive .table thead,
  table.table-stack-cards thead {
    display: none; /* Hide column headers — labels come from data-label */
  }

  .table-responsive .table tbody,
  .table-responsive .table tr,
  table.table-stack-cards tbody,
  table.table-stack-cards tr {
    display: block;
    width: 100%;
  }

  .table-responsive .table tr,
  table.table-stack-cards tr {
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }

  .table-responsive .table td,
  table.table-stack-cards td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: .85rem;
    min-height: 44px;
  }

  .table-responsive .table td:last-child,
  table.table-stack-cards td:last-child {
    border-bottom: none;
  }

  /* Show the column label from data-label attribute */
  .table-responsive .table td::before,
  table.table-stack-cards td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #718096;
    flex-shrink: 0;
    min-width: 90px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: 2px;
  }

  /* Full-width action cells */
  .table-responsive .table td.td-actions,
  table.table-stack-cards td.td-actions {
    justify-content: flex-end;
    background: #f9fafb;
    gap: 6px;
    flex-wrap: wrap;
  }
  .table-responsive .table td.td-actions::before,
  table.table-stack-cards td.td-actions::before {
    display: none;
  }

  /* Undo table-responsive horizontal scroll (we're stacking instead) */
  .table-responsive {
    overflow-x: visible;
  }
}

/* ── 3. Mobile Nav Drawer ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* App-sidepanel drawer — ensure it floats above fixed header (z-index: 1030) */
  #app-sidepanel {
    z-index: 1045 !important;
  }
  #app-sidepanel .sidepanel-inner {
    z-index: 10;
    position: relative;
  }
  /* Drop/backdrop sits BEHIND the panel inner */
  #sidepanel-drop {
    z-index: 1;
  }

  /* Main content — no indent on mobile */
  .content-wrapper,
  .app-content,
  .app-wrapper {
    margin-left: 0 !important;
  }

  /* Hamburger toggle button (shown only on mobile) */
  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1.25rem;
    padding: 0;
  }

  /* App header adjustments */
  .app-header .app-header-inner {
    padding-left: 4px;
    padding-right: 8px;
  }
}


@media (min-width: 769px) {
  .mobile-nav-toggle {
    display: none !important;
  }
}

/* ── 4. Layout / spacing fixes for small screens ─────────────────────────── */
@media (max-width: 768px) {
  /* Container padding */
  .container-xl,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Page headers */
  .app-page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
  .app-page-title {
    font-size: 1.3rem !important;
  }

  /* Cards */
  .app-card {
    border-radius: 10px;
  }

  /* Action button rows — wrap and stack */
  .wd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .wd-btn {
    flex: 1 1 140px;
    text-align: center;
    justify-content: center;
  }

  /* Whiskey detail image — smaller on mobile */
  .wd-image img {
    max-height: 220px;
  }

  /* Stats grids — 2 columns on phone */
  .stats-grid,
  .wd-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Chart containers — don't overflow */
  canvas, .chart-container {
    max-width: 100%;
    height: auto !important;
  }

  /* Modal fix — full-width on mobile */
  .modal-dialog {
    margin: 8px;
  }
  .modal-content {
    border-radius: 12px;
  }

  /* Hide secondary / decorative columns on small tables */
  .hide-mobile {
    display: none !important;
  }

  /* Exploration filters — stack vertically */
  .exploration-filter-row {
    flex-direction: column;
  }

  /* Price chart page — full-width iframe */
  iframe.chart-embed {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  /* Typography scale-down */
  body {
    font-size: 15px;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }

  /* Journal / collection cards */
  .journal-card,
  .collection-card,
  .wishlist-card {
    padding: 12px !important;
  }

  /* Tasting journal view — hide less important columns */
  #journalTable th:nth-child(n+5),
  #journalTable td:nth-child(n+5) {
    display: none;
  }

  /* UserCollection / UserWishlist tables */
  #collectionTable th:nth-child(n+4),
  #collectionTable td:nth-child(n+4),
  #wishlistTable th:nth-child(n+4),
  #wishlistTable td:nth-child(n+4) {
    display: none;
  }

  /* Prices / charts page — scrollable table hint */
  .prices-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  /* Auction lots table — hide auctioneer on tiny screens */
  #previousSales th:nth-child(2),
  #previousSales td:nth-child(2) {
    display: none;
  }
}

/* ── 5. Utility helpers ───────────────────────────────────────────────────── */
/* Horizontal scrollable region with touch momentum */
.scroll-x-touch {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Visually hidden but accessible */
.sr-only-mobile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

@media (min-width: 641px) {
  .mobile-only {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .desktop-only {
    display: none !important;
  }
}