/* =========================================================
   CRS Visit UI — Premium white + subtle gold accents
   Drop-in replacement for app.css (keeps existing classnames)
   ========================================================= */

:root{
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Neutral palette */
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #0f172a;      /* slate-900 */
  --muted: #64748b;     /* slate-500 */
  --border: rgba(15, 23, 42, 0.10);
  --border-2: rgba(15, 23, 42, 0.14);

  /* Gold accent (subtle, premium) */
  --accent: #b08a2e;    /* refined gold */
  --accent-2: #9a7627;  /* darker gold */
  --accent-soft: rgba(176, 138, 46, 0.12);

  /* Surfaces */
  --shadow: 0 18px 50px rgba(2, 6, 23, 0.08);
  --shadow-sm: 0 8px 24px rgba(2, 6, 23, 0.06);

  /* Radii */
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
}

/* ---------- Page ---------- */
.page{
  margin: 0;
  padding: 18px;
  background:
    radial-gradient(1100px 700px at 18% 0%, rgba(176,138,46,.08), transparent 60%),
    radial-gradient(900px 600px at 92% 16%, rgba(2,6,23,.06), transparent 55%),
    var(--bg);
}

/* ---------- Containers ---------- */
.card, .sheet{
  max-width: 980px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow);
}

@media (max-width: 640px){
  .card, .sheet{ padding: 16px; }
}

/* ---------- Typography ---------- */
.title{
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.small{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

/* ---------- Form ---------- */
.form{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.lbl{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(15, 23, 42, 0.92);
}

.inp{
  width: 100%;
  font-size: 16px;
  padding: 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(2,6,23,.03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.inp::placeholder{ color: rgba(100,116,139,.9); }

.inp:focus{
  outline: none;
  border-color: rgba(176,138,46,.55);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px){
  .grid2{ grid-template-columns: 1fr; }
  .title{ font-size: 22px; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 11px 14px;
  border-radius: 999px; /* modern pill */
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;

  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  cursor: pointer;
  user-select: none;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: var(--border-2);
  box-shadow: 0 14px 35px rgba(2,6,23,.10);
}

.btn:active{
  transform: translateY(0px);
  box-shadow: var(--shadow-sm);
}

.btn.primary{
  /* Only place we use gold strongly: primary CTA */
  background: linear-gradient(180deg, #ffffff 0%, rgba(176,138,46,.10) 60%, rgba(176,138,46,.16) 100%);
  border-color: rgba(176,138,46,.35);
}

.btn.primary:hover{
  border-color: rgba(176,138,46,.48);
  box-shadow: 0 16px 42px rgba(176,138,46,.14), 0 14px 35px rgba(2,6,23,.10);
}

.btn.big{
  width: 100%;
  padding: 14px 16px;
  font-size: 18px;
}

/* ---------- Sheet header ---------- */
.sheetHeader{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.brand{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15,23,42,.85);
}

.meta{
  display: grid;
  gap: 4px;
  font-size: 14px;
  margin-top: 10px;
}

.actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.actions .btn{
  white-space: nowrap;
}

@media (max-width: 760px){
  .sheetHeader{
    flex-direction: column;
    align-items: stretch;
  }
  .actions{
    justify-content: flex-start;
  }
}

/* ---------- Table ---------- */
.tableWrap{
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
}

.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 640px;
}

.table th, .table td{
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.table th{
  text-align: left;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.70);
  background: linear-gradient(180deg, rgba(2,6,23,.03), rgba(2,6,23,0));
}

.table tr:last-child td{ border-bottom: none; }

.tdRight{
  text-align: right;
  white-space: nowrap;
}

.empty{
  text-align: center;
  color: var(--muted);
  padding: 18px;
}

/* Notes cell */
.notesCell{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}
.notesText{ white-space: pre-wrap; }

/* ---------- Waiver / Confirm / Alerts ---------- */
.waiver, .confirm{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  background: rgba(2,6,23,.02);
}

.chk{
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 850;
}

.alert{
  background: rgba(176,138,46,.10);
  border: 1px solid rgba(176,138,46,.28);
  color: rgba(90,66,0,.98);
  padding: 10px 12px;
  border-radius: var(--r-md);
  margin-top: 10px;
}

/* Link-style buttons */
.link{
  border: none;
  background: none;
  color: rgba(15,23,42,.78);
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.link:hover{
  color: var(--accent-2);
}

/* ---------- Modals ---------- */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  display: none;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.modal[aria-hidden="false"]{
  display: grid;
  place-items: center;
}

.modalCard{
  width: min(720px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
}

.modalTitle{
  font-weight: 950;
  font-size: 18px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(15,23,42,.96);
  color: #fff;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 22px 60px rgba(2,6,23,.35);
  max-width: min(720px, 92vw);
  z-index: 9999;
}

/* ---------- Quality-of-life helpers ---------- */
.kicker{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(176,138,46,.10);
  border: 1px solid rgba(176,138,46,.22);
  color: rgba(90,66,0,.98);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}

.divider{
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

.btnRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 12px;
}

.center{ text-align: center; }

/* Success badge (done page) */
.successIcon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(176,138,46,.10);
  border: 1px solid rgba(176,138,46,.22);
  box-shadow: var(--shadow-sm);
  font-size: 26px;
}

/* Waiver text block */
.waiverText{
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  margin-top: 12px;
}
/* =========================================================
   Visit Sheet (unified, no conflicts) — WOW mobile + polish
   ========================================================= */

/* Toolbar: already in HTML */
.toolbar{
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
  backdrop-filter: blur(10px);
}

.toolbar .btn{
  box-shadow: none;
  border-color: transparent;
  background: transparent;
}

.toolbar .btn:hover{
  transform: translateY(-1px);
  background: rgba(2,6,23,.04);
  box-shadow: none;
}

/* Meta row */
.metaRow{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.statPill{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 rgba(2,6,23,.03);
  font-weight: 850;
}

.statPill b{ font-weight: 950; }
.statNote{ color: var(--muted); font-size: 13px; }

/* Table polish */
.table tbody tr:hover td{ background: rgba(2,6,23,.02); }
.table td{ transition: background .12s ease; }

/* Mobile cards: hidden by default */
.mobileList{
  display: none;
  margin-top: 16px;
  gap: 12px;
}

/* Card */
.stoneCard{
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.stoneTop{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.stoneTitle{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.stoneSub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.badge{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(176,138,46,.10);
  border: 1px solid rgba(176,138,46,.22);
  color: rgba(90,66,0,.98);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.stoneNotes{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(2,6,23,.02);
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.45;
}

.stoneActions{
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Sticky finish bar */
.stickyBar{
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(246,247,249,0), rgba(246,247,249,1) 55%);
}

.stickyInner{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
}

.stickyMeta{
  display: grid;
  gap: 2px;
  font-size: 13px;
  color: var(--muted);
}

.stickyMeta b{ color: var(--text); }

.stickyHint{
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* Scanner frame: makes camera area feel premium */
#qr-reader{
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(2,6,23,.02);
}

/* Mobile rules */
@media (max-width: 760px){
  /* Only hide the Visit Sheet table */
  .sheet .tableWrap{ display: none; }

  /* Only show the Visit Sheet mobile list */
  .sheet .mobileList{ display: grid; }

  .sheet{ padding-bottom: 105px; }

  .toolbar{
    width: 100%;
    justify-content: space-between;
  }
  .toolbar .btn{ flex: 1; }

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


/* =========================================================
   Premium Scan Modal (CSS-only)
   ========================================================= */

/* Make modal center spacing feel intentional */
#scanModal .modalCard{
  padding: 14px;
}

#scanModal .modalTitle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

/* Subtle header separator */
#scanModal .modalTitle::after{
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 10px;
  background: linear-gradient(90deg, rgba(15,23,42,.18), rgba(15,23,42,0));
}

/* Camera panel wrapper */
#scanModal #qr-reader{
  position: relative;
  margin-top: 12px !important; /* overrides inline margin-top */
  width: 100% !important;
  max-width: 520px !important;

  border-radius: 22px;
  overflow: hidden;

  border: 1px solid var(--border);
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(176,138,46,.08), transparent 60%),
    rgba(2,6,23,.03);

  box-shadow: 0 20px 60px rgba(2,6,23,.20);
}

/* Give the internal video/canvas rounded corners */
#scanModal #qr-reader video,
#scanModal #qr-reader canvas{
  border-radius: 22px !important;
}

/* Scan corner accents (subtle, premium) */
#scanModal #qr-reader::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events: none;

  background:
    linear-gradient(var(--accent), var(--accent)) left top / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 22px no-repeat,

    linear-gradient(var(--accent), var(--accent)) right top / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 2px 22px no-repeat,

    linear-gradient(var(--accent), var(--accent)) left bottom / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 2px 22px no-repeat,

    linear-gradient(var(--accent), var(--accent)) right bottom / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 22px 2px no-repeat;

  opacity: .55;
}

/* Make scan actions feel like a fixed footer inside the modal */
#scanModal .grid2{
  margin-top: 12px !important;
  gap: 10px;
}

@media (max-width: 760px){
  /* On phones: stack actions vertically for easy tapping */
  #scanModal .grid2{
    grid-template-columns: 1fr !important;
  }
  #scanModal .grid2 .btn{
    width: 100%;
  }
}

/* Error styling: looks like an inline system message */
#scanModal #scanError{
  margin-top: 12px !important;
  border-radius: 16px;
  background: rgba(176,138,46,.12);
  border: 1px solid rgba(176,138,46,.28);
}

/* Modal card: slightly larger radius for “app” feel */
#scanModal .modalCard{
  border-radius: 24px;
}
/* Calm toolbar interactions (more premium) */
.toolbar .btn:hover{ transform: none; }


/* Make scan corners neutral instead of gold (more premium) */
#scanModal #qr-reader::before{
  background:
    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) left top / 22px 2px no-repeat,
    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) left top / 2px 22px no-repeat,

    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) right top / 22px 2px no-repeat,
    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) right top / 2px 22px no-repeat,

    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) left bottom / 22px 2px no-repeat,
    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) left bottom / 2px 22px no-repeat,

    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) right bottom / 22px 2px no-repeat,
    linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) right bottom / 22px 2px no-repeat;
  opacity: .5;
}

/* =========================================================
   Start Page (mobile-first, uses /static/logo.png)
   ========================================================= */

.startCard{
  padding: 18px;
}

.startTop{
  display: flex;
  align-items: center;
  gap: 12px;
}

.startLogo{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
  padding: 8px;
}

.startBrand{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15,23,42,.85);
  line-height: 1.2;
}

.startTitle{
  margin-top: 14px;
}

.startSubtitle{
  margin-top: 6px;
}

/* Buttons area */
.startActions{
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

/* Tip panel */
.startTip{
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px;
  background: rgba(2,6,23,.02);
}

.startTipTitle{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,23,42,.72);
}

.startTipText{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* Mobile polish */
@media (max-width: 520px){
  .startLogo{
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
}

/* Tablet: a little more breathing room */
@media (min-width: 900px){
  .startCard{
    padding: 22px;
  }
}
/* Slightly bigger tap targets on touch devices */
@media (pointer: coarse){
  .btn{ padding: 13px 16px; }
  .inp{ padding: 14px 12px; }
}
/* =========================================================
   Check-in page polish (mobile-first)
   ========================================================= */

.checkinForm{
  margin-top: 14px;
}

/* Inline links (consistent style) */
.inlineLink{
  color: rgba(15,23,42,.85);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inlineLink:hover{
  color: var(--accent-2);
}

/* Waiver: make it feel important + tappable */
.waiverBox{
  border-radius: 22px;
  background: rgba(2,6,23,.02);
}

/* Sticky CTA area (keeps button reachable on mobile) */
.stickyCta{
  margin-top: 6px;
}

@media (max-width: 760px){
  .stickyCta{
    position: sticky;
    bottom: 0;
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(246,247,249,0), rgba(246,247,249,1) 60%);
  }

  .stickyCta .btn{
    box-shadow: var(--shadow);
  }
}

/* Tip card consistent with start page */
.tipCard{
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px;
  background: rgba(2,6,23,.02);
}
.tipTitle{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,23,42,.72);
}
.tipText{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
/* =========================================================
   Repeat results: mobile match picker cards
   ========================================================= */

/* Hide mobile list by default */
.repeatMobileList{
  display: none;
  margin-top: 14px;
  gap: 12px;
}

/* Pick card */
.pickCard{
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.pickTop{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.pickName{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.pickMeta{
  margin-top: 10px;
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 14px;
}

.pickMeta b{
  font-weight: 900;
}

.pickAction{
  margin-top: 12px;
}

/* On small screens: hide table, show cards */
@media (max-width: 760px){
  .repeatTable{ display: none; }
  .repeatMobileList{ display: grid; }
}
.itemCard{
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
/* Repeat picker card polish */
.pickCard{
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover){
  .pickCard:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 40px rgba(2,6,23,.10);
    border-color: var(--border-2);
  }
}

/* Slightly calmer badge on repeat cards */
.pickCard .badge{
  background: rgba(2,6,23,.03);
  border-color: rgba(15,23,42,.10);
  color: rgba(15,23,42,.72);
}

/* =========================================================
   Global Loading Overlay — Logo Spinner (modern)
   ========================================================= */

.loadingOverlay{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  z-index: 99999;

  /* translucent + modern */
  background: rgba(2, 6, 23, 0.40);
  backdrop-filter: blur(12px);
}

.loadingOverlay[aria-hidden="false"]{
  display: grid;
}

/* Center stack */
.loadingCenter{
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(560px, 92vw);
  padding: 18px 16px;
  border-radius: 24px;

  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
}

/* Logo + ring spinner */
.logoSpinner{
  width: 78px;
  height: 78px;
  border-radius: 999px;
  position: relative;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 40px rgba(2,6,23,.14);
}

/* Spinning ring around the logo */
.logoSpinner::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;

  border: 3px solid rgba(15,23,42,.14);
  border-top-color: rgba(176,138,46,.85); /* gold accent */
  border-right-color: rgba(176,138,46,.35);

  animation: spin 0.9s linear infinite;
}

/* Optional: subtle glow ring */
.logoSpinner::after{
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(176,138,46,.12), transparent 60%);
  filter: blur(2px);
  opacity: .9;
  pointer-events: none;
}

.loadingLogo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

/* Text */
.loadingText{
  text-align: center;
}

.loadingTitle{
  font-weight: 950;
  letter-spacing: -0.01em;
  color: var(--text);
}

.loadingSub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

/* Touch devices: bigger tap-friendly feel */
@media (pointer: coarse){
  .logoSpinner{ width: 86px; height: 86px; }
  .loadingLogo{ width: 50px; height: 50px; }
  .loadingCenter{ padding: 20px 16px; }
}
.loadingLogo{
  animation: breathe 1.2s ease-in-out infinite;
}

@keyframes breathe{
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.96; }
}

.adminRow { cursor: pointer; }
.adminRow.isSelected td { background: rgba(176,138,46,.08); }

/* ===== PRIMARY SCAN ACTION ===== */
.btn-scan {
  background: linear-gradient(135deg, #f0c75e, #d6a43a);
  border: none;
  color: #1a1a1a;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 16px 26px;
  border-radius: 18px;
  position: relative;
  text-transform: uppercase;

  /* THIS is the pop */
  box-shadow:
    0 0 0 8px rgba(214, 164, 58, 0.25),
    0 14px 36px rgba(214, 164, 58, 0.6);

  transition: transform .12s ease, box-shadow .12s ease;
}

/* Camera icon bubble */
.btn-scan::before {
  content: "📷";
  font-size: 20px;
  margin-right: 10px;
}

/* Animated beacon ring */
.btn-scan::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 26px;
  border: 3px solid rgba(214, 164, 58, 0.65);
  opacity: 0;
  animation: scanBeacon 2s ease-out infinite;
  pointer-events: none;
}

@keyframes scanBeacon {
  0% {
    opacity: 0.9;
    transform: scale(0.9);
  }
  80% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
  }
}

.btn-scan:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 10px rgba(214, 164, 58, 0.35),
    0 20px 48px rgba(214, 164, 58, 0.75);
}

.btn-scan:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 6px rgba(214, 164, 58, 0.25),
    0 10px 24px rgba(214, 164, 58, 0.55);
}

/* Mobile slab-yard mode */
@media (max-width: 720px) {
  .btn-scan {
    width: 100%;
    font-size: 20px;
    padding: 20px 28px;
  }
}

/* ===== Scan Action Well (non-white background) ===== */
/* ===== Scan Action Well (fix overlap) ===== */
.scanWell{
  display: inline-flex;
  align-items: center;
  padding: 6px;                 /* smaller so it sits nicely inside toolbar */
  border-radius: 999px;         /* match toolbar + button */
  background: linear-gradient(180deg, #f3f4f6, #e9ecef);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.05),
    0 6px 14px rgba(2,6,23,0.06);
}

.btn-scan{
  border-radius: 999px;      /* match pill style */
  position: relative;
  z-index: 1;                /* keep button above its glow */
}

/* Put the beacon ring BEHIND the button so it doesn't "overlap" the toolbar */
.btn-scan::after{
  z-index: -1;
  inset: -10px;              /* slightly less aggressive than -14px */
  border-radius: 999px;
}

.toolbar{
  align-items: center;
  padding: 10px;             /* was 6px, helps everything feel less cramped */
}


/* Make scan well full-width on mobile */
@media (max-width: 720px) {
  .scanWell {
    width: 100%;
  }
}

/* =========================================================
   MOBILE FIX PATCH — toolbars + modals + scanner + loading
   Paste at bottom of app.css
   ========================================================= */

/* 1) Kill horizontal overflow (most common reason “sticky toolbar goes off page”) */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* 2) Toolbar: allow wrapping and prevent glow from forcing overflow */
.toolbar{
  width: 100%;
  display: flex;              /* was inline-flex */
  flex-wrap: wrap;            /* KEY: prevents off-screen */
  gap: 10px;
  padding: 10px;
  overflow: visible;
}

.toolbar > *{
  min-width: 0;               /* prevents long content from forcing width */
}

.toolbar .btn{
  flex: 1 1 140px;            /* buttons wrap nicely */
  white-space: nowrap;
}

/* Scan well should not exceed toolbar width */
.scanWell{
  flex: 1 1 240px;
  width: auto;
  max-width: 100%;
}

/* The animated beacon ring is the #1 culprit for overflow on mobile.
   Keep it, but constrain it. */
.btn-scan::after{
  inset: -6px;                /* was -10px / -14px */
}

/* Optional: reduce scan glow on small screens (prevents “off page” feeling) */
@media (max-width: 720px){
  .btn-scan{
    box-shadow:
      0 0 0 6px rgba(214, 164, 58, 0.22),
      0 10px 24px rgba(214, 164, 58, 0.55);
  }
}

/* 3) Make sticky finish bar respect safe area and never cause sideways scroll */
.stickyBar{
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* 4) Modal: make EVERY modal fit on mobile (no zoom) */
.modal{
  padding: 12px;
}

.modalCard{
  width: min(720px, 100%);
  max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
  overflow: auto;             /* internal scroll instead of page zoom */
  -webkit-overflow-scrolling: touch;
}

/* On phones: bottom-sheet behavior (feels native and avoids huge centered modals) */
@media (max-width: 640px){
  .modal{
    padding: 0;
    place-items: end center !important;
  }
  .modalCard{
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: calc(100dvh - env(safe-area-inset-bottom));
    padding: 14px;
  }
}

/* 5) Scanner container: remove fixed max-width behavior and set a sane height */
#scanModal #qr-reader{
  max-width: 100% !important;   /* overrides inline max-width:520px */
  width: 100% !important;
}

/* The html5-qrcode widget can become extremely tall.
   Force a responsive height so it fits without zoom. */
#qr-reader{
  height: min(56dvh, 420px);
}

/* Ensure inner video/canvas don’t overflow */
#qr-reader video,
#qr-reader canvas{
  max-width: 100% !important;
  height: auto !important;
}

/* 6) Inputs: prevent iOS auto-zoom on focus (must be 16px+) */
input, textarea, select{
  font-size: 16px;
}

/* 7) Loading overlay: keep it compact on phones */
.loadingCenter{
  width: min(520px, 92vw);
  max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
  overflow: auto;
}

@media (max-width: 640px){
  .loadingCenter{
    width: 92vw;
    border-radius: 18px;
    padding: 16px 14px;
  }
  .logoSpinner{
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 760px){
  .sheet{ padding-bottom: 140px; }
}


/* =========================================================
   MOBILE TOOLBAR FIX — stop long toolbar & keep inside bars
   ========================================================= */
@media (max-width: 760px){

  /* Make sure the header/actions area can't overflow sideways */
  .sheetHeader,
  .actions{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Toolbar should NOT be one long pill on mobile */
  .toolbar{
    width: 100%;
    max-width: 100%;
    display: grid;                 /* switch from flex -> grid */
    grid-template-columns: 1fr;    /* stack buttons */
    gap: 10px;

    padding: 10px;
    border-radius: 18px;          /* not a super-long pill */
    overflow: hidden;             /* IMPORTANT: clip glows/rings */
  }

  /* Every child spans full width */
  .toolbar > *{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* ScanWell should not add extra width or let glows escape */
  .scanWell{
    width: 100%;
    max-width: 100%;
    padding: 6px;
    overflow: hidden;             /* clips scan beacon */
    border-radius: 18px;
  }

  /* Make scan button normal-sized on mobile */
  .btn-scan{
    width: 100%;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    letter-spacing: 0.02em;
    text-transform: none;

    /* calmer glow so it doesn't look like it's outside */
    box-shadow:
      0 0 0 4px rgba(214, 164, 58, 0.16),
      0 10px 22px rgba(214, 164, 58, 0.40);
  }

  /* shrink emoji so it doesn't increase height */
  .btn-scan::before{
    font-size: 16px;
    margin-right: 8px;
  }

  /* beacon ring MUST NOT exceed its container */
  .btn-scan::after{
    inset: 0;                     /* stay inside the button */
    border-width: 2px;
    border-radius: 14px;
  }

  /* Sticky finish bar also must not allow overflow */
  .stickyInner{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}

/* =========================================================
   DESKTOP/TABLET TOOLBAR RESTORE (does NOT affect mobile)
   ========================================================= */
@media (min-width: 761px){

  /* Put toolbar back to a compact pill on larger screens */
  .toolbar{
    width: auto;
    max-width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    overflow: visible; /* allow normal hover, but we’ll constrain scan ring below */
    align-items: center;
  }

  /* Buttons should size to content on desktop/tablet */
  .toolbar .btn{
    flex: 0 0 auto;
    width: auto;
  }

  /* Keep scan well from forcing weird layout */
  .scanWell{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 6px;
    border-radius: 999px;
    overflow: hidden; /* IMPORTANT: clips scan glow/ring inside the well */
  }

  /* Scan button: keep it strong but not gigantic */
  .btn-scan{
    padding: 12px 16px;      /* was 16px 26px */
    font-size: 14px;         /* slightly smaller */
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;

    /* reduce “spill” */
    box-shadow:
      0 0 0 6px rgba(214, 164, 58, 0.20),
      0 12px 28px rgba(214, 164, 58, 0.45);
  }

  .btn-scan::before{
    font-size: 16px;
    margin-right: 8px;
  }

  /* Ring was the main overflow problem on desktop too */
  .btn-scan::after{
    inset: -6px;             /* keep it tight */
    border-width: 2px;
    border-radius: 999px;
  }
}
@media (max-width: 720px) {
  .btn-scan { font-size: 20px; padding: 20px 28px; }
}

.nameCell{
  display: flex;
  gap: 10px;
  align-items: center;
}

.nameStack{
  display: grid;
  gap: 4px;
}

.nameText{
  font-weight: 900;
}

.lotThumb{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: rgba(2,6,23,.02);
  flex: 0 0 auto;
}

.miniLink{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.miniLink:hover{
  color: var(--accent-2);
}

@media (max-width: 760px){
  .lotThumb{
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }
}
/* ===== Inventory thumb + website link layout ===== */

.nameCell{
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.nameStack{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.nameText{
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.miniMuted{
  font-size: 13px;
  color: var(--muted);
}

.lotThumb{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: rgba(2,6,23,.02);
  flex: 0 0 auto;
}

.lotThumb--empty{
  background:
    radial-gradient(16px 16px at 35% 35%, rgba(15,23,42,.10), transparent 60%),
    rgba(2,6,23,.02);
}

.miniLink{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.miniLink:hover{ color: var(--accent-2); }

/* Desktop lot cell polish */
.lotCell{ width: 130px; }
.lotPill{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(2,6,23,.02);
  font-weight: 950;
}

/* Tablet: avoid horizontal scrolling as much */
@media (max-width: 980px){
  .table{ min-width: 0; }
}

/* Mobile card alignment */
.stoneLeft{
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.stoneTitleWrap{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lotThumb--card{
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

/* Make long material names wrap nicely in cards */
@media (max-width: 760px){
  .stoneTitle{
    line-height: 1.15;
    word-break: break-word;
  }
}

/* Tablet sweet spot: keep cards roomy */
@media (min-width: 761px) and (max-width: 980px){
  .stoneCard{ padding: 16px; }
  .lotThumb--card{ width: 64px; height: 64px; }
}

/* Highlight newly added stone */
[data-last-added="true"]{
  outline: 2px solid rgba(176,138,46,.45);
  outline-offset: 4px;
  border-radius: 16px;
  animation: pulseNew 1.2s ease-out 1;
}

@keyframes pulseNew{
  0%{
    box-shadow: 0 0 0 0 rgba(176,138,46,.35);
  }
  100%{
    box-shadow: 0 0 0 14px rgba(176,138,46,0);
  }
}
.stickyActions{
  display: flex;
  gap: 10px;
  width: 100%;
}

.stickyActions .btn{
  flex: 1;
}

/* Mobile: keep both buttons big + thumb friendly */
@media (max-width: 760px){
  .stickyActions{
    flex-direction: row;
  }
}

/* =========================
   Start Page: more fun / app-like
   ========================= */

.startHero{
  position: relative;
  overflow: hidden;
}

/* soft decorative shapes (no images) */
.startHero::before,
.startHero::after{
  content:"";
  position:absolute;
  border-radius: 999px;
  pointer-events:none;
  filter: blur(2px);
  opacity: .9;
}

.startHero::before{
  width: 240px;
  height: 240px;
  right: -90px;
  top: -90px;
  background: radial-gradient(circle, rgba(176,138,46,.18), transparent 60%);
}

.startHero::after{
  width: 220px;
  height: 220px;
  left: -90px;
  bottom: -110px;
  background: radial-gradient(circle, rgba(2,6,23,.10), transparent 60%);
}

.startTagline{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.70);
}

/* CTA button content layout */
.startBtn{
  justify-content: flex-start;
  text-align: left;
  padding: 14px 16px;
  border-radius: 22px;
}

.startBtnIcon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(2,6,23,.04);
  border: 1px solid var(--border);
  flex: 0 0 auto;
  font-size: 20px;
}

.startBtnText{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.startBtnTitle{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.startBtnSub{
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

/* Tip polish */
.startTipFancy{
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(176,138,46,.10), transparent 60%),
    rgba(2,6,23,.02);
}

.startMiniPills{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.startPill{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.75);
}

.startLogo { transform: rotate(-2deg); }
@media (hover:hover){
  .startBtn:hover{ transform: translateY(-2px); }
}
/* =========================
   START PAGE — BIG LOGO HERO (MOBILE FIRST)
   ========================= */

.startPage{
  padding: 12px;
}

/* Full-height card on mobile/tablet */
@media (max-width: 980px){
  .startCardFull{
    min-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* HERO HEADER */
.startHeroHeader{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  margin-top: 6px;
}

/* BIG LOGO */
.startLogoHero{
  width: 120px;
  height: 120px;
  object-fit: contain;
  padding: 14px;
  border-radius: 28px;

  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(2,6,23,.18);
}

/* Tablet gets EVEN bigger logo */
@media (min-width: 600px) and (max-width: 980px){
  .startLogoHero{
    width: 150px;
    height: 150px;
    border-radius: 32px;
  }
}

/* Brand text */
.startBrandHero{
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(15,23,42,.85);
}

/* Purpose line */
.startSubtitleHero{
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
}

/* BODY CONTENT */
.startBody{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

/* CTA buttons spacing */
.startActions{
  margin-top: 8px;
  display: grid;
  gap: 14px;
}

/* Touch devices: bigger CTAs */
@media (pointer: coarse){
  .startBtn{
    padding: 18px 18px;
    border-radius: 26px;
  }
  .startBtnIcon{
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
  .startBtnTitle{ font-size: 18px; }
  .startBtnSub{ font-size: 14px; }
}

/* Footer tip spacing */
.startTip{
  margin-top: 18px;
}

/* Very small phones */
@media (max-width: 380px){
  .startLogoHero{
    width: 104px;
    height: 104px;
  }
}
.accordion { display: grid; gap: 10px; }

.accItem {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.accSummary {
  list-style: none;
  cursor: pointer;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.accSummary::-webkit-details-marker { display: none; }

.accLeft { flex: 1; min-width: 0; }

.accBody {
  padding: 0 12px 12px 12px;
  border-top: 1px solid #eef0f3;
}

/* "just added" highlight */
.justAdded {
  outline: 3px solid rgba(212, 175, 55, 0.95); /* gold */
  outline-offset: 3px;
  border-radius: 12px;
  transition: outline-color 0.6s ease, outline-width 0.6s ease;
}
.justAdded.fadeOut {
  outline-color: rgba(212, 175, 55, 0);
}
/* Prevent overlap on desktop table rows */
.nameCell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nameStack {
  min-width: 0; /* critical: allows text to wrap instead of overflow */
}

.nameText {
  white-space: normal;       /* allow wrapping */
  word-break: break-word;    /* avoid overlap on long names */
}

.lotThumb {
  flex: 0 0 auto;
  max-width: 64px;
  max-height: 64px;
  object-fit: cover;
}

img.lotThumb { cursor: zoom-in; }

/* Special highlighting */
.isSpecial {
  outline: 2px solid rgba(245, 158, 11, .65);
  background: rgba(245, 158, 11, .08);
}

.specialPill {
  display: inline-block;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .55);
  background: rgba(245, 158, 11, .12);
}
/* =========================
   Finish Review Modal Styles
   Add to /static/app.css
   ========================= */

/* If your app.css already has .modal/.modalCard, these will enhance it safely. */

#finishModal .modalCard{
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}

#finishModal .modalTitle{
  font-weight: 900;
  letter-spacing: -0.2px;
}

/* Body container inside modal */
#finishModalBody{
  padding: 2px;
}

/* Row layout */
.finishRow{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
}

.finishRow:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}

/* Divider between items */
.finishDivider{
  height: 10px;
}

/* Thumbnail */
.finishThumb{
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  display: block;
  background: #fff;
}

.finishThumbEmpty{
  width: 86px;
  height: 86px;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,.20);
  background: rgba(0,0,0,.02);
}

/* Right side */
.finishInfo{
  flex: 1;
  min-width: 0;
}

.finishTitle{
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Meta pills row */
.finishMeta{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Notes */
.finishNotes{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.35;
}

/* Actions */
.finishActions{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Make the modal buttons look consistent (won't break your existing .btn styles) */
#finishModal .grid2{
  gap: 10px;
}

#finishModal .btn{
  border-radius: 12px;
}

/* Optional: stronger special pill if you have these classes from email CSS.
   If not present, safe to include. */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

.pillMuted{
  opacity: .75;
}

.pillSpecial{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.06);
  font-weight: 800;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .finishRow{
    padding: 10px;
    gap: 12px;
  }
  .finishThumb,
  .finishThumbEmpty{
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }
  .finishTitle{
    font-size: 14px;
  }
}