/* PIA Gate — staff check-in screen (mobile first) */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&display=swap');

body .pg-app {
  --pg-purple: #5006BA;
  --pg-lime: #DBFF00;
  --pg-ink: #0A0A0A;
  --pg-muted: #646970;
  --pg-line: #ECECF0;
  --pg-head: 'Helvetica Ultra Compressed', 'Raleway', sans-serif;
  --pg-body: 'Raleway', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 60px;
  font-family: var(--pg-body);
  color: var(--pg-ink);
  box-sizing: border-box;
}
body .pg-app *, body .pg-app *::before, body .pg-app *::after { box-sizing: border-box; }

body .pg-app .pg-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 0 16px; }
body .pg-app .pg-eyebrow { display: block; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-ink) !important; }
body .pg-app h1.pg-title, body .pg-app .pg-title { font-family: var(--pg-head); font-weight: 400 !important; text-transform: uppercase !important; font-size: 44px !important; line-height: 1 !important; color: var(--pg-purple) !important; margin: 4px 0 0 !important; letter-spacing: 0 !important; }
body .pg-app .pg-who { text-align: right; font-size: 13px; color: var(--pg-muted); }
body .pg-app .pg-who span { display: block; font-weight: 700; color: var(--pg-ink); }
body .pg-app .pg-who a { color: var(--pg-purple) !important; }

body .pg-app .pg-search { display: flex; gap: 8px; position: sticky; top: 0; z-index: 5; background: #fff; padding: 8px 0; }
body .pg-app .pg-search { max-width: 760px; }
body .pg-app .pg-search input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; font-size: 18px !important; font-family: var(--pg-body) !important; border: 2px solid var(--pg-purple) !important; border-radius: 12px !important; background: #fff !important; color: var(--pg-ink) !important; }
body .pg-app .pg-search button { height: 56px; padding: 0 22px; border: 0 !important; border-radius: 12px !important; background: var(--pg-purple) !important; color: #fff !important; font-weight: 700 !important; font-size: 16px !important; font-family: var(--pg-body) !important; cursor: pointer; }
body .pg-app .pg-hint, body .pg-app .pg-muted { font-size: 13px; color: var(--pg-muted); margin: 6px 0 14px; }
body .pg-app .pg-loading { text-align: center; color: var(--pg-muted); padding: 30px 0; }

body .pg-app .pg-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: start; }
body .pg-app .pg-results > .pg-banner, body .pg-app .pg-results > .pg-muted, body .pg-app .pg-results > .pg-loading { grid-column: 1 / -1; margin: 0; }

body .pg-app .pg-card { position: relative; background: #fff; border: 1px solid var(--pg-line); border-left: 5px solid var(--pg-cat, var(--pg-purple)); border-radius: 12px; padding: 12px 12px 12px 14px; margin: 0; box-shadow: 0 3px 12px rgba(24,16,45,.05); display: flex; flex-direction: column; }
body .pg-app .pg-card.is-vip { box-shadow: 0 0 0 2px var(--pg-lime), 0 6px 18px rgba(80,6,186,.12); }
body .pg-app .pg-card.is-approved { background: #F4FBF6; }
body .pg-app .pg-card.is-rejected { background: #FDF5F5; }
body .pg-app .pg-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
body .pg-app .pg-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .05em; line-height: 1.5; color: #fff; background: var(--pg-purple); }
body .pg-app .pg-badge--soft { background: #F1EBFB; color: var(--pg-purple); }
body .pg-app .pg-badge--vip { background: var(--pg-lime); color: var(--pg-ink); }
body .pg-app h2.pg-name, body .pg-app .pg-name { font-family: var(--pg-head); font-weight: 400 !important; text-transform: uppercase !important; font-size: 24px !important; line-height: 1.05 !important; color: var(--pg-ink) !important; margin: 0 0 2px !important; letter-spacing: 0 !important; }
body .pg-app .pg-subtitle { margin: 0 0 4px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--pg-purple); }
body .pg-app .pg-award { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #C2185B; }
body .pg-app .pg-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 4px 0 2px; font-size: 12px; font-weight: 700; color: var(--pg-ink); word-break: break-all; }
body .pg-app .pg-meta--guests { color: #00701A; }
body .pg-app .pg-came { margin: 2px 0 0; font-size: 11px; color: var(--pg-muted); }
body .pg-app .pg-notes { font-size: 12px; background: #FAFAFB; border-radius: 6px; padding: 5px 8px; margin: 6px 0 0; }

body .pg-app .pg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
body .pg-app .pg-chip { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.4; }
body .pg-app .pg-chip--done { background: #FCF0F1; color: #B32D2E; border: 1px solid #F0C4C6; }
body .pg-app .pg-chip--stop { background: #B32D2E; color: #fff; }
body .pg-app .pg-chip--wait { background: #FCF9E8; color: #6B5300; }
body .pg-app .pg-chip--flag { background: #F6F0FF; color: var(--pg-purple); }
body .pg-app .pg-banner { border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; margin: 8px 0; }
body .pg-app .pg-banner--stop { background: #B32D2E; color: #fff; }
body .pg-app .pg-banner--wait { background: #FCF9E8; color: #6B5300; }

body .pg-app .pg-controls { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
body .pg-app .pg-check { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin: 0; cursor: pointer; }
body .pg-app .pg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pg-purple); }
body .pg-app .pg-guests { display: flex; align-items: center; gap: 2px; font-weight: 700; font-size: 13px; margin: 0; }
body .pg-app .pg-guests input { width: 48px; height: 30px; border: 1px solid #ccc; border-radius: 6px; padding: 0 6px; font-size: 14px; }
body .pg-app .pg-note-toggle { margin-left: auto; height: 28px; padding: 0 10px; border: 1px solid #ddd !important; border-radius: 6px !important; background: #fff !important; color: var(--pg-muted) !important; font-size: 12px !important; font-weight: 700 !important; font-family: var(--pg-body) !important; cursor: pointer; }
body .pg-app .pg-note { width: 100%; height: 34px; margin: 0 0 8px; border: 1px solid #ddd !important; border-radius: 6px !important; padding: 0 8px; font-size: 13px !important; }
body .pg-app .pg-note[hidden] { display: none; }

body .pg-app .pg-actions { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr; gap: 6px; margin-top: auto; }
body .pg-app .pg-btn { height: 40px; padding: 0 8px; border: 0 !important; border-radius: 8px !important; font-family: var(--pg-body) !important; font-weight: 800 !important; font-size: 14px !important; line-height: 1 !important; cursor: pointer; color: #fff !important; white-space: nowrap; }
body .pg-app .pg-btn:disabled { opacity: .5; }
body .pg-app .pg-btn--ok { background: #00A32A !important; }
body .pg-app .pg-btn--stop { background: #B32D2E !important; }
body .pg-app .pg-btn--ghost { background: #F0F0F1 !important; color: var(--pg-ink) !important; }
body .pg-app .pg-notfound .pg-actions, body .pg-app .pg-register .pg-actions { grid-template-columns: 1fr 1fr; }

body .pg-app .pg-flash--approved { animation: pgFlashOk 1.2s ease; }
body .pg-app .pg-flash--rejected { animation: pgFlashStop 1.2s ease; }
@keyframes pgFlashOk { 0% { background: #CDEFD6; } 100% { background: #F4FBF6; } }
@keyframes pgFlashStop { 0% { background: #FBDADB; } 100% { background: #FDF5F5; } }

body .pg-app .pg-register label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 10px; }
body .pg-app .pg-register input { display: block; width: 100%; height: 46px; margin-top: 4px; border: 1px solid #ccc !important; border-radius: 10px !important; padding: 0 12px; font-size: 16px !important; }
body .pg-app .pg-register h3 { margin: 0 0 4px; font-size: 18px; }
body .pg-app .pg-err { color: #B32D2E; font-weight: 700; min-height: 1em; margin: 8px 0 0; }

body .pg-app .pg-login { max-width: 380px; margin: 40px auto; }
body .pg-app .pg-login .pg-brand { text-align: center; margin-bottom: 18px; }
body .pg-app .pg-login .pg-sub { color: var(--pg-muted); margin: 6px 0 0; }
body .pg-app .pg-login form p { margin: 0 0 12px; }
body .pg-app .pg-login label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
body .pg-app .pg-login input[type="text"], body .pg-app .pg-login input[type="password"] { width: 100%; height: 50px; border: 1px solid #ccc !important; border-radius: 10px !important; padding: 0 12px; font-size: 16px !important; }
body .pg-app .pg-login input[type="submit"] { width: 100%; height: 52px; border: 0 !important; border-radius: 12px !important; background: var(--pg-purple) !important; color: #fff !important; font-weight: 800 !important; font-size: 16px !important; cursor: pointer; }

@media (max-width: 600px) {
  body .pg-app h1.pg-title, body .pg-app .pg-title { font-size: 36px !important; }
  body .pg-app .pg-search button { padding: 0 16px; }
  body .pg-app .pg-results { grid-template-columns: 1fr; }
  body .pg-app .pg-btn { height: 44px; }
}