/* Practice Dashboard — standalone takeover styles. Prefix: fofresd-
 *
 * Palette: antique bronze chrome (--fofresd-brand) on the brand's warm cream,
 * matching the patient-facing skin so a practice and its patients see the same
 * programme. --fofresd-money is the ONE green, reserved for money figures, and
 * matches FOFRes_Charts::GREEN so tiles and charts agree.
 */

:root {
	--fofresd-brand: #6F5430;
	--fofresd-brand-dark: #57411F;
	--fofresd-money: #23A74A;
	--fofresd-bg: #FDFBF7;
	--fofresd-surface: #FFFFFF;
	--fofresd-text: #1A1A1A;
	--fofresd-muted: #6B6B6B;
	--fofresd-border: #E8E4DF;
	--fofresd-display: 'Montserrat', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fofresd-bg);
	color: var(--fofresd-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fofresd-topbar {
	background: var(--fofresd-surface);
	border-bottom: 1px solid var(--fofresd-border);
	position: sticky;
	top: 0;
	z-index: 10;
}
.fofresd-topbar-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.fofresd-brand { font-weight: 800; color: var(--fofresd-brand-dark); }
.fofresd-topbar-name { flex: 1; color: var(--fofresd-muted); font-size: 14px; }
.fofresd-signout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fofresd-muted);
	text-decoration: none;
	font-size: 13px;
}
.fofresd-signout:hover { color: var(--fofresd-text); }

.fofresd-tabs {
	background: var(--fofresd-surface);
	border-bottom: 1px solid var(--fofresd-border);
}
.fofresd-tabs-inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	gap: 4px;
	padding: 0 20px;
	overflow-x: auto;
}
.fofresd-tab {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	color: var(--fofresd-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.fofresd-tab.active {
	color: var(--fofresd-brand-dark);
	border-bottom-color: var(--fofresd-brand);
}

.fofresd-body { max-width: 960px; margin: 0 auto; padding: 24px 20px 64px; }

.fofresd-panel[hidden] { display: none; }

.fofresd-card {
	background: var(--fofresd-surface);
	border: 1px solid var(--fofresd-border);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}
.fofresd-card-header { margin-bottom: 12px; }
.fofresd-card-title { margin: 0 0 4px; font-size: 16px; }
.fofresd-card-sub { margin: 0; color: var(--fofresd-muted); font-size: 13px; }

.fofresd-empty {
	text-align: center;
	padding: 40px 16px;
	color: var(--fofresd-muted);
}
.fofresd-empty svg { color: var(--fofresd-border); margin-bottom: 12px; }
.fofresd-empty h3 { margin: 0 0 6px; color: var(--fofresd-text); font-size: 15px; }
.fofresd-empty p { margin: 0; font-size: 13px; }

.fofresd-readonly {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--fofresd-border);
	font-size: 14px;
}
.fofresd-readonly:last-child { border-bottom: none; }
.fofresd-readonly-label { color: var(--fofresd-muted); }
.fofresd-readonly-value { font-weight: 600; }

.fofresd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fofresd-table th, .fofresd-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--fofresd-border); }
.fofresd-table th { color: var(--fofresd-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

.fofresd-kit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.fofresd-kit-file {
	border: 1px solid var(--fofresd-border);
	border-radius: 8px;
	padding: 12px;
	text-align: center;
}
.fofresd-kit-thumb {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fofresd-muted);
	margin-bottom: 8px;
}
.fofresd-kit-thumb img { max-width: 100%; max-height: 100%; border-radius: 4px; }
.fofresd-kit-name { font-size: 12px; word-break: break-word; margin-bottom: 6px; }
.fofresd-kit-meta { margin-bottom: 8px; }
.fofresd-badge {
	display: inline-block;
	background: var(--fofresd-bg);
	border: 1px solid var(--fofresd-border);
	border-radius: 4px;
	padding: 1px 6px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fofresd-muted);
}

.fofresd-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--fofresd-brand);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.fofresd-btn:hover { background: var(--fofresd-brand-dark); color: #fff; }
.fofresd-btn--secondary { background: transparent; color: var(--fofresd-text); border: 1px solid var(--fofresd-border); }
.fofresd-btn--secondary:hover { background: var(--fofresd-bg); color: var(--fofresd-text); }
.fofresd-btn--sm { padding: 6px 10px; font-size: 12px; }

.fofresd-access {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.fofresd-access-card {
	background: var(--fofresd-surface);
	border: 1px solid var(--fofresd-border);
	border-radius: 10px;
	padding: 32px;
	max-width: 400px;
	text-align: center;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fofresd-bg: #16181B;
		--fofresd-surface: #1E2125;
		--fofresd-text: #F2F1EE;
		--fofresd-muted: #9A9A9A;
		--fofresd-border: #33363A;
		/* Bronze at #6F5430 is near-invisible on a dark surface; lift it to a
		   lighter tone of the same hue so the accent survives the inversion. */
		--fofresd-brand: #C2A067;
		--fofresd-brand-dark: #D6B77F;
		--fofresd-money: #4FCB77;
	}

	/*
	 * The lockup artwork is dark ink on transparent — a near-black "FULL-ON"
	 * and a #0A3A28 hex mark — so once the topbar and the access card turn
	 * near-black it vanishes, leaving only the copper "ON / FOODS" accents
	 * floating with nothing around them. Knock it out to white, the same
	 * treatment the staff panel already applies to its dark sidebar.
	 *
	 * Scoped to the two surfaces that actually flip, and via a descendant
	 * selector on purpose: lockup_css() is printed in an inline <style> AFTER
	 * this file in both documents, so a bare .fofres-lockup__mark-img here
	 * would tie on specificity and lose on source order.
	 */
	.fofresd-topbar .fofres-lockup,
	.fofresd-access-card .fofres-lockup {
		--lockup-ink: #F2F1EE;
	}
	.fofresd-topbar .fofres-lockup__mark-img,
	.fofresd-access-card .fofres-lockup__mark-img {
		filter: brightness(0) invert(1);
	}
}

/* ── Greeting strip + hero figure ─────────────────────────────────────── */
.fofresd-greeting { margin: 0 0 20px; }
.fofresd-greeting h1 { margin: 0 0 4px; font-size: 20px; font-family: var(--fofresd-display); font-weight: 800; }
.fofresd-greeting p { margin: 0; color: var(--fofresd-muted); font-size: 13px; }
.fofresd-hero {
	background: var(--fofresd-surface);
	border: 1px solid var(--fofresd-border);
	border-radius: 10px;
	padding: 24px 20px;
	margin-bottom: 20px;
}
.fofresd-hero-label { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fofresd-muted); font-weight: 700; }
.fofresd-hero-value { margin: 0; font-size: 34px; font-weight: 800; font-family: var(--fofresd-display); color: var(--fofresd-money); line-height: 1.1; }
.fofresd-hero-sub { margin: 6px 0 0; font-size: 12px; color: var(--fofresd-muted); }

/* ── KPI tiles ────────────────────────────────────────────────────────── */
.fofresd-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.fofresd-tile {
	background: var(--fofresd-surface);
	border: 1px solid var(--fofresd-border);
	border-radius: 10px;
	padding: 14px 16px;
}
.fofresd-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--fofresd-muted); }
.fofresd-tile-head svg { color: var(--fofresd-brand); }
.fofresd-tile-value { font-size: 20px; font-weight: 800; line-height: 1.2; }
.fofresd-tile-value--money { color: var(--fofresd-money); }
.fofresd-tile-label { font-size: 12px; color: var(--fofresd-muted); margin-top: 2px; }
.fofresd-tile-spark { margin-top: 8px; height: 28px; }
.fofresd-unavailable { color: var(--fofresd-muted); font-weight: 600; }

/* ── Charts ───────────────────────────────────────────────────────────── */
.fofresd-chart { margin: 4px 0 8px; }
.fofresd-chart svg { display: block; width: 100%; height: auto; }
.fofresd-chart-twin { margin-top: 8px; font-size: 12px; color: var(--fofresd-muted); }
.fofresd-chart-twin summary { cursor: pointer; }
.fofresd-chart-twin table { margin-top: 8px; }

/* ── Source bars ──────────────────────────────────────────────────────── */
.fofresd-sources { list-style: none; margin: 0; padding: 0; }
.fofresd-source { margin-bottom: 10px; font-size: 13px; }
.fofresd-source-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.fofresd-source-name { color: var(--fofresd-text); word-break: break-all; }
.fofresd-source-count { color: var(--fofresd-muted); flex-shrink: 0; }
.fofresd-source-track { background: var(--fofresd-bg); border-radius: 100px; height: 6px; overflow: hidden; }
.fofresd-source-fill { background: var(--fofresd-brand); height: 100%; border-radius: 100px; }

/* ── Filter pills ─────────────────────────────────────────────────────── */
.fofresd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fofresd-pill {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--fofresd-border);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fofresd-muted);
	text-decoration: none;
	background: var(--fofresd-surface);
}
.fofresd-pill:hover { border-color: var(--fofresd-brand); color: var(--fofresd-text); }
.fofresd-pill.active { background: var(--fofresd-brand); border-color: var(--fofresd-brand); color: #fff; }

/* ── Status badges ────────────────────────────────────────────────────── */
.fofresd-status {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.fofresd-status--pending  { background: #FFF4ED; color: #B84A00; }
.fofresd-status--paid     { background: #EFF7F1; color: #1E7A45; }
.fofresd-status--void     { background: var(--fofresd-bg); color: var(--fofresd-muted); }
.fofresd-status--clawback { background: #FDECEA; color: #B91C1C; }

/* ── Pagination ───────────────────────────────────────────────────────── */
.fofresd-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--fofresd-muted); }
.fofresd-pager-links { display: flex; gap: 6px; }
.fofresd-pager a, .fofresd-pager span[aria-disabled] {
	padding: 5px 11px;
	border: 1px solid var(--fofresd-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--fofresd-text);
}
.fofresd-pager a:hover { border-color: var(--fofresd-brand); }
.fofresd-pager span[aria-disabled] { opacity: 0.45; }

/* ── Copyable link (the practice's own landing URL) ───────────────────── */
.fofresd-copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fofresd-copy-value {
	flex: 1;
	min-width: 200px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	background: var(--fofresd-bg);
	border: 1px solid var(--fofresd-border);
	border-radius: 6px;
	padding: 9px 11px;
	word-break: break-all;
}

/* ── Forms (Profile tab) ──────────────────────────────────────────────── */
.fofresd-field { margin-bottom: 16px; }
.fofresd-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fofresd-muted); margin-bottom: 6px; }
.fofresd-field input[type=text], .fofresd-field input[type=email], .fofresd-field input[type=tel] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--fofresd-border);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: var(--fofresd-surface);
	color: var(--fofresd-text);
}
.fofresd-field input:focus { outline: none; border-color: var(--fofresd-brand); box-shadow: 0 0 0 3px rgba(111, 84, 48, 0.13); }
.fofresd-hint { font-size: 12px; color: var(--fofresd-muted); margin: 5px 0 0; }
.fofresd-fieldset { border: 1px solid var(--fofresd-border); border-radius: 8px; padding: 16px 16px 2px; margin: 0 0 18px; }
.fofresd-fieldset legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fofresd-brand); padding: 0 6px; }
.fofresd-masked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ── Feedback ─────────────────────────────────────────────────────────── */
.fofresd-feedback { border-radius: 8px; padding: 11px 14px; margin-bottom: 16px; font-size: 13px; }
.fofresd-feedback--success { background: #EFF7F1; border: 1px solid #C4E2D6; color: #1E7A45; }
.fofresd-feedback--error   { background: #FDECEA; border: 1px solid #F5C6C2; color: #B91C1C; }
.fofresd-feedback--info    { background: #F7F2E9; border: 1px solid #E3D6BF; color: #57411F; }

/* ── Mobile: tabs become a fixed bottom nav ───────────────────────────── */
@media (max-width: 767px) {
	.fofresd-body { padding-bottom: 88px; }
	.fofresd-tabs {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 20;
		border-bottom: none;
		border-top: 1px solid var(--fofresd-border);
	}
	.fofresd-tabs-inner { padding: 0; }
	.fofresd-tab {
		flex: 1;
		flex-direction: column;
		gap: 3px;
		padding: 9px 4px;
		font-size: 10px;
		border-bottom: none;
		border-top: 2px solid transparent;
		justify-content: center;
	}
	.fofresd-tab.active { border-top-color: var(--fofresd-brand); border-bottom-color: transparent; }
	.fofresd-hero-value { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/*
 * Phone sizing for the practice dashboard. The layout already collapses (the
 * tabs become a fixed bottom bar above), but the things a practice actually
 * taps were built at desktop sizes: "Sign out" was a 17px-high text link, the
 * Copy / QR / WhatsApp / Email / Download buttons 29-30px, and the settlement
 * filter pills 28px — all under the 44px every touch guideline asks for.
 *
 * The tables are fine at today's data volumes but have no room to grow; giving
 * the card its own horizontal scroll now means a practice with real order
 * history gets a scrolling table instead of a page that slides sideways.
 */
@media (max-width: 767px) {
	.fofresd-card {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.fofresd-card table { min-width: 520px; }

	.fofresd-btn { min-height: 44px; }
	.fofresd-pill,
	.fofresd-signout {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}