/* Deliberately unstyled/minimal -- colors and polish come later. */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #222;
	background: #dcf9e7;
	overflow-x: hidden; /* safety net for .home-hero's 100vw full-bleed */
}

/* Pushes everything down out from under the fixed update banner while it's
   showing, so it doesn't sit on top of a colored screen-header bar or the
   Home tiles for the couple of seconds it's up before the auto-reload. */
body.has-update-banner {
	padding-top: 40px;
}

/* Fixed to the very top, above absolutely everything (including the
   footer's z-index:100) -- a whole-app status message, not scoped to any
   one screen. */
.update-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	background: #222;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}

.update-banner[hidden] {
	display: none;
}

.update-spinner {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: update-spin 0.8s linear infinite;
}

@keyframes update-spin {
	to {
		transform: rotate(360deg);
	}
}

#app {
	max-width: 480px;
	margin: 0 auto;
	padding: 24px 20px 20px;
	/* Clears the fixed footer (56px tall) plus a little breathing room, so
	   the last bit of content on any screen never sits under it. */
	padding-bottom: 88px;
	position: relative; /* keeps #app's own (unpositioned) content in a
	                        later stacking order than .oval-watermark below,
	                        which is what actually keeps the watermark
	                        behind page content -- see that rule. */
	z-index: 1;
}

/* Edit Dancer and Verify Information: #app gets its own opaque-ish
   background (90%) so the watermark peeks through faintly instead of
   disappearing entirely -- these are form-heavy screens where a hint of
   the logo reads as branding rather than clutter. */
#app:has(> #screen-edit-student:not([hidden])),
#app:has(> #screen-verify:not([hidden])) {
	background: rgba(220, 249, 231, 0.9); /* #dcf9e7 @ 90% opacity */
	min-height: 100vh;
}

#app:has(> #screen-dancers:not([hidden])) {
	background: #dcf9e7;
	min-height: 100vh;
}

/* Install App screen: solid (not translucent) sky blue, so the watermark
   doesn't show through at all -- unlike Edit Dancer/Verify above, this
   screen is meant to read as its own clean, branded space rather than a
   form sitting over the usual background. */
#app:has(> #screen-install:not([hidden])) {
	background: #a8e3ff;
	min-height: 100vh;
}

/* Full-bleed hero photo at the top of the Home screen -- stretches to the
   actual browser viewport width, not just #app's 480px column. left:50% +
   translateX(-50%) re-centers a 100vw-wide box under the (narrower,
   centered) #app container regardless of its max-width; body's
   overflow-x: hidden below is a safety net against the sub-pixel/
   scrollbar edge cases 100vw can introduce. */
.home-hero {
	display: block;
	width: 100vw;
	height: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-top: -24px;
	margin-bottom: 20px;
}

/* Fixed watermark logo, centered, sitting just above the footer, behind
   all real page content. It's a sibling of #app placed BEFORE it in the
   HTML source -- #app's own content has no explicit z-index (auto), so at
   the same stacking level later source order wins and #app paints over
   this wherever the two overlap. pointer-events: none keeps it from
   intercepting taps meant for whatever's drawn on top of it. */
.oval-watermark {
	position: fixed;
	left: 50%;
	bottom: 64px; /* footer height (56px) + a small gap above it */
	transform: translateX(-50%);
	width: min(70%, 320px);
	height: auto;
	z-index: 1;
	pointer-events: none;
}

/* Fixed footer nav -- always on top (highest z-index in the app), content
   simply scrolls behind/under it rather than pushing it up. */
.app-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background: #386c5f;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	z-index: 100;
}

.app-footer[hidden] {
	display: none;
}

.footer-btn {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
}

.footer-btn img {
	display: block;
	width: 28px;
	height: 28px;
}

.screen h1 {
	font-size: 1.5rem;
	margin: 0 0 12px;
}

.screen p {
	margin: 0 0 16px;
	line-height: 1.4;
}

form label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 4px;
}

form input {
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin-bottom: 12px;
}

button {
	font-size: 1rem;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid #999;
	background: #f2f2f2;
	cursor: pointer;
}

button.primary {
	background: #222;
	color: #fff;
	border-color: #222;
}

button.secondary {
	background: #fff;
}

form button[type="submit"] {
	width: 100%;
}

.register-submit-btn {
	background: #16863e;
	border-color: #16863e;
	color: #fff;
}

.error {
	color: #b00020;
	margin-bottom: 12px;
	font-size: 0.9rem;
}

.confirm-name {
	font-size: 1.25rem;
	font-weight: 600;
}

.button-row {
	display: flex;
	gap: 12px;
}

.button-row button {
	flex: 1;
}

.home-buttons {
	display: flex;
	gap: 16px;
	margin-top: 24px;
}

.tile {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 12px;
	min-height: 140px;
}

#btn-shows {
	background: #4b62af;
	border-color: #4b62af;
	color: #fff;
}

#btn-dancers {
	background: #59928f;
	border-color: #59928f;
	color: #fff;
}

.tile-label {
	font-size: 1.1rem;
	font-weight: 600;
}

.tile-count {
	font-size: 1.4rem;
}

.tile-sublabel {
	font-size: 0.7rem;
	/* Only ever shown inside #btn-dancers, which now has a solid dark-teal
	   background -- light/translucent white reads better there than the
	   original gray did. */
	color: rgba(255, 255, 255, 0.85);
	margin-top: -6px;
}

.or-divider {
	text-align: center;
	color: #999;
	font-size: 0.85rem;
	margin: -4px 0 12px;
}

.pending-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px;
	border-radius: 4px;
	background: #fff3cd;
	color: #8a6d00;
	font-size: 0.7rem;
	font-weight: 600;
	vertical-align: middle;
}

ul.list li.pending-row {
	opacity: 0.9;
}

/* Verify Information screen (prior-year family, re-registering) */

.complete-bar {
	/* Full-bleed sticky bar pinned to the very top of the screen -- the
	   negative margins cancel out #app's own padding (24px top, 20px
	   sides) so this reaches the edges instead of sitting inset. */
	position: sticky;
	top: 0;
	z-index: 10;
	margin: -24px -20px 16px;
	padding: 16px 20px;
	background: #b00020;
}

.complete-btn {
	display: block;
	width: 100%;
	background: #b00020;
	color: #fff;
	border: 2px solid #fff;
	font-weight: 700;
	font-size: 1rem;
}

.verify-subhead {
	font-size: 1rem;
	margin: 24px 0 8px;
}

ul.list li.verify-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.verify-toggle {
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	margin-left: 12px;
}

ul.list li.verify-row.selected {
	background: #fff3f3;
}

ul.list li.verify-row.selected .verify-toggle {
	color: #b00020;
}

#verify-comment {
	display: block;
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin-top: 16px;
	resize: vertical;
}

/* Payment screen */

.balance-block {
	margin-bottom: 20px;
}

.balance-label {
	font-size: 0.9rem;
	color: #555;
}

.balance-amount {
	font-size: 2rem;
	font-weight: 700;
}

#payment-amount {
	width: 100%;
	padding: 12px;
	font-size: 1.2rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin-bottom: 12px;
}

.no-payment-needed {
	background: #ddf6dd;
	color: #1a7a1a;
	border: 2px solid #1a7a1a;
	border-radius: 8px;
	padding: 14px;
	margin: 0 0 16px;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
}

.pay-btn {
	width: 100%;
	margin-bottom: 24px;
}

/* Needs "button" in the selector to out-specificity button.primary (0,1,1
   vs plain .pay-btn's 0,1,0) -- without it button.primary's dark
   background quietly won regardless of source order, which is why this
   needed !important before. */
button.pay-btn {
	background: #0070ba; /* PayPal blue */
	border-color: #0070ba;
	color: #fff;
}

.payment-subhead {
	font-size: 1rem;
	margin: 0 0 8px;
}

.history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: rgba(220, 249, 231, 0.9); /* #dcf9e7 @ 90% opacity -- payment-row's lightgreen still wins on those rows since it's more specific */
}

.history-table th {
	text-align: left;
	font-size: 0.8rem;
	color: #555;
	padding: 6px 4px;
	border-bottom: 2px solid #ccc;
}

.history-table td {
	padding: 8px 4px;
	border-bottom: 1px solid #eee;
}

.history-table .amt-cell {
	text-align: right;
	white-space: nowrap;
}

.history-table tr.payment-row {
	background-color: lightgreen;
}

.screen-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

/* Colored header bar for Shows/Dancers/Payment, matching each screen's
   home-tile color (Payment uses the payment-row highlight color instead).
   Verify Information and Edit Dancer use the same treatment as Dancers,
   since they're reached from/lead back to the Dancers list. Breaks out to
   the full viewport width with the same 100vw + left:50% + translateX(-50%)
   technique as .home-hero, then uses its own padding (instead of relying on
   #app's) so the bar's content still lines up with the rest of the screen.
   margin-top cancels #app's top padding so the bar starts flush with the
   very top of the screen. */
#screen-shows .screen-header,
#screen-show-signup .screen-header,
#screen-dancers .screen-header,
#screen-payment .screen-header,
#screen-verify .screen-header,
#screen-edit-student .screen-header,
#screen-add-student .screen-header,
#screen-install .screen-header,
#screen-contact .screen-header {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 16px;
	padding: 24px 20px 16px;
}

/* Cancels #app's top padding so the bar starts flush with the very top of
   the screen -- everywhere except Verify Information when its sticky
   "Complete Registration" bar is showing above the header (that bar already
   cancels #app's top padding itself, and stacking a second -24px here would
   pull the header up underneath/behind it instead of below it). */
#screen-shows .screen-header,
#screen-show-signup .screen-header,
#screen-dancers .screen-header,
#screen-payment .screen-header,
#screen-edit-student .screen-header,
#screen-add-student .screen-header,
#screen-install .screen-header,
#screen-contact .screen-header,
#verify-complete-bar[hidden] + .screen-header {
	margin-top: -24px;
}

#screen-shows .screen-header,
#screen-show-signup .screen-header,
#screen-install .screen-header {
	background: #4b62af;
	color: #fff;
}

#screen-dancers .screen-header,
#screen-verify .screen-header,
#screen-edit-student .screen-header,
#screen-add-student .screen-header {
	background: #59928f;
	color: #fff;
}

#screen-payment .screen-header {
	background: lightgreen;
	color: #222;
}

/* Soft orange -- Contact screen. */
#screen-contact .screen-header {
	background: #e2984a;
	color: #fff;
}

.screen-header h1 {
	margin: 0;
	flex: 1 1 auto;
}

/* Small header button -- "Add Student" on Edit Dancer. Same transparent/
   outlined treatment as button.back, readable on any of this app's colored
   header bars. */
.header-action-btn {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: #fff;
	padding: 6px 12px;
	font-size: 0.8rem;
	border-radius: 6px;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Back "link" inside a colored header bar: force it to inherit the header's
   white text (some browsers/UA stylesheets give links/buttons their own
   default link color, which reads as low-contrast or looks like a stray
   hyperlink against these solid-color bars) and strip any link-styling
   remnants (underline, visited-state color) so it reads as plain white
   header text, not a web link. */
.screen-header a:link,
.screen-header a:visited,
.screen-header a:hover,
.screen-header a:active,
.screen-header button.back {
	color: inherit;
	-webkit-text-fill-color: currentColor; /* iOS Safari can otherwise keep
		its own system button-label color instead of the inherited white,
		even with color:inherit set */
	text-decoration: none;
}

button.back {
	border: none;
	background: none;
	padding: 4px 0;
	font-size: 1rem;
	cursor: pointer;
	-webkit-appearance: none; /* reset iOS Safari's default button chrome,
		which can otherwise force its own text color regardless of `color` */
	appearance: none;
	color: inherit;
}

.note {
	background: #f6f6f6;
	border-radius: 6px;
	padding: 12px;
	font-size: 0.9rem;
}

/* Dancers list hint band -- dark green, white centered text, same green as
   the app footer (#386c5f). */
.dancers-hint {
	text-align: center;
	background: #386c5f;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 12px;
}

/* Contact screen. */
.contact-note {
	text-align: center;
	font-size: 1.15rem;
	font-weight: 600;
	margin: 28px 0 20px;
}

.copy-phone-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	background: #4b62af;
	border: 1px solid #4b62af;
	border-radius: 6px;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.copy-phone-confirm {
	text-align: center;
	margin-top: 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #386c5f;
}

ul.list {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.list li {
	padding: 14px 4px;
	border-bottom: 1px solid #eee;
}

ul.list .item-title {
	font-weight: 600;
}

ul.list .item-sub {
	font-size: 0.85rem;
	color: #555;
}

.show-title-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.show-sub {
	display: flex;
}

.show-date {
	width: 45%;
}

.show-classes {
	width: 50%;
}

ul.list li.clickable {
	cursor: pointer;
}

/* Full-width darker-blue band under the Show Signup header: show details
   on the left, Directions + Add to Calendar action links stacked on the
   right. Same full-bleed technique as .screen-header (100vw + left:50% +
   translateX(-50%)), sitting flush underneath it. */
.show-info {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	background: #334377;
	color: #fff;
	padding: 16px 20px;
	margin-bottom: 16px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.show-info-text {
	flex: 1 1 auto;
	min-width: 0;
}

.show-info-title {
	font-weight: 600;
	font-size: 1.1rem;
	margin-bottom: 4px;
}

.show-info-row {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 2px;
}

.show-info-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}

.show-action-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: #fff;
	text-decoration: none;
	font-size: 0.7rem;
	font-weight: 600;
	text-align: center;
}

.show-action-icon {
	width: 24px;
	height: 24px;
	fill: #fff;
}

.signup-row {
	display: flex;
	align-items: center;
}

.signup-row-name {
	width: 80%;
}

.signup-status {
	width: 20%;
	text-align: right;
	font-weight: 600;
}

.empty-state {
	color: #777;
	padding: 20px 4px;
}

#form-edit-student .field-wrap {
	margin-bottom: 14px;
}

#form-edit-student label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 4px;
}

#form-edit-student input,
#form-edit-student select {
	width: 100%;
	padding: 10px;
	font-size: 1rem;
	border: 2px solid #222;
	border-radius: 6px;
}

#form-edit-student input:disabled {
	background: #eee;
	color: #555;
}

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

.phone-row .phone-input {
	/* flex-basis:0 (not auto) so the input starts from nothing and grows to
	   fill whatever's left after .sms-toggle takes its natural content
	   width, capped at 70% (30% shorter than a plain fill). Using "auto" as
	   the basis here fought with the input's own width:100% and let it claim
	   the full 70% regardless, squeezing "OK to Text" down to just "OK". */
	flex: 1 1 0;
	max-width: 70%;
	min-width: 0;
}

.sms-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.85rem;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* #form-edit-student .sms-toggle input (not just .sms-toggle input) so this
   beats the ID-scoped "#form-edit-student input" rule above on specificity
   -- that rule was otherwise winning despite coming first, turning the
   checkbox into a padded, bordered, 100%-wide box that ate most of the
   row's width and squeezed "OK to Text" down to just "OK". */
#form-edit-student .sms-toggle input {
	width: auto;
	padding: 0;
	border: none;
	border-radius: 0;
}

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

.birthdate-row .birthdate-input {
	/* Same flex-basis:0 fix as .phone-input, so .age-display never gets
	   clipped on narrow screens. */
	flex: 1 1 0;
	max-width: 70%;
	min-width: 0;
}

.age-display {
	font-size: 0.9rem;
	color: #555;
	white-space: nowrap;
	flex: 0 0 auto;
}

.checkbox-readonly {
	display: flex;
	align-items: center;
	gap: 6px;
}

.checkbox-readonly input {
	width: auto;
}

/* Explicit box model + a real border/background/appearance reset (not just
   overriding border-color the way most buttons here do) -- Android's stock
   button chrome can otherwise paint over a background that's only set via
   the generic "button" element rule, leaving this looking unstyled/
   transparent. box-sizing: border-box (set globally on * already, restated
   here for clarity) plus width:100% and zero horizontal margin keeps its
   left/right edges flush with #app's padding, lining up exactly with the
   Shows/Dancers tiles row above it (that row is also just width:100% of the
   same #app, with no side margins of its own). */
.install-app-btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0 0;
	padding: 14px 16px;
	background: #4b62af;
	border: 1px solid #4b62af;
	border-radius: 6px;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
}

/* Without this, the .install-app-btn rule's `display: block` above beats
   the browser's built-in `[hidden] { display: none }` rule -- both are
   0,1,0 specificity, and an author stylesheet always wins over the user
   agent stylesheet regardless of source order. That silently broke
   setupInstallPrompt()'s `installBtn.hidden = true` -- the JS was hiding
   the element correctly the whole time, it just never took visual effect. */
.install-app-btn[hidden] {
	display: none;
}

/* Fixed to the far lower-right of the viewport, just above the footer (same
   64px = 56px footer height + gap offset .oval-watermark uses, but
   right-anchored instead of centered). Shows on every screen since it lives
   outside #app; z-index sits below the footer (100) but above ordinary page
   content. */
.app-version {
	position: fixed;
	right: 10px;
	bottom: 64px;
	font-size: 0.7rem;
	color: rgba(0, 0, 0, 0.45);
	z-index: 90;
	pointer-events: none;
}

/* Resets the button back to plain text so it's visually identical to the
   old <div>-only version tag -- the only functional difference is a
   slightly larger (padding, offset by a matching negative margin so the
   text doesn't visibly shift) tappable/clickable area for the long-press
   logout gesture wired up in app.js. Deliberately no hover/active/focus
   styling of any kind -- this control is not meant to look interactive. */
.app-version-btn {
	all: unset;
	display: inline-block;
	font: inherit;
	color: inherit;
	padding: 10px 14px;
	margin: -10px -14px;
	pointer-events: auto;
	cursor: default;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}

/* Long-press-on-version-tag logout confirmation -- a small modal above
   everything else in the app, including the update banner (200). */
.logout-confirm {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.5);
}

.logout-confirm[hidden] {
	display: none;
}

.logout-confirm-box {
	width: 100%;
	max-width: 320px;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.logout-confirm-box p {
	margin: 0 0 16px;
	font-size: 1rem;
}

.install-block {
	margin-bottom: 28px;
}

.install-block h2 {
	font-size: 1.05rem;
	margin: 0 0 8px;
}

.install-steps {
	margin: 0;
	padding-left: 20px;
	line-height: 1.5;
}

.install-steps li {
	margin-bottom: 6px;
}

.share-icon {
	display: inline-block;
	border: 1px solid #999;
	border-radius: 4px;
	padding: 0 4px;
}

.install-fallback {
	font-size: 0.85rem;
	color: #555;
	margin: 8px 0 0;
}

.install-relogin-note {
	font-size: 0.85rem;
	background: #fff8e1;
	border: 1px solid #e6c200;
	border-radius: 6px;
	padding: 10px 12px;
	margin: 0 0 20px;
}

#btn-install-android {
	display: block;
	width: 100%;
	margin-bottom: 8px;
}