/* =========================
   Form Controls
   Extracted from main.css
   ========================= */

/* =========================
   Form controls: <select> (Bootstrap-like)
   Unified styling for all <select> elements in both themes.
   Uses a theme-aware SVG caret. Use .select-plain to opt out.
   ========================= */
:root {
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3E%3Cpath d='M8 11.5a.75.75 0 0 1-.53-.22l-4-4a.75.75 0 1 1 1.06-1.06L8 9.69l3.47-3.47a.75.75 0 0 1 1.06 1.06l-4 4a.75.75 0 0 1-.53.22z'/%3E%3C/svg%3E");
}
select:not(.select-plain) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--panel);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 32px 6px 10px;
  line-height: 1.4;
  font-weight: 500;
  background-image: var(--select-caret);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
  cursor: pointer;
}

select:not(.select-plain):hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

select:not(.select-plain):focus,
select:not(.select-plain):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

select:not(.select-plain):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

select:not(.select-plain) option:checked {
  background: linear-gradient(var(--accent), var(--accent));
  color: #ffffff;
}

select:not(.select-plain) option:hover,
select:not(.select-plain) option:focus {
  background-color: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--ink);
}

/* Theme the opened option list where browser engines allow it. */
select:not(.select-plain) option {
  background: var(--panel);
  color: var(--ink);
}

/* In-table selects: keep compact height, preserve styling */
.banker-table select:not(.select-plain),
.vegas-table select:not(.select-plain),
.skins-table select:not(.select-plain),
.junk-table select:not(.select-plain),
.bbb-table select:not(.select-plain) {
  padding: 4px 28px 4px 8px;
  background-size: 14px 14px;
  background-position: right 6px center;
  border-radius: var(--radius-sm);
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css
   ========================================================================= */

:root[data-theme="light"] {
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b8a8b'%3E%3Cpath d='M8 11.5a.75.75 0 0 1-.53-.22l-4-4a.75.75 0 1 1 1.06-1.06L8 9.69l3.47-3.47a.75.75 0 0 1 1.06 1.06l-4 4a.75.75 0 0 1-.53.22z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .control input[type="text"] {
  background: #ffffff;
  color: #1a1c1f;
  border: 2px solid #bcc7d2;
}

:root[data-theme="light"] input[type="checkbox"] {
  accent-color: #0090e0;
}

:root[data-theme="light"] input[type="number"] {
  background: #ffffff;
  color: #1a1c1f;
  border: 2px solid #bcc7d2;
}

:root[data-theme="light"] input[type="number"]:focus {
  border-color: #0090e0;
  outline: none;
}

/* Generic touch-friendly input sizing (moved from junk.css). Provides the
   default padding / min-height / font-size for number and text inputs
   across the app. Specific scorecard inputs (.score-input, .ch-input,
   .par-row input, .hcp-row input) override these in scorecard.css. */
input[type="number"],
input[type="text"] {
  padding: 10px var(--space-md);
  min-height: var(--touch-min);
  font-size: calc(var(--text-xl) + var(--font-data-adjust));
}

/* ============================================================
   Migrated style.cssText component classes (2026-06)
   Property values are copied VERBATIM from the inline cssText
   they replace — zero pixel change intended. Overlay z-indexes
   use the token scale documented in main.css :root.
   ============================================================ */

/* ── Cloud-sync prompts (js/cloudsync/ui/dialogs.js) ──
   promptRoundName + promptSignInProvider overlay/card/title/input/actions. */
.cloud-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-dialog-top);
  padding:
    max(16px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 16px))
    16px
    max(16px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 16px));
}

.cloud-prompt-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(
    100dvh -
    max(16px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 16px)) -
    max(16px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 16px))
  );
  overflow-y: auto;
}

.cloud-prompt-card--roundname {
  width: min(400px, 96vw);
  padding: 20px;
  gap: 14px;
}

.cloud-prompt-card--signin {
  width: min(420px, 96vw);
  padding: 18px;
  gap: 10px;
}

.cloud-prompt-title {
  margin: 0;
  font-size: var(--text-xl);
}

/* (0,3,0) on purpose: as inline style this input used to beat the generic
   input[type="text"] rules that load AFTER this file — responsive-layout.css
   (0,1,0 media rule) and games-mode.css :root[data-font-size="large"]
   input[type="text"] (0,2,1). min-height is intentionally NOT set here: the
   generic input rule above supplied it under the old inline style too. */
.cloud-prompt-overlay .cloud-prompt-card .cloud-prompt-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--accent, #4a9eff);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--text-base);
  box-sizing: border-box;
}

.cloud-prompt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── QR share-mode chooser (js/cloudsync/qr/share-mode-dialog.js) ──
   Rides the shared .ui-dialog-* foundation; only its scrim tint/blur differ
   from the canonical dialog. Compound selector so it outranks
   .ui-dialog-scrim (ui-dialogs.css loads after this file). */
.ui-dialog-scrim.qr-share-mode-scrim {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ── QR camera scanner (js/cloudsync/qr/qr-scan.js) ── */
.qr-scan-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-scanner);
  padding:
    max(12px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 12px))
    12px
    max(12px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 12px));
}

.qr-scan-card {
  background: #111;
  color: #fff;
  border-radius: 12px;
  width: min(94vw, 460px);
  max-height: calc(
    100dvh -
    max(12px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 12px)) -
    max(12px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 12px))
  );
  overflow-y: auto;
  padding: 12px 12px 10px;
  box-sizing: border-box;
}

.qr-scan-title {
  margin: 0 0 8px 0;
  font-size: calc(20px + var(--font-size-step));
}

.qr-scan-msg {
  margin: 0 0 10px 0;
  color: #c8cdd3;
  font-size: var(--text-base);
}

.qr-scan-video {
  display: block;
  width: 100%;
  max-height: min(58vh, 360px);
  background: #000;
  border-radius: 10px;
  object-fit: cover;
}

.qr-scan-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* (0,2,0): must outrank the responsive-layout.css `.btn { min-height: … }`
   media rules that load after this file (the old inline 40px beat them). */
.qr-scan-actions .qr-scan-cancel {
  min-height: 40px;
}

/* ── QR share modal (js/cloudsync/qr/qr-code.js) ── */
.qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding:
    max(20px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 20px))
    20px
    max(20px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 20px));
  animation: fadeIn 0.2s ease;
}

.qr-modal-card {
  background: white;
  color: #111;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  max-height: calc(
    100dvh -
    max(20px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 20px)) -
    max(20px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 20px))
  );
  overflow-y: auto;
  padding: 20px;
  text-align: center;
  animation: slideUpFull 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.qr-modal-title {
  margin: 0 0 10px 0;
}

.qr-modal-subtitle {
  margin: 0 0 14px 0;
  color: #555;
}

.qr-modal-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0 14px 0;
}

/* Copyable-link fallback shown when no QR renderer is available
   (js/cloudsync/qr/qr-code.js openQrModalFromText catch path). */
.qr-modal-link-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

/* [E3] Stale-code update nudge — a dismissible bottom chip (docs/js/core/update-nudge.js). */
.app-update-nudge {
  position: fixed;
  left: 50%;
  bottom: max(16px, var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));
  transform: translateX(-50%);
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 460px);
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
}
.app-update-nudge-text { flex: 1 1 auto; }
.app-update-nudge-refresh {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.app-update-nudge-dismiss {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, var(--text));
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
/* [perf] neither button had any pressed-state feedback at all —
   notes/PERFORMANCE_UPGRADE.md §Appendix E finding #26. */
.app-update-nudge-refresh:active,
.app-update-nudge-dismiss:active {
  transform: scale(0.95);
  filter: brightness(0.85);
  transition: transform 0ms, filter 0ms;
}

/* ── Join-success overlay (js/ui/join-success-toast.js) ──
   JS still drives opacity 0→1→0 via inline style; the class only carries
   the static base (initial opacity 0 + transition). */
.join-success-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.join-success-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  padding: 16px 20px;
  font-size: var(--text-xl);
  font-weight: 700;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
  max-width: min(90vw, 420px);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
}

.join-success-check {
  width: 28px;
  height: 28px;
  border: 2px solid #1f9d55;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #1f9d55;
  flex-shrink: 0;
}

/* ── Banker bottom-sheet phone result block (js/games/banker-sheet/summary.js) ──
   Doubled selector (0,2,0) so it outranks the single-class .bss-result-block
   rules in banker.css / responsive-layout.css, which load after this file —
   the old inline cssText beat them. */
.bss-block-fill.bss-block-fill {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* ── ?syncdebug=1 field-diagnostics readout (js/cloudsync/realtime/remote-apply.js) ── */
.syncdbg-readout {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px));
  max-height: 44vh;
  overflow: auto;
  margin: 0;
  z-index: var(--z-critical);
  background: rgba(0, 0, 0, 0.86);
  color: #0f0;
  font: 10px/1.25 monospace;
  padding: 4px;
  white-space: pre-wrap;
  pointer-events: none;
}