/* Rider panel shell -- BUG-030.
 *
 * Loaded only by layouts/rider.html. Every selector is scoped under a
 * .rider-* class or .rider-shell, so nothing here can reach the storefront,
 * the customer panel or the vendor panel: this file is additive and removing
 * it would only take the rider chrome back to unstyled, never change another
 * surface.
 *
 * The rider screens themselves still use the shared theme
 * (.gs-dashboard-user-sidebar-wrapper, .user-table, .template-btn) -- this
 * styles the shell around them and fixes the two responsive rough edges the
 * assessment measured: the sidebar only appearing from 1200px up, and touch
 * targets sitting at 42px.
 */

:root {
  --rider-bar-h: 60px;
  --rider-line: #e9e6e4;
  --rider-ink: #1f0300;
  --rider-muted: #6b6461;
  --rider-accent: #ff4c3b;
}

/* ---------- header ---------- */

.rider-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--rider-line);
}

.rider-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--rider-bar-h);
}

.rider-header-left,
.rider-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* so the name below can ellipsis instead of pushing */
}

.rider-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.rider-brand img {
  height: 28px;
  width: auto;
}

.rider-brand-tag {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--rider-accent);
  background: rgba(255, 76, 59, 0.1);
  white-space: nowrap;
}

/* The nav button. 44px square: the assessment found rider controls at 42px,
 * and this is the one a driver reaches for one-handed. */
.rider-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px; /* optical: keeps the logo at the container edge */
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rider-ink);
  cursor: pointer;
}

.rider-nav-toggle:hover,
.rider-nav-toggle:focus-visible {
  background: rgba(0, 0, 0, 0.05);
}

.rider-who {
  font-size: 14px;
  font-weight: 500;
  color: var(--rider-ink);
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rider-lang .dropdown-toggle {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--rider-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rider-ink);
  font-size: 14px;
}

/* On a phone the rider's own name matters more than the language control,
 * and both plus the logo will not fit. Keep the switcher reachable from the
 * slide-out nav instead of crowding the bar. */
@media (max-width: 575.98px) {
  .rider-lang {
    display: none;
  }
  .rider-brand-tag {
    display: none;
  }
}

/* ---------- main ---------- */

.rider-main {
  min-height: calc(100vh - var(--rider-bar-h) - 56px);
  padding-bottom: 24px;
}

/* ---------- footer ---------- */

.rider-footer {
  border-top: 1px solid var(--rider-line);
  background: #fafafa;
  padding: 14px 0;
}

.rider-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--rider-muted);
}

.rider-footer-support {
  color: var(--rider-muted);
  text-decoration: none;
  /* a footer link is still a tap target */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.rider-footer-support:hover {
  color: var(--rider-accent);
}

@media (max-width: 575.98px) {
  .rider-footer-row {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- the panel body, inside this shell only ---------- */

/* The desktop sidebar ships as `d-none d-xl-flex`, so between 992px and
 * 1199px -- a landscape tablet, which the report says riders use -- there
 * was no sidebar AND the hamburger is the only way through. That still
 * works, but the space is there, so show the sidebar from lg up and hide
 * the toggle at the same breakpoint. Scoped to .rider-shell: the customer
 * panel uses the same class and is not part of this change.
 *
 * `!important` is needed to beat Bootstrap's own `.d-none`, which is what
 * the markup carries. */
@media (min-width: 992px) {
  .rider-shell .gs-dashboard-user-sidebar-wrapper.d-none.d-xl-flex {
    display: flex !important;
  }
  .rider-shell .rider-nav-toggle {
    display: none;
  }
}

/* Tap targets. The theme's sidebar links and buttons land at 42px, just
 * under the 44px guideline -- harmless on a desk, less so at a doorstep. */
.rider-shell .gs-dashboard-user-sidebar-wrapper > li > a {
  min-height: 44px;
}

.rider-shell .template-btn,
.rider-shell .btn {
  min-height: 44px;
}

/* Tables already sit in `overflow-x: auto` wrappers and scroll correctly --
 * the assessment confirmed that. What they lack is any sign that they do, so
 * a rider on a phone sees a cut-off column and no hint to swipe. */
.rider-shell .table-responsive,
.rider-shell .table-res {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .rider-shell .table-responsive,
  .rider-shell .table-res {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  /* No fade once the rider has scrolled to the end. */
  .rider-shell .table-responsive.is-scroll-end,
  .rider-shell .table-res.is-scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- language, inside the slide-out nav ---------- */
/* Only rendered below 576px, where the header bar has no room for the
 * dropdown (see the .rider-lang rule above).
 *
 * The drawer's BODY is white (only its top strip is the accent colour), so
 * these are dark-on-light. Styling them white -- as the strip would suggest
 * -- made the label invisible against the panel. */

.mobile-menu .rider-menu-lang {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--rider-line);
  margin-top: 8px;
}

.mobile-menu .rider-menu-lang-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rider-muted);
  margin-bottom: 8px;
}

.mobile-menu .rider-menu-lang ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-menu .rider-menu-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--rider-line);
  background: #fff;
  color: var(--rider-ink);
  font-size: 14px;
  text-decoration: none;
}

.mobile-menu .rider-menu-lang a.active {
  background: var(--rider-accent);
  border-color: var(--rider-accent);
  color: #fff;
}