/*
 * Tajiji redesign: tokens, base and components (TajijiBrand, "Ledger green on
 * Modernist"). Redesigned pages load this instead of the NobleUI stylesheets;
 * old pages are moved over one by one.
 *
 * Dark mode: <html data-theme="dark">, written server-side by theme_attr()
 * (helpers/theme_helper.php) from the existing `theme` cookie.
 *
 * No inline styles in redesigned views: the sign-in pages run under a CSP
 * without 'unsafe-inline', so every visual lives in this file.
 */

/* -- Font ---------------------------------------------------------------
 * Archivo 400/600/800, self-hosted (no font CDN). Until the files are in
 * assets/fonts/archivo/ the system UI font is used.
 */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
	src: local("Archivo"), url("../fonts/archivo/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
	src: local("Archivo SemiBold"), url("../fonts/archivo/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
	src: local("Archivo ExtraBold"), url("../fonts/archivo/archivo-800.woff2") format("woff2"); }

/* -- Tokens -------------------------------------------------------------- */
:root {
	color-scheme: light;
	--color-bg: #f3f2f2;
	--color-surface: #eae9e9;
	--color-paper: #ffffff;
	--color-text: #201e1d;
	--color-divider: color-mix(in srgb, #201e1d 40%, transparent);

	--color-accent: #0e7a4f;
	--color-accent-600: #0a6a44;
	--color-accent-700: #0a5f3d;
	--color-accent-800: #08442c;
	--color-accent-100: #ecf8f1;
	--color-accent-400: #6cc49a;
	--color-on-accent: #ffffff;
	--color-panel: #0e7a4f;
	--color-on-panel: #ffffff;

	--color-muted: #605d5d;
	--color-faint: #7d7979;

	--tj-amber-bg: #fff1d6;
	--tj-amber-fg: #8a5300;
	--tj-red-bg: #ffe4de;
	--tj-red-fg: #ae1800;

	--font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;

	--shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
	--shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
	--shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* Green is lifted in the dark theme and carries ink text, so it keeps its
   contrast (white on the light-theme green would fall to about 3:1). */
html[data-theme="dark"] {
	color-scheme: dark;
	--color-bg: #201e1d;
	--color-surface: #2d2b2b;
	--color-text: #f3f2f2;
	--color-divider: color-mix(in srgb, #f3f2f2 35%, transparent);

	--color-accent: #6cc49a;
	--color-accent-600: #a9dfc2;
	--color-accent-700: #a9dfc2;
	--color-accent-800: #d3efdf;
	--color-accent-100: #08442c;
	--color-on-accent: #201e1d;
	--color-panel: #0a5f3d;
	--color-on-panel: #f3f2f2;

	--color-muted: #bab6b6;
	--color-faint: #9b9797;

	--tj-amber-bg: #4a3300;
	--tj-amber-fg: #ffd48a;
	--tj-red-bg: #4d170e;
	--tj-red-fg: #ffb3a3;
}

/* -- Base ---------------------------------------------------------------- */
.tj, .tj *, .tj *::before, .tj *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.tj {
	margin: 0;
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
}

.tj h1, .tj h2, .tj h3 {
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
}

.tj p { margin: 0; }
.tj a { color: var(--color-accent-700); text-underline-offset: 3px; }
.tj a:hover { color: var(--color-accent); }
.tj :focus { outline: none; }
.tj :focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.tj ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.tj .icon { display: block; flex: none; }
.tj .num { font-variant-numeric: tabular-nums; text-align: right; }
.tj .muted { color: var(--color-muted); }
.tj .small { font-size: 13px; }
.tj .hidden { display: none !important; }

.tj .sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -- Mark ---------------------------------------------------------------
 * The T alone on a square, sitting bottom-left; "ajiji" in green 600.
 */
.tj .mark {
	width: 36px; height: 36px; padding: 4px;
	display: flex; align-items: flex-end;
	background: var(--color-accent); color: var(--color-on-accent);
	font-weight: 800; font-size: 22px; line-height: 0.8;
}

.tj .mark-on-panel { background: var(--color-on-panel); color: var(--color-panel); }

.tj .lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.tj .lockup-name { font-weight: 800; font-size: 22px; }
.tj .lockup-sons { font-weight: 400; font-size: 12px; letter-spacing: 0.2em; }

/* -- Buttons ------------------------------------------------------------- */
.tj .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	font: inherit; font-weight: 800; font-size: 14px; line-height: 1.2;
	color: var(--color-text);
	background: transparent;
	border: 1px solid transparent; border-radius: 0;
	cursor: pointer; text-decoration: none;
}

.tj .btn:disabled, .tj .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Primary actions: tall, label flush left, icon trailing. */
.tj .btn-primary {
	min-height: 52px;
	justify-content: space-between;
	font-size: 16px;
	background: var(--color-accent);
	color: var(--color-on-accent);
}

.tj .btn-primary:hover:not(:disabled) { background: var(--color-accent-600); color: var(--color-on-accent); }
.tj .btn-primary:active:not(:disabled) { background: var(--color-accent-700); }

.tj .btn-secondary { border-color: var(--color-divider); }
.tj .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.tj .btn-ghost {
	min-height: 36px;
	padding-inline: var(--space-1);
	color: var(--color-accent-700);
	align-self: flex-start;
}

.tj .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-700); }
.tj .btn-ghost.ink { color: var(--color-text); }

/* -- Forms --------------------------------------------------------------- */
.tj .field > label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.tj .input {
	width: 100%;
	min-height: 48px;
	padding: 6px 12px;
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming into the field */
	color: var(--color-text);
	caret-color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 0;
}

.tj .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.tj .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.tj .input-wrap { position: relative; }
.tj .input-wrap .input { padding-right: 52px; }

.tj .input-reveal {
	position: absolute; top: 0; right: 0;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	padding: 0; border: 0; background: none;
	color: var(--color-text); cursor: pointer;
}

/* -- Messages ------------------------------------------------------------
 * Notice: green tint with a green top rule. Error: solid ink, never green
 * or red (TajijiBrand: "trouble is set in solid ink").
 */
.tj .msg {
	display: grid; grid-template-columns: 20px 1fr; gap: 10px;
	padding: var(--space-3);
	font-size: 14px;
}

.tj .msg-notice {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
	border-top: 2px solid var(--color-accent);
}

.tj .msg-error { background: var(--color-text); color: var(--color-bg); }

/* -- Rule lists (password rules, help lines) ------------------------------ */
.tj .rules { display: flex; flex-direction: column; border-top: 2px solid var(--color-divider); margin: 0; padding: 0; list-style: none; }

.tj .rules li {
	display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid var(--color-divider);
	font-size: 13px;
	color: var(--color-faint);
}

.tj .rules li .on { display: none; }
.tj .rules li.ok { color: var(--color-accent-700); }
.tj .rules li.ok .on { display: block; }
.tj .rules li.ok .off { display: none; }

.tj .lines { display: flex; flex-direction: column; border-top: 2px solid var(--color-text); }
/* Under a section heading, its rule is the top line; a second one doubled it. */
.tj .section-head + .lines { border-top: 0; }
.tj .lines > div { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }

/* =========================================================================
 * Auth shell: sign in, lockout, forgot / sent, reset, forced change.
 * Green statement panel on the left, the form on the right.
 * ====================================================================== */
.tj .auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 100vh;
}

.tj .auth-panel {
	display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6);
	padding: var(--space-8);
	background: var(--color-panel);
	color: var(--color-on-panel);
}

.tj .auth-statement {
	font-weight: 800;
	font-size: 64px;
	line-height: 0.92;
	letter-spacing: -0.035em;
}

.tj .auth-panel-foot {
	display: flex; justify-content: space-between; gap: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid color-mix(in srgb, var(--color-on-panel) 50%, transparent);
	font-size: 13px; line-height: 20px;
}

.tj .auth-main { display: flex; flex-direction: column; min-width: 0; }

.tj .auth-body {
	flex: 1;
	display: flex; flex-direction: column; justify-content: center;
	padding: 48px 64px;
}

.tj .auth-form {
	width: 100%; max-width: 380px;
	display: flex; flex-direction: column; gap: var(--space-4);
}

.tj .auth-form h1 { font-size: 36px; margin-bottom: 4px; }

/* Same height as .auth-panel-foot plus the panel's bottom padding, so the
 * two footer rules and their text line up across the page. */
.tj .auth-foot {
	display: flex; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-3) 64px var(--space-8);
	border-top: 1px solid var(--color-divider);
	font-size: 13px; line-height: 20px;
	color: var(--color-muted);
}

.tj .auth-big-icon { color: var(--color-text); }

.tj .countdown {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: var(--space-3) 0;
	border-top: 2px solid var(--color-text);
	border-bottom: 1px solid var(--color-divider);
}

.tj .countdown-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.tj .countdown-value { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }

.tj .auth-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Below 992px the statement panel becomes a band with the mark, so the form
   is on screen without scrolling. Phone layouts are not designed yet. */
@media (max-width: 991.98px) {
	.tj .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.tj .auth-panel { padding: var(--space-4); }
	.tj .auth-statement, .tj .auth-panel-foot { display: none; }
	.tj .auth-body { padding: var(--space-8) var(--space-4); justify-content: flex-start; }
	.tj .auth-form { margin: 0 auto; }
	.tj .auth-foot { padding: var(--space-3) var(--space-4); font-size: 11px; }
}

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

/* =========================================================================
 * App shell: top bar, menu, avatar menu (partials/_navbar.php).
 * The bar is also rendered on pages not yet redesigned, inside their
 * NobleUI layout, so everything here is scoped to .tj.
 * ====================================================================== */
.tj.tj-topbar {
	position: sticky; top: 0; z-index: 1030;
	display: flex; align-items: center; gap: var(--space-4);
	min-height: 64px;
	padding: 0 var(--space-6);
	background: var(--color-bg);
	color: var(--color-text);
	border-bottom: 2px solid var(--color-text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.4;
}

/* The old layout pushed content down for its fixed menu on small screens. */
.tj-topbar ~ .page-wrapper { margin-top: 0 !important; padding-top: 0 !important; }

.tj .brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.tj .brand:hover { color: var(--color-text); text-decoration: none; }
.tj .brand .mark { width: 30px; height: 30px; padding: 3px; font-size: 18px; }
.tj .brand-word { font-weight: 800; font-size: 20px; }
.tj .brand-word span { color: var(--color-accent); font-weight: 600; }

.tj .tj-nav { display: flex; align-self: stretch; margin-left: var(--space-6); }

.tj .tj-nav a {
	display: flex; align-items: center; gap: 8px;
	padding: 0 14px;
	margin-bottom: -2px; /* sit on the bar's rule */
	font-size: 14px; font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
}

.tj .tj-nav a:hover { background: var(--color-surface); color: var(--color-text); }
.tj .tj-nav a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }

.tj .tj-bar-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.tj .icon-btn {
	position: relative;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	padding: 0; border: 0; background: none;
	color: var(--color-text); cursor: pointer; text-decoration: none;
}

.tj .icon-btn:hover { background: var(--color-surface); color: var(--color-text); }

.tj .count-badge {
	position: absolute; top: 3px; right: 0;
	min-width: 18px; height: 18px; padding: 0 4px;
	display: grid; place-items: center;
	background: var(--color-accent); color: var(--color-on-accent);
	font-size: 11px; font-weight: 800; line-height: 1;
}

.tj .avatar-wrap { position: relative; padding-left: var(--space-3); border-left: 1px solid var(--color-divider); }

.tj .avatar-btn {
	display: flex; align-items: center; gap: 10px;
	padding: 4px 6px 4px 0; border: 0; background: none;
	color: var(--color-text); font: inherit; cursor: pointer; text-align: left;
}

.tj .avatar {
	width: 34px; height: 34px;
	display: grid; place-items: center;
	background: var(--color-text); color: var(--color-bg);
	font-weight: 800; font-size: 13px;
}

.tj .avatar-name { display: flex; flex-direction: column; line-height: 1.2; }
.tj .avatar-name b { font-size: 13px; font-weight: 600; }
.tj .avatar-name small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); }

.tj .menu {
	position: absolute; right: 0; top: calc(100% + 12px); z-index: 20;
	width: 240px;
	display: flex; flex-direction: column;
	background: var(--color-bg);
	border: 2px solid var(--color-text);
	box-shadow: var(--shadow-lg);
}

.tj .menu-head { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.tj .menu-head b { font-weight: 800; }
.tj .menu-head span { font-size: 12px; color: var(--color-muted); }

.tj .menu-item, .tj .menu form button {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 12px var(--space-3);
	border: 0; border-bottom: 1px solid var(--color-divider); background: none;
	color: var(--color-text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}

.tj .menu form { margin: 0; }
.tj .menu > :last-child, .tj .menu form:last-child button { border-bottom: 0; }
.tj .menu-item:hover, .tj .menu form button:hover { background: var(--color-surface); color: var(--color-text); }

.tj .nav-toggle { display: none; }

/* Below 992px the menu folds behind a button (phone layouts are not
   designed yet; this keeps every link reachable). */
@media (max-width: 991.98px) {
	.tj.tj-topbar { flex-wrap: wrap; padding: 0 var(--space-4); }
	.tj .nav-toggle { display: grid; order: 3; }
	.tj .tj-bar-end { order: 2; }
	.tj .avatar-name { display: none; }
	.tj .tj-nav {
		order: 4; flex-basis: 100%;
		display: none; flex-direction: column;
		margin: 0 calc(var(--space-4) * -1);
		border-top: 1px solid var(--color-divider);
	}
	.tj .tj-nav.open { display: flex; }
	.tj .tj-nav a { min-height: 48px; padding: 0 var(--space-4); margin: 0; border-bottom: 1px solid var(--color-divider); }
}

/* =========================================================================
 * Page parts for redesigned screens.
 * ====================================================================== */
.tj .page {
	max-width: 1440px; margin: 0 auto;
	padding: var(--space-6);
	display: flex; flex-direction: column; gap: var(--space-6);
}

.tj .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.tj .page-head h1 { font-size: 40px; }
.tj .kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); }
.tj .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tj .btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.tj .btn-accent:hover { background: var(--color-accent-600); color: var(--color-on-accent); }

/* Ink banner: the daily-count gate and close-the-day prompt. */
.tj .banner {
	display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center;
	padding: var(--space-4);
	background: var(--color-text); color: var(--color-bg);
}

.tj .banner-title { font-weight: 800; font-size: 17px; }
.tj .banner-text { font-size: 14px; opacity: 0.85; }
.tj .banner .btn { min-width: 220px; justify-content: space-between; background: var(--color-accent-400); color: #201e1d; }
.tj .banner .btn:hover { background: #a9dfc2; color: #201e1d; }
.tj .banner form { margin: 0; }

.tj .kpis {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text);
}

.tj .kpi { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border-right: 1px solid var(--color-divider); }
.tj .kpi:last-child { border-right: 0; }
.tj .kpi-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); }
.tj .kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tj .kpi-sub { font-size: 12px; color: var(--color-muted); }

.tj .split { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tj .stack { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

.tj .section-head {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-text);
}

.tj .section-head h2 { font-size: 17px; letter-spacing: 0; }
.tj .section-head .btn-ghost { min-height: 28px; font-size: 13px; }

/* Bar chart: sales by day. Heights come from a class (h0..h100 in steps
   of 5) because the CSP allows no inline style. */
.tj .bars { display: grid; grid-template-columns: repeat(var(--bars, 7), 1fr); gap: 4px; align-items: end; height: 200px; padding-top: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.tj .bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; }
.tj .bar-v { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.tj .bar-fill { position: relative; background: var(--color-faint); min-height: 2px; }
.tj .bar.today .bar-fill { background: var(--color-accent); }
.tj .bar-labels { display: grid; grid-template-columns: repeat(var(--bars, 7), 1fr); gap: 4px; padding-top: 6px; font-size: 11px; color: var(--color-muted); }
.tj .bar-labels span { white-space: nowrap; overflow: visible; }
.tj .bar-labels .week-start { color: var(--color-text); font-weight: 600; }
/* The value sits above its bar, outside the column's height, so every bar
   is drawn to scale. */
.tj .bar-v { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-size: 10px; white-space: nowrap; }
.tj .bar.today .bar-v { font-weight: 800; color: var(--color-text); }
.tj .bar:hover .bar-fill { background: var(--color-text); }
.tj .bar.today:hover .bar-fill { background: var(--color-accent-700); }
.tj .bar-labels .today { font-weight: 800; color: var(--color-text); }

/* Tables: 11px caps headers on a 2px rule, 1px rows, whole row opens the
   record and ends in a chevron. */
.tj .table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tj .table th {
	padding: var(--space-2) var(--space-2);
	border-bottom: 2px solid var(--color-divider);
	font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.tj .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.tj .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.tj .table .num { text-align: right; }
/* A one-button form inside a sentence (e.g. Close the day's "mark today as no expenses"). */
.tj .inline-form { display: inline; }
.tj .inline-form .btn { padding: 0; min-height: 0; vertical-align: baseline; text-decoration: underline; }
/* Grouped headers (e.g. Reports › Sales): a caption row over its columns,
   and a hairline before the first column of each group. */
.tj .table .th-groups th { border-bottom-width: 1px; }
.tj .table .th-groups th[rowspan] { border-bottom-width: 2px; vertical-align: bottom; }
.tj .table th.th-group { text-align: center; color: var(--color-text); }
.tj .table th.th-group, .tj .table .group-start { border-left: 1px solid var(--color-divider); }
.tj .table .sub { display: block; font-size: 12px; color: var(--color-muted); }
.tj .table .strong { font-weight: 800; }
.tj .table tr[data-href] { cursor: pointer; }
.tj .table tr[data-href]:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.tj .table .chev { width: 44px; text-align: right; }
.tj .table .chev a { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--color-text); }

.tj .list-row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.tj a.list-row:hover { background: var(--color-surface); color: var(--color-text); }
.tj .list-row .t { font-weight: 600; }
.tj .list-row .d { grid-column: 1 / -1; font-size: 12px; color: var(--color-muted); }
.tj .list-row .a { font-weight: 600; font-variant-numeric: tabular-nums; }
.tj .empty { padding: var(--space-3) 0; font-size: 14px; color: var(--color-muted); }

/* Status tags: one green, told apart by fill weight (TajijiBrand 03). */
.tj .tag { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; }
/* Invoice status (TajijiWorkspace 16): green paid, amber part paid, red unpaid. */
.tj .tag-paid { background: var(--color-accent); color: var(--color-on-accent); }
.tj .tag-part { background: var(--tj-amber-bg); color: var(--tj-amber-fg); }
.tj .tag-unpaid { background: var(--tj-red-bg); color: var(--tj-red-fg); }
.tj .sub-tight { display: block; margin-top: 2px; font-size: 11px; color: var(--color-muted); }
.tj .tag-done { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.tj .tag-pending { color: var(--color-accent-700); border-color: var(--color-accent); }
.tj .tag-over { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.tj .tag-low { color: var(--color-text); border-color: var(--color-text); }
.tj .tag-inactive { background: var(--color-surface); color: var(--color-muted); border-color: var(--color-divider); }

/* Toasts (flash messages): green edge = success, ink edge = refusal. */
.tj .toasts { position: fixed; top: 80px; right: 24px; z-index: 1050; display: flex; flex-direction: column; gap: var(--space-2); }
.tj .toast {
	display: grid; grid-template-columns: 4px 1fr auto; min-width: 320px; max-width: 440px;
	background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg);
}
.tj .toast::before { content: ""; background: var(--color-accent); }
.tj .toast.is-error::before { background: var(--color-text); }
.tj .toast-body { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; padding: var(--space-3); font-size: 14px; }
.tj .toast-close { width: 36px; border: 0; background: none; color: var(--color-text); cursor: pointer; }

/* More: role-gated cards. */
.tj .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--color-text); border-left: 1px solid var(--color-divider); }
.tj .card-x { display: flex; flex-direction: column; min-height: 240px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.tj .card-main { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); color: var(--color-text); text-decoration: none; }
.tj a.card-main:hover { background: var(--color-surface); color: var(--color-text); }
.tj .card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.tj .card-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tj .card-title svg { flex: none; }
.tj .card-name { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.tj .card-desc { font-size: 14px; color: var(--color-muted); }
.tj .card-links { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.tj .card-links a { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--space-4); border-bottom: 1px solid var(--color-divider); font-size: 14px; color: var(--color-text); text-decoration: none; }
.tj .card-links a:last-child { border-bottom: 0; }
.tj .card-links a:hover { background: var(--color-surface); color: var(--color-text); }

/* Tasks */
.tj .task { display: grid; grid-template-columns: minmax(0, 1fr) 180px 200px; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.tj .task .t { font-weight: 600; }
.tj .task .d { display: block; font-size: 13px; color: var(--color-muted); }
.tj .task .amt { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.tj .task form { margin: 0; }
.tj .task .btn { width: 100%; justify-content: space-between; }

@media (max-width: 1199.98px) {
	.tj .split { grid-template-columns: 1fr; }
	.tj .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
	.tj .page { padding: var(--space-4); }
	.tj .page-head h1 { font-size: 30px; }
	.tj .banner { grid-template-columns: 1fr; }
	.tj .banner .btn { min-width: 0; width: 100%; }
	.tj .cards { grid-template-columns: 1fr; }
	.tj .task { grid-template-columns: 1fr; }
	.tj .task .amt { text-align: left; }
	.tj .toasts { left: 12px; right: 12px; }
	.tj .toast { min-width: 0; }
}

/* Bar heights, 0-100% in 5% steps (see .bars). */
.tj .h0 { height: 0%; }
.tj .h5 { height: 5%; }
.tj .h10 { height: 10%; }
.tj .h15 { height: 15%; }
.tj .h20 { height: 20%; }
.tj .h25 { height: 25%; }
.tj .h30 { height: 30%; }
.tj .h35 { height: 35%; }
.tj .h40 { height: 40%; }
.tj .h45 { height: 45%; }
.tj .h50 { height: 50%; }
.tj .h55 { height: 55%; }
.tj .h60 { height: 60%; }
.tj .h65 { height: 65%; }
.tj .h70 { height: 70%; }
.tj .h75 { height: 75%; }
.tj .h80 { height: 80%; }
.tj .h85 { height: 85%; }
.tj .h90 { height: 90%; }
.tj .h95 { height: 95%; }
.tj .h100 { height: 100%; }

/* =========================================================================
 * Sell: Invoices list, customer picker, documents.
 * ====================================================================== */
.tj .h-page { font-size: 40px; }
.tj .btn-wide { min-width: 200px; }
.tj .btn-row { min-height: 36px; width: 130px; justify-content: space-between; }
.tj .btn-danger-quiet { border-color: var(--color-divider); color: var(--color-text); }
.tj .btn-danger-quiet:hover { background: var(--color-text); color: var(--color-bg); }
.tj .actions form { margin: 0; }
.tj .actions-col { width: 150px; text-align: right; }

/* Search + filters bar above a list. */
.tj .toolbar {
	display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
	padding: var(--space-3) 0;
	border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-divider);
}
.tj .toolbar.plain { border: 0; padding: 0; }
.tj .toolbar-sum { margin-left: auto; font-size: 13px; }

.tj .search { position: relative; display: block; width: 330px; max-width: 100%; }
.tj .search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-faint); }
.tj .search .input { padding-left: 36px; min-height: 36px; font-size: 14px; }
.tj .search-lg { width: 520px; }
.tj .search-lg .input { min-height: 48px; font-size: 16px; padding-left: 40px; }

/* Segmented links (date presets). */
.tj .seg { display: inline-flex; border: 1px solid var(--color-divider); }
.tj .seg a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; font-size: 13px; color: var(--color-text); text-decoration: none; }
.tj .seg a + a { border-left: 1px solid var(--color-divider); }
.tj .seg a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.tj .seg a[aria-current] { background: var(--color-accent); color: var(--color-on-accent); }

.tj .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13px; border: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.tj .chip:hover { background: var(--color-surface); color: var(--color-text); }

.tj .row-link { font-weight: 600; color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-divider); text-underline-offset: 3px; }
.tj .row-link:hover { color: var(--color-accent-700); text-decoration-color: var(--color-accent); }
.tj .row-link.quiet { font-weight: 400; color: var(--color-muted); }

.tj .pager { display: flex; justify-content: center; align-items: center; gap: var(--space-4); }

.tj .table tr.is-off td { color: var(--color-faint); }

/* Recent-customer tiles on the picker. */
.tj .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-2); border-top: 2px solid var(--color-text); border-left: 1px solid var(--color-divider); }
.tj .tile { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.tj a.tile:hover { background: var(--color-surface); color: var(--color-text); }
.tj .tile .sub { font-size: 12px; color: var(--color-muted); }
.tj .tile.is-off { color: var(--color-faint); }

/* Documents: invoice, receipt, statement... Always white paper, also in the
   dark theme; colour only in the mark and wordmark. */
.tj .doc-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tj .doc {
	max-width: 794px; width: 100%; margin: 0 auto;
	padding: 48px 54px 40px;
	display: flex; flex-direction: column; gap: var(--space-6);
	background: #fff; color: #201e1d;
	box-shadow: var(--shadow-md);
	--color-text: #201e1d; --color-muted: #605d5d; --color-faint: #7d7979;
	--color-divider: color-mix(in srgb, #201e1d 40%, transparent);
	--color-accent: #0e7a4f; --color-accent-700: #0a5f3d; --color-surface: #eae9e9;
}
.tj .doc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 2px solid #201e1d; }
.tj .doc-brand { display: flex; align-items: center; gap: 10px; }
.tj .doc-brand .mark { width: 40px; height: 40px; background: #0e7a4f; color: #fff; font-size: 24px; }
.tj .doc-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.tj .doc-brand .brand-word { font-weight: 800; font-size: 20px; }
.tj .doc-brand .brand-word span { color: #0e7a4f; font-weight: 600; }
.tj .doc-brand small { font-weight: 400; font-size: 12px; letter-spacing: 0.2em; }
.tj .doc-tagline { font-size: 12px; }
.tj .doc-biz { display: flex; flex-direction: column; align-items: flex-end; font-style: normal; font-size: 12px; text-align: right; }
.tj .doc-parties { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.tj .doc-parties > div { display: flex; flex-direction: column; gap: 2px; }
.tj .doc .label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7d7979; }
.tj .doc .party { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 18px; color: #201e1d; text-decoration: none; }
.tj .doc .party > span { text-decoration: underline; text-decoration-color: #0e7a4f; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tj .doc .party:hover { color: #0a5f3d; }
.tj .doc-title { align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.tj .doc-title h1 { font-size: 40px; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; margin-bottom: 4px; }
.tj .doc-lines th { color: #605d5d; }
.tj .doc-lines tbody tr:hover { background: none; }
.tj .kv { display: flex; justify-content: space-between; gap: var(--space-4); padding: 3px 0; font-variant-numeric: tabular-nums; }
.tj .kv.strong { font-weight: 800; }
.tj .doc-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); }
.tj .doc-account { width: min(100%, 270px); font-size: 13px; }
.tj .doc-account .label { margin-bottom: 2px; }
.tj .doc-totals { width: min(100%, 290px); font-size: 14px; }
.tj .doc-total > span:first-child { white-space: nowrap; }
.tj .doc-total { align-items: baseline; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 2px solid #201e1d; font-weight: 800; }
.tj .doc-total .num { font-size: 26px; }
.tj .doc-foot { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, #201e1d 30%, transparent); font-size: 12px; color: #605d5d; }
.tj .signature::after { content: ""; display: inline-block; width: 110px; margin-left: 4px; border-bottom: 1px solid #605d5d; }

/* App footer (partials/_app_end.php). */
.tj .app-foot { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--color-divider); font-size: 11px; color: var(--color-muted); }

@media (max-width: 767.98px) {
	.tj .tiles { grid-template-columns: 1fr 1fr; }
	.tj .search, .tj .search-lg { width: 100%; }
	.tj .toolbar-sum { margin-left: 0; }
	.tj .doc { padding: 20px 16px; }
	.tj .doc-title h1 { font-size: 32px; }
	.tj .doc-parties, .tj .doc-sum, .tj .doc-head { flex-direction: column; align-items: flex-start; }
	.tj .doc-title, .tj .doc-biz { align-items: flex-start; text-align: left; }
	.tj .doc-account, .tj .doc-totals { width: 100%; }
}

/* Print: only the page's document or table. */
@media print {
	.tj .d-print-none, .tj.tj-topbar, .tj .toasts, .tj .toolbar, .tj .pager, .tj .app-foot { display: none !important; }
	body.tj { background: #fff; }
	.tj .page { padding: 0; max-width: none; }
	.tj .doc { box-shadow: none; padding: 0; max-width: none; }
	@page { size: A4; margin: 12mm; }
}

/* The daily count isn't saved and the gate is off (Settings): a quiet
   notice instead of the redirect. */
.tj .gate-note { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-text); font-size: 13px; }
.tj .gate-note a { font-weight: 800; color: var(--color-accent-700); text-decoration: none; }

/* =========================================================================
 * Invoice editor (screens 18 and 20).
 * ====================================================================== */
.tj .editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
.tj .editor-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.tj .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-divider); }
.tj .facts > div { display: flex; flex-direction: column; padding: var(--space-3); border-right: 1px solid var(--color-divider); }
.tj .facts > div:first-child { padding-left: 0; }
.tj .facts > div:last-child { border-right: 0; }
.tj .facts b { font-weight: 800; font-size: 17px; }
.tj .facts .sub { font-size: 13px; color: var(--color-muted); }
.tj .small-link { min-height: 24px; padding-left: 0; font-size: 12px; }

.tj .editor-lines .col-no { width: 28px; }
.tj .editor-lines .col-qty { width: 150px; }
.tj .editor-lines .col-x { width: 44px; }
.tj .editor-lines .input { min-height: 40px; font-size: 14px; }
.tj .editor-lines tbody tr:hover { background: none; }
.tj .line-warn { margin-top: 4px; font-size: 12px; font-weight: 600; }
.tj .delta { display: block; font-size: 11px; font-weight: 800; color: var(--color-accent-700); }

.tj .stepper { display: grid; grid-template-columns: 36px 1fr 36px; border: 1px solid var(--color-divider); }
.tj .stepper button { height: 38px; border: 0; background: none; color: var(--color-text); font: inherit; font-weight: 800; cursor: pointer; }
.tj .stepper button:hover:not(:disabled) { background: var(--color-surface); }
.tj .stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.tj .stepper .input { min-height: 38px; padding: 0; text-align: center; border: 0; border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider); }

.tj .editor-panel {
	position: sticky; top: 80px;
	display: flex; flex-direction: column; gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-surface);
	border-top: 4px solid var(--color-text);
}
.tj .editor-panel h2 { font-size: 17px; letter-spacing: 0; }
.tj .editor-panel .kv { font-size: 14px; }
.tj .credit-bar { display: flex; height: 10px; background: var(--color-bg); border: 1px solid var(--color-divider); }
.tj .credit-bar .used { background: var(--color-text); }
.tj .credit-bar .this { background: var(--color-accent); }
.tj .is-over { color: var(--tj-red-fg); }
.tj .panel-totals { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--color-divider); }
.tj .kv-input { display: grid; grid-template-columns: 1fr 120px; gap: var(--space-2); align-items: center; font-size: 14px; }
.tj .kv-input .input { min-height: 36px; font-size: 14px; text-align: right; background: var(--color-bg); }
.tj .panel-total { align-items: baseline; padding-top: var(--space-2); border-top: 2px solid var(--color-text); font-weight: 800; }
.tj .panel-total .num { font-size: 30px; letter-spacing: -0.02em; }
.tj .override-box { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 2px solid var(--tj-red-fg); background: var(--tj-red-bg); }
.tj .override-box .check-inline { font-weight: 700; color: var(--tj-red-fg); }
.tj .table th.num-center, .tj .table td.num-center { text-align: center; font-variant-numeric: tabular-nums; }
.tj .credit-warn { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--tj-red-bg); color: var(--tj-red-fg); border-left: 4px solid var(--tj-red-fg); }
.tj .credit-warn.is-near { background: var(--tj-amber-bg); color: var(--tj-amber-fg); border-left-color: var(--tj-amber-fg); }
.tj .credit-warn b { display: block; font-weight: 700; }
.tj .credit-warn span { font-size: 14px; }
@media (max-width: 640px) { .tj .credit-warn { grid-template-columns: auto 1fr; } .tj .credit-warn .btn { grid-column: 1 / -1; } }
.tj .msg-block { padding: var(--space-2) var(--space-3); font-size: 13px; background: var(--color-text); color: var(--color-bg); }

@media (max-width: 1199.98px) {
	.tj .editor { grid-template-columns: 1fr; }
	.tj .editor-panel { position: static; }
}
@media (max-width: 767.98px) {
	.tj .facts { grid-template-columns: 1fr; }
	.tj .facts > div { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--color-divider); }

	/* Invoice lines on phones: each line is a card. The item picker takes
	 * the full width (remove beside it), then Price, In stock, Was (edits
	 * only), Qty and Total each get a row: caption left from data-label (set
	 * by invoice-editor.js, the header row is hidden; app.js also labels
	 * every cell, so the rules name the value cells, not [data-label]), value right. */
	.tj .editor-lines thead { display: none; }
	.tj .editor-lines, .tj .editor-lines tbody { display: block; }
	.tj .editor-lines tbody tr {
		display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 0 var(--space-2);
		margin-bottom: var(--space-3); padding: var(--space-3);
		border: 1px solid var(--color-divider); background: var(--color-bg);
	}
	.tj .editor-lines tbody td { display: block; padding: 0; border: 0; width: auto; }
	.tj .editor-lines .col-no { display: none; }
	.tj .editor-lines .ed-item { grid-column: 1; grid-row: 1; margin-bottom: var(--space-2); }
	.tj .editor-lines .ed-x { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
	.tj .editor-lines .ed-price, .tj .editor-lines .ed-avail, .tj .editor-lines .ed-was, .tj .editor-lines .ed-qty, .tj .editor-lines .ed-total {
		grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
		width: auto; min-height: 40px; text-align: right; font-size: 14px;
	}
	.tj .editor-lines .ed-avail, .tj .editor-lines .ed-was, .tj .editor-lines .ed-qty, .tj .editor-lines .ed-total { border-top: 1px solid color-mix(in srgb, var(--color-divider) 50%, transparent); }
	.tj .editor-lines .ed-price::before, .tj .editor-lines .ed-avail::before, .tj .editor-lines .ed-was::before, .tj .editor-lines .ed-qty::before, .tj .editor-lines .ed-total::before { content: attr(data-label); font-weight: 600; color: var(--color-text); text-align: left; }
	.tj .editor-lines .ed-item::before, .tj .editor-lines .ed-x::before, .tj .editor-lines .col-no::before { content: none; display: none; }
	.tj .editor-lines .ed-qty .stepper { width: 140px; }
	.tj .editor-lines .ed-item .input { width: 100%; min-height: 44px; }
}

/* Confirm dialog (assets/js/shell.js tjConfirm). */
.tj .dialog-backdrop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, #2d2b2b 50%, transparent); }
.tj .dialog { width: min(100%, 440px); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-bg); color: var(--color-text); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg); }
.tj .dialog-title { font-size: 22px; letter-spacing: -0.01em; }
.tj .dialog-body { font-size: 14px; color: var(--color-muted); }
.tj .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.tj .btn-ink { background: var(--color-text); color: var(--color-bg); }
.tj .btn-ink:hover { background: color-mix(in srgb, var(--color-text) 85%, transparent); color: var(--color-bg); }

/* Record payment dialog (partials/_pay_dialog.php). */
.tj .dialog-wide { width: min(100%, 520px); }
.tj .dialog-backdrop.hidden { display: none; }
.tj fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.tj fieldset.field legend { padding: 0; }
.tj .dialog legend, .tj fieldset.field legend { display: block; margin-bottom: 5px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.tj .pay-who { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.tj .input-amount { min-height: 48px; font-size: 20px; text-align: right; }
.tj .pay-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tj button.chip { background: none; font: inherit; font-size: 13px; cursor: pointer; }
.tj .seg-fill { display: flex; }
.tj .seg-opt { position: relative; flex: 1; display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 0 10px; font-size: 13px; cursor: pointer; }
.tj .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.tj .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tj .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-on-accent); }
.tj .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.tj .pay-after { align-items: baseline; padding-top: var(--space-2); border-top: 2px solid var(--color-text); font-weight: 800; }
.tj .pay-after .num { font-size: 22px; }

/* Receipt (screen 24). */
.tj .doc-narrow { max-width: 640px; }
.tj .doc-amount { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4) 0; border-top: 2px solid #201e1d; border-bottom: 2px solid #201e1d; font-weight: 800; font-size: 16px; }
.tj .doc-amount .num { font-size: 40px; letter-spacing: -0.02em; }
.tj .doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); font-size: 14px; }
.tj .doc-grid .kv { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, #201e1d 30%, transparent); }
@media (max-width: 767.98px) { .tj .doc-grid { grid-template-columns: 1fr; } }

/* Return goods (21) and credit note. */
.tj .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tj .form-row .input, .tj select.input { min-height: 44px; font-size: 14px; }
.tj .note-box { padding: var(--space-3); background: var(--color-surface); font-size: 13px; }
.tj .doc-signs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-6); font-size: 12px; color: #7d7979; }
.tj .doc-signs span { padding-top: 6px; border-top: 1px solid #201e1d; }
.tj .doc-returns { font-size: 13px; }
.tj .doc-returns a { color: #0a5f3d; }
@media (max-width: 767.98px) { .tj .form-row { grid-template-columns: 1fr; } }

/* =========================================================================
 * Customers (22, 23, 25, 26).
 * ====================================================================== */
.tj .kpis-tight .kpi { padding: var(--space-3) var(--space-4); }
.tj .kpis-tight .kpi-value { font-size: 24px; }
.tj .toolbar-rule { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.tj .strong-600 { font-weight: 600; }
.tj .col-credit { width: 220px; }
.tj .meter { height: 8px; background: var(--color-surface); border: 1px solid var(--color-divider); }
.tj .meter > span { display: block; height: 100%; background: var(--color-text); }
.tj .meter > span.is-over { background: var(--tj-red-fg); }
.tj .meter-lg { height: 12px; }

.tj .title-tag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tj .account-kpis { grid-template-columns: 1fr 2fr 1fr 1fr; }
.tj .kpi-wide { gap: 6px; }
.tj .kpi-wide .kpi-label.kv { padding: 0; }
.tj .kpi-md { font-size: 20px; }

.tj .tabs { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--color-divider); }
.tj .tabs > a { padding: 10px 16px; font-size: 14px; color: var(--color-text); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tj .tabs > a:hover { color: var(--color-text); background: var(--color-surface); }
.tj .tabs > a[aria-current] { font-weight: 800; border-bottom-color: var(--color-accent); }
.tj .tabs-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); padding: 4px 0; }

.tj .statement .credit, .tj .table .credit { color: var(--color-accent-700); font-weight: 600; }
.tj .row-surface td { background: var(--color-surface); }
.tj .row-total td { border-top: 2px solid var(--color-text); }
.tj .table .big { font-size: 18px; }

.tj .details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); max-width: 880px; margin: 0; }
.tj .details > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.tj .details dt { color: var(--color-muted); }
.tj .details dd { margin: 0; font-weight: 600; }

.tj .form-page { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: var(--space-4); }
.tj .form-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-surface); border-top: 4px solid var(--color-text); }
.tj .form-card .input { background: var(--color-bg); }
.tj .form-card .field .input { min-height: 44px; font-size: 15px; }
.tj .hint { display: block; margin-top: 4px; font-size: 12px; color: var(--color-muted); }
.tj .rate-field { margin-top: var(--space-3); max-width: 260px; }
.tj .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--color-divider); }
.tj .form-actions .btn-primary { min-width: 240px; }
.tj .danger-zone { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-text); }
.tj .danger-zone h2 { font-size: 17px; letter-spacing: 0; }
.tj .danger-zone form { margin: 0; }

@media (max-width: 991.98px) {
	.tj .account-kpis { grid-template-columns: 1fr 1fr; }
	.tj .details { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Stock (27-29).
 * ====================================================================== */
.tj .input-select { width: auto; min-width: 170px; min-height: 36px; font-size: 14px; }
.tj .qty-bar { display: flex; align-items: center; gap: 8px; }
.tj .qty-bar b { min-width: 36px; font-size: 16px; }
.tj .qty-bar .meter { flex: 1; }
.tj .meter > span.is-low { background: var(--tj-amber-fg); }
.tj .table .debit { color: var(--tj-red-fg); }
.tj .editor-lines .col-qty-s { width: 130px; }
.tj .editor-lines .col-cost { width: 150px; }
.tj .editor-lines .num .input, .tj .editor-lines td .input.num { text-align: right; }
.tj .check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.tj .check.hidden { display: none; }

/* Price list, Reorder list, Snapshot (30, 32, 33). */
.tj .count-pill { padding: 1px 6px; font-size: 11px; background: var(--color-text); color: var(--color-bg); }
.tj .price-table .input { min-height: 36px; font-size: 14px; text-align: right; background: var(--color-bg); }
.tj .col-price { width: 170px; }
.tj .col-flag { width: 100px; }
.tj .col-check { width: 40px; }
.tj .check-box { width: 20px; height: 20px; accent-color: var(--color-accent); }
.tj .row-changed td { background: var(--color-accent-100); }
.tj .print-only { display: none; }
.tj .save-bar {
	position: sticky; bottom: 0; z-index: 5;
	display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center;
	padding: var(--space-4); background: var(--color-surface); border-top: 2px solid var(--color-text);
}
.tj .save-bar > div { display: flex; flex-direction: column; }
.tj .save-bar .btn-primary { min-width: 220px; }
.tj a.btn.is-disabled { opacity: 0.45; pointer-events: none; }
.tj .doc-sheet { max-width: 960px; font-size: 13px; gap: var(--space-4); }
.tj .doc-sheet .doc-brand b { font-size: 16px; }
.tj .doc-sheet .doc-title { display: flex; flex-direction: column; }
.tj .doc-sheet .doc-title h1 { font-size: 28px; }
.tj .sheet-head { display: flex; justify-content: space-between; padding: 6px 0; font-weight: 800; border-bottom: 2px solid #201e1d; }
.tj .sheet-table { font-size: 12px; }
.tj .sheet-table td { padding: 6px 8px; }
.tj .mono { font-family: ui-monospace, Menlo, monospace; }
.tj .col-counted { width: 110px; }
/* Counted: left empty for writing in (no rule under it). */
.tj .blank { display: inline-block; width: 80px; height: 18px; }
.tj .doc-signs-3 { grid-template-columns: repeat(3, 1fr); }
@media print {
	.tj .print-only { display: inline; }
	.tj .price-table .input { display: none; }
	.tj .save-bar { display: none !important; }
	.tj .sheet-group { break-inside: avoid; }
}

.tj .row-current td { background: var(--color-accent-100); }
.tj .tabs-end.small { padding: 0 var(--space-2); }

/* Change price dialog (stocks/view). */
.tj .price-compare th[scope=row] { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-text); text-align: left; border-bottom: 1px solid var(--color-divider); }
.tj .price-compare .col-new { width: 170px; }
.tj .price-compare .input { min-height: 38px; font-size: 15px; text-align: right; background: var(--color-surface); }
.tj .price-compare tbody tr:hover { background: none; }
.tj .price-from { padding: var(--space-2) var(--space-3); background: var(--color-surface); font-size: 14px; }
.tj .form-row-3 { grid-template-columns: repeat(3, 1fr); }
.tj .table-narrow { max-width: 1000px; }
.tj .table-narrow .input { min-height: 36px; font-size: 14px; }

.tj .dialog-actions .dialog-left { margin-right: auto; }

/* =========================================================================
 * Money (screens 34-38): payments, expenses, cash drops, categories.
 * ====================================================================== */
.tj .amt-in { color: var(--color-accent-700); }
.tj .eyebrow { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); }
.tj .form-page-wide { max-width: 880px; }
.tj .form-narrow { max-width: 560px; }
.tj .form-card h2 { font-size: 17px; letter-spacing: 0; }
.tj .col-actions { width: 150px; }
.tj .editor-panel .input-amount, .tj .drop-form .input-amount { text-align: right; font-size: 18px; }
.tj .editor-panel .input, .tj .drop-form .input { min-height: 44px; background: var(--color-bg); }
.tj .drop-form {
	display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--space-3); align-items: end;
	padding: var(--space-4); background: var(--color-surface); border-top: 4px solid var(--color-text);
}
.tj .drop-form-2 { grid-template-columns: minmax(0, 1fr) auto; max-width: 960px; }
.tj .drop-fill { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: 6px; }
.tj .drop-error { grid-column: 1 / -1; }
.tj .drop-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tj .drop-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface); border-top: 4px solid var(--tj-amber-bar, var(--tj-amber-fg)); }
.tj .drop-card-head { display: flex; justify-content: space-between; align-items: center; }
.tj .drop-card-amt { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.tj .drop-card-actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.tj .drop-card-actions form:first-child { flex: 1; }
.tj .drop-card-actions .btn-primary { width: 100%; justify-content: space-between; }
.tj .drop-card-actions .icon-btn { width: 44px; height: 44px; border: 1px solid var(--color-divider); }
@media (max-width: 991.98px) {
	.tj .drop-form { grid-template-columns: 1fr; }
	.tj .drop-cards { grid-template-columns: 1fr; }
}
.tj .h-amount { font-variant-numeric: tabular-nums; }
.tj .page-head .actions form { display: contents; }
/* More: a link whose screen isn't built yet. */
.tj .card-links .card-link-soon { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--space-4); border-bottom: 1px solid var(--color-divider); font-size: 14px; color: var(--color-muted); }
.tj .card-links .card-link-soon:last-child { border-bottom: 0; }

/* =========================================================================
 * Staff and My account (screens 46-48, 52).
 * ====================================================================== */
.tj .person { display: inline-flex; align-items: center; gap: var(--space-3); }
.tj .person > span:last-child { display: flex; flex-direction: column; }
.tj .person-lg { gap: var(--space-4); }
.tj .person-lg > .avatar { width: 56px; height: 56px; font-size: 20px; flex: none; }
.tj .person-lg > div { display: flex; flex-direction: column; gap: 2px; }
.tj .person-lg h1 { margin: 0; }

/* The temporary password: shown once, so it stands out and can be copied. */
.tj .temp-pass {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4);
	padding: var(--space-4); background: var(--tj-amber-bg); color: var(--tj-amber-fg); border-top: 4px solid var(--tj-amber-fg);
}
.tj .temp-pass > div:first-child { display: flex; flex-direction: column; gap: var(--space-1); }
.tj .temp-pass .eyebrow { color: inherit; }
.tj .temp-pass-value { font-size: 30px; font-weight: 800; letter-spacing: 0.06em; color: var(--color-text); user-select: all; }
.tj .temp-pass-actions { display: flex; gap: var(--space-2); }

.tj .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tj .activity-row { grid-template-columns: 150px minmax(0, 1fr) 18px; }
.tj .activity-row .t { font-weight: 600; }
.tj .activity-row .t .sub { display: block; font-weight: 400; font-size: 12px; color: var(--color-muted); }
.tj .details-1 { grid-template-columns: 1fr; }

/* My account: identity and tabs on the left, the tab on the right. */
.tj .acct { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.tj .acct-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 80px; }
.tj .acct-name { font-size: 17px; font-weight: 800; }
.tj .acct-tabs { display: flex; flex-direction: column; border-top: 2px solid var(--color-text); }
.tj .acct-tabs a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.tj .acct-tabs a:hover { background: var(--color-surface); color: var(--color-text); }
.tj .acct-tabs a[aria-current] { background: var(--color-text); color: var(--color-bg); font-weight: 600; }
.tj .acct-main { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }

.tj .lines > .device { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; }
.tj .device-icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--color-surface); }
.tj .device > div { display: flex; flex-direction: column; gap: 2px; }
.tj .device form { margin: 0; }


@media (max-width: 991.98px) {
	.tj .acct { grid-template-columns: 1fr; gap: var(--space-4); }
	.tj .acct-side { position: static; }
	.tj .acct-tabs { flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--color-divider); }
	.tj .acct-tabs a { flex: none; border-bottom: 0; }
}
@media (max-width: 767.98px) {
	.tj .tiles-3 { grid-template-columns: 1fr; }
	.tj .activity-row { grid-template-columns: minmax(0, 1fr) 18px; }
	.tj .activity-row > span:first-child { grid-column: 1 / -1; }
	.tj .temp-pass-value { font-size: 22px; }
}

/* =========================================================================
 * Reports (screens 39-45).
 * ====================================================================== */
.tj .debit { color: var(--tj-red-fg); }
.tj .report-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-divider); margin-bottom: calc(-1 * var(--space-2)); }
.tj .report-nav .tabs { border-bottom: 0; }
.tj .period { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tj .period .input-date { width: auto; min-height: 34px; padding: 0 8px; font-size: 13px; }
.tj .period .btn { min-height: 34px; }
.tj .period .btn.is-on { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.tj .report-title { font-weight: 800; font-size: 17px; }
.tj .total-row td { border-top: 2px solid var(--color-text); font-weight: 800; }
.tj tr.is-short td { background: color-mix(in srgb, var(--tj-red-bg) 45%, transparent); }
.tj .kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tj .age-1 { color: var(--tj-amber-fg); }
.tj .age-2, .tj .age-3 { color: var(--tj-red-fg); }
.tj .col-share { width: 200px; }
.tj .share { display: flex; align-items: center; gap: 8px; }
.tj .share .meter { flex: 1; }
.tj .share .meter > span { background: var(--color-accent); }
.tj .share .small { width: 36px; text-align: right; }
.tj .who { display: flex; align-items: center; gap: 10px; }
.tj .avatar-sq { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--color-text); color: var(--color-bg); font-weight: 800; font-size: 12px; }

.tj .flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.tj .flow-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-text); }
.tj .flow-head h2 { font-size: 17px; letter-spacing: 0; }
.tj .flow-head .num { font-weight: 800; font-size: 17px; }
.tj .flow-row { display: grid; grid-template-columns: 1fr auto 20px; gap: var(--space-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.tj .flow-row:hover { background: var(--color-surface); color: var(--color-text); }
.tj .flow-row .sub { display: block; }
.tj .flow-net { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4); background: var(--color-accent); color: var(--color-on-accent); }
.tj .flow-net.is-neg { background: var(--tj-red-fg); color: #fff; }
.tj .flow-net span { font-weight: 800; font-size: 17px; }
.tj .flow-net b { font-size: 30px; font-weight: 800; }

.tj .report-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--color-text); border-left: 1px solid var(--color-divider); }
.tj .report-card { display: flex; flex-direction: column; gap: var(--space-2); min-height: 210px; padding: var(--space-4); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.tj .report-card:hover { background: var(--color-surface); color: var(--color-text); }
.tj .report-card-top { display: flex; justify-content: space-between; align-items: center; }
.tj .report-card-name { font-weight: 800; font-size: 22px; }
.tj .report-card-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tj .spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: auto; }
.tj .spark > span { flex: 1; background: var(--color-neutral-400, var(--color-divider)); }
.tj .spark > span.is-last { background: var(--color-accent); }

@media (max-width: 991.98px) {
	.tj .report-cards { grid-template-columns: 1fr; }
	.tj .flow { grid-template-columns: 1fr; }
	.tj .kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tj .report-nav { flex-direction: column; align-items: stretch; }
	.tj .report-nav .tabs { overflow-x: auto; flex-wrap: nowrap; }
}
@media print {
	.tj .no-print, .tj .report-nav, .tj .period { display: none !important; }
	.tj .print-only.report-title { display: block; }
	.tj .total-row td { border-top-color: #000; }
}
/* Custom date range in a list toolbar (Payments, Expenses). */
.tj .date-range { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tj .date-range .input-date, .tj .input-date { width: auto; min-height: 34px; padding: 0 8px; font-size: 13px; }

/* =========================================================================
 * Daily count (14) and Close the day (15).
 * ====================================================================== */
.tj .count-progress { min-width: 280px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tj .count-progress .meter > span { background: var(--color-accent); }
.tj .count-tools { flex-wrap: wrap; }
.tj .col-count { width: 140px; }
.tj .count-table .input { min-height: 36px; text-align: right; background: var(--color-bg); }
.tj .input.is-invalid { border-color: var(--tj-red-fg); outline: 1px solid var(--tj-red-fg); }
.tj .done-banner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--color-accent); color: var(--color-on-accent); }
.tj .done-banner .small { color: inherit; }
.tj .done-banner-sm { grid-template-columns: auto 1fr; padding: var(--space-3); }
.tj .done-title { font-weight: 800; font-size: 17px; }
.tj .btn-on-accent { background: #fff; color: #201e1d; min-width: 200px; justify-content: space-between; }
.tj .btn-on-accent:hover { background: #fff; color: #201e1d; }
.tj .gate-box { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 2px solid var(--color-text); }
.tj .close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tj .close-grid .stack { display: flex; flex-direction: column; gap: var(--space-6); }
.tj .kv-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-variant-numeric: tabular-nums; }
.tj .mode-row { display: grid; grid-template-columns: 140px 1fr 140px; gap: var(--space-3); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
.tj .mode-row b { text-align: right; font-weight: 600; }
.tj .till-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.tj .till-panel .kv { padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.tj .till-panel .panel-total { border-bottom: 0; }
.tj .till-panel .input { min-height: 48px; background: var(--color-surface); }
.tj .till-panel .input-amount { font-size: 18px; text-align: right; }
.tj .till-diff { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); background: var(--color-text); color: var(--color-bg); }
.tj .till-diff span { font-weight: 800; }
.tj .till-diff b { font-size: 22px; font-weight: 800; }
.tj .till-diff.is-even { background: var(--color-accent); color: var(--color-on-accent); }
@media (max-width: 991.98px) {
	.tj .close-grid { grid-template-columns: 1fr; }
	.tj .done-banner { grid-template-columns: auto 1fr; }
	.tj .done-banner .btn { grid-column: 1 / -1; }
	.tj .count-progress { min-width: 0; width: 100%; }
}

/* =========================================================================
 * Settings, Archive, Activity log (screens 49-51).
 * ====================================================================== */
.tj .h-sub { font-size: 30px; letter-spacing: -0.01em; }
.tj .seg-wrap { flex-wrap: wrap; }
.tj .letterhead-preview { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: #fff; color: #201e1d; border-top: 2px solid #201e1d; }
.tj .letterhead-preview .mark { flex: none; }
.tj .letterhead-preview > div { display: flex; flex-direction: column; gap: 2px; }
.tj .letterhead-preview .muted { color: #605d5d; }
/* A second line under a details value (My account › Joined, Staff since). */
.tj .details dd .sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--color-muted); }
/* A checkbox inline in a toolbar (Price list: Changed only). */
.tj .check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.tj .check-inline input { width: 16px; height: 16px; accent-color: var(--color-accent); }

/* =========================================================================
 * System (screens 53-57): error pages, global search, notifications.
 * ====================================================================== */
.tj .err-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--space-8); align-items: center; min-height: calc(100vh - 220px); padding: var(--space-8) 0; }
.tj .err-code { font-size: clamp(120px, 18vw, 220px); font-weight: 800; line-height: 0.8; letter-spacing: -0.06em; color: var(--color-accent); }
.tj .err-code .icon { width: 120px; height: 120px; color: var(--color-text); }
.tj .err-body { display: flex; flex-direction: column; gap: var(--space-3); }
.tj .err-body h1 { font-size: 40px; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.tj .err-lead { margin: 0; font-size: 15px; line-height: 1.6; }
.tj .err-path { margin: 0; font-size: 13px; color: var(--color-muted); word-break: break-all; }
.tj .err-links { display: flex; flex-direction: column; margin-top: var(--space-2); border-top: 2px solid var(--color-text); }
.tj .err-links a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-bottom: 1px solid var(--color-divider); color: var(--color-text); font-weight: 600; text-decoration: none; }
.tj .err-links a:hover { color: var(--color-accent-700); }
.tj .err-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.tj .err-facts { margin: 0; border-top: 2px solid var(--color-text); }
.tj .err-facts > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.tj .err-facts dt { color: var(--color-muted); }
.tj .err-facts dd { margin: 0; font-weight: 800; }
.tj .err-dev { max-height: 240px; overflow: auto; padding: var(--space-3); background: var(--color-surface); font-size: 12px; white-space: pre-wrap; }
@media (max-width: 767.98px) {
	.tj .err-page { grid-template-columns: 1fr; gap: var(--space-4); min-height: 0; padding: var(--space-4) 0; }
	.tj .err-body h1 { font-size: 30px; }
}

/* Global search: overlay (assets/js/search.js) and results page. */
.tj.search-on { overflow: hidden; }
.tj .search-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center; align-items: flex-start; padding: 10vh var(--space-4) var(--space-4); background: color-mix(in srgb, #2d2b2b 50%, transparent); }
.tj .search-backdrop.hidden { display: none; }
.tj .search-box { width: min(100%, 640px); max-height: 80vh; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg); }
.tj .search-box .search { width: 100%; }
.tj .search-box .input { width: 100%; min-height: 48px; font-size: 17px; }
.tj .search-status { margin: 0; }
.tj .search-results { overflow-y: auto; display: flex; flex-direction: column; }
.tj .search-group { margin: var(--space-3) 0 var(--space-1); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.tj .search-item { display: flex; flex-direction: column; padding: 8px var(--space-2); border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.tj .search-item .t { font-weight: 600; }
.tj .search-item .d { font-size: 12px; color: var(--color-muted); }
.tj .search-item[aria-selected="true"], .tj .search-item:hover { background: var(--color-accent-100); color: var(--color-text); }
.tj .search-all { padding: var(--space-3) var(--space-2) 0; }
.tj .search-foot { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }
.tj .search-row { grid-template-columns: minmax(0, 1fr) 18px; }

/* Notifications: an on/off switch around a real checkbox. */
.tj .switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.tj .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tj .switch-track { width: 44px; height: 24px; background: var(--color-neutral-300, #bab6b6); position: relative; transition: background 0.15s; }
.tj .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; transition: transform 0.15s; }
.tj .switch input:checked + .switch-track { background: var(--color-accent); }
.tj .switch input:checked + .switch-track::after { transform: translateX(20px); }
.tj .switch input:focus-visible + .switch-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tj .switch input:disabled + .switch-track { opacity: 0.4; cursor: not-allowed; }
.tj .notify-table td { vertical-align: middle; }
.tj .maint-note { background: var(--tj-red-bg); color: var(--tj-red-fg); }

/* Staff › Permissions matrix. */
.tj .perm-table th.perm-role { text-align: center; width: 110px; white-space: nowrap; }
.tj .perm-table th.perm-role .sub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tj .perm-table .perm-group th { padding-top: var(--space-4); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); border-bottom: 2px solid var(--color-text); background: none; }
.tj .perm-table td.perm-cell { position: relative; text-align: center; vertical-align: middle; }
.tj .perm-table td.perm-cell input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--color-accent); cursor: pointer; }
.tj .perm-table tbody tr:hover { background: none; }
.tj .perm-fixed { color: var(--color-muted); }
.tj .perm-fixed.is-on { color: var(--color-accent-700); }
.tj .perm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tj-amber-fg); vertical-align: middle; }
.tj .perm-cell .perm-dot { position: absolute; top: 8px; right: 10px; }
.tj .perm-cell.is-changed { background: color-mix(in srgb, var(--tj-amber-bg) 40%, transparent); }
.tj .perm-resets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 767.98px) {
	.tj .perm-form { overflow-x: auto; }
	.tj .perm-table { min-width: 720px; }
}

/* =========================================================================
 * tjCombo: searchable dropdown (shell.js), replacing <datalist> popups and
 * long <select>s. The popup lives on <body> (position: fixed) so tables and
 * dialogs don't clip it.
 * ====================================================================== */
.tj .tj-combo { position: relative; display: block; }
.tj .tj-combo-inline { display: inline-block; min-width: 180px; }
.tj .tj-combo-field { padding-right: 34px; cursor: pointer; text-overflow: ellipsis; }
.tj .tj-combo-field:focus { cursor: text; }
.tj .tj-combo-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.tj .tj-combo-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.tj .tj-combo-pop {
	position: fixed; z-index: 2000; overflow-y: auto; overscroll-behavior: contain;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-text); box-shadow: 0 12px 28px rgba(32, 30, 29, 0.18);
	-webkit-overflow-scrolling: touch;
}
.tj .tj-combo-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 3px solid transparent; border-bottom: 1px solid var(--color-divider); cursor: pointer; font-size: 14px; line-height: 1.3; }
.tj .tj-combo-opt:last-child { border-bottom: 0; }
.tj .tj-combo-opt.is-active { background: var(--color-surface); border-left-color: var(--color-accent); }
.tj .tj-combo-opt.is-current .tj-combo-label { font-weight: 800; }
.tj .tj-combo-opt.is-current .tj-combo-label::after { content: " ✓"; color: var(--color-accent-700); }
.tj .tj-combo-opt.is-disabled { opacity: 0.45; cursor: not-allowed; }
.tj .tj-combo-label { font-weight: 600; overflow-wrap: anywhere; }
.tj .tj-combo-sub { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.tj .tj-combo-opt mark { background: none; color: var(--color-accent-700); font-weight: 800; }
.tj .tj-combo-empty, .tj .tj-combo-more { padding: 10px 12px; font-size: 13px; color: var(--color-muted); }
.tj .tj-combo-more { border-top: 1px solid var(--color-divider); background: var(--color-surface); }
@media (max-width: 599.98px) {
	.tj .tj-combo-opt { padding: 12px 14px; min-height: 44px; }
	.tj .tj-combo-inline { display: block; width: 100%; }
}
/* Read-only cells: centre the mark. .icon is display:block app-wide, so it
   ignores text-align; a fixed-size flex box lines ✓ and — up with the boxes. */
.tj .perm-fixed { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; vertical-align: middle; }
.tj .perm-table td.perm-cell input[type=checkbox] { vertical-align: middle; margin: 0; }

/* Staff › Roles (views/staff/_roles.php) */
.tj .roles-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-6); align-items: start; }
.tj .roles-layout .note-box { margin-top: var(--space-3); }
.tj .roles-table .tag { margin-left: var(--space-2); vertical-align: middle; }
.tj .roles-table td.roles-action { text-align: right; width: 1%; white-space: nowrap; }
.tj .role-rename > summary { list-style: none; cursor: pointer; }
.tj .role-rename > summary::-webkit-details-marker { display: none; }
.tj .role-rename[open] > summary { display: none; }
.tj .role-rename form { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; min-width: 260px; }
.tj .role-rename form .input { flex: 1 1 160px; min-height: 40px; }
.tj .role-rename form .msg { flex-basis: 100%; text-align: left; white-space: normal; }
@media (max-width: 767.98px) {
	.tj .roles-layout { grid-template-columns: 1fr; }
	.tj .roles-table .roles-from { display: none; }
	.tj .role-rename form { min-width: 0; width: 150px; flex-direction: column; align-items: stretch; }
	.tj .role-rename form .input { flex: none; width: 100%; }
}
/* A short tjCombo list: picked, not typed into. */
.tj .tj-combo-pick { cursor: pointer; caret-color: transparent; }
.tj .tj-combo-pick:focus { cursor: pointer; }

/* Item › Analytics (views/stocks/_item_analytics.php). One ₦ axis, two
   series: list price (ink, a step) and average sold at (accent, with
   points that carry the hover title). */
/* Units sold and Price trend side by side (last 6 months); stacked on a phone. */
.tj .item-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0; align-items: start; }
.tj .item-charts .bars { height: 300px; }
.tj .item-charts .section-head { flex-wrap: wrap; }
/* Customer › How they pay: days from invoice to payment. */
.tj .pay-speed { margin: var(--space-2) 0 var(--space-3); }
.tj .pay-speed b { display: block; font-size: 20px; font-weight: 800; }
/* Customer header: the mobile number with call / WhatsApp links. */
.tj .contact-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tj .contact-links a:hover { color: var(--color-accent); }
/* Two tables side by side only on a wide screen: each needs ~700px before
   its columns start wrapping, so below that they stack as before. */
@media (min-width: 1400px) {
	.tj .table-pair:not(.single) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
	.tj .table-pair:not(.single) .col-share { width: 120px; }
}
@media (max-width: 767.98px) {
	/* Stacked on a phone; this must follow the two-column rule above. */
	.tj .item-charts { grid-template-columns: 1fr; }
	.tj .item-charts .bars { height: 220px; }
	/* Full width here, so the price chart fits without scrolling sideways. */
	.tj .item-charts .price-chart { min-width: 0; }
	/* The 640-wide viewBox shrinks to about half here: double the type so it
	   reads at roughly 10-11px. */
	.tj .item-charts .price-chart .pc-tick { font-size: 20px; }
	.tj .item-charts .price-chart .pc-label { font-size: 18px; }
}
.tj .chart-scroll { overflow-x: auto; margin-top: var(--space-3); }
/* A wide table scrolls inside its box on a phone instead of the page. */
.tj .table-scroll { position: relative; overflow-x: auto; } /* relative: keeps .sr-only cells inside the box */
.tj .table-scroll .table th, .tj .table-scroll .table td { white-space: nowrap; }
/* Drawn in a 640-wide viewBox: below 420px it scrolls inside its box
   rather than shrinking the labels to nothing. */
.tj .price-chart { display: block; width: 100%; min-width: 420px; height: auto; overflow: visible; }
.tj .price-chart .pc-grid { stroke: var(--color-divider); stroke-width: 1; }
.tj .price-chart .pc-tick { font-size: 12px; fill: var(--color-muted); font-variant-numeric: tabular-nums; }
.tj .price-chart .pc-list { fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linejoin: round; }
.tj .price-chart .pc-avg { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tj .price-chart .pc-dot { fill: var(--color-accent); stroke: var(--color-bg); stroke-width: 2; }
.tj .price-chart .pc-hit { fill: transparent; cursor: default; }
.tj .price-chart .pc-pt:hover .pc-dot { fill: var(--color-text); }
.tj .price-chart .pc-label { font-size: 13px; font-weight: 600; fill: var(--color-text); font-variant-numeric: tabular-nums; }
.tj .chart-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); }
.tj .chart-legend .key { display: inline-block; width: 16px; height: 2px; background: var(--color-text); }
.tj .chart-legend .key-avg { height: 8px; width: 8px; border-radius: 50%; background: var(--color-accent); margin-left: var(--space-3); }
/* A pager above its table (customer statement: earlier rows load above). */
.tj .pager-top { margin-bottom: var(--space-3); }

/* Capital and profit (views/capital) ------------------------------------ */
.tj .head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tj .cap-picker .input { min-width: 200px; }
.tj .cap-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tj .cap-notes li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-3); background: var(--tj-amber-bg); color: var(--tj-amber-fg); border-left: 4px solid var(--tj-amber-fg); font-size: 13px; }
.tj .cap-notes svg { margin-top: 1px; }
.tj .cap-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tj .cap-chart .cc-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-muted); }
.tj .cc-swatch { display: inline-block; width: 14px; height: 3px; margin-left: 8px; }
.tj .cc-swatch.cc-worth { background: var(--color-accent); }
.tj .cc-swatch.cc-capital { background: var(--color-text); }
.tj .cc-swatch.cc-barkey { height: 10px; background: var(--color-faint); }
.tj .cc-swatch.cc-avgkey { background: var(--color-accent); }
.tj svg.cc { display: block; width: 100%; height: auto; overflow: visible; }
.tj .cc-grid { stroke: var(--color-divider); stroke-width: 1; }
.tj .cc-grid.cc-zero { stroke: var(--color-text); }
.tj .cc-axis { font-size: 11px; fill: var(--color-muted); font-family: var(--font); }
.tj .cc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tj .cc-line.cc-worth, .tj .cc-dot.cc-worth { stroke: var(--color-accent); }
.tj .cc-dot.cc-worth { fill: var(--color-accent); }
.tj .cc-line.cc-capital { stroke: var(--color-text); stroke-dasharray: 6 4; }
.tj .cc-dot.cc-capital { fill: var(--color-text); stroke: none; }
.tj .cc-line.cc-avg { stroke: var(--color-accent); stroke-width: 2; }
.tj .cc-bar { fill: var(--color-faint); }
.tj .cc-bar.is-neg { fill: var(--tj-red-fg); }
.tj .cc-bar:hover, .tj .cc-dot:hover { opacity: 0.75; }
.tj .cap-sub span { font-size: 12px; color: var(--color-muted); padding-left: var(--space-4); }
.tj .cap-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.tj .cap-form-1 { grid-template-columns: minmax(0, 1fr); }
.tj .cap-form .cap-wide { grid-column: 1 / -1; }
.tj .cap-form .field { margin: 0; }
.tj .cap-table tfoot th { border-top: 2px solid var(--color-text); padding-top: var(--space-2); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--color-text); }
.tj tr.is-void td { color: var(--color-faint); }
.tj tr.is-void td:not(:last-child) { text-decoration: line-through; }
.tj tr.is-void td .sub { text-decoration: none; }
.tj .cap-void summary { cursor: pointer; font-size: 13px; color: var(--color-accent-700); list-style: none; }
.tj .cap-void summary::-webkit-details-marker { display: none; }
.tj .cap-void form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); min-width: 220px; }
.tj .cap-void form .input { min-height: 34px; }
.tj .cap-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.tj .cap-edit .input { flex: 1 1 140px; }
.tj .cap-preview { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
@media (max-width: 900px) { .tj .cap-two { grid-template-columns: minmax(0, 1fr); } }
@media print { .tj .cap-void, .tj .cap-form { display: none; } }
.tj .kv-row > span > .sub { display: block; font-size: 12px; color: var(--color-muted); font-weight: 400; }
.tj .cap-two h3.kicker { margin: var(--space-3) 0 0; }