:root {
  --navy: #00205b;
  --navy-dark: #001433;
  --navy-light: #103a86;
  --gold: #cfa438;
  --gold-light: #e8c766;
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #1a1f2b;
  --muted: #6b7280;
  --border: #e3e7f0;
  --success: #1c8a4a;
  --warn: #b5722c;
  --danger: #c0392b;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 32, 91, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Barlow Condensed", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background:
    linear-gradient(rgba(244, 246, 251, 0.94), rgba(244, 246, 251, 0.94)),
    url("/campus.jpg") center / cover no-repeat fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh; /* accounts for mobile browser chrome instead of jumping when it shows/hides */
}

/* Condensed display face for headlines/brand marks — gives the collegiate
   "Wildcats" energy some punch without touching body/form typography. */
h1, .logo, header.nav .brand, .hero-panel h1, .hero-panel .eyebrow {
  font-family: var(--font-display);
}

/* Kill the default mobile tap-highlight (a translucent blue flash on tap)
   on anything tappable — buttons/links/badges get their own hover/active
   styling instead. */
button, a, .order-item, .badge {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- nav ---------- */

header.nav {
  background: var(--navy);
  color: white;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* Row 1: brand on the left, settings/greeting/logout grouped on the right —
   kept off the primary-links row so that row never has to fight them for
   space or wrap. */
header.nav .nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

header.nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

header.nav .brand {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The wordmark leans forward like it's mid-sprint — only the text shears,
   never the paw icon next to it, so it reads as motion, not a typo. */
.dash-text {
  display: inline-block;
  transform: skewX(-12deg);
  letter-spacing: -0.01em;
}

header.nav .brand .paw {
  color: #ffffff;
  display: inline-block;
}

/* Row 2: Order Food / Deliver / Messages (/ Reports for admins), spaced
   evenly across the full width — never wraps, so this row's height never
   changes and never needs a scrollbar. */
header.nav nav {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
}

header.nav a.navlink {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  opacity: 0.85;
  white-space: nowrap;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}

header.nav a.navlink:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
header.nav a.navlink.active { background: rgba(255, 255, 255, 0.18); opacity: 1; box-shadow: inset 0 -2px 0 var(--gold); }

header.nav .nav-user {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.1px;
  margin-left: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}

header.nav button.logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
header.nav button.logout:hover { background: rgba(255, 255, 255, 0.14); }
header.nav button.logout:active { transform: scale(0.96); }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

h1 {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
  line-height: 1.1;
}
p.subtitle {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin: 14px 0 6px;
}
label:first-child { margin-top: 0; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* 16px, not 0.95rem (15.2px) — iOS Safari auto-zooms the whole page on
     focus for any input under 16px, which feels like a bug to the user
     every single time they tap a field. */
  font-size: 16px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(16, 58, 134, 0.12);
}
textarea { resize: vertical; min-height: 70px; }

/* A <select> has no real ::placeholder — its "Select a ..." hint is just a
   disabled first <option>. Style it to match real input placeholders: gray
   while nothing's chosen yet (:invalid, since these are required with an
   empty placeholder value), back to normal text color once a real option
   is picked. */
::placeholder { color: var(--muted); opacity: 1; }
select:invalid { color: var(--muted); }
select option { color: var(--text); }
select option[value=""] { color: var(--muted); }

button.btn {
  background: var(--navy);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
button.btn:hover:not(:disabled) { background: var(--navy-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
button.btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
button.btn.secondary { background: white; color: var(--navy); border: 1.5px solid var(--navy); }
button.btn.secondary:hover:not(:disabled) { background: #eef1f8; }
button.btn.gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--navy-dark); }
button.btn.gold:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  filter: brightness(1.03);
}
button.btn.gold:active:not(:disabled) { background: #ffffff; color: var(--navy-dark); }
button.btn.danger { background: white; color: var(--danger); border: 1.5px solid var(--danger); }
button.btn.danger:hover:not(:disabled) { background: #fdecea; }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
button.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(16, 58, 134, 0.28); }

.row { display: flex; gap: 10px; flex-wrap: wrap; }

.error {
  background: #fdecea;
  color: var(--danger);
  border: 1px solid #f5c6c1;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.tabs button {
  background: white;
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.tabs button:hover { border-color: var(--navy-light); color: var(--navy); }
.tabs button.active { background: var(--navy); color: white; border-color: var(--navy); }
.tabs button:active { transform: scale(0.96); }

.order-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: white;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.order-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d3daea; }
.order-item .top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.order-item .store { font-weight: 700; font-size: 1.02rem; }
.order-item .hall { color: var(--muted); font-size: 0.88rem; margin-top: 2px; }
.order-item .items { margin: 10px 0; font-size: 0.92rem; }
.order-item .meta { font-size: 0.82rem; color: var(--muted); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.badge.open { background: #e8eefc; color: var(--navy); }
.badge.claimed { background: #fdf2e0; color: var(--warn); }
.badge.picked_up { background: #fdf2e0; color: var(--warn); }
.badge.delivered { background: #e6f6ec; color: var(--success); }

.tip { font-weight: 700; color: var(--success); }

.banner {
  background: #e6f6ec;
  border: 1px solid #b7e4c7;
  color: var(--success);
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  margin: 10px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.banner.warn {
  background: #fdf2e0;
  border-color: #f0d9ac;
  color: var(--warn);
}

.map-slot {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 10px 0;
  background: var(--bg);
}

.card-element {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card-element:focus-within {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(16, 58, 134, 0.12);
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 10px;
  font-size: 0.95rem;
}

/* ---------- landing / auth page ---------- */

.auth-panel .card .logo {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: 0;
}
.auth-panel .card .logo .paw {
  color: var(--gold);
  display: inline-block;
}
.auth-panel .card p.tagline { text-align: center; color: var(--muted); margin-top: 0; margin-bottom: 22px; font-size: 0.9rem; }

.switch-link { text-align: center; margin-top: 14px; font-size: 0.9rem; }
.switch-link a {
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.switch-link a:hover { color: var(--gold); }

/* ---------- chat ---------- */

.chat-block { margin-top: 12px; }

.chat-toggle {
  background: white;
  border: 1px solid var(--border);
  color: var(--navy);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chat-toggle:hover { background: #eef1f8; border-color: var(--navy-light); }

.chat-thread-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.chat-thread-wrap.open { grid-template-rows: 1fr; }
.chat-thread-wrap > .chat-thread-inner { overflow: hidden; }

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg);
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.chat-msg {
  align-self: flex-start;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  max-width: 80%;
  font-size: 0.88rem;
  word-break: break-word;
}
.chat-msg.mine {
  align-self: flex-end;
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.chat-msg.mine .chat-sender { color: rgba(255, 255, 255, 0.75); }

.chat-sender {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
}

.chat-empty {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 0;
}

.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; }

/* ---------- messages inbox ---------- */

.messages-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

.thread-list {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}

.thread-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: white;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s var(--ease);
}
.thread-item:last-child { border-bottom: none; }
.thread-item:hover { background: var(--bg); }
.thread-item.active { background: #eef1f8; }
.thread-item .top-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.thread-item .name { font-weight: 700; font-size: 0.95rem; }
.thread-item .order-ref { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.thread-item .preview {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-view {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: 520px;
}
.thread-view .chat-messages { flex: 1; max-height: none; padding: 16px 18px; }
.thread-view .chat-form { padding: 12px 18px; border-top: 1px solid var(--border); margin: 0; }

.thread-view-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.thread-view-header .name { font-weight: 700; font-size: 1.02rem; }
.thread-view-header .order-ref { font-size: 0.82rem; color: var(--muted); }
.thread-view-header .badge { margin-left: auto; }

.thread-back {
  display: none;
  background: white;
  border: 1px solid var(--border);
  color: var(--navy);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}

.thread-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--muted);
  text-align: center;
  padding: 40px 20px;
}

@media (max-width: 760px) {
  .messages-shell { grid-template-columns: 1fr; }
  .messages-shell:not(.thread-open) .thread-view { display: none; }
  .messages-shell.thread-open .thread-list { display: none; }
  .thread-view { min-height: 65vh; }
  .thread-back { display: inline-block; }
}

/* ---------- toasts ---------- */

.toast-container {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--navy-dark);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 340px;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

@media (max-width: 480px) {
  .toast-container { left: 12px; right: 12px; align-items: stretch; }
  .toast { max-width: none; }

  /* Settings/greeting/logout live in their own compact row now (see
     .nav-actions), so the links row never has to compete with them for
     space — just trim padding/font a bit so it stays comfortable at phone
     width, no scrolling needed. */
  header.nav a.navlink { flex: none; padding: 8px 10px; font-size: 0.88rem; }
  header.nav .nav-user { display: none; }
  header.nav button.logout { flex: none; padding: 6px 10px; font-size: 0.85rem; }

  /* Keep "Place an order" / "My orders" / the live-runner count on one row
     — no wrap, no vertical scroll from it — by tightening each piece just
     enough to fit phone width. */
  .tabs { flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; flex: none; padding: 8px 10px; font-size: 0.85rem; }
  #liveDeliverers { white-space: nowrap; flex: none; font-size: 9pt !important; }
}

/* ---------- page loader ---------- */
/* Shown inline in the HTML (not injected by JS) so it paints before any
   script runs, covering the auth-check + first-fetch gap that used to be a
   blank white flash. Each page's init script calls hidePageLoader() once
   it has something real to show. A JS max-wait fallback (see app.js)
   guarantees it never traps the user if a script throws before reaching
   that call. */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  opacity: 1;
}
.page-loader.hidden { opacity: 0; pointer-events: none; }

.page-loader-mark {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loader-mark svg { width: 34px; height: 34px; color: var(--gold-light); }

.page-loader-bar {
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.page-loader-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--gold-light);
  opacity: 0.6;
}

/* ---------- list skeletons ---------- */
/* Stable placeholder cards (same box as .order-item) shown only on a
   page's very first fetch, so the list doesn't pop from nothing to
   content — later polling refreshes swap straight to real cards. */

.order-item.skeleton { cursor: default; }
.order-item.skeleton * { visibility: hidden; }
.order-item.skeleton {
  position: relative;
  overflow: hidden;
}
.order-item.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.04);
}

/* ---------- landing page: full-bleed hero with a dead-centered card ---------- */
/* The hero background + copy spans the entire page (not a column reserved
   next to the card) — the card is centered on the true page middle via the
   overlay below. The marketing copy only appears once the viewport is wide
   enough that it can't run under the centered card (see the breakpoint at
   the bottom); narrower than that, it's just the background image behind
   a centered card, same as the original mobile treatment. */

.landing-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.hero-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
  color: white;
  background:
    linear-gradient(155deg, rgba(0, 32, 91, 0.94), rgba(0, 20, 51, 0.96)),
    url("/campus.jpg") center / cover no-repeat;
  overflow: hidden;
}
.hero-panel::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 164, 56, 0.35), transparent 70%);
  top: -160px;
  right: -160px;
  filter: blur(10px);
}

.hero-panel .content { position: relative; z-index: 1; max-width: 420px; display: none; }

.hero-panel .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--gold-light);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero-panel h1 {
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.hero-panel h1 .accent { color: var(--gold-light); }

.hero-panel p.lede {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 32px;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-features .feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hero-features .feature .icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
}
.hero-features .feature .icon svg { width: 17px; height: 17px; }
.hero-features .feature .text b { display: block; font-size: 0.95rem; }
.hero-features .feature .text span { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }

.auth-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  pointer-events: none;
}

.auth-panel .card {
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}

/* Wide enough that the hero copy (anchored left, capped at 420px + 64px
   padding) can never reach under the centered card — see the comment
   above .landing-shell for the math this threshold is picked from. */
@media (min-width: 1480px) {
  .hero-panel .content { display: block; }
}