/* ==========================================================================
   responsive.css
   Media queries only. Mobile-first overrides for layout.css / components.css
   rules.

   Breakpoints — width AND orientation both matter here, not just width:
     phone            <= 560px                                (any orientation)
     tablet portrait   561–1080px  AND orientation: portrait
     tablet landscape  561–1080px  AND orientation: landscape
     desktop          > 1080px                                (any orientation)

   Rationale (product decision 2026-08-25): a tablet held upright behaves
   like a phone — stack the panels and get straight to the login form.
   The same tablet turned sideways has desktop-like width, so it gets the
   full two-column desktop layout instead. Width alone can't tell a
   portrait tablet apart from a landscape one at similar viewport widths
   (e.g. a 1024px-wide iPad in portrait vs. a small laptop window), which
   is why `orientation` is checked explicitly rather than relying on a
   single width cutoff.
   ========================================================================== */

/* ---- Phone: always compact, regardless of orientation -------------------- */
@media (max-width: 560px) {
  /* Mobile priority: get the visitor to the form as fast as possible.
     Brand panel collapses to just the logo strip — headline, illustration
     and feature badges (marketing content) are dropped rather than pushed
     below the form. */
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-shell__brand-panel {
    padding: var(--space-5) var(--space-4);
    gap: 0;
    text-align: center;
  }

  .logo {
    justify-content: center;
  }

  .brand-hero,
  .brand-hero__illustration,
  .feature-list {
    display: none;
  }

  .auth-shell__form-panel {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }

  .card {
    padding: var(--space-5);
    box-shadow: none;
    border: var(--border-width) solid var(--color-border);
  }

  .card__title {
    font-size: var(--font-size-lg);
  }

  .auth-footer {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
}

/* ---- Tablet, held upright: same treatment as phone ------------------------ */
@media (min-width: 561px) and (max-width: 1080px) and (orientation: portrait) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-shell__brand-panel {
    padding: var(--space-6) var(--space-5);
    gap: 0;
    text-align: center;
  }

  .logo {
    justify-content: center;
  }

  .brand-hero,
  .brand-hero__illustration,
  .feature-list {
    display: none;
  }

  .auth-shell__form-panel {
    padding: var(--space-7) var(--space-5) var(--space-8);
  }

  .card {
    padding: var(--space-6);
  }
}

/* ---- Tablet, turned sideways: full desktop-style two-column layout ------- */
@media (min-width: 561px) and (max-width: 1080px) and (orientation: landscape) {
  .auth-shell {
    grid-template-columns: minmax(340px, 46%) 1fr;
  }

  .auth-shell__brand-panel {
    padding: var(--space-6) var(--space-5);
  }

  .brand-hero__heading {
    font-size: var(--font-size-xl);
  }

  .brand-hero__illustration {
    max-width: 420px;
    margin-inline: auto;
  }

  .auth-shell__form-panel {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
}

/* Desktop (> 1080px) needs no overrides here — it uses the base two-column
   layout.css / components.css rules as-is, regardless of orientation. */

/* ==========================================================================
   Dashboard shell (sidebar + data pages: Truck Owners, Trucks, etc.)

   Same phone / tablet-portrait / tablet-landscape / desktop breakpoints as
   the auth shell above, but the small-screen treatment is different: the
   priority on a data page is the table, not a simplified form, so instead
   of dropping content we hide the sidebar off-canvas behind a hamburger
   toggle and let the content column take the full width. Landscape tablet
   and desktop are unaffected — sidebar stays put, hamburger stays hidden.
   Product decision 2026-08-25.
   ========================================================================== */

/* ---- Phone: sidebar off-canvas, hamburger shown --------------------------- */
@media (max-width: 560px) {
  .dashboard-shell {
    display: block;
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .dashboard-shell__sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 85vw);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
  }

  .dashboard-shell__sidebar.is-open {
    transform: translateX(0);
  }

  .top-header {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }

  .whatsapp-status__label,
  .whatsapp-status__sub {
    display: none;
  }

  .top-header__divider {
    display: none;
  }

  .lang-dropdown__current {
    display: none;
  }

  .lang-dropdown__toggle {
    padding: 0;
    width: 36px;
    justify-content: center;
  }

  .dashboard-shell__content {
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header .btn {
    width: 100%;
  }

  .stat-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search,
  .filter-select {
    flex: 1 1 auto;
  }

  .filter-bar__divider {
    display: none;
  }

  .filter-bar .btn {
    width: 100%;
  }

  /* Data-entry forms (New Truck Owner, etc.) — one field per row, and the
     WhatsApp-style toggle row switches to a 2-row grid (icon+text on top,
     the switch below) instead of squeezing all three into one line. */
  .form-grid {
    grid-template-columns: 1fr;
  }

  .toggle-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "icon text"
      "control control";
    row-gap: var(--space-3);
    align-items: start;
  }

  .toggle-row__icon {
    grid-area: icon;
  }

  .toggle-row__text {
    grid-area: text;
  }

  .toggle-row__control {
    grid-area: control;
    justify-content: flex-end;
  }

  /* In-card section header (e.g. "Destinations" above a table) — stack
     like .page-header does, button goes full-width below the title. */
  .section-header {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5) var(--space-4) 0;
  }

  .section-header .btn {
    width: 100%;
  }

  /* "About Owner" info strip — one item per line instead of wrapping
     mid-row, which read as an uneven ragged list at phone width. */
  .owner-info-card {
    padding: var(--space-5) var(--space-4);
  }

  .owner-info-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Truck Status Update — the 3-column truck summary and the 3-tile status
     picker both need to give up their column count at phone width; the
     tiles especially, since 3-across otherwise overflows the viewport. */
  .record-summary {
    flex-direction: column;
  }

  .record-summary__grid {
    /* Reset the row-layout flex-basis (320px), which under column
       direction becomes a *height* basis and blows out the row gaps. */
    flex: 1 1 auto;
    grid-template-columns: repeat(2, 1fr);
  }

  .status-tiles {
    grid-template-columns: 1fr;
  }

  .status-tiles__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .status-tiles__footer .btn {
    width: 100%;
  }

  /* Load Broadcast — the two-column wizard layout stacks; recipients row
     and its Send Broadcast button go full-width/stacked too. */
  .broadcast-layout {
    grid-template-columns: 1fr;
  }

  .recipients-row {
    flex-direction: column;
    align-items: stretch;
  }

  .recipients-row__send {
    align-items: stretch;
  }

  .recipients-row__send .btn {
    width: 100%;
  }

  /* Match Status Timeline — 4 steps with labels + dates don't fit a
     horizontal row at 390px, so it switches to a vertical timeline:
     circle on the left, text to its right, connecting line running down
     instead of across. */
  .status-stepper {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  .status-stepper__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    flex: none;
    padding: 0;
  }

  .status-stepper__connector {
    top: 32px;
    left: 15px;
    width: 2px;
    height: auto;
    bottom: calc(-1 * var(--space-5));
  }

  .status-stepper__text {
    margin-top: 0;
    margin-left: var(--space-3);
  }

  /* Reporting Dashboard — the stacked date-range + Export Report controls
     go full-width, matching how every other .page-header action button
     already behaves at this width. */
  .page-header__controls {
    align-items: stretch;
    width: 100%;
  }

  .page-header__controls .date-range-btn {
    width: 100%;
    justify-content: space-between;
  }

  /* My Trucks — the "phone frame" preview (capped width/height, rounded
     corners, shadow, internal scroll) collapses to a true full-bleed
     mobile page: the frame IS the viewport, not a card floating in one. */
  .mobile-app-shell {
    padding: 0;
    align-items: stretch;
  }

  .mobile-app-shell__frame {
    max-width: none;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- Tablet, held upright: same as phone ----------------------------------- */
@media (min-width: 561px) and (max-width: 1080px) and (orientation: portrait) {
  .dashboard-shell {
    display: block;
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .dashboard-shell__sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 80vw);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
  }

  .dashboard-shell__sidebar.is-open {
    transform: translateX(0);
  }

  .stat-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Load Broadcast — same stack as phone; a tablet-portrait column is too
     narrow for two side-by-side wizard panels. */
  .broadcast-layout {
    grid-template-columns: 1fr;
  }

  /* My Trucks — product decision 2026-08-26: an upright tablet is a real
     mobile-sized device, not a desktop browser pretending to be one, so
     it gets the same full-bleed treatment as phone (see the phone-tier
     block above) instead of the boxed "phone frame" preview — that
     preview is for when a much wider desktop viewport needs to visually
     communicate "this is a mobile screen"; at tablet-portrait widths
     there's no such gap to bridge, and a capped 430px card floating in
     the middle of a ~768-1080px view just wastes the space. Nav stays
     mobile-style (bottom .mobile-app-tabbar) — only the wrapper changes,
     not the layout pattern; see the landscape block below for where this
     shell switches to the desktop top-nav/grid layout instead. */
  .mobile-app-shell {
    padding: 0;
    align-items: stretch;
  }

  .mobile-app-shell__frame {
    max-width: none;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- Tablet sideways / desktop: sidebar stays put, no hamburger ----------- */
@media (min-width: 561px) and (orientation: landscape) {
  .hamburger-btn {
    display: none;
  }
}

/* ==========================================================================
   Mobile Login / Enter OTP — desktop breathing room (NEW, no PDF reference
   for this width — the source export only shows the phone mockup).
   Product decision 2026-08-26, revised same day: matches this project's
   standard tablet rule used everywhere else (.dashboard-shell /
   .auth-shell) after all — an iPad/tablet held sideways (landscape) gets
   the wider desktop-style treatment, held upright (portrait) keeps the
   narrow mobile-style card. Same single centered card either way, just
   not capped to a phone-narrow width in landscape: it widens a bit and
   gets more internal padding rather than switching to a two-column
   brand+form split (that pattern is reserved for the Ops Console admin
   login, .auth-shell).
   ========================================================================== */
@media (min-width: 561px) and (orientation: landscape) {
  .mobile-shell__inner {
    max-width: 520px;
  }

  .mobile-shell__body {
    padding: var(--space-8);
  }
}

/* ==========================================================================
   My Trucks — desktop / tablet-landscape web layout (NEW, no PDF
   reference — the source export only shows the phone mockup for this
   screen).
   Product decision 2026-08-26, revised same day: matches this project's
   standard tablet rule used everywhere else (.dashboard-shell /
   .auth-shell) — an iPad/tablet held sideways (landscape) gets this real
   web layout, held upright (portrait) keeps the capped "phone frame"
   preview + bottom tab bar (see the phone-tier block earlier in this
   file for phone itself, which is always full-bleed regardless of
   orientation). In landscape: the top bar's hamburger hides in favor of
   .app-topnav (the same 5 routes as the bottom tab bar, which itself
   hides here), and the truck list reflows from one stacked column into a
   responsive multi-column grid. The internal scroll container is no
   longer needed once the frame isn't height-capped, so the whole page
   scrolls normally instead.
   ========================================================================== */
@media (min-width: 561px) and (orientation: landscape) {
  .mobile-app-header__btn--menu {
    display: none;
  }

  .mobile-app-header {
    justify-content: flex-start;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
  }

  .app-topnav {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-right: var(--space-6);
  }

  /* The header's own trailing bell button is the phone/portrait stand-in
     for notifications (.app-topnav is hidden there). Once .app-topnav is
     shown, its own "Notifications" item (with the unread-count badge)
     covers the same thing, so the standalone bell would be a duplicate —
     hide it here. */
  .mobile-app-header__btn:not(.mobile-app-header__btn--menu) {
    display: none;
  }

  .mobile-app-shell {
    padding: 0;
  }

  .mobile-app-shell__frame {
    max-width: none;
    width: 100%;
    height: auto;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-app-shell__scroll {
    flex: none;
    overflow-y: visible;
  }

  .mobile-app-tabbar {
    display: none;
  }

  .greeting-card,
  .mobile-page-title,
  .truck-card-list,
  .mobile-list-row,
  .mobile-search-row,
  .load-card-list {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  .truck-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    align-items: start;
  }

  /* Load cards stay single-column at desktop/tablet-landscape, unlike
     truck cards — a load card packs a route line, a 3-up meta row, a
     matched-truck contact box or status tip, and a footer date bar, so
     forcing two columns at ~1100px would cramp all of that; a centered
     single column reads cleanly and still uses the space well since each
     card is already wide internally (route + meta side-by-side). */
  .load-card-list {
    display: flex;
    flex-direction: column;
  }
}