/*
 * Olona Calcio&Vita — app shell.
 *
 * Design language:
 *  - White dominant. Blue for actions, orange for accent. Colour is used
 *    sparingly so the icons carry the screen.
 *  - Apple-like: SF typography, hairline separators, translucent nav bar,
 *    squircle icons, restrained motion.
 *  - Football, not sticker-album: pitch markings, whistle, jersey, crest.
 *  - Touch first and then some: 58px minimum, 132px springboard icons. Tapped
 *    on a pitch, in the cold, sometimes with gloves.
 *  - Flat icons: stroke only, no gradients, no 3D.
 */

/* ---------------------------------------------------------------- Reset */

.ocv-html,
.ocv-body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

.ocv-body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
		"Helvetica Neue", "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.45;
	color: var(--ocv-text);
	background: var(--ocv-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	text-size-adjust: 100%;
	letter-spacing: -0.01em;
}

.ocv-body * {
	box-sizing: border-box;
}

#wpadminbar {
	display: none !important;
}

.ocv-html {
	margin-top: 0 !important;
}

/* ------------------------------------------------------------- Tokens */

:root {
	/* Brand: blue and orange. Overridable from the settings screen. */
	/* Colori sociali Olona Calcio&Vita: navy + arancione. */
	--ocv-primary: #1B3966;
	--ocv-accent: #E94F1B;

	--ocv-primary-tint: color-mix(in srgb, var(--ocv-primary) 10%, white);
	--ocv-accent-tint: color-mix(in srgb, var(--ocv-accent) 12%, white);

	/* Light-grey page, white cards floating on top. */
	--ocv-bg: #eef0f3;
	--ocv-bg-soft: #f7f7f9;
	--ocv-surface: #ffffff;
	--ocv-fill: #f2f2f6;
	--ocv-fill-2: #e9e9ee;

	--ocv-hairline: rgba(0, 0, 0, 0.11);
	--ocv-hairline-strong: rgba(0, 0, 0, 0.18);
	--ocv-border: rgba(0, 0, 0, 0.14);

	--ocv-text: #1d1d1f;
	--ocv-text-2: #6e6e73;
	--ocv-text-3: #a1a1a6;

	/* Status colours stay semantic: money and health can't be brand-coloured. */
	--ocv-green: #34c759;
	--ocv-green-tint: #eaf9ee;
	--ocv-red: #ff3b30;
	--ocv-red-tint: #ffeceb;
	--ocv-amber: #ff9500;
	--ocv-amber-tint: #fff3e3;
	--ocv-blue: #0a84ff;
	--ocv-blue-tint: #e9f3ff;
	--ocv-grey: #8e8e93;
	--ocv-grey-tint: #f2f2f6;
	--ocv-purple: #af52de;
	--ocv-purple-tint: #f7ecfc;
	--ocv-teal: #30b0c7;
	--ocv-teal-tint: #e7f7fa;

	--ocv-radius-sm: 12px;
	--ocv-radius: 16px;
	--ocv-radius-lg: 20px;
	--ocv-radius-xl: 26px;
	--ocv-pill: 980px;

	/*
	 * Deliberately far above the 44px minimum. These screens get tapped by
	 * people standing on a pitch, often in the cold, sometimes with gloves on.
	 */
	--ocv-touch: 58px;
	--ocv-touch-lg: 70px;

	--ocv-gap: 20px;
	--ocv-navbar: 76px;

	--ocv-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--ocv-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
	--ocv-ring: 0 0 0 4px color-mix(in srgb, var(--ocv-primary) 25%, transparent);

	--ocv-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------------------------------------------------------------- Boot */

.ocv-root {
	height: 100dvh;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ocv-boot {
	height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	color: var(--ocv-text-3);
}

.ocv-boot__spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--ocv-fill-2);
	border-top-color: var(--ocv-primary);
	border-radius: 50%;
	animation: ocv-spin 0.7s linear infinite;
}

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

.ocv-boot__text {
	margin: 0;
	font-size: 15px;
}

.ocv-noscript {
	padding: 40px;
	text-align: center;
	font-size: 17px;
}

/* -------------------------------------------------------------- Layout */

.ocv-shell {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	overflow: hidden;
	background: var(--ocv-bg);
}

.ocv-main {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * Hide the scrollbars app-wide while keeping the content scrollable — the app
 * reads like a native screen, not a web page. Covers every scroll area (the
 * main view, modal bodies, the roster, the date popup, …).
 */
.ocv-body,
.ocv-body * {
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* legacy Edge/IE */
}
.ocv-body::-webkit-scrollbar,
.ocv-body *::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;                /* Chromium / WebKit */
}

.ocv-view {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: var(--ocv-gap);
	padding-bottom: 56px;
	/* Long lines of athletes are unreadable on a wide desktop. */
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
}

/* The springboard breathes: no page padding, it centres itself. */
.ocv-view--launcher {
	padding: 0;
	display: flex;
	max-width: none;
}

/* ------------------------------------------------------------- Nav bar */

.ocv-navbar {
	min-height: var(--ocv-navbar);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	padding-top: max(10px, env(safe-area-inset-top));
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 0.5px solid var(--ocv-hairline);
	position: relative;
	z-index: 10;
}

/* The shared search box, at the icon buttons' height. Two variants: 'bar'
 * (centred in the inner-page top bar) and 'home' (dashboard header, from
 * mid-page to the icons). */
.ocv-navsearch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 16px;
	background: var(--ocv-fill);
	border-radius: var(--ocv-pill);
}

/* Inner pages: centred in the bar, with a hairline border to stand out. */
.ocv-navsearch--bar {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(360px, 40vw);
	border: 1px solid var(--ocv-border);
}

/* Home: its own column starting mid-page, white with a grey outline. */
.ocv-navsearch--home {
	grid-area: search;
	width: 100%;
	background: var(--ocv-surface);
	border: 1px solid var(--ocv-border);
}

.ocv-navsearch__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ocv-text-3);
	cursor: inherit;
}
.ocv-navsearch__icon svg {
	width: 18px;
	height: 18px;
}

.ocv-navsearch__input {
	width: 100%;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 16px;
	color: var(--ocv-text);
	font-family: inherit;
}

.ocv-navsearch__input::placeholder {
	color: var(--ocv-text-3);
}

.ocv-navsearch__results {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--ocv-surface);
	border-radius: var(--ocv-radius);
	box-shadow: var(--ocv-shadow-pop);
}

.ocv-navsearch__results.is-open {
	display: block;
}

.ocv-navsearch__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	padding: 10px 16px;
	text-align: left;
	background: transparent;
	border: 0;
	border-bottom: 0.5px solid var(--ocv-hairline);
	cursor: pointer;
}

.ocv-navsearch__item:last-child {
	border-bottom: 0;
}

.ocv-navsearch__item:hover {
	background: var(--ocv-fill);
}

.ocv-navsearch__item-name {
	font-size: 15px;
	color: var(--ocv-text);
}

.ocv-navsearch__item-sub {
	font-size: 12.5px;
	color: var(--ocv-text-2);
}

.ocv-navsearch__empty {
	padding: 12px 16px;
	font-size: 14px;
	color: var(--ocv-text-2);
}

.ocv-navbar__side {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 0;
}

.ocv-navbar__side--right {
	justify-content: flex-end;
}

/* The bar's middle slot holds each section's hoisted header (title + actions). */
.ocv-navbar__head {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.ocv-navbar__head .ocv-page-head {
	margin: 0;
	width: 100%;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
}

.ocv-navbar__head .ocv-page-head > div:first-child {
	min-width: 0;
}

.ocv-navbar__head .ocv-page-title {
	font-size: 20px;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ocv-navbar__head .ocv-page-sub {
	font-size: 12.5px;
	margin: 1px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ocv-navbar__head .ocv-page-head__actions {
	margin-left: auto;
	flex-wrap: nowrap;
	width: auto;
	flex-shrink: 0;
}

.ocv-navbar__head .ocv-page-head__actions .ocv-btn {
	flex: 0 0 auto;
}

/*
 * On phones the fixed top bar can't hold a text label on every control. The
 * back / "Scheda atleta" nav keeps its wording; the create/edit actions on the
 * right collapse to their icon so the whole bar fits without overflowing.
 */
@media (max-width: 640px) {
	.ocv-navbar__head .ocv-page-head__actions .ocv-btn:has(.ocv-btn__icon) {
		font-size: 0;
		gap: 0;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Tighten the bar so the section title keeps room next to the controls. */
	.ocv-navbar {
		gap: 8px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.ocv-navbar__head .ocv-page-head {
		gap: 8px;
	}

	/* Trim the bar's icon buttons (home / refresh) — still a 44px touch target. */
	.ocv-navbar .ocv-btn--icon {
		width: 44px;
		min-width: 44px;
	}

	.ocv-navbar__side--right {
		gap: 4px;
	}

	.ocv-userbtn {
		padding: 2px;
	}

	/* The subtitle is a nice-to-have; drop it on phones so the title isn't
	   squeezed to a couple of letters by the actions. */
	.ocv-navbar__head .ocv-page-sub {
		display: none;
	}

	/* Phone: the inner-page search collapses to just its icon (it was overlapping
	   the title/actions), sitting in the flow next to the avatar. Styled exactly
	   like the other bar icon buttons — same size and outline. A tap expands it
	   into a full-width field overlaying the bar. */
	.ocv-navsearch--bar {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		width: 44px;
		min-width: 44px;
		height: 40px;
		padding: 0;
		justify-content: center;
		background: transparent;
		border: 0;
		border-radius: var(--ocv-radius);
		box-shadow: inset 0 0 0 1px var(--ocv-hairline-strong);
	}
	.ocv-navsearch--bar .ocv-navsearch__icon {
		width: 44px;
		height: 40px;
		cursor: pointer;
		color: var(--ocv-text-2);
	}
	.ocv-navsearch--bar .ocv-navsearch__icon svg {
		width: 22px;
		height: 22px;
	}
	.ocv-navsearch--bar .ocv-navsearch__input {
		display: none;
	}
	.ocv-navsearch--bar.is-expanded {
		position: absolute;
		left: 10px;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: auto;
		height: 40px;
		padding: 0 14px;
		background: var(--ocv-surface);
		border-radius: var(--ocv-pill);
		box-shadow: inset 0 0 0 1px var(--ocv-border);
		z-index: 20;
	}
	.ocv-navsearch--bar.is-expanded .ocv-navsearch__input {
		display: block;
	}
	.ocv-navsearch--bar.is-expanded .ocv-navsearch__icon svg {
		width: 18px;
		height: 18px;
	}
}

/*
 * The bar title only appears once the large title has scrolled away, so the
 * two are never on screen at the same time. Straight out of iOS.
 */
.ocv-navbar__title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	max-width: 46vw;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s var(--ocv-ease), transform 0.2s var(--ocv-ease);
	pointer-events: none;
}

.ocv-navbar.is-scrolled .ocv-navbar__title {
	opacity: 1;
	transform: none;
}

/* iOS-style back: chevron plus the place you came from. */
.ocv-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 42px;
	padding: 0 16px 0 11px;
	border: none;
	background: var(--ocv-fill);
	color: var(--ocv-text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	border-radius: var(--ocv-pill);
	white-space: nowrap;
	transition: background 0.2s var(--ocv-ease), transform 0.1s var(--ocv-ease);
}

.ocv-back:hover { background: var(--ocv-fill-2); }
.ocv-back:active { transform: scale(0.96); }

.ocv-back svg {
	width: 19px;
	height: 19px;
	stroke-width: 2.4;
	color: var(--ocv-primary);
}

.ocv-navbar__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding-left: 4px;
}

.ocv-brandmark {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--ocv-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: -0.02em;
	flex-shrink: 0;
	overflow: hidden;
}

.ocv-brandmark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ocv-brandname {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Round icon button, the Apple toolbar shape. */
.ocv-iconbtn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--ocv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s var(--ocv-ease);
}

.ocv-iconbtn:hover {
	background: var(--ocv-fill);
}

.ocv-iconbtn:active {
	background: var(--ocv-fill-2);
}

.ocv-iconbtn svg {
	width: 24px;
	height: 24px;
}

.ocv-iconbtn--filled {
	background: var(--ocv-fill);
}

.ocv-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ocv-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	flex-shrink: 0;
	letter-spacing: 0;
}

.ocv-avatar__icon {
	width: 19px;
	height: 19px;
}

.ocv-userbtn {
	border: none;
	background: none;
	padding: 4px;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
}

.ocv-userbtn:hover .ocv-avatar {
	filter: brightness(0.92);
}

/* --------------------------------------------------------- Springboard */

/*
 * The pitch. Faint markings behind the icons — halfway line, centre circle,
 * penalty areas — so the home screen says "football club" before a word is
 * read, without a single photograph or gradient. Kept at 7% opacity: it is a
 * watermark, not wallpaper, and white stays dominant.
 */
.ocv-launcher {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px 56px;
	gap: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%230a84ff' stroke-width='4' opacity='0.09'%3E%3Crect x='40' y='40' width='1120' height='720' rx='6'/%3E%3Cpath d='M600 40v720'/%3E%3Ccircle cx='600' cy='400' r='112'/%3E%3Ccircle cx='600' cy='400' r='7' fill='%230a84ff' stroke='none'/%3E%3Cpath d='M40 250h150v300H40'/%3E%3Cpath d='M1160 250h-150v300h150'/%3E%3Cpath d='M40 330h58v140H40'/%3E%3Cpath d='M1160 330h-58v140h58'/%3E%3Cpath d='M40 76a36 36 0 0 0 36-36'/%3E%3Cpath d='M1160 76a36 36 0 0 1-36-36'/%3E%3Cpath d='M40 724a36 36 0 0 1 36 36'/%3E%3Cpath d='M1160 724a36 36 0 0 0-36 36'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	/*
	 * The whole pitch, or none of it. Cropping it (cover) on a tall tablet left
	 * a stray circle and a vertical line that read as nothing at all.
	 */
	background-size: min(100%, 1180px) auto;
}

.ocv-launcher__head {
	text-align: center;
}

.ocv-launcher__greeting {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0;
	line-height: 1.1;
}

.ocv-launcher__sub {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--ocv-text-2);
}

.ocv-launcher__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 38px 26px;
	width: 100%;
	max-width: 820px;
}

.ocv-launch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

/* The squircle. iOS icons sit near 22% of their size. */
.ocv-launch__icon {
	width: 132px;
	height: 132px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform 0.22s var(--ocv-ease);
	position: relative;
}

.ocv-launch__icon svg {
	width: 64px;
	height: 64px;
	stroke-width: 1.6;
}

.ocv-launch:hover .ocv-launch__icon {
	transform: scale(1.05);
}

.ocv-launch:active .ocv-launch__icon {
	transform: scale(0.94);
}

.ocv-launch__label {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--ocv-text);
}

.ocv-launch__badge {
	position: absolute;
	top: -5px;
	right: 50%;
	margin-right: -72px;
	min-width: 30px;
	height: 30px;
	padding: 0 9px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-red);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	letter-spacing: 0;
}

/* A quiet strip of numbers under the icons. */
.ocv-launcher__stats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 720px;
}

.ocv-quickstat {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-fill);
	font-size: 14px;
	font-weight: 500;
	color: var(--ocv-text-2);
	border: none;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: -0.01em;
}

.ocv-quickstat:hover {
	background: var(--ocv-fill-2);
}

.ocv-quickstat svg {
	width: 17px;
	height: 17px;
}

.ocv-quickstat__value {
	font-weight: 600;
	color: var(--ocv-text);
}

.ocv-quickstat--warn { color: var(--ocv-amber); background: var(--ocv-amber-tint); }
.ocv-quickstat--warn .ocv-quickstat__value { color: var(--ocv-amber); }
.ocv-quickstat--bad { color: var(--ocv-red); background: var(--ocv-red-tint); }
.ocv-quickstat--bad .ocv-quickstat__value { color: var(--ocv-red); }

/* ============================================================ Dashboard */
/*
 * The home board: a greeting, a strip of headline numbers, then the sections
 * as coloured cards. Runs inside the standard .ocv-view padding, no launcher.
 */

.ocv-dash {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Logo · saluto · strumenti su una riga (desktop); su mobile logo+strumenti
   in alto e il saluto sotto a tutta larghezza (grid-areas). */
/* Testata a DUE metà uguali come la banda avvisi sotto: la colonna sinistra
   (logo+saluto) si allinea alla card Certificati, la destra (ricerca+strumenti)
   alla card Promemoria — così "Cerca atleta" non risulta più sfalsato. Il gap
   (12px) è lo stesso della banda perché le due colonne combacino esattamente. */
.ocv-dash__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 6px 12px;
}
.ocv-dash__lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ocv-dash__actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* La ricerca riempie la metà destra; avatar/bustina restano in coda a destra. */
.ocv-dash__actions .ocv-navsearch--home { flex: 1; min-width: 0; }
.ocv-dash__logo {
	height: 58px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	flex-shrink: 0;
}
.ocv-dash__hello { min-width: 0; }

.ocv-dash__hello h1 {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.ocv-dash__hello p {
	margin: 2px 0 0;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ocv-text-2);
}

.ocv-dash__tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.ocv-dash__bell {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--ocv-fill);
	color: var(--ocv-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ocv-dash__bell:hover { background: var(--ocv-fill-2); }
.ocv-dash__bell svg { width: 20px; height: 20px; }

.ocv-dash__avatar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px 4px 4px;
	border: none;
	border-radius: var(--ocv-pill);
	background: var(--ocv-fill);
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background 0.2s var(--ocv-ease);
}

.ocv-dash__avatar:hover { background: var(--ocv-fill-2); }

.ocv-dash__avatar-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ocv-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
}

.ocv-dash__avatar svg { width: 16px; height: 16px; color: var(--ocv-text-3); }

/* Office shortcuts row (segreteria / dirigenza / super): neutral white buttons
   under the cards, same width as the tiles, with a right chevron to the section. */
.ocv-dash__links { display: flex; flex-wrap: wrap; gap: 12px; }
.ocv-dash__link {
	flex: 1 1 212px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--ocv-radius-lg);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--ocv-text);
	transition: transform 0.2s var(--ocv-ease), box-shadow 0.2s var(--ocv-ease);
}
.ocv-dash__link:hover { transform: translateY(-2px); box-shadow: var(--ocv-shadow-pop); }
.ocv-dash__link-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ocv-fill);
	flex-shrink: 0;
}
.ocv-dash__link-icon svg { width: 18px; height: 18px; color: var(--ocv-text-2); }
.ocv-dash__link-label { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.ocv-dash__link-go { width: 18px; height: 18px; color: var(--ocv-text-3); flex-shrink: 0; }

/* Barra dei profili social: icone tonde centrate in fondo alla home. In hover
   ogni icona prende il colore del proprio marchio. */
.ocv-social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin: 30px 0 10px;
}
.ocv-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ocv-text-2);
	background: var(--ocv-surface);
	border: 1px solid var(--ocv-border);
	transition: transform .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
.ocv-social__link svg { width: 22px; height: 22px; }
.ocv-social__link:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.ocv-social__link--facebook:hover { background: #1877F2; }
.ocv-social__link--instagram:hover { background: #E1306C; }
.ocv-social__link--tiktok:hover { background: #010101; }
.ocv-social__link--youtube:hover { background: #FF0000; }

/* Headline stat tiles */
.ocv-statgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.ocv-statcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--ocv-radius);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: border-color 0.2s var(--ocv-ease), transform 0.2s var(--ocv-ease);
}

.ocv-statcard:hover { border-color: var(--ocv-hairline-strong); transform: translateY(-1px); }

.ocv-statcard__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocv-statcard__icon svg { width: 26px; height: 26px; stroke-width: 1.9; }
.ocv-statcard__label { font-size: 12.5px; font-weight: 500; color: var(--ocv-text-2); }
.ocv-statcard__value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 1px 0; }
.ocv-statcard__sub { font-size: 12px; color: var(--ocv-text-3); }

.ocv-statcard--blue .ocv-statcard__icon { background: var(--ocv-blue-tint); color: var(--ocv-blue); }
.ocv-statcard--teal .ocv-statcard__icon { background: var(--ocv-teal-tint); color: var(--ocv-teal); }
.ocv-statcard--red .ocv-statcard__icon { background: var(--ocv-red-tint); color: var(--ocv-red); }
.ocv-statcard--amber .ocv-statcard__icon { background: var(--ocv-amber-tint); color: var(--ocv-amber); }
.ocv-statcard--purple .ocv-statcard__icon { background: var(--ocv-purple-tint); color: var(--ocv-purple); }
.ocv-statcard--grey .ocv-statcard__icon { background: var(--ocv-grey-tint); color: var(--ocv-grey); }

/* Notification band — alerts the secretary sees on opening the home. */
/* "Partita in corso" banner (home): today's matches without a final score yet. */
.ocv-liveband { display: flex; flex-direction: column; gap: 10px; }
.ocv-livecard {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 18px;
	border-radius: var(--ocv-radius-lg);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--ocv-text);
	transition: transform 0.2s var(--ocv-ease), box-shadow 0.2s var(--ocv-ease);
}
.ocv-livecard:hover { transform: translateY(-2px); box-shadow: var(--ocv-shadow-pop); }
.ocv-livecard__state { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.ocv-livecard__statelbl { font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ocv-text-3); }
.ocv-livedot { width: 10px; height: 10px; border-radius: 50%; background: var(--ocv-text-3); flex-shrink: 0; }
.ocv-livedot.is-live { background: var(--ocv-red); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); animation: ocv-livepulse 1.6s infinite; }
.ocv-livecard__state:has(.is-live) .ocv-livecard__statelbl { color: var(--ocv-red); }
@keyframes ocv-livepulse {
	0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.ocv-livecard__teams { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.ocv-livecard__team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-livecard__vs { color: var(--ocv-text-3); font-weight: 600; font-size: 13px; flex-shrink: 0; }
.ocv-livecard__comp { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--ocv-text-3); }
.ocv-livecard__go { width: 18px; height: 18px; color: var(--ocv-text-3); flex-shrink: 0; }
@media (max-width: 560px) {
	.ocv-livecard__comp { display: none; }
	.ocv-livecard__teams { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.ocv-livedot.is-live { animation: none; }
}

.ocv-notifband { display: flex; flex-wrap: wrap; gap: 12px; }
.ocv-notif {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 240px;
	min-width: 240px;
	padding: 14px 16px;
	border-radius: var(--ocv-radius-lg);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	text-align: left;
	font: inherit;
	color: var(--ocv-text);
}
button.ocv-notif { cursor: pointer; transition: transform 0.2s var(--ocv-ease), box-shadow 0.2s var(--ocv-ease); }
button.ocv-notif:hover { transform: translateY(-2px); box-shadow: var(--ocv-shadow-pop); }
.ocv-notif__icon {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ocv-notif__icon svg { width: 25px; height: 25px; stroke-width: 1.8; }
.ocv-notif__body { flex: 1; min-width: 0; padding-right: 20px; }
.ocv-notif__value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.ocv-notif__label { font-size: 16px; font-weight: 800; color: var(--ocv-text); letter-spacing: -0.01em; }
.ocv-notif__go { flex-shrink: 0; color: var(--ocv-text-3); display: flex; }
.ocv-notif__go svg { width: 20px; height: 20px; }

.ocv-notif--alert .ocv-notif__icon { background: var(--ocv-red-tint); color: var(--ocv-red); }
.ocv-notif--alert .ocv-notif__value { color: var(--ocv-red); }
.ocv-notif--warn .ocv-notif__icon { background: var(--ocv-amber-tint); color: var(--ocv-amber); }
.ocv-notif--warn .ocv-notif__value { color: var(--ocv-amber); }
.ocv-notif--info .ocv-notif__icon { background: var(--ocv-primary-tint); color: var(--ocv-primary); }
.ocv-notif--info .ocv-notif__value { color: var(--ocv-primary); }

/* Promemoria button: like the alert cards, with a count badge in its corner. */
.ocv-notif--reminders .ocv-notif__icon { background: var(--ocv-primary-tint); color: var(--ocv-primary); }
.ocv-notif__sub { font-size: 13px; color: var(--ocv-text-3); margin-top: 1px; }
.ocv-notif__count {
	position: absolute;
	top: 10px;
	right: 10px;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--ocv-red);
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
}

/* The count badge takes the card's accent colour. */
.ocv-notif--info .ocv-notif__count { background: var(--ocv-primary); }
.ocv-notif--warn .ocv-notif__count { background: var(--ocv-amber); }
/* Promemoria: the count is blue (it's not an alert), and only shown when there
   are notes — hidden at zero (handled in JS). When a note is overdue the button
   stays white with just a red 1px outline, red icon and red count. */
.ocv-notif--reminders .ocv-notif__count { background: var(--ocv-primary); }
.ocv-notif--rem-urgent { border: 1px solid var(--ocv-red); }
.ocv-notif--rem-urgent .ocv-notif__icon { background: var(--ocv-red-tint); color: var(--ocv-red); }
.ocv-notif--rem-urgent .ocv-notif__count { background: var(--ocv-red); }

/* Urgent reminder button: red, with a pulsing red glow. */
.ocv-notif--urgent {
	background: #d62828;
	border-color: transparent;
	color: #fff;
	animation: ocv-urgent-pulse 1.7s ease-in-out infinite;
}
.ocv-notif--urgent .ocv-notif__icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ocv-notif--urgent .ocv-notif__label { color: #fff; }
.ocv-notif--urgent .ocv-notif__sub { color: rgba(255, 255, 255, 0.9); }
.ocv-notif--urgent .ocv-notif__count { background: #fff; color: #d62828; }
@keyframes ocv-urgent-pulse {
	0%   { box-shadow: 0 3px 12px rgba(214, 40, 40, 0.35), 0 0 0 0 rgba(214, 40, 40, 0.55); }
	70%  { box-shadow: 0 6px 20px rgba(214, 40, 40, 0.5), 0 0 0 12px rgba(214, 40, 40, 0); }
	100% { box-shadow: 0 3px 12px rgba(214, 40, 40, 0.35), 0 0 0 0 rgba(214, 40, 40, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ocv-notif--urgent { animation: none; box-shadow: 0 4px 16px rgba(214, 40, 40, 0.45); }
}

/* Reminders page: an add form, then a list of note cards. */
.ocv-remform {
	margin-bottom: 20px;
	padding: 16px 18px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-lg);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
}
.ocv-remform__field { display: flex; flex-direction: column; gap: 6px; }
.ocv-remform__label { font-size: 13px; font-weight: 600; color: var(--ocv-text-2); }
.ocv-remform__foot { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ocv-remform__field--date { flex: 0 0 auto; }
.ocv-remform__foot .ocv-btn { margin-left: auto; }

.ocv-rempage { display: flex; flex-direction: column; gap: 10px; }
.ocv-remcard {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 12px 14px 16px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
}
.ocv-remcard--urgent { border: 1.5px solid var(--ocv-red); background: var(--ocv-red-tint); }
.ocv-remcard__body { flex: 1; min-width: 0; }
.ocv-remcard__text { margin: 0; font-size: 15.5px; line-height: 1.4; word-break: break-word; }
.ocv-remcard__line { margin: 0; }
.ocv-remcard__line + .ocv-remcard__line { margin-top: 4px; }
.ocv-remcard__list { margin: 4px 0 0; padding-left: 20px; }
.ocv-remcard__list li { margin: 2px 0; }
.ocv-remcard__actions { display: flex; flex-shrink: 0; gap: 2px; }
.ocv-remcard__actions .ocv-btn--icon { color: var(--ocv-text-3); }
.ocv-remcard__actions .ocv-btn--icon:last-child { color: var(--ocv-red); }

/* Reminder popup: primary action on top, then a lightly formattable field. */
.ocv-remdialog { display: flex; flex-direction: column; gap: 16px; }
.ocv-remfield { display: flex; flex-direction: column; gap: 6px; }
.ocv-remtoolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocv-remtool {
	width: 40px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: inset 0 0 0 1px var(--ocv-hairline-strong);
	border-radius: 9px;
	background: var(--ocv-surface);
	color: var(--ocv-text);
	cursor: pointer;
}
.ocv-remtool:hover { background: var(--ocv-bg); }
.ocv-remtool svg { width: 18px; height: 18px; }

/* Divider between the formatting buttons and the placeholder menu. */
.ocv-toolsep { width: 1px; height: 24px; background: var(--ocv-hairline-strong); margin: 0 2px; flex: 0 0 auto; }

/* "{ }" placeholder menu. */
.ocv-phwrap { position: relative; display: inline-flex; }
.ocv-phbtn { width: auto; padding: 0 14px; gap: 6px; }
.ocv-phbtn__ico { font-weight: 800; font-size: 15px; letter-spacing: -0.5px; }
.ocv-phmenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	background: var(--ocv-surface);
	border-radius: 12px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
	padding: 6px;
	min-width: 270px;
	max-height: 320px;
	overflow-y: auto;
}
.ocv-phitem { display: flex; align-items: center; gap: 4px; }
.ocv-phitem__ins {
	flex: 1;
	display: flex;
	align-items: baseline;
	gap: 10px;
	background: transparent;
	border: none;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	color: var(--ocv-text);
}
.ocv-phitem__ins:hover { background: var(--ocv-bg); }
.ocv-phtoken { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--ocv-primary); font-size: 13px; white-space: nowrap; }
.ocv-phdesc { color: var(--ocv-muted); font-size: 13px; }
.ocv-phcopy {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	color: var(--ocv-muted);
}
.ocv-phcopy:hover { background: var(--ocv-bg); color: var(--ocv-text); }
.ocv-phcopy svg { width: 15px; height: 15px; }
.ocv-doctext { margin-top: 10px; }
.ocv-remtext { min-height: 120px; }
.ocv-remhint { font-size: 12px; color: var(--ocv-text-3); }
/* Testo descrittivo in cima ai dialog (più leggibile di un hint minore). */
.ocv-dlghint { font-size: 15px; line-height: 1.45; color: var(--ocv-text-2); margin: 0 0 4px; }
/* Blocchi "Archivia / Elimina" nel popup di gestione atleta. */
.ocv-dachoice { padding: 12px 0; border-bottom: 0.5px solid var(--ocv-hairline); }
.ocv-dachoice:last-child { border-bottom: none; }
.ocv-dachoice__t { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--ocv-text); }
.ocv-dachoice__t--danger { color: #c0392b; }
.ocv-dachoice__d { font-size: 13.5px; line-height: 1.45; color: var(--ocv-text-2); margin: 0; }

.ocv-remcard__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ocv-remcard__due {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-fill);
	color: var(--ocv-text-2);
	font-size: 12.5px;
	font-weight: 600;
}
.ocv-remcard__due svg { width: 14px; height: 14px; }
.ocv-remcard__due--urgent { background: var(--ocv-red); color: #fff; }
.ocv-remcard .ocv-btn--icon { flex-shrink: 0; }

/* Section cards */
.ocv-hcardgrid { display: grid; gap: 18px; }
.ocv-hcardgrid--big { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ocv-hcardgrid--mini { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.ocv-hcard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border-radius: var(--ocv-radius-lg);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--ocv-text);
	transition: transform 0.2s var(--ocv-ease), box-shadow 0.2s var(--ocv-ease);
}

.ocv-hcard:hover { transform: translateY(-2px); box-shadow: var(--ocv-shadow-pop); }

.ocv-hcardgrid--big .ocv-hcard { min-height: 247px; padding: 20px; gap: 12px; }

.ocv-hcard__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	flex-shrink: 0;
	background: var(--ocv-surface);
	color: var(--ocv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ocv-shadow-card);
	position: relative;
	z-index: 1;
}

.ocv-hcard__icon svg { width: 42px; height: 42px; stroke-width: 1.7; }
.ocv-hcard__text { position: relative; z-index: 1; }
.ocv-hcard__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ocv-hcard__desc { margin: 5px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--ocv-text-2); max-width: 90%; }
.ocv-hcard__spacer { flex: 1; min-height: 6px; }

.ocv-hcard__widget {
	align-self: flex-start;
	min-width: 148px;
	padding: 11px 15px;
	border-radius: 14px;
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	position: relative;
	z-index: 1;
}

.ocv-hcard__widget-top { display: block; font-size: 12px; font-weight: 600; color: var(--ocv-text-3); margin-bottom: 3px; letter-spacing: 0.01em; }
.ocv-hcard__widget-value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--ocv-text); line-height: 1; }
.ocv-hcard__widget-unit { font-size: 12px; color: var(--ocv-text-2); }

.ocv-hcard__widget--action { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ocv-hcard__widget-action { font-size: 14px; font-weight: 600; color: var(--ocv-text); }
.ocv-hcard__widget--action svg { width: 16px; height: 16px; color: var(--ocv-text-3); }

.ocv-hcard__go {
	position: absolute;
	bottom: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.ocv-hcard__go svg { width: 18px; height: 18px; color: #fff; }

.ocv-hcard__art {
	position: absolute;
	right: -18px;
	bottom: -22px;
	width: 158px;
	height: 158px;
	opacity: 0.09;
	pointer-events: none;
	z-index: 0;
}
.ocv-hcard__art svg { width: 100%; height: 100%; stroke-width: 1.1; }

/* Palettes */
.ocv-hcard--featured {
	color: #fff;
	border-color: transparent;
	background: var(--ocv-primary);
	background: linear-gradient(155deg, var(--ocv-primary) 0%, #0043a6 100%);
}
.ocv-hcard--featured .ocv-hcard__icon { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
.ocv-hcard--featured .ocv-hcard__desc { color: rgba(255, 255, 255, 0.9); }
.ocv-hcard--featured .ocv-hcard__widget { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.ocv-hcard--featured .ocv-hcard__widget-top { color: rgba(255, 255, 255, 0.75); }
.ocv-hcard--featured .ocv-hcard__widget-value,
.ocv-hcard--featured .ocv-hcard__widget-unit,
.ocv-hcard--featured .ocv-hcard__widget-action { color: #fff; }
.ocv-hcard--featured .ocv-hcard__widget--action svg { color: rgba(255, 255, 255, 0.8); }
.ocv-hcard--featured .ocv-hcard__art { opacity: 0.16; color: #fff; }

.ocv-hcard--blue { background: var(--ocv-blue-tint); border-color: transparent; }
.ocv-hcard--blue .ocv-hcard__icon { color: var(--ocv-blue); }
.ocv-hcard--blue .ocv-hcard__art { color: var(--ocv-blue); }

.ocv-hcard--green { background: var(--ocv-green-tint); border-color: transparent; }
.ocv-hcard--green .ocv-hcard__icon { color: var(--ocv-green); }
.ocv-hcard--green .ocv-hcard__art { color: var(--ocv-green); }

.ocv-hcard--amber { background: var(--ocv-amber-tint); border-color: transparent; }
.ocv-hcard--amber .ocv-hcard__icon { color: var(--ocv-amber); }

.ocv-hcard--purple { background: var(--ocv-purple-tint); border-color: transparent; }
.ocv-hcard--purple .ocv-hcard__icon { color: var(--ocv-purple); }

.ocv-hcard--yellow { background: #fff8e1; border-color: transparent; }
.ocv-hcard--yellow .ocv-hcard__icon { color: #e0a400; }

.ocv-hcard--grey { background: var(--ocv-grey-tint); border-color: transparent; }
.ocv-hcard--grey .ocv-hcard__icon { color: var(--ocv-grey); }

.ocv-hcard--teal { background: var(--ocv-teal-tint); border-color: transparent; }
.ocv-hcard--teal .ocv-hcard__icon { color: var(--ocv-teal); }

/*
 * Neutral tile: a light, minimal card that overrides its palette background so
 * the lower row stays calm. The section's icon colour survives as the only
 * accent (the palette class still supplies it).
 */
.ocv-hcard--neutral {
	background: var(--ocv-surface);
	border-color: var(--ocv-hairline);
}
/* Tiles: no box behind the icon (it was redundant on a white card) — just the
   glyph, larger, so it reads as part of its own button. The icon is kept a
   uniform grey on every tile (richiesta Matteo) instead of the palette colour. */
.ocv-hcard--neutral .ocv-hcard__icon {
	background: transparent;
	box-shadow: none;
	width: auto;
	height: auto;
	border-radius: 0;
	color: var(--ocv-grey);
}

/* Photo cards: a background image with white text over it. */
.ocv-hcard--photo {
	color: #fff;
	border-color: transparent;
	background-color: #0a3d91;
	background-image: var(--hcard-img);
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

/*
 * Faded variant: the image sits in an underlay at 50% opacity over the card's
 * solid fallback colour, so the tile reads lighter than a full photo card while
 * the white text on top stays fully opaque and legible.
 */
.ocv-hcard--faded { background-image: none; }
.ocv-hcard--faded::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hcard-img);
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	opacity: 0.5;
	pointer-events: none;
}
.ocv-hcard--photo .ocv-hcard__icon { display: none; }
/* Titolo bianco sulle card grandi con immagine di sfondo (vince sul reset
   heading inline h1..h6{color:#333}, che altrimenti lo rende scuro). */
.ocv-hcard--photo .ocv-hcard__title { font-size: 33px; line-height: 1.03; letter-spacing: -0.02em; color: #fff; }
.ocv-hcard--photo .ocv-hcard__desc {
	color: rgba(255, 255, 255, 0.92);
	font-size: 15px;
	max-width: 48%;
	margin-top: 7px;
}
.ocv-hcard--photo .ocv-hcard__go {
	background: rgba(255, 255, 255, 0.22);
	width: 40px;
	height: 40px;
}
.ocv-hcard--photo .ocv-hcard__go svg { width: 20px; height: 20px; }
.ocv-hcard--photo .ocv-hcard__widget { background: #fff; box-shadow: var(--ocv-shadow-card); }

/* Photo tiles (the smaller cards below the big row): full image at 100%, no icon,
   white text pulled to the top. A soft left-side scrim keeps the text legible. */
.ocv-hcard--phototile::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(105deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.16) 55%, transparent 100%);
	pointer-events: none;
}
.ocv-hcard--phototile > * { position: relative; z-index: 1; }
.ocv-hcard--phototile .ocv-hcard__title { font-size: 21px; line-height: 1.05; color: #fff; }
.ocv-hcard--phototile .ocv-hcard__desc { max-width: 80%; font-size: 12.5px; margin-top: 4px; color: rgba(255, 255, 255, 0.92); }
/* Big photo cards (Atleti/Squadre): just the number, white, over the image —
   no boxed sub-card, no label. Padding zeroed (incl. the big-grid override) so
   the number's left edge lines up with the title/description above it. */
.ocv-hcard__widget--bare,
.ocv-hcard--photo .ocv-hcard__widget--bare,
.ocv-hcardgrid--big .ocv-hcard__widget--bare {
	background: transparent;
	box-shadow: none;
	padding: 0;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: stretch;
	gap: 10px;
}
/* The trial pills sit at the right edge, after the big number. */
.ocv-hcard__widget--bare .ocv-hcard__widget-value + .ocv-trialbadge { margin-left: auto; }

/* Small "in prova" badge next to the athlete count on the Atleti card: a
   semi-transparent pill on the photo, red once a trial has lapsed, clickable. */
.ocv-trialbadge {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 4px 13px;
	border-radius: 14px;
	background: var(--ocv-primary);
	color: #fff;
	box-shadow: inset 0 0 0 1px #fff;
	cursor: pointer;
	transition: filter 0.15s var(--ocv-ease);
}
.ocv-trialbadge:hover { filter: brightness(1.1); }
.ocv-trialbadge__n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.ocv-trialbadge__t {
	display: flex; flex-direction: column;
	font-size: 11px; font-weight: 800; line-height: 1.05;
	text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.95;
}
.ocv-trialbadge--alert { background: var(--ocv-red); color: #fff; }
.ocv-trialbadge--alert:hover { background: var(--ocv-red); filter: brightness(1.08); }
.ocv-hcard__widget--bare .ocv-hcard__widget-value {
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.ocv-hcardgrid--big .ocv-hcard__widget--bare .ocv-hcard__widget-value { font-size: 56px; }

.ocv-hcard--photo-athletes { --hcard-img: url('../images/kit-atleti-3.jpg'); }
.ocv-hcard--photo-teams { --hcard-img: url('../images/campo-squadre-2.jpg'); background-color: #0b3d18; }
.ocv-hcard--photo-payments { --hcard-img: url('../images/portafoglio-pagamenti.jpg'); background-color: #b45309; }
.ocv-hcard--photo-attendance { --hcard-img: url('../images/presenze.jpg'); background-color: #0c3b3f; }
.ocv-hcard--photo-activities { --hcard-img: url('../images/attivita.jpg'); background-color: #5c5000; }
.ocv-hcard--photo-staff { --hcard-img: url('../images/staff.jpg'); background-color: #3a1a6b; }
.ocv-hcard--photo-matches { --hcard-img: url('../images/staff.jpg'); background-color: #3a1a6b; }
.ocv-hcard--photo-guide { --hcard-img: url('../images/guide.jpg'); background-color: #7a0f3d; }
.ocv-hcard--photo-stats { --hcard-img: url('../images/statistiche.jpg'); background-color: #5c5000; }
.ocv-hcard--photo-shop { --hcard-img: url('../images/abbigliamento.jpg'); background-color: #4a2f8f; }

/* Green "new items" badge inside a widget. */
.ocv-hcard__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 10px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-green-tint);
	color: #1a7f37;
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
	letter-spacing: -0.01em;
}

/* Red alert variant: e.g. medical certificates about to expire on the Atleti card. */
.ocv-hcard__badge--alert {
	background: var(--ocv-red-tint);
	color: var(--ocv-red);
}

/* Configura Dashboard (super admin) */
.ocv-dashcfg__intro { margin: 0 0 18px; max-width: 640px; font-size: 14px; line-height: 1.45; color: var(--ocv-text-2); }
.ocv-dashcfg { display: flex; flex-direction: column; gap: 14px; }
.ocv-dashcfg__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
}
.ocv-dashcfg__preview {
	width: 138px;
	height: 88px;
	flex-shrink: 0;
	border-radius: 12px;
	background-color: var(--ocv-fill);
	background-size: cover;
	background-position: center right;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ocv-text-3);
}
.ocv-dashcfg__preview svg { width: 28px; height: 28px; }
.ocv-dashcfg__info { flex: 1; min-width: 0; }
.ocv-dashcfg__name { font-size: 16px; font-weight: 600; }
.ocv-dashcfg__hint { margin-top: 3px; font-size: 12.5px; color: var(--ocv-text-3); }
.ocv-dashcfg__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ocv-dashcfg__dl { text-decoration: none; }

@media (max-width: 560px) {
	.ocv-dashcfg__row { flex-direction: column; align-items: stretch; }
	.ocv-dashcfg__preview { width: 100%; height: 120px; }
}

/* Compact tiles are a touch smaller — but keep the text comfortably readable. */
/* Tiles laid out as a flex row so a stacked column can sit alongside them. */
.ocv-hcardgrid--mini { display: flex; flex-wrap: wrap; }
.ocv-hcardgrid--mini > .ocv-hcard { flex: 1 1 212px; }

/* The right-hand column holding two compact tiles (Presenza atleti + Partite),
   stretched to the height of a normal tile so both fit on the same row. */
.ocv-tilestack { flex: 1 1 212px; display: flex; flex-direction: column; gap: 18px; }
.ocv-tilestack > .ocv-hcard { flex: 1; }

/* Compact tile: a short horizontal card (icon + title + chevron). Higher
   specificity than the .ocv-hcardgrid--mini rules below, which come later. */
.ocv-hcardgrid--mini .ocv-tilestack .ocv-hcard {
	flex-direction: row;
	align-items: center;
	min-height: 0;
	padding: 14px 18px;
	gap: 14px;
}
.ocv-hcardgrid--mini .ocv-tilestack .ocv-hcard__icon { align-self: center; }
.ocv-hcardgrid--mini .ocv-tilestack .ocv-hcard__icon svg { width: 32px; height: 32px; }
.ocv-hcardgrid--mini .ocv-tilestack .ocv-hcard__title { font-size: 17px; }
.ocv-tilestack .ocv-hcard__spacer { flex: 1; }
.ocv-hcard__go-mini { width: 20px; height: 20px; color: var(--ocv-text-3); flex-shrink: 0; }

/* Count badge in a tile's corner (orders / activities / to collect). */
.ocv-hcard__count {
	position: absolute;
	top: 14px;
	right: 14px;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--ocv-primary);
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
	z-index: 2;
}

/* Red when there's something to act on (Amministrazione: quote da incassare;
   Store: ordini in gestione). Attività keeps the neutral blue — see dashboard.js. */
.ocv-hcard__count--alert { background: var(--ocv-red); }

/* Photo tiles: the number sits bottom-left, 10% larger, with no pill background
   (just white over the image) — except the alert one (Amministrazione), which
   keeps a red pill so it stands out. */
.ocv-hcard--phototile .ocv-hcard__count {
	top: auto;
	right: auto;
	bottom: 16px;
	left: 20px;
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: transparent;
	display: flex;
	align-items: baseline;
	gap: 6px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
/* The number, 30% larger than the base 19px; the word next to it stays small. */
.ocv-hcard--phototile .ocv-hcard__count-n { font-size: 25px; font-weight: 800; line-height: 1; }
.ocv-hcard--phototile .ocv-hcard__count-l { font-size: 13px; font-weight: 600; }
.ocv-hcard--phototile .ocv-hcard__count--alert {
	padding: 5px 12px;
	border-radius: 12px;
	background: var(--ocv-red);
	text-shadow: none;
}

.ocv-hcardgrid--mini .ocv-hcard { padding: 18px; gap: 10px; min-height: 150px; }
.ocv-hcardgrid--mini .ocv-hcard__icon { width: auto; height: auto; align-self: flex-start; justify-content: flex-start; }
.ocv-hcardgrid--mini .ocv-hcard__icon svg { width: 50px; height: 50px; stroke-width: 1.3; }
.ocv-hcardgrid--mini .ocv-hcard__title { font-size: 19px; }
.ocv-hcardgrid--mini .ocv-hcard__desc { font-size: 14.5px; }
.ocv-hcardgrid--mini .ocv-hcard__widget { min-width: 0; padding: 11px 14px; }
.ocv-hcardgrid--mini .ocv-hcard__widget-top { font-size: 12.5px; }
.ocv-hcardgrid--mini .ocv-hcard__widget-value { font-size: 25px; }

/* Big feature cards (Atleti/Squadre): a larger, cleaner headline number. */
.ocv-hcardgrid--big .ocv-hcard__widget { min-width: 132px; padding: 15px 20px; border-radius: 16px; }
.ocv-hcardgrid--big .ocv-hcard__widget-top { font-size: 12.5px; }
.ocv-hcardgrid--big .ocv-hcard__widget-value { font-size: 38px; }
/* ...but the bare number carries no box, so its padding stays zero and the
   digit lines up flush-left with the title (higher specificity to win here). */
.ocv-hcardgrid--big .ocv-hcard .ocv-hcard__widget--bare { padding: 0; min-width: 0; }

/* Photo tiles: keep the title readable at the smaller tile size. */
.ocv-hcardgrid--mini .ocv-hcard--photo .ocv-hcard__title { font-size: 19px; }
.ocv-hcardgrid--mini .ocv-hcard--photo .ocv-hcard__desc { max-width: 60%; font-size: 12px; }

@media (max-width: 640px) {
	/* Phone: logo + tools on the top row, greeting + subtitle on their own row
	   underneath, full width. */
	/* Phone home: saluto ACCANTO al logo, niente pulsanti in alto (sono nella
	   barra in basso / nel menu utente). */
	/* Phone: una colonna — saluto (con logo accanto) sopra, ricerca a tutta
	   larghezza sotto. Gli strumenti (avatar/bustina) non si mostrano in alto. */
	.ocv-dash__header {
		grid-template-columns: 1fr;
		align-items: stretch;
		gap: 10px 12px;
	}
	.ocv-dash__tools { display: none; }
	/* Phone: the home search drops to its own full-width row. */
	.ocv-navsearch--home {
		width: 100%;
	}
	.ocv-dash__logo { justify-self: start; height: 44px; }
	.ocv-dash__hello { display: block; }
	.ocv-dash__hello h1 { font-size: 23px; }
	.ocv-dash__hello p { font-size: 14px; }
	.ocv-statgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.ocv-statcard { padding: 13px; gap: 11px; }
	.ocv-statcard__icon { width: 44px; height: 44px; }
	.ocv-statcard__value { font-size: 22px; }
	/* Phone: the compact banners (Allenamento · Partite) get a comfortable tap
	   height — at least as tall as the "Iscrizioni online" office link. */
	.ocv-hcardgrid--mini .ocv-tilestack .ocv-hcard { min-height: 64px; }
}

/* ============================================ Dashboard cellulare (2 col) */
/* Il layout desktop resta identico; sotto i 640px si mostra invece una griglia
   unica a due colonne di tessere compatte + un pannello "Avvisi" comprimibile. */
.ocv-dash__desktop { display: flex; flex-direction: column; gap: 22px; }
.ocv-dash__mobile { display: none; }

@media (max-width: 640px) {
	.ocv-dash__desktop { display: none; }
	.ocv-dash__mobile { display: flex; flex-direction: column; gap: 16px; }

	/* Pannello Avvisi comprimibile (accordion nativo <details>). */
	.ocv-avvisi {
		border: 0.5px solid rgba(255, 59, 48, 0.28);
		border-radius: 14px;
		background: #fff5f5;
		overflow: hidden;
		box-shadow: var(--ocv-shadow-card);
	}
	.ocv-avvisi > summary {
		list-style: none;
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 12px 14px;
		cursor: pointer;
		user-select: none;
	}
	.ocv-avvisi > summary::-webkit-details-marker { display: none; }
	.ocv-avvisi__ico {
		width: 32px;
		height: 32px;
		border-radius: 9px;
		background: #ffe4e2;
		color: var(--ocv-red);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.ocv-avvisi__ico svg { width: 18px; height: 18px; }
	.ocv-avvisi__b { flex: 1; min-width: 0; }
	.ocv-avvisi__t { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
	.ocv-avvisi__s { font-size: 12px; color: var(--ocv-text-2); }
	.ocv-avvisi__badge {
		min-width: 26px;
		height: 26px;
		padding: 0 8px;
		border-radius: 8px;
		background: var(--ocv-red);
		color: #fff;
		font-size: 14px;
		font-weight: 800;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.ocv-avvisi__chev { width: 18px; height: 18px; stroke: var(--ocv-text-3); flex-shrink: 0; transition: transform 0.2s var(--ocv-ease); }
	.ocv-avvisi[open] .ocv-avvisi__chev { transform: rotate(90deg); }
	.ocv-avvisi__list { padding: 2px 6px 6px; }
	/* Le card avviso già esistenti, rese righe pulite dentro il pannello. */
	.ocv-avvisi__list .ocv-notif {
		width: 100%;
		min-width: 0;
		border-top: 0.5px solid rgba(255, 59, 48, 0.16);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		margin: 0;
	}
	.ocv-avvisi__list button.ocv-notif:hover { transform: none; box-shadow: none; }
	.ocv-avvisi__list .ocv-notif:first-child { border-top: 0; }

	/* Griglia a due colonne. */
	.ocv-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

	/* Tessera (pulsantone) foto. */
	.ocv-mtile {
		position: relative;
		overflow: hidden;
		border-radius: 18px;
		min-height: 124px;
		padding: 13px 14px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		color: #fff;
		border: 0;
		text-align: left;
		cursor: pointer;
		background-color: #0a3d91;
		background-image: var(--hcard-img);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		box-shadow: var(--ocv-shadow-card);
		transition: transform 0.18s var(--ocv-ease);
	}
	.ocv-mtile:active { transform: scale(0.98); }
	.ocv-mtile::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.55) 100%);
	}
	.ocv-mtile > * { position: relative; z-index: 1; }
	.ocv-mtile__title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
	.ocv-mtile--titolo-lungo .ocv-mtile__title { font-size: 16px; }
	.ocv-mtile__metric { margin-top: 4px; font-size: 14px; line-height: 1.1; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
	.ocv-mtile__metric b { font-weight: 800; }
	.ocv-mtile__metric span { font-weight: 500; opacity: 0.95; }
	.ocv-mtile__action { margin-top: 4px; font-size: 13px; font-weight: 600; opacity: 0.95; display: flex; align-items: center; gap: 4px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
	.ocv-mtile__action svg { width: 14px; height: 14px; }
	.ocv-mtile__notes { position: absolute; left: 13px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 26px); }
	.ocv-mnote { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 10px; font-size: 12px; font-weight: 800; line-height: 1; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
	.ocv-mnote b { font-size: 14px; font-weight: 800; }
	.ocv-mnote--red { background: var(--ocv-red); }
	.ocv-mnote--green { background: var(--ocv-green); }
	.ocv-mnote--glass { background: rgba(255, 255, 255, 0.24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
	.ocv-mlivedot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
	/* NB: i link ufficio (Iscrizioni/Documenti) restano com'erano — nessun override,
	   così mantengono l'aspetto compatto di prima. */
}

/* ----------------------------------------------- Documenti da scaricare */

/* Section heading on the Documenti page (Moduli / Documenti caricati). */
.ocv-docgroup {
	margin: 4px 4px 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ocv-text-2);
}

/* The uploaded-files group header: title on the left, "Aggiungi" on the right. */
.ocv-docgrouphead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 24px 4px 12px;
}

.ocv-docgrouphead .ocv-docgroup {
	margin: 0;
}

/* Up/down reorder controls (modules + uploaded documents): kept to the right of
 * the row, compact and quiet so they don't shout over the real actions. */
.ocv-reorder {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin-left: auto;
	flex-shrink: 0;
	padding-left: 8px;
}

.ocv-reorder .ocv-btn {
	min-height: 20px;
	height: 20px;
	width: 30px;
	padding: 0;
	color: var(--ocv-text-3);
}

.ocv-reorder .ocv-btn:disabled {
	opacity: 0.3;
}

.ocv-reorder .ocv-btn__icon {
	width: 16px;
	height: 16px;
}

/* One uploaded document: reorder · title/description/file · actions. */
.ocv-doclib {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ocv-doclib__main {
	flex: 1;
	min-width: 0;
}

.ocv-doclib__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.ocv-doclib__desc {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--ocv-text-2);
}

.ocv-doclib__file {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--ocv-text-3);
}

.ocv-doclib__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ocv-fileinput {
	width: 100%;
	font-size: 15px;
}

@media (max-width: 560px) {
	.ocv-doclib {
		flex-wrap: wrap;
	}
	.ocv-doclib__main {
		flex-basis: 100%;
		order: -1;
	}
}

/* ------------------------------------------------------ Secondary menu */

.ocv-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 8px;
	padding-top: calc(var(--ocv-navbar) + 4px);
	animation: ocv-fade 0.16s var(--ocv-ease);
}

@keyframes ocv-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ocv-menu {
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(28px);
	-webkit-backdrop-filter: saturate(180%) blur(28px);
	border-radius: var(--ocv-radius);
	box-shadow: var(--ocv-shadow-pop);
	width: 280px;
	max-width: calc(100vw - 16px);
	max-height: calc(100dvh - var(--ocv-navbar) - 24px);
	overflow-y: auto;
	padding: 6px;
	animation: ocv-menu-in 0.18s var(--ocv-ease);
	transform-origin: top right;
}

@keyframes ocv-menu-in {
	from { opacity: 0; transform: scale(0.94) translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.ocv-menu__group {
	padding: 4px 0;
}

.ocv-menu__group + .ocv-menu__group {
	border-top: 0.5px solid var(--ocv-hairline);
}

.ocv-menu__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ocv-text-3);
	padding: 6px 12px 4px;
	letter-spacing: 0;
}

.ocv-menu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: none;
	background: none;
	border-radius: var(--ocv-radius-sm);
	font: inherit;
	font-size: 16px;
	color: var(--ocv-text);
	cursor: pointer;
	text-align: left;
}

.ocv-menu__item:hover {
	background: rgba(0, 0, 0, 0.05);
}

.ocv-menu__item.is-active {
	color: var(--ocv-primary);
	font-weight: 600;
}

.ocv-menu__item svg {
	width: 21px;
	height: 21px;
	flex-shrink: 0;
	color: var(--ocv-text-2);
}

.ocv-menu__item.is-active svg {
	color: var(--ocv-primary);
}

.ocv-menu__item--danger {
	color: var(--ocv-red);
}

.ocv-menu__item--danger svg {
	color: var(--ocv-red);
}

.ocv-menu__badge {
	margin-left: auto;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-red);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------------- Titles */

.ocv-page-head {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: var(--ocv-gap);
}

/* iOS large title. */
.ocv-page-title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.ocv-page-sub {
	margin: 4px 0 0;
	color: var(--ocv-text-2);
	font-size: 15px;
}

.ocv-page-head__actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ocv-section-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--ocv-text-3);
	margin: 28px 0 10px;
	letter-spacing: 0;
}

/* ------------------------------------------------------------- Buttons */

.ocv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 18px;
	border: none;
	border-radius: var(--ocv-radius);
	background: var(--ocv-fill);
	color: var(--ocv-primary);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: transform 0.1s var(--ocv-ease), filter 0.15s var(--ocv-ease), background 0.15s var(--ocv-ease);
}

.ocv-btn:active {
	transform: scale(0.97);
}

.ocv-btn:focus-visible {
	outline: none;
	box-shadow: var(--ocv-ring);
}

.ocv-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.ocv-btn__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.ocv-btn--primary {
	background: var(--ocv-primary);
	color: #fff;
}

.ocv-btn--primary:hover {
	filter: brightness(1.06);
}

.ocv-btn--accent {
	background: var(--ocv-accent);
	color: #fff;
}

.ocv-btn--accent:hover {
	filter: brightness(1.06);
}

.ocv-btn--success {
	background: var(--ocv-green);
	color: #fff;
}

.ocv-btn--success:hover {
	filter: brightness(1.06);
}

/* Variante "contatto": verde chiaro sotto, icona/testo verde scuro (non pieno).
   Stesso stile del pulsantino contatto negli elenchi (.ocv-rowcontact). */
.ocv-btn--contact {
	background: var(--ocv-green-tint);
	color: var(--ocv-green);
	border: 1px solid color-mix(in srgb, var(--ocv-green) 24%, transparent);
}
.ocv-btn--contact:hover {
	background: color-mix(in srgb, var(--ocv-green) 16%, var(--ocv-surface));
	border-color: var(--ocv-green);
}

.ocv-btn--danger {
	background: var(--ocv-red);
	color: #fff;
}

.ocv-btn--danger:hover {
	filter: brightness(1.06);
}

.ocv-btn--ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--ocv-hairline-strong);
}

.ocv-btn--ghost:hover {
	background: var(--ocv-fill);
}

.ocv-btn--lg {
	min-height: var(--ocv-touch-lg);
	font-size: 19px;
	padding: 0 32px;
	border-radius: var(--ocv-radius-lg);
}

.ocv-btn--block {
	width: 100%;
}

.ocv-btn--icon {
	padding: 0;
	width: 40px;
	min-width: 40px;
}

/* ---------------------------------------------------------- Tap tiles */

.ocv-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}

.ocv-tile {
	min-height: 150px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-lg);
	background: var(--ocv-surface);
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font: inherit;
	text-align: left;
	color: inherit;
	box-shadow: var(--ocv-shadow-card);
	transition: transform 0.15s var(--ocv-ease);
}

.ocv-tile:hover {
	border-color: var(--ocv-hairline-strong);
}

.ocv-tile:active {
	transform: scale(0.98);
}

.ocv-tile__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ocv-primary-tint);
	color: var(--ocv-primary);
	font-weight: 700;
	font-size: 15px;
}

.ocv-tile__icon svg {
	width: 31px;
	height: 31px;
	stroke-width: 1.8;
}

.ocv-tile__label {
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.02em;
}

.ocv-tile__meta {
	font-size: 14px;
	color: var(--ocv-text-2);
	margin-top: auto;
}

/* ---------------------------------------------------------- Stat cards */

.ocv-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.ocv-stat {
	background: var(--ocv-bg-soft);
	border-radius: var(--ocv-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ocv-stat__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ocv-text-2);
	display: flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0;
}

.ocv-stat__label svg {
	width: 15px;
	height: 15px;
}

.ocv-stat__value {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.ocv-stat__hint {
	font-size: 13px;
	color: var(--ocv-text-3);
}

.ocv-stat--good .ocv-stat__value { color: var(--ocv-green); }
.ocv-stat--bad .ocv-stat__value { color: var(--ocv-red); }
.ocv-stat--warn .ocv-stat__value { color: var(--ocv-amber); }

/* --------------------------------------------------------------- Cards */

.ocv-card {
	background: var(--ocv-surface);
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-lg);
	overflow: hidden;
	margin-bottom: var(--ocv-gap);
	box-shadow: var(--ocv-shadow-card);
}

.ocv-card__head {
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border-bottom: 0.5px solid var(--ocv-hairline);
}

.ocv-card__title {
	font-weight: 600;
	font-size: 17px;
	margin: 0;
	letter-spacing: -0.02em;
}

/* Bigger role name on the Staff cards. */
.ocv-rolebig { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

/* Larger section heading with a coherent icon (athlete sheet). */
.ocv-sectitle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ocv-sectitle__icon {
	width: 22px;
	height: 22px;
	color: var(--ocv-primary);
	flex-shrink: 0;
}

/* Identity header inside the Anagrafica card: big name + team. */
/* Grid: photo spans two rows, with the name on top and the badges below it, so
   the badges line up with the bottom of the photo. */
.ocv-idcard {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "photo who contact" "photo badges contact";
	align-items: start;
	column-gap: 16px;
	row-gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 0.5px solid var(--ocv-hairline);
}
/* Nella scheda hub (non nell'Anagrafica) non c'è più nulla sotto il blocco
   identità sulla stessa card: via la riga divisoria, meno aria residua. */
.ocv-idcard--hub { padding-bottom: 4px; margin-bottom: 8px; border-bottom: none; }
.ocv-idcard > .ocv-figurina { grid-area: photo; }
.ocv-idcard__fig { grid-area: photo; position: relative; }
.ocv-idcard__fig .ocv-btn {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.ocv-idcard__fig .ocv-btn svg { width: 20px; height: 20px; }
.ocv-idcard__who { grid-area: who; min-width: 0; }
/* Status badges: left-aligned row, pushed to the bottom (level with the photo). */
.ocv-idcard__badges { grid-area: badges; align-self: end; display: flex; flex-wrap: wrap; gap: 10px; }
/* Pulsante "Contattare" in alto a destra, solo desktop (vedi media query sotto
   per il nascondere su mobile, dove resta quello a tutta larghezza in fondo). */
.ocv-idcard__contact { grid-area: contact; align-self: start; }

/* Status read-out in the empty space to the right of the name. */
.ocv-idcard__status {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

@media (max-width: 560px) {
	/* On a phone: name/meta full-width on top, then the photo with the badges to
	   its right (photo top level with the "Iscritto" badge). */
	.ocv-idcard { grid-template-columns: auto 1fr; grid-template-areas: "who who" "photo badges"; }
	.ocv-idcard__badges { align-self: start; }
	.ocv-idcard__contact { display: none; }
}


/* Documents-to-sign icon badge in athlete list rows. */
/* Alert badge: fondo pieno + icona bianca, in fila. matita = documenti da
   firmare, croce = certificato, portafoglio = pagamento scaduto, campanello =
   modifiche proposte da approvare. */
.ocv-albadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--ocv-red);
	color: #fff;
	flex-shrink: 0;
}

.ocv-albadge svg { width: 18px; height: 18px; }
.ocv-albadge--amber { background: var(--ocv-amber); }
/* Wrapper cliccabile attorno a un badge di stato nell'elenco atleti: lo rende una
   scorciatoia (salta alla sotto-scheda) senza cambiarne l'aspetto. */
.ocv-badgebtn {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	-webkit-tap-highlight-color: transparent;
}
.ocv-badgebtn:hover { filter: brightness(0.96); }

/* Both alert badges (documents + certificate) on the Anagrafica hub button. */
.ocv-hubbtn__badges { display: flex; align-items: center; gap: 8px; }

/* Documents card in the athlete sheet. */
.ocv-doclist { display: flex; flex-direction: column; gap: 12px; }

.ocv-docrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 0.5px solid var(--ocv-hairline);
}

.ocv-docrow:last-child { border-bottom: none; }

.ocv-docrow__icon {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ocv-red-tint);
	color: var(--ocv-red);
	flex-shrink: 0;
}

.ocv-docrow__icon.is-signed {
	background: var(--ocv-green-tint);
	color: color-mix(in srgb, var(--ocv-green) 72%, black);
}

.ocv-docrow__icon svg { width: 21px; height: 21px; }
.ocv-docrow__text { flex: 1; min-width: 0; }
.ocv-docrow__label { font-weight: 600; font-size: 14px; color: var(--ocv-text); }
.ocv-docrow__sub { font-size: 12.5px; color: var(--ocv-text-2); margin-top: 1px; }

/* "Conferma dati del genitore" card (Anagrafica). */
.ocv-confcard { display: flex; flex-direction: column; gap: 10px; }
.ocv-confstate { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.ocv-confstate--ok { background: var(--ocv-green-tint); color: color-mix(in srgb, var(--ocv-green) 72%, black); }
.ocv-confstate--wait { background: var(--ocv-hairline); color: var(--ocv-text-2); }
.ocv-confstate--flag { background: var(--ocv-amber-tint); color: color-mix(in srgb, var(--ocv-amber) 70%, black); }
.ocv-confstate__note { margin-top: 4px; font-weight: 400; font-style: italic; }

/* Parent-proposed corrections: a before → after diff and the approve actions. */
.ocv-proposed { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--ocv-amber-tint); }
.ocv-proposed__title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.ocv-difflist { display: flex; flex-direction: column; gap: 6px; }
.ocv-diffrow { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--ocv-surface); }
.ocv-diffrow__label { font-size: 12px; font-weight: 600; color: var(--ocv-text-2); }
.ocv-diffrow__vals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.ocv-diffrow__old { text-decoration: line-through; color: var(--ocv-text-2); }
.ocv-diffrow__arrow { color: var(--ocv-text-2); }
.ocv-diffrow__new { font-weight: 600; }
.ocv-proposed__actions { display: flex; gap: 8px; margin-top: 10px; }
.ocv-proposed__actions .ocv-btn { flex: 1; }
.ocv-confqr { display: flex; justify-content: center; padding: 8px 0; }
.ocv-confqr__img { width: 190px; height: 190px; image-rendering: pixelated; border-radius: 8px; }
.ocv-confrow { display: flex; gap: 8px; align-items: center; }
.ocv-confrow .ocv-input { flex: 1; min-width: 0; }
.ocv-confshare { display: flex; gap: 8px; flex-wrap: wrap; }

/* Riga divisoria generica, per separare nettamente due gruppi di pulsanti
   dentro la stessa card (es. "fallo in segreteria" vs "mandalo al genitore"). */
.ocv-hr { border: none; border-top: 0.5px solid var(--ocv-hairline); }

/* Message-template editor: each variant gently separated from the next. */
.ocv-msgvariant { padding-top: 12px; margin-top: 12px; border-top: 0.5px solid var(--ocv-hairline); }
.ocv-msgvariant:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.ocv-msgvariant__head { display: flex; gap: 10px; align-items: flex-end; }

/* A document + its "firmato in cartaceo" toggle share one separated block. */
/* Ogni documento è una "card" a sé, così si distingue nettamente dal successivo. */
.ocv-docitem {
	border: 0.5px solid var(--ocv-hairline);
	border-radius: 14px;
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	padding: 4px 12px 8px;
}
.ocv-docitem .ocv-docrow { border-bottom: none; padding-bottom: 4px; }
.ocv-docitem .ocv-check { padding: 2px 0 8px 52px; }

/* Editable paper-signature date, shown once "firmato in cartaceo" is ticked. */
.ocv-docdate { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 0 12px 52px; }
.ocv-docdate__label { font-size: 13px; font-weight: 600; color: var(--ocv-text-2); }
.ocv-docdate .ocv-datefield { flex: 1 1 180px; min-width: 160px; }
.ocv-docdate .ocv-btn { flex-shrink: 0; }

/* Documenti section: cards on two columns to compact the page. */
.ocv-doccards { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.ocv-doccard { display: flex; flex-direction: column; gap: 12px; }
.ocv-doccard__desc { margin: 0; font-size: 14px; color: var(--ocv-text-2); line-height: 1.45; }
.ocv-doccard__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ocv-doctext { height: 58vh; min-height: 340px; font-size: 14px; line-height: 1.55; resize: vertical; }
.ocv-sharelist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ocv-sharemsg-wrap { margin-top: 14px; }
.ocv-sharemsg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ocv-sharemsg { min-height: 120px; }
.ocv-schededit { display: flex; flex-direction: column; gap: 8px; }
.ocv-schedrow { display: grid; grid-template-columns: auto 1.4fr 1fr 1fr auto; gap: 8px; align-items: center; border-radius: 8px; }
.ocv-schedrow.is-dragging { opacity: .45; }
.ocv-schedrow.is-dragover { outline: 2px dashed var(--ocv-primary, #1B3966); outline-offset: 2px; }
.ocv-draghandle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 32px; cursor: grab; color: var(--ocv-muted, #8a94a6); font-size: 18px; line-height: 1; user-select: none; touch-action: none; }
.ocv-draghandle:active { cursor: grabbing; }
.ocv-schedactions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .ocv-schedrow { grid-template-columns: auto 1fr 1fr; } }

/* Editor campi di casa (Dati società): ogni casella ha la sua etichetta.
   Nome + Comune sullo stesso rigo, Indirizzo sotto a tutta larghezza, cestino a destra. */
.ocv-fieldedit { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.ocv-hfrow {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	grid-template-areas: "nome comune del" "indir indir del";
	gap: 8px 10px;
	align-items: end;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ocv-hairline);
}
.ocv-hfrow:last-child { border-bottom: none; padding-bottom: 0; }
.ocv-ffield { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ocv-ff--nome { grid-area: nome; }
.ocv-ff--comune { grid-area: comune; }
.ocv-ff--indir { grid-area: indir; }
.ocv-ff--del { grid-area: del; align-self: center; }
.ocv-ffield__lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ocv-text-3); padding-left: 2px; }

/* ── Sezione Tesseramento (scheda): stato + stepper dell'iter ── */
.ocv-tstate { margin-bottom: 14px; }

/* Solo pallini + linea (niente più etichetta ripetuta sotto ognuno: lo stato
   attuale è già nel chip sopra) — molto più compatto in verticale. */
.ocv-tstep { display: flex; margin: 4px 0 12px; }

.ocv-tstep__item {
	flex: 1;
	display: flex;
	justify-content: center;
	position: relative;
}

.ocv-tstep__item::before {
	content: '';
	position: absolute;
	top: 14px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--ocv-hairline);
	z-index: 0;
}

.ocv-tstep__item:first-child::before { display: none; }

.ocv-tstep__item.is-done::before,
.ocv-tstep__item.is-active::before { background: color-mix(in srgb, var(--ocv-primary) 50%, white); }

.ocv-tstep__dot {
	position: relative;
	z-index: 1;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ocv-surface);
	border: 1.5px solid color-mix(in srgb, var(--ocv-text-3) 30%, white);
	color: var(--ocv-text-3);
	font-size: 12px;
	font-weight: 700;
}

.ocv-tstep__dot svg { width: 15px; height: 15px; }

.ocv-tstep__item.is-done .ocv-tstep__dot {
	background: var(--ocv-green-tint);
	border-color: transparent;
	color: color-mix(in srgb, var(--ocv-green) 72%, black);
}

.ocv-tstep__item.is-active .ocv-tstep__dot {
	background: var(--ocv-primary);
	border-color: transparent;
	color: #fff;
}

.ocv-thint { font-size: 13px; color: var(--ocv-text-2); margin: 0 0 16px; line-height: 1.5; }

/* Pallini a sinistra, menù di aggiornamento stato a destra, stesso rigo. */
.ocv-tesrow { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.ocv-tesrow .ocv-tstep { flex: 1; margin: 0; min-width: 0; }
.ocv-tesrow .ocv-select { flex-shrink: 0; width: auto; max-width: 180px; }
@media (max-width: 480px) {
	/* Sotto i 480px i 5 pallini + il menù non ci stanno affiancati: il menù va
	   sotto, a piena larghezza. */
	.ocv-tesrow { flex-direction: column; align-items: stretch; }
	.ocv-tesrow .ocv-select { max-width: none; }
}

/* ── Pagina di firma documento (testo + accetto + firma) ── */
.ocv-signbox { display: flex; flex-direction: column; gap: 14px; }

.ocv-signdoc {
	max-height: 240px;
	overflow-y: auto;
	padding: 14px 16px;
	border: 1px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-bg-soft);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ocv-text);
	white-space: pre-wrap;
}

.ocv-sigwrap { display: flex; flex-direction: column; gap: 8px; }
.ocv-sigwrap__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ocv-sigpad {
	width: 100%;
	height: 200px;
	touch-action: none;
	background: #fff;
	border: 1.5px dashed color-mix(in srgb, var(--ocv-primary) 35%, white);
	border-radius: var(--ocv-radius-sm);
	cursor: crosshair;
}

.ocv-idcard__who {
	min-width: 0;
}

/* The athlete photo "figurina": a rounded vertical (3:4) frame, like a sticker. */
.ocv-figurina {
	width: 150px;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
	align-self: flex-start;
	border-radius: 18px;
	overflow: hidden;
	background: var(--ocv-fill);
	box-shadow: var(--ocv-shadow-card);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocv-figurina img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ocv-figurina--empty {
	background: color-mix(in srgb, var(--fig-color) 14%, white);
	border: 1.5px solid color-mix(in srgb, var(--fig-color) 30%, transparent);
}

/* Flag C.U.: bordo nero attorno alla figurina (foto o iniziali). */
.ocv-figurina--cu {
	border: 3px solid #1a1a2e;
}

.ocv-figurina__initials {
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fig-color);
}

@media (max-width: 460px) {
	.ocv-figurina { width: 112px; }
	.ocv-figurina__initials { font-size: 34px; }
}

/* Photo control in the athlete form (preview + upload / camera buttons). */
.ocv-photoctrl {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 0.5px solid var(--ocv-hairline);
}

.ocv-photoctrl__preview {
	width: 96px;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ocv-fill);
	border: 1.5px dashed var(--ocv-hairline-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s var(--ocv-ease), background 0.15s var(--ocv-ease);
}

.ocv-photoctrl__preview.is-drag { border-color: var(--ocv-primary); background: var(--ocv-primary-tint); }
.ocv-photoctrl__preview.is-loading { opacity: 0.6; }
.ocv-photoctrl__preview img { width: 100%; height: 100%; object-fit: cover; }
.ocv-photoctrl__ph svg { width: 34px; height: 34px; color: var(--ocv-text-3); }
.ocv-photoctrl__side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ocv-photoctrl__label { font-size: 13px; font-weight: 600; color: var(--ocv-text-2); }
.ocv-photoctrl__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ocv-photoctrl__hint { font-size: 12.5px; color: var(--ocv-text-3); }

/* Form laid out as blocks — mirrors the athlete sheet's section cards. */
.ocv-formblocks { display: flex; flex-direction: column; gap: 13px; }

.ocv-formsec {
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	overflow: hidden;
}

.ocv-formsec__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	background: var(--ocv-fill);
	border-bottom: 0.5px solid var(--ocv-hairline);
}

.ocv-formsec__icon { width: 20px; height: 20px; color: var(--ocv-primary); flex-shrink: 0; }
.ocv-formsec__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.ocv-formsec__body { padding: 14px 16px 18px; }
/* The section's own bottom padding gives the spacing, so the last element (be it
   a field, a grid of fields, the guardians editor or a select) drops its own
   trailing margin — keeping every section evenly padded at the bottom. */
.ocv-formsec__body > *:last-child { margin-bottom: 0; }
.ocv-formsec__body > *:last-child .ocv-field { margin-bottom: 0; }
.ocv-formsec__hint { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--ocv-muted); }

/* Riga di pulsanti in evidenza nel dettaglio squadra: Allenamento/Statistiche/
   Campionato (fuori dalla barra in alto, per non ingolfarla). */
.ocv-teamtiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}
.ocv-teamtile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 10px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	color: var(--ocv-text);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}
.ocv-teamtile:hover { background: var(--ocv-fill); }
.ocv-teamtile:active { transform: scale(0.98); }
.ocv-teamtile__ic { width: 26px; height: 26px; color: var(--ocv-primary); }
.ocv-teamtile__ic svg { width: 100%; height: 100%; }
.ocv-teamtile__lbl { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
@media (max-width: 480px) {
	.ocv-teamtiles { gap: 8px; }
	.ocv-teamtile { padding: 14px 6px; }
	.ocv-teamtile__lbl { font-size: 13px; }
}

/* Embed TuttoCampo (iframe responsive) nella pagina Campionato. */
.ocv-champembed { width: 100%; }
.ocv-champembed iframe { width: 100%; max-width: 100%; border: 0; display: block; }

/* Repeatable guardians editor (in the form). */
.ocv-guardctrl { display: flex; flex-direction: column; gap: 12px; }
.ocv-guardctrl__list { display: flex; flex-direction: column; gap: 12px; }

.ocv-guardctrl__row {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 12px;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-fill);
}

.ocv-guardctrl__fields {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 560px) { .ocv-guardctrl__fields { grid-template-columns: 1fr; } }

/* Guardians list on the athlete sheet. */
.ocv-guardians { display: flex; flex-direction: column; }
.ocv-guardian__title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ocv-guardian__contacts { margin-top: 3px; font-size: 15px; color: var(--ocv-text-2); word-break: break-word; }
.ocv-guardian__cf { margin-top: 3px; font-size: 14px; color: var(--ocv-text-2); letter-spacing: 0.02em; }
.ocv-guardians .ocv-guardian + .ocv-guardian { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--ocv-hairline); }
.ocv-guardian { display: flex; align-items: center; gap: 12px; }
.ocv-guardian__main { flex: 1; min-width: 0; }
.ocv-guardian__acts { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Form: guardian row stacks name/relationship, then email, then phone + toggle. */
.ocv-guardctrl__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ocv-guardctrl__phone { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocv-guardctrl__phone > *:first-child { flex: 1; min-width: 160px; }
/* Righe con più di un campo testo (es. email + telefono): tutti gli input si
   spartiscono lo spazio invece che solo il primo — una riga sola, non due. */
.ocv-guardctrl__phone > input { flex: 1; min-width: 130px; }

/* Riga extra SOLO sulla prima riga (il dichiarante): nascita, per
   l'autocertificazione stato di famiglia — evidenziata per distinguerla dagli
   altri campi anagrafici del genitore. */
.ocv-guardctrl__declarant {
	margin-top: 2px;
	padding-top: 10px;
	border-top: 1px dashed var(--ocv-hairline);
}
.ocv-guardctrl__declarant-lab {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ocv-accent, #5e5ce6);
	margin-bottom: 6px;
}

/* Athlete form: phone input with the "Ha WhatsApp" toggle beside it, centred. */
.ocv-phonerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ocv-phonerow > *:first-child { flex: 1; min-width: 180px; }

/* The WhatsApp toggle next to a phone: bare tick + label, no boxed background,
   its height matches the input so it lines up with the field on its left. */
.ocv-phonerow .ocv-check,
.ocv-guardctrl__phone .ocv-check {
	background: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
	/* NON var(--ocv-touch) (58px, per un tocco isolato): qui deve restare alto
	   come l'input a fianco (40px), altrimenti pur partendo dallo stesso bordo
	   superiore sembra sfalsato verso il basso. */
	min-height: 40px;
}
.ocv-phonerow .ocv-check.is-on,
.ocv-guardctrl__phone .ocv-check.is-on {
	background: none;
}

/* "Contattare": quick action under the identity card + the contact dialog. Solo
   mobile: su desktop c'è già lo stesso pulsante in alto a destra nella card. */
.ocv-idcard__actions { display: flex; }
.ocv-idcard__actions .ocv-btn { width: 100%; }
@media (min-width: 561px) {
	.ocv-idcard__actions { display: none; }
}

.ocv-contactlist { display: flex; flex-direction: column; }
.ocv-contactrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 0;
}
.ocv-contactrow + .ocv-contactrow { border-top: 0.5px solid var(--ocv-hairline); }
.ocv-contactrow__name { font-size: 16px; font-weight: 600; }
.ocv-contactrow__sub { margin-top: 2px; font-size: 13px; color: var(--ocv-text-2); }
.ocv-contactrow__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Payment row: amount stacked over its status tag, to free width for the name. */
.ocv-payamt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

/* The Nuovo pagamento / Sollecita actions — full-width buttons on a phone. */
.ocv-payactions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--ocv-gap); }
/* Variante dentro la card atleta: nessun margine sotto, separatore in alto. */
.ocv-payactions--incard { margin-bottom: 0; margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--ocv-hairline); }
@media (max-width: 640px) {
	.ocv-payactions { flex-direction: column; }
	.ocv-payactions .ocv-btn { width: 100%; min-height: 50px; justify-content: center; }
}

/* Photo + name + team header, with the outstanding total on the right. Wrap
   allowed: se la card identità porta 2 azioni contestuali (es. Modulistica:
   "Sollecita firma" + "Dati mancanti"), su schermi stretti vanno a capo sotto
   nome/squadra invece di traboccare. */
.ocv-idstrip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ocv-idstrip__photo { position: relative; flex-shrink: 0; }
.ocv-idstrip__photo .ocv-btn {
	position: absolute;
	bottom: -6px;
	right: -6px;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.ocv-idstrip__photo .ocv-btn svg { width: 13px; height: 13px; }
.ocv-idstrip__text { flex: 1; min-width: 0; }
.ocv-idstrip .ocv-initials { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; font-size: 18px; }
.ocv-idstrip__name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.ocv-idstrip__team { margin-top: 2px; font-size: 14px; color: var(--ocv-text-2); }

.ocv-idstrip--lg { gap: 16px; padding: 2px; }
.ocv-idstrip--lg .ocv-initials { width: 62px; height: 62px; border-radius: 17px; font-size: 22px; }
.ocv-idstrip--lg .ocv-idstrip__name { font-size: 22px; }
.ocv-idstrip--lg .ocv-idstrip__team { font-size: 15px; }

/* Due azioni contestuali fianco a fianco nell'angolo della card identità
   (Modulistica: "Sollecita firma" + "Dati mancanti"). */
.ocv-idstrip__cta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.ocv-idtotal { text-align: right; flex-shrink: 0; }
.ocv-idtotal__label { font-size: 12px; color: var(--ocv-text-2); }
.ocv-idtotal__value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ocv-idtotal--due .ocv-idtotal__value { color: var(--ocv-red); }
.ocv-idtotal--ok .ocv-idtotal__value { color: var(--ocv-green); }

/* Riga "arretrato" + "Nuovo pagamento" in Amministrazione: totale a sinistra
   (allineato a sinistra qui, non a destra come nella card identità), pulsante
   a destra. Nome diverso da .ocv-payrow (già usata dal popup di incasso) per
   non entrare in conflitto. */
.ocv-admintotal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ocv-admintotal-row .ocv-idtotal { text-align: left; }

/* Editable default message on top of the "Sollecita pagamento" panel. */
.ocv-contactmsg { margin-bottom: 14px; }
.ocv-contactmsg__label { font-size: 13px; font-weight: 600; color: var(--ocv-text-2); margin-bottom: 6px; }
.ocv-contactmsg .ocv-textarea { width: 100%; }

/* Athlete detail hub: big buttons to each area. */
.ocv-hub {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 14px;
}

@media (min-width: 700px) {
	.ocv-hub { grid-template-columns: 1fr 1fr; }
}

/* Stats hub: three big feature cards (like the home dashboard), one per area. */
.ocv-stathub {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 14px;
}
.ocv-statbig {
	position: relative;
	overflow: hidden;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 0;
	border-radius: var(--ocv-radius-lg);
	color: #fff;
	cursor: pointer;
	text-align: left;
	font: inherit;
	box-shadow: var(--ocv-shadow-card);
	transition: transform 0.2s var(--ocv-ease), box-shadow 0.2s var(--ocv-ease);
}
.ocv-statbig:hover { transform: translateY(-2px); box-shadow: var(--ocv-shadow-pop); }
.ocv-statbig--finance { background: linear-gradient(135deg, #1b3966 0%, #2f63ad 100%); }
.ocv-statbig--attendance { background: linear-gradient(135deg, #0b5b63 0%, #17a2b8 100%); }
.ocv-statbig--athletes { background: linear-gradient(135deg, #b4530a 0%, #f0910f 100%); }
/* Big faint watermark of the section icon in the corner. */
.ocv-statbig__art {
	position: absolute;
	right: -18px;
	bottom: -22px;
	opacity: 0.16;
	pointer-events: none;
}
.ocv-statbig__art svg { width: 150px; height: 150px; color: #fff; }
.ocv-statbig__icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.2);
}
.ocv-statbig__icon svg { width: 27px; height: 27px; color: #fff; }
.ocv-statbig__title { position: relative; z-index: 1; margin-top: auto; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.ocv-statbig__desc { position: relative; z-index: 1; font-size: 14px; color: rgba(255, 255, 255, 0.9); max-width: 88%; }
.ocv-statbig__go { position: absolute; top: 24px; right: 22px; width: 22px; height: 22px; color: rgba(255, 255, 255, 0.85); z-index: 1; }

.ocv-hubbtn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	text-align: left;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer;
	font: inherit;
	color: var(--ocv-text);
	transition: transform 0.15s var(--ocv-ease), border-color 0.15s var(--ocv-ease);
}

.ocv-hubbtn:hover { transform: translateY(-1px); border-color: var(--ocv-hairline-strong); }

.ocv-hubbtn__icon {
	width: 54px;
	height: 54px;
	border-radius: 15px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocv-hubbtn__icon svg { width: 28px; height: 28px; }
.ocv-hubbtn--blue .ocv-hubbtn__icon { background: var(--ocv-blue-tint); color: var(--ocv-blue); }
.ocv-hubbtn--amber .ocv-hubbtn__icon { background: var(--ocv-amber-tint); color: var(--ocv-amber); }
.ocv-hubbtn--teal .ocv-hubbtn__icon { background: var(--ocv-teal-tint); color: var(--ocv-teal); }
.ocv-hubbtn--red .ocv-hubbtn__icon { background: var(--ocv-red-tint); color: var(--ocv-red); }
.ocv-hubbtn--green .ocv-hubbtn__icon { background: var(--ocv-green-tint); color: color-mix(in srgb, var(--ocv-green) 72%, black); }
.ocv-hubbtn--purple .ocv-hubbtn__icon { background: var(--ocv-purple-tint); color: var(--ocv-purple); }
/* Scheda atleta (.ocv-hub--mono): icone tutte monocromatiche nel colore brand,
   come i pulsanti piccoli della barra in basso. Vince sulle regole per-colore
   qui sopra (specificità con 3 classi). Le Statistiche restano a colori. */
.ocv-hub--mono .ocv-hubbtn--blue .ocv-hubbtn__icon,
.ocv-hub--mono .ocv-hubbtn--amber .ocv-hubbtn__icon,
.ocv-hub--mono .ocv-hubbtn--teal .ocv-hubbtn__icon,
.ocv-hub--mono .ocv-hubbtn--red .ocv-hubbtn__icon,
.ocv-hub--mono .ocv-hubbtn--green .ocv-hubbtn__icon,
.ocv-hub--mono .ocv-hubbtn--purple .ocv-hubbtn__icon,
.ocv-hub--mono .ocv-hubbtn__icon {
	background: var(--ocv-primary-tint);
	color: var(--ocv-primary);
}
/* Titoli tessere più leggeri (600) come i pulsanti bianchi della home, invece
   del 700 che sembrava troppo in grassetto. */
.ocv-hub--mono .ocv-hubbtn__title { font-weight: 600; }
.ocv-hubbtn__text { flex: 1; min-width: 0; }
.ocv-hubbtn__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.ocv-hubbtn__desc { margin-top: 2px; font-size: 13.5px; color: var(--ocv-text-2); }
.ocv-hubbtn__go { width: 20px; height: 20px; color: var(--ocv-text-3); flex-shrink: 0; }

/* Indicatore sul lato destro della tessera (percentuale, stato tesseramento,
   badge d'allerta, numero ordini/attività): sempre a destra e CENTRATO in
   verticale (il testo ha flex:1 e lo spinge a destra; il pulsante è align-center). */
.ocv-hubbtn__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.ocv-hubcount {
	min-width: 26px; height: 26px; padding: 0 9px;
	border-radius: 999px;
	background: var(--ocv-primary-tint); color: var(--ocv-primary);
	font-size: 14px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center;
}

/* Hub della scheda atleta a TRE COLONNE (richiesta Matteo): tessere compatte
   icona-sopra + titolo, badge d'allerta nell'angolo. Vince sul .ocv-hub
   flex-column definito più sotto grazie alla maggiore specificità (.ocv-hub--grid). */
.ocv-hub.ocv-hub--grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
/* Tessere con ICONA A SINISTRA (come i pulsanti in home): icona nel riquadro
   tinto a sx, titolo accanto. Compatte per stare in tre colonne. */
.ocv-hub--grid .ocv-hubbtn {
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 11px;
	padding: 13px 14px;
}
.ocv-hub--grid .ocv-hubbtn__icon { width: 42px; height: 42px; border-radius: 12px; }
.ocv-hub--grid .ocv-hubbtn__icon svg { width: 22px; height: 22px; }
.ocv-hub--grid .ocv-hubbtn__text { flex: 1; min-width: 0; }
.ocv-hub--grid .ocv-hubbtn__title { font-size: 15px; line-height: 1.15; }
.ocv-hub--grid .ocv-hubbtn__desc { display: none; }
.ocv-hub--grid .ocv-hubbtn__go { display: none; }
/* Su telefono tre colonne con icona-sinistra sarebbero troppo strette: una colonna. */
@media (max-width: 560px) {
	.ocv-hub.ocv-hub--grid { grid-template-columns: 1fr; }
}

.ocv-subnav { margin-bottom: 6px; }

/* Detail header: back / double-jump controls, kept in the fixed top bar. */
/* La nav interna delle intestazioni (Home + Indietro) NON si mostra più: Home e
   Indietro vengono forniti dalla barra globale (navbar__side) in posizione fissa
   su tutte le pagine, così non "saltano" fra una pagina e l'altra. Le pagine di
   dettaglio possono continuare a costruirla: resta nel DOM ma nascosta. */
.ocv-page-head__nav { display: none; }

/* Athletes list: each row is its own separated card, a touch taller. */
.ocv-listbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.ocv-listbar__count { font-size: 15px; font-weight: 700; }
.ocv-listbar__total { font-size: 14px; color: var(--ocv-text-2); }
.ocv-listbar__total strong { color: var(--ocv-red); font-size: 15px; margin-left: 2px; }

/* Square quick-contact button on a finances row. */
.ocv-rowcontact {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0.5px solid color-mix(in srgb, var(--ocv-green) 30%, transparent);
	border-radius: 12px;
	background: var(--ocv-green-tint);
	color: var(--ocv-green);
	cursor: pointer;
	transition: background 0.15s var(--ocv-ease), border-color 0.15s var(--ocv-ease);
}
.ocv-rowcontact:hover { background: color-mix(in srgb, var(--ocv-green) 18%, var(--ocv-surface)); border-color: var(--ocv-green); }
.ocv-rowcontact svg { width: 20px; height: 20px; }

/* Activity fee-tier editor (create/edit activity form). */
.ocv-tiers { display: flex; flex-direction: column; gap: 8px; }
.ocv-tiers__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ocv-tiers__title { font-weight: 600; }
.ocv-tierrow { display: flex; gap: 10px; align-items: flex-end; }
.ocv-tierrow__label { flex: 2; min-width: 0; }
.ocv-tierrow__price { flex: 1; min-width: 0; }
/* Drop the field's own bottom margin here so the input's bottom (not the taller
   cell's) is what the delete control lines up with. */
.ocv-tierrow .ocv-field { margin-bottom: 0; }
/* The delete control is a plain icon (not a boxed button), the same height as the
   inputs so it sits perfectly on their line; subtle, red on hover. */
.ocv-tierrow > button {
	flex-shrink: 0;
	align-self: flex-end;
	width: 44px;
	height: var(--ocv-touch);
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	color: var(--ocv-text-3);
	border-radius: 10px;
}
.ocv-tierrow > button:hover { background: var(--ocv-red-tint); color: var(--ocv-red); }
.ocv-tierrow > button svg { width: 19px; height: 19px; }

/* Activity participants: per-athlete, per-tier quantity editor. */
.ocv-candlist { display: flex; flex-direction: column; }
.ocv-candrow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 0.5px solid var(--ocv-hairline); flex-wrap: wrap; }
.ocv-candrow:last-child { border-bottom: none; }
.ocv-candrow__who { flex: 1; min-width: 140px; }
.ocv-candrow__name { font-weight: 600; font-size: 15px; }
.ocv-candrow__team { font-size: 12px; color: var(--ocv-text-2); }
.ocv-candrow__tiers { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ocv-candrow > .ocv-money { min-width: 76px; text-align: right; font-weight: 600; }
.ocv-qty { display: flex; flex-direction: column; gap: 2px; }
.ocv-qty__lab { font-size: 11.5px; color: var(--ocv-text-2); }
.ocv-qty__ctl { display: inline-flex; align-items: center; gap: 4px; border: 0.5px solid var(--ocv-hairline); border-radius: 10px; padding: 2px; }
.ocv-qty__ctl button { min-width: 30px; padding: 4px 8px; }
.ocv-qty__val { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ocv-listbar__actions { display: inline-flex; align-items: center; gap: 8px; }

/* Society financial summary cards — general manager / super admin only. */
.ocv-fincards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
/* At most four columns, comfortably wide (never cramped). */
@media (min-width: 720px) { .ocv-fincards { grid-template-columns: repeat(4, 1fr); } }
.ocv-fincard {
	background: var(--ocv-surface);
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-lg);
	box-shadow: var(--ocv-shadow-card);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ocv-fincard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ocv-fincard__label { font-size: 13px; font-weight: 600; color: var(--ocv-text-2); }
.ocv-fincard__icon { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ocv-fincard__icon svg { width: 21px; height: 21px; }
.ocv-fincard__value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ocv-text); }
.ocv-fincard__hint { font-size: 12.5px; color: var(--ocv-text-3); }

/* Discreet coloured accent per card (icon chip + meaningful value tint). */
.ocv-fincard--due .ocv-fincard__icon { background: var(--ocv-amber-tint); color: var(--ocv-amber); }
.ocv-fincard--overdue .ocv-fincard__icon { background: var(--ocv-red-tint); color: var(--ocv-red); }
.ocv-fincard--overdue .ocv-fincard__value { color: var(--ocv-red); }
.ocv-fincard--paid .ocv-fincard__icon { background: var(--ocv-green-tint); color: var(--ocv-green); }
.ocv-fincard--paid .ocv-fincard__value { color: var(--ocv-green); }
.ocv-fincard--total .ocv-fincard__icon { background: var(--ocv-blue-tint); color: var(--ocv-blue); }

/* Card "principale" (Incassato stagione): occupa due colonne e ha il numero più
   grande, così è l'elemento fondamentale che salta all'occhio. */
.ocv-fincard--hero { grid-column: span 2; }
.ocv-fincard--hero .ocv-fincard__value { font-size: 34px; }

.ocv-cardlist { display: flex; flex-direction: column; gap: 10px; }

/* Every row becomes its own separated card. `--athletes` adds the athlete avatar
   specifics; `--cards` is the generic look reused by other lists (teams, staff…). */
.ocv-cardlist--athletes .ocv-row,
.ocv-cardlist--cards .ocv-row {
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	box-shadow: var(--ocv-shadow-card);
	padding: 14px 16px;
	min-height: 0;
}

.ocv-cardlist--athletes .ocv-row + .ocv-row::before,
.ocv-cardlist--cards .ocv-row + .ocv-row::before { display: none; }

/* Rotondo come ovunque altro nel sito (richiesta di Matteo: era l'unico posto
   rimasto quadrato con angoli arrotondati, tra gli elenchi con l'avatar). */
.ocv-cardlist--athletes .ocv-initials { width: 50px; height: 50px; border-radius: 50%; }

/* Direct-access icon buttons: coloured like the hub, spaced, with a badge. */
.ocv-rowactions { display: inline-flex; align-items: center; gap: 8px; }

.ocv-rowact {
	position: relative;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: filter 0.15s var(--ocv-ease);
}

.ocv-rowact svg { width: 20px; height: 20px; }
.ocv-rowact:hover { filter: brightness(0.95); }
.ocv-rowact--blue { background: var(--ocv-blue-tint); color: var(--ocv-blue); }
.ocv-rowact--amber { background: var(--ocv-amber-tint); color: var(--ocv-amber); }
.ocv-rowact--teal { background: var(--ocv-teal-tint); color: var(--ocv-teal); }

.ocv-rowact__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--ocv-red);
	border: 2px solid var(--ocv-surface);
}

/* Certificate alert as a coloured icon: red/pink expired, ochre/yellow expiring. */
.ocv-certbadge { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ocv-certbadge svg { width: 18px; height: 18px; }

.ocv-certbadge--expired {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	justify-content: center;
	background: var(--ocv-red);
	color: #fff;
}

.ocv-certbadge--expiring {
	height: 34px;
	padding: 0 10px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-amber);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.ocv-certbadge--overdue {
	height: 34px;
	padding: 0 10px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-red-tint);
	color: var(--ocv-red);
	font-size: 13px;
	font-weight: 700;
}

.ocv-certbadge__days { line-height: 1; }

/* Player statistics: current season big, past seasons in small boxes. */
.ocv-statseason__title { font-size: 14px; font-weight: 600; color: var(--ocv-text-2); margin-bottom: 8px; }
.ocv-pastseasons { margin-top: 18px; }
.ocv-pastseasons__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ocv-text-3);
	font-weight: 600;
	margin-bottom: 8px;
}
.ocv-pastseasons__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ocv-pastbox { padding: 10px 12px; border-radius: var(--ocv-radius-sm); background: var(--ocv-fill); }
.ocv-pastbox__year { font-size: 16px; font-weight: 700; }
.ocv-pastbox__stats { margin-top: 3px; font-size: 13px; }
.ocv-pastbox__sub { margin-top: 1px; font-size: 12px; color: var(--ocv-text-3); }

/* Match roster stat editor. */
.ocv-roster__head { font-size: 12px; color: var(--ocv-text-3); margin-bottom: 8px; }
.ocv-roster { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.ocv-roster__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-fill);
}
.ocv-roster__name { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-roster__fields { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ocv-roster__fields .ocv-select { min-width: 104px; padding-right: 34px; }
.ocv-roster__num { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; font-weight: 600; color: var(--ocv-text-3); }
.ocv-roster__num input { width: 46px; text-align: center; padding: 6px 4px; }
.ocv-roster__guest {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-accent-tint);
	color: var(--ocv-accent);
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}
.ocv-roster__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ocv-red);
	cursor: pointer;
}
.ocv-roster__remove:hover { background: var(--ocv-red-tint); }
.ocv-roster__remove svg { width: 16px; height: 16px; }
.ocv-roster__add { margin-top: 14px; }

/* Simplified, touch-friendly referto row: big name + absent toggle + a stats
   button that opens the goal/assist/cards popup. */
.ocv-rrow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--ocv-radius);
	background: var(--ocv-fill);
	text-align: left;
	font: inherit;
	color: var(--ocv-text);
	cursor: pointer;
	transition: background 0.15s var(--ocv-ease);
}
button.ocv-rrow:hover { background: var(--ocv-fill-strong, #e6e9ee); }
.ocv-rrow.is-absent { opacity: 0.6; }
.ocv-rrow { flex-wrap: wrap; }
.ocv-rrow__main { flex: 1; min-width: 0; }
.ocv-rrow__name { min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.25; }
.ocv-rrow__sub { font-size: 13px; color: var(--ocv-text-2); margin-top: 2px; }
/* The match-stat strip drops to its own full-width line under the name. */
.ocv-rrow__strip { flex-basis: 100%; margin-top: 8px; }
@media (min-width: 1000px) {
	/* Desktop: keep stats inline on the right side, larger. */
	.ocv-rrow { align-items: center; flex-wrap: nowrap; }
	.ocv-rrow__main { min-width: auto; }
	.ocv-rrow__strip { flex-basis: auto; margin-top: 0; margin-left: auto; }
}
/* Round "open menu" button on the right of a referto row. */
.ocv-rrow__open {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--ocv-border);
	background: var(--ocv-surface);
	color: var(--ocv-text-2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.ocv-rrow__open:hover { background: var(--ocv-fill); }
.ocv-rrow__open svg { width: 20px; height: 20px; }
.ocv-rrow__end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ocv-rrow__chev { width: 20px; height: 20px; color: var(--ocv-text-3); flex-shrink: 0; }
.ocv-rrow__tag { font-size: 14px; font-weight: 700; color: var(--ocv-red); }
.ocv-rrow__chips { display: inline-flex; align-items: center; gap: 10px; }
.ocv-rchip { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--ocv-text-2); }
.ocv-rchip svg { width: 16px; height: 16px; color: var(--ocv-text-3); }

/* Player panel: full-width "assente" toggle, then the steppers. */
.ocv-ppanel { display: flex; flex-direction: column; gap: 4px; }
.ocv-absentbtn {
	width: 100%;
	padding: 14px;
	margin-bottom: 6px;
	border: 1px solid var(--ocv-hairline-strong);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	color: var(--ocv-text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.ocv-absentbtn.is-on { background: var(--ocv-red); border-color: var(--ocv-red); color: #fff; }
.ocv-rchip__lbl { font-weight: 800; color: var(--ocv-text-3); }

/* Player stats popup: labelled steppers with big tap targets. */
.ocv-statpop { display: flex; flex-direction: column; }
.ocv-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--ocv-hairline); }
.ocv-stepper:last-child { border-bottom: 0; }
.ocv-stepper__lbl { font-size: 16px; font-weight: 600; }
.ocv-stepper__ctrl { display: flex; align-items: center; gap: 16px; }
.ocv-stepper__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ocv-hairline-strong);
	background: var(--ocv-surface);
	color: var(--ocv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ocv-stepper__btn:active { background: var(--ocv-fill); }
.ocv-stepper__btn svg { width: 20px; height: 20px; }
.ocv-stepper__val { font-size: 22px; font-weight: 700; min-width: 26px; text-align: center; }

/* Partite: sections, team dropdown, match cards, next-match card. */
.ocv-matchsec { margin-bottom: 26px; }
.ocv-matchsec__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ocv-text-2); }

.ocv-teamselect { min-width: 210px; }

/* Matches home: the team picker is centred and a bit larger to stand out. */
.ocv-matchpicker { display: flex; justify-content: center; margin-bottom: 22px; }
.ocv-matchpicker .ocv-teamfilter-host { max-width: none; }
.ocv-matchpicker .ocv-teamfilter { min-height: 64px; padding: 0 26px; font-size: 17px; gap: 12px; }
.ocv-matchpicker .ocv-teamfilter__icon { width: 22px; height: 22px; }
.ocv-matchpicker .ocv-teamfilter__chev { width: 20px; height: 20px; }

/* Attendance: green-by-default. Each row carries a Presente/Assente pill and
   the row itself tints green (present) or red (absent) so a confirmed sheet
   reads at a glance. */
.ocv-attmark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: var(--ocv-pill);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}
.ocv-attmark svg { width: 16px; height: 16px; }
.ocv-attmark.is-present { background: var(--ocv-green-tint, #e6f6ec); border-color: color-mix(in srgb, var(--ocv-green) 35%, transparent); color: var(--ocv-green); }
.ocv-attmark.is-absent { background: var(--ocv-red); border-color: var(--ocv-red); color: #fff; }
.ocv-attmark.is-unset { background: var(--ocv-fill); border-color: var(--ocv-hairline); color: var(--ocv-text-3); }

.ocv-row.is-present { background: color-mix(in srgb, var(--ocv-green) 6%, var(--ocv-surface)); }
.ocv-row.is-absent { background: color-mix(in srgb, var(--ocv-red) 6%, var(--ocv-surface)); }
.ocv-row.is-absent .ocv-row__title { color: var(--ocv-text-2); }

/* Attendance header: a short centred message and compact centred counters.
   Built mobile-first — this screen is used on a phone pitch-side. */
.ocv-atthead { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; text-align: center; }
.ocv-attmsg { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ocv-text-2); }
.ocv-attmsg svg { width: 18px; height: 18px; }
.ocv-attmsg--ok { color: var(--ocv-green); }

/* Presenti / Assenti scoreboard: one compact centred box, big numbers. */
.ocv-attscore {
	display: inline-flex;
	align-items: center;
	gap: 26px;
	padding: 14px 30px;
	border: 1px solid var(--ocv-border);
	border-radius: var(--ocv-radius-lg, 20px);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
}
.ocv-attscore__side { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ocv-attscore__num { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; }
.ocv-attscore__lbl { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ocv-text-3); margin-top: 7px; }
.ocv-attscore__side.is-present .ocv-attscore__num { color: var(--ocv-green); }
.ocv-attscore__side.is-absent .ocv-attscore__num { color: var(--ocv-red); }
.ocv-attscore__sep { font-size: 34px; font-weight: 700; color: var(--ocv-text-3); }

/* Spacer so the last athlete clears the fixed action bar while scrolling. */
.ocv-attspacer { height: 92px; }

/* Confirm / reset actions: a bottom sheet fixed to the window, full width, with
   rounded top corners — always visible, so on a phone the coach sees the button
   light up the moment someone is marked absent. */
.ocv-attactions {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	background: var(--ocv-surface);
	border-top: 1px solid var(--ocv-border);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
}
.ocv-attactions__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}
.ocv-attactions__inner > .ocv-btn:not(.ocv-btn--icon) { flex: 1; justify-content: center; }
/* Mobile: la barra azioni presenze sta SOPRA la barra di navigazione in basso,
   così "Conferma presenze" non viene coperto. */
@media (max-width: 640px) {
	.ocv-attactions {
		bottom: calc(60px + env(safe-area-inset-bottom, 0px));
		padding: 12px 12px;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
	}
	.ocv-attactions__inner { gap: 8px; }
	/* i pulsanti con testo si stringono così il cestino entra sempre */
	.ocv-attactions__inner > .ocv-btn:not(.ocv-btn--icon) { min-width: 0; padding-left: 10px; padding-right: 10px; }
	.ocv-attspacer { height: 150px; }
}

/* Upcoming matches as a three-column card grid. */
.ocv-matchcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ocv-matchcards--two { grid-template-columns: repeat(2, 1fr); }
/* Match lists read full-width, one card per row (richiesta Matteo). */
.ocv-matchcards--one { grid-template-columns: 1fr; }

/* ---- Redesigned match card (crests · score/VS · date·time·place) ---- */
.ocv-mcard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	padding: 18px 20px 20px;
	background: var(--ocv-surface);
	border: 1px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-lg);
	text-align: center;
	cursor: pointer;
	font: inherit;
	color: var(--ocv-text);
}
.ocv-mcard:hover { border-color: var(--ocv-hairline-strong); }

.ocv-mcard__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.ocv-mcard__comp { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ocv-mcard__comptext { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--ocv-text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ocv-mcard__comptext--team { flex-shrink: 0; }
.ocv-mcard__compsep { font-size: 13px; font-weight: 800; color: var(--ocv-text-3); }

.ocv-mcard__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ocv-mcard__team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ocv-mcard__team--left { justify-content: flex-start; }
.ocv-mcard__team--right { justify-content: flex-end; }
.ocv-mcard__crest { width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ocv-mcard__crest img, .ocv-mcard__crest svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.ocv-mcard__name { font-size: 21px; font-weight: 800; line-height: 1.05; min-width: 0; }
.ocv-mcard__team--left .ocv-mcard__name { text-align: left; }
.ocv-mcard__team--right .ocv-mcard__name { text-align: right; }

.ocv-mcard__center { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ocv-mcard__bar { width: 1px; height: 46px; background: var(--ocv-hairline); }
.ocv-mcard__score { display: flex; align-items: center; gap: 12px; }
.ocv-mcard__num { font-size: 46px; font-weight: 800; line-height: 1; }
.ocv-mcard__num--our { color: var(--ocv-green); }
.ocv-mcard__num--opp { color: var(--ocv-text-3); }
.ocv-mcard__dash { font-size: 32px; color: var(--ocv-text-3); }
.ocv-mcard__vs { font-size: 26px; font-weight: 800; color: var(--ocv-text-3); letter-spacing: 0.02em; }

.ocv-mcard__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--ocv-hairline); }
.ocv-mcard__metaitem { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; }
.ocv-mcard__icon { width: 20px; height: 20px; color: var(--ocv-primary); flex-shrink: 0; }

@media (max-width: 560px) {
	.ocv-mcard { padding: 14px 10px 16px; gap: 10px; }
	.ocv-mcard__main { gap: 6px; }
	/* Stack crest over name so the long club name never crowds the score;
	   the opponent's name sits under its shield too (crest on top both sides). */
	.ocv-mcard__team { flex-direction: column; gap: 6px; text-align: center; }
	.ocv-mcard__team--right { flex-direction: column-reverse; }
	.ocv-mcard__team--left, .ocv-mcard__team--right { justify-content: center; }
	.ocv-mcard__crest { width: 46px; height: 46px; }
	.ocv-mcard__name,
	.ocv-mcard__team--left .ocv-mcard__name,
	.ocv-mcard__team--right .ocv-mcard__name { font-size: 14px; text-align: center; }
	.ocv-mcard__center { gap: 6px; }
	.ocv-mcard__num { font-size: 30px; }
	.ocv-mcard__dash { font-size: 22px; }
	.ocv-mcard__vs { font-size: 22px; }
	.ocv-mcard__bar { height: 40px; }
	.ocv-mcard__meta { gap: 4px; }
	.ocv-mcard__metaitem { flex-direction: column; gap: 3px; font-size: 12px; }
}
.ocv-matchcard {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-height: 150px;
	padding: 18px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-lg);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--ocv-text);
	transition: transform 0.2s var(--ocv-ease), box-shadow 0.2s var(--ocv-ease);
}
.ocv-matchcard:hover { transform: translateY(-2px); box-shadow: var(--ocv-shadow-pop); }
.ocv-matchcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ocv-matchcard__title { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.ocv-matchcard__opp { font-size: 14.5px; font-weight: 600; color: var(--ocv-text-2); margin-top: 2px; }
/* Both card kinds are scoreboards, so the town + date and the stats sit centred
   under the middle of the board. The town is the big line, the date sits under. */
.ocv-matchcard__place { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-align: center; margin-top: 10px; }
.ocv-matchcard__when { font-size: 14px; color: var(--ocv-text-2); text-align: center; margin-top: 8px; }
.ocv-matchcard__place + .ocv-matchcard__when { margin-top: 2px; }
.ocv-matchcard__stats { justify-content: center; }
.ocv-matchcard--full { justify-content: center; }

.ocv-scoreboard__venue { display: flex; align-items: center; justify-content: center; }
.ocv-scoreboard__venue svg { width: 30px; height: 30px; color: var(--ocv-text-2); }

.ocv-matchcard__score { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; flex-shrink: 0; }
.ocv-matchcard__score--win { color: var(--ocv-green); }
.ocv-matchcard__score--loss { color: var(--ocv-red); }
.ocv-matchcard__score--draw { color: var(--ocv-text-2); }
.ocv-matchcard__stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 12px; border-top: 0.5px solid var(--ocv-hairline); }
.ocv-matchcard__stat { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ocv-text-2); white-space: nowrap; }
.ocv-matchcard__stat svg { width: 17px; height: 17px; color: var(--ocv-text-3); }
.ocv-cardpip { width: 12px; height: 16px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.ocv-cardpip--y { background: #f2c94c; }
.ocv-cardpip--r { background: #e5484d; }

/* Next match: spans the full width on top and is outlined in the team colour. */
.ocv-matchcard--full { grid-column: 1 / -1; }
.ocv-matchcard--full .ocv-matchcard__title { font-size: 22px; }
.ocv-matchcard--highlight { box-shadow: var(--ocv-shadow-pop); }

/* Played match: a scoreboard — home team left, away right, result centred. */
.ocv-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ocv-scoreboard__team { font-size: 15px; font-weight: 700; color: var(--ocv-text); line-height: 1.15; word-break: break-word; }
.ocv-scoreboard__team--left { text-align: right; }
.ocv-scoreboard__team--right { text-align: left; }
.ocv-scoreboard__team.is-loss { color: var(--ocv-text-3); font-weight: 600; }
.ocv-scoreboard__score { display: flex; align-items: baseline; gap: 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.ocv-scoreboard__num { color: var(--ocv-text); }
.ocv-scoreboard__num.is-win { color: var(--ocv-green); }
.ocv-scoreboard__num.is-loss { color: var(--ocv-text-3); }
.ocv-scoreboard__dash { color: var(--ocv-text-3); font-weight: 700; }

@media (max-width: 860px) { .ocv-matchcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ocv-matchcards, .ocv-matchcards--two { grid-template-columns: 1fr; } }

/* Referto top row: match data (3/4) beside the result (1/4), same height —
   the shorter "Risultato" card stretches to match "Dati partita" and centres
   its content in the extra space instead of leaving it top-aligned. */
.ocv-referto__top { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 16px; align-items: stretch; }
.ocv-referto__info { min-width: 0; }
.ocv-referto__score { min-width: 0; }
.ocv-referto__top > div { display: flex; }
.ocv-referto__top > div > .ocv-card { flex: 1; display: flex; flex-direction: column; }
.ocv-referto__score .ocv-card__body { flex: 1; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
	/* Phone: single column — match data on top, result below. */
	.ocv-referto__top { grid-template-columns: 1fr; gap: 16px; }
	.ocv-referto__info { min-width: 0; }
	.ocv-referto__score { min-width: 0; }
	.ocv-referto__top > div > .ocv-card { flex: none; width: 100%; }
	.ocv-referto__score .ocv-card__body { flex: none; }
}

/* Numeric inputs (price, quantity) don't need a full-width box. */
.ocv-input--num { max-width: 150px; }
/* Quantity-per-size grid in the product form. */
.ocv-sizeqty-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ocv-sizeqty { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ocv-sizeqty__lbl { font-size: 13px; font-weight: 700; color: var(--ocv-text-2); }
.ocv-sizeqty .ocv-input--num { max-width: 74px; text-align: center; }

/* "Salva referto": a bar pinned to the bottom of the screen, always visible. */
.ocv-savebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	padding: 12px 16px;
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-top: 0.5px solid var(--ocv-hairline);
}
.ocv-savebar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}
.ocv-savebar__inner .ocv-btn { flex: 1; justify-content: center; }
.ocv-savebar-spacer { height: 84px; }

/* "Interessato" tag on a trial-player row (still deciding, not training yet). */
.ocv-trialtag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-amber-tint);
	color: var(--ocv-amber);
	font-size: 13px;
	font-weight: 700;
}

/* Collapsible "Dati partita" body (collapsed on phones). */
.ocv-infobody.is-collapsed { display: none; }
/* On desktop the card is always open, so hide the "Dettaglio partita" toggle there. */
@media (min-width: 761px) { .ocv-infotoggle { display: none; } }
.ocv-infotoggle.is-open svg { transform: rotate(180deg); }

/* Match-data card on the referto (shareable info, no stats). */
.ocv-matchinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.ocv-matchinfo__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 0.5px solid var(--ocv-hairline);
}
.ocv-matchinfo__k { color: var(--ocv-text-3); font-size: 14px; flex-shrink: 0; }
.ocv-matchinfo__v { font-weight: 700; font-size: 16px; text-align: right; }
@media (max-width: 560px) { .ocv-matchinfo { grid-template-columns: 1fr; } }

/* The result box compacts to fit the quarter-width column. */
/* Big vertical score steppers: label · + · number · − for each team. */
.ocv-scorebox { display: flex; align-items: flex-start; justify-content: center; gap: 10px; padding: 6px 0; }
.ocv-scorebox__sep { font-size: 40px; font-weight: 700; color: var(--ocv-text-3); align-self: flex-start; margin-top: 150px; flex-shrink: 0; }
/* Equal-width columns so the two numbers stay symmetric even when one team name
   is much longer than the other. */
.ocv-scorestep { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.ocv-scorestep__crest { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ocv-scorestep__crest img, .ocv-scorestep__crest svg { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Fixed to a 2-line height so the +/− buttons stay level even when only one
   of the two names wraps (e.g. a long opponent name vs. a short one). */
.ocv-scorestep__team { font-size: 14px; font-weight: 700; color: var(--ocv-text-2); text-align: center; max-width: 130px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.ocv-scorestep__num { font-size: 52px; font-weight: 800; line-height: 1; min-width: 64px; text-align: center; color: var(--ocv-text); }
.ocv-scorestep__btns { display: flex; gap: 8px; align-items: center; justify-content: center; }
.ocv-scorestep__btn { width: 64px; height: 40px; border: 0; border-radius: 12px; background: var(--ocv-fill); color: var(--ocv-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ocv-scorestep__btn:hover { background: var(--ocv-fill-2); }
.ocv-scorestep__btn:disabled { opacity: 0.35; cursor: default; }
.ocv-scorestep__btn svg { width: 24px; height: 24px; }
.ocv-referto__score .ocv-scorebox__sep { font-size: 24px; }

/* A team's matches: one card per row, stacked vertically. */
.ocv-matchcol { display: flex; flex-direction: column; gap: 10px; }

/* Referto: result box, roster on a full page, guest picker. */
.ocv-referto { display: flex; flex-direction: column; gap: 16px; }
.ocv-referto .ocv-roster { max-height: none; }
.ocv-referto .ocv-roster__row { flex-wrap: wrap; }
.ocv-referto .ocv-roster__name { white-space: normal; overflow: visible; }

.ocv-guestlist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 46vh; overflow-y: auto; }
.ocv-guestrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	cursor: pointer;
	text-align: left;
	font: inherit;
	font-size: 15px;
	color: var(--ocv-text);
}
.ocv-guestrow:hover { background: var(--ocv-fill); }
.ocv-guestrow svg { width: 18px; height: 18px; color: var(--ocv-primary); flex-shrink: 0; }

.ocv-idcard__name {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	/* Nome+cognome lunghi vanno a capo invece di essere tagliati. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ocv-idcard__team {
	margin-top: 4px;
	font-size: 15px;
	color: var(--ocv-text-2);
	font-weight: 500;
}

/* Flag C.U.: piccolo pallino nero accanto all'età, nell'elenco Atleti e nella
   scheda atleta (non più sulla foto/avatar). */
.ocv-cudot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 2px;
	border-radius: 50%;
	background: #1a1a2e;
	vertical-align: middle;
}

.ocv-idcard__meta {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ocv-text-3);
}

/* Registry fields on three columns: small label above, larger value below. */
.ocv-fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 24px;
}

/* Squadra e kit: Squadra / Ruolo / Numero maglia / Taglia tutti sullo stesso rigo. */
.ocv-fields--4 { grid-template-columns: repeat(4, 1fr); }

.ocv-fields__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ocv-text-3);
}

.ocv-fields__value {
	margin-top: 3px;
	font-size: 18px;
	line-height: 1.3;
	word-break: break-word;
}

.ocv-fields__item--full { grid-column: 1 / -1; }

/* Team badge in the squads list. */
.ocv-teambadge {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ocv-teambadge svg { width: 24px; height: 24px; }

/* Team roster count on the list: a soft team-coloured pill ("3 atleti"). */
.ocv-teamcount {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 7px 15px;
	border-radius: var(--ocv-pill);
	flex-shrink: 0;
}
.ocv-teamcount__n { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.ocv-teamcount__l { font-size: 13px; font-weight: 600; opacity: 0.8; }

/* Read-only reference field (e.g. training days shown inside the team form). */
.ocv-readfield {
	padding: 12px 14px;
	border-radius: var(--ocv-radius);
	background: var(--ocv-fill);
	border: 1px solid var(--ocv-border);
	color: var(--ocv-text-2);
	font-size: 14.5px;
	font-weight: 500;
}

/* Inline sporting stats on a single-team roster row: goal / assist / partite /
   presenze allenamento (%) / cartellini gialli / rossi. A light divider between
   each gives them room to breathe; yellow/red cards are colour-coded. */
.ocv-statstrip { display: inline-flex; align-items: stretch; flex-shrink: 0; }
/* Compact stacked columns (icon on top, number below) so the whole strip stays
   narrow enough to fit a phone without overflowing the card. Fixed widths keep
   the icons aligned across every row, with a light vertical divider between. */
.ocv-statchip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 42px; padding: 2px 3px; font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--ocv-text); }
.ocv-statchip--pct { width: 46px; }
.ocv-statchip + .ocv-statchip { border-left: 1px solid var(--ocv-hairline-strong); }
.ocv-statchip svg { width: 17px; height: 17px; color: var(--ocv-text-2); flex-shrink: 0; }
.ocv-statchip.is-zero { opacity: 0.4; }
.ocv-statchip.is-zero svg { color: var(--ocv-text-3); }
.ocv-statchip--amber svg { color: var(--ocv-amber); }
.ocv-statchip--red svg { color: var(--ocv-red); }
.ocv-statchip--amber svg rect, .ocv-statchip--red svg rect { fill: currentColor; }
@media (min-width: 1000px) {
	/* Desktop: bigger stat chips in the referto. */
	.ocv-statchip { width: 56px; padding: 4px 6px; gap: 4px; font-size: 14px; }
	.ocv-statchip--pct { width: 60px; }
	.ocv-statchip svg { width: 20px; height: 20px; }
}

/* Sort control in the Atleti card header (right): a compact dropdown + a small
   icon button that flips ascending/descending. */
.ocv-teamsort2 { display: inline-flex; align-items: center; gap: 8px; }
.ocv-teamsort2 .ocv-select { min-width: 160px; max-width: 210px; }
.ocv-dirbtn {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--ocv-primary) 35%, transparent);
	border-radius: var(--ocv-radius);
	background: var(--ocv-blue-tint, #eaf2ff);
	color: var(--ocv-primary);
	cursor: pointer;
}
.ocv-dirbtn svg { width: 22px; height: 22px; stroke-width: 2.4; }
.ocv-dirbtn:disabled { opacity: 0.4; cursor: default; color: var(--ocv-text-3); background: var(--ocv-surface); border-color: var(--ocv-border); }
@media (max-width: 560px) {
	.ocv-teamsort2 { width: 100%; }
	.ocv-teamsort2 .ocv-select { flex: 1; min-width: 0; max-width: none; }
}
.ocv-sortbar { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.ocv-sortbar__lbl { font-size: 13px; font-weight: 600; color: var(--ocv-text-3); flex-shrink: 0; }
.ocv-sortbar__chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ocv-sortchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 12px;
	border: 1px solid var(--ocv-border);
	border-radius: var(--ocv-pill);
	background: var(--ocv-surface);
	color: var(--ocv-text-2);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	flex-shrink: 0;
}
.ocv-sortchip__icon { width: 15px; height: 15px; color: var(--ocv-text-3); }
.ocv-sortchip__dir { font-size: 11px; }
.ocv-sortchip.is-active { background: var(--ocv-primary); border-color: var(--ocv-primary); color: #fff; }
.ocv-sortchip.is-active .ocv-sortchip__icon { color: #fff; }
.ocv-sortchip--clear { padding: 7px; }
.ocv-sortchip--clear svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
	.ocv-fields { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
	.ocv-fields { grid-template-columns: 1fr; }
}

.ocv-card__actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

/* Pulsanti icona+testo nell'intestazione di una card (es. "Contatta"): su
   desktop c'è poco spazio verticale nell'header e il pulsante pieno risultava
   sproporzionato rispetto al titolo, quindi resta solo l'icona (l'etichetta
   sopravvive come title/aria-label). Su mobile restano invariati (icona+testo),
   dove sono già ben proporzionati — richiesta esplicita di Matteo. */
@media (min-width: 721px) {
	.ocv-card__actions .ocv-btn--iconlabel .ocv-btn__label {
		display: none;
	}
	.ocv-card__actions .ocv-btn--iconlabel {
		padding-left: 12px;
		padding-right: 12px;
		gap: 0;
	}

	/* Eccezione: "Convoca / Condividi" (card Dati partita) resta icona+testo
	   anche su desktop come su mobile — è l'azione più usata, richiesta di
	   Matteo il 24/09. */
	.ocv-card--matchinfo .ocv-card__actions .ocv-btn--primary.ocv-btn--iconlabel .ocv-btn__label {
		display: inline;
	}
	.ocv-card--matchinfo .ocv-card__actions .ocv-btn--primary.ocv-btn--iconlabel {
		padding-left: 18px;
		padding-right: 18px;
		gap: 7px;
	}
}

/* Card "Dati partita": su mobile le azioni si impilano a tutta larghezza, in
   ordine "Convoca / Condividi" (più in evidenza, è l'azione più usata),
   "Mappa", poi "Dettaglio partita" che apre/chiude i dati sotto. */
@media (max-width: 760px) {
	.ocv-card--matchinfo .ocv-card__head { flex-wrap: wrap; }
	.ocv-card--matchinfo .ocv-card__actions {
		margin-left: 0;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.ocv-card--matchinfo .ocv-card__actions .ocv-btn { width: 100%; }
	.ocv-card--matchinfo .ocv-card__actions .ocv-btn--primary { min-height: 52px; font-size: 17px; }
}

.ocv-card__body {
	padding: 18px;
}

.ocv-card__body--flush {
	padding: 0;
}

/* ---------------------------------------------------------------- Rows */

.ocv-list {
	display: flex;
	flex-direction: column;
}

.ocv-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	min-height: var(--ocv-touch-lg);
	background: var(--ocv-surface);
	width: 100%;
	border: none;
	font: inherit;
	color: inherit;
	text-align: left;
	position: relative;
}

/* Hairline that stops short of the leading edge, like a UITableView. */
.ocv-row + .ocv-row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	right: 0;
	height: 0.5px;
	background: var(--ocv-hairline);
}

.ocv-row--tap {
	cursor: pointer;
}

.ocv-row--tap:active {
	background: var(--ocv-fill);
}

.ocv-row__main {
	flex: 1;
	min-width: 0;
}

/* Athlete names read a touch larger than the generic list row. */
.ocv-cardlist--athletes .ocv-row__title {
	font-size: 19px;
}

/* "In prova": nome + tag inline (riusa .ocv-trialtag), così l'allenatore
   riconosce a colpo d'occhio chi è in prova mentre fa l'appello. */
.ocv-attname {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.ocv-attname .ocv-trialtag {
	flex-shrink: 0;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 3px 9px;
}
/* Prova finita/scaduta: rosso, così resta un promemoria evidente in appello. */
.ocv-attname .ocv-trialtag--red {
	color: #fff;
	background: var(--ocv-red);
}

/* Small column header (e.g. "Certificato") in a list card head. */
.ocv-collabel {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ocv-text-3);
	white-space: nowrap;
}

.ocv-row__title {
	font-weight: 500;
	font-size: 17px;
	letter-spacing: -0.02em;
	/* Nomi lunghi vanno a capo invece di essere tagliati con "…". */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ocv-row__sub {
	font-size: 14px;
	color: var(--ocv-text-2);
	overflow-wrap: anywhere;
	word-break: break-word;
	margin-top: 1px;
}

/* Seconda riga dello scorporo squadra (in prova/interessati) sotto agli iscritti.
 * Colore ambra + peso marcato così il numero è ben leggibile e distinto dagli
 * iscritti (richiesta Matteo: la scritta grigia chiara non si vedeva). */
.ocv-teamsub__trials {
	margin-top: 3px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ocv-amber, #ff9500);
}

.ocv-row__side {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.ocv-row__chevron {
	width: 18px;
	height: 18px;
	color: var(--ocv-text-3);
	flex-shrink: 0;
	stroke-width: 2.4;
}

/* On phones the list cards (atleti, finanze, squadre, ordini…) can carry a lot
 * on the right — badges, amount, action buttons. Rather than squeeze the name or
 * clip the side off-screen, let the card grow taller: the name shows in full and
 * the side drops onto its own full-width line and wraps. Everything stays
 * visible (richiesta Matteo). */
@media (max-width: 640px) {
	/* Tutti gli elenchi (atleti, prodotti, ordini, squadre…) su telefono: il lato
	 * destro scende SOTTO il nome, a tutta larghezza, con i PULSANTI AZIONE
	 * allineati a DESTRA (richiesta Matteo), andando a capo se serve. */
	.ocv-cardlist .ocv-row,
	.ocv-list .ocv-row,
	.ocv-orderlist .ocv-row {
		flex-wrap: wrap;
		align-items: flex-start;
		row-gap: 10px;
	}

	.ocv-cardlist .ocv-row__title,
	.ocv-cardlist .ocv-row__sub,
	.ocv-list .ocv-row__title,
	.ocv-list .ocv-row__sub,
	.ocv-orderlist .ocv-row__title,
	.ocv-orderlist .ocv-row__sub {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.ocv-cardlist .ocv-row__side,
	.ocv-list .ocv-row__side,
	.ocv-orderlist .ocv-row__side {
		margin-left: 0;
		width: 100%;
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: 8px;
	}

	/* Presenze / elenco della singola squadra: il nome resta su UNA riga (ellissi
	 * se troppo lungo); il resto scende sotto (a sinistra, come gli altri). */
	.ocv-cardlist--attendance .ocv-row__main,
	.ocv-squadlist .ocv-row__main { min-width: 0; }
	.ocv-cardlist--attendance .ocv-row__title,
	.ocv-squadlist .ocv-row__title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media (min-width: 1000px) {
	/* Desktop: squad roster stats inline on the right. */
	.ocv-squadlist .ocv-row { flex-wrap: nowrap; align-items: center; }
	.ocv-squadlist .ocv-row__side { margin-left: auto; display: flex; align-items: center; gap: 16px; }
}

/* ------------------------------------------------------------- Avatars */

.ocv-initials {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ocv-fill);
	color: var(--ocv-text-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 15px;
	flex-shrink: 0;
	overflow: hidden;
	letter-spacing: 0;
}

.ocv-initials img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Flag C.U.: bordo nero attorno all'avatar (foto o iniziali), stessa resa della figurina. */
.ocv-initials--cu {
	border: 3px solid #1a1a2e;
}

/* The squad number, worn like one. */
.ocv-initials--number {
	background: var(--ocv-primary);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.ocv-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* --------------------------------------------------------------- Chips */

.ocv-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--ocv-pill);
	font-size: 13px;
	font-weight: 600;
	background: var(--ocv-grey-tint);
	color: var(--ocv-grey);
	white-space: nowrap;
	letter-spacing: 0;
}

.ocv-chip svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
}

.ocv-chip--green { background: var(--ocv-green-tint); color: #1f8a3b; }
.ocv-chip--red { background: var(--ocv-red-tint); color: #d70015; }
.ocv-chip--amber { background: var(--ocv-amber-tint); color: #b35f00; }
.ocv-chip--blue { background: var(--ocv-blue-tint); color: #0060df; }
.ocv-chip--purple { background: var(--ocv-purple-tint); color: #8944ab; }

.ocv-chip--lg {
	height: 32px;
	font-size: 14px;
	padding: 0 14px;
}


.ocv-chip--pulse {
	animation: ocv-chip-pulse 1.6s ease-in-out infinite;
}

@keyframes ocv-chip-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

/* -------------------------------------------------------- Filter pills */

.ocv-filters {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 16px;
	scrollbar-width: none;
}

.ocv-filters::-webkit-scrollbar {
	display: none;
}

.ocv-pill {
	min-height: 46px;
	padding: 0 20px;
	border-radius: var(--ocv-pill);
	border: none;
	background: var(--ocv-fill);
	font: inherit;
	font-weight: 500;
	font-size: 16px;
	color: var(--ocv-text-2);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	letter-spacing: -0.01em;
	transition: background 0.15s var(--ocv-ease);
}

.ocv-pill:hover {
	background: var(--ocv-fill-2);
}

.ocv-pill.is-active {
	background: var(--ocv-primary);
	color: #fff;
	font-weight: 600;
}

.ocv-pill__count {
	background: rgba(0, 0, 0, 0.07);
	border-radius: var(--ocv-pill);
	padding: 1px 6px;
	font-size: 12px;
	font-weight: 600;
}

.ocv-pill.is-active .ocv-pill__count {
	background: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------- Forms */

.ocv-field {
	margin-bottom: 13px;
}

.ocv-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 15px;
	margin-bottom: 6px;
	color: var(--ocv-text);
	letter-spacing: -0.01em;
}

.ocv-label__opt {
	font-weight: 400;
	color: var(--ocv-text-3);
	font-size: 13px;
}

/* The little "i" that reveals a field's explanation. */
.ocv-infobtn {
	width: 18px;
	height: 18px;
	flex: none;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ocv-fill);
	color: var(--ocv-text-3);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ocv-infobtn:hover { background: var(--ocv-fill-2); color: var(--ocv-primary); }
.ocv-infobtn svg { width: 12px; height: 12px; stroke-width: 2.4; }
.ocv-help--toggle { margin-top: 6px; }

/* Logo uploader in the general settings. */
.ocv-logoupload {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ocv-logoupload__preview {
	min-width: 120px;
	height: 72px;
	padding: 8px 14px;
	border: 0.5px dashed var(--ocv-hairline);
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-fill);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocv-logoupload__preview img { max-height: 56px; max-width: 160px; object-fit: contain; }
.ocv-logoupload__actions { display: inline-flex; align-items: center; gap: 8px; }

.ocv-input,
.ocv-select,
.ocv-textarea {
	width: 100%;
	/* Same height as the buttons (40px): recovers a lot of vertical room in forms. */
	min-height: 40px;
	padding: 8px 14px;
	border: none;
	box-shadow: inset 0 0 0 1px var(--ocv-hairline-strong);
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-surface);
	font: inherit;
	/* 16px keeps iOS Safari from zooming on focus. */
	font-size: 16px;
	color: var(--ocv-text);
	appearance: none;
	transition: box-shadow 0.15s var(--ocv-ease);
}

.ocv-input:focus,
.ocv-select:focus,
.ocv-textarea:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--ocv-primary), var(--ocv-ring);
}

.ocv-input::placeholder {
	color: var(--ocv-text-3);
}

.ocv-textarea {
	min-height: 104px;
	resize: vertical;
}

.ocv-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 42px;
}

/* --- Hybrid date field: typed gg/mm/aaaa + our own calendar popup --- */
.ocv-datefield__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.ocv-datefield__text {
	flex: 1;
	min-width: 0;
}

.ocv-datefield__cal {
	flex: 0 0 auto;
	width: 40px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: inset 0 0 0 1px var(--ocv-hairline-strong);
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-surface);
	color: var(--ocv-primary);
	cursor: pointer;
	transition: box-shadow 0.15s var(--ocv-ease), background 0.15s var(--ocv-ease);
}

.ocv-datefield__cal svg {
	width: 18px;
	height: 18px;
}

.ocv-datefield__cal:hover {
	box-shadow: inset 0 0 0 1.5px var(--ocv-primary);
}

.ocv-datefield__cal.is-open {
	background: var(--ocv-primary-tint);
	box-shadow: inset 0 0 0 2px var(--ocv-primary);
}

.ocv-datepop {
	margin-top: 8px;
	padding: 10px 12px 12px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-pop);
	max-width: 340px;
}

.ocv-datepop__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.ocv-datepop__nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 10px;
	color: var(--ocv-primary);
	cursor: pointer;
}

.ocv-datepop__nav:hover {
	background: var(--ocv-bg);
}

.ocv-datepop__nav svg {
	width: 20px;
	height: 20px;
}

.ocv-datepop__title {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ocv-datepop__month {
	font-weight: 700;
	color: var(--ocv-text);
	text-transform: capitalize;
}

.ocv-datepop__year {
	width: auto;
	min-width: 92px;
	min-height: 40px;
	padding: 6px 34px 6px 12px;
	font-size: 16px;
	background-position: right 10px center;
}

.ocv-datepop__week,
.ocv-datepop__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.ocv-datepop__week {
	margin-bottom: 4px;
}

.ocv-datepop__week span {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--ocv-text-3);
	padding: 4px 0;
}

.ocv-datepop__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 10px;
	font-size: 15px;
	color: var(--ocv-text);
	cursor: pointer;
}

.ocv-datepop__day:hover {
	background: var(--ocv-bg);
}

.ocv-datepop__day.is-today {
	box-shadow: inset 0 0 0 1.5px var(--ocv-primary);
}

.ocv-datepop__day.is-sel {
	background: var(--ocv-primary);
	color: #fff;
	font-weight: 700;
}

/* Search + squad filter share one row, at the same height. */
.ocv-searchrow {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin-bottom: 12px;
}

/* Squad selector + filter pills on one row (Amministrazione). The pills scroll
   horizontally when they don't fit, so they never push the squad button off. */
.ocv-searchrow--pills { align-items: center; }
.ocv-pillscroll {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.ocv-pillscroll::-webkit-scrollbar { display: none; }
.ocv-pillscroll > .ocv-filters { flex-wrap: nowrap; }

/* Mobile: le pillole vanno a capo invece di scorrere lateralmente (usabilità) */
@media (max-width: 640px) {
	.ocv-pillscroll {
		overflow-x: visible;
	}
	.ocv-pillscroll > .ocv-filters {
		flex-wrap: wrap;
		gap: 8px;
	}
	.ocv-pillscroll > .ocv-filters .ocv-pill {
		flex: 0 0 auto;
	}
}

.ocv-teamfilter-host {
	flex-shrink: 0;
	display: flex;
	max-width: 46%;
}

/* Squad filter: a button that opens a popup picker (friendlier than a dropdown
   on a tablet, and never overflows the page). Same height as the search. */
.ocv-teamfilter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	align-self: stretch;
	min-height: 58px;
	padding: 0 16px;
	border: 1px solid var(--ocv-hairline-strong);
	border-radius: var(--ocv-pill);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	color: var(--ocv-text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s var(--ocv-ease);
}

.ocv-teamfilter:hover { border-color: var(--ocv-primary); }
.ocv-teamfilter__icon { width: 19px; height: 19px; color: var(--ocv-primary); flex-shrink: 0; }
.ocv-teamfilter__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-teamfilter__chev { width: 18px; height: 18px; color: var(--ocv-text-3); flex-shrink: 0; }

/* Allineamento selettore squadre + pillole di filtro.
   Il problema era il gutter di scroll orizzontale della pillscroll, che la
   rendeva più alta e ancorava le pillole in alto. Soluzione: su DESKTOP niente
   scroll (le pillole stanno su una riga), tutto centrato e a 46px → allineato.
   Su MOBILE le pillole vanno a capo (nessuno scroll laterale). */
.ocv-searchrow--pills { min-height: 0; align-items: center; }
.ocv-searchrow--pills .ocv-teamfilter {
	min-height: 46px;
	align-self: center;
	font-size: 16px;
}
.ocv-searchrow--pills .ocv-teamfilter-host { align-self: center; }
.ocv-searchrow--pills .ocv-pillscroll {
	overflow: visible;
	display: flex;
	align-items: center;
	align-self: center !important;
	height: 46px;
}
@media (max-width: 640px) {
	.ocv-searchrow--pills .ocv-pillscroll { height: auto; }
}
.ocv-searchrow--pills .ocv-pillscroll > .ocv-filters {
	flex-wrap: nowrap;
	align-items: center;
	padding-bottom: 0;
	margin-bottom: 0;
}
/* Solo su mobile le pillole vanno a capo (niente scroll laterale). */
@media (max-width: 640px) {
	.ocv-searchrow--pills .ocv-pillscroll > .ocv-filters {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* The popup list of choices. Rows are tall for comfortable tapping. */
.ocv-picker { display: flex; flex-direction: column; gap: 4px; }

.ocv-picker__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	padding: 12px 16px;
	border: none;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-fill);
	color: var(--ocv-text);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s var(--ocv-ease);
}

.ocv-picker__item:hover { background: var(--ocv-fill-2); }

.ocv-picker__item.is-active {
	background: var(--ocv-primary-tint);
	color: var(--ocv-primary);
	font-weight: 700;
}

.ocv-picker__check { width: 20px; height: 20px; color: var(--ocv-primary); flex-shrink: 0; }

.ocv-help {
	font-size: 13px;
	color: var(--ocv-text-2);
	margin-top: 6px;
}

.ocv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 14px;
}

.ocv-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}
.ocv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ocv-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* CAP · Città · Provincia: città larga, gli altri stretti. */
.ocv-grid--addr { grid-template-columns: 0.7fr 2fr 0.6fr; }
/* Città · Provincia (senza CAP): città larga, provincia stretta. */
.ocv-grid--city { grid-template-columns: 2.4fr 0.6fr; }
/* Squadra · Numero maglia · Ruolo · Taglia, tutti sulla stessa riga: squadra
   larga, ruolo un po' più largo dei due codici corti. */
.ocv-grid--squad { grid-template-columns: 2fr 0.6fr 1fr 0.6fr; }
/* Email · Cellulare: email più larga, il cellulare resta compatto (ma con
   spazio sufficiente per "Ha WhatsApp" a fianco, senza andare a capo). */
.ocv-grid--contact { grid-template-columns: 1.3fr 1fr; }
/* Nazionalità · Codice fiscale · C.U.: i primi due allineati, C.U. stretto. */
.ocv-grid--cf { grid-template-columns: 1fr 1fr 0.55fr; }
/* Checkbox in linea con un input (es. C.U. accanto al codice fiscale): niente
   sfondo/riquadro grigio, solo il segno di spunta + testo, alla stessa altezza
   dell'input a fianco (l'etichetta sopra resta ma invisibile, solo per lo spazio). */
.ocv-inlinecheck .ocv-check {
	background: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
	/* NON var(--ocv-touch) (58px, pensato per un tocco isolato): qui deve
	   restare alto quanto l'input a fianco (40px), altrimenti pur partendo
	   dallo stesso bordo superiore sembra sfalsato verso il basso. */
	min-height: 40px;
}
.ocv-inlinecheck .ocv-check.is-on { background: none; }
@media (max-width: 640px) {
	.ocv-grid--3, .ocv-grid--addr, .ocv-grid--kit, .ocv-grid--contact { grid-template-columns: 1fr; }
	.ocv-grid--4, .ocv-grid--squad, .ocv-grid--cf { grid-template-columns: 1fr 1fr; }
}

/* "Convoca tutti": staccato dall'elenco e ben in evidenza, centrato. */
.ocv-convall { display: flex; justify-content: center; margin: 8px 0 20px; }
.ocv-convall .ocv-btn { min-width: 220px; }

/* A compact row of fields kept at their natural width and close together (used
 * for small controls like the colour swatches — not stretched across columns). */
.ocv-fieldrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 26px; margin-bottom: 13px; }
.ocv-fieldrow > .ocv-field { flex: 0 0 auto; margin-bottom: 0; }

.ocv-search {
	position: relative;
	flex: 1;
	min-width: 200px;
}

.ocv-search__icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--ocv-primary);
	pointer-events: none;
}

/* Search is a prominent white capsule: it must stand out clearly from the grey
   app background — it is the primary way people find an athlete. */
.ocv-search .ocv-input {
	padding-left: 46px;
	height: 48px;
	background: var(--ocv-surface);
	border: 1.5px solid color-mix(in srgb, var(--ocv-primary) 32%, transparent);
	box-shadow: 0 3px 12px color-mix(in srgb, var(--ocv-primary) 12%, transparent), var(--ocv-shadow-card);
	border-radius: var(--ocv-pill);
	font-size: 15.5px;
	font-weight: 500;
}

.ocv-search .ocv-input::placeholder {
	color: var(--ocv-text-2);
	font-weight: 400;
}

.ocv-search .ocv-input:focus {
	background: var(--ocv-surface);
	border-color: var(--ocv-primary);
	box-shadow: 0 0 0 3px var(--ocv-ring), 0 3px 12px color-mix(in srgb, var(--ocv-primary) 16%, transparent);
}

.ocv-check {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--ocv-touch);
	padding: 8px 14px;
	border-radius: var(--ocv-radius-sm);
	cursor: pointer;
	background: var(--ocv-bg-soft);
	margin-bottom: 8px;
	transition: background 0.15s var(--ocv-ease);
}

.ocv-check.is-on {
	background: var(--ocv-primary-tint);
}

.ocv-check__box {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--ocv-hairline-strong);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ocv-surface);
	color: transparent;
}

.ocv-check.is-on .ocv-check__box {
	background: var(--ocv-primary);
	box-shadow: none;
	color: #fff;
}

.ocv-check__box svg {
	width: 15px;
	height: 15px;
	stroke-width: 3;
}

.ocv-check__text {
	font-weight: 500;
	flex: 1;
	min-width: 0;
	font-size: 16px;
}

.ocv-months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
	gap: 8px;
}

.ocv-month {
	min-height: 56px;
	border: none;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-fill);
	font: inherit;
	font-weight: 500;
	font-size: 15px;
	color: var(--ocv-text-2);
	cursor: pointer;
	transition: background 0.15s var(--ocv-ease);
}

.ocv-month:hover {
	background: var(--ocv-fill-2);
}

.ocv-month.is-on {
	background: var(--ocv-primary);
	color: #fff;
	font-weight: 600;
}

/* -------------------------------------------------- Attendance buttons */

.ocv-att-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--ocv-surface);
	flex-wrap: wrap;
	position: relative;
}

.ocv-att-row + .ocv-att-row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 16px;
	right: 0;
	height: 0.5px;
	background: var(--ocv-hairline);
}

.ocv-att-row__name {
	flex: 1;
	min-width: 130px;
}

.ocv-att-row__title {
	font-weight: 500;
	font-size: 17px;
	letter-spacing: -0.02em;
}

.ocv-att-row__sub {
	font-size: 13px;
	color: var(--ocv-text-3);
}

.ocv-att-btns {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* The four state buttons: the whole point of the coach's screen. */
.ocv-att-btn {
	width: 78px;
	height: 78px;
	border-radius: var(--ocv-radius);
	border: none;
	background: var(--ocv-fill);
	color: var(--ocv-text-3);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	transition: transform 0.12s var(--ocv-ease), background 0.15s var(--ocv-ease);
}

.ocv-att-btn svg {
	width: 28px;
	height: 28px;
	stroke-width: 2;
}

.ocv-att-btn:active {
	transform: scale(0.92);
}

.ocv-att-btn.is-on[data-status="present"] { background: var(--ocv-green); color: #fff; }
.ocv-att-btn.is-on[data-status="absent"] { background: var(--ocv-red); color: #fff; }
.ocv-att-btn.is-on[data-status="late"] { background: var(--ocv-amber); color: #fff; }
.ocv-att-btn.is-on[data-status="justified"] { background: var(--ocv-blue); color: #fff; }

/* The date stepper looks like the app's other cards: white surface, same
   radius and shadow — just a touch of inner padding for the arrows. */
.ocv-datebar {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 18px;
	padding: 8px 10px;
	background: var(--ocv-surface);
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	box-shadow: var(--ocv-shadow-card);
}

/* The prev/next arrows stand out clearly on the white card. */
.ocv-datebar > .ocv-btn { color: var(--ocv-primary); background: transparent; border: 0; }
.ocv-datebar > .ocv-btn:hover { background: var(--ocv-fill); }
.ocv-datebar > .ocv-btn svg { width: 24px; height: 24px; stroke-width: 2.2; }

.ocv-datebar__date {
	flex: 1;
	min-width: 150px;
	text-align: center;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
	text-transform: capitalize;
	min-height: var(--ocv-touch);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--ocv-radius-sm);
	background: transparent;
	color: var(--ocv-text);
	cursor: pointer;
	padding: 0 12px;
	font-family: inherit;
}

.ocv-datebar__date:hover {
	background: var(--ocv-fill);
}

/* ---------------------------------------------------------------- Shop */

.ocv-shop {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--ocv-gap);
	align-items: start;
}

/* Full-width grid when there is no cart column (no athlete chosen yet). */
.ocv-shop--nocart { grid-template-columns: 1fr; }

.ocv-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}

/* An e-commerce card: product photo on top, name and price below. */
.ocv-product {
	position: relative;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font: inherit;
	text-align: left;
	color: inherit;
	box-shadow: var(--ocv-shadow-card);
	transition: transform 0.15s var(--ocv-ease), box-shadow 0.15s var(--ocv-ease);
}

.ocv-product:hover { box-shadow: var(--ocv-shadow-card-hover, var(--ocv-shadow-card)); }
.ocv-product:active { transform: scale(0.98); }

.ocv-product__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--ocv-fill);
	overflow: hidden;
}

.ocv-product__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ocv-product__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ocv-accent);
}

.ocv-product__img--placeholder svg { width: 40px; height: 40px; stroke-width: 1.6; }

.ocv-product__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.ocv-product__name {
	font-weight: 500;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ocv-product__price {
	margin-top: auto;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.02em;
	color: var(--ocv-text);
}

/* Locked catalogue: dimmed and desaturated until an athlete is chosen. A tap
   still works — it opens the athlete picker — so the tiles stay clickable. */
.ocv-products.is-locked .ocv-product { box-shadow: none; }
.ocv-products.is-locked .ocv-product__img img { filter: grayscale(1); opacity: 0.55; }
.ocv-products.is-locked .ocv-product__name,
.ocv-products.is-locked .ocv-product__price { opacity: 0.5; }

/* Call to action shown above the locked catalogue. */
.ocv-shop-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	flex-wrap: wrap;
}

.ocv-shop-cta__icon {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 13px;
	background: var(--ocv-accent-tint);
	color: var(--ocv-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocv-shop-cta__icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.ocv-shop-cta__text { flex: 1; min-width: 180px; }
.ocv-shop-cta__title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.ocv-shop-cta__sub { color: var(--ocv-muted); font-size: 14px; margin-top: 2px; }

/* The chosen athlete: bigger name, plus the suggested apparel size when known. */
.ocv-shop-athlete { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ocv-shop-athlete .ocv-initials { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.ocv-shop-athlete__info { flex: 1; min-width: 0; }
.ocv-shop-athlete__name { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.ocv-shop-athlete__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--ocv-muted); font-size: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Orders */

/* Compact filter bar: labelled dropdowns in a row (wrap on small screens). */
.ocv-orderfilters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ocv-filtergroup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocv-filtergroup__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ocv-muted);
	min-width: 74px;
}
.ocv-orderfilter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1 1 180px; }
.ocv-orderfilter__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ocv-text-2);
}
.ocv-orderfilter .ocv-select { width: 100%; }

/* Orders list — athlete card with a small card per product line. */
.ocv-ordercards { display: flex; flex-direction: column; gap: 14px; }

/* Flat product-first order list. The delivery state is a compact dropdown whose
   colour hints the stage (red=to order → green=delivered). */
.ocv-orderlist .ocv-row__title { font-weight: 700; }
.ocv-orderstatus { min-width: 128px; font-weight: 600; border-radius: 10px; }
.ocv-orderstatus--to_order { color: var(--ocv-red); border-color: color-mix(in srgb, var(--ocv-red) 45%, var(--ocv-hairline)); }
.ocv-orderstatus--ordered { color: var(--ocv-text-2); }
.ocv-orderstatus--received { color: var(--ocv-amber); border-color: color-mix(in srgb, var(--ocv-amber) 45%, var(--ocv-hairline)); }
.ocv-orderstatus--delivered { color: var(--ocv-green); border-color: color-mix(in srgb, var(--ocv-green) 45%, var(--ocv-hairline)); }
.ocv-orderstatus--delivered_unpaid { color: var(--ocv-purple); border-color: color-mix(in srgb, var(--ocv-purple) 45%, var(--ocv-hairline)); }
/* Ordini raggruppati per atleta: una card per atleta (o per ordine pubblico/
   staff), con un'intestazione unica foto+nome — non più ripetuto su ogni
   riga prodotto, che resta quindi solo nome/taglia/prezzo: elenco più corto
   a parità di informazione. */
.ocv-ordergroups { display: flex; flex-direction: column; gap: 12px; }
.ocv-ordergroup { background: var(--ocv-surface); border: 1px solid var(--ocv-hairline); border-radius: 16px; overflow: hidden; }
/* Ordine online non ancora confermato in segreteria: contorno blu ben visibile,
   sparisce da solo appena l'ordine viene verificato (torna al bordo normale). */
.ocv-ordergroup--unverified { border: 2px solid var(--ocv-blue); }

.ocv-ordergroup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 16px;
	/* Più chiaro di --ocv-fill: quel grigio è troppo vicino allo sfondo pagina
	   (--ocv-bg) e la testata si perdeva; qui resta grigio ma si distingue. */
	background: #f8f8fa;
	border-bottom: 1px solid var(--ocv-hairline);
}
.ocv-ordergroup__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ocv-ordergroup__whoinfo { min-width: 0; }
.ocv-ordergroup__name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocv-ordergroup__team { font-size: 12px; color: var(--ocv-text-3); }
/* Ordine arrivato online (vetrina pubblica): colore acceso, si nota subito. */
.ocv-ordergroup__team--online { color: var(--ocv-blue); font-weight: 700; }
/* Riga sotto il nome: "ORDINE ONLINE"/squadra + (se non confermato) il chip
   rosso "Da confermare" a fianco, sulla stessa riga. */
.ocv-ordergroup__teamrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* "Da confermare": pulsa (.ocv-chip--pulse) finché l'ordine online non viene
   verificato in segreteria; sparisce da solo appena confermato (resta solo
   "ORDINE ONLINE" a fianco, fisso). */
.ocv-ordergroup__pending { height: 20px; padding: 0 8px; font-size: 11px; }
/* Atleta con più ordini (fatti in momenti diversi): il riepilogo (totale
   ordini/acconto/da incassare, stesso stile del dettaglio ordine) a destra
   dell'intestazione, poi un blocco per ordine con la sua data — restano
   conti separati, ma si vede subito quali articoli erano nello stesso
   ordine e quanto manca in tutto. */
.ocv-ordergroup__totals { flex-shrink: 0; min-width: 200px; }
/* Interlinea più stretta qui (riepilogo nell'intestazione, non il dettaglio
   ordine): la card si abbassa un po', restando comunque leggibile. */
.ocv-ordergroup__totals .ocv-ordertot { padding: 2px 0; }
.ocv-ordergroup__totals .ocv-ordertot--due { margin-top: 0; }
.ocv-orderblock + .ocv-orderblock { border-top: 1px solid var(--ocv-hairline); }
.ocv-orderblock__head { padding: 10px 16px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ocv-muted); }
/* Riga ordine: nome prodotto + prezzo unitario del singolo prodotto accanto. */
.ocv-orderrow__title { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Righe più compatte ora che il "chi" non c'è più (una sola riga di sotto-
   testo invece di due): meno spazio verticale per articolo. */
.ocv-orderlist .ocv-row { min-height: 56px; padding: 8px 16px; }
.ocv-orderrow__price { font-size: 13px; font-weight: 700; color: var(--ocv-text-2); white-space: nowrap; }

/* ===================================================== Modulo Bar (touch) */
.ocv-bartabs { display: inline-flex; background: var(--ocv-fill); border: 1px solid var(--ocv-hairline); border-radius: 12px; padding: 3px; gap: 2px; margin: 0 0 16px; }
.ocv-bartab { appearance: none; border: 0; background: transparent; color: var(--ocv-text-2); font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 9px; cursor: pointer; }
.ocv-bartab.is-on { background: var(--ocv-surface); color: var(--ocv-primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.ocv-barlayout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
@media (max-width: 860px) { .ocv-barlayout { grid-template-columns: 1fr; } }

.ocv-bargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.ocv-barprod { position: relative; text-align: left; background: var(--ocv-surface); border: 1px solid var(--ocv-hairline); border-radius: 16px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 148px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: var(--ocv-shadow-card); }
.ocv-barprod:active { background: var(--ocv-fill); transform: translateY(1px); }
.ocv-barprod:disabled, .ocv-barprod.is-out { opacity: .5; cursor: not-allowed; }
.ocv-barprod__emoji { font-size: 38px; line-height: 1; }
.ocv-barprod__name { font-weight: 700; font-size: 17px; line-height: 1.2; }
.ocv-barprod__row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.ocv-barprod__price { font-weight: 800; color: var(--ocv-primary); font-size: 18px; }
.ocv-barprod__stock { font-size: 12px; font-weight: 700; color: var(--ocv-text-2); background: var(--ocv-fill); padding: 3px 8px; border-radius: 999px; }
.ocv-barprod__stock.is-low { color: var(--ocv-accent); }
.ocv-barprod__badge { position: absolute; top: 10px; right: 10px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--ocv-accent); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.ocv-barcart { background: var(--ocv-surface); border: 1px solid var(--ocv-hairline); border-radius: 16px; position: sticky; top: 12px; overflow: hidden; }
.ocv-barcart__head { padding: 12px 16px; border-bottom: 1px solid var(--ocv-hairline); display: flex; align-items: center; justify-content: space-between; }
.ocv-barcart__title { font-weight: 800; }
.ocv-barcart__body { max-height: 48vh; overflow: auto; }
.ocv-barcart__empty { padding: 30px 16px; text-align: center; color: var(--ocv-text-3); }
.ocv-barcitem { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ocv-hairline); cursor: pointer; }
.ocv-barcitem__q { font-weight: 800; color: var(--ocv-accent); min-width: 34px; font-size: 16px; }
.ocv-barcitem__main { flex: 1; min-width: 0; }
.ocv-barcitem__name { font-weight: 600; }
.ocv-barcitem__unit { font-size: 12.5px; color: var(--ocv-text-2); }
.ocv-barcitem__tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.ocv-barcitem__x { appearance: none; border: 0; background: var(--ocv-fill); color: var(--ocv-text-2); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 16px; flex: 0 0 auto; }
.ocv-barcart__foot { padding: 14px 16px; border-top: 1px solid var(--ocv-hairline); }
.ocv-barcart__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.ocv-barcart__total b { color: var(--ocv-text-2); }
.ocv-barcart__total-val { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ocv-barmethods { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ocv-barmethod { flex: 1 1 auto; appearance: none; border: 1px solid var(--ocv-hairline); background: var(--ocv-fill); color: var(--ocv-text); border-radius: 10px; padding: 11px 8px; font-weight: 700; font-size: 13px; cursor: pointer; text-transform: capitalize; }
.ocv-barmethod.is-on { border-color: var(--ocv-primary); background: color-mix(in srgb, var(--ocv-primary) 8%, var(--ocv-surface)); color: var(--ocv-primary); }
.ocv-barpaywrap button { width: 100%; }

.ocv-barqty { text-align: center; }
.ocv-barstep { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px 0 14px; }
.ocv-barstep__btn { width: 70px; height: 70px; border-radius: 20px; border: 1px solid var(--ocv-hairline); background: var(--ocv-fill); color: var(--ocv-primary); font-size: 32px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.ocv-barstep__btn:active { background: var(--ocv-fill-2); }
.ocv-barstep__btn:disabled { opacity: .4; cursor: not-allowed; }
.ocv-barstep__val { font-size: 50px; font-weight: 800; min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; }
.ocv-barquick { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.ocv-barqty__line { color: var(--ocv-text-2); font-size: 14px; }

.ocv-barhist-tot { font-size: 32px; font-weight: 800; color: var(--ocv-primary); letter-spacing: -.02em; }

.ocv-ordercard { background: var(--ocv-surface); border: 1px solid var(--ocv-hairline); border-radius: 16px; overflow: hidden; }
.ocv-ordercard__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.ocv-ordercard__head .ocv-initials { width: 46px; height: 46px; border-radius: 12px; }
.ocv-ordercard__who { flex: 1; min-width: 0; }
.ocv-ordercard__name { font-weight: 700; }
.ocv-ordercard__team { font-size: 13px; color: var(--ocv-text-2); margin-top: 1px; }
.ocv-ordercard__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ocv-ordercard__head > svg { width: 20px; height: 20px; color: var(--ocv-muted); flex: 0 0 auto; }
.ocv-ordercard__lines { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ocv-hairline); background: var(--ocv-fill); }
.ocv-orderline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--ocv-surface); border: 1px solid var(--ocv-hairline); border-radius: 12px; padding: 10px 12px; }
.ocv-orderline__info { min-width: 0; flex: 1 1 auto; }
.ocv-orderline__name { font-weight: 600; }
.ocv-orderline__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.ocv-sizebadge { display: inline-block; font-weight: 800; font-size: 13px; padding: 3px 11px; border-radius: 999px; background: var(--ocv-primary); color: #fff; }
.ocv-orderline__pers { font-size: 13px; color: var(--ocv-text-2); }
.ocv-orderline .ocv-segmented--sm { flex: 1 1 260px; min-width: 240px; }

/* On phones the product line stacks: name + size on top, the three delivery
   buttons as a full-width row below (so no label gets clipped). */
@media (max-width: 600px) {
	.ocv-orderline { flex-direction: column; align-items: stretch; }
	.ocv-orderline .ocv-segmented--sm { width: 100%; min-width: 0; }
}

/* Order card: total on top, then the two status chips, right-aligned. */
.ocv-orderrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ocv-orderrow__chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* Under the athlete name: team + size, then the ordered items on their own line. */
.ocv-orderrow__meta { font-weight: 600; color: var(--ocv-text); }
.ocv-orderrow__items { margin-top: 2px; color: var(--ocv-muted); }

/* Square athlete avatar, like the athletes and other people lists. */
.ocv-cardlist--orders .ocv-initials { width: 50px; height: 50px; border-radius: 13px; }

/* Titled sections in the order detail. */
.ocv-ordersec { margin-bottom: 20px; }
.ocv-ordersec:last-child { margin-bottom: 0; }
.ocv-ordersec__title {
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ocv-text-3);
	margin-bottom: 10px;
}

/* Righe prodotto del modale ordine: A FILO col titolo di sezione (niente padding
   laterale), tendina consegna a destra allineata agli importi dei totali. */
/* Ogni prodotto in un suo RIQUADRO (richiesta Matteo), con padding interno adeguato
   così testo e tendina non toccano i bordi; descrizione a sinistra, tendina consegna
   a destra — affiancate anche su telefono (la descrizione va a capo senza spingere la
   tendina). Più box = impilati con un piccolo gap, NIENTE linea sotto (il box già
   delimita). NB: prefisso .ocv-oitem per NON collidere con .ocv-orderline. */
.ocv-oitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 15px;
	background: var(--ocv-surface);
	border: 1px solid var(--ocv-hairline);
	border-radius: 12px;
}
.ocv-oitem + .ocv-oitem { margin-top: 10px; }
.ocv-oitem__info { flex: 1; min-width: 0; }
.ocv-oitem__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ocv-oitem__sub { font-size: 13px; color: var(--ocv-text-2); margin-top: 2px; }
.ocv-oitem__side { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.ocv-oitem__del { padding: 8px; }

/* Totali: etichetta a sinistra, importo a destra; "Totale da pagare" in rosso. */
.ocv-ordertotals { margin-top: 16px; }
.ocv-ordertot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px; }
.ocv-ordertot__lbl { color: var(--ocv-text-2); }
.ocv-ordertot__v { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ocv-ordertot--due { margin-top: 2px; }
.ocv-ordertot--due .ocv-ordertot__lbl { font-size: 16px; font-weight: 700; color: var(--ocv-red); }
.ocv-ordertot--due .ocv-ordertot__v { font-size: 22px; font-weight: 800; color: var(--ocv-red); }

/* Riga azioni: "Registra pagamento" largo + quadratino "Elimina" (stessa altezza). */
.ocv-orderpay { display: flex; gap: 10px; align-items: stretch; margin-top: 16px; }
.ocv-orderpay__main { flex: 1; min-width: 0; }
.ocv-orderpay__del.ocv-btn--icon {
	width: var(--ocv-touch-lg);
	min-width: var(--ocv-touch-lg);
	height: var(--ocv-touch-lg);
	flex-shrink: 0;
	padding: 0;
}

/* Delivery segmented control: one button per state, current highlighted. */
.ocv-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ocv-segmented .ocv-btn { width: 100%; }

/* Per-line delivery control under each order product: a compact segmented row. */
.ocv-orderitem { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.ocv-orderitem + .ocv-orderitem { border-top: 1px solid var(--ocv-hairline); }
.ocv-segmented--sm { gap: 6px; }
.ocv-segmented--sm .ocv-btn { padding: 6px 8px; font-size: 13px; min-height: 0; }

/* Four delivery states: da ordinare / ordinato / in magazzino / consegnato. */
.ocv-segmented--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .ocv-segmented--4 { grid-template-columns: repeat(2, 1fr); } }

/* Supplier-order toolbar (count + last export date + Excel/PDF/mark buttons). */
.ocv-orderexport {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px;
	background: var(--ocv-surface); border: 1px solid var(--ocv-hairline); border-radius: 14px;
}
.ocv-orderexport__info { min-width: 0; }
.ocv-orderexport__title { font-weight: 700; }
.ocv-orderexport__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocv-orderexport__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ocv-text-2); }
/* Order line: name + payment chip together on the left. */
.ocv-orderline__title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Send-documents page action row. */
.ocv-sendactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* Row side split into a tags group and an icons group. On a phone (side is a
 * full-width line) each group takes its own line: tags above, icons below. */
.ocv-rowtags, .ocv-rowicons { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The "contatta" button rides at the end of the icons line, pushed to the far
 * right — on a phone (full-width line) that lands it in the bottom-right corner
 * of the card; on desktop the group is content-sized so this is a no-op. */
.ocv-rowicons .ocv-rowcontact { margin-left: auto; }
@media (max-width: 640px) {
	/* Ogni gruppo su una riga a tutta larghezza, contenuto allineato a DESTRA
	 * così i pulsanti azione (contatta, incassa, ecc.) restano a destra. */
	.ocv-rowtags, .ocv-rowicons { flex-basis: 100%; justify-content: flex-end; }
}

/* ================================================================ Magazzino */
.ocv-prodthumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--ocv-fill); flex-shrink: 0; }
.ocv-prodthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Produttore/fornitore: riga piccola a sinistra, subito sotto il nome prodotto. */
.ocv-prodrow__vendor {
	font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
	text-transform: uppercase; color: var(--ocv-blue);
	margin-bottom: 1px;
}
.ocv-prodrow__price { color: var(--ocv-text-2); }
/* Riga filtro categorie del magazzino: tendina + pulsante "Riordina". */
.ocv-catfilter { display: flex; gap: 10px; align-items: center; width: 100%; }
.ocv-catfilter > select { flex: 1; min-width: 0; }
.ocv-catfilter > .ocv-btn { flex-shrink: 0; }
/* Modale "Riordina categorie" */
.ocv-catorder { display: flex; flex-direction: column; gap: 8px; }
.ocv-catorder__row {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 8px 8px 12px;
	border: 0.5px solid var(--ocv-hairline); border-radius: 12px;
	background: var(--ocv-surface);
}
.ocv-catorder__grip { width: 18px; height: 18px; color: var(--ocv-text-3); flex-shrink: 0; }
.ocv-catorder__name { flex: 1; min-width: 0; font-weight: 700; }
.ocv-catorder__btns { display: flex; gap: 4px; flex-shrink: 0; }
.ocv-prodphoto { display: flex; align-items: center; gap: 16px; }
.ocv-prodphoto__preview {
	width: 84px; height: 84px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
	background: var(--ocv-fill); display: flex; align-items: center; justify-content: center;
	box-shadow: inset 0 0 0 1px var(--ocv-hairline);
}
.ocv-prodphoto__preview img { width: 100%; height: 100%; object-fit: cover; }
.ocv-prodphoto__preview { cursor: pointer; transition: outline-color 0.15s var(--ocv-ease); }
.ocv-prodphoto__preview.is-drop { outline: 2px dashed var(--ocv-primary); outline-offset: 3px; background: var(--ocv-primary-tint); }
.ocv-prodphoto__ph svg { width: 30px; height: 30px; color: var(--ocv-text-3); }
.ocv-prodphoto__actions { display: flex; flex-direction: column; gap: 8px; }
/* Bottom action bar for the dedicated product page. */
.ocv-formbar { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* Small colour swatch (settings) instead of a full-width bar. */
.ocv-colorbox {
	width: 54px; height: 40px; padding: 3px; cursor: pointer;
	border: none; box-shadow: inset 0 0 0 1px var(--ocv-hairline-strong);
	border-radius: var(--ocv-radius-sm); background: var(--ocv-surface); appearance: none;
}
.ocv-colorbox::-webkit-color-swatch-wrapper { padding: 0; }
.ocv-colorbox::-webkit-color-swatch { border: none; border-radius: 6px; }
.ocv-colorbox::-moz-color-swatch { border: none; border-radius: 6px; }

/* Compact filter bar at the top of each Statistiche section (dropdowns + pills). */
.ocv-statfilters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 14px; }
.ocv-statfilters__left,
.ocv-statfilters__right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ocv-statfilter { display: flex; align-items: center; gap: 8px; }
.ocv-statfilter > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ocv-text-2); white-space: nowrap; }
.ocv-statfilter .ocv-select { min-width: 150px; }
.ocv-statdate {
	min-width: 150px;
	padding: 8px 12px;
	border: 1px solid var(--ocv-border);
	border-radius: 10px;
	background: var(--ocv-surface);
	color: var(--ocv-text);
	font: inherit;
	line-height: 1.2;
}
@media (max-width: 640px) {
	.ocv-statfilter { flex: 1 1 100%; }
	.ocv-statfilter .ocv-select,
	.ocv-statfilter .ocv-statdate { flex: 1; }
}

/* Presenze: barra filtri con la stessa grafica dell'appello (pill squadra con
   stemma + barra data con le frecce). Neutralizzo i margini/allineamenti pensati
   per il layout verticale dell'appello, così stanno in riga con lo stesso look. */
.ocv-statfilters--att { align-items: center; }
.ocv-statfilters--att .ocv-statfilters__left,
.ocv-statfilters--att .ocv-statfilters__right { align-items: center; gap: 10px 12px; }
/* La pill squadra tiene la sua altezza naturale (niente stretch → niente cerchio). */
.ocv-statfilters--att .ocv-teamfilter { align-self: center; min-height: 52px; }
/* La barra data riempie lo spazio disponibile e resta alta come gli altri
   controlli (pill squadra / toggle), invece di svettare come una card grande. */
.ocv-statfilters--att .ocv-statfilters__right { flex: 1 1 auto; }
.ocv-datebar--stat { margin-bottom: 0; flex: 1 1 auto; min-width: 240px; padding: 3px 6px; }
.ocv-datebar--stat .ocv-datebar__date { min-height: 44px; font-size: 16px; }
.ocv-datebar--stat > .ocv-btn { min-height: 44px; }
.ocv-datebar--stat > .ocv-btn svg { width: 22px; height: 22px; }
/* Toggle Allenamenti/Partite alto come gli altri controlli (no margine extra). */
.ocv-statfilters--att .ocv-filters { margin-bottom: 0; padding-bottom: 0; align-self: center; }
.ocv-statfilters--att .ocv-pill { min-height: 52px; }
@media (max-width: 640px) {
	.ocv-statfilters--att .ocv-statfilters__left,
	.ocv-statfilters--att .ocv-statfilters__right { flex: 1 1 100%; }
	.ocv-statfilters--att .ocv-teamfilter { width: 100%; }
	.ocv-datebar--stat { flex: 1 1 100%; }
}

/* Badge percentuale presenze: pillola con colore a gradiente (verde→rosso),
   il colore vero e proprio è impostato inline in base alla percentuale. */
.ocv-ratebadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	padding: 6px 13px;
	border-radius: var(--ocv-pill);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ocv-paidbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-fill);
}

.ocv-cart {
	position: sticky;
	top: 0;
}

/* Leave room for the fixed top navbar when "Vai al carrello" scrolls here. */
.ocv-cart-host { scroll-margin-top: calc(var(--ocv-navbar) + 12px); }

/*
 * Floating "Vai al carrello" shortcut. Hidden on wide screens (the cart column
 * sits next to the catalogue); it only earns its keep on phones/tablets where
 * the cart stacks below and needs a scroll. The stacked breakpoint (1100px)
 * matches the .ocv-shop single-column switch below.
 */
.ocv-cart-jump {
	display: none;
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	/* Sopra la barra di navigazione in basso dei telefoni (z-index 60). */
	z-index: 61;
	align-items: center;
	gap: 9px;
	padding: 13px 22px;
	border: 0;
	border-radius: var(--ocv-pill);
	background: var(--ocv-primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ocv-cart-jump__ic { width: 20px; height: 20px; stroke-width: 1.8; }

.ocv-cart-jump__count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 13px;
	font-weight: 800;
}
.ocv-cart-jump__count:empty { display: none; }

@media (max-width: 1100px) {
	.ocv-cart-jump { display: inline-flex; }
	/* is-hidden slides the pill away without reflowing anything. */
	.ocv-cart-jump.is-hidden {
		opacity: 0;
		transform: translateX(-50%) translateY(140%);
		pointer-events: none;
	}
}

/* Sui telefoni compare la barra di navigazione in basso (~74px + safe-area):
   solleviamo il pulsante sopra di essa così non lo copre. */
@media (max-width: 640px) {
	.ocv-cart-jump { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

.ocv-cart__line {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
	border-bottom: 0.5px solid var(--ocv-hairline);
}

.ocv-cart__line-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.ocv-cart__line-bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ocv-cart__line-name {
	font-weight: 600;
	font-size: 15px;
	min-width: 0;
}

.ocv-cart__line-total { flex-shrink: 0; }

.ocv-cart__line-meta {
	font-size: 13px;
	color: var(--ocv-text-3);
	min-width: 0;
}

/* Prezzo modificabile + stepper quantità, affiancati e compatti: fa posto al
   prezzo senza far crescere l'altezza della riga (richiesta di Matteo — il
   carrello con tanti articoli occupava troppo spazio verticale). */
.ocv-cart__line-ctrls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ocv-cart__pricefield {
	display: flex;
	align-items: center;
	gap: 2px;
	background: var(--ocv-fill);
	border-radius: 10px;
	padding: 4px 8px;
}

.ocv-cart__pricelbl { font-size: 12px; color: var(--ocv-text-3); }

.ocv-cart__price {
	width: 48px;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
	padding: 0;
	-moz-appearance: textfield;
}

.ocv-cart__price::-webkit-outer-spin-button,
.ocv-cart__price::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Stepper quantità del carrello (nome dedicato: "ocv-qty" è già usato dal
   selettore quantità delle Attività, con un layout tutto diverso — stesso
   nome avrebbe fatto scontrare i due stili). Più compatto della versione
   precedente (36px invece di 44px) per lasciare spazio al prezzo modificabile
   sulla stessa riga senza far crescere l'altezza di ogni prodotto. */
.ocv-cartqty {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	background: var(--ocv-fill);
	border-radius: var(--ocv-pill);
	padding: 2px;
}

.ocv-cartqty__btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ocv-primary);
	line-height: 1;
}

.ocv-cartqty__btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

.ocv-cartqty__val {
	min-width: 20px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.ocv-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 8px;
	padding: 14px 2px 2px;
	border-top: 1px solid var(--ocv-hairline);
	font-size: 16px;
	font-weight: 600;
	color: var(--ocv-text);
}

.ocv-total__value {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Kit prodotto */

/* Editor componenti nel form prodotto (Magazzino): una riga per componente
   fisso, un blocchetto per un gruppo alternativo "o questo o quello". */
.ocv-kitslots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ocv-kitslot { display: flex; align-items: center; gap: 8px; }
.ocv-kitslot select { flex: 1; }
.ocv-kitslot--choice {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 10px;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-fill);
}
.ocv-kitslot__head { display: flex; align-items: center; justify-content: space-between; }
.ocv-kitslot__lbl { font-weight: 600; font-size: 13px; color: var(--ocv-text-2); }
.ocv-kitslot__altrow { display: flex; align-items: center; gap: 8px; }
.ocv-kitslot__altrow select { flex: 1; }
.ocv-kitslot__or { font-size: 12px; color: var(--ocv-text-3); flex-shrink: 0; width: 48px; }
.ocv-kitslot__add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* "Componi il kit" (vetrina) e dialog "Cambia taglia/prodotto" (ordine). */
.ocv-kitcompose { display: flex; flex-direction: column; gap: 16px; }
.ocv-kitcomposerow { display: flex; flex-direction: column; gap: 8px; }
.ocv-kitcomposerow__lbl { font-weight: 600; font-size: 14px; }
.ocv-kitcomposerow__prodname { font-size: 13px; color: var(--ocv-text-3); }
.ocv-kitalt { display: flex; flex-wrap: wrap; gap: 8px; }

/* Carrello: le righe di un kit impilate in un unico blocco (niente stepper
   quantità per componente — un kit si aggiunge/rimuove come unità). */
.ocv-cart__line--kit { gap: 8px; }
.ocv-kitcartlist { display: flex; flex-direction: column; gap: 4px; padding-left: 4px; }
.ocv-kitcartlist__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: var(--ocv-text-3);
}

/* Dettaglio ordine: blocco kit che racchiude header + componenti. */
.ocv-kitoblock {
	border: 0.5px solid var(--ocv-hairline);
	border-radius: var(--ocv-radius-sm);
	padding: 10px 12px;
	margin-bottom: 10px;
}
.ocv-kitoblock__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ocv-kitoblock__name { font-weight: 700; flex: 1; }
.ocv-kitoblock__items .ocv-oitem { padding-left: 8px; }
.ocv-kitoblock__items .ocv-oitem + .ocv-oitem { margin-top: 6px; }

/* -------------------------------------------------------------- Modals */

.ocv-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.28);
	animation: ocv-fade 0.16s var(--ocv-ease);
}

.ocv-modal__panel {
	background: var(--ocv-surface);
	border-radius: var(--ocv-radius-xl);
	width: 100%;
	max-width: 580px;
	max-height: 88dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: var(--ocv-shadow-pop);
	animation: ocv-pop 0.2s var(--ocv-ease);
}

.ocv-modal__panel--wide {
	max-width: 880px;
}

.ocv-modal__panel--xwide {
	max-width: 1100px;
	width: 96vw;
}

/* Popup di incasso (Amministrazione/Store/Attività): un filo più grande. */
.ocv-modal__panel--pay {
	max-width: 660px;
}

/* Guida alle CHIAVI (segnaposto) dei messaggi: esempio + elenco per categoria. */
.ocv-keysexample { margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--ocv-radius); background: var(--ocv-fill); font-size: 14px; }
.ocv-keysexample__lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ocv-text-3); margin-bottom: 6px; }
.ocv-keysexample__out { color: var(--ocv-text-2); margin-top: 4px; }
.ocv-keysgrp { margin-top: 16px; }
.ocv-keysgrp__title { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ocv-text-3); margin-bottom: 8px; }
.ocv-keyslist { display: flex; flex-direction: column; gap: 8px; }
.ocv-keyrow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--ocv-hairline); border-radius: 10px; }
.ocv-keyrow__key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 700; color: var(--ocv-primary); background: var(--ocv-primary-tint); padding: 3px 8px; border-radius: 7px; flex-shrink: 0; }
.ocv-keyrow__desc { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ocv-text-2); }
.ocv-keyrow__copy { flex-shrink: 0; border: 0; background: var(--ocv-fill); color: var(--ocv-text); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.ocv-keyrow__copy:hover { background: var(--ocv-hairline); }
.ocv-keyrow__copy.is-done { background: var(--ocv-green-tint); color: var(--ocv-green); }

@keyframes ocv-pop {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: none; }
}

.ocv-modal__head {
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	border-bottom: 0.5px solid var(--ocv-hairline);
}

.ocv-modal__title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	flex: 1;
	min-width: 0;
}

.ocv-modal__close {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: var(--ocv-fill);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ocv-text-2);
	flex-shrink: 0;
}

.ocv-modal__close:hover {
	background: var(--ocv-fill-2);
}

.ocv-modal__close svg {
	width: 17px;
	height: 17px;
	stroke-width: 2.6;
}

.ocv-modal__body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}

.ocv-modal__foot {
	padding: 16px 20px;
	border-top: 0.5px solid var(--ocv-hairline);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-shrink: 0;
	flex-wrap: wrap;
}

/* ------------------------------------------------- Role preview banner */

/*
 * Impossible to miss on purpose: someone who forgets they are previewing would
 * think the app is broken when a save is refused.
 */
/* Striscia sottile "nuova versione" in cima, su tutte le pagine (shell + login).
   In-flow come la barra preview, così resta sempre visibile e non si sovrappone
   alla navbar. Non chiudibile. */
.ocv-verband {
	flex: 0 0 auto;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: var(--ocv-primary);
	color: #fff;
	text-align: center;
}
.ocv-verband__txt {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Login: colonna a tutta altezza con il banner sopra e il form che riempie. */
.ocv-authshell {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}
.ocv-authshell .ocv-pinlogin {
	flex: 1 1 auto;
	min-height: 0;
}
@media (max-width: 480px) {
	.ocv-verband { height: 28px; }
	.ocv-verband__txt { font-size: 11.5px; }
}

.ocv-previewbar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--ocv-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.01em;
	z-index: 11;
}

.ocv-previewbar svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ocv-previewbar__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ocv-previewbar__exit {
	border: none;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 14px;
	border-radius: var(--ocv-pill);
	cursor: pointer;
	flex-shrink: 0;
	min-height: 34px;
}

.ocv-previewbar__exit:hover {
	background: rgba(255, 255, 255, 0.32);
}

@media (max-width: 720px) {
	.ocv-previewbar {
		font-size: 13px;
		padding: 8px 12px;
	}
}

/* -------------------------------------------------------------- Toasts */

.ocv-toasts {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	pointer-events: none;
	width: calc(100% - 32px);
	max-width: 420px;
}

.ocv-toast {
	background: rgba(28, 28, 30, 0.92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #fff;
	padding: 13px 18px;
	border-radius: var(--ocv-radius);
	font-weight: 500;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	animation: ocv-toast-in 0.22s var(--ocv-ease);
	width: 100%;
	box-shadow: var(--ocv-shadow-pop);
}

.ocv-toast svg {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
}

.ocv-toast--success { background: rgba(52, 199, 89, 0.96); }
.ocv-toast--error { background: rgba(255, 59, 48, 0.96); }
.ocv-toast--warn { background: rgba(255, 149, 0, 0.96); }

@keyframes ocv-toast-in {
	from { opacity: 0; transform: translateY(16px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- Empty state */

.ocv-empty {
	padding: 56px 24px;
	text-align: center;
	color: var(--ocv-text-2);
}

.ocv-empty__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	color: var(--ocv-text-3);
	opacity: 0.5;
}

.ocv-empty__icon svg {
	width: 100%;
	height: 100%;
	stroke-width: 1.5;
}

.ocv-empty__title {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ocv-text);
	margin-bottom: 6px;
}

.ocv-empty__text {
	font-size: 15px;
	margin-bottom: 20px;
}

/* -------------------------------------------------------------- Charts */

.ocv-bars {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ocv-bar__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 14px;
}

.ocv-bar__name {
	font-weight: 500;
	flex: 1;
	min-width: 0;
	/* Nome su max 2 righe invece di taglio secco su una riga. */
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ocv-bar__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ocv-bar__track {
	height: 22px;
	border-radius: var(--ocv-pill);
	background: var(--ocv-fill);
	overflow: hidden;
}

.ocv-bar__fill {
	height: 100%;
	border-radius: var(--ocv-pill);
	background: var(--ocv-primary);
	transition: width 0.4s var(--ocv-ease);
	min-width: 3px;
}

.ocv-columns {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 200px;
	padding-top: 22px;
}

/* Area/line chart for time series (income trend, forecast). */
.ocv-area__svg { display: block; width: 100%; height: 140px; }
.ocv-area__axis { display: flex; margin-top: 8px; gap: 2px; }
.ocv-area__tick { flex: 1 1 0; min-width: 0; text-align: center; font-size: 11px; color: var(--ocv-text-3); }
.ocv-area__tick strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ocv-text); white-space: nowrap; }
.ocv-area__tick span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Donut/pie chart (conic-gradient ring + legend). */
.ocv-donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ocv-donut__ring { width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; position: relative; }
.ocv-donut__ring::after { content: ''; position: absolute; inset: 32px; background: var(--ocv-surface); border-radius: 50%; }
.ocv-donut__legend { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ocv-donut__item { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.ocv-donut__swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.ocv-donut__label { font-weight: 500; }
.ocv-donut__val { color: var(--ocv-text-2); margin-left: auto; padding-left: 12px; }

.ocv-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	height: 100%;
	min-width: 0;
}

.ocv-column__bar {
	width: 100%;
	background: var(--ocv-primary);
	border-radius: 8px 8px 4px 4px;
	min-height: 3px;
	position: relative;
	transition: height 0.4s var(--ocv-ease);
}

/* Mese senza dati: rettangolo leggero trasparente (ghost), a piena altezza
   e tratteggiato, con lo "0%" sopra. Distingue i mesi non ancora giocati. */
.ocv-column__bar--empty {
	height: 100%;
	background: transparent;
	border: 1px dashed var(--ocv-hairline-strong);
	box-shadow: none;
}

.ocv-column__val {
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--ocv-text-2);
	font-variant-numeric: tabular-nums;
}

.ocv-column__label {
	font-size: 11px;
	color: var(--ocv-text-3);
	font-weight: 500;
	/* Etichetta su max 2 righe invece di taglio secco. */
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
}

/* --------------------------------------------------------------- Table */

.ocv-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ocv-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
	/* Larghezze fisse: senza, le colonne numeriche strette (G/V/N/P…) si
	   accalcano a sinistra e lasciano un vuoto a destra sulle card larghe. */
	table-layout: fixed;
}

.ocv-table th {
	text-align: left;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ocv-text-2);
	border-bottom: 0.5px solid var(--ocv-hairline);
	white-space: nowrap;
	background: var(--ocv-surface);
}

.ocv-table td {
	padding: 14px;
	border-bottom: 0.5px solid var(--ocv-hairline);
	font-size: 16px;
}

/* Colonne numeriche a larghezza fissa e uguale, per allinearle in griglia
   pulita invece di lasciarle accalcate accanto alla prima colonna. */
.ocv-table th.ocv-num, .ocv-table td.ocv-num {
	width: 60px;
}

.ocv-table tbody tr:last-child td {
	border-bottom: none;
}

/* Su mobile il nome squadra è ridondante (si è già dentro la pagina di quella
   squadra, il titolo sopra lo dice): si nasconde e tutto lo spazio va alle
   colonne numeriche, che così si leggono meglio invece di stare accalcate. */
@media (max-width: 600px) {
	.ocv-table { min-width: 0; }
	.ocv-table th, .ocv-table td { padding: 8px 4px; font-size: 13px; }
	.ocv-table th:first-child, .ocv-table td:first-child { display: none; }
	.ocv-table th.ocv-num, .ocv-table td.ocv-num { width: auto; }
}

.ocv-num {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}
/* .ocv-table th ha già text-align:left con specificità maggiore di .ocv-num:
   senza questa regola più specifica gli header numerici restano a sinistra
   mentre i valori sotto vanno a destra, disallineati tra loro. */
.ocv-table th.ocv-num { text-align: right; }
.ocv-num--pos { color: var(--ocv-green); }
.ocv-num--neg { color: var(--ocv-red); }

/* Nome squadra + stemma nella prima colonna delle tabelle classifica. */
.ocv-table__team { display: flex; align-items: center; gap: 10px; }
.ocv-table__team .ocv-initials { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }

/* --------------------------------------------------------------- Utils */

.ocv-money {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: -0.02em;
}

.ocv-money--due { color: var(--ocv-red); }
.ocv-money--ok { color: var(--ocv-green); }
.ocv-money--muted { color: var(--ocv-grey); }

/* Finanze: importo con, sotto, cosa deve pagare — tutto allineato a destra. */
.ocv-duecell {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}
.ocv-duecell .ocv-money--due { font-size: 17px; }
.ocv-duecell__ref {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ocv-text-2);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ocv-muted { color: var(--ocv-text-2); }
.ocv-strong { font-weight: 600; }
.ocv-center { text-align: center; }
.ocv-mt { margin-top: 16px; }
.ocv-mb { margin-bottom: 16px; }
.ocv-hide { display: none !important; }

.ocv-spinner-inline {
	width: 20px;
	height: 20px;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ocv-spin 0.7s linear infinite;
}

.ocv-loading {
	padding: 60px;
	text-align: center;
	color: var(--ocv-text-3);
	font-size: 15px;
}

/* --------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.ocv-shop {
		grid-template-columns: 1fr;
	}

	.ocv-cart {
		position: static;
	}
}

/* Tablet portrait: the shape this app is designed around. */
@media (max-width: 900px) {
	.ocv-launcher__grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: 560px;
		gap: 32px 20px;
	}
}

@media (max-width: 720px) {
	:root {
		--ocv-gap: 16px;
		--ocv-navbar: 54px;
	}

	.ocv-launcher {
		justify-content: flex-start;
		padding: 28px 20px 48px;
		gap: 30px;
		/*
		 * A pitch this wide inside a tall phone shows as a cropped band across
		 * the middle: stray lines, not a pitch. Better nothing than a hint.
		 */
		background-image: none;
	}

	.ocv-launcher__greeting {
		font-size: 28px;
	}

	.ocv-launcher__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 26px 12px;
	}

	.ocv-launch__icon {
		width: 96px;
		height: 96px;
		border-radius: 22px;
	}

	.ocv-launch__icon svg {
		width: 48px;
		height: 48px;
	}

	.ocv-launch__label {
		font-size: 14px;
	}

	.ocv-launch__badge {
		margin-right: -52px;
		min-width: 26px;
		height: 26px;
	}

	.ocv-page-title {
		font-size: 28px;
	}

	.ocv-navbar__title {
		max-width: 40vw;
	}

	.ocv-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.ocv-stat__value {
		font-size: 23px;
	}

	.ocv-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.ocv-grid,
	.ocv-grid--2 {
		grid-template-columns: 1fr;
	}

	/* Sheets slide up from the bottom edge, as on iOS. */
	.ocv-modal {
		padding: 0;
		align-items: flex-end;
	}

	.ocv-modal__panel {
		max-width: 100%;
		max-height: 92dvh;
		border-radius: var(--ocv-radius-xl) var(--ocv-radius-xl) 0 0;
		animation: ocv-sheet-up 0.28s var(--ocv-ease);
	}

	@keyframes ocv-sheet-up {
		from { transform: translateY(100%); }
		to { transform: none; }
	}

	.ocv-modal__foot .ocv-btn {
		flex: 1;
	}

	.ocv-sheet {
		align-items: flex-end;
		justify-content: center;
		padding: 0;
	}

	.ocv-menu {
		width: 100%;
		max-width: 100%;
		border-radius: var(--ocv-radius-xl) var(--ocv-radius-xl) 0 0;
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		max-height: 80dvh;
		animation: ocv-sheet-up 0.28s var(--ocv-ease);
		transform-origin: bottom center;
	}

	.ocv-menu__item {
		min-height: 50px;
		font-size: 17px;
	}

	.ocv-att-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.ocv-att-btns {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.ocv-att-btn {
		width: 100%;
	}

	.ocv-page-head__actions {
		width: 100%;
		margin-left: 0;
	}

	.ocv-page-head__actions .ocv-btn {
		flex: 1;
	}

	/*
	 * In the top bar there isn't room for a text label on every action once a
	 * section has more than one. Collapse icon+label actions to their icon
	 * (the label survives as the button's title/aria-label), so the bar never
	 * overflows or squashes controls on phones and small tablets.
	 */
	.ocv-navbar__head .ocv-page-head__actions {
		gap: 6px;
	}

	.ocv-navbar__head .ocv-page-head__actions .ocv-btn--iconlabel .ocv-btn__label {
		display: none;
	}

	.ocv-navbar__head .ocv-page-head__actions .ocv-btn--iconlabel {
		padding-left: 12px;
		padding-right: 12px;
		gap: 0;
	}

	.ocv-products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * 3 icons still fit an iPhone: 84px icons + gaps come to ~311px of the 335px
 * available. Dropping to 2 columns here would only add scrolling.
 */
@media (max-width: 400px) {
	.ocv-brandname {
		display: none;
	}
}

@media (max-width: 340px) {
	.ocv-launcher__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ocv-tiles,
	.ocv-products {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.ocv-navbar,
	.ocv-page-head__actions {
		display: none !important;
	}

	.ocv-view {
		overflow: visible;
		height: auto;
	}
}

/* ── Iscrizione / prova: box stato nella scheda atleta ── */
.ocv-trialbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-amber-tint);
	border: 1px solid color-mix(in srgb, var(--ocv-amber) 40%, white);
}

.ocv-trialbox--expired {
	background: var(--ocv-red-tint);
	border-color: color-mix(in srgb, var(--ocv-red) 45%, white);
}

.ocv-trialbox__title {
	font-weight: 700;
	font-size: 15px;
	color: var(--ocv-text);
}

.ocv-trialbox--expired .ocv-trialbox__title {
	color: var(--ocv-red);
}

.ocv-trialbox__count {
	font-size: 13px;
	color: var(--ocv-text-2);
	margin-top: 2px;
}

.ocv-mchips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ocv-mchip {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	letter-spacing: 0.01em;
}

/* Status chips near the name read as the headline state, so make them pop. */
.ocv-idcard__status .ocv-mchip,
.ocv-idcard__badges .ocv-mchip {
	font-size: 13.5px;
	padding: 7px 15px;
	box-shadow: var(--ocv-shadow-card);
}

.ocv-mchip--member {
	background: var(--ocv-green-tint);
	color: color-mix(in srgb, var(--ocv-green) 75%, black);
}

.ocv-mchip--figc {
	background: var(--ocv-primary-tint);
	color: var(--ocv-primary);
}

.ocv-mchip--figc-pending {
	background: var(--ocv-amber-tint);
	color: color-mix(in srgb, var(--ocv-amber) 82%, black);
}

.ocv-mchip--figc-rejected {
	background: var(--ocv-red-tint);
	color: var(--ocv-red);
}

.ocv-mchip--off {
	background: color-mix(in srgb, var(--ocv-text-3) 16%, white);
	color: var(--ocv-text-2);
}

/* ── Badge di stato nella lista atleti (accanto al certificato) ── */
.ocv-lbadge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.ocv-lbadge--red {
	background: var(--ocv-red-tint);
	color: var(--ocv-red);
}

.ocv-lbadge--amber {
	background: var(--ocv-amber-tint);
	color: color-mix(in srgb, var(--ocv-amber) 82%, black);
}

.ocv-lbadge--navy {
	background: var(--ocv-primary-tint);
	color: var(--ocv-primary);
}

.ocv-lbadge--green {
	background: var(--ocv-green-tint);
	color: color-mix(in srgb, var(--ocv-green) 72%, black);
}

/* Flag "ci sono note scritte": icona documento che lampeggia accanto ai badge
   dell'atleta (elenco atleti / giocatori in prova). Il tooltip mostra la nota. */
.ocv-notesflag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	color: var(--ocv-red);
	background: var(--ocv-red-tint);
	cursor: help;
	flex-shrink: 0;
	animation: ocv-notesflag-blink 1.3s ease-in-out infinite;
}
.ocv-notesflag svg { width: 14px; height: 14px; }
/* Versione pulsante (giocatori in prova): grande come il tasto Modifica (40px) e
   cliccabile → apre il form di modifica. */
.ocv-notesflag--btn {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 11px;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ocv-notesflag--btn svg { width: 20px; height: 20px; }
.ocv-notesflag--btn:active { transform: scale(0.94); }
@keyframes ocv-notesflag-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
	.ocv-notesflag { animation: none; }
}

/* ── Due menu a tendina di stato (iscrizione / tesseramento) nella lista ── */
.ocv-statefilters {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 2px 0 14px;
}

/* Second row of filter pills (payment type in Finanze). */
.ocv-subfilters { margin-top: 8px; }

/* An extra reference line under a list row (e.g. what an athlete owes for). */
.ocv-row__note {
	font-size: 12px;
	font-weight: 600;
	color: var(--ocv-primary);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ocv-statefilter {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 180px;
	min-width: 160px;
}

.ocv-statefilter__lab {
	font-size: 11px;
	font-weight: 700;
	color: var(--ocv-text-3);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ── Pagina "Giocatori in prova" ── */
.ocv-trialprog {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
	text-align: right;
}
/* Variante cliccabile del badge d'allerta (es. "documenti da firmare" nell'elenco
   giocatori in prova): stessa grafica del badge degli atleti iscritti. */
.ocv-albadge--btn {
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}
.ocv-albadge--btn:hover { filter: brightness(0.94); }
.ocv-trialprog__date {
	font-size: 12px;
	font-weight: 600;
	color: var(--ocv-text-3);
}
.ocv-trialprog__sess {
	font-size: 13px;
	font-weight: 700;
	color: var(--ocv-primary);
}
.ocv-trialprog__sess.is-expired {
	color: var(--ocv-red);
}

.ocv-trial-alert {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-red-tint);
	color: var(--ocv-red);
	font-size: 13.5px;
	font-weight: 600;
}

.ocv-lbadge--grey {
	background: color-mix(in srgb, var(--ocv-text-3) 18%, white);
	color: var(--ocv-text-2);
}

/* -------------------------------------------------------- PIN login gate */

.ocv-pinlogin {
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--ocv-bg);
}

.ocv-pinlogin__card {
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	padding: 28px 24px 24px;
	border-radius: var(--ocv-radius-lg);
	background: var(--ocv-surface, #fff);
	box-shadow: var(--ocv-shadow-card);
	text-align: center;
}

.ocv-pinlogin__logo {
	width: 84px;
	height: 84px;
	object-fit: contain;
	margin: 0 auto 6px;
}

.ocv-pinlogin__badge {
	width: 72px;
	height: 72px;
	margin: 0 auto 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ocv-primary-tint);
}

.ocv-pinlogin__badge-icon {
	width: 38px;
	height: 38px;
	color: var(--ocv-primary);
}

.ocv-pinlogin__club {
	margin: 6px 0 2px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ocv-text);
}

.ocv-pinlogin__hint {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--ocv-text-2);
}

.ocv-pinlogin__label {
	align-self: flex-start;
	margin: 12px 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ocv-text-2);
}

.ocv-pinlogin .ocv-input {
	text-align: center;
}

.ocv-pinlogin__error {
	min-height: 20px;
	margin: 10px 0 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ocv-red);
}

.ocv-pinlogin .ocv-btn {
	margin-top: 6px;
}

.ocv-pinlogin__install {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 16px;
	width: 100%;
	border: 1px solid var(--ocv-border, #d9dde3);
	border-radius: 12px;
	background: #fff;
	color: var(--ocv-primary);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.ocv-pinlogin__install:hover {
	background: #f6f8fb;
}

.ocv-pinlogin__install-icon {
	width: 18px;
	height: 18px;
}

/* ------------------------------------------------- PIN management (staff) */

.ocv-pinrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ocv-text);
}

.ocv-pinrow__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ocv-text-3);
	flex: none;
}

.ocv-pinrow__dot.is-on {
	background: var(--ocv-green, #34c759);
}

.ocv-pinreveal {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: var(--ocv-radius-sm);
	background: var(--ocv-primary-tint);
}

.ocv-pinreveal__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ocv-text-2);
}

.ocv-pinreveal__code {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--ocv-primary);
}

.ocv-pinactions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.ocv-pincustom {
	display: flex;
	gap: 8px;
}

.ocv-pincustom .ocv-input {
	flex: 1;
}

/* ---- Self-registration: "da completare" banner on the athlete sheet ---- */
.ocv-pendbanner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 14px;
	background: var(--ocv-blue-tint);
	border: 1px solid var(--ocv-blue);
	border-radius: var(--ocv-radius);
}
.ocv-pendbanner__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--ocv-blue);
	color: #fff;
}
.ocv-pendbanner__icon svg { width: 22px; height: 22px; }
.ocv-pendbanner__body { flex: 1; min-width: 0; }
.ocv-pendbanner__title { font-weight: 700; font-size: 16px; color: var(--ocv-primary); }
.ocv-pendbanner__text { font-size: 14px; color: var(--ocv-text-2); margin-top: 2px; line-height: 1.4; }

/* ---- Self-registration: office panel (Iscrizioni) ---- */
.ocv-regadmin__link { display: flex; flex-direction: column; gap: 14px; }
.ocv-regadmin__hint { margin: 0; font-size: 14.5px; color: var(--ocv-text-2); line-height: 1.45; }
.ocv-regadmin__switch { padding: 4px 0; }
.ocv-regadmin__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ocv-regadmin__row > .ocv-input,
.ocv-regadmin__row > input { flex: 1; min-width: 200px; }
.ocv-regadmin__wa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ocv-regadmin__wa > .ocv-input,
.ocv-regadmin__wa > input { flex: 1; min-width: 200px; }
.ocv-regadmin__share { display: flex; gap: 10px; flex-wrap: wrap; }
/* "Rigenera link" is a reset action: set it apart, below a light divider. */
.ocv-regadmin__reset { display: flex; justify-content: flex-start; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--ocv-border); }

.ocv-regqr {
	display: flex;
	justify-content: center;
	padding: 12px;
	background: var(--ocv-bg-soft);
	border-radius: var(--ocv-radius);
}
.ocv-regqr__img { width: 220px; height: 220px; image-rendering: pixelated; border-radius: 8px; background: #fff; }
.ocv-regqr__ph { color: var(--ocv-text-2); font-size: 14px; padding: 40px 0; }

.ocv-regpending { min-height: 40px; }
.ocv-regadmin > .ocv-card + .ocv-card { margin-top: 16px; }

/* ---------------------------------------------------------------- Comunicazioni */

/* The envelope is a plain ghost icon button, identical to Refresh (it reuses
   .ocv-btn.ocv-btn--ghost.ocv-btn--icon); this only adds the badge anchor and,
   when a message is unread, a red pulsing outline on the same white button. */
.ocv-dash__envslot { display: inline-flex; }
.ocv-dash__envelope { position: relative; }
/* A slightly bigger envelope glyph than the other tool buttons. */
.ocv-dash__envelope svg.ocv-btn__icon { width: 27px; height: 27px; }
/* A plain unread message: red envelope icon + a red outline + the count badge. */
.ocv-dash__envelope--unread {
	color: var(--ocv-red);
	box-shadow: inset 0 0 0 1px var(--ocv-red);
}
/* An urgent one wins the look entirely: the whole button goes red, the icon
   white, and it pulses. */
.ocv-dash__envelope--urgent {
	background: var(--ocv-red);
	color: #fff;
	border: none;
	animation: ocv-env-pulse 1.7s ease-in-out infinite;
}
.ocv-dash__envelope--urgent .ocv-dash__envbadge { background: #fff; color: var(--ocv-red); }
@keyframes ocv-env-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.5); }
	70%  { box-shadow: 0 0 0 11px rgba(214, 40, 40, 0); }
	100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ocv-dash__envelope--urgent { animation: none; }
}
.ocv-dash__envbadge {
	position: absolute; top: -5px; right: -5px;
	min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 10px;
	background: var(--ocv-red); color: #fff;
	font-size: 12.5px; font-weight: 800; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--ocv-surface);
}

/* Lampeggio netto (rosso ↔ rosso chiaro) per lo stato urgente della bustina. */
@keyframes ocv-env-flash {
	0%, 100% { background: var(--ocv-red); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); }
	50%      { background: #ff6b62; box-shadow: 0 0 0 5px rgba(255, 59, 48, 0); }
}
.ocv-dash__envelope--urgent { animation: ocv-env-flash 0.9s ease-in-out infinite; }

/* --- Bustina Comunicazioni nella barra in alto: presente su TUTTE le pagine. --- */
.ocv-navenv-slot { display: inline-flex; }
.ocv-navenv { position: relative; }
.ocv-navenv .ocv-btn__icon { width: 24px; height: 24px; }
.ocv-navenv--unread { color: var(--ocv-red); box-shadow: inset 0 0 0 1px var(--ocv-red); }
.ocv-navenv--urgent {
	background: var(--ocv-red); color: #fff; border: none;
	animation: ocv-env-flash 0.9s ease-in-out infinite;
}
.ocv-navenv__badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
	background: var(--ocv-red); color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--ocv-surface);
}
.ocv-navenv--urgent .ocv-navenv__badge { background: #fff; color: var(--ocv-red); border-color: var(--ocv-red); }

/* Badge sulla voce "Posta" della barra in basso (mobile). */
.ocv-bottombar__item { position: relative; }
.ocv-bottombar__badge {
	position: absolute; top: 5px; left: calc(50% + 7px);
	min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
	background: var(--ocv-red); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.ocv-bottombar__badge--urgent { animation: ocv-env-flash 0.9s ease-in-out infinite; }
.ocv-bottombar__badge[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ocv-navenv--urgent, .ocv-dash__envelope--urgent, .ocv-bottombar__badge--urgent { animation: none; }
}

/* Inbox list */
.ocv-msglist { display: flex; flex-direction: column; gap: 10px; }
.ocv-msgrow {
	display: flex; gap: 12px; align-items: flex-start;
	width: 100%; text-align: left;
	padding: 14px 16px;
	border-radius: var(--ocv-radius-lg);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer; font: inherit; color: var(--ocv-text);
	transition: transform 0.15s var(--ocv-ease), box-shadow 0.15s var(--ocv-ease);
}
.ocv-msgrow:hover { transform: translateY(-1px); box-shadow: var(--ocv-shadow-pop); }
.ocv-msgrow__avatar { flex-shrink: 0; }
.ocv-msgrow__avatar .ocv-initials { width: 42px; height: 42px; }
.ocv-msgrow__main { flex: 1; min-width: 0; }
.ocv-msgrow__top { display: flex; align-items: center; gap: 8px; }
.ocv-msgrow__subject { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocv-msgrow__urgent {
	flex-shrink: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
	color: var(--ocv-red); background: var(--ocv-red-tint);
	padding: 1px 7px; border-radius: var(--ocv-pill);
}
.ocv-msgrow__meta { font-size: 12.5px; color: var(--ocv-text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocv-msgrow__snippet { font-size: 13.5px; color: var(--ocv-text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocv-msgrow__side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ocv-msgrow__time { font-size: 12px; color: var(--ocv-text-3); white-space: nowrap; }
.ocv-msgrow__dot {
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--ocv-red); color: #fff; font-size: 11px; font-weight: 800;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
/* Unread threads stand out with a bold subject and a faint tinted background
   (blue normally, red when the thread is urgent) — no coloured left bar. */
.ocv-msgrow--unread .ocv-msgrow__subject { font-weight: 800; }
.ocv-msgrow--unread {
	background: color-mix(in srgb, var(--ocv-primary) 7%, var(--ocv-surface));
	border-color: color-mix(in srgb, var(--ocv-primary) 30%, var(--ocv-hairline));
}
.ocv-msgrow--unread.ocv-msgrow--urgent {
	background: color-mix(in srgb, var(--ocv-red) 7%, var(--ocv-surface));
	border-color: color-mix(in srgb, var(--ocv-red) 30%, var(--ocv-hairline));
}

/* Thread */
.ocv-thread { display: flex; flex-direction: column; }
.ocv-thread__head { padding: 2px 2px 12px; }
.ocv-thread__subject { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.ocv-thread__audience { font-size: 13px; color: var(--ocv-text-3); margin-top: 3px; }
/* Traditional message list: entries stacked left-aligned, each with the writer,
   the date and time, then the text below — like an email thread. */
.ocv-thread__stream {
	display: flex; flex-direction: column;
	padding: 4px 0; max-height: 58vh; overflow-y: auto;
}
.ocv-msgline {
	padding: 12px 2px;
	border-bottom: 0.5px solid var(--ocv-hairline);
}
.ocv-msgline:last-child { border-bottom: none; }
.ocv-msgline__head {
	display: flex; align-items: center; gap: 9px;
	margin-bottom: 5px;
}
.ocv-msgline__avatar { flex-shrink: 0; }
.ocv-msgline__avatar .ocv-initials { width: 30px; height: 30px; font-size: 12px; }
.ocv-msgline__who { font-size: 14px; font-weight: 800; color: var(--ocv-text); }
.ocv-msgline__when { font-size: 12.5px; color: var(--ocv-text-3); }
.ocv-msgline__body { font-size: 14.5px; line-height: 1.5; color: var(--ocv-text); word-break: break-word; padding-left: 39px; }

/* Staff photo control in the user form. */
.ocv-staffphoto { display: flex; align-items: center; gap: 14px; }
.ocv-staffphoto__preview {
	width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
	background: var(--ocv-fill); border: 0.5px solid var(--ocv-hairline);
	display: flex; align-items: center; justify-content: center;
}
.ocv-staffphoto__preview img { width: 100%; height: 100%; object-fit: cover; }
.ocv-staffphoto__ph { color: var(--ocv-text-3); }
.ocv-staffphoto__ph svg { width: 34px; height: 34px; }
.ocv-staffphoto__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Full-width text box, with the send button below it on the left. */
.ocv-thread__reply {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding-top: 12px; border-top: 0.5px solid var(--ocv-hairline); margin-top: 8px;
}
.ocv-thread__reply textarea { width: 100%; }

/* "Aggiungi atleta" chooser (full athlete vs trial player). */
.ocv-addchoice { display: flex; flex-direction: column; gap: 12px; }
.ocv-addchoice__opt {
	display: flex; align-items: center; gap: 14px; text-align: left;
	padding: 16px; border-radius: var(--ocv-radius-lg);
	border: 0.5px solid var(--ocv-hairline); background: var(--ocv-surface);
	cursor: pointer; font: inherit; color: var(--ocv-text);
	transition: background 0.15s var(--ocv-ease), transform 0.1s var(--ocv-ease);
}
.ocv-addchoice__opt:hover { background: var(--ocv-fill); }
.ocv-addchoice__opt:active { transform: scale(0.99); }
.ocv-addchoice__icon {
	width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
	background: var(--ocv-primary-tint); color: var(--ocv-primary);
	display: flex; align-items: center; justify-content: center;
}
.ocv-addchoice__icon svg { width: 24px; height: 24px; }
.ocv-addchoice__text { flex: 1; min-width: 0; }
.ocv-addchoice__title { font-size: 16px; font-weight: 800; }
.ocv-addchoice__sub { font-size: 13px; color: var(--ocv-text-2); margin-top: 2px; }
.ocv-addchoice__go { width: 20px; height: 20px; color: var(--ocv-text-3); flex-shrink: 0; }


/* Section headers in the Atleti list (online sign-ups / trial players / active
   athletes). One consistent style, the count written first. */
.ocv-pinhead {
	display: flex; align-items: baseline; gap: 6px;
	margin: 20px 2px 11px;
	font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
	color: var(--ocv-text);
}
.ocv-pinhead:first-child { margin-top: 4px; }
.ocv-pinhead__n { color: var(--ocv-text); }
.ocv-pinhead__t { color: var(--ocv-text); }

/* "Pulsantone" a fisarmonica dell'elenco atleti (Interessati / In prova):
   una barra orizzontale che apre il blocco delle righe al click. */
.ocv-biggroup { margin: 16px 0 4px; }
.ocv-biggroup__bar {
	display: flex; align-items: center; gap: 12px; width: 100%;
	min-height: var(--ocv-touch);
	padding: 0 18px;
	border: 1px solid var(--ocv-hairline-strong);
	border-radius: var(--ocv-radius);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	color: var(--ocv-text);
	font: inherit; font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
	cursor: pointer;
	transition: border-color 0.2s var(--ocv-ease), background 0.2s var(--ocv-ease);
}
.ocv-biggroup__bar:hover { border-color: var(--ocv-primary); }
.ocv-biggroup.is-open .ocv-biggroup__bar {
	border-bottom-left-radius: 0; border-bottom-right-radius: 0;
	background: var(--ocv-primary-tint);
}
.ocv-biggroup__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--ocv-primary); }
.ocv-biggroup__t { flex: 1 1 auto; text-align: left; }
.ocv-biggroup__n {
	flex-shrink: 0; min-width: 26px; height: 26px; padding: 0 8px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--ocv-pill);
	background: var(--ocv-fill-2); color: var(--ocv-text-2);
	font-size: 14px; font-weight: 700;
}
.ocv-biggroup__chev {
	width: 18px; height: 18px; flex-shrink: 0; color: var(--ocv-text-3);
	transition: transform 0.2s var(--ocv-ease);
}
.ocv-biggroup.is-open .ocv-biggroup__chev { transform: rotate(180deg); }
.ocv-biggroup__panel { display: none; padding: 10px 0 2px; }
.ocv-biggroup.is-open .ocv-biggroup__panel { display: block; }

/* "Filtri" button in the athlete search row (replaces the pills + dropdowns),
   same look/height as the squad filter, with a count badge of active filters. */
.ocv-filterbtn-host { flex-shrink: 0; display: flex; }
.ocv-filterbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	min-height: 58px;
	padding: 0 16px;
	border: 1px solid var(--ocv-hairline-strong);
	border-radius: var(--ocv-pill);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	color: var(--ocv-text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s var(--ocv-ease);
}
.ocv-filterbtn:hover { border-color: var(--ocv-primary); }
.ocv-filterbtn--on { border-color: var(--ocv-primary); }
.ocv-filterbtn__icon { width: 19px; height: 19px; color: var(--ocv-primary); flex-shrink: 0; }
.ocv-filterbtn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-filterbtn__chev { width: 18px; height: 18px; color: var(--ocv-text-3); flex-shrink: 0; }
.ocv-filterbtn__badge {
	min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
	background: var(--ocv-primary); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12.5px; font-weight: 800; line-height: 1;
}
/* On a phone the label is dropped so the button stays a compact icon+badge. */
@media (max-width: 560px) {
	.ocv-filterbtn__label { display: none; }
}

/* Stato picker inside the filter panel: a vertical single-choice list. */
.ocv-statolist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ocv-statolist__item {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 14px;
	border: 0.5px solid var(--ocv-hairline);
	border-radius: 12px;
	background: var(--ocv-surface);
	color: var(--ocv-text);
	font: inherit; font-size: 15px; font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s var(--ocv-ease), background 0.15s var(--ocv-ease);
}
.ocv-statolist__item:hover { border-color: var(--ocv-primary); }
.ocv-statolist__item.is-active { border-color: var(--ocv-primary); background: var(--ocv-primary-tint); color: var(--ocv-primary); }
.ocv-statolist__check { width: 18px; height: 18px; color: var(--ocv-primary); flex-shrink: 0; }

/* The "in prova" pill on the Atleti card is just a label — the whole card is the
   link — so it carries no separate hover feedback. */
.ocv-trialbadge--static { cursor: inherit; }
.ocv-trialbadge--static:hover { filter: none; }

/* Online sign-ups in the Atleti list: a full red border to flag them (white
   background, just the outline). */
.ocv-cardlist--athletes .ocv-row--online {
	border: 1.5px solid var(--ocv-red);
}

/* Sospetto doppione: sfondo ambra tenue per farlo saltare all'occhio della
   segreteria (oltre alla scritta "Possibile duplicato di …"). */
.ocv-cardlist--athletes .ocv-row--dup {
	background: color-mix(in srgb, var(--ocv-amber) 12%, #fff);
}

/* Picker "Unisci un doppione". */
.ocv-mergepick__hint { font-size: 13.5px; color: var(--ocv-text-3); margin: 0 0 10px; line-height: 1.45; }
.ocv-mergepick__list { max-height: 320px; overflow-y: auto; margin-top: 10px; }

/* Invio massivo — recipient picker (checklist with status icons). */
.ocv-bcpick__count { font-size: 12.5px; font-weight: 600; color: var(--ocv-text-3); }
.ocv-bcpick__list { max-height: 260px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--ocv-border); border-radius: var(--ocv-radius); }
.ocv-bccand { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; border-bottom: 0.5px solid var(--ocv-hairline); }
.ocv-bccand:last-child { border-bottom: 0; }
.ocv-bccand__main { flex: 1; min-width: 0; }
.ocv-bccand__name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocv-bccand__team { font-size: 12.5px; color: var(--ocv-text-3); }
.ocv-bcicons { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ocv-bcicon { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; }
.ocv-bcicon svg { width: 17px; height: 17px; }
.ocv-bcicon.is-wa { color: var(--ocv-green); }
.ocv-bcicon.is-em { color: var(--ocv-primary); }
.ocv-bcicon.is-owe { color: var(--ocv-red); }
.ocv-bcicon.is-none { color: var(--ocv-amber); }

/* Big on-demand QR (registration link / parent-confirm), shown in a dialog so a
   parent can scan it from the screen. */
.ocv-qrbig { display: flex; justify-content: center; padding: 6px 0 2px; }
.ocv-qrbig__img { width: min(78vw, 440px); height: auto; image-rendering: pixelated; border-radius: 8px; }

/* Anagrafica completeness widget (athlete header). */
.ocv-complete { max-width: 260px; margin-top: 14px; }
.ocv-complete__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.ocv-complete__lbl { font-size: 12.5px; font-weight: 600; color: var(--ocv-text-2); }
.ocv-complete__pct { font-size: 13.5px; font-weight: 800; }
.ocv-complete__track { height: 7px; border-radius: 999px; background: var(--ocv-fill); overflow: hidden; }
.ocv-complete__fill { height: 100%; border-radius: 999px; }
.ocv-complete--green .ocv-complete__pct { color: var(--ocv-green); }
.ocv-complete--green .ocv-complete__fill { background: var(--ocv-green); }
.ocv-complete--amber .ocv-complete__pct { color: var(--ocv-amber); }
.ocv-complete--amber .ocv-complete__fill { background: var(--ocv-amber); }
.ocv-complete--red .ocv-complete__pct { color: var(--ocv-red); }
.ocv-complete--red .ocv-complete__fill { background: var(--ocv-red); }

/* "Ultima richiesta inviata … il" line in the parent-confirm card — green. */
.ocv-confsent:not(:empty) { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ocv-green); }
.ocv-confsent svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================ Foto profilo */
.ocv-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ocv-profilephoto { display: flex; align-items: center; gap: 18px; }
.ocv-profilephoto__preview .ocv-initials {
	width: 96px; height: 96px; font-size: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.ocv-profilephoto__actions { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================ Documenti hub */
.ocv-hub { display: flex; flex-direction: column; gap: 12px; }
/* Hub statistiche (2 sole voci: Finanziarie/Atleti): affiancate invece di
   impilate, su schermi larghi; tornano a colonna sotto i 560px. */
.ocv-hub--pair { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
	.ocv-hub--pair { grid-template-columns: 1fr; }
}
.ocv-hublink {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 18px; width: 100%;
	border-radius: var(--ocv-radius-lg);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	cursor: pointer; text-align: left; font: inherit; color: var(--ocv-text);
	transition: transform 0.2s var(--ocv-ease), box-shadow 0.2s var(--ocv-ease);
}
.ocv-hublink:hover { transform: translateY(-2px); box-shadow: var(--ocv-shadow-pop); }
.ocv-hublink__icon {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 12px;
	background: var(--ocv-fill); flex-shrink: 0;
}
.ocv-hublink__icon svg { width: 22px; height: 22px; color: var(--ocv-primary); }
.ocv-hublink__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ocv-hublink__label { font-weight: 600; font-size: 16px; }
.ocv-hublink__sub { font-size: 13px; color: var(--ocv-text-2); }
.ocv-hublink__go { width: 20px; height: 20px; color: var(--ocv-text-3); flex-shrink: 0; }

/* ================================================================= QR tool */
.ocv-qrstage {
	display: flex; align-items: center; justify-content: center;
	margin-top: 14px; padding: 16px; min-height: 200px;
	background: var(--ocv-fill); border-radius: var(--ocv-radius);
}
.ocv-qrimg { width: min(280px, 70vw); height: auto; image-rendering: pixelated; background: #fff; border-radius: 8px; }
.ocv-qractions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ============================================================== Foto → PDF */
.ocv-scanhint { margin-top: 6px; }
.ocv-scanempty { padding: 20px 0; }

/* Drag & drop zone (empty state of the file tools) */
.ocv-dropzone {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
	padding: 40px 22px; border: 2px dashed var(--ocv-border);
	border-radius: var(--ocv-radius); background: var(--ocv-fill);
	transition: border-color 0.15s var(--ocv-ease), background 0.15s var(--ocv-ease);
}
.ocv-dropzone__icon {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 16px; background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
}
.ocv-dropzone__icon svg { width: 28px; height: 28px; color: var(--ocv-text-3); }
.ocv-dropzone__title { font-weight: 700; font-size: 17px; }
.ocv-dropzone__text { color: var(--ocv-text-2); font-size: 14px; max-width: 440px; margin-bottom: 4px; }
/* Highlight while a file is dragged over the tool. */
.is-dragover .ocv-dropzone { border-color: var(--ocv-primary); background: var(--ocv-primary-tint); }
.ocv-scangrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; margin-top: 14px; }
.ocv-scancell { display: flex; flex-direction: column; gap: 6px; }
.ocv-scancell .ocv-btn { width: 100%; }
/* Square tiles, whole photo visible (contain) so any orientation reads clearly. */
.ocv-scantile {
	position: relative; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: var(--ocv-radius-sm);
	border: 0.5px solid var(--ocv-hairline);
	background: var(--ocv-fill); box-shadow: var(--ocv-shadow-card);
}
.ocv-scantile.is-dragging { opacity: 0.4; }
.ocv-scantile.is-over { outline: 2px dashed var(--ocv-primary); outline-offset: -2px; }
.ocv-scantile__img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; display: block; }
.ocv-scantile__num {
	position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px;
	border-radius: 11px; background: rgba(0, 0, 0, 0.6); color: #fff;
	font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.ocv-scantile__done {
	position: absolute; bottom: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--ocv-green); color: #fff; display: flex; align-items: center; justify-content: center;
}
.ocv-scantile__done svg { width: 14px; height: 14px; }
.ocv-scantile__x {
	position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ocv-scantile__x svg { width: 15px; height: 15px; }
.ocv-scanbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-top: 18px; }
.ocv-scanbar__layout { display: flex; flex-direction: column; gap: 6px; }
.ocv-scanbar__layout .ocv-select { min-width: 200px; }
.ocv-scanbar__actions { display: flex; gap: 10px; }

/* Crop / rotate editor */
.ocv-croptools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.ocv-cropwrap { display: flex; justify-content: center; }
.ocv-cropstage { position: relative; touch-action: none; user-select: none; max-width: 100%; }
.ocv-cropcanvas { display: block; border-radius: 8px; }
.ocv-cropbox { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); cursor: move; touch-action: none; }
.ocv-crophandle { position: absolute; width: 16px; height: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 3px; touch-action: none; }
.ocv-crophandle.nw { left: -9px; top: -9px; cursor: nwse-resize; }
.ocv-crophandle.ne { right: -9px; top: -9px; cursor: nesw-resize; }
.ocv-crophandle.sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.ocv-crophandle.se { right: -9px; bottom: -9px; cursor: nwse-resize; }

/* Ritaglia immagine — zoomable/scrollable viewport */
.ocv-croptoolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ocv-croptoolbar__zoom, .ocv-croptoolbar__page, .ocv-croptoolbar__fmt { display: flex; align-items: center; gap: 8px; }
.ocv-cropviewport {
	max-height: 62vh; overflow: auto; padding: 14px;
	background: var(--ocv-fill); border-radius: var(--ocv-radius);
	display: flex; justify-content: center; align-items: flex-start;
}
.ocv-cropviewport .ocv-cropstage { flex-shrink: 0; }
.ocv-cropbar { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* Public-store order: buyer name/contact rows in the order detail. */
.ocv-orderfield { display: flex; gap: 10px; padding: 6px 0; font-size: 15px; }
.ocv-orderfield__lbl { min-width: 90px; color: var(--ocv-text-3); font-weight: 600; }

/* Store panel: category visibility toggles + shareable link actions. */
.ocv-storecats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
@media (max-width: 560px) { .ocv-storecats { grid-template-columns: 1fr; } }
.ocv-storelink__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Product detail page (Magazzino → prodotto). */
.ocv-proddetail__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ocv-proddetail__img { width: 88px; height: 88px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: var(--ocv-fill); }
.ocv-proddetail__img img { width: 100%; height: 100%; object-fit: cover; }
.ocv-proddetail__name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ocv-proddetail__price { font-size: 18px; font-weight: 700; color: var(--ocv-primary); margin-top: 2px; }

.ocv-stockbig {
	display: flex; flex-direction: column; gap: 4px;
	border-radius: var(--ocv-radius-lg); padding: 18px 20px; margin-bottom: 14px;
}
.ocv-stockbig__main { display: flex; align-items: baseline; gap: 10px; }
.ocv-stockbig__n { font-size: 40px; font-weight: 800; line-height: 1; }
.ocv-stockbig__l { font-size: 15px; font-weight: 600; }
.ocv-stockbig__meta { font-size: 13px; font-weight: 600; opacity: 0.85; }
.ocv-stockbig--ok { background: var(--ocv-green-tint); color: var(--ocv-green); }
.ocv-stockbig--warn { background: var(--ocv-amber-tint); color: var(--ocv-amber); }
.ocv-stockbig--bad { background: var(--ocv-red-tint); color: var(--ocv-red); }

.ocv-stockgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ocv-stockgrid__cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 0.5px solid var(--ocv-hairline); border-radius: 12px; background: var(--ocv-surface); }
.ocv-stockgrid__sz { font-size: 12.5px; font-weight: 600; color: var(--ocv-text-3); }
.ocv-stockgrid__q { font-size: 20px; font-weight: 800; }
.ocv-stockgrid__note { font-size: 11px; color: var(--ocv-text-3); }

/* --- Dettaglio prodotto: titolo sopra, foto grande a sinistra, metriche a destra --- */
.ocv-proddetail__title { margin-bottom: 14px; }
.ocv-proddetail__hero { display: flex; gap: 16px; align-items: stretch; margin-bottom: 18px; }
.ocv-proddetail__photo {
	flex: 0 0 42%;
	max-width: 260px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--ocv-fill);
	aspect-ratio: 1 / 1;
}
.ocv-proddetail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocv-proddetail__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ocv-text-3); }
.ocv-proddetail__ph svg { width: 46px; height: 46px; }
/* Colonna a destra della foto: metriche + taglie compatte. */
.ocv-proddetail__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ocv-proddetail__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-width: 0; }
.ocv-statbox--hero { grid-column: 1 / -1; }
/* Taglie compatte quando stanno accanto alla foto */
.ocv-proddetail__side .ocv-proddetail__sizes { margin: 0; }
.ocv-proddetail__side .ocv-proddetail__sub { font-size: 12.5px; margin-bottom: 6px; }
.ocv-proddetail__side .ocv-stockgrid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin-bottom: 0; }
.ocv-proddetail__side .ocv-stockgrid__cell { padding: 6px 3px; border-radius: 9px; }
.ocv-proddetail__side .ocv-stockgrid__q { font-size: 16px; }
.ocv-proddetail__side .ocv-stockgrid__sz { font-size: 11px; }
.ocv-proddetail__side .ocv-stockgrid__note { font-size: 9.5px; }
/* Scheda dati: valori allineati verticalmente (colonna etichette a larghezza fissa). */
.ocv-proddetail__info .ocv-orderfield { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: baseline; }
.ocv-proddetail__info .ocv-orderfield__lbl { min-width: 0; }
@media (max-width: 560px) {
	.ocv-proddetail__info .ocv-orderfield { grid-template-columns: 128px 1fr; }
}
.ocv-statbox {
	display: flex; flex-direction: column; justify-content: center;
	padding: 12px 16px; border-radius: 14px;
	background: var(--ocv-surface); border: 0.5px solid var(--ocv-hairline);
}
.ocv-statbox__v { font-size: 22px; font-weight: 800; line-height: 1; }
.ocv-statbox__l { font-size: 13px; font-weight: 600; color: var(--ocv-text-3); margin-top: 4px; }
.ocv-statbox--hero { flex: 1; justify-content: center; }
.ocv-statbox--hero .ocv-statbox__v { font-size: 44px; }
.ocv-statbox--hero .ocv-statbox__l { font-size: 15px; }
.ocv-statbox--ok { background: var(--ocv-green-tint); border-color: transparent; }
.ocv-statbox--ok .ocv-statbox__v, .ocv-statbox--ok .ocv-statbox__l { color: var(--ocv-green); }
.ocv-statbox--warn { background: var(--ocv-amber-tint); border-color: transparent; }
.ocv-statbox--warn .ocv-statbox__v, .ocv-statbox--warn .ocv-statbox__l { color: var(--ocv-amber); }
.ocv-statbox--bad { background: var(--ocv-red-tint); border-color: transparent; }
.ocv-statbox--bad .ocv-statbox__v, .ocv-statbox--bad .ocv-statbox__l { color: var(--ocv-red); }
.ocv-statbox--amber { background: var(--ocv-amber-tint); border-color: transparent; }
.ocv-statbox--amber .ocv-statbox__v, .ocv-statbox--amber .ocv-statbox__l { color: var(--ocv-amber); }
.ocv-statbox--purple { background: var(--ocv-purple-tint); border-color: transparent; }
.ocv-statbox--purple .ocv-statbox__v, .ocv-statbox--purple .ocv-statbox__l { color: var(--ocv-purple); }
.ocv-proddetail__sizes { margin-bottom: 16px; }
.ocv-proddetail__sub { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--ocv-text-2); }
/* Taglie: disponibilità più in evidenza; esaurite marcate */
.ocv-stockgrid__q { font-size: 24px; }
.ocv-stockgrid__cell.is-out { opacity: 0.6; }
.ocv-stockgrid__cell.is-out .ocv-stockgrid__q { color: var(--ocv-red); }

@media (max-width: 560px) {
	.ocv-proddetail__hero { flex-direction: column; }
	.ocv-proddetail__photo { max-width: none; flex: none; aspect-ratio: 16 / 10; }
	.ocv-proddetail__metrics { flex-direction: row; }
	.ocv-statbox { flex: 1; }
	.ocv-statbox--hero .ocv-statbox__v { font-size: 34px; }
}

/* Store card: "+N" online-orders-to-verify alert, pinned top-right (distinct from
   the orders count which stays bottom-left). */
.ocv-hcard__alert {
	position: absolute;
	top: 14px;
	right: 14px;
	min-width: 30px;
	height: 30px;
	padding: 0 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--ocv-red);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	z-index: 3;
	box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

/* Order detail: prominent "amount due" + a compact payment method row. */
.ocv-paydue { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 13px 16px; border-radius: var(--ocv-radius-lg); background: var(--ocv-red-tint); }
.ocv-paydue__lbl { font-size: 15px; font-weight: 700; color: var(--ocv-red); }
.ocv-paydue__amt { font-size: 24px; font-weight: 800; color: var(--ocv-red); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ocv-paydue--ok { background: var(--ocv-green-tint); }
.ocv-paydue--ok .ocv-paydue__lbl, .ocv-paydue--ok .ocv-paydue__amt { color: var(--ocv-green); }

/* "Ordine confermato" line in a public order's detail. */
.ocv-orderverified { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--ocv-green); }
.ocv-orderverified svg { width: 20px; height: 20px; }

/* Ordine pubblico da confermare: pulsante rosso, staccato dai dati sopra, che
   pulsa (alone rosso) per attirare l'attenzione della segreteria. */
.ocv-orderverifybtn { margin-top: 18px; animation: ocv-urgent-pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.ocv-orderverifybtn { animation: none; }
}

/* ============================================================
   BOZZA — Barra di navigazione in basso (solo mobile)
   ============================================================ */
.ocv-bottombar { display: none; }
@media (max-width: 640px) {
	.ocv-bottombar {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 60;
		background: var(--ocv-surface);
		border-top: 0.5px solid var(--ocv-hairline);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.07);
	}
	.ocv-bottombar__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		background: none;
		border: 0;
		padding: 4px 0;
		color: var(--ocv-text-3);
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: -0.01em;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.ocv-bottombar__ic { width: 23px; height: 23px; }
	.ocv-bottombar__item.is-active { color: var(--ocv-primary); }
	.ocv-bottombar__lbl { line-height: 1; }
	/* spazio in fondo così il contenuto non finisce sotto la barra */
	.ocv-main { padding-bottom: 74px; }
	/* "Salva referto" (z-index 30) sennò finisce sotto la barra di navigazione
	   in basso (z-index 60): la solleviamo sopra, come il pulsante carrello. */
	.ocv-savebar {
		bottom: 74px;
		z-index: 61;
		padding-bottom: 12px;
	}
}

/* ============================================================
   Barra superiore: controlli desktop vs mobile
   (barra in basso su mobile → in alto solo Indietro + logo + Cerca)
   ============================================================ */
.ocv-nav-mobonly { display: none !important; }
.ocv-navlogo {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 0 4px;
	cursor: pointer;
}
.ocv-navlogo img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }

@media (max-width: 640px) {
	.ocv-nav-mobonly { display: inline-flex !important; }
	.ocv-nav-deskonly { display: none !important; }
	/* Su mobile la bustina Comunicazioni vive nella barra in basso ("Posta"):
	   niente icona mail duplicata in alto a destra, né nelle pagine interne
	   (.ocv-navenv-slot) né nella home (.ocv-dash__envslot). */
	.ocv-navenv-slot,
	.ocv-dash__envslot { display: none !important; }
}

/* Mobile: le pillole di stato (Atleti) si nascondono — gli stessi filtri si
   scelgono dal pannello "Filtri", per una barra più pulita sul telefono. */
@media (max-width: 640px) {
	.ocv-quickstati { display: none !important; }
}

/* Amministrazione mobile: tendina compatta "Tipo pagamento" (le pillole sono
   nascoste via .ocv-quickstati). Nascosta su desktop. */
.ocv-typeselect-host { display: none; }
.ocv-typeselect {
	width: 100%;
	min-height: 58px;
	border-radius: var(--ocv-pill);
	border: 1px solid var(--ocv-hairline-strong);
	background: var(--ocv-surface);
	box-shadow: var(--ocv-shadow-card);
	padding: 0 16px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ocv-text);
}
@media (max-width: 640px) {
	.ocv-typeselect-host { display: block; flex: 1; min-width: 0; align-self: center; }
	/* Riga filtri su mobile (niente pillole): controlli uniformi e alti come il
	   selettore squadra (58px) per una barra comoda al tocco. */
	.ocv-searchrow--pills .ocv-teamfilter,
	.ocv-searchrow--pills .ocv-filterbtn,
	.ocv-typeselect { min-height: 58px; }
}

/* Dialog incasso: riga compatta (importo incassato a sx, da saldare a dx) +
   metodi come pulsanti inline con icona. */
.ocv-payrow { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.ocv-payrow__field { flex: 1; min-width: 0; }
.ocv-payrow__lbl { display: block; font-size: 12px; font-weight: 600; color: var(--ocv-text-3); margin-bottom: 5px; }
.ocv-payrow__due { text-align: right; flex-shrink: 0; }
.ocv-payrow__due-amt { display: block; font-size: 26px; font-weight: 800; color: var(--ocv-red); line-height: 1.1; }
/* Annulla incasso/quota sullo stesso rigo, accanto a "Da saldare". */
.ocv-payrow__annul { flex-shrink: 0; }
.ocv-payrow__annul .ocv-btn { padding: 9px 12px; font-size: 13px; white-space: nowrap; }
@media (max-width: 480px) {
	.ocv-payrow { flex-wrap: wrap; }
	.ocv-payrow__annul { flex-basis: 100%; }
	.ocv-payrow__annul .ocv-btn { width: 100%; justify-content: center; }
}
.ocv-methodpick { display: flex; gap: 8px; flex-wrap: wrap; }
.ocv-methodbtn {
	flex: 1;
	min-width: 92px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 12px;
	border: 1px solid var(--ocv-hairline-strong);
	border-radius: 12px;
	background: var(--ocv-surface);
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	color: var(--ocv-text-2);
	cursor: pointer;
	transition: all 0.15s var(--ocv-ease);
}
.ocv-methodbtn__ic { width: 18px; height: 18px; }
.ocv-methodbtn.is-active {
	border-color: var(--ocv-primary);
	background: color-mix(in srgb, var(--ocv-primary) 10%, var(--ocv-surface));
	color: var(--ocv-primary);
}

/* ============================================================================
   Guide — libreria materiali per lo staff (categorie + risorse file/link).
   ========================================================================== */
.ocv-guides { display: flex; flex-direction: column; gap: 22px; }

.ocv-gcat { display: flex; flex-direction: column; gap: 12px; }
.ocv-gcat__head { display: flex; align-items: center; gap: 10px; }
.ocv-gcat__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--ocv-primary); }
.ocv-gcat__icon svg { width: 22px; height: 22px; }
.ocv-gcat__name { margin: 0; font-size: 17px; font-weight: 700; color: var(--ocv-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-gcat__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--ocv-fill); color: var(--ocv-text-2); font-size: 12px; font-weight: 700; }
.ocv-gcat__actions { display: flex; gap: 4px; margin-left: auto; }
.ocv-gcat__empty { margin: 0; padding: 14px; font-size: 14px; color: var(--ocv-text-3); background: var(--ocv-surface); border: 0.5px dashed var(--ocv-hairline-strong); border-radius: var(--ocv-radius-lg); }

.ocv-glist { display: flex; flex-direction: column; gap: 10px; }

.ocv-gitem { display: flex; align-items: stretch; gap: 6px; background: var(--ocv-surface); border: 0.5px solid var(--ocv-hairline); border-radius: var(--ocv-radius-lg); box-shadow: var(--ocv-shadow-card); overflow: hidden; }
.ocv-gitem__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; transition: background var(--ocv-ease, 0.15s ease); }
.ocv-gitem__main:hover { background: var(--ocv-fill); }
.ocv-gitem__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ocv-radius); }
.ocv-gitem__icon svg { width: 22px; height: 22px; }
.ocv-gitem__icon--document { background: var(--ocv-blue-tint); color: var(--ocv-blue); }
.ocv-gitem__icon--video { background: var(--ocv-red-tint); color: var(--ocv-red); }
.ocv-gitem__icon--image { background: var(--ocv-teal-tint); color: var(--ocv-teal); }
.ocv-gitem__icon--link { background: var(--ocv-amber-tint); color: var(--ocv-amber); }
.ocv-gitem__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ocv-gitem__title { font-weight: 600; font-size: 15px; color: var(--ocv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-gitem__sub { font-size: 12px; color: var(--ocv-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-gitem__go { width: 18px; height: 18px; color: var(--ocv-text-3); flex-shrink: 0; }
.ocv-gitem__actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 0; }
.ocv-gitem__actions .ocv-reorder { display: flex; }

@media (max-width: 640px) {
	.ocv-gitem { flex-wrap: wrap; }
	.ocv-gitem__main { flex-basis: 100%; }
	.ocv-gitem__actions { padding: 0 8px 8px 62px; margin-top: -4px; }
}

/* Lightbox immagini (click sull'immagine di una risorsa). */
.ocv-lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(2px); }
.ocv-lightbox__img { max-width: 100%; max-height: 90vh; border-radius: var(--ocv-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.ocv-lightbox__close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.ocv-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.ocv-lightbox__close svg { width: 22px; height: 22px; }
.ocv-lightbox__cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 14px; padding: 0 24px; }