/* Front-end DABL Little Big Books app shell. Scoped for Divi/front-end pages. */
.dabl-lbb-frontend {
	/* One brand colour drives the whole portal. The per-business value is set
	   inline on this element (Settings -> Branding -> Brand colour); this is the
	   fallback. strong/soft/ink are derived so any custom hex just works. */
	--dabl-lbb-brand: #2170e6;
	--dabl-lbb-brand-strong: color-mix(in srgb, var(--dabl-lbb-brand) 84%, #000);
	--dabl-lbb-brand-soft: color-mix(in srgb, var(--dabl-lbb-brand) 13%, #fff);
	--dabl-lbb-ink: color-mix(in srgb, var(--dabl-lbb-brand) 20%, #0a1310);
	--dabl-lbb-slate: #64768c;          /* money-out / secondary, brand-agnostic */
	--dabl-lbb-slate-soft: #eef1f5;
	--dabl-lbb-alert: #d8513f;          /* overdue only */
	--dabl-lbb-alert-soft: #fbe7e3;
	--dabl-fe-accent: var(--dabl-lbb-brand);
	--dabl-fe-bg: #f3f6f4;
	--dabl-fe-card: #ffffff;
	--dabl-fe-text: #172033;
	--dabl-fe-muted: #64748b;
	--dabl-fe-border: #dbe4dc;
	--dabl-fe-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
	box-sizing: border-box;
	color: var(--dabl-fe-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dabl-lbb-frontend *,
.dabl-lbb-frontend *::before,
.dabl-lbb-frontend *::after {
	box-sizing: border-box;
}

.dabl-lbb-frontend a {
	color: inherit;
	text-decoration: none;
}

.dabl-lbb-frontend-login {
	align-items: center;
	background:
		radial-gradient(circle at 10% 10%, rgba(101, 155, 0, 0.22), transparent 32%),
		linear-gradient(135deg, #0f172a 0%, #183018 58%, #101820 100%);
	display: flex;
	justify-content: center;
	min-height: 100vh;
	padding: clamp(18px, 4vw, 54px);
	width: 100%;
}

.dabl-fe-login-card {
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	max-width: 1080px;
	width: 100%;
}

.dabl-fe-login-brand {
	align-self: center;
	color: #fff;
	padding: clamp(10px, 4vw, 48px);
}

.dabl-fe-login-brand h1 {
	color: #fff;
	font-size: clamp(36px, 7vw, 72px);
	letter-spacing: -0.06em;
	line-height: 0.95;
	margin: 18px 0;
}

.dabl-fe-login-brand p {
	color: rgba(255, 255, 255, 0.8);
	font-size: clamp(16px, 2.4vw, 21px);
	line-height: 1.6;
	max-width: 620px;
}

.dabl-fe-login-form,
.dabl-fe-access-card,
.dabl-fe-panel,
.dabl-fe-module-card,
.dabl-fe-stat-card,
.dabl-fe-hero,
.dabl-fe-page-head {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(219, 228, 220, 0.9);
	border-radius: 12px;
	box-shadow: var(--dabl-fe-shadow);
}

.dabl-fe-login-form {
	padding: clamp(22px, 4vw, 36px);
}

.dabl-fe-login-form h2 {
	font-size: 28px;
	margin: 0 0 18px;
}

.dabl-fe-login-form .login-username,
.dabl-fe-login-form .login-password,
.dabl-fe-login-form .login-remember {
	margin-bottom: 14px;
}

.dabl-fe-login-form label {
	color: var(--dabl-fe-text);
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

.dabl-fe-login-form input[type="text"],
.dabl-fe-login-form input[type="password"],
.dabl-fe-login-form input[type="email"] {
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	box-shadow: none;
	font-size: 16px;
	min-height: 46px;
	padding: 10px 12px;
	width: 100%;
}

.dabl-fe-login-form input[type="submit"],
.dabl-fe-button,
.dabl-fe-login-form .button-primary {
	align-items: center;
	background: #111827;
	border: 0;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	justify-content: center;
	min-height: 42px;
	padding: 11px 16px;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}

.dabl-fe-login-form input[type="submit"]:hover,
.dabl-fe-button:hover {
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
	color: #fff;
	transform: translateY(-1px);
}

.dabl-fe-button-primary {
	background: var(--dabl-fe-accent);
}

.dabl-fe-button-ghost {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 8%, #fff);
	color: var(--dabl-lbb-brand-strong);
}

.dabl-fe-button-ghost:hover {
	color: var(--dabl-lbb-brand-strong);
}

.dabl-fe-login-links {
	margin-top: 12px;
}

.dabl-fe-google {
	margin: 0 0 16px;
	text-align: center;
}

.dabl-fe-google .g_id_signin {
	display: inline-block;
	margin-top: 4px;
}

.dabl-fe-google-help {
	color: var(--dabl-fe-muted);
	font-size: 12px;
	line-height: 1.5;
	margin: 10px 0 0;
}

.dabl-fe-divider {
	color: var(--dabl-fe-muted);
	display: flex;
	align-items: center;
	font-size: 12px;
	gap: 12px;
	margin: 12px 0 18px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.dabl-fe-divider::before,
.dabl-fe-divider::after {
	background: #e2e8f0;
	content: "";
	display: block;
	flex: 1;
	height: 1px;
}

.dabl-fe-pill {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 13%, #fff);
	border: 1px solid color-mix(in srgb, var(--dabl-lbb-brand) 24%, #fff);
	border-radius: 999px;
	color: var(--dabl-lbb-brand-strong);
	display: inline-flex;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .06em;
	padding: 7px 10px;
	text-transform: uppercase;
}

.dabl-fe-pill-warning {
	background: #fef3c7;
	border-color: #fde68a;
	color: #92400e;
}

.dabl-fe-access-card {
	margin: 48px auto;
	max-width: 720px;
	padding: 34px;
	text-align: center;
}

.dabl-fe-access-card h1 {
	font-size: clamp(28px, 5vw, 48px);
	letter-spacing: -0.05em;
	line-height: 1;
	margin: 18px 0;
}

.dabl-fe-app {
	background: var(--dabl-fe-bg);
	border-radius: 12px;
	margin: 0 auto;
	max-width: 1480px;
	min-height: min(900px, 100vh);
	overflow: hidden;
	width: 100%;
}

.dabl-fe-topbar {
	align-items: center;
	background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--dabl-lbb-brand) 6%, #fff) 100%);
	border-bottom: 1px solid var(--dabl-fe-border);
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 18px clamp(16px, 3vw, 30px);
}

.dabl-fe-topbar h1 {
	font-size: clamp(24px, 4vw, 36px);
	letter-spacing: -0.05em;
	margin: 8px 0 0;
}

.dabl-fe-topbar-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.dabl-fe-account-switcher label {
	display: block;
}

.dabl-fe-account-switcher span {
	color: var(--dabl-fe-muted);
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.dabl-fe-account-switcher select {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	font-weight: 800;
	min-height: 42px;
	min-width: min(260px, 100%);
	padding: 8px 12px;
}

.dabl-fe-new-menu {
	position: relative;
}

.dabl-fe-new-menu-panel {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
	min-width: 220px;
	padding: 8px;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 30;
}

.dabl-fe-new-menu-panel a {
	border-radius: 8px;
	display: block;
	font-weight: 700;
	padding: 10px 12px;
}

.dabl-fe-new-menu-panel a:hover {
	background: #f1f5f9;
}

.dabl-fe-layout {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	min-height: 720px;
}

.dabl-fe-sidebar {
	background: var(--dabl-lbb-ink);
	color: rgba(255, 255, 255, 0.76);
	padding: 16px;
}

.dabl-fe-sidebar a {
	align-items: center;
	border-radius: 12px;
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
	padding: 12px 14px;
}

.dabl-fe-nav-ico {
	flex: 0 0 20px;
	height: 20px;
	width: 20px;
}

.dabl-fe-sidebar a .dabl-fe-nav-label {
	color: inherit;
	font-size: inherit;
	margin-top: 0;
	min-width: 0;
}

.dabl-fe-sidebar a strong {
	color: #fff;
	display: block;
	font-size: 15px;
	line-height: 1.2;
}

.dabl-fe-sidebar a span {
	color: rgba(255, 255, 255, 0.58);
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 3px;
}

.dabl-fe-sidebar a.is-active,
.dabl-fe-sidebar a:hover {
	background: rgba(255, 255, 255, 0.11);
	color: #fff;
}

.dabl-fe-main {
	min-width: 0;
	padding: clamp(16px, 3vw, 30px);
}

.dabl-fe-notice {
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	color: #166534;
	font-weight: 700;
	margin-bottom: 16px;
	padding: 12px 14px;
}

.dabl-fe-hero,
.dabl-fe-page-head {
	align-items: center;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 18px;
	padding: clamp(18px, 3vw, 28px);
}

.dabl-fe-hero h2,
.dabl-fe-page-head h2 {
	font-size: clamp(28px, 5vw, 52px);
	letter-spacing: -0.06em;
	line-height: 1;
	margin: 12px 0;
}

.dabl-fe-hero p,
.dabl-fe-page-head p,
.dabl-fe-panel p,
.dabl-fe-module-card p {
	color: var(--dabl-fe-muted);
	line-height: 1.6;
	margin: 0;
}

.dabl-fe-hero-actions,
.dabl-fe-section-title {
	align-items: center;
	display: flex;
	gap: 10px;
}

.dabl-fe-stat-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 18px;
}

.dabl-fe-stat-card {
	padding: 18px;
}

.dabl-fe-stat-card span {
	color: var(--dabl-fe-muted);
	display: block;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .05em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.dabl-fe-stat-card strong {
	display: block;
	font-size: clamp(22px, 3vw, 34px);
	letter-spacing: -0.04em;
	line-height: 1;
}

.dabl-fe-grid-two,
.dabl-fe-card-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dabl-fe-card-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dabl-fe-panel,
.dabl-fe-module-card {
	padding: 20px;
}

.dabl-fe-panel h3,
.dabl-fe-module-card h3 {
	font-size: 22px;
	letter-spacing: -0.03em;
	margin: 0 0 10px;
}

.dabl-fe-checklist {
	margin: 0;
	padding-left: 20px;
}

.dabl-fe-checklist li {
	margin-bottom: 10px;
}

.dabl-fe-checklist a {
	color: var(--dabl-lbb-brand-strong);
	font-weight: 800;
}

.dabl-fe-attention div {
	align-items: center;
	background: #f8fafc;
	border-radius: 12px;
	display: flex;
	gap: 12px;
	margin-top: 10px;
	padding: 12px;
}

.dabl-fe-attention strong {
	align-items: center;
	background: #fff7ed;
	border-radius: 8px;
	color: #9a3412;
	display: inline-flex;
	font-size: 26px;
	font-weight: 900;
	height: 48px;
	justify-content: center;
	min-width: 48px;
}

.dabl-fe-small-badge {
	background: #ecfdf5;
	border-radius: 999px;
	color: #166534;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	margin-top: 14px;
	padding: 6px 9px;
}

.dabl-fe-help-button {
	align-items: center;
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
	color: var(--dabl-lbb-brand-strong);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 900;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.dabl-fe-help-modal {
	align-items: center;
	background: rgba(15, 23, 42, 0.62);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 18px;
	position: fixed;
	z-index: 99999;
}

.dabl-fe-help-modal[hidden] {
	display: none;
}

.dabl-fe-help-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	max-height: 90vh;
	max-width: 560px;
	overflow: auto;
	padding: 28px;
	position: relative;
	width: 100%;
}

.dabl-fe-help-card h2 {
	font-size: 28px;
	letter-spacing: -0.04em;
	margin: 0 34px 16px 0;
}

.dabl-fe-help-card ol {
	margin: 0;
	padding-left: 22px;
}

.dabl-fe-help-card li {
	line-height: 1.55;
	margin-bottom: 12px;
}

.dabl-fe-help-close {
	background: #f1f5f9;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 26px;
	height: 36px;
	position: absolute;
	right: 18px;
	top: 18px;
	width: 36px;
}

.dabl-fe-bottom-nav {
	display: none;
}

@media (max-width: 1100px) {
	.dabl-fe-layout {
		grid-template-columns: 1fr;
	}

	.dabl-fe-sidebar {
		display: none;
	}

	.dabl-fe-stat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dabl-fe-bottom-nav {
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid var(--dabl-fe-border);
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		left: 0;
		padding: 8px 8px max(8px, env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		z-index: 9999;
	}

	.dabl-fe-bottom-nav a {
		border-radius: 8px;
		color: var(--dabl-fe-muted);
		font-size: 11px;
		font-weight: 900;
		padding: 9px 4px;
		text-align: center;
	}

	.dabl-fe-bottom-nav a.is-active {
		background: #ecfdf5;
		color: #166534;
	}

	.dabl-fe-main {
		padding-bottom: 92px;
	}
}

@media (max-width: 760px) {
	.dabl-fe-login-card {
		grid-template-columns: 1fr;
	}

	.dabl-fe-login-brand {
		padding: 8px;
	}

	.dabl-fe-topbar,
	.dabl-fe-hero,
	.dabl-fe-page-head {
		align-items: stretch;
		flex-direction: column;
	}

	.dabl-fe-topbar-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.dabl-fe-account-switcher select,
	.dabl-fe-button,
	.dabl-fe-new-menu,
	.dabl-fe-new-menu > button {
		width: 100%;
	}

	.dabl-fe-new-menu-panel {
		left: 0;
		right: 0;
	}

	.dabl-fe-stat-grid,
	.dabl-fe-grid-two {
		grid-template-columns: 1fr;
	}

	.dabl-fe-hero h2,
	.dabl-fe-page-head h2 {
		font-size: 34px;
	}

	.dabl-fe-card-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.dabl-lbb-frontend-login {
		padding: 12px;
	}

	.dabl-fe-login-form {
		border-radius: 12px;
		padding: 20px;
	}

	.dabl-fe-main {
		padding: 14px 12px 92px;
	}

	.dabl-fe-hero,
	.dabl-fe-page-head,
	.dabl-fe-panel,
	.dabl-fe-module-card,
	.dabl-fe-stat-card {
		border-radius: 12px;
		padding: 16px;
	}
}

/* Module pages: data tables and admin-link action row. */
.dabl-fe-data-panel { margin-top: 18px; }

.dabl-fe-table-wrap {
	overflow-x: auto;
	margin-top: 8px;
}

.dabl-fe-table {
	border-collapse: collapse;
	font-size: 13px;
	width: 100%;
}

.dabl-fe-table th,
.dabl-fe-table td {
	border-bottom: 1px solid #eef2f6;
	padding: 11px 12px;
	text-align: left;
	vertical-align: middle;
}

.dabl-fe-table thead th {
	background: #f8fafc;
	color: var(--dabl-fe-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Report tables use <th> as left-column ROW LABELS — keep those readable
   (sentence case, full contrast) rather than the quiet column-header look. */
.dabl-fe-table tbody th {
	color: var(--dabl-fe-text);
	font-weight: 600;
	text-align: left;
}

.dabl-fe-table tbody tr:hover {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 5%, #fff);
}

.dabl-fe-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Money / numeric cells read right-aligned with aligned digits, like a ledger. */
.dabl-fe-cell-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.dabl-fe-action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.dabl-fe-muted {
	color: var(--dabl-fe-muted, #64748b);
	font-size: 13px;
	margin: 6px 0 0;
}

/* ===== v3.3.0: full-portal CRUD forms ===== */
.dabl-fe-page-head-with-actions {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

.dabl-fe-page-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dabl-fe-form {
	margin: 0;
}

.dabl-fe-form-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 18px;
}

.dabl-fe-form-grid label {
	display: flex;
	flex-direction: column;
	font-size: 13px;
}

.dabl-fe-form-grid label > span {
	color: #475569;
	font-weight: 700;
	margin-bottom: 4px;
}

.dabl-fe-form-grid label > span em {
	color: #b91c1c;
	font-style: normal;
}

.dabl-fe-form-grid .dabl-fe-field-full {
	grid-column: 1 / -1;
}

.dabl-fe-form input[type="text"],
.dabl-fe-form input[type="email"],
.dabl-fe-form input[type="tel"],
.dabl-fe-form input[type="number"],
.dabl-fe-form input[type="date"],
.dabl-fe-form input[type="url"],
.dabl-fe-form select,
.dabl-fe-form textarea {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	padding: 10px 12px;
	width: 100%;
}

.dabl-fe-form textarea {
	resize: vertical;
}

.dabl-fe-form input:focus,
.dabl-fe-form select:focus,
.dabl-fe-form textarea:focus {
	border-color: #1e293b;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}

.dabl-fe-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.dabl-fe-table-actions {
	text-align: right;
	white-space: nowrap;
	width: 56px;
}

/* Row actions kebab menu */
.dabl-fe-row-menu {
	display: inline-block;
}

.dabl-fe-row-menu-btn {
	background: transparent;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	color: var(--dabl-fe-text);
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	min-height: 34px;
	padding: 2px 11px;
}

.dabl-fe-row-menu-btn:hover {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 9%, #fff);
	border-color: color-mix(in srgb, var(--dabl-lbb-brand) 30%, #fff);
	color: var(--dabl-lbb-brand-strong);
}

.dabl-fe-row-menu-panel {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
	min-width: 184px;
	padding: 6px;
	z-index: 10000; /* above the mobile bottom nav (9999), below the help modal */
}

.dabl-fe-row-menu-panel a {
	border-radius: 8px;
	color: var(--dabl-fe-text);
	display: block;
	font-weight: 600;
	padding: 10px 12px;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.dabl-fe-row-menu-panel a:hover {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 8%, #fff);
}

.dabl-fe-link-danger {
	color: #b91c1c !important;
}

.dabl-fe-row-menu-panel a.dabl-fe-link-danger:hover {
	background: #fef2f2;
}

.dabl-fe-status {
	border-radius: 999px;
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dabl-fe-status-draft    { background: #f1f5f9; color: #475569; }
.dabl-fe-status-approved { background: #fef3c7; color: #92400e; }
.dabl-fe-status-sent     { background: #dbeafe; color: #1e3a8a; }
.dabl-fe-status-unpaid   { background: #ffe4e6; color: #9f1239; }
.dabl-fe-status-partial  { background: #fde68a; color: #92400e; }
.dabl-fe-status-paid     { background: #dcfce7; color: #166534; }
.dabl-fe-status-void     { background: #e2e8f0; color: #475569; }
.dabl-fe-status-accepted  { background: #dcfce7; color: #166534; }
.dabl-fe-status-converted { background: #ede9fe; color: #5b21b6; }
.dabl-fe-status-overdue   { background: #fee2e2; color: #991b1b; }
.dabl-fe-status-active    { background: #dcfce7; color: #166534; }
.dabl-fe-status-paused    { background: #fef3c7; color: #92400e; }
.dabl-fe-status-ended     { background: #e2e8f0; color: #475569; }
.dabl-fe-status-completed { background: #dcfce7; color: #166534; }
.dabl-fe-status-rejected  { background: #fee2e2; color: #991b1b; }
.dabl-fe-status-declined  { background: #fee2e2; color: #991b1b; }
.dabl-fe-status-expired   { background: #e2e8f0; color: #475569; }

.dabl-fe-notice-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	border-radius: 12px;
	font-weight: 700;
	margin-bottom: 14px;
	padding: 12px 14px;
}

/* ===== v3.4.0: line-item editor, totals card, reports tables, scan form ===== */
/* =========================================================================
   Line items editor (v3.12.0) — a clean ledger in the spirit of Wave/QB:
   airy tinted rows, the item name + a roomy description box grouped on the
   left, seamless item controls, clean white number boxes, a plain Amount,
   and a trash icon. Themed from --dabl-lbb-brand.
   ========================================================================= */
.dabl-fe-line-items-title {
	margin: 22px 0 12px;
}

.dabl-fe-line-items-wrap {
	border: 1px solid var(--dabl-fe-border);
	border-radius: 12px;
	container-type: inline-size;
	overflow-x: auto;
}

.dabl-fe-line-items {
	border-collapse: collapse;
	min-width: 720px;
	table-layout: fixed;
	width: 100%;
}

/* Item + Description share the slack; number columns are fixed and readable. */
.dabl-fe-col-item { width: auto; }
.dabl-fe-col-desc { width: auto; }
.dabl-fe-col-qty { width: 76px; }
.dabl-fe-col-price { width: 108px; }
.dabl-fe-col-tax { width: 84px; }
.dabl-fe-col-total { width: 104px; }
.dabl-fe-col-remove { width: 42px; }

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

/* Header — readable normal-case labels (not the tiny uppercase of data tables). */
.dabl-fe-line-items thead th {
	background: #eef2f7;
	border-bottom: 1px solid var(--dabl-fe-border);
	color: #44516a;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 12px;
	text-align: left;
}

.dabl-fe-line-items thead th.dabl-fe-li-num {
	text-align: right;
}

/* One clean line per item — every field vertically centred on a single row. */
.dabl-fe-line-item-row td {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 4%, #fff);
	border-bottom: 1px solid var(--dabl-fe-border);
	padding: 8px 10px;
	vertical-align: middle;
}

.dabl-fe-line-items tbody tr:last-child td {
	border-bottom: 0;
}

.dabl-fe-line-items .dabl-fe-li-num {
	text-align: right;
	white-space: nowrap;
}

/* All editable fields share one clean white-box look. */
.dabl-fe-line-items .dabl-fe-item-name,
.dabl-fe-line-items .dabl-fe-item-desc,
.dabl-fe-line-items .dabl-fe-qty,
.dabl-fe-line-items .dabl-fe-price,
.dabl-fe-line-items .dabl-fe-line-tax {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	font-size: 14px;
	padding: 9px 10px;
	width: 100%;
}

.dabl-fe-line-items .dabl-fe-item-name {
	font-weight: 600;
}

.dabl-fe-line-items .dabl-fe-item-desc {
	color: var(--dabl-fe-muted);
}

.dabl-fe-line-items .dabl-fe-qty,
.dabl-fe-line-items .dabl-fe-price,
.dabl-fe-line-items .dabl-fe-line-tax {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dabl-fe-line-items .dabl-fe-item-name:focus,
.dabl-fe-line-items .dabl-fe-item-desc:focus,
.dabl-fe-line-items .dabl-fe-qty:focus,
.dabl-fe-line-items .dabl-fe-price:focus,
.dabl-fe-line-items .dabl-fe-line-tax:focus {
	border-color: var(--dabl-lbb-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dabl-lbb-brand) 18%, transparent);
	outline: none;
}

/* Amount: a plain bold figure aligned with the number boxes. */
.dabl-fe-line-items .dabl-fe-line-total {
	color: var(--dabl-fe-text);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.dabl-fe-li-remove {
	text-align: center;
}

.dabl-fe-line-item-remove {
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--dabl-fe-muted);
	cursor: pointer;
	padding: 7px;
}

.dabl-fe-line-item-remove:hover {
	background: #fde8e8;
	color: #dc2626;
}

.dabl-fe-line-item-remove svg {
	display: block;
	height: 18px;
	width: 18px;
}

/* "Add a line" — a friendly dashed pill, not a heavy button. */
.dabl-fe-add-line-item.dabl-fe-button {
	background: #fff;
	border: 1px dashed var(--dabl-fe-border);
	color: var(--dabl-lbb-brand);
	font-weight: 700;
	margin-top: 14px;
}

.dabl-fe-add-line-item.dabl-fe-button:hover {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 8%, #fff);
	border-color: var(--dabl-lbb-brand);
	box-shadow: none;
	color: var(--dabl-lbb-brand);
	transform: none;
}

.dabl-fe-totals-grid {
	align-items: end;
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(180px, 240px) 1fr;
	margin-top: 18px;
}

.dabl-fe-totals-summary {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 14px 18px;
}

.dabl-fe-totals-summary > div {
	display: flex;
	font-size: 14px;
	justify-content: space-between;
	padding: 4px 0;
}

.dabl-fe-totals-summary > div > span {
	color: #64748b;
}

.dabl-fe-totals-summary > div > strong {
	color: #1e293b;
}

.dabl-fe-totals-summary > .dabl-fe-grand {
	border-top: 1px solid #e2e8f0;
	font-size: 16px;
	font-weight: 800;
	margin-top: 8px;
	padding-top: 10px;
}

.dabl-fe-totals-summary > .dabl-fe-grand strong {
	font-size: 18px;
}

@media (max-width: 700px) {
	.dabl-fe-totals-grid {
		grid-template-columns: 1fr;
	}
}

.dabl-fe-report-filter {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 18px;
}

.dabl-fe-report-filter label {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	gap: 4px;
}

.dabl-fe-report-filter label > span {
	color: #475569;
	font-weight: 700;
}

.dabl-fe-report-filter input[type="date"] {
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	padding: 8px 10px;
}

.dabl-fe-report-total th,
.dabl-fe-report-total td {
	background: #f1f5f9;
	font-weight: 800;
}

.dabl-fe-scan-status {
	background: #f1f5f9;
	border-radius: 8px;
	color: #1e293b;
	font-weight: 600;
	margin-top: 10px;
	padding: 8px 12px;
}

/* v3.4.1: portal Command Center hero now has multiple action buttons. The
   secondary "ghost" buttons on the hero need white-on-transparent styling
   so they sit cleanly on the dark hero card. */
.dabl-fe-hero .dabl-fe-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.dabl-fe-hero {
	background: linear-gradient(135deg, #102016 0%, #14302a 60%, #1c4631 100%);
	color: #ffffff;
	padding: clamp(22px, 4vw, 36px);
}

.dabl-fe-hero h2 {
	color: #ffffff;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -0.04em;
	margin: 10px 0 8px;
}

.dabl-fe-hero p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	margin: 0 0 4px;
}

.dabl-fe-hero .dabl-fe-pill {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.20);
	color: #ffffff;
}

.dabl-fe-button-hero-ghost {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #ffffff !important;
}

.dabl-fe-button-hero-ghost:hover,
.dabl-fe-button-hero-ghost:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: #ffffff;
	color: #ffffff !important;
}

/* v3.4.2: first-run welcome card — accounting users land here when they
   haven't been assigned to a business yet, and name their own workspace. */
.dabl-fe-create-business {
	text-align: left;
}

.dabl-fe-create-business h1 {
	font-size: clamp(28px, 5vw, 44px);
	margin: 10px 0 12px;
}

.dabl-fe-create-business p {
	color: var(--dabl-fe-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 22px;
}

.dabl-fe-create-business-form label {
	display: block;
	font-weight: 700;
	margin-bottom: 18px;
}

.dabl-fe-create-business-form label > span {
	color: var(--dabl-fe-text);
	display: block;
	font-size: 13px;
	margin-bottom: 6px;
}

.dabl-fe-create-business-form input[type="text"] {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	box-shadow: none;
	font-size: 16px;
	min-height: 46px;
	padding: 10px 12px;
	width: 100%;
}

.dabl-fe-create-business-form input[type="text"]:focus {
	border-color: #1e293b;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}

.dabl-fe-create-business-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

/* v3.5.0: hide browser number-input spinner arrows across the whole portal.
   Derek wants a plain typable numeric field, not an up/down stepper. */
.dabl-lbb-frontend input[type="number"]::-webkit-inner-spin-button,
.dabl-lbb-frontend input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dabl-lbb-frontend input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* v3.5.0: tab strip used on the Products / Services / Expense Items page. */
.dabl-fe-tabs {
	border-bottom: 1px solid var(--dabl-fe-border);
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	margin: -8px 0 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.dabl-fe-tabs a {
	border-bottom: 2px solid transparent;
	color: var(--dabl-fe-muted);
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 13px;
	scroll-snap-align: start;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.dabl-fe-tabs a:hover {
	color: var(--dabl-fe-text);
}

.dabl-fe-tabs a.is-active {
	border-bottom-color: var(--dabl-lbb-brand);
	color: var(--dabl-lbb-brand-strong);
}

.dabl-fe-checkbox-row {
	align-items: center;
	display: flex;
	gap: 8px;
	font-weight: 600;
}

.dabl-fe-checkbox-row > span {
	margin: 0;
}


/* v3.5.1: hamburger sidebar toggle. The 3-line button sits in the topbar;
   on narrow widths it collapses the sidebar by default and toggles it open.
   On desktop the sidebar is always visible — hamburger is hidden. */
.dabl-fe-topbar-brand {
	align-items: center;
	display: flex;
	gap: 14px;
	min-width: 0;
}

.dabl-fe-hamburger {
	background: transparent;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 44px;
}

.dabl-fe-hamburger span {
	background: var(--dabl-lbb-ink);
	border-radius: 2px;
	display: block;
	height: 2px;
	margin: 0 auto;
	transition: transform .2s ease, opacity .2s ease;
	width: 22px;
}

@media (max-width: 1100px) {
	.dabl-fe-hamburger {
		display: flex;
	}

	.dabl-fe-layout {
		grid-template-columns: 1fr;
	}

	.dabl-fe-sidebar {
		display: none;
	}

	/* When the user opens the menu we slide the sidebar in as a panel.
	   It overlays the main area rather than pushing it, so the layout
	   doesn't reflow content under the user's finger. */
	.dabl-fe-app.is-nav-open .dabl-fe-sidebar {
		background: var(--dabl-lbb-ink);
		box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
		display: block;
		left: 0;
		max-width: 320px;
		position: absolute;
		right: auto;
		top: 78px;
		width: 86vw;
		z-index: 40;
	}

	.dabl-fe-app.is-nav-open::before {
		background: rgba(15, 23, 42, 0.45);
		content: "";
		position: absolute;
		inset: 78px 0 0 0;
		z-index: 39;
	}
}

/* v3.10.0: the topbar hamburger fully hides/shows the sidebar on desktop.
   One control, remembered across page loads. Mobile (<=900px) keeps the
   slide-in overlay above. */
@media (min-width: 1101px) {
	.dabl-fe-app.is-nav-hidden .dabl-fe-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.dabl-fe-app.is-nav-hidden .dabl-fe-sidebar {
		display: none;
	}
}

/* v3.5.1: inline customer modal + "+ New customer" link next to picker. */
.dabl-fe-label-row {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
}

.dabl-fe-inline-add {
	background: transparent;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 999px;
	color: var(--dabl-fe-accent);
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	text-transform: uppercase;
}

.dabl-fe-inline-add:hover,
.dabl-fe-inline-add:focus {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 10%, #fff);
	border-color: var(--dabl-lbb-brand);
}

.dabl-fe-modal {
	align-items: center;
	background: rgba(15, 23, 42, 0.55);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 18px;
	position: fixed;
	z-index: 9000;
}

.dabl-fe-modal[hidden] {
	display: none;
}

.dabl-fe-modal-card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
	max-width: 460px;
	padding: 28px;
	position: relative;
	width: 100%;
}

.dabl-fe-modal-card h2 {
	font-size: 22px;
	margin: 0 0 8px;
}

.dabl-fe-modal-card label {
	display: block;
	font-size: 13px;
	margin: 0 0 14px;
}

.dabl-fe-modal-card label > span {
	color: var(--dabl-fe-text);
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}

.dabl-fe-modal-card label > span em {
	color: #b91c1c;
	font-style: normal;
}

.dabl-fe-modal-card input[type="text"],
.dabl-fe-modal-card input[type="email"],
.dabl-fe-modal-card input[type="tel"] {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	font-size: 14px;
	min-height: 42px;
	padding: 8px 12px;
	width: 100%;
}

.dabl-fe-modal-card .dabl-fe-field-full {
	font-size: 14px;
}

.dabl-fe-modal-close {
	background: transparent;
	border: 0;
	color: var(--dabl-fe-muted);
	cursor: pointer;
	font-size: 24px;
	font-weight: 700;
	height: 32px;
	line-height: 1;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 32px;
}

.dabl-fe-modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 6px;
}

.dabl-fe-modal-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #991b1b;
	font-size: 13px;
	margin: 4px 0 12px;
	padding: 8px 12px;
}

/* v3.6.0: portal Settings page bits + template-option radios + mobile
   invoice editor polish (less click, more thumb-friendly). */
.dabl-fe-template-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 8px 0 16px;
}

.dabl-fe-template-option {
	background: #ffffff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	transition: border-color .15s ease, background .15s ease;
}

.dabl-fe-template-option:hover {
	border-color: var(--dabl-fe-accent);
}

.dabl-fe-template-option input[type="radio"] {
	margin: 0;
}

.dabl-fe-template-option strong {
	font-weight: 600;
}

.dabl-fe-email-template-title {
	color: var(--dabl-fe-text);
	font-size: 17px;
	font-weight: 700;
	margin: 22px 0 8px;
}

.dabl-fe-email-template-title:first-of-type {
	margin-top: 4px;
}

/* Mobile invoice editor — stack everything, drop the table chrome so each
   line item becomes a vertically stacked card. The biggest single ask was
   that this had to be the easiest thing the user has ever filled out. */
@media (max-width: 720px) {
	.dabl-fe-line-items-wrap {
		border: 0;
	}

	.dabl-fe-line-items,
	.dabl-fe-line-items thead,
	.dabl-fe-line-items tbody,
	.dabl-fe-line-items tr,
	.dabl-fe-line-items td,
	.dabl-fe-line-items th {
		display: block;
	}

	/* Drop the desktop fixed-layout min-width so cards stay fluid on phones. */
	.dabl-fe-line-items {
		min-width: 0;
		table-layout: auto;
	}

	.dabl-fe-line-items thead {
		display: none;
	}

	.dabl-fe-line-items tbody tr {
		background: #ffffff;
		border: 1px solid var(--dabl-fe-border);
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 12px;
	}

	.dabl-fe-line-items td,
	.dabl-fe-line-item-row td {
		background: transparent;
		border: 0;
		padding: 6px 0;
	}

	/* On stacked cards the item picker + name become clear bordered fields,
	   and the Amount no longer needs the desktop top-alignment padding. */
	.dabl-fe-li-item .dabl-fe-product-picker,
	.dabl-fe-li-item .dabl-fe-item-name {
		background: #fff;
		border-color: var(--dabl-fe-border);
		margin-top: 0;
	}

	.dabl-fe-li-item .dabl-fe-item-name {
		margin-top: 8px;
	}

	.dabl-fe-line-items .dabl-fe-line-total {
		padding-top: 0;
	}

	.dabl-fe-line-items td[data-label]::before {
		color: var(--dabl-fe-muted);
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.04em;
		margin-bottom: 2px;
		text-transform: uppercase;
	}

	.dabl-fe-line-items input,
	.dabl-fe-line-items select {
		font-size: 16px; /* iOS won't zoom on focus */
		min-height: 44px;
	}

	.dabl-fe-line-items .dabl-fe-qty,
	.dabl-fe-line-items .dabl-fe-price,
	.dabl-fe-line-items .dabl-fe-line-tax {
		text-align: left;
	}

	.dabl-fe-line-item-remove {
		font-size: 22px;
		padding: 10px;
	}

	.dabl-fe-totals-grid {
		grid-template-columns: 1fr;
	}

	.dabl-fe-form-grid {
		grid-template-columns: 1fr;
	}

	.dabl-fe-form input,
	.dabl-fe-form select,
	.dabl-fe-form textarea {
		font-size: 16px;
		min-height: 44px;
	}

	.dabl-fe-form-actions {
		flex-direction: column;
	}

	.dabl-fe-form-actions .dabl-fe-button {
		width: 100%;
	}

	.dabl-fe-action-row .dabl-fe-button {
		width: 100%;
	}

	.dabl-fe-page-head-with-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dabl-fe-page-head-actions {
		flex-direction: column;
	}

	.dabl-fe-page-head-actions .dabl-fe-button {
		width: 100%;
	}
}

/* v3.7.0: public signup card. Reuses the login-card layout (split brand
   panel on the left, form on the right), with a few small additions. */
.dabl-fe-signup-card .dabl-fe-login-form h2 {
	margin-bottom: 6px;
}

.dabl-fe-signup-trial {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 8px;
	color: #fff;
	font-weight: 600;
	margin-top: 18px;
	padding: 10px 14px;
}

.dabl-fe-signup-card label {
	display: block;
	margin-bottom: 14px;
}

.dabl-fe-signup-card label > span {
	color: var(--dabl-fe-text);
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 4px;
}

.dabl-fe-signup-card label > span em {
	color: #b91c1c;
	font-style: normal;
}

.dabl-fe-signup-card input[type="text"],
.dabl-fe-signup-card input[type="email"],
.dabl-fe-signup-card input[type="password"] {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	font-size: 16px;
	min-height: 46px;
	padding: 10px 12px;
	width: 100%;
}

.dabl-fe-signup-submit {
	margin-top: 6px;
	width: 100%;
}

.dabl-fe-signup-fineprint {
	margin-top: 14px;
}

/* =========================================================================
   v3.10.0 dashboard — cash-flow hero + ledger strip. Themed entirely from
   --dabl-lbb-brand (set per business on .dabl-lbb-frontend). Expenses use the
   brand-agnostic slate so they pair with any chosen colour.
   ========================================================================= */
.dabl-fe-eyebrow {
	color: #8a988e;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.dabl-fe-num,
.dabl-fe-led-v,
.dabl-fe-ytd-v,
.dabl-fe-row-amt {
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.dabl-fe-greet {
	align-items: flex-end;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 20px;
}
.dabl-fe-greet-title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: -.02em;
	margin-top: 6px;
}
.dabl-fe-greet-title b {
	color: var(--dabl-lbb-brand);
	font-weight: 800;
}

.dabl-fe-flow {
	background: var(--dabl-fe-card);
	border: 1px solid var(--dabl-fe-border);
	border-radius: 12px;
	margin-bottom: 18px;
	padding: 22px 24px 14px;
}
.dabl-fe-flow-head {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 6px;
}
.dabl-fe-flow-head h3 {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin-top: 4px;
}
.dabl-fe-ytd {
	text-align: right;
}
.dabl-fe-ytd-v {
	color: var(--dabl-lbb-brand);
	font-size: 22px;
	font-weight: 800;
}
.dabl-fe-ytd-v.is-neg {
	color: var(--dabl-lbb-slate);
}

.dabl-fe-chart {
	display: block;
	height: auto;
	margin-top: 8px;
	width: 100%;
}
.dabl-fe-chart .dabl-cf-in {
	fill: var(--dabl-lbb-brand);
}
.dabl-fe-chart .dabl-cf-out {
	fill: var(--dabl-lbb-slate);
}
.dabl-fe-chart .is-past {
	fill-opacity: .5;
}
.dabl-fe-chart .dabl-cf-lbl {
	fill: #8a988e;
	font-family: inherit;
	font-size: 11px;
}
.dabl-fe-chart .dabl-cf-lbl.is-cur {
	fill: var(--dabl-fe-text);
	font-weight: 700;
}

.dabl-fe-legend {
	align-items: center;
	color: var(--dabl-fe-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 16px;
	margin-top: 4px;
}
.dabl-fe-dot {
	border-radius: 3px;
	display: inline-block;
	height: 10px;
	margin-right: 6px;
	vertical-align: -1px;
	width: 10px;
}
.dabl-fe-dot-in { background: var(--dabl-lbb-brand); }
.dabl-fe-dot-out { background: var(--dabl-lbb-slate); }
.dabl-fe-legend-note { color: #8a988e; }

.dabl-fe-ledger {
	background: var(--dabl-fe-card);
	border: 1px solid var(--dabl-fe-border);
	border-radius: 12px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 18px;
	overflow: hidden;
}
.dabl-fe-led-col {
	padding: 18px 20px;
}
.dabl-fe-led-col + .dabl-fe-led-col {
	border-left: 1px solid var(--dabl-fe-border);
}
.dabl-fe-led-v {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	margin-top: 10px;
}
.dabl-fe-led-v.is-in { color: var(--dabl-lbb-brand); }
.dabl-fe-led-v.is-out { color: var(--dabl-lbb-slate); }
.dabl-fe-led-sub {
	color: var(--dabl-fe-muted);
	font-size: 12px;
	margin-top: 4px;
}
.dabl-fe-delta {
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
}
.dabl-fe-delta.is-up {
	background: var(--dabl-lbb-brand-soft);
	color: var(--dabl-lbb-brand-strong);
}
.dabl-fe-delta.is-down,
.dabl-fe-delta.is-flat {
	background: var(--dabl-lbb-slate-soft);
	color: var(--dabl-lbb-slate);
}

.dabl-fe-two {
	display: grid;
	gap: 18px;
	grid-template-columns: 1.1fr .9fr;
}
.dabl-fe-panel-title {
	align-items: center;
	display: flex;
	font-size: 15px;
	font-weight: 800;
	justify-content: space-between;
	letter-spacing: -.01em;
	margin-bottom: 14px;
}
.dabl-fe-panel-title a {
	color: var(--dabl-lbb-brand);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.dabl-fe-att {
	align-items: center;
	background: #f7faf6;
	border-radius: 8px;
	display: flex;
	gap: 14px;
	margin-bottom: 10px;
	padding: 12px;
}
.dabl-fe-att-badge {
	align-items: center;
	border-radius: 8px;
	display: flex;
	flex: 0 0 46px;
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	height: 46px;
	justify-content: center;
}
.dabl-fe-att.is-warn .dabl-fe-att-badge {
	background: var(--dabl-lbb-alert-soft);
	color: var(--dabl-lbb-alert);
}
.dabl-fe-att.is-go .dabl-fe-att-badge {
	background: var(--dabl-lbb-brand-soft);
	color: var(--dabl-lbb-brand-strong);
}
.dabl-fe-att-txt {
	flex: 1;
	min-width: 0;
}
.dabl-fe-att-txt b {
	display: block;
	font-size: 14px;
}
.dabl-fe-att-txt span {
	color: var(--dabl-fe-muted);
	font-size: 12px;
}
.dabl-fe-att-btn {
	background: var(--dabl-lbb-brand);
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 12px;
	text-decoration: none;
	white-space: nowrap;
}
.dabl-fe-att.is-warn .dabl-fe-att-btn {
	background: #fff;
	border: 1px solid var(--dabl-lbb-alert-soft);
	color: var(--dabl-lbb-alert);
}
.dabl-fe-rows {
	display: flex;
	flex-direction: column;
}
.dabl-fe-row {
	align-items: center;
	border-bottom: 1px solid var(--dabl-fe-border);
	display: flex;
	justify-content: space-between;
	padding: 11px 0;
}
.dabl-fe-row:last-child {
	border-bottom: none;
}
.dabl-fe-row-who b {
	display: block;
	font-size: 14px;
}
.dabl-fe-row-who span {
	color: #8a988e;
	font-size: 12px;
}
.dabl-fe-row-amt {
	color: var(--dabl-lbb-brand);
	font-weight: 800;
}
.dabl-fe-empty {
	color: var(--dabl-fe-muted);
	font-size: 13px;
	padding: 6px 2px 10px;
}

/* Brand-colour picker (Settings -> Branding) */
.dabl-fe-brand-field {
	margin-bottom: 14px;
}
.dabl-fe-field-label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}
.dabl-fe-brand-presets {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
.dabl-fe-brand-preset {
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--dabl-fe-border);
	cursor: pointer;
	height: 30px;
	padding: 0;
	width: 30px;
}
.dabl-fe-brand-preset:hover {
	box-shadow: 0 0 0 2px var(--dabl-fe-text);
}
.dabl-fe-brand-input {
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	cursor: pointer;
	height: 34px;
	margin-left: 4px;
	width: 48px;
}

@media (max-width: 1100px) {
	.dabl-fe-ledger {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dabl-fe-led-col:nth-child(3) {
		border-left: none;
	}
	.dabl-fe-led-col:nth-child(3),
	.dabl-fe-led-col:nth-child(4) {
		border-top: 1px solid var(--dabl-fe-border);
	}
}
@media (max-width: 820px) {
	.dabl-fe-two {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.dabl-fe-greet {
		align-items: stretch;
		flex-direction: column;
	}
	.dabl-fe-ledger {
		grid-template-columns: 1fr;
	}
	.dabl-fe-led-col + .dabl-fe-led-col {
		border-left: none;
		border-top: 1px solid var(--dabl-fe-border);
	}
}

/* =========================================================================
   v3.15.0 Import / Export. A marquee Wave card, two balanced secondary
   tools, a grouped export menu, and a reconciliation that reads like a
   financial statement. All themed from --dabl-lbb-brand.
   ========================================================================= */

/* Wave — the marquee card: a soft brand wash, calm and generous. */
.dabl-fe-io-hero {
	background:
		radial-gradient(125% 150% at 100% 0, color-mix(in srgb, var(--dabl-lbb-brand) 15%, #fff), transparent 58%),
		var(--dabl-fe-card);
	border: 1px solid color-mix(in srgb, var(--dabl-lbb-brand) 22%, var(--dabl-fe-border));
	border-radius: 12px;
	display: grid;
	gap: clamp(18px, 3vw, 34px);
	grid-template-columns: minmax(0, 1fr) minmax(280px, 372px);
	margin-bottom: 18px;
	padding: clamp(22px, 3.4vw, 34px);
}

.dabl-fe-io-hero-copy h3 {
	font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -0.03em;
	margin: 8px 0 10px;
}

.dabl-fe-io-hero-copy p {
	color: var(--dabl-fe-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	max-width: 52ch;
}

.dabl-fe-io-hero-form {
	align-self: center;
}

.dabl-fe-io-uploads {
	display: grid;
	gap: 12px;
	margin-bottom: 14px;
}

.dabl-fe-io-file {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.dabl-fe-io-file > span {
	color: var(--dabl-fe-text);
	font-size: 13px;
	font-weight: 700;
}

.dabl-fe-io-file > span em {
	color: #b91c1c;
	font-style: normal;
}

.dabl-fe-io-file input[type="file"] {
	background: #fff;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 8px;
	font-size: 13px;
	padding: 9px 11px;
	width: 100%;
}

.dabl-fe-io-file small {
	color: var(--dabl-fe-muted);
	font-size: 12px;
}

.dabl-fe-io-hero-form .dabl-fe-button-primary {
	width: 100%;
}

/* Two secondary tools, side by side. */
.dabl-fe-io-cols {
	align-items: start;
	display: grid;
	gap: 18px;
	grid-template-columns: 1.05fr 0.95fr;
}

.dabl-fe-io-h {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
}

.dabl-fe-io-csv {
	display: grid;
	gap: 12px;
	margin: 12px 0;
}

.dabl-fe-io-csv label {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	gap: 5px;
}

.dabl-fe-io-csv label > span {
	color: #475569;
	font-weight: 700;
}

.dabl-fe-io-templates {
	border-top: 1px solid var(--dabl-fe-border);
	color: var(--dabl-fe-muted);
	font-size: 12.5px;
	margin: 14px 0 0;
	padding-top: 12px;
}

.dabl-fe-io-templates a {
	color: var(--dabl-lbb-brand-strong);
	font-weight: 600;
}

.dabl-fe-io-templates a:hover {
	text-decoration: underline;
}

/* Export — a tidy grouped menu instead of a row of chiclets. */
.dabl-fe-io-export {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

.dabl-fe-io-group {
	color: var(--dabl-fe-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin: 14px 0 4px;
	text-transform: uppercase;
}

.dabl-fe-io-group:first-child {
	margin-top: 0;
}

.dabl-fe-io-dl {
	align-items: center;
	border-radius: 8px;
	color: var(--dabl-fe-text);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	justify-content: space-between;
	padding: 11px 12px;
}

.dabl-fe-io-dl svg {
	color: var(--dabl-fe-muted);
	flex: 0 0 auto;
}

.dabl-fe-io-dl:hover {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 8%, #fff);
	color: var(--dabl-lbb-brand-strong);
}

.dabl-fe-io-dl:hover svg {
	color: var(--dabl-lbb-brand-strong);
}

/* Wave preview — reads like a financial statement. */
.dabl-fe-io-preview {
	background: var(--dabl-fe-card);
	border: 1px solid var(--dabl-fe-border);
	border-radius: 12px;
	box-shadow: var(--dabl-fe-shadow);
	padding: clamp(20px, 3vw, 32px);
}

.dabl-fe-io-preview-head h3 {
	font-size: clamp(22px, 2.6vw, 28px);
	letter-spacing: -0.03em;
	margin: 8px 0;
}

.dabl-fe-io-preview-head p {
	margin-bottom: 4px;
}

.dabl-fe-io-stats {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(6, 1fr);
	margin: 18px 0;
}

.dabl-fe-io-stat {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 5%, #fff);
	border: 1px solid color-mix(in srgb, var(--dabl-lbb-brand) 16%, #fff);
	border-radius: 8px;
	padding: 14px 10px;
	text-align: center;
}

.dabl-fe-io-stat strong {
	color: var(--dabl-lbb-brand);
	display: block;
	font-size: clamp(20px, 2.4vw, 27px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.dabl-fe-io-stat span {
	color: var(--dabl-fe-muted);
	font-size: 12px;
}

.dabl-fe-io-statement {
	margin: 18px 0;
	max-width: 520px;
}

.dabl-fe-io-statement h4 {
	color: var(--dabl-fe-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.dabl-fe-io-statement dl {
	margin: 0;
}

.dabl-fe-io-statement dl > div {
	align-items: baseline;
	border-bottom: 1px solid #eef2f6;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 10px 0;
}

.dabl-fe-io-statement dt {
	color: var(--dabl-fe-text);
	font-size: 14px;
}

.dabl-fe-io-statement dd {
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
}

.dabl-fe-io-statement .is-key {
	border-bottom: 0;
	border-top: 2px solid var(--dabl-fe-text);
	margin-top: 4px;
	padding-top: 12px;
}

.dabl-fe-io-statement .is-key dt {
	font-weight: 800;
}

.dabl-fe-io-statement .is-key dd {
	color: var(--dabl-lbb-brand);
	font-size: 19px;
	font-weight: 800;
}

.dabl-fe-io-dupes {
	background: #fbfcfd;
	border: 1px solid var(--dabl-fe-border);
	border-radius: 12px;
	margin: 18px 0;
	padding: 16px 18px;
}

.dabl-fe-io-dupes h4 {
	font-size: 15px;
	margin: 0 0 4px;
}

.dabl-fe-io-dupe-list {
	display: grid;
	gap: 2px;
	margin-top: 10px;
	max-height: 320px;
	overflow: auto;
}

.dabl-fe-io-dupe {
	align-items: center;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 8px 10px;
}

.dabl-fe-io-dupe:hover {
	background: color-mix(in srgb, var(--dabl-lbb-brand) 6%, #fff);
}

.dabl-fe-io-dupe input {
	flex: 0 0 auto;
	margin: 0;
}

.dabl-fe-io-dupe-name {
	flex: 1;
	font-size: 13px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dabl-fe-io-dupe-type {
	background: var(--dabl-lbb-slate-soft);
	border-radius: 999px;
	color: var(--dabl-lbb-slate);
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	text-transform: capitalize;
}

.dabl-fe-io-commit {
	margin-top: 18px;
}

@media (max-width: 860px) {
	.dabl-fe-io-hero,
	.dabl-fe-io-cols {
		grid-template-columns: 1fr;
	}
	.dabl-fe-io-stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.dabl-fe-io-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   v3.15.3 Responsiveness pass.
   The line-items editor stacks based on its OWN width (container query), so it
   stays usable even inside a narrow column on a wide screen. Data lists become
   labelled cards on narrow screens (cells labelled from headers in JS).
   ========================================================================= */
@container (max-width: 720px) {
	.dabl-fe-line-items,
	.dabl-fe-line-items thead,
	.dabl-fe-line-items tbody,
	.dabl-fe-line-items tr,
	.dabl-fe-line-items td,
	.dabl-fe-line-items th {
		display: block;
	}
	.dabl-fe-line-items {
		min-width: 0;
		table-layout: auto;
	}
	.dabl-fe-line-items thead {
		display: none;
	}
	.dabl-fe-line-items tbody tr {
		background: #ffffff;
		border: 1px solid var(--dabl-fe-border);
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 12px;
	}
	.dabl-fe-line-items td,
	.dabl-fe-line-item-row td {
		background: transparent;
		border: 0;
		padding: 6px 0;
	}
	.dabl-fe-li-item .dabl-fe-product-picker,
	.dabl-fe-li-item .dabl-fe-item-name {
		background: #fff;
		border-color: var(--dabl-fe-border);
		margin-top: 0;
	}
	.dabl-fe-li-item .dabl-fe-item-name {
		margin-top: 8px;
	}
	.dabl-fe-line-items .dabl-fe-line-total {
		padding-top: 0;
	}
	.dabl-fe-line-items td[data-label]::before {
		color: var(--dabl-fe-muted);
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.04em;
		margin-bottom: 2px;
		text-transform: uppercase;
	}
	.dabl-fe-line-items input,
	.dabl-fe-line-items select {
		font-size: 16px;
		min-height: 44px;
	}
	.dabl-fe-line-items .dabl-fe-qty,
	.dabl-fe-line-items .dabl-fe-price,
	.dabl-fe-line-items .dabl-fe-line-tax {
		text-align: left;
	}
	.dabl-fe-line-item-remove {
		font-size: 22px;
		padding: 10px;
	}
}

/* Data lists: tidy single-line rows when there's room (horizontal scroll if a
   touch wide), labelled stacked cards on narrow screens. */
.dabl-fe-cardable td,
.dabl-fe-cardable th {
	white-space: nowrap;
}

@media (max-width: 860px) {
	.dabl-fe-data-panel .dabl-fe-table-wrap {
		overflow: visible;
	}
	.dabl-fe-cardable thead {
		display: none;
	}
	.dabl-fe-cardable,
	.dabl-fe-cardable tbody,
	.dabl-fe-cardable tr,
	.dabl-fe-cardable td {
		display: block;
		width: 100%;
	}
	.dabl-fe-cardable tbody tr {
		background: #ffffff;
		border: 1px solid var(--dabl-fe-border);
		border-radius: 8px;
		margin-bottom: 10px;
		padding: 6px 14px 12px;
	}
	.dabl-fe-cardable tbody tr:hover {
		background: #ffffff;
	}
	.dabl-fe-cardable td {
		border: 0;
		display: flex;
		gap: 16px;
		justify-content: space-between;
		padding: 7px 0;
		text-align: right;
		white-space: normal;
	}
	.dabl-fe-cardable td::before {
		color: var(--dabl-fe-muted);
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 700;
		text-align: left;
	}
	.dabl-fe-cardable td:empty {
		display: none;
	}
	.dabl-fe-cardable td:first-child {
		border-bottom: 1px solid #eef2f6;
		display: block;
		font-size: 16px;
		font-weight: 700;
		margin-bottom: 4px;
		padding: 4px 0 9px;
		text-align: left;
	}
	.dabl-fe-cardable td:first-child::before {
		content: none;
	}
	.dabl-fe-cardable td.dabl-fe-table-actions {
		justify-content: flex-end;
		padding-top: 8px;
	}
	.dabl-fe-cardable td.dabl-fe-table-actions::before {
		content: none;
	}
}

/* One visible, on-brand keyboard-focus identity across the whole portal
   (previously only form inputs showed focus). */
.dabl-lbb-frontend a:focus-visible,
.dabl-lbb-frontend button:focus-visible,
.dabl-lbb-frontend select:focus-visible,
.dabl-lbb-frontend [tabindex]:focus-visible {
	outline: 2px solid var(--dabl-lbb-brand);
	outline-offset: 2px;
	border-radius: 8px;
}