/* 4.16: depth and interaction contrast. Component geometry lives in style.css. */
:root {
  --bg: #0b1511;
  --surface: #1b2d24;
  --surface2: #263d31;
  --surface-dialog: #13231b;
  --surface-raised: #293f31;
  --border: #435e4d;
  --muted: #b8c8bc;
  --dark: #23382c;
  --control-bg: #12251b;
  --control-border: #708b77;
  --control-hover-bg: #34533d;
  --control-hover-border: #91af96;
  --shadow-card: 0 8px 24px #00000024, inset 0 1px 0 #ffffff06;
  --shadow-popup: 0 18px 48px #00000070, inset 0 1px 0 #ffffff08;
}

.topbar {
  background-color: #111f18;
  border-color: var(--border);
  box-shadow: 0 4px 18px #00000020;
}

.chart-card, .summary, .recent-form-card, .latest-round-card,
.table-shell, .first-round {
  background-color: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.summary {
  background-color: var(--border);
}

.recent-form-card {
  background: linear-gradient(135deg, #263c2b, var(--surface) 80%);
}

.chart-card:hover, .chart-card:focus-within {
  border-color: #809c86;
  box-shadow: 0 10px 28px #00000032, inset 0 1px 0 #ffffff09;
}

.latest-round-card {
  border-top-color: #91af65;
}

.latest-round-card:hover {
  background-color: var(--surface2);
  border-color: var(--green);
}

.controls, .compare-filters {
  background-color: var(--surface-dialog);
  border-color: var(--border);
}

.filter {
  background-color: var(--surface2);
  border-color: var(--control-border);
}

.filter:hover {
  border-color: var(--control-hover-border);
}

.filter:focus-within {
  border-color: var(--green);
}

button:where(:not(.primary):not([aria-pressed='true'])), .file-button {
  background-color: var(--surface-raised);
  border-color: var(--control-border);
  color: var(--text);
}

button:where(:not(.primary):not([aria-pressed='true'])):hover, .file-button:hover {
  background-color: var(--control-hover-bg);
  border-color: var(--control-hover-border);
}

.primary:hover {
  border-color: var(--green);
}

.scorecards-button, .chart-drilldown button {
  background-color: var(--surface-raised);
  border-color: var(--control-border);
}

.scorecards-button:hover, .chart-drilldown button:hover {
  background-color: var(--control-hover-bg);
  border-color: var(--control-hover-border);
}

#account-button, #friends-button {
  background-color: var(--surface);
  border-color: var(--control-border);
}

#account-button:hover, #friends-button:hover {
  background-color: var(--control-hover-bg);
  border-color: var(--control-hover-border);
}

input, textarea {
  background-color: var(--control-bg);
  border-color: var(--control-border);
  color: var(--text);
}

.golf-card input {
  background-color: var(--control-bg);
  border-color: var(--control-border);
}

.golf-card .card-row-putts input, .golf-card .card-row-penalties input {
  border-color: var(--control-border);
}

/* Use background-color so existing dropdown chevrons remain intact. */
body select, body .filter select, body .golf-card select,
body .golf-card .card-row-teeResult select, #controls select, .course-select {
  background-color: var(--control-bg);
  border-color: var(--control-border);
  color: #fff;
}

body .filter select, #controls .filter select {
  border-color: transparent;
}

body select option, body select optgroup,
#controls select option, #controls select optgroup {
  background-color: var(--control-bg);
  color: #fff;
}

body select:hover:not(:disabled), #controls select:hover:not(:disabled) {
  border-color: var(--control-hover-border);
}

input:focus-visible, textarea:focus-visible, button:focus-visible,
body select:focus-visible, #controls select:focus-visible {
  border-color: var(--green);
  outline-color: var(--green);
}

dialog {
  background-color: var(--surface-dialog);
  border-color: var(--border);
  box-shadow: var(--shadow-popup);
}

dialog::backdrop {
  background-color: #030906c2;
}

#account-menu, #course-dropdown, .friend-options-panel {
  background-color: var(--surface2);
  border-color: var(--control-border);
  box-shadow: var(--shadow-popup);
}

#account-menu button:hover,
#course-results button:hover, #course-results [aria-selected='true'] {
  background-color: var(--control-hover-bg);
}

#course-dropdown, #course-results button, #course-results strong {
  color: var(--text);
}

#course-results span, #course-search-status, #course-dropdown .course-help {
  color: var(--muted);
}

.empty, .compare-empty {
  background-color: var(--control-bg);
  border-color: var(--border);
}

.round-result, .round-save-bar, .live-play .live-hole-title {
  background-color: var(--surface2);
  border-color: var(--control-border);
}

.live-hole-title > div + div {
  border-color: var(--border);
}

.mobile-hole-card, .pair-card, .compare-scoring, .compare-holes {
  background-color: var(--surface);
  border-color: var(--border);
}

.table-shell thead {
  background-color: var(--surface2);
}

.saved-nine .saved-row-score {
  background-color: #284431;
}

.welcome-preview {
  background: linear-gradient(145deg, #2b4433, var(--surface) 65%);
  border-color: #607e64;
  box-shadow: var(--shadow-popup);
}

.welcome-preview-controls, .welcome-preview-plot {
  background-color: var(--control-bg);
  border-color: var(--border);
}

.welcome-preview-controls button[aria-pressed='true'] {
  background-color: #304932;
  border-color: #91af65;
}

.welcome-workflow li {
  box-shadow: var(--shadow-card);
}

.welcome-final {
  border-color: #708b60;
}

#welcome-nav .welcome-nav-signin {
  border-color: var(--control-border);
}

.app-promotion {
  background: linear-gradient(115deg, #29412c, var(--surface) 80%);
  border-color: #607e54;
  box-shadow: var(--shadow-card);
}