/* ui_foundation.css
   Shared UI layer for the modernized N_subscription screens.
   Loaded unconditionally (after master.css/master_small.css) so these
   components look and behave identically regardless of the server-side
   $small/$size detection - responsiveness here comes only from real
   @media queries, not from PHP branching. */

/* Prevent oversized images (e.g. header banners with only a fixed HTML
   height=, no width=) from overflowing narrow viewports. Only constrains
   width when it would otherwise exceed the container - desktop layouts
   with room to spare are unaffected. */
img { max-width: 100%; }

/* Small fixed-size status icons (P_20's participation squares/medal stars) sit in
   table cells that can get squeezed narrower than the icon's own width=/height=
   attributes when a neighbouring cell's text needs the room (e.g. the legend's
   long "Event (day) did not start yet" labels). The rule above then shrinks only
   the width (max-width is a width-only constraint), stretching the icon out of
   its square aspect ratio and making it visibly narrower than the same icon
   elsewhere. .icon-fixed opts these out so they stay exactly width=/height=. */
.icon-fixed { max-width: none; }

:root {
	--m4dw-navy:    #030923;
	--m4dw-green:   #77bb17;
	--m4dw-red:     #92002B;
	--m4dw-error:   #f44336;
	--m4dw-warning: #FFAA2C;
	--m4dw-info:    #47A8F5;
	--m4dw-success: #6BBD6E;
}

/* Buttons */
.btn {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	font-family: 'Open Sans', Trebuchet MS;
	font-size: 12pt;
	font-weight: bold;
	cursor: pointer;
	transition: filter .15s;
	-webkit-appearance: none;
	appearance: none;
}
.btn:hover { filter: brightness(0.9); }
.btn:focus { outline: 2px solid var(--m4dw-navy); outline-offset: 2px; }
.btn-primary   { background: var(--m4dw-green); color: #fff; }
.btn-secondary { background: var(--m4dw-navy);  color: #fff; }
.btn-danger    { background: var(--m4dw-red);   color: #fff; }
.btn-info      { background: #99ccff; color: var(--m4dw-navy); }
.btn-warning   { background: var(--m4dw-warning); color: var(--m4dw-navy); }

/* Small rounded links (rules/terms/privacy row) - same color language as the
   buttons above but pill-shaped and inline, since these are secondary
   reference links rather than actions in the step flow. */
.datapill {
	display: inline-block;
	padding: 6px 16px;
	margin: 4px 6px;
	border-radius: 999px;
	font-family: 'Open Sans', Trebuchet MS;
	font-size: 11pt;
	font-weight: bold;
	text-decoration: none;
	transition: filter .15s;
}
.datapill:hover { filter: brightness(0.92); text-decoration: none; }
.datapill-rules   { background: var(--m4dw-info); color: #fff; }
.datapill-privacy { background: var(--m4dw-info); color: #fff; }

/* Actions row (back + next together, e.g. bottom of a registration step).
   flex-wrap must stay nowrap: inside a table cell, a wrapping flex box reports its
   preferred width as just its widest single child (since it could wrap to fit), so
   the browser's table auto-layout collapses the cell to one button's width and wraps
   anyway - the opposite of what we want. nowrap forces the real summed width instead. */
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }

/* Text fields
   Fixed width + box-sizing so every single-field input (voornaam, plaats,
   telefoon, email, wachtwoord) and every <select> (land, nationaliteit) end
   up exactly the same size, instead of the old mix of HTML size= attributes
   (input) and inline width/no-width styling (select). */
.form-control {
	font-family: 'Open Sans', Trebuchet MS;
	font-size: 12pt;
	padding: 8px 10px;
	border: 1px solid var(--m4dw-navy);
	border-radius: 5px;
	color: var(--m4dw-navy);
	width: 300px;
	max-width: 100%;
	height: 40px;
	box-sizing: border-box;
	background-color: #fff;
}
select.form-control {
	-webkit-appearance: none;
	appearance: none;
}
textarea.form-control {
	height: auto;
	min-height: 80px;
	resize: vertical;
}
.form-control:focus {
	outline: none;
	border-color: var(--m4dw-green);
	box-shadow: 0 0 0 2px rgba(119,187,23,.35);
}
.form-control.is-invalid {
	border-color: var(--m4dw-red);
	background: #FFF5F5;
}
/* Compound field (tussenvoegsel + achternaam): the two inputs together add
   up to the same total width as a single .form-control field. */
.field-group { display: flex; gap: 6px; width: 300px; max-width: 100%; }
.field-group .form-control:first-child { flex: 0 0 70px; width: 70px; }
.field-group .form-control:last-child  { flex: 1 1 auto; width: auto; }

/* Compact variant for short, inherently narrow fields (day/month/year).
   72px (not 64px) so the "maand"/"month" placeholder fits without clipping. */
.form-control--sm { width: 72px; margin-right: 4px; }
/* Per-field inline hint text (e.g. "please enter first name") - subtle red
   text, not a solid-background label like the old buttonred* cells. */
.field-error-text {
	color: var(--m4dw-red);
	font-size: 10pt;
}

/* Notification toast (showStatus() in alert.js) */
.statusbar {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 90vw;
	height: auto;
	padding: 12px 20px;
	text-align: center;
	border-radius: 8px;
	color: #000;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	z-index: 200;
	overflow: hidden;
	overflow-y: auto;
}
.statusbarhighlight { font-weight: bold; background-color: khaki;      color: Maroon; }
.statusbarError     { font-weight: bold; background: var(--m4dw-error);   }
.statusbarWarning   { font-weight: bold; background: var(--m4dw-warning); }
.statusbarInfo      { font-weight: bold; background: var(--m4dw-info);    }
.statusbarSuccess   { font-weight: bold; background: var(--m4dw-success); }

/* Responsive stepper (replaces the fixed-pixel-offset version in N_steps_i.php) */
.stepper {
	display: flex;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 8px 0 16px;
}
.stepper__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.stepper__item:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 14px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: #ccc;
	z-index: 0;
}
.stepper__circle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(20px, 6vw, 28px);
	height: clamp(20px, 6vw, 28px);
	border-radius: 50%;
	background: var(--m4dw-green);
	color: var(--m4dw-navy);
	font-weight: bold;
	font-size: clamp(9px, 2.4vw, 12pt);
}
.stepper__item.is-active .stepper__circle { background: var(--m4dw-navy); color: var(--m4dw-green); }
.stepper__label { margin-top: 4px; font-size: 10pt; line-height: 1.15; }
.stepper__caption { display: none; }
@media (max-width: 480px) {
	.stepper__label   { display: none; }
	.stepper__caption { display: block; text-align: center; font-size: 10pt; margin: 0 0 12px; }
}

/* Persistent inline notice for page-level explanatory error text (e.g. "fix the
   fields marked red above") that should stay visible while the user reads the
   page, unlike the auto-dismissing .statusbar toast. Subtle tint + border,
   matching the .form-control.is-invalid treatment instead of a solid-red block. */
.alert-box {
	border: 1px solid var(--m4dw-red);
	background: #FFF5F5;
	color: var(--m4dw-red);
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 11pt;
}

/* Stacks a label/input(/button) table to one full-width column per cell on narrow
   screens, instead of squeezing two table columns (label + field) side by side -
   the old side-by-side layout was what made simple forms (P_10, P_15, ...)
   overflow/feel cramped on a phone. Put .stack-mobile on the <table>; mark any
   pure spacer cell (an empty alignment <td> that only matters in the desktop
   2-column layout) with .stack-skip so it doesn't leave a dead empty row.
   The table's own width:100% here overrides whatever width%/margin:auto the page
   gave it (e.g. P_10's 95%/99%), which left text and full-width .btn buttons
   flush against the screen edges - with no margin, unlike the header bars above
   them. Give the cells the same side padding instead, via box-sizing:border-box
   so it insets the content rather than adding to the 100% width. */
@media (max-width: 480px) {
	table.stack-mobile,
	table.stack-mobile > tbody,
	table.stack-mobile tr,
	table.stack-mobile td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	table.stack-mobile td { padding: 5px 12px; }
	table.stack-mobile .stack-skip { display: none; }
}

/* Label/value read-only tables (P_20's participant-details block) don't need the
   full one-cell-per-line stacking .stack-mobile gives input forms - a label and its
   short value ("Participant number" / "13066") comfortably share one line, so
   stacking them wasted vertical space for no readability gain. Put .kv-mobile on
   the <table> instead of .stack-mobile: each row becomes a flex row with the label
   at a fixed share of the width and the value taking the rest (wrapping on its own
   if long, e.g. an email address), keeping label and value on the same line. */
@media (max-width: 480px) {
	table.kv-mobile, table.kv-mobile > tbody { display: block; width: 100%; }
	table.kv-mobile tr {
		display: flex;
		align-items: baseline;
		gap: 10px;
		padding: 5px 12px;
		box-sizing: border-box;
	}
	table.kv-mobile td:first-child { flex: 0 0 42%; }
	table.kv-mobile td:nth-child(2) { flex: 1 1 auto; overflow-wrap: anywhere; }
	table.kv-mobile .stack-skip { display: none; }
}

/* P_20's participation/medal history grid: the row-header column ("Participations",
   Day 1..N, Medals, Routes) stays pinned while only the year columns scroll
   underneath it, instead of scrolling off with everything else - without this,
   scrolling right loses the row labels the year columns' squares/medals are read
   against. Needs an opaque background so scrolled year-column content doesn't show
   through underneath the pinned column, and a shadow to read as "above" that
   content rather than just another column. */
@media (max-width: 480px) {
	.sticky-col {
		position: sticky;
		left: 0;
		z-index: 2;
		background-color: #fff;
		box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.25);
	}
}

/* .m_100/.m_10 (master.css/master_small.css) shift the whole page table sideways
   via position:relative;left:100px (desktop) or left:10px (small) - tuned for the
   two IP-detected server-side sizes, not for a real narrow viewport. When the
   fragile $small/ACTUAL_IP detection (see plan) misclassifies a real phone as
   desktop, the 100px shift pushes table content off the right edge of the
   screen entirely. Neutralize the shift with a real media query so content
   always stays on-screen regardless of what the server guessed.
   Plain left:0 would still leave these (width < 100%) tables flush against the
   left edge, dumping all the slack on the right - the exact "less room on the
   left than on the right" asymmetry reported after the first fix. Centering
   with margin instead of offsetting with left splits that slack evenly. */
@media (max-width: 480px) {
	.m_100, .m_10, .m_50, .m_150 { position: static; left: 0; margin: 0 auto; }
}

/* kop5_menu_i.php stacks its 3 header tables (flags/logo/blue bar) using hard-coded
   inline top:-Npx offsets, tuned only for its own historical desktop-vs-small split.
   In real narrow viewports this clips the flag bar above the visible area AND still
   reserves its un-shifted (taller) flow height below - the combination is both a
   clipped header and a dead whitespace gap before the page content. Since position:
   relative offsets don't affect sibling flow (confirmed by measurement: neutralizing
   them makes the 3 tables stack back-to-back with zero gap/overlap), removing them is
   a safe, purely-visual undo of that hack for narrow viewports - the PHP itself
   (out of scope, see plan) is untouched. */
@media (max-width: 480px) {
	.midscrn > table { top: 0 !important; }
	.midscrn > table:first-child { margin-top: -10px; }
}

/* The org subtitle ("The largest 4Days Walking event in Spain") is bold body-size
   text; on real narrow phones that's just wide enough to wrap to a second line.
   A touch smaller keeps it on one line without needing to shrink it on desktop. */
@media (max-width: 480px) {
	.midscrn .org_1 { font-size: 10.5pt; }
}

/* Generate-password button: match the field width and stack full-width below the
   password field on narrow viewports, instead of a small button squeezed next to it. */
@media (max-width: 480px) {
	.btn-info { width: 300px; max-width: 100%; display: block; margin-top: 8px; }
}

/* Back+next together barely miss fitting one row at 300px field width with the
   default .btn padding/gap (measured: 309px needed vs 302px available) - tighten
   both slightly on narrow viewports so they stay side by side instead of wrapping. */
@media (max-width: 480px) {
	.form-actions { gap: 6px; }
	.form-actions .btn { padding: 10px 12px; }
}

/* Vertical stack of page-level action buttons (P_20_show.php: change data / resend
   ticket / print ticket / logout) - replaces a set of hardcoded position:absolute
   left/top pixel offsets (with a separate hand-tuned $absnum per language on mobile)
   that broke on any viewport the offsets weren't tuned for. */
.page-actions { display: flex; flex-direction: column; gap: 10px; }
.page-actions form { display: block; }

/* Route/day block on P_80_show_route.php: checkpoint table next to its map image on
   desktop, stacked below it on narrow screens - replaces a set of hardcoded
   position:absolute left/top pixel offsets (one block per walked day, manually
   stacked by index) that broke on any viewport narrower than the desktop layout
   they were tuned for. */
.route-day-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.route-day-info { flex: 2 1 480px; min-width: 280px; }
.route-day-map { flex: 1 1 320px; min-width: 220px; }
/* Uploaded route screenshots come in whatever size/ratio was cropped by hand
   (RW_10_route_set_bulk_maps.php places no constraint on it) - force a fixed
   ratio here so the day blocks line up instead of jumping height per image. */
.route-day-map img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* All buttons full-width on mobile, except when paired in a .form-actions row
   (back+next stay side by side there, per the existing rule above) - matches
   the treatment .btn-info/.sticky-back .btn already had for their one button. */
@media (max-width: 480px) {
	.btn { width: 100%; display: block; }
	.form-actions .btn { width: auto; display: inline-block; }
}

/* "Terug naar start" pinned to the bottom of the viewport on mobile, instead of
   wherever it happens to fall in the form - on short forms that left a dead gap
   below it instead of reading as "at the bottom of the screen". position:fixed
   takes it out of flow entirely, so it no longer matters where m4dw_btn_back()
   is echoed relative to the rest of the page.
   safe-area-inset-bottom keeps it clear of the iOS home-indicator (most
   participants register on iPhone, see CLAUDE.md). !important on the button
   width overrides the mix of inline style='width:...' (or none) already baked
   into ~20 call sites, without having to touch each of them individually. */
@media (max-width: 480px) {
	body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
	.sticky-back {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0,0,0,.12);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	}
	.sticky-back .btn { width: 100% !important; }
}