/* ============================================================
   TNF brand override — fonts + colors
   Loaded AFTER inline <style> blocks via <link> at end of <head>
   so :root variable overrides take effect everywhere.
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
  font-family: "HelveticaNeueLT";
  font-weight: 500;
  font-style: normal;
  src: url("/static/Font/Helvetica%20Neue%20LT%20Std%2065%20Medium.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeueLT";
  font-weight: 700;
  font-style: normal;
  src: url("/static/Font/Helvetica%20Neue%20LT%20Std%2075%20Bold.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "LINESeedSansTH";
  font-weight: 400;
  font-style: normal;
  src: url("/static/Font/LINESeedSansTH_Rg.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "LINESeedSansTH";
  font-weight: 700;
  font-style: normal;
  src: url("/static/Font/LINESeedSansTH_Bd.ttf") format("truetype");
  font-display: swap;
}

/* ── TNF colour tokens (light theme: orange + gray on white) ── */
:root {
  /* TNF brand palette */
  --tnf-orange:    #f1ab4a;
  --tnf-orange-2:  #d8923a;
  --tnf-gray:      #777777;
  --tnf-gray-2:    #4a4a4a;
  --tnf-black:     #000000;
  --tnf-white:     #ffffff;

  /* Backgrounds → light theme */
  --bg0:    #ffffff;
  --bg1:    #f5f5f5;
  --card:   #ffffff;

  /* Lines, surfaces */
  --line:   rgba(0,0,0,.10);

  /* Text */
  --text:   #000000;
  --muted:  #555555;
  --muted2: #888888;

  /* Accents */
  --accent:   #f1ab4a;   /* primary brand */
  --accent2:  #777777;   /* secondary brand */

  /* States — keep semantic colors readable */
  --ok:    #2e7d32;
  --warn:  #f1ab4a;
  --bad:   #c62828;

  /* Distance-card-specific (express card module) */
  --dep:   #f1ab4a;
  --take:  #4a4a4a;
  --send:  #f1ab4a;
  --aid:   #f1ab4a;
  --pickup:#f1ab4a;
}

/* ── Global typography ───────────────────────────────────── */
html, body, button, input, select, textarea {
  font-family: "HelveticaNeueLT", "LINESeedSansTH",
               ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Noto Sans Thai", sans-serif !important;
  font-weight: 500;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.brand .h, .top .h, .card h3 {
  font-family: "HelveticaNeueLT", "LINESeedSansTH",
               ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Noto Sans Thai", sans-serif !important;
  font-weight: 700;
}

/* Force light page background — kill the original radial gradients,
   but DO NOT touch pages that opt into the poster background. */
html, body:not(.bg-poster) {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ── Cards / containers — flat, light orange tint, sharp corners ───── */
.card,
.top, .topbar,
.section,
.stat,
.miniStat,
.actionCard,
.rosterCard,
.bagCard,
.foundBox,
.distance-box,
.runnerInfo,
.bib-box,
.info,
.qr-wrap,
.barcode-wrap,
.runner,
.id-scan-box {
  background: #fff4e1 !important;        /* pale orange */
  background-image: none !important;
  border: 1px solid rgba(241,171,74,.40) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Subtle separator on the topbar/header */
.top, .topbar {
  border-bottom: 2px solid var(--tnf-orange) !important;
}

/* Action-card hover: only border colour, no lift */
.actionCard {
  transition: border-color .15s !important;
}
.actionCard:hover {
  border-color: var(--tnf-orange) !important;
  transform: none !important;
}

/* Section dividers between rows use light gray stripe (like reference table) */
.stat, .miniStat {
  background: #f5f5f5 !important;
}
.stat .v, .miniStat .v {
  color: var(--tnf-orange) !important;
  font-weight: 700 !important;
}

/* Small chips */
.bibChip,
.miniSendForm,
.distChip {
  background: #ffffff !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 4px !important;
  color: var(--text) !important;
}
.distChip {
  font-weight: 700 !important;
}
.distChip.active,
.distChip:hover {
  background: var(--tnf-orange) !important;
  border-color: var(--tnf-orange) !important;
  color: #ffffff !important;
}

/* Sub-text */
.top .s, .topbar .s,
.card p.desc, .helpText, .empty,
.brand .s, .sub {
  color: var(--tnf-gray) !important;
}

/* Tables — alternating row stripe like the reference */
.card table, .section table, .rosterCard table {
  border-collapse: collapse !important;
}
.card th, .section th, .rosterCard th {
  background: #ffffff !important;
  color: #000 !important;
  border-bottom: 2px solid #000 !important;
  font-weight: 700 !important;
  text-align: left !important;
}
.card tbody tr:nth-child(odd) td,
.section tbody tr:nth-child(odd) td,
.rosterCard tbody tr:nth-child(odd) td {
  background: #f5f5f5 !important;
}
.card tbody tr:nth-child(even) td,
.section tbody tr:nth-child(even) td,
.rosterCard tbody tr:nth-child(even) td {
  background: #ffffff !important;
}
.card td, .section td, .rosterCard td {
  border-bottom: 1px solid #e5e5e5 !important;
}

/* Alerts — slightly tinted, not the orange-gradient (semantic colours) */
.alert {
  border-radius: 12px !important;
}
.alert.ok,
.alert.ok *  { color:#0c4a18 !important; }
.alert.ok    { background:#dcfce7 !important; border:2px solid #16a34a !important; }

.alert.warn,
.alert.warn * { color:#5a3300 !important; }
.alert.warn   { background:#fef3c7 !important; border:2px solid #d97706 !important; }

.alert.bad,
.alert.bad *  { color:#7f1010 !important; }
.alert.bad    { background:#fee2e2 !important; border:2px solid #b91c1c !important; font-weight:700 !important; }

/* Outline-style buttons and pills stay readable */
.pill, .btnGhost {
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: var(--bg0) !important;
}
.pill:hover, .btnGhost:hover {
  border-color: var(--accent) !important;
}

/* Filled buttons → flat solid orange, sharp corners */
.btn, .btn.dep, .btn.set, .btn.scan, .btn.search,
button[type="submit"],
button:not(.btnGhost):not(.pickBtn):not(.tabBtn):not(.checkboxBtn):not(.b-close):not(.distChip):not(.btnDanger) {
  background: var(--tnf-orange) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.btn:hover, button[type="submit"]:hover {
  background: var(--tnf-orange-2) !important;
}
.btn.aid, .btn.send, .btn.take {
  background: var(--tnf-gray) !important;
  background-image: none !important;
  color: #ffffff !important;
}
.btn.aid:hover, .btn.send:hover, .btn.take:hover {
  background: var(--tnf-gray-2) !important;
}

/* Form controls — light theme */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input:not([type]),
select, textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000 !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 4px !important;
  caret-color: var(--tnf-orange) !important;
  /* iOS Safari fit-to-container */
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* iOS date input — match ID-number input look (white bg, centered, larger) */
input[type="date"], input[type="datetime-local"] {
  min-height: 56px !important;
  display: block !important;
  padding: 14px 16px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: .04em !important;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}
input::placeholder, textarea::placeholder {
  color: #999 !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--tnf-orange) !important;
  box-shadow: 0 0 0 3px rgba(241,171,74,.20) !important;
  outline: none !important;
}

/* File input — light theme */
input[type="file"] {
  background: #ffffff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.20) !important;
  padding: 10px !important;
  border-radius: 10px !important;
}

/* Chips/badges in page topbars (Staff/Station etc.) */
.chip, .pill, .meta .chip {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
}

/* ── Express self_form — step tabs + photo upload ─────────────────── */
.step {
  background: #f5f5f5 !important;
  color: #777 !important;
  border-right: 1px solid rgba(0,0,0,.10) !important;
}
.step.active {
  background: #f1ab4a !important;
  color: #ffffff !important;
}
.step.done {
  background: #dcfce7 !important;
  color: #0c4a18 !important;
}

.photo-drop {
  background: #fff4e1 !important;
  border: 2px dashed rgba(241,171,74,.55) !important;
  color: #000 !important;
}
.photo-drop:hover {
  border-color: var(--tnf-orange) !important;
}
.photo-hint {
  color: #555 !important;
}
.photo-choice-btn {
  background: var(--tnf-orange) !important;
  color: #ffffff !important;
  border: 1px solid var(--tnf-orange-2) !important;
}
.photo-choice-btn:hover {
  background: var(--tnf-orange-2) !important;
  border-color: var(--tnf-orange-2) !important;
}
.photo-btn {
  background: var(--tnf-orange) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Express landing page — poster background image.
   Use individual properties (not the `fixed` shorthand) — Safari macOS
   often fails to paint background-attachment:fixed on short pages. */
body.bg-poster {
  background-color: #ffffff !important;
  background-image: url('/static/pass_bg/poster.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  min-height: 100vh !important;
  padding-top: 4px !important;
}
/* Trim the logo-wrap margin too so the whole header block moves up uniformly */
body.bg-poster .logo-wrap,
body.bg-poster .logo {
  margin-bottom: 10px !important;
}
body.bg-poster .logo-wrap img,
body.bg-poster .logo img {
  margin-top: 0 !important;
}

/* Express gear list — translucent white rows (not solid gray) */
.gear-item {
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(241,171,74,.30) !important;
  color: var(--text) !important;
}
.gear-img,
.gear-img-placeholder {
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
