/* ============================================================
   v63.4 (Ghali's spec — KNOWN-ISSUES.md 2026-07-03): fixed 5-item bottom
   navbar per portal, mobile only. Agreed content per role lives in each
   portal template's PHP (the array driving this bar); this is just the
   shared shell so every portal's bar looks/behaves identically.
   ============================================================ */
.portal-bottom-nav {
  display: none;
}
@media (max-width: 768px) {
  .portal-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h, 60px);
    background: #fff;
    border-top: 1px solid var(--c-bor, #e2e8f0);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    z-index: 900;
  }
  .portal-bottom-nav a, .portal-bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 10px; color: var(--c-txt3, #64748b); text-decoration: none;
    background: none; border: none; font-family: inherit; cursor: pointer; padding: 0;
  }
  .portal-bottom-nav a.active, .portal-bottom-nav button.active { color: var(--c-pri, #1B4FD8); }
  .portal-bottom-nav .icon { font-size: 20px; }
  .portal-bottom-nav .fab {
    width: 46px; height: 46px; border-radius: 50%; background: var(--c-pri, #1B4FD8); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    margin-top: -20px; box-shadow: 0 4px 12px rgba(27,79,216,.35);
  }
  .portal-bottom-nav .fab span { display: none; } /* label hidden for the raised FAB — icon only */
  /* Leave room at the bottom of scrollable content so it isn't hidden behind the fixed bar */
  .portal-main { padding-bottom: 76px !important; }
}

.view-toggle { display: inline-flex; gap: 4px; background: var(--c-sur2, #f1f5f9); border-radius: 8px; padding: 3px; }
.view-toggle button {
  border: none; background: transparent; padding: 6px 10px; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: var(--c-txt3, #64748b); line-height: 1;
}
.view-toggle button.active { background: #fff; color: var(--c-pri, #1B4FD8); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.tyreon-data-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tyreon-data-card {
  background: #fff; border: 1px solid var(--c-bor, #e2e8f0); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.tyreon-data-card-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tyreon-data-card-title { font-weight: 700; font-size: 14px; }
.tyreon-data-card-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-txt3, #64748b); gap: 8px; }
.tyreon-data-card-row strong { color: var(--c-txt, #1e293b); font-weight: 600; }
.tyreon-data-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tyreon-data-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--c-bor, #e2e8f0); }

/* Desktop default: table view. Mobile default: card view.
   .view-mode-table / .view-mode-cards on the container override this
   regardless of screen width, when the user manually picks a view. */
.tyreon-responsive-list .rl-table { display: block; }
.tyreon-responsive-list .rl-cards { display: none; }
@media (max-width: 768px) {
  .tyreon-responsive-list .rl-table { display: none; }
  .tyreon-responsive-list .rl-cards { display: grid; }
}
.tyreon-responsive-list.view-mode-table .rl-table { display: block !important; }
.tyreon-responsive-list.view-mode-table .rl-cards { display: none !important; }
.tyreon-responsive-list.view-mode-cards .rl-table { display: none !important; }
.tyreon-responsive-list.view-mode-cards .rl-cards { display: grid !important; }


/* ── PORTAL LAYOUT ── */
@media (max-width: 768px) {

  /* v63.4 (Ghali's spec — KNOWN-ISSUES.md 2026-07-03): the fixed 5-item
     bottom nav (.portal-bottom-nav) replaces the old scrollable
     tab-chips row as primary mobile navigation — having both was
     redundant, exactly the kind of "too many nav options" clutter Ghali
     flagged. Sidebar (desktop) is untouched. */
  .portal-tab-chips { display: none !important; }

  /* v63.4 (Ghali's screenshots — KNOWN-ISSUES.md 2026-07-03): the whole
     page was horizontally scrollable on mobile, with a big blank gap and
     content shifted/cut off — a classic symptom of ONE oversized element
     somewhere on the page (could be anything: a table, a long
     unbreakable string, a fixed-width box) dragging the entire <body>
     into horizontal scroll, since there was no safety net stopping it.
     This doesn't fix whatever the specific oversized element is — it
     stops it from breaking the WHOLE page layout, which is the visible
     bug. table-wrap/.portal-tab-chips/.tyreon-table keep their own
     independent horizontal scroll (overflow-x:auto), unaffected by this. */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Portal: stack sidebar/main vertically */
  .portal-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Sidebar hidden by default on mobile */
  .portal-sidebar {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 280px;
    height: 100vh;
    z-index: var(--z-drawer, 1200);   /* was 1000 — tied with Leaflet's controls */
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,.2);
  }

  .portal-sidebar.open { display: flex !important; }

  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 999;
  }
  .sidebar-overlay.show { display: block; }

  /* Portal main: full width */
  .portal-main { width: 100%; min-width: 0; padding: 16px; }

  /* Tab chips: scrollable row */
  .portal-tab-chips {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding: 10px 16px;
    scrollbar-width: none;
    background: var(--c-sur);
    border-bottom: 1px solid var(--c-bor);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .portal-tab-chips::-webkit-scrollbar { display: none; }

  .ptab-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    white-space: nowrap;
    font-weight: 600;
    background: var(--c-sur2);
    color: var(--c-txt2);
    text-decoration: none;
    border: 1.5px solid var(--c-bor);
    transition: all .1s;
  }
  .ptab-chip.active {
    background: var(--c-pri);
    color: #fff;
    border-color: var(--c-pri);
  }

  /* Stats grid: 2 columns on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .stat-card { padding: 14px 12px !important; }
  .stat-card strong { font-size: 22px !important; }

  /* 2-col grid → 1-col on mobile */
  .tyreon-grid-2, .tyreon-grid-3, .input-row {
    grid-template-columns: 1fr !important;
  }

  /* Filter bar: column on mobile */
  .filter-bar {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }
  .filter-bar input, .filter-bar select { width: 100%; }

  /* Tables: horizontal scroll */
  /* v63.4 (Ghali's responsive audit — KNOWN-ISSUES.md 2026-07-03): most
     .tyreon-table instances across the codebase (34 of 42 found in an
     audit) are never actually wrapped in .table-wrap, so this rule alone
     never applied to them and they overflowed/squished on mobile with no
     way to scroll to the hidden columns. Making the table itself scroll
     (display:block + overflow-x:auto works directly on a <table>) fixes
     every instance sitewide in one place, wrapped or not, instead of
     hunting down and editing every render function individually. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tyreon-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px;
  }
  .tyreon-table td, .tyreon-table th { padding: 8px 10px; }

  /* Cards: reduce padding */
  .tyreon-card { border-radius: 12px; }
  .card-hdr { padding: 12px 14px; }

  /* Modal: full screen on mobile */
  /* v63.4 (Ghali's screenshot — KNOWN-ISSUES.md 2026-07-03): real root
     cause of the mispositioned/cut-off modal on mobile. Desktop modals
     (tyreon-modern.css) center via top:50%+transform:translate(-50%,-50%).
     This override changed position/bottom/left/right/width for the
     mobile bottom-sheet look, but never reset `top` or `transform` — so
     the leftover translateX(-50%) was still shifting the box left by
     50% of its OWN width. Once width became 100vw here, that shove was
     enormous: roughly half the modal ended up off-screen to the left,
     exactly what the screenshot showed. Every modal on the site uses
     this same class, so this wasn't specific to the check-in modal — it
     hit every single modal on mobile. */
  .tyreon-modal-box, .tyreon-modal-box.lg {
    max-width: 100% !important;
    /* dvh (dynamic viewport) avoids the mobile URL-bar 100vh overshoot that pushed
       the sheet's bottom — and its footer buttons — behind the browser chrome. */
    max-height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  /* The portal bottom-nav is also fixed at bottom:0 and overlapped the sheet's
     footer (Save/Cancel were hidden behind it — owner report 2026-07-12). The body
     scrolls (flex:1 + overflow from desktop); this reserves room so the last row
     (form-actions) clears the nav + the iOS home indicator. */
  .tyreon-modal-box .modal-body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .tyreon-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Page header: stack */
  .portal-page-hdr {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .portal-page-hdr .portal-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Store cards grid: 1 column on mobile */
  .stores-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Hero: smaller */
  .hero { padding: 40px 16px !important; }
  .hero h1 { font-size: 24px !important; }

  /* Car search bar: column */
  .car-search-bar .row {
    flex-direction: column;
    gap: 8px;
  }
  .car-search-bar select,
  .car-search-bar button { width: 100%; }

  /* Nav header: compact */
  .site-header { padding: 0 14px; }
  .nav-menu { display: none; }
  .nav-menu.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--c-sur); border-bottom: 1px solid var(--c-bor); padding: 12px; gap: 2px; z-index: 100; }

  /* Auth pages: padding */
  .auth-card { padding: 28px 20px !important; }

  /* Merchant portal: full-width */
  .store-profile-body { grid-template-columns: 1fr !important; }
  .store-profile-body > aside { order: -1; }

  /* Work time: button full-width */
  .work-time-btn { width: 100%; padding: 18px !important; font-size: 17px !important; }

  /* Custom dashboard: full-width widgets */
  #dash-grid { grid-template-columns: 1fr !important; }
  #dash-grid > div { grid-column: span 1 !important; }
}

@media (max-width: 480px) {

  /* Stats: 2 columns keep but smaller */
  .stats-grid { gap: 8px !important; }
  .stat-card { padding: 12px 10px !important; }
  .stat-card strong { font-size: 20px !important; }

  /* Reduce all fonts slightly */
  body { font-size: 13px; }
  h2 { font-size: 18px; }

  /* Buttons compact */
  .tyreon-btn { padding: 8px 14px; font-size: 12.5px; }
  .tyreon-btn.sm { padding: 6px 10px; font-size: 11.5px; }

  /* Store card: simpler */
  .store-card { padding: 12px; }
  .store-card-name { font-size: 14px; }
}

/* ── BOTTOM NAV for mobile (customer portal) ── */
@media (max-width: 768px) {
  .portal-wrap {
    padding-bottom: 64px; /* space for bottom nav */
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h, 60px);
    background: var(--c-sur);
    border-top: 1px solid var(--c-bor);
    z-index: 200;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  }

  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--c-txt3);
    text-decoration: none;
    transition: color .1s;
  }

  .mobile-bottom-nav a .icon { font-size: 20px; }
  .mobile-bottom-nav a.active { color: var(--c-pri); }
}

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

/* ── SIDEBAR TOGGLE BUTTON ── */
.sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--c-sur2);
  border: 1.5px solid var(--c-bor);
  border-radius: var(--rad);
  font-family: var(--fnt);
  font-size: 13px;
  cursor: pointer;
  margin-left: 10px;
}

/* Matches tyreon-modern.css's .portal-sidebar off-canvas breakpoint (1023px) —
   must stay in sync, otherwise the toggle button disappears between 769-1023px
   while the sidebar is already collapsed (no way to open it). */
@media (max-width: 1023px) {
  .sidebar-toggle-btn { display: inline-flex; }
}

/* ── MAP on mobile ── */
@media (max-width: 480px) {
  #sp-map { height: 200px !important; }
  .geo-map { height: 260px !important; }
}