/* Compact icon button (used for fullscreen) */
.icon-btn {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text);
}
.icon-btn:focus { outline: 2px solid #88a; outline-offset: 2px; }
#rc .icon-btn { font-size: 1.5rem; }
.icon-btn.active { border-radius: 8px; background: var(--accent); color: var(--bg); }

/* Start Management layout: two-column grid, compact single-digit inputs */
.start-map { grid-template-columns: 1fr 1fr; }
.start-map .row-nowrap label { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.start-map .row-nowrap input.num { width: 2.6ch; min-width: 2.6ch; text-align: center; padding: 6px 8px; }
/* Ensure select dropdowns for mapping are also compact and centered */
.start-map .row-nowrap select.num { width: 4ch; min-width: 4ch; padding: 6px 8px; text-align-last: center; -moz-text-align-last: center; }
table .num { width: 4ch !important; min-width: 4ch; text-align: center; padding: 6px 8px; }
td {text-align: center;}

/* Racer header details + FS icon alignment */
.header .small { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#racer .t { font-size: 2rem; font-weight: bold;}

/* assets/app.css */
:root { --bg:#0b1220; --card:#121a2b; --text:#f2f5ff; --accent:#35a0ff; --muted:#8aa0c2; --danger:#c00; --warning:#ff8900; --ok:#0f0; }
:root.light-theme,
body.light-theme {
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0a0f16;
  --accent:#005fcc;
  --muted:#253247;
  --danger:#9f0000;
  --warning:#8a5300;
  --ok:#0b5f1d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;font-size:32px}
.safe-area{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body{padding-bottom:calc(8px + env(safe-area-inset-bottom));}
.header{padding-top:env(safe-area-inset-top)}
.container{max-width:900px;margin:0 auto;padding: 0px 5px;    position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: visible;}
.header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid #223}
.status{display:grid;gap:10px;padding:0px;grid-template-columns:repeat(2,minmax(0,1fr))}
.badge {
  background: var(--card);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #8c8ce9;
  min-width: 120px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge.full{grid-column:1 / -1}
.status.large .badge{font-size:36px}
h3 { margin: 4px 0; font-size: 1.1rem; line-height: 1.2; }
h4 { margin: 1px 0; font-size: 0.9rem; line-height: 0.9; }
/* Force monospaced, tabular digits for all clocks/timers */
#curTime,
#nextCombined,
#startTimeSuffix,
#bigCountdown { font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
#nextCombinedMsg, #racer #nextCombined { font-size: 1.2rem; font-weight: 400 !important; }
.t, #courseDisp, #course {
  font-family: 'Courier New', Courier, monospace;
}

/* onStation and saveSetup same width */
#onStation, #saveSetup { width: 12ch !important; }

/* Flag countdown bar styling (RC and Racer both set .flagbar on the badge) */
.alert { background: rgb(147, 3, 3); color: rgb(255, 255, 255); border: 1px solid rgb(232, 202, 9); }
.alertTime { font-size: 3rem; font-weight: 800; }

.inline-flag-img { height: 1.2em; vertical-align: middle; margin-left: 4px; }
.flag-flash-off, .flag-countdown-flash-off { opacity: 0.5; }

/* Inline */
.inline { display: inline-block; }

/* Racer big 5-minute countdown: green and 3x larger (override earlier size) */
.big-timer { font-size: 84px; color: #0f0; font-weight: 800; letter-spacing: 1px; }
.tabs{display:flex;gap:1px;overflow:auto;padding:0px}
.tab{padding:10px 12px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;background:#394764;border:1px solid #2a3b5b;color:#cfe7ff;white-space:nowrap; margin-bottom: -8px;}
.tab.active{background:var(--accent);color:#001730}
.tabpanes{height:calc(100vh - 170px);overflow:auto;padding:8px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch}
.card{background:var(--card);border:1px solid #223;border-radius:12px;padding:12px;margin-bottom:12px}
.checkedin {background: #55c3ff; color: #0221b8; }
.finshingArea { background-color: #bdbd32; color: #001730; }
/* Double control font sizes */
input,select,button{font-size:32px;padding:7px 14px;border-radius:10px;border:1px solid #ff8900;background:#303848;color:var(--text)}
input[type="checkbox"]{width:1rem; height:1rem;}
button.warning{color:var(--warning);} 
button.danger{color:var(--danger);} 
button.ok{color:var(--ok);} 
button.primary{background:var(--accent);color:#012}
button.right{margin-left: auto;}
/* button#saveSetup { width: auto !important; } */
#suggestOut button { color: var(--card); background-color: var(--warning); margin: 6px 0; font-size: smaller; }  
select.narrow { width: 5ch !important;}
select#fsH, select#fsM { width: 6ch !important;}

/* Visual cue: pulsing glow for important pending actions (e.g., Save Setup) */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(53,160,255,0.0), 0 0 0 0 rgba(53,160,255,0.0); transform: scale(1); }
  50%  { box-shadow: 0 0 18px 6px rgba(53,160,255,0.9), 0 0 36px 12px rgba(53,160,255,0.6); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(53,160,255,0.0), 0 0 0 0 rgba(53,160,255,0.0); transform: scale(1); }
}
button.glow-pulse{
  animation: glowPulse 1.2s ease-in-out infinite;
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin: 10px 0;}
.row-nowrap{display:flex;gap:8px;align-items:flex-end;flex-wrap:nowrap}
.grid{display:grid;gap:8px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.fixed-bottom{position:fixed;bottom:10px;left:0;right:0}
.small{font-size:24px;color:var(--muted)}
#finishControls.small, #finishControls .small { color: var(--bg); }
ul{margin:0;padding-left:18px}

.block { display: block; margin: 5px; font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;}

#btnAddFinish { color: #fff; background-color: var(--danger); }

/* Pseudo fullscreen (iOS fallback) */
.pseudo-fullscreen { height: 100dvh; height: -webkit-fill-available; overflow: hidden; }
.pseudo-fullscreen .container { max-width: 100vw; padding: 0; }
.pseudo-fullscreen .tabpanes { height: calc(100dvh - 140px); height: calc(-webkit-fill-available - 140px); }

/* Ensure last card isn't hard to reach at the bottom of each pane */
/* .pane { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } */

/* Toast baseline (id used by common.js) */
#toastBox{ box-shadow: 0 6px 18px rgba(0,0,0,0.35); border:1px solid #2a3b5b; }

/* Course buttons: 2 rows x 4 columns */
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;/*max-width:480px*/}
.course-grid > button{width:100%}
.course-grid > button:last-child {
  grid-column-start: 2;
  grid-column-end: 4;
}

/* tablet?? */
@media (max-width: 1200px) {
  select.narrow { width: 5ch !important;}
  table .num { width: 5ch !important; min-width: 5ch;}
  #rc #startBadge .flags img,
  #rc #rcRaisedFlags img,
  #rc #startFlags img { height: 44px !important; }
  #racer #startFlags img { height: 22px !important; }
  #racer #rcFlags img { height: 44px !important; }
  #rc .inline-flag-img { height: 2.4em; }
  #racer .inline-flag-img { height: 1.2em; }
  /* select#fsH { width: 6ch !important;}
  select#fsM { width: 6ch !important;} */
  table td { padding: 0 15px}
}

/* Mobile tweaks */
@media (max-width: 700px) {
  /* Global font smaller for phones */
  html, body { font-size: 22px; }
  .data .grid.two{grid-template-columns:1fr 1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .row{flex-direction:column;align-items:stretch}
  .badge{min-width:auto;flex:1}
  .tabs{flex-wrap:nowrap;overflow-x:auto; gap: 4px; padding: 6px; }
  .tabpanes{height:auto;min-height:50vh}
  .small{font-size:20px}
  input,select,button{font-size:24px}
  /* Hide decorative icons to save space */
  #rc .icon { 
    font-size: 0.6rem;
    display: inline;
    margin-right: 5px;
  }
  /* Tighter tabs */
  .tab { padding: 6px 8px; font-size: 0.85rem; }
  /* Compact badges */
  .badge { padding: 6px 8px; }
  /* Make the RC header flagbar more compact on phones */
  .flagbar, .badge.flagbar { padding: 6px 8px; }
  .flagbar .alertTime, .badge.flagbar .alertTime { font-size: 2.4rem; }
  #racer #nextCombined { font-size: 2rem; }
  #nextCombinedMsg { font-size: 1.2rem; }
  #startFlags img { height: 0.8em; }
  #racer #startFlags img { height: 11px !important; }
  /* #racer #rcFlags img { height: 22px !important; } */
  /* #racer .inline-flag-img { height: 0.6em !important; } */
  /* Tighten other large UI elements */
  /* .big-timer { font-size: 64px; } */
  .status.large .badge { font-size: 28px; }
  #statusBtns{grid-template-columns:1fr 1fr}
  table td { padding: 0 5px !important; }
}

/* Responsive: avoid overflow on small screens (login forms, etc.) */
@media (max-width: 500px) {
  .grid.two { grid-template-columns: 1fr; }
  .grid.three { grid-template-columns: 1fr; }
  .row { flex-direction: column; align-items: stretch; }
  input, select, button { width: 100%; padding: 6px; font-size: 16px;}
  .badge { min-width: 0; }
  #btnAddFinish { width: auto; }
  .tablet { display: none; }
  /* Hide decorative icons to save space */
  /* #rc .icon { display: none; } */
  #time-gap { 
    width: 0px;
    display: block;
    height: 0;
   }
  #racer #nextCombined { font-size: 1.4rem; }
  /* smaller badges */
  .smaller { font-size: 0.75rem !important; }
}

/* On touch devices, prefer page-level scrolling over nested scrolling */
@media (pointer: coarse) {
  .tabpanes{ height: auto; max-height: none; overflow: visible; }
}

/* Race setup spacing */
.vspace{margin:10px 0}
.pspace{padding:5px; background-color: #e9e92e; color: #001730;}

/* compact numeric inputs */
input.num{width:5rem}
input.narrow{width:3rem}


#nextCombined img, #nextCombinedMsg img, .flags img, #rcRaisedFlags img, #rcFlags img {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.75));
}

/* Utility classes to replace common inline styles */
.nowrap { white-space: nowrap; }
.overflow-auto { overflow: auto; }
.flex-1 { flex: 1; }
.minw-220 { min-width: 220px; }
.minw-240 { min-width: 240px; }
.pr-8 { padding-right: 8px; }
.mr-8 { margin-right: 8px; }
.gap-6 { gap: 6px; }
.ml-auto { margin-left: auto; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.inline-buttons { display: flex; gap: 6px; flex-wrap: nowrap; }
.w-100 { width: 100%; }
.cutoff-note { margin-bottom: 6px; color: var(--text); }

/* Helper to hide start-only elements when not applicable */
.start-only.hidden { display: none !important; }

/* Postponement modal: viewport-centered and above all overlays */
#ppModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 11050;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#ppModal .modal-card {
  background: #111;
  color: #fff;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: 0;
  padding: 16px;
  border-radius: 8px;
}

body.light-theme .header { border-bottom-color: #9aacbf; }
html.light-theme,
body.light-theme { background: #f6f8fb; color: #0a0f16; }
body.light-theme .header { background: #f6f8fb; }
body.light-theme .tabpanes { background: #f6f8fb; }
body.light-theme .badge { border-color: #354760; }
body.light-theme .badge { background: #ffffff; }
body.light-theme .tab { background: #a9cdff; border-color: #768ca8; color: #0a0f16; }
body.light-theme .tab.active { background: var(--accent); color: #ffffff; }
body.light-theme .card { background: #ffffff; border-color: #7d92ad; }
body.light-theme .alert { background: #ffffff; color: #8a0000; border-color: #8a0000; }
body.light-theme .alertTime { color: #8a0000; }
body.light-theme .small { color: #2c3f60; }
body.light-theme .modal-card .small { color: #e1ee60; }
body.light-theme input,
body.light-theme select,
body.light-theme button { background: #ccc; color: #0a0f16; border-color: #4a607a; }
body#rc.light-theme #btnAudio,
body#rc.light-theme #btnHorn { background: transparent; border-color: transparent; }
body.light-theme button.primary { background: var(--accent); color: #ffffff; border-color: var(--accent); }
body.light-theme .checkedin { background: #edf5ff; color: #0d274a; }
body.light-theme .finshingArea { background: #f4f0da; color: #1f1a00; }
body.light-theme #toastBox { border-color: #4a607a; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
/* body.light-theme #nextCombined img,
body.light-theme #nextCombinedMsg img { filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35)); } */

/* Start flags styling moved from inline */
#startFlags { display: none; vertical-align: middle; margin: 0 5px; }
#startFlags img { height: 1em; vertical-align: middle; margin: 0 3px; }

/* Start Management: hide explanatory header and compress rows */
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
  .start-map .vspace { margin: 6px 0; }
  .start-map .row-nowrap { gap: 6px; }
  .start-map .row-nowrap input.num { font-size: 20px; padding: 6px 8px; width: 2.8ch; min-width: 2.8ch; }
  .start-map .row-nowrap select.num { font-size: 20px; padding: 6px 8px; width: 2.8ch; min-width: 2.8ch; text-align-last: center; -moz-text-align-last: center; }
}