:root {
  color-scheme: dark;
  /* James, 2026-09-06: "kind of dark and that green is not good ... app
     does not look nice." The old --bg WAS Kalshi's brand green painted
     across the ENTIRE page as the base background, with dark cards
     floating on top of it -- a loud, saturated backdrop behind a dark UI
     reads as a clash rather than a theme. Redesigned so the app itself is
     a clean, cohesive dark surface, and the Kalshi green is demoted to
     --accent: used deliberately (branded highlights, the price boxes,
     focus/active states) instead of covering 100% of the viewport. */
  /* James, 2026-09-06: "have the background (not the panels) be a little
     light grey so we have some contrast" -- bg lightened, panels left
     dark/unchanged, so cards now read as clearly-raised dark surfaces
     against a lighter backdrop instead of two similar dark tones sitting
     close together. */
  --bg: #d7d9dc;
  --panel: #35373c; /* unchanged -- dark card, now contrasting against the lighter bg */
  --panel-2: #3d3f45;
  --border: #4a4d54;
  --text: #f2f3f5;       /* light text -- correct INSIDE dark panels, not used directly on --bg */
  --bg-text: #1c1e21;    /* dark text for the few things sitting directly on --bg (e.g. the header clock) */
  --muted: #b3b7bf;
  --accent: #00b67b;      /* Kalshi brand green -- accent only, not the page bg */
  --accent-text: #04140d; /* dark text for surfaces painted in --accent */
  --yes: #22c55e;
  --no: #ef4444;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  /* James, 2026-09-06: "app does not 100% on mobile" -- with no explicit
     height, a short page (the employee one-button screen especially) only
     paints --bg behind its own content; anything below that on a tall
     phone screen showed through as blank/default. min-height fixes that;
     the safe-area padding keeps content clear of a notch/home-indicator
     when launched standalone from the home screen (manifest.json already
     sets display:standalone, and viewport-fit=cover is what makes iOS
     extend content under the notch in the first place -- without the
     inset padding here, that combination would draw content UNDER it). */
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* James, 2026-08-15: "on mobile screen try to fill 100% width" -- the 1rem
   side padding was eating a visible chunk of a phone's already-narrow
   viewport (max-width:720px itself was never the constraint on mobile,
   phones are narrower than that anyway). Tighter padding below 480px so
   panels/tables use more of the real screen width. */
@media (max-width: 480px) {
  body {
    padding-top: max(0.4rem, env(safe-area-inset-top));
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
    padding-left: max(0.4rem, env(safe-area-inset-left));
    padding-right: max(0.4rem, env(safe-area-inset-right));
  }
}

header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.header-logo {
  height: 55px;
  width: auto;
  display: block;
  background: #ffffff;
  padding: 8px 13px;
  border-radius: 10px;
}

.env-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.env-demo { background: #2a4a8a; color: #cfe0ff; }
.env-prod { background: #8a2a2a; color: #ffd9d9; }

.service-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 0.4rem;
}
.service-unknown { background: #444; color: #ccc; }
.service-ok { background: #1e5c2e; color: #baffc9; }
.service-down { background: #8a2a2a; color: #ffd9d9; }

.scalp-heart {
  margin-left: 0.4rem;
  color: #c0392b;               /* red -- idle, outside the :10-:13 window */
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
}
.scalp-heart svg { display: block; }
.scalp-heart.active {
  color: forestgreen;           /* inside the :10-:13 window, actively scanning */
  animation: heartbeat 0.9s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.35); }
  40% { transform: scale(1); }
  60% { transform: scale(1.15); }
}

.banner {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.banner-warn { background: #4a3a1a; border: 1px solid #8a6a2a; }

section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

#account-panel { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--muted); }

#search-panel input[type="text"] {
  width: 70%;
  padding: 0.55rem;
  background: #ffffff;
  border: 1px solid #c8ccd0;
  color: #0f1115;
  border-radius: 6px;
}
#search-panel button {
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
#search-panel button:hover:not(:disabled) { border-color: var(--accent); }
#search-panel button:disabled { opacity: 0.6; cursor: not-allowed; }

.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.6rem;
  vertical-align: middle;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* James, 2026-09-07: "refresh on hist trx briefly shows 'refreshing' which
   goes too wide... change to a spinner instead of the text" -- small,
   icon-sized (not the big standalone .spinner above) so swapping a
   button's contents in-place never changes its width. currentColor keeps
   it visible against the button's own text color in either theme. */
.btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.8;
  animation: spin 0.7s linear infinite;
}

#market-list { list-style: none; padding: 0; margin: 0.75rem 0 0; max-height: 240px; overflow-y: auto; }
#market-list li {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
}
#market-list li:hover { background: var(--panel-2); }
#market-list li.error { color: var(--no); cursor: default; }

.hidden { display: none; }

.muted { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.75rem; }

#price-grid { display: flex; gap: 1rem; margin-bottom: 1rem; }
.price-box {
  flex: 1;
  background: var(--accent); /* deliberate branded highlight -- the one place the Kalshi green is used as a fill */
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}
.price-label { color: var(--accent-text); font-size: 0.75rem; text-transform: uppercase; opacity: 0.7; }
.price-value { font-size: 1.4rem; font-weight: 700; margin-top: 0.25rem; color: var(--accent-text); }

#size-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
#size-row input {
  width: 5rem;
  padding: 0.4rem;
  background: #ffffff;
  border: 1px solid #c8ccd0;
  color: #0f1115;
  border-radius: 6px;
}

#button-row { display: flex; gap: 1rem; }
.big-btn {
  flex: 1;
  padding: 1.5rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
}
.big-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.buy-yes { background: var(--yes); }
.buy-no { background: var(--no); }

#trade-result { margin-top: 0.75rem; font-size: 0.9rem; min-height: 1.2rem; }

#arm-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; }
.arm-btn {
  padding: 0.5rem 0.9rem;
  margin-right: 0.5rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  background: transparent;
}
.arm-yes { border: 2px solid var(--yes); color: var(--yes); }
.arm-no { border: 2px solid var(--no); color: var(--no); }

/* Fire panel -- the screen you actually look at while standing at the venue.
   One big unmistakable button; everything else is secondary/small so a
   thumb can't miss and there's nothing else worth tapping by accident. */
#fire-panel { text-align: center; }
#fire-title { margin: 0 0 0.25rem; }
.fire-price { font-size: 1.6rem; font-weight: 800; margin: 0.5rem 0; }
.fire-updated { margin-bottom: 1rem; }
.fire-btn {
  width: 100%;
  padding: 3rem 1rem;
  font-size: 1.6rem;
  line-height: 1.3;
}
.disarm-btn {
  margin-top: 1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}
#fire-result { margin-top: 1rem; font-size: 0.95rem; min-height: 1.2rem; }

#log-panel h3 { margin-top: 0; font-size: 0.95rem; color: var(--muted); }
#order-log { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; font-size: 0.82rem; }
#order-log li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
#order-log li.error { color: var(--no); }
#order-log li.ok { color: var(--yes); }

/* Small secondary text-button (clear pin, etc.) -- fine on the dark
   panel sections it's normally used in, but NOT on the header, which
   sits directly on raw --bg with nothing behind it (James, 2026-09-03:
   "hard to see on green background" -- true before the 2026-09-06
   redesign moved --bg off the loud Kalshi green; kept muted text here
   still isn't the best fit for a bare header, hence .logout-btn below
   as the header-specific replacement for that one case). */
.linklike {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.logout-btn:hover { background: var(--panel-2); border-color: var(--accent); }
.logout-btn svg { display: block; flex: none; }

.live-clock {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;   /* fixed-width digits so it doesn't jitter every second */
  color: var(--bg-text); /* sits directly on the header/--bg, not inside a dark panel -- needs dark text now that --bg is light */
  margin-right: 0.6rem;
}

#swing-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
#swing-row input {
  width: 6rem;
  padding: 0.4rem;
  background: #ffffff;
  border: 1px solid #c8ccd0;
  color: #0f1115;
  border-radius: 6px;
}

#desc-row { margin-bottom: 1rem; }
#desc-row label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; line-height: 1.3; }
#desc-row textarea {
  width: 100%;
  padding: 0.6rem;
  background: #ffffff;
  border: 1px solid #c8ccd0;
  color: #0f1115;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

#active-market-panel { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }

/* Account switcher (see manager.html's #account-switch-panel comment).
   Wraps so the 4+ accounts James is heading toward (demo, llc1, llc2, ...)
   never push it off the panel edge -- same lesson as the tab bar. */
#account-switch-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
#account-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  max-width: 100%;
}

/* James, 2026-09-07: "need tabs for sports and climate also. maybe a 2nd
   row. i dont want it to scroll left right" -- wrap instead of the old
   flex:1-with-no-basis behavior, which just squeezed every button thinner
   as more got added rather than ever actually overflowing/scrolling. A
   min-width basis means a wrapped second row's buttons stay a readable
   size instead of shrinking to fit however many happen to land on a line. */
.tab-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.tab-btn {
  flex: 1 1 140px;
  padding: 0.6rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.tab-btn.tab-active-selected { background: var(--panel); color: var(--text); border-color: var(--accent); }

#active-table, #history-table, #scalp-log-table, #stat-arb-log-table, #liquid-scalp-log-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
#active-table th, #history-table th, #scalp-log-table th, #stat-arb-log-table th, #liquid-scalp-log-table th {
  text-align: left;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
#active-table td, #history-table td, #scalp-log-table td, #stat-arb-log-table td, #liquid-scalp-log-table td { padding: 0.4rem; border-bottom: 1px solid var(--border); }

.close-btn {
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  border: 1px solid var(--no);
  background: transparent;
  color: var(--no);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.close-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Login/splash page -- fills the whole screen (vs. floating as a small
   card up top) since this is the first thing seen, often on a phone, and
   was hard to read small. */
body.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* This selector (element+class) beats the plain `body` rule's padding on
     specificity, so it needs its own safe-area handling repeated here --
     otherwise the login page loses the notch/home-indicator protection
     added 2026-09-06. */
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
body.login-body header {
  margin-bottom: 2.5rem;
}
body.login-body .header-logo {
  height: 110px;
}
#login-panel { max-width: 420px; width: 100%; text-align: center; }

/* James, 2026-08-15: login box wasn't filling the width on his S23. Root
   cause: body.login-body has its OWN padding (1.5rem) that the earlier
   mobile-width fix on the plain `body` rule never touched (class selector
   beats element selector regardless of media query), plus #login-panel's
   max-width:420px becomes the binding constraint on a phone wide enough to
   clear 420px + 2*padding, leaving visible margin either side. Both
   addressed directly below rather than relying on width:100% alone. */
@media (max-width: 480px) {
  body.login-body {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
  #login-panel { max-width: 100%; }
}
#login-panel h2 { font-size: 2rem; margin-bottom: 1.5rem; }
#login-panel form { display: flex; flex-direction: column; gap: 1.1rem; text-align: left; }
#login-panel label { font-size: 1.05rem; color: var(--muted); display: block; margin-bottom: 0.35rem; }
#login-panel input {
  width: 100%;
  padding: 1.1rem;
  font-size: 1.25rem;
  background: #ffffff;
  border: 1px solid #c8ccd0;
  color: #0f1115;
  border-radius: 8px;
}
#login-panel .big-btn { font-size: 1.4rem; padding: 1.4rem; }
#login-panel .banner-warn { font-size: 1.05rem; }

/* Employee view -- deliberately minimal: description + one button, nothing else */
#waiting-panel { text-align: center; color: var(--muted); }
#bet-panel { text-align: center; }
#bet-desc { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.5rem; }
#bet-result { margin-top: 1rem; font-size: 0.95rem; min-height: 1.2rem; }