/* Shooting Results — front-end results-recording UI, mobile-first. Light
   background with the "Hunting Finland" accent palette (hunter green
   primary, blaze-orange accent) applied to actions, not the whole page. */

:root {
	--sr-green: #3f7d33;
	--sr-green-dark: #254d1e;
	--sr-green-bg: #eaf3e7;
	--sr-orange: #ff6a00;
	--sr-orange-bg: #fff1e6;
	--sr-danger: #c0392b;
	--sr-border: #dcdcdc;
	--sr-text-muted: #6b7280;
}

/* Base styles target a phone-width viewport; .sr-frontend is widened again
   past 640px so it doesn't stretch edge-to-edge on tablets/desktops.
   width:100% (not just max-width) keeps this predictable when a page
   builder's container is display:flex/grid, where an auto-margined block
   with no explicit width can otherwise collapse to its content size
   instead of filling the column. */
.sr-frontend {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	/* min-width:0 overrides the flexbox/grid default of min-width:auto,
	   which some page builders' containers apply (Elementor confirmed):
	   without it, a wide child like the results table refuses to shrink
	   below its own content width, so instead of scrolling inside
	   .sr-table-scroll it pushes the whole page wider, causing a
	   page-level horizontal scrollbar. overflow-x:hidden is a second,
	   redundant line of defense — whatever the exact cause, nothing
	   inside this container should ever be able to widen the page. */
	min-width: 0;
	overflow-x: hidden;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: #1d2327;
}

.sr-frontend *,
.sr-frontend *::before,
.sr-frontend *::after {
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.sr-frontend {
		width: 100%;
	}
}

.sr-hidden {
	display: none !important;
}

.sr-error {
	color: var(--sr-danger);
	font-weight: 600;
}

.sr-hint {
	color: var(--sr-text-muted);
	font-size: 13px;
	margin: 4px 0 12px;
}

.sr-card {
	background: #fff;
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 20px;
	margin-top: 16px;
}

.sr-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sr-row + .sr-row {
	margin-top: 10px;
}

/* Extra breathing room between the add-shooter / start-new-round / send-
   report actions — on a touch screen these being close together risked a
   mistap on an action that isn't easily undone (starting a round, sending
   a report). .sr-finish-section also visually separates "send report"
   from the round-editing actions above it with a divider, since it's a
   different kind of action (finishing up, not recording). */
.sr-row.sr-action-group {
	margin-top: 28px;
}

.sr-finish-section {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 2px solid var(--sr-border);
}

/* !important on background/color/border/box-shadow throughout this
   button family: confirmed on a live site that an Elementor kit rule
   (selector `.elementor-kit-<id> button`, i.e. one class + the element
   type) carries higher CSS specificity than our plain single-class
   selectors like `.sr-btn`, so its background-color/color/box-shadow/
   border can win even here, on the main page, not just in modals. Sizing
   (padding etc.) isn't included here — those we do declare ourselves,
   which already beats a same-or-lower-specificity theme rule like
   Astra's bare `button { padding: 17px 40px }` without needing !important. */
.sr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: #f3f3f3 !important;
	color: #1d2327 !important;
}

.sr-btn:hover {
	filter: brightness(0.97);
}

.sr-btn-primary {
	background: var(--sr-green) !important;
	color: #fff !important;
}

.sr-btn-accent {
	background: var(--sr-orange) !important;
	color: #fff !important;
}

.sr-btn-danger {
	background: transparent !important;
	color: var(--sr-danger) !important;
	border-color: var(--sr-danger) !important;
	padding: 6px 10px;
}

.sr-btn-lg {
	padding: 16px 24px;
	font-size: 18px;
}

.sr-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.sr-preset-btn {
	min-width: 64px;
	font-size: 20px;
}

/* !important below: .sr-btn's own background/color became !important to
   beat the theme's global button styling (see the .sr-btn rule above),
   which — since !important always wins over a non-!important
   declaration regardless of how specific the selector is — silently ate
   these active-state colors too, even though ".sr-discipline-btn.is-
   active" is a more specific selector than plain ".sr-btn". Picked
   rifle/shotgun, a shots preset, or a distance no longer looked
   selected. */
.sr-preset-btn.is-active {
	background: var(--sr-green) !important;
	color: #fff !important;
}

.sr-discipline-btn {
	min-width: 110px;
	font-size: 16px;
	padding: 14px 18px;
}

.sr-discipline-btn.is-active {
	background: var(--sr-green) !important;
	color: #fff !important;
}

.sr-distance-btn {
	min-width: 90px;
	font-size: 16px;
}

.sr-distance-btn.is-active {
	background: var(--sr-green) !important;
	color: #fff !important;
}

.sr-shotgun-input {
	width: 100px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}

.sr-input {
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 15px;
	min-height: 40px;
}

.sr-session-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 4px;
	border-bottom: 1px solid var(--sr-border);
	cursor: pointer;
}

.sr-session-list-item:hover {
	background: #fafafa;
}

/* Sent sessions are closed — no longer clickable (see renderList() in
   app.js), so they shouldn't look interactive either. */
.sr-session-list-item.is-closed {
	cursor: default;
	opacity: 0.7;
}

.sr-session-list-item.is-closed:hover {
	background: transparent;
}

.sr-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.sr-badge-draft {
	background: var(--sr-orange-bg);
	color: var(--sr-orange);
}

.sr-badge-sent {
	background: var(--sr-green-bg);
	color: var(--sr-green-dark);
}

.sr-round-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

/* !important: same theme/builder button-styling exposure as .sr-btn —
   without it, an inactive round tab could pick up the theme's own
   button color instead of our neutral gray, making it look identical to
   the active (green) tab. */
.sr-round-tab {
	padding: 8px 16px;
	border-radius: 999px !important;
	background: #f3f3f3 !important;
	color: #1d2327 !important;
	font-weight: 600;
	cursor: pointer;
	border: none !important;
	box-shadow: none !important;
}

.sr-round-tab.is-active {
	background: var(--sr-green) !important;
	color: #fff !important;
}

.sr-table-scroll {
	overflow-x: auto;
	min-width: 0;
	border: 1px solid var(--sr-border);
	border-radius: 8px;
}

/* Astra's theme-wide `table, td, th { border: 1px solid ... }` (all four
   sides) otherwise draws a full grid over this table instead of just the
   row-separator lines it's designed with — reset it here and re-declare
   only the bottom border we actually want. */
.sr-table {
	border-collapse: collapse;
	border: none !important;
	width: 100%;
}

.sr-table th,
.sr-table td {
	border: none !important;
	border-bottom: 1px solid var(--sr-border) !important;
	padding: 0;
	text-align: center;
	white-space: nowrap;
}

.sr-table th {
	background: #f7f7f7;
	font-size: 13px;
	padding: 10px 8px;
}

.sr-table td.sr-name-cell {
	text-align: left;
	padding: 0 10px;
	font-weight: 600;
	position: sticky;
	left: 0;
	background: #fff;
	min-width: 160px;
}

/* !important below: page builders (Elementor confirmed) apply their own
   global button styling (colored background, pill border-radius, white
   text) to any <button> inside their widget wrapper — unlike the keypad
   modal's buttons, which are appended straight to <body> and so sit
   outside that wrapper entirely, these cells render inside the normal
   page content and lose the tie. Scoped to exactly the properties that
   were bleeding through, not a blanket override. */
.sr-shot-cell {
	width: 52px;
	height: 52px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #1d2327 !important;
	padding: 0 !important;
}

.sr-shot-cell:hover {
	/* Needs !important too: .sr-shot-cell's own background is !important
	   now (see above), which would otherwise always beat this regardless
	   of specificity/order. */
	background: var(--sr-green-bg) !important;
}

/* Only shown on narrow screens (see the stacked-layout media query below),
   where the header row's shot numbers are hidden along with the rest of
   the table chrome — without this there'd be no way to tell which shot a
   button is once they wrap onto their own line under the shooter's name. */
.sr-shot-index {
	display: none;
}

.sr-total-cell {
	font-weight: 800;
	color: var(--sr-green-dark);
	background: #f7fbf6;
	min-width: 64px;
}

.sr-remove-shooter {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--sr-danger) !important;
	cursor: pointer;
	font-size: 16px;
	padding: 4px;
	vertical-align: middle;
	margin-left: 6px;
}

/* Narrow phones: the sticky shooter-name column was eating space that
   the score cells needed, forcing a lot of horizontal scrolling just to
   see a few shots. Below this width, each row becomes a small "card":
   the name on its own full-width line, with the round's score buttons
   (and total) wrapping in a row underneath instead of staying in fixed
   table columns. */
@media (max-width: 639px) {
	.sr-table-scroll {
		overflow-x: visible;
		border: none;
	}

	.sr-table thead {
		display: none;
	}

	.sr-table,
	.sr-table tbody {
		display: block;
		width: 100%;
	}

	.sr-table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 6px;
		padding: 10px 0;
		border-bottom: 1px solid var(--sr-border);
	}

	.sr-table td {
		display: block;
		/* !important: the base rule's border-bottom is !important too
		   (see above, needed to beat Astra's table/td/th border), so this
		   has to match or it would never win. */
		border-bottom: none !important;
		padding: 0;
		white-space: normal;
	}

	.sr-table td.sr-name-cell {
		flex: 0 0 100%;
		position: static;
		padding: 0 0 4px;
	}

	.sr-shot-cell {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		line-height: 1.1;
	}

	.sr-shot-index {
		display: block;
		font-size: 9px;
		font-weight: 600;
		color: var(--sr-text-muted);
	}

	.sr-total-cell {
		min-width: 44px;
		height: 44px;
		/* !important: .sr-table td (class+element, higher specificity than
		   .sr-total-cell's single class) sets display:block right above,
		   which otherwise silently wins and makes align-items/
		   justify-content do nothing — the value sat top-left instead of
		   centered in its green box. */
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
	}
}

.sr-autosave-indicator {
	font-size: 13px;
	color: var(--sr-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sr-autosave-indicator.is-saved {
	color: var(--sr-green-dark);
}

/* Keypad modal */
/* Every modal is appended straight to <body> (see openKeypad() /
   showNewSessionPrompt() in app.js) so it can overlay the whole
   viewport — which also means it sits OUTSIDE .sr-frontend, and never
   gets the ".sr-frontend *" box-sizing:border-box reset above. Confirmed
   on Elementor: its theme applies its own padding/border to bare
   <button> elements, and without border-box that padding adds on top of
   our sizing instead of being contained within it, so e.g. the keypad's
   4-column grid no longer fits 4 across. Reset it explicitly here,
   scoped to the modal subtree, regardless of where in the DOM it lives. */
.sr-modal-backdrop,
.sr-modal-backdrop * {
	box-sizing: border-box;
}

.sr-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 100000;
}

.sr-modal {
	background: #fff;
	border-radius: 16px 16px 0 0;
	padding: 24px;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	max-height: 90dvh;
	overflow-y: auto;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

.sr-modal-title {
	font-size: 18px;
	font-weight: 800;
	text-align: center;
	margin: 0 0 2px;
}

.sr-modal-subtitle {
	font-size: 13px;
	color: var(--sr-text-muted);
	text-align: center;
	margin: 0 0 16px;
}

.sr-keypad-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

/* !important throughout below: two separate theme/builder-level global
   button styles confirmed bleeding into these (Astra's theme-wide
   `button { padding: 17px 40px; ... }`, and an Elementor kit rule with
   background/color/box-shadow/border — the latter's selector,
   `.elementor-kit-* button`, is one class + one element = HIGHER CSS
   specificity than a plain single-class selector like `.sr-key`, so it
   can win even though it's "just a global button style"). */
.sr-key {
	width: 100%;
	height: 64px;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 12px !important;
	border: 1px solid var(--sr-border) !important;
	box-shadow: none !important;
	background: #f7f7f7 !important;
	color: #1d2327 !important;
	font-size: 24px;
	font-weight: 800;
	cursor: pointer;
}

.sr-key.is-active {
	background: var(--sr-green) !important;
	color: #fff !important;
	border-color: var(--sr-green) !important;
}

.sr-key-clear {
	grid-column: span 2;
	color: var(--sr-danger) !important;
	font-size: 14px;
}

/* Phone landscape: the 0-10 + clear keypad wraps to 4 rows (11 single
   keys + a 2-wide clear key that doesn't fit the leftover column), which
   is fine against a tall portrait viewport but taller than a typical
   landscape one — shrink everything so it fits without scrolling instead
   of relying on .sr-modal's overflow-y as the only fallback. */
@media (max-height: 480px) and (orientation: landscape) {
	.sr-modal-backdrop {
		align-items: center;
	}

	.sr-modal {
		padding: 12px 16px;
		border-radius: 16px;
	}

	.sr-modal-title {
		font-size: 15px;
	}

	.sr-modal-subtitle {
		font-size: 11px;
		margin-bottom: 8px;
	}

	.sr-keypad-grid {
		gap: 6px;
	}

	.sr-key {
		height: 38px;
		font-size: 16px;
		border-radius: 8px;
	}

	.sr-key-clear {
		font-size: 11px;
	}
}