:root{
  --navy:#0b2e6b; --navydk:#081b40; --red:#c8102e; --ink:#1f2733;
  --muted:#5b6472; --line:#d3ddec; --ice:#eef3fa; --ice2:#e1eaf6;
  --white:#fff; --good:#1c7a43; --gold:#c49a2e;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Segoe UI",Calibri,Arial,sans-serif; color:var(--ink); background:#f5f7fb; }
a{ color:var(--navy); }
.hidden{ display:none !important; }

.test-banner{ background:var(--red); color:#fff; text-align:center; font-weight:bold;
  letter-spacing:1px; padding:6px 10px; font-size:13px; }

.topbar{ display:flex; align-items:center; gap:12px;
  background:var(--navydk); color:#fff; padding:12px 20px; }
.brandtext{ display:flex; flex-direction:column; justify-content:center; line-height:1.15; }
.logo{ height:44px; background:#fff; border-radius:8px; padding:4px; flex:0 0 auto; }
.brand-title{ font-weight:bold; font-size:17px; letter-spacing:.2px; }
.brand-name{ font-size:13px; color:#eaf0fb; }
.brand-sub{ font-size:10px; color:#bfd0ec; text-transform:uppercase; letter-spacing:.6px; }
.session{ font-size:13px; display:flex; align-items:center; gap:10px; margin-left:auto; }
.session .who{ color:#dce6f6; font-weight:600; max-width:220px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.session .role{ background:#12326b; border-radius:20px; padding:3px 12px; text-transform:capitalize; }
@media (max-width:600px){ .session .who{ max-width:120px; } }

.nav{ display:flex; gap:4px; flex-wrap:wrap; background:var(--navy); padding:0 14px; }
.nav a{ color:#dce6f6; text-decoration:none; padding:11px 15px; font-size:14px; border-bottom:3px solid transparent; }
.nav a:hover{ background:#12326b; }
.nav a.active{ color:#fff; border-bottom-color:var(--red); font-weight:bold; }

.view{ max-width:960px; margin:22px auto; padding:0 18px; }
h1{ font-size:24px; color:var(--navy); margin:0 0 4px; }
h2{ font-size:17px; color:var(--navy); margin:22px 0 8px; }
.sub{ color:var(--muted); margin:0 0 18px; }

.card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  box-shadow:0 1px 4px rgba(20,40,80,.06); margin-bottom:16px; }
.card.dark{ background:var(--navy); color:#fff; border:0; }
.card.dark .big{ color:#fff; }

label{ display:block; font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); margin:12px 0 4px; }
input,select{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:6px; font-size:14px; }
.row{ display:flex; gap:14px; } .row>*{ flex:1; }
.check{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.check input{ width:auto; }

button{ cursor:pointer; border:0; border-radius:6px; padding:10px 16px; font-size:14px; font-weight:bold; }
.btn{ background:var(--navy); color:#fff; }
.btn:hover{ background:#12326b; }
.btn.red{ background:var(--red); } .btn.red:hover{ background:#a50d26; }
.btn.ghost{ background:var(--ice2); color:var(--navy); }
.btn.sm{ padding:6px 11px; font-size:12px; }
.actions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
tr:hover td{ background:var(--ice); }

.badge{ display:inline-block; font-size:11px; font-weight:bold; padding:2px 9px; border-radius:20px; }
.badge.sold{ background:#eef; color:var(--navy); }
.badge.valid{ background:#e2f3e9; color:var(--good); }
.badge.void{ background:#fde5e9; color:var(--red); }
.badge.test{ background:#fde5e9; color:var(--red); }
.badge.production{ background:#e2f3e9; color:var(--good); }
.badge.active{ background:var(--gold); color:#3a2e00; }
.badge.red{ background:#fde5e9; color:var(--red); }

/* Messaging compose rows */
.mrow{ margin:12px 0; }
.mrow>label{ display:block; font-weight:600; font-size:13px; margin-bottom:4px; color:var(--navy); }
.mrow>select, .mrow>input{ min-width:min(420px,100%); }

.big{ font-size:44px; font-weight:bold; color:var(--navy); line-height:1; }
.stat-grid{ display:flex; gap:14px; flex-wrap:wrap; }
.stat{ flex:1; min-width:150px; text-align:center; background:var(--ice); border:1px solid var(--line);
  border-radius:10px; padding:16px; }
.stat .n{ font-size:34px; font-weight:bold; color:var(--navy); }
.stat .n.zero{ color:var(--good); } .stat .n.bad{ color:var(--red); }
.stat .l{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

.note{ font-size:12px; color:var(--muted); margin-top:8px; }
.ok{ color:var(--good); font-weight:bold; }
.err{ color:var(--red); font-weight:bold; }
.msg{ padding:10px 14px; border-radius:8px; margin:12px 0; font-size:14px; }
.msg.ok{ background:#e2f3e9; } .msg.err{ background:#fde5e9; color:var(--red); }

.scoregrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:12px; }
.scorecell{ border:1px solid var(--line); border-radius:8px; padding:8px; text-align:center; background:#fff; }
.scorecell .wk{ font-size:11px; color:var(--muted); } .scorecell .sc{ font-size:18px; font-weight:bold; color:var(--navy); }
.scorecell.greycup{ border-color:var(--gold); background:#fffdf3; }
.scorecell.playoff{ border-color:#bcd; }

/* ── Sign-in page ─────────────────────────────────────────── */
.login-wrap{ max-width:420px; }
.login-card{ display:flex; flex-direction:column; gap:12px; }

/* Base button shared by all SSO / email buttons: 40px, brand-neutral */
.sso-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:40px; padding:0 16px; box-sizing:border-box;
  border-radius:8px; border:1px solid transparent; cursor:pointer;
  font-family:"Roboto","Segoe UI",Arial,sans-serif; font-size:14px; font-weight:500;
  text-decoration:none; transition:filter .12s, box-shadow .12s, background .12s;
}
.sso-btn:hover{ box-shadow:0 1px 3px rgba(8,27,64,.22); }
.sso-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.sso-logo{ width:18px; height:18px; flex:0 0 18px; }

/* Google — white, #747775 border, #1f1f1f text (per brand guidelines) */
.sso-google{ background:#fff; border-color:#747775; color:#1f1f1f; }
.sso-google:hover{ background:#f7f8f8; }

/* Microsoft — white, #8c8c8c border, #5e5e5e text */
.sso-microsoft{ background:#fff; border-color:#8c8c8c; color:#5e5e5e; }
.sso-microsoft:hover{ background:#f7f8f8; }

/* Apple — black button, white logo + text */
.sso-apple{ background:#000; color:#fff; }
.sso-apple:hover{ background:#111; }

/* Email — pool green */
.sso-email{ background:var(--good); color:#fff; }
.sso-email:hover{ background:#166536; }

/* "or" divider */
.or-divider{ display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin:4px 0; }
.or-divider::before, .or-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* Email magic-link form */
.email-login{ display:flex; flex-direction:column; gap:8px; margin:0; }
.email-login label{ margin:0; }
.email-hint{ font-size:12px; color:var(--muted); margin:2px 0 0; }
.msg-slot:empty{ display:none; }

/* Local dev picker */
.dev-login .actions{ display:flex; gap:8px; }

/* ── v2.1: request/role badges, intake, sketch, mobile ─────── */
.badge.pending{ background:#fff4d6; color:#8a6300; }
.badge.approved{ background:#e2f3e9; color:var(--good); }
.badge.declined{ background:#fde5e9; color:var(--red); }
.badge.purchaser{ background:#eef; color:var(--navy); }
.badge.sponsor{ background:#e6eefc; color:var(--navy); }
.badge.admin{ background:var(--navy); color:#fff; }
.muted{ color:var(--muted); }
.camera{ text-decoration:none; }
h3.formhdr{ font-size:13px; color:var(--navy); text-transform:uppercase; letter-spacing:.5px;
  margin:16px 0 2px; border-top:1px solid var(--line); padding-top:12px; }
.intake-photo input[type=file]{ padding:8px; background:var(--ice); }

/* Results */
.results-cta{ max-width:460px; margin:0 0 16px; }
.sso-results{ background:#fff; border-color:#747775; color:#1f1f1f; font-weight:600; }
.sso-results:hover{ background:#f7f8f8; }
.badge.win{ background:var(--gold); color:#3a2e00; }
.rg-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px; }
.rg-title{ font-size:18px; font-weight:bold; color:var(--navy); }
.rg-admin{ background:var(--ice); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin:12px 0; }
.ev-wrap{ overflow-x:auto; }
.events-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.events-tbl th{ color:var(--navy); font-size:10px; letter-spacing:.5px; }
.events-tbl td{ padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.events-tbl td.mono{ font-family:Consolas,monospace; }
.events-tbl td.sc{ font-weight:bold; color:var(--navy); text-align:center; }
.events-tbl .ev-type{ display:inline-block; background:var(--ice2); color:var(--navy); border-radius:4px;
  padding:1px 7px; font-size:11px; font-weight:bold; white-space:nowrap; }
.events-tbl .ev-desc{ color:var(--muted); font-size:11.5px; }

/* Ticket face (View Ticket pop-over) */
.modal-actions{ display:flex; gap:8px; }
.ticket{ max-width:460px; margin:0 auto; color:var(--ink); }
.ticket-head{ display:flex; align-items:center; gap:12px; }
.ticket-logo{ width:56px; height:auto; }
.ticket-title{ font-weight:bold; font-size:18px; color:var(--navy); line-height:1.15; }
.ticket-sub{ font-size:12px; color:var(--muted); margin:8px 0 14px; }
.ticket-meta{ display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.ticket-meta > div{ font-size:13px; }
.tk-label{ display:inline-block; width:78px; color:var(--muted); font-weight:bold; letter-spacing:1px; font-size:11px; }
.tk-val{ font-family:Consolas,"Courier New",monospace; color:var(--ink); }
.ticket-pending{ color:var(--red); font-weight:bold; margin:8px 0; }
.ticket-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.ticket-table th{ color:var(--navy); font-size:11px; text-transform:uppercase; letter-spacing:1px;
  border-bottom:2px solid var(--navy); padding:6px 8px; text-align:center; }
.ticket-table td{ text-align:center; padding:5px 8px; border-bottom:1px solid var(--line); font-size:13px; }
.ticket-table td.gm{ text-align:left; } .ticket-table td.sc{ font-weight:bold; color:var(--navy); }
.ticket-table tr:hover td{ background:transparent; }

/* print only the ticket pop-over */
@media print {
  body > *:not(#modal-ov){ display:none !important; }
  #modal-ov{ position:static; background:#fff; padding:0; display:block; overflow:visible; }
  #modal-ov .modal-card{ box-shadow:none; max-width:none; width:auto; padding:0; }
  .noprint{ display:none !important; }
  @page{ margin:12mm; }
}

/* Config tabs */
.tabs{ display:flex; gap:6px; border-bottom:2px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.tab{ background:transparent; color:var(--muted); border:0; border-bottom:3px solid transparent;
  padding:10px 14px; font-weight:bold; font-size:14px; margin-bottom:-2px; }
.tab.active{ color:var(--navy); border-bottom-color:var(--red); }
.tab:hover{ color:var(--navy); }

/* My Council report */
.council-head{ margin-bottom:14px; }
.council-head .ch-label{ font-size:20px; font-weight:bold; color:var(--navy); }
.council-head .ch-sub{ font-size:13px; color:var(--muted); }
.lb{ display:flex; flex-direction:column; gap:8px; }
.lb-row{ display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:#fff; }
.lb-row.mine{ border-color:var(--gold); background:#fffdf3; }
.lb-rank{ font-weight:bold; color:var(--muted); width:26px; text-align:center; font-size:15px; }
.lb-main{ flex:1; min-width:0; }
.lb-name{ font-weight:bold; color:var(--ink); font-size:14px; margin-bottom:5px; }
.lb-bar{ height:9px; background:var(--ice2); border-radius:6px; overflow:hidden; }
.lb-bar span{ display:block; height:100%; background:var(--navy); border-radius:6px; }
.lb-row.mine .lb-bar span{ background:var(--gold); }
.lb-fig{ text-align:right; font-size:12px; color:var(--ink); white-space:nowrap; }

/* detail modal */
.modal-ov{ position:fixed; inset:0; background:rgba(8,27,64,.5); display:flex; align-items:flex-start;
  justify-content:center; padding:24px 12px; overflow-y:auto; z-index:50; }
.modal-card{ background:#fff; border-radius:12px; padding:18px 20px; max-width:560px; width:100%;
  box-shadow:0 8px 40px rgba(8,27,64,.35); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
table.kv th{ text-align:left; color:var(--muted); font-weight:bold; text-transform:none; letter-spacing:0;
  width:150px; vertical-align:top; font-size:13px; }
table.kv td{ font-size:13px; }
table.kv tr:hover td{ background:transparent; }
ul.events{ margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--ink); }
ul.events li{ margin:3px 0; }

/* PO# callout on the request confirmation */
.po-box{ border:2px dashed var(--navy); border-radius:10px; text-align:center; padding:14px; margin:12px 0; background:var(--ice); }
.po-label{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.po-num{ font-size:30px; font-weight:bold; color:var(--navy); letter-spacing:2px; margin-top:4px; }

/* camera capture buttons */
.photo-row{ display:flex; align-items:center; gap:12px; margin:8px 0; }
.photo-btn{ display:inline-block; cursor:pointer; margin:0; }
.photo-name{ font-size:13px; color:var(--good); }
.clickrow{ cursor:pointer; }
.clickrow:hover td{ background:var(--ice2); }

/* sketch pad */
.sketchwrap{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; display:inline-block; max-width:100%; }
#sketch{ display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; background:#fff; }

/* ── hamburger + responsive nav ────────────────────────────── */
.navtoggle{ display:none; background:transparent; border:0; padding:8px; margin-right:4px;
  flex-direction:column; gap:4px; cursor:pointer; }
.navtoggle span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
.navtoggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.navtoggle.open span:nth-child(2){ opacity:0; }
.navtoggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:720px){
  /* two rows: (hamburger + shield + title) / (name + role + Sign out) */
  .topbar{ padding:10px 14px; gap:8px 10px; flex-wrap:wrap; }
  .brandtext{ flex:1; min-width:0; }                    /* row 1, beside the shield */
  .session{ flex-basis:100%; order:3; margin-left:0; justify-content:flex-start; }  /* row 2 */
  .brand-title{ font-size:16px; line-height:1.2; }
  .brand-name{ font-size:12px; }
  .brand-sub{ font-size:9px; }
  .logo{ height:38px; }
  .navtoggle{ display:flex; }
  .nav{ display:none; flex-direction:column; gap:0; padding:0; }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 16px; border-bottom:1px solid #12326b; border-left:3px solid transparent; }
  .nav a.active{ border-bottom-color:#12326b; border-left-color:var(--red); }
  .view{ margin:16px auto; padding:0 12px; }
  .row{ flex-direction:column; gap:0; }
  h1{ font-size:20px; }
  .session{ font-size:12px; }
  table{ font-size:12px; }
  th,td{ padding:6px 6px; }
}

/* v2.2 — account details + add-ticket */
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
textarea{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:6px;
  font-size:14px; font-family:inherit; resize:vertical; box-sizing:border-box; }
.pay-detail{ margin-top:2px; }

/* ── v2.4: card scanning + two-pane receipt review ─────────── */
.intake-scan .photo-row{ margin-bottom:8px; }
.manual-entry > summary{ cursor:pointer; list-style:revert; }
.manual-entry > summary::-webkit-details-marker{ display:revert; }
.manual-entry[open] > summary{ margin-bottom:10px; }

.queue-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.msg.warn{ background:#fff4d6; color:#8a6300; }
tr.rowlink{ cursor:pointer; }
tr.rowlink:hover{ background:#f3f7ff; }
tr.rowlink.needs{ background:#fffaf0; }
tr.rowlink.needs:hover{ background:#fff4d6; }
.linkbtn{ background:none; border:0; color:var(--navy); text-decoration:underline; cursor:pointer;
  font:inherit; font-size:12px; padding:0 4px; }

/* Full-bleed review modal: data on the left, the scan on the right. */
.modal-back{ position:fixed; inset:0; background:rgba(8,27,64,.55); z-index:50;
  display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow:auto; }
.modal.review{ background:#fff; border-radius:12px; width:min(1180px,100%); padding:16px 20px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.3); }
.review-panes{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:20px; align-items:start; }
.review-panes .pane{ min-width:0; }
.review-panes h3{ margin:4px 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:#5a6b88; }
.pane-data label{ display:block; margin:8px 0 3px; font-size:12px; color:#5a6b88; }
.pane-data input, .pane-data select{ width:100%; }
.pane-data input.flagged{ border-color:var(--red); background:#fff7f8; }
.fieldgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.review-actions{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }

.pane-scans{ position:sticky; top:0; }
figure.scan{ margin:0 0 14px; border:1px solid #dfe6f2; border-radius:10px; overflow:hidden; background:#f7f9fd; }
figure.scan figcaption{ font-size:12px; color:#5a6b88; padding:6px 10px; background:#eef3fb;
  display:flex; align-items:center; justify-content:space-between; gap:8px; }
figure.scan img{ display:block; width:100%; height:auto; max-height:46vh; object-fit:contain; background:#fff; }
.scan.empty{ padding:22px; text-align:center; color:#8b97ab; border:1px dashed #cdd7e8;
  border-radius:10px; margin-bottom:14px; font-size:13px; }
.tray-attach{ margin-top:6px; }
.tray-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:8px; }
.tray-item{ margin:0; border:1px solid #dfe6f2; border-radius:8px; padding:6px; text-align:center; }
.tray-item img{ width:100%; height:90px; object-fit:cover; border-radius:4px; }
.tray-item figcaption{ font-size:11px; color:#8b97ab; margin:4px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:60;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:20px; font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.25); }

@media (max-width:860px){
  .review-panes{ grid-template-columns:1fr; }
  .pane-scans{ position:static; }
  .fieldgrid{ grid-template-columns:1fr; }
  .modal.review{ padding:12px 14px 16px; }
  figure.scan img{ max-height:60vh; }
}

/* ── v2.5: card printing ───────────────────────────────────── */
.intake-print .row{ align-items:flex-end; }
.intake-print .row > div{ flex:0 0 auto; }
.intake-print input[type=number]{ width:120px; }
.runs{ margin-top:10px; }
.runs > summary{ cursor:pointer; font-size:12px; }
.runs table{ margin-top:6px; }