/* PSVA Express Check-In — Base44-matched design system.
   Inter, pale green-white bg, navy ink, green/blue service cards. */
:root {
  --navy: #12365b;
  --navy-deep: #16446e;
  --icon-blue: #205c8a;
  --muted: #49647b;
  --muted2: #426078;
  --muted3: #38566c;
  --bg: #f7fbf9;
  --line: #d4e5de;
  --card-line: #d3e3da;
  --input-line: #cddce5;
  --red: #bf3946;
  --green-bg: #b9d89f;
  --green-border: #8fb86f;
  --blue-bg: #b6d2ec;
  --blue-border: #80abd2;
  --check-green: #5b8b3d;
  --focus: #1d68a7;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  background: var(--bg);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
svg.icon { display: block; }

/* fixed header + footer */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
  text-align: center; padding: 16px 12px 14px;
}
.site-header h1 {
  margin: 0; font-size: 22px; font-weight: 750; color: var(--navy);
}
.accent-bar {
  width: 44px; height: 3px; background: var(--red);
  border-radius: 999px; margin: 8px auto 0;
}
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--line);
  color: var(--muted2); font-size: 15px;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 14px 24px;
}

/* layout */
.wrap { max-width: 1000px; margin: 0 auto; padding: 116px 16px 64px; }
body.kiosk .wrap { max-width: 850px; padding-top: 124px; padding-bottom: 112px; }

/* headings */
.h1 {
  font-size: clamp(30px, 6vw, 48px); font-weight: 800;
  color: var(--navy); margin: 6px 0 8px; line-height: 1.1;
}
/* All headings centered site-wide (Shawn, 2026-10-12): the fixed header
   title, the step heading block (step label + title + subtitle), ticket /
   status headlines, TV column headings, and staff page headings. Body text
   and form labels are NOT affected. */
h1, h2, .h1, .step-label, .page-sub, .ticket-headline { text-align: center; }
.step-label {
  font-size: 14px; font-weight: 650; letter-spacing: .04em;
  color: var(--muted); margin: 0;
}
.page-sub { font-size: 20px; color: var(--muted3); margin: 0 0 26px; }
.page-sub.italic { font-size: 16px; color: var(--muted2); font-style: italic; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, monospace; }
.hint { font-weight: 400; color: var(--muted); font-size: .85em; }

/* back button */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-bg); border-radius: 10px; min-height: 48px;
  padding: 0 20px; margin-bottom: 18px;
  font-size: 18px; font-weight: 700; color: var(--navy);
  text-decoration: none;
}
.back-btn svg { width: 22px; height: 22px; }

/* back pill inside the fixed footer (Base44 steps 2-3) */
.foot-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-bg); border-radius: 10px;
  padding: 9px 20px;
  font-size: 16px; font-weight: 700; color: var(--navy);
  text-decoration: none;
}
.foot-back svg { width: 20px; height: 20px; }
#appt-time-field { margin-top: 4px; }

/* step 1: service cards */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card {
  display: flex; align-items: center; gap: 18px;
  border-radius: 20px; min-height: 128px; padding: 22px;
  text-decoration: none;
}
.card-green { background: var(--green-bg); border: 2px solid var(--green-border); }
.card-blue { background: var(--blue-bg); border: 2px solid var(--blue-border); }
.card-icon { flex: none; color: var(--icon-blue); }
.card-icon svg { width: 42px; height: 42px; }
.card-text { display: flex; flex-direction: column; gap: 4px; }
.card-title { font-size: 23px; font-weight: 700; color: var(--navy); }
.card-desc { font-size: 16px; color: var(--muted3); }
.card-other {
  grid-column: 1 / -1; justify-content: center; text-align: center;
  background: var(--navy-deep); border: 2px solid var(--navy-deep);
  min-height: 88px;
}
.card-other .card-icon { color: #fff; }
.card-other .card-title, .card-other .card-desc { color: #fff; }

/* step 2: reason rows */
.reason-list { display: flex; flex-direction: column; gap: 14px; }
.reason-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 2px solid #c9dfbf; border-radius: 16px;
  min-height: 88px; padding: 22px; text-decoration: none;
}
.reason-text { display: flex; flex-direction: column; gap: 4px; }
.reason-title { font-size: 22px; font-weight: 750; color: var(--navy); }
.reason-desc { font-size: 16px; color: var(--muted); }
/* Text arrow, matching Base44 (Shawn, 2026-10-27) — not an SVG chevron. */
.reason-chevron { flex: none; color: var(--muted); font-size: 26px; line-height: 1; }

/* step 3 + staff forms */
.form-card {
  background: #fff; border: 1px solid var(--card-line); border-radius: 22px;
  padding: 26px; max-width: 700px;
}
.form-card.narrow { max-width: 480px; }
.form-card label {
  display: block; font-size: 18px; font-weight: 650; color: var(--navy);
  margin-bottom: 18px;
}
.form-card label[hidden] { display: none; }
.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card select {
  display: block; width: 100%; height: 58px; margin-top: 8px;
  font-size: 20px; font-family: inherit; color: var(--navy);
  background: #fff; border: 2px solid var(--input-line); border-radius: 12px;
  padding: 0 16px;
}
.form-card input:focus, .form-card select:focus {
  outline: 3px solid var(--focus); outline-offset: 1px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-group { margin-bottom: 18px; }
.field-label {
  display: block; font-size: 18px; font-weight: 650; color: var(--navy);
  margin-bottom: 8px;
}
.service-summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 22px;
}
.summary-label { font-size: 16px; color: var(--muted); }
.summary-service { font-size: 20px; font-weight: 750; color: var(--navy); text-align: right; }

/* segmented visit-type control */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.segmented label { margin: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented .segment span {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 10px 14px;
  background: #fff; border: 2px solid var(--input-line); border-radius: 12px;
  min-height: 65px; font-size: 18px; color: var(--navy); cursor: pointer;
}
.segmented input:checked + span {
  background: var(--green-bg); border-color: #719d53; font-weight: 700;
}
.segmented input:focus-visible + span { outline: 3px solid var(--focus); }

.cta {
  display: block; width: 100%; background: var(--navy-deep); color: #fff;
  border: none; border-radius: 14px; min-height: 64px;
  font-size: 24px; font-weight: 750; font-family: inherit;
  cursor: pointer; text-decoration: none; text-align: center;
  padding: 16px;
}
.actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* buttons (staff / secondary) */
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 10px;
  border: 2px solid var(--input-line); background: #fff; color: var(--navy);
  text-decoration: none; font-size: .95rem; font-weight: 650;
  cursor: pointer; font-family: inherit;
}
.btn.primary { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn.small { padding: 6px 12px; font-size: .85rem; }
.btn.go { background: var(--blue-bg); border-color: var(--blue-border); }
.actions-cell form { display: inline-block; margin: 2px; }

/* flashes / notices */
.flashes { margin-bottom: 18px; }
.flash {
  padding: 14px 16px; border-radius: 8px; margin-bottom: 8px; font-size: 18px;
}
.flash.error {
  background: #fff0f0; color: #9b2533; border-left: 4px solid var(--red);
}
.flash.ok {
  background: #eef7e2; color: #40632a; border-left: 4px solid var(--check-green);
}
.notice {
  background: #fff8e1; border: 1px solid #e8d28a; color: var(--navy);
  padding: 16px; border-radius: 12px; margin-bottom: 18px;
}

/* staff login: the whole block sits in the middle of the screen
   (Shawn, 2026-10-12) -- horizontally centered card, vertically centered
   in the viewport below the fixed header (.wrap already pads 116px top
   + 64px bottom, hence the 180px allowance). */
.login-center {
  min-height: calc(100vh - 180px);
  min-height: calc(100dvh - 180px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 0;
}
.login-center .h1 { margin-bottom: 18px; }
.login-center .form-card,
.login-center .notice { width: 100%; max-width: 480px; }

/* ticket + wait-status */
.ticket-card {
  background: #fff; border: 1px solid var(--card-line); border-radius: 22px;
  padding: 40px 24px; text-align: center; max-width: 640px; margin: 12px auto;
}
.check-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: #eef5e6; color: var(--check-green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.check-icon svg { width: 44px; height: 44px; }
.kicker {
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
  font-size: 14px; font-weight: 650; margin: 0;
}
.ticket-headline {
  font-size: 42px; font-weight: 800; color: var(--navy); margin: 4px 0 8px;
  line-height: 1.15;
}
.ticket-no { font-size: 64px; font-weight: 800; color: var(--navy); margin: 8px 0; }
.ticket-name { font-size: 24px; margin: 4px 0; }
.ticket-service { font-size: 18px; color: var(--muted); margin: 4px 0; }
.qr-block { margin: 22px 0 8px; }
.qr-block img {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px;
}
.wait-message { font-size: 24px; font-weight: 750; color: var(--navy); margin: 16px 0 8px; }
.ticket-done { max-width: 320px; margin: 18px auto 0; }

/* TV display */
.tv-head { text-align: center; }
.tv-head .page-sub { margin-bottom: 20px; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.tv-col {
  background: #fff; border: 1px solid var(--card-line); border-radius: 16px; padding: 18px;
}
.tv-col h2 {
  margin: 0 0 12px; color: var(--navy); font-size: 20px; font-weight: 750;
  border-bottom: 2px solid var(--red); padding-bottom: 8px;
}
.tv-ticket {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 8px;
  border-bottom: 1px solid var(--line); font-size: 1.15rem;
}
.tv-ticket .no { font-weight: 800; color: var(--navy); min-width: 64px; }
.tv-ticket.serving { background: #eef4fb; border-radius: 8px; }
.tv-ticket .tag {
  margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--navy);
  background: var(--blue-bg); padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase;
}

/* staff */
.row-between {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 12px;
}
/* one staff screen, three toggle sections (Shawn, 2026-10-12):
   Waiting / Serving / Archive tabs. All sections render in the page;
   the tab script hides the inactive ones (no-JS still shows all). */
.staff-tabs { display: flex; gap: 8px; margin: 18px 0 16px; flex-wrap: wrap; }
.stab {
  padding: 10px 22px; border-radius: 999px;
  border: 2px solid var(--input-line); background: #fff; color: var(--navy);
  font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.stab.active {
  background: var(--navy-deep); border-color: var(--navy-deep); color: #fff;
}
/* secondary terminal outcomes (Pay Issues / Doc Issues / Walked Out)
   stay visually quiet next to the primary Complete button */
.btn.ghost { color: var(--muted); border-color: var(--line); font-weight: 600; }
.archive-more { margin-top: 14px; }
.archive-more a { color: var(--navy); font-weight: 650; }
.staff-nav { padding-top: 14px; }
.staff-nav a {
  margin-left: 14px; color: var(--navy); font-weight: 650; text-decoration: none;
}
.qtable {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--card-line); border-radius: 16px; overflow: hidden;
}
.qtable th, .qtable td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.qtable th { background: var(--navy-deep); color: #fff; font-size: .9rem; font-weight: 650; }
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #eee; font-size: .8rem; font-weight: 700;
}
tr.st-serving .pill { background: var(--blue-bg); color: var(--navy); }
tr.st-pending .pill { background: #fff3d6; color: #8a5a00; }
.searchbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.searchbar input {
  padding: 12px; border: 2px solid var(--input-line); border-radius: 12px;
  font-size: 16px; font-family: inherit; color: var(--navy); background: #fff;
}
.searchbar input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }

/* responsive */
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; gap: 2px; text-align: center; }
  .ticket-no { font-size: 52px; }
}