/*
 * css/app-shell.css
 *
 * app.holcombe.hockey only — enqueued conditionally in functions.php
 * (holcombe_assets(), guarded by hhc_is_app_domain()). Deliberately
 * dark by default and independent of the marketing site's own light/dark
 * toggle (the app is meant to look distinct from the marketing site at a
 * glance). Since v1.53.19 it also has a LIGHT palette: js/app-theme.js and a
 * first-paint script (inc/app-theme.php) set data-hhc-theme="light|dark" on
 * <html> (Auto follows the phone's setting; Profile → Appearance overrides it),
 * and the `html[data-hhc-theme="light"] body.hhc-app` block below redefines
 * the same variables. Use the variables, never literal colours, in app CSS.
 *
 * Redefines the custom properties main.css/public-portal-styles.php consume
 * (--paper, --ink, --border, --muted, --red, --red-dark, --radius, --shadow)
 * AND the separate token set selection-board.css declares its own :root
 * defaults for (--card, --line, --gold, --green, --amber, --grey,
 * --dark-grey, --junior-shade) — the selection board doesn't share
 * main.css's tokens at all, it has its own, so it needed its own dark
 * values here too (missing this the first time round left --ink flipped
 * light while --card/--line etc. stayed at their light defaults — light
 * text on light cards). All scoped to body.hhc-app, so every shared
 * component built on either token set (the /my-profile/ login box, any
 * .hhc-fixtures-admin card, .hhc-btn, .hhc-table, .hhc-notice, and now the
 * selection board) re-themes correctly here, with zero changes to the
 * files that define them — same reasoning public-portal-styles.php's own
 * docblock gives for reusing the site's tokens rather than a parallel
 * palette.
 */

/* The page behind body (overscroll, the moment before body paints). */
html { background: #121214; }
html[data-hhc-theme="light"] { background: #f4f2ee; }

body.hhc-app {
	/* Native controls (the name-suggestion list on MoM/DoD/scorers/attendance,
	   selects, date pickers, scrollbars) must draw dark too — without this they
	   keep a light background while inheriting our light text, so options vanish. */
	color-scheme: dark;
	--hhc-app-bg: #121214;
	--hhc-app-surface: #1c1c1f;
	--hhc-app-surface-2: #17171a;
	--hhc-app-card: #232327;
	--hhc-app-line: #34343a;
	--hhc-app-border: #29292d;
	--hhc-app-text: #f5f4f2;
	--hhc-app-muted: #9a9a9e;
	--hhc-app-red: #e31b23;
	--hhc-app-red-dark: #b4151b;
	--hhc-app-gold: #c9a227;
	--hhc-app-green: #4caf50;
	/* secondary/faint text, green text and the soft tints (pills, icon chips, hover, notices) */
	--hhc-app-text-2: #c7c7cb;
	--hhc-app-faint: #6e6e72;
	--hhc-app-green-text: #3fae55;
	--hhc-app-tint-red: rgba(227, 27, 35, .14);
	--hhc-app-tint-gold: rgba(201, 162, 39, .16);
	--hhc-app-tint-green: rgba(63, 174, 85, .16);
	--hhc-app-hover-red: rgba(227, 27, 35, .12);
	--hhc-app-notice-green: rgba(76, 175, 80, .15);
	--hhc-app-notice-gold: rgba(201, 162, 39, .15);
	--hhc-app-chrome: #000000;

	/* Repoint the site's own design tokens at the app palette, so every
	   shared component built on them (hhc-fixtures-admin, hhc-btn,
	   hhc-table, hhc-notice) re-themes automatically — see docblock. */
	--paper: var(--hhc-app-surface);
	--ink: var(--hhc-app-text);
	--border: var(--hhc-app-border);
	--muted: var(--hhc-app-muted);
	--red: var(--hhc-app-red);
	--red-dark: var(--hhc-app-red-dark);
	--radius: 14px;
	--shadow: 0 1px 2px rgba(0, 0, 0, .5);

	/* selection-board.css's own token set — see docblock. */
	--card: var(--hhc-app-card);
	--line: var(--hhc-app-line);
	--gold: var(--hhc-app-gold);
	--amber: var(--hhc-app-gold);
	--green: var(--hhc-app-green);
	--grey: var(--hhc-app-muted);
	--dark-grey: var(--hhc-app-muted);
	--junior-shade: #2d3345; /* a clearly different tint from --card, so junior cards stand out */

	background: var(--hhc-app-bg);
	color: var(--hhc-app-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overscroll-behavior-y: contain;
	-webkit-tap-highlight-color: transparent;
	padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Light palette — same variable names, so nothing else needs to know which theme is on.
   Selected by data-hhc-theme="light" on <html> (see the docblock). Higher specificity than
   the base block above, so it simply wins for the variables it redefines. */
html[data-hhc-theme="light"] body.hhc-app {
	color-scheme: light;
	--hhc-app-bg: #f4f2ee;
	--hhc-app-surface: #ffffff;
	--hhc-app-surface-2: #faf9f7;
	--hhc-app-card: #ffffff;
	--junior-shade: #dfe8fb;
	--hhc-app-line: #d9d4cc;
	--hhc-app-border: #e5e1da;
	--hhc-app-text: #1a1a1c;
	--hhc-app-muted: #66666b;
	--hhc-app-red: #d8161d;
	--hhc-app-red-dark: #b4151b;
	--hhc-app-gold: #8f6f0d;
	--hhc-app-green: #2e7d46;
	--hhc-app-text-2: #3d3d42;
	--hhc-app-faint: #8c8c91;
	--hhc-app-green-text: #2a7a3f;
	--hhc-app-tint-red: rgba(216, 22, 29, .10);
	--hhc-app-tint-gold: rgba(143, 111, 13, .14);
	--hhc-app-tint-green: rgba(42, 122, 63, .13);
	--hhc-app-hover-red: rgba(216, 22, 29, .08);
	--hhc-app-notice-green: rgba(46, 125, 70, .12);
	--hhc-app-notice-gold: rgba(143, 111, 13, .12);
	--shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
/* iPhone home-screen app: the status bar is translucent with WHITE text, which would vanish on a
   light page — give the strip behind it a dark band (a no-op where there is no safe-area inset). */
@media (display-mode: standalone) {
	html[data-hhc-theme="light"] body.hhc-app::before {
		content: "";
		position: fixed;
		top: 0; left: 0; right: 0;
		height: env(safe-area-inset-top, 0px);
		background: var(--hhc-app-chrome);
		z-index: 10000;
	}
}

/* ============================================================
   Plain admin screens (Manage Club, Events, Fixtures admin,
   Kitchen orders — anywhere hhc_fixtures_admin_styles() runs,
   fixtures-admin.php) — Max, 22 Sep 2026: "manage club tab in the
   app... it's awful". Unlike hhc_public_portal_styles()'s BRANDED
   version (/my-profile/, Messages), which is genuinely built on the
   --paper/--ink/etc. tokens above and re-themes for free, the plain
   version is deliberately unbranded by design (its own docblock: "a
   functional internal tool doesn't need to look like the public
   site") and uses hardcoded literals (#ddd borders, no button
   styling at all, no card container) — nothing here for the
   token-repoint above to actually catch. That's fine on the desktop
   admin experience it was built for; inside the app's dark chrome it
   read as a flat, illegible list sitting directly on the background.
   Explicit overrides below, scoped to body.hhc-app so the desktop
   admin screens this was built for are untouched.
   ============================================================ */
body.hhc-app .hhc-fixtures-admin {
	background: var(--hhc-app-card);
	border: 1px solid var(--hhc-app-border);
	border-radius: 14px;
	padding: 1.1rem 1.1rem 1.3rem;
	margin: 1rem 0;
	color: var(--hhc-app-text);
}
body.hhc-app .hhc-fixtures-admin h2,
body.hhc-app .hhc-fixtures-admin h3,
body.hhc-app .hhc-fixtures-admin h4 { color: var(--hhc-app-text); margin-top: 0; }
body.hhc-app .hhc-fixtures-admin label { color: var(--hhc-app-text); font-weight: 600; }
body.hhc-app .hhc-fixtures-admin a { color: var(--hhc-app-gold); }
/* …but a link styled as a button keeps the button's own colours (it used to turn gold on red/white). */
body.hhc-app .hhc-fixtures-admin a.hhc-btn { color: var(--hhc-app-red); }
body.hhc-app .hhc-fixtures-admin a.hhc-btn-primary { color: #fff; }
body.hhc-app .hhc-fixtures-admin a.hhc-btn-quiet { color: var(--hhc-app-muted); }
body.hhc-app .hhc-fixtures-admin input,
body.hhc-app .hhc-fixtures-admin select,
body.hhc-app .hhc-fixtures-admin textarea {
	background: var(--hhc-app-surface-2);
	color: var(--hhc-app-text);
	border: 1px solid var(--hhc-app-border);
	border-radius: 8px;
	padding: .5em .7em;
	font: inherit;
}
body.hhc-app .hhc-fixtures-admin th,
body.hhc-app .hhc-fixtures-admin td { border-bottom-color: var(--hhc-app-border) !important; }
body.hhc-app .hhc-fixtures-admin details summary { color: var(--hhc-app-text); }

/* Plain nav-style lists (Manage Club's own landing page is exactly
   this: <ul><li><a>Section</a> — description</li></ul>) — tappable
   rows instead of default browser bullets. */
body.hhc-app .hhc-fixtures-admin ul { list-style: none; padding-left: 0; margin: 0; }
body.hhc-app .hhc-fixtures-admin li {
	padding: .75rem 0;
	border-bottom: 1px solid var(--hhc-app-border);
	color: var(--hhc-app-muted);
}
body.hhc-app .hhc-fixtures-admin li:last-child { border-bottom: none; }
body.hhc-app .hhc-fixtures-admin li a { color: var(--hhc-app-text); font-weight: 600; text-decoration: none; }

/* hhc_fixtures_admin_styles() (the plain variant) defines no button
   styling at all — .hhc-btn/-primary/-quiet rendered as bare browser
   buttons. Same shape/sizing hhc_public_portal_styles() already uses
   for the branded variant, app palette instead of brand red/paper.
   Not scoped to .hhc-fixtures-admin — these classes turn up outside
   it too now (Schedule's RSVP buttons), and there's nothing
   admin-specific about a button. */
body.hhc-app .hhc-btn {
	display: inline-block; padding: .55em 1.1em; margin: .2em .4em .2em 0; border-radius: 8px;
	border: 2px solid var(--hhc-app-red); background: var(--hhc-app-card); color: var(--hhc-app-red);
	font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
body.hhc-app .hhc-btn:hover { background: var(--hhc-app-hover-red); }
body.hhc-app .hhc-btn-primary { background: var(--hhc-app-red); color: #fff; }
body.hhc-app .hhc-btn-primary:hover { background: var(--hhc-app-red-dark); border-color: var(--hhc-app-red-dark); }
body.hhc-app .hhc-btn-quiet {
	border: none; background: none; color: var(--hhc-app-muted);
	text-decoration: underline; padding: 0; margin: 0 .6rem 0 0; font-weight: 400;
}
body.hhc-app .hhc-btn-quiet:hover { color: var(--hhc-app-text); }

/* .hhc-notice's pale literal backgrounds (#e6f4ea/#fdf0e0), meant to
   read as a soft tint on white, are illegible with light text on
   top in the app — low-opacity app-palette tints instead. */
body.hhc-app .hhc-fixtures-admin .hhc-notice {
	background: var(--hhc-app-notice-green); border-left-color: var(--hhc-app-green); color: var(--hhc-app-text);
}
body.hhc-app .hhc-fixtures-admin .hhc-notice-warning {
	background: var(--hhc-app-notice-gold); border-left-color: var(--hhc-app-gold);
}

/* Dialogs (the events/messages/group-admin editors) — <dialog> has no
   inherited background of its own, so it defaults to the UA's white
   regardless of body.hhc-app; the inline styles on each dialog set
   color/sizing but never background. */
body.hhc-app dialog {
	background: var(--hhc-app-card);
	color: var(--hhc-app-text);
}
body.hhc-app dialog h3,
body.hhc-app dialog label { color: var(--hhc-app-text); }

/* Reusable dropdown for dashboard-area screens (Schedule's team
   filter, so far) — outside .hhc-fixtures-admin's scope, which only
   ever appears on the plain-styled admin screens, not here. */
.hhc-app-select {
	width: 100%;
	background: var(--hhc-app-surface-2);
	color: var(--hhc-app-text);
	border: 1px solid var(--hhc-app-border);
	border-radius: 8px;
	padding: .6em .7em;
	font: inherit;
}

/* Slim top bar — crest only; the dropdown nav doesn't render at all on
   this domain (see header.php), so there's no menu button/panel left to
   style around. The website's own light/dark toggle is hidden here; the app's
   light/dark choice lives in Profile → Appearance (js/app-theme.js). */
body.hhc-app .site-header {
	background: var(--hhc-app-bg);
	border-bottom: 1px solid var(--hhc-app-border);
	padding-block: .5rem;
}
body.hhc-app .header-inner {
	justify-content: flex-start;
	gap: .75rem;
}
body.hhc-app .brand img {
	width: 36px;
	height: 36px;
}
body.hhc-app .theme-toggle {
	display: none;
}

/* Dashboard */
.hhc-app-dashboard {
	max-width: 640px;
	margin: 0 auto;
	padding: 1.1rem 1.1rem 2rem;
}
.hhc-dash-greeting h1 {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0;
}
.hhc-dash-date {
	font-size: .82rem;
	color: var(--hhc-app-muted);
	margin: .2rem 0 0;
}
.hhc-dash-section {
	margin-top: 1.5rem;
}
.hhc-dash-section h2 {
	font-size: 1.05rem;
	color: var(--hhc-app-text);
}
body.hhc-app .hhc-hint {
	color: var(--hhc-app-muted);
}

/* Action stack — 0–3 cards, only what's actually waiting on this visitor */
.hhc-action-stack {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-top: 1rem;
}
.hhc-action-stack[hidden] { display: none; }
.hhc-action-card {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: var(--hhc-app-surface);
	border: 1px solid var(--hhc-app-border);
	border-radius: 14px;
	padding: .8rem .9rem;
	text-decoration: none;
	color: var(--hhc-app-text);
	/* Some action cards are <button>s (e.g. "Chase availability", which
	   sends a nudge rather than navigating) — reset the bits a native
	   button wouldn't otherwise inherit; harmless no-ops on an <a>. */
	font: inherit;
	text-align: left;
	cursor: pointer;
	width: 100%;
}
.hhc-action-card:disabled {
	opacity: .6;
	cursor: default;
}
.hhc-action-card:active {
	transform: scale(.98);
}
.hhc-action-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hhc-action-icon svg {
	width: 17px;
	height: 17px;
}
.hhc-action-icon-red {
	background: var(--hhc-app-tint-red);
	color: var(--hhc-app-red);
}
.hhc-action-icon-gold {
	background: var(--hhc-app-tint-gold);
	color: var(--hhc-app-gold);
}
.hhc-action-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}
.hhc-action-title {
	font-size: .88rem;
	font-weight: 600;
}
.hhc-action-sub {
	font-size: .78rem;
	color: var(--hhc-app-muted);
}
.hhc-action-chevron {
	flex: 0 0 auto;
	color: var(--hhc-app-faint);
	display: flex;
}
.hhc-action-chevron svg {
	width: 16px;
	height: 16px;
}

/* Next-fixture card */
.hhc-fixture-card {
	background: var(--hhc-app-surface);
	border: 1px solid var(--hhc-app-border);
	border-top: 3px solid var(--hhc-app-red);
	border-radius: 16px;
	padding: 1rem 1.05rem;
	margin-top: .9rem;
}
.hhc-fixture-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hhc-fixture-label {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--hhc-app-gold);
	text-transform: uppercase;
}
.hhc-fixture-team {
	font-size: .78rem;
	color: var(--hhc-app-muted);
}
.hhc-fixture-vs {
	font-size: 1.15rem;
	font-weight: 700;
	margin-top: .6rem;
}
.hhc-fixture-vs span {
	color: var(--hhc-app-faint);
	font-weight: 500;
}
.hhc-fixture-when {
	font-size: .85rem;
	color: var(--hhc-app-text-2);
	margin-top: .2rem;
}
.hhc-fixture-meta {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .55rem;
	font-size: .78rem;
	color: var(--hhc-app-muted);
}
.hhc-fixture-meta svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}
.hhc-fixture-divider {
	height: 1px;
	background: var(--hhc-app-border);
	margin: .85rem 0;
}
.hhc-fixture-selection-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	font-size: .8rem;
	color: var(--hhc-app-text-2);
	text-decoration: none;
}
.hhc-fixture-selection-row svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.4;
	color: var(--hhc-app-muted);
}
.hhc-selection-meta {
	display: flex;
	align-items: center;
	gap: .45rem;
}
.hhc-selection-count {
	font-size: .72rem;
	color: var(--hhc-app-muted);
}
.hhc-selection-pill {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--hhc-app-gold);
	background: var(--hhc-app-tint-gold);
	border-radius: 999px;
	padding: .18rem .55rem;
}
.hhc-selection-pill.is-published {
	color: var(--hhc-app-green-text);
	background: var(--hhc-app-tint-green);
}
.hhc-fixture-cta {
	margin-top: .65rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	background: var(--hhc-app-red);
	color: #ffffff;
	text-decoration: none;
	font-size: .82rem;
	font-weight: 600;
	border-radius: 10px;
	padding: .6rem 0;
}
.hhc-fixture-cta svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.4;
}

/* Team row */
.hhc-team-row {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .8rem .2rem;
	margin-top: .3rem;
	text-decoration: none;
	color: var(--hhc-app-text);
}
.hhc-team-icon {
	flex: 0 0 auto;
	color: var(--hhc-app-muted);
	display: flex;
}
.hhc-team-icon svg {
	width: 18px;
	height: 18px;
}
.hhc-team-name {
	flex: 1 1 auto;
	font-size: .85rem;
	color: var(--hhc-app-text-2);
}

/* Fixed bottom tab bar — the app domain's entire primary nav. */
.hhc-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	background: var(--hhc-app-surface-2);
	border-top: 1px solid var(--hhc-app-border);
	padding-bottom: env(safe-area-inset-bottom);
}
.hhc-tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: .55rem 0 .45rem;
	min-height: 44px;
	text-decoration: none;
	color: var(--hhc-app-muted);
	font-size: .66rem;
	font-weight: 600;
}
.hhc-tabbar-item.is-active {
	color: var(--hhc-app-red);
}
.hhc-tabbar-icon svg {
	width: 21px;
	height: 21px;
	display: block;
}

/* Profile → Appearance (Auto / Light / Dark) */
.hhc-appearance-choices {
	display: flex;
	gap: .45rem;
	margin: .5rem 0 .3rem;
}
.hhc-appearance-choices button {
	flex: 1 1 0;
	min-height: 44px;
	padding: .55em .4em;
	border: 2px solid var(--hhc-app-line);
	border-radius: 10px;
	background: var(--hhc-app-surface-2);
	color: var(--hhc-app-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.hhc-appearance-choices button[aria-pressed="true"] {
	border-color: var(--hhc-app-red);
	background: var(--hhc-app-tint-red);
}

/* Popups in the app (e.g. the Chase availability preview) */
dialog.hhc-app-dialog {
	background: var(--hhc-app-surface);
	color: var(--hhc-app-text);
	border: 1px solid var(--hhc-app-line);
	border-radius: 14px;
	padding: 1.1rem;
	width: min(480px, 92vw);
	max-height: 86vh;
	overflow: auto;
}
dialog.hhc-app-dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog.hhc-app-dialog h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
dialog.hhc-app-dialog textarea {
	width: 100%;
	margin-top: .35rem;
	background: var(--hhc-app-card);
	color: var(--hhc-app-text);
	border: 1px solid var(--hhc-app-line);
	border-radius: 8px;
	padding: .55rem;
	font: inherit;
}
.hhc-app-dialog-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.hhc-chase-list { list-style: none; margin: .4rem 0 1rem; padding: 0; max-height: 34vh; overflow: auto; }
.hhc-chase-list li { padding: .3rem 0; border-bottom: 1px solid var(--hhc-app-border); }
.hhc-chase-list label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }

/* Home: answer your availability inline */
.hhc-avail-card {
	background: var(--hhc-app-surface);
	border: 1px solid var(--hhc-app-border);
	border-radius: 14px;
	padding: .8rem .9rem;
}
.hhc-avail-head { display: flex; align-items: center; gap: .75rem; }
.hhc-avail-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .7rem; }
.hhc-avail-btn {
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	padding: .65rem .4rem;
	border-radius: 10px;
	border: 1px solid var(--hhc-app-line);
	background: var(--hhc-app-card);
	color: var(--hhc-app-text);
	cursor: pointer;
	min-height: 44px;
}
.hhc-avail-btn:active { transform: scale(.97); }
.hhc-avail-btn:disabled { opacity: .55; cursor: default; }
.hhc-avail-btn[aria-pressed="true"][data-status="yes"]   { background: var(--hhc-app-tint-green); border-color: var(--hhc-app-green); color: var(--hhc-app-green-text); }
.hhc-avail-btn[aria-pressed="true"][data-status="maybe"] { background: var(--hhc-app-tint-gold);  border-color: var(--hhc-app-gold);  color: var(--hhc-app-gold); }
.hhc-avail-btn[aria-pressed="true"][data-status="no"]    { background: var(--hhc-app-tint-red);   border-color: var(--hhc-app-red);   color: var(--hhc-app-red); }
.hhc-avail-note { margin: .55rem 0 0; font-size: .78rem; color: var(--hhc-app-muted); min-height: 1.1em; }
.hhc-avail-more { display: inline-block; margin-top: .3rem; font-size: .78rem; color: var(--hhc-app-muted); text-decoration: none; }