:root {
  --pg-green-dark: #2a925e;
  --pg-green: #36a870;
  --pg-green-light: #d5efe2;
  --pg-ink: #171717;
  --pg-bg: #f7f8f9;
  --pg-accent: #fa5738;
  --pg-white: #ffffff;

  --bs-primary: var(--pg-green);
  --bs-primary-rgb: 54, 168, 112;
  --bs-body-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-body-bg: var(--pg-bg);
  --bs-body-color: var(--pg-ink);
}

body {
  background-color: var(--pg-bg);
  color: var(--pg-ink);
  /* iOS Safari's elastic "rubber-band" bounce at the top/bottom of the page
     briefly extends the visual viewport past the fixed bottom nav (which is
     pinned to the layout viewport), revealing the page background under it
     -- looks like the bar "lifting off" the bottom of the screen. Disabling
     the bounce removes the gap entirely rather than trying to paper over it. */
  overscroll-behavior-y: none;
}

.pg-brand-mark {
  height: 32px;
  width: 32px;
  border-radius: 22%;
  vertical-align: middle;
  margin-top: -4px;
  margin-right: 0.15rem;
}

.pg-brand-mark-lg {
  height: 56px;
  width: 56px;
  margin-top: -8px;
  margin-right: 0.35rem;
}

.btn-primary {
  background-color: var(--pg-green);
  border-color: var(--pg-green-dark);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--pg-green-dark);
  border-color: var(--pg-green-dark);
}

.btn-outline-primary {
  color: var(--pg-green-dark);
  border-color: var(--pg-green);
}

.btn-outline-primary:hover {
  background-color: var(--pg-green);
  border-color: var(--pg-green);
}

a {
  color: var(--pg-green-dark);
}

.card {
  border-color: var(--pg-green-light);
}

.card-header,
.bg-brand {
  background-color: var(--pg-green-light);
}

.text-brand {
  color: var(--pg-green-dark);
}

.hero {
  background: linear-gradient(135deg, var(--pg-green-dark), var(--pg-green));
  color: var(--pg-white);
  border-radius: 0.5rem;
}

.qr-frame {
  background: var(--pg-white);
  border: 1px solid var(--pg-green-light);
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: inline-block;
  cursor: zoom-in;
}

.worker-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pg-green-light);
}

/* The worker's affiliate QR (app/templates/qr/display.html) is rendered as
   a CSS background-image, not <img> -- browsers only offer their native
   "Save image as"/"Save to Photos" menu for actual <img> elements, so this
   removes that option rather than just discouraging it. Not a real security
   boundary (still visible via DevTools), just raises the bar above a casual
   right-click/long-press save -- see the code comment in
   app/templates/qr/display.html for the full reasoning. */
.qr-image {
  width: 260px;
  height: 260px;
  max-width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Long-pressing a button/link on mobile (esp. iOS Safari) pops up a
   browser-native "Open/Copy Link" menu -- suppress that callout plus text
   selection on anything button-shaped, since it's never useful there. */
.btn,
button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Full-viewport QR code lightbox (app/templates/qr/display.html): tapping
   the QR code enlarges it as large as the screen allows, tinting everything
   else behind a dark backdrop -- easier for a customer's camera to scan. */
.pg-qr-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  -webkit-touch-callout: none;
}

.pg-qr-overlay.pg-qr-overlay-visible {
  display: flex;
}

.pg-qr-overlay img,
.pg-qr-overlay .qr-image {
  width: min(90vw, 90vh);
  height: min(90vw, 90vh);
  background-color: var(--pg-white);
  padding: 5vmin;
  border-radius: 1rem;
}

/* Deliberately quieter than .text-muted -- this links to the app-review /
   dev-device login path (app/auth/routes.py::staff_login), not something a
   real customer has any reason to notice or click. */
.pg-staff-login-link {
  font-size: 0.75rem;
  color: #adb5bd;
}

.pg-staff-login-link:hover {
  color: #868e96;
}

/* iOS-style bottom tab bar (mobile only, see .pg-bottom-nav in base.html --
   the desktop top navbar is unchanged and only this replaces it below the
   lg breakpoint). Icon-only, so labels come from aria-label instead. */
.pg-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  background-color: var(--pg-white);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
  /* Extends the bar's own white background into the home-indicator safe
     area instead of leaving it uncovered -- without this, the native
     wrapper apps' WebView (which fills the full screen, home indicator
     included) shows its own background color through the gap below the
     fixed-height icon row. env() needs viewport-fit=cover on the page's
     viewport meta tag (base.html) to resolve to a real value at all;
     falls back to 0 in a normal browser tab or an older iOS Safari. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pg-bottom-nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 1.25rem;
  color: #6c757d;
  border: 0;
  background: none;
  padding: 0;
  text-decoration: none; /* these are plain <a> tags -- brand.css's own "a {
    color: ... }" rule below doesn't touch text-decoration, so an icon-only
    link would otherwise show Bootstrap's default underline sitting under
    the bare icon glyph with no text to anchor it -- the "weird artifacts". */
}

.pg-bottom-nav-item.active {
  color: var(--pg-green-dark);
}

/* Room for the fixed bottom tab bar so it never covers the page's own
   content -- only needed below lg, where .pg-bottom-nav is actually shown.
   !important because <main> also carries Bootstrap's "py-4" utility class,
   whose own padding-bottom is itself !important -- without matching that,
   Bootstrap's rule always won regardless of selector specificity, and this
   padding silently never applied at all (the actual cause of page content
   being cut off behind the bottom bar). */
@media (max-width: 991.98px) {
  main.container {
    padding-bottom: 4.5rem !important;
  }
}

/* Page title bar (see the subheader block in base.html) -- every page that
   sets one gets an icon + heading here instead of an inline <h3>/<h4>.
   Desktop: white, blending into the page background, black text -- purely a
   title, no visual weight of its own. Mobile ("app view"): the top navbar
   above is hidden entirely below lg, so this becomes the app's whole
   colored header instead -- same green as that navbar, white text. */
.pg-subheader {
  background-color: var(--pg-bg);
  color: var(--pg-ink);
}

.pg-subheader-title {
  color: inherit;
}

/* A page's optional {% block subheader_actions %} (base.html) -- a
   secondary action (e.g. "Report a problem") that floats into this bar
   instead of taking its own row in the page content below. color: inherit /
   border-color: currentColor rather than Bootstrap's own button classes so
   the same markup automatically reads correctly against both this bar's
   light background (desktop) and green background (mobile) -- no separate
   light/dark variant needed. */
.pg-subheader-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 0.375rem;
  text-decoration: none;
  white-space: nowrap;
}

.pg-subheader-btn:hover,
.pg-subheader-btn:focus {
  color: inherit;
  background-color: rgba(127, 127, 127, 0.15);
}

@media (max-width: 991.98px) {
  .pg-subheader {
    background-color: var(--pg-green-dark);
    color: var(--pg-white);
    /* Mirrors .pg-bottom-nav's padding-bottom, top-edge counterpart: this is
       the app's whole colored header on mobile (the top navbar above is
       desktop-only), and it's normal in-flow content starting at the very
       top of <body> -- not fixed/sticky. Padding (not margin) so the green
       background still extends all the way to the true top edge -- only
       the text inside moves down, same as the icons inside .pg-bottom-nav
       stay clear of the home indicator while its own background still
       reaches the bottom edge. Every page gets a .pg-subheader (see
       base.html) specifically so this is the ONE place safe-area-inset-top
       is ever applied -- a body-level fallback for subheader-less pages
       was tried and dropped, since a couple of page layouts (autofocused
       forms, in particular) left it inconsistently applied depending on
       page-specific scroll/layout quirks. */
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* Homepage only: the subheader is redundant with the hero's own "Review
   Trax" heading on desktop, so hide it there -- but keep it on mobile,
   where it's not just a title bar, it's the app's entire colored header
   AND the one place safe-area-inset-top is ever applied (see the mobile
   .pg-subheader block above). Reuses that same lg breakpoint (991.98px)
   rather than introducing a new one. */
#pg-page-main-home .pg-subheader {
  display: none;
}

@media (max-width: 991.98px) {
  #pg-page-main-home .pg-subheader {
    display: block;
  }
}