/*
 * Application-wide styles: base typography, the app shell (sidebar, main
 * region, mobile tab bar), the shared component classes and the structural
 * styling for the PrimeFaces widgets (the stock theme is disabled).
 */

/* This file: base typography, the app shell and its reduced-motion rules. */

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 14.5px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .tj-display {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: .95;
	margin: 0;
}

h1 { font-size: 42px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }

a {
	color: var(--accent);
	text-decoration: none;
}

/* Themed scrollbars: a translucent ink-tinted thumb on a bare track, so they
   follow the light and dark palettes instead of the browser's default chrome. */
* {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent;
}

/* The gutter is always reserved, so centered columns (and anything aligned
   to their edge) sit still when navigating between short and long pages. */
html {
	scrollbar-gutter: stable;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--ink) 28%, transparent);
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--ink) 46%, transparent);
}

/* ---- App shell ---- */

/* While an admin is mimicking, the banner above the shell claims this much
   height; it is 0 otherwise. The full-height regions subtract it so banner +
   content stay within the viewport instead of growing a scrollbar. */
body.tj-mimicking {
	--mimic-banner-h: 40px;
}

.tj-shell {
	display: flex;
	min-height: calc(100vh - var(--mimic-banner-h, 0px));
	background: var(--bg);
	color: var(--ink);
}

.tj-side {
	width: 228px;
	flex: none;
	position: sticky;
	top: var(--mimic-banner-h, 0px);
	height: calc(100vh - var(--mimic-banner-h, 0px));
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--surface);
	border-right: 1px solid var(--line);
	padding: 26px 16px 20px;
	/* Drawn compact (below) the menu fits every screen a phone stands up on and
	   most it lies down on. Held sideways on a small one there is still less
	   room than seven entries and a footer can be drawn in, and the last of
	   them — sign out among them — must not simply be cut off, so what is left
	   over scrolls. It keeps that scroll to itself rather than handing the
	   overshoot to the page behind the drawer. */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tj-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 10px 22px;
}

.tj-logo-ball {
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ball);
	flex: none;
	box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .14);
	animation: tjSpinBall 14s linear infinite;
}

.tj-logo-ball::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, .85);
	border-left-color: transparent;
	border-bottom-color: transparent;
	transform: rotate(24deg);
}

@media (prefers-reduced-motion: reduce) {
	.tj-logo-ball { animation: none; }
}

.tj-logo-name {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 21px;
	line-height: .92;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.tj-logo-name span {
	display: block;
}

.tj-logo-club {
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 600;
	margin-top: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tj-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tj-nav a, .tj-nav button {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--ink);
	font-family: 'Barlow', system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	text-align: left;
	transition: background .2s, color .2s;
}

.tj-nav a:hover, .tj-nav button:hover {
	background: var(--surface2);
}

.tj-nav a svg, .tj-nav button svg {
	flex: none;
}

.tj-nav .tj-active {
	background: var(--accent-soft);
	color: var(--accent);
}

/* However many of these a caller holds — theme, club switch, the other apps,
   sign out — the row wraps rather than pressing them all thinner, which is
   what four were already doing. Centred, it has no use for the side padding
   that lines the logo up with the nav, and that padding was exactly the width
   the fourth control was missing.

   The gap is two narrower than elsewhere for the same reason: the language
   control is a pill holding two flags rather than a disc holding one glyph,
   and the six it carries over its neighbours come out of the spaces between
   them. Four still reach the end of the row. */
.tj-side-footer {
	margin-top: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0 0;
}

.tj-main {
	flex: 1;
	min-width: 0;
	padding: 36px 44px 60px;
}

.tj-page {
	max-width: 1080px;
	margin: 0 auto;
	animation: tjFadeUp .45s ease both;
}

/* The bar that says a payment failed, to the one person who can fix it. It
   sits above the page rather than floating over it: this is not a toast to be
   dismissed, and it stays until the bill is settled. */
.tj-paybar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding: 13px 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	color: var(--muted);
	font-size: 13.5px;
}

/* Once the last days are near it stops being a note and starts being a
   warning; nothing moves, only the colour it is said in. */
.tj-paybar-urgent {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--text);
}

.tj-paybar > svg {
	flex: none;
	color: var(--accent);
}

.tj-paybar-said {
	display: flex;
	align-items: baseline;
	gap: 6px 10px;
	flex-wrap: wrap;
	flex: 1;
	min-width: 0;
}

.tj-paybar-what {
	font-weight: 700;
	color: var(--text);
}

.tj-paybar-fix {
	flex: none;
	padding: 8px 16px;
	font-size: 13px;
}

.tj-tabbar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	justify-content: space-around;
}

.tj-tabbar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 10px;
}

.tj-tabbar a.tj-active {
	color: var(--accent);
	background: var(--accent-soft);
}