:root {
	--app-bg: #f3f6fb;
	--app-border: #dbe4f0;
	--app-card: #ffffff;
	--app-dark: #0f172a;
	--app-footer: #e2eaf5;
	--app-footer-border: #cbd6e5;
	--app-muted: #64748b;
	--app-primary: #2563eb;
	--app-primary-dark: #1d4ed8;
	--app-sidebar: #101827;
	--app-sidebar-soft: #1e293b;
	--app-text: #172033;
}

* {
	box-sizing: border-box;
}

body {
	background: var(--app-bg);
	color: var(--app-text);
	font-family: 'Inter', Arial, Helvetica, sans-serif;
	margin: 0;
	min-height: 100vh;
}

a {
	color: inherit;
	text-decoration: none;
}

.app-skip-link {
	background: #ffffff;
	border: 2px solid var(--app-primary);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
	color: var(--app-primary-dark);
	font-size: 14px;
	font-weight: 800;
	left: 16px;
	padding: 10px 14px;
	position: fixed;
	top: 12px;
	transform: translateY(-160%);
	transition: transform .16s ease;
	z-index: 2000;
}

.app-skip-link:focus {
	transform: translateY(0);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid rgba(37, 99, 235, .55);
	outline-offset: 3px;
}

#app-main-content:focus {
	outline: none;
}

.public-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.public-main {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.auth-page,
.login-page {
	background: var(--app-bg);
	color: var(--app-dark);
	min-height: 100vh;
}

.login-page {
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: center;
	padding: 34px 40px;
}

.login-shell {
	background: #ffffff;
	border: 1px solid var(--app-border);
	border-radius: 28px;
	box-shadow: 0 30px 80px rgba(15, 23, 42, .12);
	display: grid;
	grid-template-columns: 1fr .82fr;
	max-width: 1120px;
	min-height: 610px;
	overflow: hidden;
	width: 100%;
}

.login-branding {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 76px;
	position: relative;
}

.login-branding::before {
	background: radial-gradient(circle at top right, rgba(59, 130, 246, .28), transparent 42%);
	content: '';
	inset: 0;
	position: absolute;
}

.login-branding-content {
	position: relative;
	z-index: 2;
}

.login-branding h1 {
	font-size: 50px;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.04;
	margin: 0 0 24px;
	max-width: 510px;
}

.login-features {
	display: grid;
	gap: 14px;
	margin-top: 40px;
}

.login-feature {
	align-items: center;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	display: flex;
	gap: 16px;
	padding: 16px 20px;
}

.login-feature i {
	align-items: center;
	background: rgba(59, 130, 246, .18);
	border-radius: 12px;
	color: #93c5fd;
	display: inline-flex;
	flex: 0 0 42px;
	font-size: 16px;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.login-feature span {
	font-size: 15px;
	font-weight: 700;
}

.login-panel {
	background: #ffffff;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.login-panel-header {
	border-bottom: 1px solid var(--app-border);
	padding: 30px 48px 26px;
	text-align: center;
}

.login-panel-header h2 {
	color: #111827;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.15;
	margin: 0;
}

.login-panel-header p {
	color: var(--app-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 10px 0 0;
}

.login-panel-body {
	align-content: center;
	display: grid;
	margin: 0 auto;
	max-width: 430px;
	padding: 48px 0;
	width: calc(100% - 80px);
}

.google-sign-in-button {
	align-items: center;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	color: #1f2937;
	display: flex;
	font-size: 15px;
	font-weight: 700;
	gap: 12px;
	justify-content: center;
	min-height: 58px;
	padding: 12px 20px;
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.google-sign-in-button i {
	color: #4285f4;
	font-size: 19px;
}

.google-sign-in-button:hover {
	background: #f8fafc;
	border-color: #94a3b8;
	box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
	color: #111827;
}

.login-divider {
	align-items: center;
	color: #94a3b8;
	display: flex;
	font-size: 11px;
	font-weight: 800;
	gap: 14px;
	letter-spacing: .08em;
	margin: 24px 0;
	text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
	background: #e2e8f0;
	content: '';
	flex: 1;
	height: 1px;
}

.login-divider span {
	white-space: nowrap;
}

.login-field {
	margin-bottom: 20px;
}

.login-input-wrap {
	position: relative;
}

.login-input-wrap > i {
	color: var(--app-muted);
	font-size: 17px;
	left: 22px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.login-input-wrap input {
	background: #eaf2ff;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--app-dark);
	display: block;
	font-size: 15px;
	font-weight: 700;
	min-height: 62px;
	outline: none;
	padding: 0 66px 0 62px;
	transition: all .16s ease;
	width: 100%;
}

.login-input-wrap input::placeholder {
	color: var(--app-muted);
	font-weight: 500;
}

.login-input-wrap input:focus {
	background: #ffffff;
	border-color: var(--app-primary);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.login-input-wrap:focus-within > i {
	color: var(--app-primary);
}

.login-password-toggle {
	align-items: center;
	background: rgba(255, 255, 255, .35);
	border: 0;
	border-left: 1px solid rgba(148, 163, 184, .2);
	border-radius: 0 8px 8px 0;
	color: var(--app-muted);
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	height: 62px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
}

.login-password-toggle:hover {
	color: var(--app-primary);
}

.login-links {
	margin: -4px 0 32px;
}

.login-links a,
.login-panel-footer a {
	color: var(--app-primary);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.login-links a:hover,
.login-panel-footer a:hover {
	text-decoration: underline;
}

.login-actions {
	align-items: center;
	display: flex;
	gap: 22px;
	justify-content: space-between;
	margin-top: 0;
}

.login-remember {
	align-items: center;
	color: var(--app-muted);
	cursor: pointer;
	display: inline-flex;
	font-size: 16px;
	font-weight: 500;
	gap: 10px;
	margin: 0;
	user-select: none;
}

.login-remember input {
	accent-color: var(--app-primary);
	height: 18px;
	width: 18px;
}

.login-submit {
	align-items: center;
	background: var(--app-primary);
	border: 1px solid var(--app-primary);
	border-radius: 8px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	justify-content: center;
	min-height: 62px;
	min-width: 126px;
	padding: 12px 30px;
	transition: all .16s ease;
}

.login-submit:hover {
	background: var(--app-primary-dark);
	border-color: var(--app-primary-dark);
}

.login-panel-footer {
	border-top: 1px solid var(--app-border);
	color: var(--app-muted);
	font-size: 15px;
	padding: 28px 32px;
	text-align: center;
	width: 100%;
}

.auth-flow-page {
	align-items: flex-start;
}

.auth-shell-wide {
	grid-template-columns: .9fr 1.1fr;
	max-width: 1240px;
}

.auth-panel-body {
	align-content: center;
	max-width: 500px;
	padding: 36px 0;
}

.auth-name-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-field-label {
	color: #334155;
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 8px;
}

.auth-field-help {
	color: var(--app-muted);
	display: block;
	font-size: 12px;
	line-height: 1.5;
	margin: 8px 2px 0;
}

.auth-google-consent {
	color: var(--app-muted);
	display: block;
	font-size: 11px;
	line-height: 1.5;
	margin: 9px auto 0;
	max-width: 390px;
	text-align: center;
}

.auth-field-error {
	align-items: flex-start;
	color: #b91c1c;
	display: flex;
	font-size: 12px;
	font-weight: 600;
	gap: 7px;
	line-height: 1.45;
	margin: 8px 2px 0;
}

.auth-field-error i {
	margin-top: 2px;
}

.auth-alert {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	line-height: 1.5;
	margin: 0 0 22px;
	padding: 14px 16px;
}

.auth-alert i {
	margin-top: 3px;
}

.auth-alert a {
	font-weight: 700;
	text-decoration: underline;
}

.auth-consent {
	align-items: flex-start;
	color: #475569;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: 10px;
	line-height: 1.5;
	margin: 2px 0 22px;
}

.auth-consent input {
	accent-color: var(--app-primary);
	flex: 0 0 auto;
	height: 17px;
	margin-top: 2px;
	width: 17px;
}

.auth-full-button {
	display: flex;
	width: 100%;
}

.login-submit:disabled,
.login-submit.is-loading {
	cursor: wait;
	opacity: .72;
}

.auth-success-state,
.auth-error-state {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.auth-state-icon {
	align-items: center;
	background: #dbeafe;
	border-radius: 50%;
	color: var(--app-primary);
	display: inline-flex;
	font-size: 25px;
	height: 66px;
	justify-content: center;
	margin-bottom: 20px;
	width: 66px;
}

.auth-state-icon-danger {
	background: #fee2e2;
	color: #dc2626;
}

.auth-success-state h3,
.auth-error-state h3 {
	color: var(--app-dark);
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 10px;
}

.auth-success-state p,
.auth-error-state p {
	color: var(--app-muted);
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 24px;
	max-width: 400px;
}

.auth-secondary-link {
	color: var(--app-primary);
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	margin-top: 18px;
}

.auth-secondary-link:hover {
	text-decoration: underline;
}

.auth-inline-note {
	align-items: flex-start;
	background: #f8fafc;
	border: 1px solid var(--app-border);
	border-radius: 12px;
	color: var(--app-muted);
	display: flex;
	font-size: 12px;
	gap: 10px;
	line-height: 1.5;
	margin-top: 22px;
	padding: 13px 14px;
}

.auth-inline-note i {
	color: var(--app-primary);
	margin-top: 2px;
}

.app-page {
	background: var(--app-bg);
}

.app-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	min-height: 100vh;
}

.app-sidebar {
	background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 24px;
	position: sticky;
	top: 0;
}

.app-brand {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	gap: 14px;
	margin-bottom: 24px;
	padding-bottom: 22px;
}

.app-brand-icon {
	align-items: center;
	background: rgba(59, 130, 246, .18);
	border: 1px solid rgba(147, 197, 253, .18);
	border-radius: 14px;
	color: #93c5fd;
	display: inline-flex;
	font-size: 18px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.app-brand strong {
	display: block;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.app-brand span {
	color: rgba(255, 255, 255, .58);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 2px;
}

.app-nav {
	display: grid;
	gap: 6px;
	overflow-y: auto;
	padding-bottom: 18px;
}

.app-nav a,
.app-sidebar-actions a {
	align-items: center;
	border-radius: 12px;
	color: rgba(255, 255, 255, .72);
	display: flex;
	font-size: 14px;
	font-weight: 700;
	gap: 12px;
	padding: 13px 14px;
	transition: all .16s ease;
}

.app-nav a:hover,
.app-sidebar-actions a:hover {
	background: rgba(255, 255, 255, .08);
	color: #ffffff;
}

.app-nav a.active {
	background: var(--app-primary);
	color: #ffffff;
}

.app-sidebar i {
	color: inherit;
	font-size: 15px;
	width: 18px;
}

/* Nav sub-menu, currently used by the Settings sections */
.app-nav a.is-open {
	background: rgba(255, 255, 255, .08);
	color: #ffffff;
}

.app-nav-sub {
	display: grid;
	gap: 2px;
	margin: 4px 0 8px 27px;
	padding-left: 13px;
	position: relative;
}

.app-nav-sub::before {
	background: rgba(255, 255, 255, .16);
	border-radius: 2px;
	bottom: 8px;
	content: "";
	left: 0;
	position: absolute;
	top: 8px;
	width: 2px;
}

.app-nav-sub a {
	align-items: center;
	border-radius: 10px;
	color: rgba(255, 255, 255, .62);
	display: flex;
	font-size: 13px;
	font-weight: 700;
	gap: 10px;
	padding: 9px 12px;
	transition: all .16s ease;
}

.app-nav-sub a:hover {
	background: rgba(255, 255, 255, .07);
	color: #ffffff;
}

.app-nav-sub a.active {
	background: rgba(255, 255, 255, .14);
	color: #ffffff;
}

.app-nav-sub i {
	font-size: 12px;
	width: 16px;
}

.app-sidebar-footer {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: auto;
	padding-top: 18px;
}

.app-sidebar-user {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	margin-bottom: 7px;
	padding: 0 12px 14px;
}

.app-sidebar-user span {
	color: rgba(255, 255, 255, .42);
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.app-sidebar-user strong {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
}

.app-sidebar-user small {
	color: rgba(255, 255, 255, .58);
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-top: 3px;
}

.app-sidebar-actions {
	display: grid;
	gap: 1px;
}

.app-sidebar-actions a {
	border-radius: 9px;
	padding: 9px 12px;
}

.app-sidebar-actions .sign-out-link {
	color: #fda4af;
}

.app-shell {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.impersonation-banner {
	align-items: center;
	background: #991b1b;
	box-shadow: 0 8px 24px rgba(127, 29, 29, .2);
	color: #ffffff;
	display: flex;
	gap: 22px;
	justify-content: space-between;
	min-height: 72px;
	padding: 12px 36px;
	position: sticky;
	top: 0;
	z-index: 1040;
}

.impersonation-banner-message {
	align-items: center;
	display: flex;
	gap: 13px;
	min-width: 0;
}

.impersonation-banner-icon {
	align-items: center;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	display: inline-flex;
	flex: 0 0 42px;
	font-size: 17px;
	height: 42px;
	justify-content: center;
}

.impersonation-banner-message div {
	display: grid;
	gap: 2px;
}

.impersonation-banner-message strong {
	font-size: 15px;
	font-weight: 900;
}

.impersonation-banner-message span:not(.impersonation-banner-icon) {
	color: #fecaca;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.45;
}

.impersonation-banner form {
	flex: 0 0 auto;
	margin: 0;
}

.impersonation-banner button {
	align-items: center;
	background: #ffffff;
	border: 0;
	border-radius: 11px;
	color: #991b1b;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 900;
	gap: 8px;
	justify-content: center;
	min-height: 42px;
	padding: 10px 15px;
	white-space: nowrap;
}

.impersonation-banner button:hover {
	background: #fff1f2;
}

.app-page-header {
	align-items: center;
	background: radial-gradient(circle at top right, rgba(37, 99, 235, .14), transparent 34%), #ffffff;
	border-bottom: 1px solid #dbe4f0;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	padding: 30px 36px;
}

.app-page-header h1 {
	color: var(--app-dark);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.1;
	margin: 0;
}

.app-page-header p {
	color: var(--app-muted);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	margin: 8px 0 0;
}

.app-page-actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}

.app-main {
	flex: 1;
	padding: 32px 36px;
}

.dashboard-primary-button,
.dashboard-secondary-button {
	align-items: center;
	border-radius: 14px;
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	gap: 10px;
	justify-content: center;
	min-height: 52px;
	padding: 14px 20px;
	transition: all .16s ease;
	white-space: nowrap;
}

.dashboard-primary-button {
	background: var(--app-primary);
	border: 0;
	box-shadow: none;
	color: #ffffff;
}

.dashboard-primary-button:hover {
	background: var(--app-primary-dark);
	box-shadow: none;
	color: #ffffff;
	transform: translateY(-1px);
}

.dashboard-secondary-button {
	background: #ffffff;
	border: 1px solid #dbe4f0;
	color: #334155;
}

.dashboard-secondary-button:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
	transform: translateY(-1px);
}

.dashboard-stats,
.clients-stats,
.invoices-stats {
	display: grid;
	gap: 20px;
}

.dashboard-stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 28px;
}

.clients-stats {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoices-stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-stat-card,
.clients-stat-card,
.invoices-stat-card,
.dashboard-next-card,
.dashboard-mini-card,
.clients-table-card,
.invoices-table-card,
.client-editor-card,
.client-editor-save-card {
	background: #ffffff;
	border: 1px solid #e1e8f2;
	box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.dashboard-stat-card {
	display: grid;
	gap: 22px;
	min-height: 180px;
	overflow: hidden;
	padding: 24px;
	position: relative;
	border-radius: 24px;
}

.dashboard-stat-card::before {
	border-radius: 999px;
	content: '';
	height: 150px;
	opacity: .13;
	position: absolute;
	right: -54px;
	top: -54px;
	width: 150px;
}

.dashboard-stat-card::after {
	content: '';
	height: 4px;
	inset: 0 0 auto 0;
	position: absolute;
}

.dashboard-stat-blue::before,
.dashboard-stat-blue::after {
	background: #2563eb;
}

.dashboard-stat-purple::before,
.dashboard-stat-purple::after {
	background: #7c3aed;
}

.dashboard-stat-orange::before,
.dashboard-stat-orange::after {
	background: #f97316;
}

.dashboard-stat-green::before,
.dashboard-stat-green::after {
	background: #22c55e;
}

.dashboard-stat-icon,
.clients-stat-icon,
.invoices-stat-icon {
	align-items: center;
	border-radius: 18px;
	display: inline-flex;
	font-size: 20px;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.invoices-stat-icon {
	flex: 0 0 54px;
}

.dashboard-stat-blue .dashboard-stat-icon,
.clients-stat-blue,
.invoices-stat-blue {
	background: #eaf2ff;
	color: #2563eb;
}

.dashboard-stat-purple .dashboard-stat-icon {
	background: #f3edff;
	color: #7c3aed;
}

.dashboard-stat-orange .dashboard-stat-icon,
.clients-stat-orange,
.invoices-stat-orange {
	background: #fff3e8;
	color: #f97316;
}

.dashboard-stat-green .dashboard-stat-icon,
.clients-stat-green,
.invoices-stat-green {
	background: #eafaf0;
	color: #16a34a;
}

.invoices-stat-red {
	background: #fef2f2;
	color: #dc2626;
}

.invoices-stat-purple {
	background: #f3edff;
	color: #7c3aed;
}

.dashboard-stat-content,
.dashboard-card-copy,
.dashboard-card-actions {
	position: relative;
	z-index: 2;
}

.dashboard-stat-content span,
.dashboard-kicker,
.clients-stat-card span,
.invoices-stat-card span {
	color: #2563eb;
	display: block;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.clients-stat-card span,
.invoices-stat-card span {
	color: #64748b;
	font-size: 13px;
	letter-spacing: .05em;
	margin-bottom: 6px;
}

.dashboard-stat-content strong,
.clients-stat-card strong,
.invoices-stat-card strong {
	color: #0f172a;
	display: block;
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1;
	margin-bottom: 10px;
}

.clients-stat-card strong,
.invoices-stat-card strong {
	font-size: 30px;
	margin-bottom: 0;
}

.dashboard-stat-content small {
	color: #94a3b8;
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.dashboard-content-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1.6fr) minmax(320px, .7fr);
}

.dashboard-next-card {
	align-items: center;
	border-radius: 24px;
	display: flex;
	gap: 28px;
	justify-content: space-between;
	overflow: hidden;
	padding: 34px;
	position: relative;
}

.dashboard-next-card::before {
	background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, .16), transparent 30%), radial-gradient(circle at 80% 50%, rgba(124, 58, 237, .12), transparent 35%);
	content: '';
	inset: 0;
	position: absolute;
}

.dashboard-next-card h2 {
	color: #0f172a;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1.1;
	margin: 0 0 12px;
}

.dashboard-next-card p,
.dashboard-mini-card p {
	color: #64748b;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	margin: 0;
}

.dashboard-mini-card {
	align-content: center;
	border-radius: 24px;
	display: grid;
	gap: 18px;
	padding: 28px;
}

.dashboard-mini-icon {
	align-items: center;
	background: #fff7ed;
	border-radius: 18px;
	color: #f97316;
	display: inline-flex;
	font-size: 20px;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.dashboard-mini-card span {
	color: #64748b;
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.dashboard-mini-card strong {
	color: #0f172a;
	display: block;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin-bottom: 10px;
}

.reminder-alerts-card {
	background: #ffffff;
	border: 1px solid #fecaca;
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
	margin-bottom: 28px;
	overflow: visible;
	padding: 26px 28px;
	position: relative;
}

.reminder-alerts-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
}

.reminder-alerts-header h2 {
	color: #0f172a;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.02em;
	margin: 0;
}

.reminder-alerts-list {
	display: grid;
	gap: 12px;
}

.reminder-alert-row {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #e1e8f2;
	border-radius: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 14px 16px;
}

.reminder-alert-badge {
	border-radius: 999px;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	padding: 7px 14px;
	text-transform: capitalize;
	white-space: nowrap;
}

.reminder-alert-badge-today {
	background: #fff7ed;
	color: #c2410c;
}

.reminder-alert-badge-overdue {
	background: #fef2f2;
	color: #dc2626;
}

.reminder-alert-details {
	display: grid;
	flex: 1 1 240px;
	gap: 4px;
	min-width: 0;
}

.reminder-alert-details strong {
	color: #0f172a;
	font-size: 15px;
	font-weight: 800;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reminder-alert-details span {
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
}

.reminder-alert-last-sent {
	color: #94a3b8 !important;
	font-style: italic;
}

.reminder-alert-actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.reminder-alert-actions .dropdown-menu {
	z-index: 2060;
}

.reminder-alert-snooze-button,
.reminder-alert-actions .button-send-client-reminder {
	min-height: 40px;
	padding: 9px 14px;
	font-size: 13px;
}

.reminder-alert-dismiss-button {
	align-items: center;
	background: transparent;
	border: 1px solid #dbe4f0;
	border-radius: 12px;
	color: #64748b;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	width: 40px;
	transition: all .16s ease;
}

.reminder-alert-dismiss-button:hover {
	background: #fef2f2;
	border-color: #fecaca;
	color: #dc2626;
}

@media (max-width: 640px) {
	.reminder-alert-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.reminder-alert-actions {
		width: 100%;
	}
}

.clients-page,
.invoices-page {
	display: grid;
	gap: 24px;
}

.clients-stat-card,
.invoices-stat-card {
	align-items: center;
	border-radius: 22px;
	display: flex;
	gap: 16px;
	padding: 22px;
}

.clients-table-card,
.invoices-table-card {
	border-radius: 24px;
	overflow: hidden;
}

.clients-table-header,
.invoices-table-header {
	align-items: center;
	border-bottom: 1px solid #e1e8f2;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 24px;
}

.clients-table-header h3,
.invoices-table-header h3 {
	color: #0f172a;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.1;
	margin: 0 0 6px;
}

.clients-table-header p,
.invoices-table-header p {
	color: #64748b;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.clients-table-search,
.invoices-table-search {
	position: relative;
	width: min(320px, 100%);
}

.invoices-table-search {
	width: 280px;
}

.clients-table-search i,
.invoices-table-search i {
	color: #94a3b8;
	font-size: 14px;
	left: 16px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.clients-table-search input,
.invoices-table-search input,
.invoices-table-tools select {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	color: #0f172a;
	font-size: 14px;
	font-weight: 600;
	min-height: 46px;
	outline: none;
}

.clients-table-search input,
.invoices-table-search input {
	padding: 0 16px 0 44px;
	width: 100%;
}

.invoices-table-tools {
	align-items: center;
	display: flex;
	gap: 12px;
}

.invoices-table-tools select {
	padding: 0 16px;
	width: 170px;
}

.clients-table-search input:focus,
.invoices-table-search input:focus,
.invoices-table-tools select:focus {
	background: #ffffff;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.clients-table-wrap,
.invoices-table-wrap {
	overflow-x: auto;
}

.clients-table,
.invoices-table {
	border-collapse: collapse;
	margin: 0;
	min-width: 980px;
	width: 100%;
}

.invoices-table {
	min-width: 1180px;
}

.clients-table th,
.invoices-table th {
	background: #f8fafc;
	border-bottom: 1px solid #e1e8f2;
	color: #64748b;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	padding: 14px 20px;
	text-transform: uppercase;
	white-space: nowrap;
}

.clients-table td,
.invoices-table td {
	border-bottom: 1px solid #eef2f7;
	color: #334155;
	font-size: 14px;
	font-weight: 600;
	padding: 18px 20px;
	vertical-align: middle;
}

.clients-table tbody tr:hover,
.invoices-table tbody tr:hover {
	background: #f8fafc;
}

.clients-table tbody tr:last-child td,
.invoices-table tbody tr:last-child td {
	border-bottom: 0;
}

.client-name-block,
.invoice-number-block {
	align-items: center;
	display: flex;
	gap: 14px;
}

.client-avatar,
.invoice-avatar {
	align-items: center;
	background: #eaf2ff;
	border-radius: 14px;
	color: #2563eb;
	display: inline-flex;
	font-size: 16px;
	font-weight: 900;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.client-name-block strong,
.invoice-number-block strong,
.invoice-client-block strong {
	color: #0f172a;
	display: block;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
}

.client-name-block span,
.invoice-number-block span,
.invoice-client-block span {
	color: #94a3b8;
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 3px;
}

.client-link {
	color: #2563eb;
	font-weight: 800;
}

.client-link:hover {
	text-decoration: underline;
}

.client-status,
.invoice-status {
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 900;
	padding: 7px 11px;
	text-transform: uppercase;
	white-space: nowrap;
}

.status-active,
.status-paid,
.status-approved,
.status-converted {
	background: #eafaf0;
	color: #16a34a;
}

.status-inactive,
.status-sent,
.status-orange {
	background: #fff3e8;
	color: #f97316;
}

.status-sent {
	background: #eaf2ff;
	color: #2563eb;
}

.status-overdue {
	background: #fef2f2;
	color: #dc2626;
}

.status-declined,
.status-expired {
	background: #fef2f2;
	color: #b91c1c;
}

.status-draft,
.status-void,
.status-cancelled,
.status-canceled {
	background: #f1f5f9;
	color: #475569;
}

.client-action-button,
.invoice-action-button {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 12px;
	color: #64748b;
	cursor: pointer;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.client-action-button:hover,
.invoice-action-button:hover {
	background: #eaf2ff;
	color: #2563eb;
}

.clients-empty,
.invoices-empty {
	padding: 54px 24px;
	text-align: center;
}

.clients-empty-icon,
.invoices-empty-icon {
	align-items: center;
	background: #eaf2ff;
	border-radius: 22px;
	color: #2563eb;
	display: inline-flex;
	font-size: 28px;
	height: 72px;
	justify-content: center;
	margin-bottom: 20px;
	width: 72px;
}

.clients-empty h3,
.invoices-empty h3 {
	color: #0f172a;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -.03em;
	margin: 0 0 10px;
}

.clients-empty p,
.invoices-empty p {
	color: #64748b;
	font-size: 16px;
	font-weight: 600;
	margin: 0 auto 22px;
	max-width: 440px;
}

.client-editor-page {
	margin: 0;
	max-width: none;
	width: 100%;
}

.client-editor-layout {
	align-items: start;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) 320px;
	width: 100%;
}

.client-editor-main {
	display: grid;
	gap: 24px;
	min-width: 0;
}

.client-editor-card,
.client-editor-save-card {
	border-radius: 22px;
	overflow: hidden;
}

.client-editor-card-header {
	background: radial-gradient(circle at top right, rgba(37, 99, 235, .09), transparent 38%), linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	border-bottom: 1px solid #edf2f7;
	padding: 24px 28px 20px;
}

.client-editor-card-header h3,
.client-editor-save-card h3 {
	color: #0f172a;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1.1;
	margin: 0 0 8px;
}

.client-editor-card-header p,
.client-editor-save-card p {
	color: #64748b;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.5;
	margin: 0;
	max-width: 760px;
}

.client-editor-grid {
	display: grid;
	gap: 18px;
	padding: 24px 28px 28px;
}

.client-editor-grid-2,
.client-editor-grid-contact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-editor-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.client-editor-grid-tight-top {
	padding-top: 0;
}

.client-editor-grid-internal {
	align-items: start;
	grid-template-columns: 320px minmax(0, 1fr);
}

.client-editor-field {
	align-content: start;
	align-items: stretch;
	display: grid;
	gap: 7px;
	grid-auto-rows: max-content;
	min-width: 0;
}

.client-editor-field > label {
	align-items: baseline;
	color: #334155;
	display: inline-flex;
	font-size: 13px;
	font-weight: 900;
	gap: 0;
	line-height: 1.2;
	margin: 0;
}

.client-editor-field .form-control,
.client-editor-field .form-select {
	background-color: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	color: #0f172a;
	font-size: 15px;
	font-weight: 650;
	height: 52px;
	line-height: 1.2;
	min-height: 52px;
	padding: 11px 15px;
	transition: all .16s ease;
	width: 100%;
}

.client-editor-field .form-control:focus,
.client-editor-field .form-select:focus {
	background-color: #ffffff;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.client-editor-input-icon {
	align-self: start;
	display: block;
	height: 52px;
	min-height: 52px;
	position: relative;
}

.client-editor-input-icon > i {
	color: #94a3b8;
	font-size: 14px;
	left: 17px;
	pointer-events: none;
	position: absolute;
	top: 26px;
	transform: translateY(-50%);
	transition: color .16s ease;
	z-index: 2;
}

.client-editor-input-icon .form-control {
	height: 52px;
	padding-left: 46px;
}

.client-editor-input-icon:focus-within > i {
	color: #2563eb;
}

.client-editor-field textarea.form-control {
	height: auto;
	line-height: 1.5;
	min-height: 164px;
	resize: vertical;
}

.client-editor-field .client-status-toggle {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: 52px;
	min-height: 52px;
	overflow: hidden;
	padding: 4px;
}

.client-editor-field .client-status-toggle input {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.client-editor-field .client-status-toggle label {
	align-items: center;
	border-radius: 11px;
	color: #64748b;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 900;
	gap: 8px;
	height: 100%;
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0 14px;
	transition: all .16s ease;
	user-select: none;
	width: 100%;
}

.client-editor-field .client-status-toggle label i {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
	width: auto;
}

.client-editor-field .client-status-toggle input:checked + label {
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.client-editor-field .client-status-toggle #input-status-active:checked + label {
	color: #16a34a;
}

.client-editor-field .client-status-toggle #input-status-inactive:checked + label {
	color: #f97316;
}

.client-editor-field .client-status-toggle input:focus-visible + label {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .16), 0 8px 20px rgba(15, 23, 42, .08);
}

.client-editor-sidebar {
	position: sticky;
	top: 32px;
}

.client-editor-save-card {
	display: grid;
	gap: 20px;
	padding: 24px;
}

.client-editor-save-icon {
	align-items: center;
	background: #eaf2ff;
	border-radius: 18px;
	color: #2563eb;
	display: inline-flex;
	font-size: 20px;
	height: 58px;
	justify-content: center;
	width: 58px;
}

.client-editor-actions {
	display: grid;
	gap: 12px;
}

.client-editor-actions .btn {
	align-items: center;
	border-radius: 14px;
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	justify-content: center;
	min-height: 52px;
	width: 100%;
}

.client-form-error-summary {
	align-items: center;
	background: #fff1f2;
	border: 1px solid #fecdd3;
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(190, 18, 60, .08);
	color: #be123c;
	display: flex;
	font-size: 14px;
	font-weight: 900;
	gap: 10px;
	line-height: 1.35;
	margin: 0 0 22px;
	padding: 14px 16px;
}

.client-form-error-summary-icon {
	align-items: center;
	background: #be123c;
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 11px;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.client-field-error {
	align-items: flex-start;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 11px;
	color: #9a3412;
	display: flex;
	font-size: 12px;
	font-weight: 850;
	gap: 8px;
	line-height: 1.35;
	margin-top: 2px;
	padding: 9px 10px;
}

.client-field-error i {
	color: #b45309;
	font-size: 12px;
	margin-top: 2px;
}

.client-editor-field:has(.client-field-error) > .form-control,
.client-editor-field:has(.client-field-error) > .form-select,
.client-editor-field:has(.client-field-error) .client-editor-input-icon .form-control {
	background-color: #fffafa;
	border-color: #fca5a5;
}

.client-editor-field:has(.client-field-error) .client-editor-input-icon > i {
	color: #ef4444;
}

.required-asterisk {
	color: #dc2626;
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
	margin-left: 3px;
}

.required-screen-reader {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.app-modal {
	--detail-blue: #1557ff;
	border: 0;
	border-radius: 24px;
	box-shadow: 0 24px 70px rgba(15, 23, 42, .2);
	overflow: hidden;
}

.app-modal .modal-header {
	align-items: flex-start;
	background: #ffffff;
	border-bottom: 1px solid #e1e8f2;
	padding: 24px;
}

.app-modal .modal-title {
	color: #0f172a;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -.03em;
	margin: 4px 0 0;
}

.app-modal .modal-body {
	padding: 24px;
}

.app-modal .modal-footer {
	background: #f8fafc;
	border-top: 1px solid #e1e8f2;
	padding: 18px 24px;
}

.app-modal .form-label {
	color: #334155;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 7px;
}

.app-modal .form-control,
.app-modal .form-select {
	background-color: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 12px;
	color: #0f172a;
	font-size: 14px;
	font-weight: 600;
	min-height: 46px;
}

.app-modal .form-control:focus,
.app-modal .form-select:focus {
	background-color: #ffffff;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.app-confirm-modal-message {
	align-items: flex-start;
	display: flex;
	gap: 16px;
}

.app-confirm-modal-message p {
	color: #334155;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.6;
	margin: 4px 0 0;
}

.app-confirm-modal-icon {
	align-items: center;
	background: #eaf2ff;
	border-radius: 50%;
	color: #1557ff;
	display: inline-flex;
	flex: 0 0 46px;
	font-size: 19px;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.app-confirm-modal.is-danger .app-confirm-modal-icon {
	background: #fef2f2;
	color: #dc2626;
}

.app-confirm-modal-option,
.invoice-send-pdf-option {
	margin-top: 20px;
}

.app-confirm-modal-option[hidden] {
	display: none !important;
}

.app-confirm-modal-option .settings-toggle,
.invoice-send-pdf-option .settings-toggle {
	border-radius: 14px;
	min-height: 60px;
}

.invoice-send-pdf-option .settings-help-text {
	margin: 8px 4px 0;
}

.client-view-grid,
.invoice-view-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-view-item,
.invoice-view-item {
	background: #f8fafc;
	border: 1px solid #e1e8f2;
	border-radius: 16px;
	padding: 16px;
}

.client-view-wide,
.invoice-view-wide {
	grid-column: 1 / -1;
}

.client-view-item span,
.invoice-view-item span {
	color: #64748b;
	display: block;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.client-view-item strong,
.invoice-view-item strong {
	color: #0f172a;
	display: block;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.45;
	white-space: pre-line;
}

.site-footer {
	align-items: center;
	background: #e2eaf5;
	border-top: 1px solid #cbd6e5;
	color: var(--app-muted);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 16px;
	justify-content: space-between;
	margin-top: auto;
	padding: 18px 32px;
}

.site-footer strong {
	color: var(--app-dark);
	font-weight: 800;
}

.site-footer span {
	color: var(--app-muted);
	margin-left: 6px;
}

.site-footer a {
	color: #2563eb;
	font-weight: 800;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.alert {
	align-items: center;
	border: 0;
	border-radius: 8px;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	margin-bottom: 24px;
	padding: 14px 16px;
}

.alert-danger {
	background: #fef2f2;
	color: #b91c1c;
}

.alert-success {
	background: #eafaf0;
	color: #15803d;
}

.alert-secondary {
	background: #f1f5f9;
	color: #334155;
}

.alert-icon {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 16px;
}

.alert a {
	color: inherit;
	font-weight: 800;
	text-decoration: underline;
}

/* ============================================================
	Self-closing notifications
============================================================ */

.app-toast-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
	position: fixed;
	right: 22px;
	top: 22px;
	width: min(340px, calc(100vw - 44px));
	z-index: 2000;
}

.app-toast {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, .1);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
	overflow: hidden;
	pointer-events: auto;
	transition: opacity .25s ease, transform .25s ease;
}

.app-toast-body {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.app-toast-message {
	color: var(--app-dark);
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	padding: 13px 14px 11px;
}

.app-toast-close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #667085;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 30px;
	justify-content: center;
	margin: 7px 7px 0 0;
	padding: 0;
	width: 30px;
}

.app-toast-close:hover,
.app-toast-close:focus-visible {
	background: rgba(15, 23, 42, .06);
	color: var(--app-dark);
	outline: none;
}

.app-toast-progress {
	animation: app-toast-progress linear forwards;
	background: var(--app-primary);
	height: 3px;
	transform-origin: left;
}

.app-toast-success .app-toast-progress {
	background: #16a34a;
}

.app-toast-error .app-toast-progress {
	background: #dc2626;
}

.app-toast-warning .app-toast-progress {
	background: #d97706;
}

.app-toast-info .app-toast-progress {
	background: var(--app-primary);
}

.app-toast-hiding {
	opacity: 0;
	transform: translateX(18px);
}

@keyframes app-toast-progress {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@media (max-width: 640px) {
	.app-toast-stack {
		left: 16px;
		right: 16px;
		top: 16px;
		width: auto;
	}
}

@media (max-width: 980px) {
	.app-page .app-toast-stack {
		top: calc(82px + env(safe-area-inset-top));
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-toast,
	.app-toast-progress {
		animation: none;
		transition: none;
	}
}

.invoice-balance-due {
	color: #dc2626;
	font-weight: 900;
}

.invoice-balance-clear {
	color: #16a34a;
	font-weight: 900;
}

@media (min-width: 1500px) {
	.app-main:has(.client-editor-page) {
		padding-left: 44px;
		padding-right: 44px;
	}

	.client-editor-layout {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 34px;
	}

	.client-editor-card-header,
	.client-editor-grid {
		padding-left: 38px;
		padding-right: 38px;
	}
}

@media (min-width: 1900px) {
	.app-main:has(.client-editor-page) {
		padding-left: 56px;
		padding-right: 56px;
	}

	.client-editor-layout {
		grid-template-columns: minmax(0, 1fr) 420px;
		gap: 40px;
	}

	.client-editor-grid {
		gap: 28px;
	}
}

@media (max-width: 1380px) {
	.client-editor-layout {
		grid-template-columns: minmax(0, 1fr) 285px;
		gap: 20px;
	}

	.client-editor-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.dashboard-stats,
	.invoices-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dashboard-content-grid,
	.client-editor-layout {
		grid-template-columns: 1fr;
	}

	.client-editor-sidebar {
		position: static;
	}

	.client-editor-save-card {
		align-items: center;
		grid-template-columns: auto minmax(0, 1fr) 260px;
	}

	.client-editor-actions {
		width: 260px;
	}
}

@media (max-width: 1100px) {
	.login-shell {
		grid-template-columns: 1fr .9fr;
		max-width: 1040px;
	}

	.login-branding {
		padding: 56px;
	}

	.login-branding h1 {
		font-size: 44px;
	}
}

@media (max-width: 980px) {
	.login-page {
		align-items: flex-start;
		padding: 24px 20px;
	}

	.login-shell {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.login-panel {
		order: 1;
	}

	.login-branding {
		order: 2;
		padding: 48px 40px;
	}

	.login-branding h1 {
		font-size: 40px;
	}

	.app-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.app-main {
		padding: 22px;
	}

	.app-page-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 26px 22px;
	}

	.app-page-actions,
	.app-page-actions .dashboard-primary-button,
	.app-page-actions .dashboard-secondary-button {
		width: 100%;
	}

	.app-page-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.site-footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.clients-table-header,
	.invoices-table-header,
	.invoices-table-tools {
		align-items: flex-start;
		flex-direction: column;
	}

	.clients-stats {
		grid-template-columns: 1fr;
	}

	.clients-table-search,
	.invoices-table-search,
	.invoices-table-tools,
	.invoices-table-tools select {
		width: 100%;
	}

	.client-editor-grid-internal {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.client-editor-save-card {
		grid-template-columns: 1fr;
	}

	.client-editor-actions {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.login-page {
		padding: 20px 16px;
	}

	.login-shell {
		border-radius: 22px;
	}

	.login-panel-header {
		padding: 28px 24px 24px;
	}

	.login-panel-header h2 {
		font-size: 27px;
	}

	.login-panel-body {
		padding: 34px 0;
		width: calc(100% - 48px);
	}

	.login-input-wrap input,
	.login-password-toggle {
		min-height: 56px;
	}

	.login-password-toggle {
		height: 56px;
	}

	.login-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.login-submit {
		width: 100%;
	}

	.login-panel-footer {
		padding: 24px;
	}

	.auth-name-grid {
		gap: 0;
		grid-template-columns: 1fr;
	}

	.login-branding {
		display: none;
	}

	input:not([type="checkbox"]):not([type="radio"]),
	select,
	textarea {
		font-size: 16px !important;
	}

	.client-action-button,
	.invoice-action-button {
		height: 44px;
		min-width: 44px;
		width: 44px;
	}

	.dashboard-stats,
	.dashboard-content-grid,
	.invoices-stats,
	.client-view-grid,
	.invoice-view-grid,
	.client-editor-grid,
	.client-editor-grid-2,
	.client-editor-grid-4,
	.client-editor-grid-contact,
	.client-editor-grid-internal {
		grid-template-columns: 1fr;
	}

	.dashboard-next-card {
		align-items: flex-start;
		flex-direction: column;
		padding: 28px;
	}

	.dashboard-card-actions,
	.dashboard-primary-button {
		width: 100%;
	}

	.app-main {
		padding: 16px;
	}

	.app-page-header h1 {
		font-size: 30px;
	}

	.client-editor-card-header,
	.client-editor-grid,
	.client-editor-save-card {
		padding: 20px;
	}

	.client-editor-grid-tight-top {
		padding-top: 0;
	}
}

/* ============================================================
   DISABLED SAVE BUTTON
============================================================ */

.client-editor-actions .btn-primary:disabled,
.client-editor-actions .btn-primary.is-disabled {
	background: #cbd5e1;
	border-color: #cbd5e1;
	box-shadow: none;
	color: #ffffff;
	cursor: not-allowed;
	opacity: 1;
	transform: none;
}

.client-name-block {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 58px minmax(0, 1fr);
}

.client-avatar {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: #eaf2ff;
	border-radius: 18px;
	color: #2563eb;
	display: inline-flex;
	flex: 0 0 58px;
	font-size: 20px;
	font-weight: 900;
	height: 58px;
	justify-content: center;
	line-height: 1;
	min-height: 58px;
	min-width: 58px;
	width: 58px;
}

.client-name-block > div:last-child {
	min-width: 0;
}

.client-name-block strong,
.client-name-block span {
	overflow-wrap: anywhere;
}

/* ============================================================
   CLIENT TABLE - NO HORIZONTAL SCROLL
============================================================ */

.clients-table {
	table-layout: fixed;
	min-width: 0;
	width: 100%;
}

.clients-table th,
.clients-table td {
	padding-left: 16px;
	padding-right: 16px;
}

.clients-table th:nth-child(1),
.clients-table td:nth-child(1) {
	width: 36%;
}

.clients-table th:nth-child(2),
.clients-table td:nth-child(2) {
	width: 16%;
}

.clients-table th:nth-child(3),
.clients-table td:nth-child(3) {
	width: 23%;
}

.clients-table th:nth-child(4),
.clients-table td:nth-child(4) {
	width: 10%;
}

.clients-table th:nth-child(5),
.clients-table td:nth-child(5) {
	width: 9%;
}

.clients-table th:nth-child(6),
.clients-table td:nth-child(6) {
	width: 6%;
}

.client-name-block {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: 52px minmax(0, 1fr);
}

.client-avatar {
	align-items: center;
	background: #eaf2ff;
	border-radius: 16px;
	color: #2563eb;
	display: inline-flex;
	font-size: 18px;
	font-weight: 900;
	height: 52px;
	justify-content: center;
	line-height: 1;
	min-height: 52px;
	min-width: 52px;
	width: 52px;
}

.client-name-block > div:last-child {
	min-width: 0;
}

.client-name-block strong,
.client-name-block span,
.clients-table td:nth-child(2),
.clients-table td:nth-child(3),
.clients-table td:nth-child(4) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.client-name-block strong,
.client-name-block span {
	max-width: 100%;
}

.clients-table td:nth-child(3) a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap;
}

/* ============================================================
   CLIENT SEARCH + PAGINATION
============================================================ */

.clients-table-search-form {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	width: min(560px, 100%);
}

.clients-table-search-form .clients-table-search {
	flex: 1;
	width: auto;
}

.clients-search-button,
.clients-clear-search {
	align-items: center;
	border-radius: 14px;
	display: inline-flex;
	font-size: 14px;
	font-weight: 850;
	justify-content: center;
	min-height: 46px;
	padding: 0 16px;
	white-space: nowrap;
}

.clients-search-button {
	background: #2563eb;
	border: 1px solid #2563eb;
	color: #ffffff;
	cursor: pointer;
}

.clients-search-button:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.clients-clear-search {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	color: #64748b;
}

.clients-clear-search:hover {
	background: #ffffff;
	color: #0f172a;
}

.clients-pagination-wrap {
	align-items: center;
	background: #ffffff;
	border-top: 1px solid #e1e8f2;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 18px 24px;
}

.clients-pagination-summary {
	color: #64748b;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.clients-pagination {
	align-items: center;
	background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
	border-top: 1px solid #e5ebf3;
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	justify-content: center;
	overflow-x: auto;
	padding: 20px 24px 24px;
	scrollbar-width: none;
}

.clients-pagination::-webkit-scrollbar {
	display: none;
}

.clients-pagination-link,
.clients-pagination-number,
.clients-pagination-ellipsis {
	align-items: center;
	border-radius: 10px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 850;
	gap: 6px;
	height: 36px;
	justify-content: center;
	min-width: 36px;
	padding: 0 11px;
	white-space: nowrap;
}

.clients-pagination-link,
.clients-pagination-number {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	color: #334155;
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.clients-pagination-link:hover,
.clients-pagination-number:hover {
	background: #eaf2ff;
	border-color: #bfdbfe;
	color: #2563eb;
	transform: translateY(-1px);
}

.clients-pagination-link.is-active,
.clients-pagination-number.is-active {
	background: #2563eb;
	border-color: #2563eb;
	box-shadow: 0 7px 16px rgba(37, 99, 235, .22);
	color: #ffffff;
	opacity: 1;
	transform: none;
}

.clients-pagination-link.is-disabled {
	background: #f8fafc;
	border-color: #e5eaf2;
	color: #cbd5e1;
	cursor: not-allowed;
	pointer-events: none;
}

.clients-pagination-ellipsis {
	color: #94a3b8;
	min-width: 22px;
	padding: 0;
}

@media (max-width: 980px) {
	.clients-table-search-form {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.clients-search-button,
	.clients-clear-search {
		width: 100%;
	}

	.clients-pagination-wrap {
		align-items: stretch;
		flex-direction: column;
	}

	.clients-pagination {
		justify-content: flex-start;
		padding: 18px 18px 22px;
	}
}
/* ============================================================
   FLOATING SAVE BUTTONS
============================================================ */

.client-editor-page .client-editor-layout {
	display: block;
}

.client-editor-page .client-editor-main {
	max-width: none;
	width: 100%;
}

.client-editor-page .client-editor-sidebar {
	display: none;
}

.client-floating-save-button,
.invoice-editor-page .invoice-floating-save {
	align-items: center;
	border-radius: 999px;
	bottom: 28px;
	display: inline-flex;
	font-weight: 900;
	gap: 10px;
	justify-content: center;
	min-height: 58px;
	padding: 16px 22px;
	position: fixed;
	right: 28px;
	z-index: 1050;
}

.client-floating-save-button {
	box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
}

.invoice-editor-page .invoice-floating-save {
	box-shadow: 0 18px 45px rgba(37, 99, 235, .34);
	min-width: 178px;
}

.client-floating-save-button:disabled,
.invoice-editor-page .invoice-floating-save:disabled,
.invoice-editor-page .invoice-floating-save[disabled] {
	box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
	cursor: not-allowed;
	opacity: .42;
}

/* ============================================================
   INVOICE LIST / ACTION MENU FIXES
============================================================ */

.invoices-page .invoices-table {
	min-width: 1080px;
}

.invoices-page .dropdown-item[disabled],
.invoices-page .dropdown-item.is-disabled {
	cursor: not-allowed;
	opacity: .48;
}

.invoice-client-email {
	color: #2563eb;
	font-weight: 800;
}

.invoice-client-email:hover {
	text-decoration: underline;
}

.invoice-overview-card {
	background: #ffffff;
	border: 1px solid #d6e0e8;
	border-radius: 18px;
	overflow: hidden;
}

.invoice-overview-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 28px 30px 24px;
}

.invoice-overview-metric {
	border-right: 1px solid #e7edf4;
	min-width: 0;
	padding: 0 28px;
}

.invoice-overview-metric:first-child {
	padding-left: 0;
}

.invoice-overview-metric:last-child {
	border-right: 0;
	padding-right: 0;
}

.invoice-overview-metric > span {
	color: #52616c;
	display: block;
	font-size: 14px;
	font-weight: 850;
	margin-bottom: 10px;
}

.invoice-overview-metric > strong {
	color: #17212b;
	display: block;
	font-size: clamp(24px, 2vw, 34px);
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.1;
	white-space: nowrap;
}

.invoice-overview-metric > strong small {
	color: #5f6d77;
	font-size: .53em;
	font-weight: 500;
	letter-spacing: 0;
}

.invoice-overview-footer {
	align-items: center;
	border-top: 1px solid #e7edf4;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	padding: 18px 30px;
}

.invoice-overview-footer > span {
	color: #64748b;
	font-size: 13px;
	font-weight: 650;
}

.invoice-overview-footer > span i {
	color: #1557ff;
	margin-right: 6px;
}

.invoice-overview-footer > strong {
	align-items: center;
	background: #e8f7fb;
	border-radius: 999px;
	color: #17212b;
	display: inline-flex;
	font-size: 13px;
	font-weight: 750;
	gap: 9px;
	padding: 11px 18px;
}

.invoice-overview-footer > strong i {
	color: #1557ff;
}

.invoice-wave-directory {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.invoice-wave-filters {
	padding: 18px 0 0;
}

.invoice-active-filters {
	align-items: center;
	color: #64748b;
	display: flex;
	font-size: 13px;
	gap: 9px;
	margin-bottom: 16px;
}

.invoice-active-filters > span {
	align-items: center;
	background: #e5f0ff;
	border: 1px solid #1557ff;
	border-radius: 999px;
	color: #0b3b9f;
	display: inline-flex;
	font-weight: 900;
	height: 28px;
	justify-content: center;
	min-width: 34px;
	padding: 0 9px;
}

.invoice-active-filters > strong {
	font-weight: 650;
}

.invoice-active-filters > button {
	background: transparent;
	border: 0;
	color: #1557ff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 850;
	margin-left: 4px;
	padding: 0;
}

.invoice-filter-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(190px, 1.25fr) minmax(160px, .8fr) minmax(160px, .8fr) minmax(160px, .8fr) minmax(210px, 1fr);
}

.invoice-filter-grid select,
.invoice-filter-grid input {
	background-color: #ffffff;
	border: 1px solid #b9d5fa;
	border-radius: 12px;
	color: #334155;
	font-size: 14px;
	font-weight: 650;
	height: 50px;
	outline: none;
	width: 100%;
}

.invoice-filter-grid select {
	padding: 0 14px;
}

.invoice-filter-grid input:focus,
.invoice-filter-grid select:focus {
	border-color: #1557ff;
	box-shadow: 0 0 0 3px rgba(21, 87, 255, .12);
}

.invoice-filter-date {
	position: relative;
}

.invoice-filter-date > input {
	padding: 0 10px 0 58px;
}

.invoice-filter-date > span {
	color: #748295;
	font-size: 13px;
	font-weight: 750;
	left: 14px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.invoice-number-search {
	width: 100%;
}

.invoice-number-search input {
	padding-left: 42px;
}

.invoice-list-tabs {
	background: #e0f2ff;
	border-radius: 999px;
	display: flex;
	margin: 30px auto 18px;
	padding: 5px;
	width: max-content;
}

.invoice-list-tab {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #173d78;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 750;
	gap: 8px;
	min-height: 44px;
	padding: 0 24px;
	text-decoration: none;
}

.invoice-list-tab:hover {
	color: #0f2f6e;
	text-decoration: none;
}

.invoice-list-tab > span {
	align-items: center;
	border: 1px solid #1557ff;
	border-radius: 999px;
	color: #0b3b9f;
	display: inline-flex;
	font-size: 12px;
	height: 24px;
	justify-content: center;
	min-width: 26px;
	padding: 0 7px;
}

.invoice-list-tab.is-active {
	background: #ffffff;
	box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
	color: #0f2f6e;
	font-weight: 900;
}

.invoice-wave-directory .invoices-table-wrap {
	border-top: 1px solid #d6e0e8;
	overflow-y: visible;
	padding-bottom: 24px;
}

.invoice-wave-directory .invoices-table {
	min-width: 1060px;
}

.invoice-wave-directory .invoices-table th {
	background: #ffffff;
	border-bottom: 2px solid #d6e0e8;
	color: #17212b;
	font-size: 13px;
	letter-spacing: 0;
	padding-bottom: 16px;
	padding-top: 16px;
	text-transform: none;
}

.invoice-wave-directory .invoices-table td {
	color: #273440;
	font-size: 14px;
	padding-bottom: 15px;
	padding-top: 15px;
}

.invoice-wave-directory .invoice-status {
	justify-content: center;
	min-width: 92px;
	padding: 6px 12px;
	text-transform: none;
}

.invoice-due-relative {
	color: #334155;
	font-weight: 750;
	white-space: nowrap;
}

.invoice-due-relative.is-overdue {
	color: #c2413b;
}

.invoice-list-number {
	color: #17212b;
	font-size: 15px;
	font-weight: 800;
}

.invoice-wave-actions {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.invoice-row-primary-action {
	background: transparent;
	border: 0;
	color: #1557ff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 900;
	padding: 8px 2px;
	text-decoration: none;
	white-space: nowrap;
}

.invoice-row-primary-action:hover {
	color: #0b3b9f;
	text-decoration: underline;
}

.invoice-wave-actions .invoice-action-button {
	background: #ffffff;
	border: 1.5px solid #1557ff;
	border-radius: 50%;
	color: #1557ff;
	height: 38px;
	width: 38px;
}

.invoice-wave-actions .invoice-action-button:hover {
	background: #eef5ff;
}

.recurring-workflow-card {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #e1e8f2;
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 26px 0;
	padding: 22px 26px;
}

.recurring-workflow-card > div {
	display: flex;
	flex: 1 1 200px;
	flex-direction: column;
	gap: 4px;
}

.recurring-workflow-card > div > span {
	align-items: center;
	background: #1557ff;
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 900;
	height: 24px;
	justify-content: center;
	margin-bottom: 2px;
	width: 24px;
}

.recurring-workflow-card strong {
	color: #17212b;
	font-size: 15px;
	font-weight: 800;
}

.recurring-workflow-card small {
	color: #64748b;
	font-size: 13px;
	line-height: 1.4;
}

.recurring-workflow-card > i {
	color: #b9c6d6;
	font-size: 16px;
}

.recurring-invoice-directory {
	margin-top: 0;
}

.recurring-directory-heading {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 22px 22px 4px;
}

.recurring-directory-heading h2 {
	color: #17212b;
	font-size: 20px;
	font-weight: 850;
	margin: 2px 0 0;
}

.recurring-directory-heading strong {
	color: #64748b;
	font-size: 13px;
	font-weight: 750;
}

.recurring-table-note {
	color: #64748b;
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-top: 3px;
}

.recurring-table-note.is-error {
	color: #b91c1c;
}

.recurring-table-note.is-pending {
	color: #a16207;
}

.recurring-delivery-badge {
	align-items: center;
	background: #eef5ff;
	border-radius: 999px;
	color: #1557ff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	gap: 6px;
	padding: 6px 12px;
	white-space: nowrap;
}

.recurring-delivery-badge.is-success {
	background: #ecfdf3;
	color: #15803d;
}

.recurring-delivery-badge.is-pending {
	background: #fffbeb;
	color: #a16207;
}

.recurring-delivery-badge.is-error {
	background: #fef2f2;
	color: #b91c1c;
}

.invoice-recurring-flag {
	align-items: center;
	background: #eef2ff;
	border-radius: 999px;
	color: #4338ca;
	display: flex;
	font-size: 11px;
	font-weight: 800;
	gap: 4px;
	margin-top: 6px;
	padding: 3px 9px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	width: fit-content;
	white-space: nowrap;
	text-decoration: none;
}

.invoice-recurring-flag:hover {
	color: #3730a3;
}

.invoice-recurring-flag i {
	font-size: 10px;
}

.invoice-not-sent-flag {
	align-items: center;
	background: #fff7ed;
	border-radius: 999px;
	color: #c2410c;
	display: flex;
	font-size: 11px;
	font-weight: 800;
	gap: 4px;
	margin-top: 6px;
	padding: 3px 9px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	width: fit-content;
	white-space: nowrap;
}

.invoice-not-sent-flag i {
	font-size: 10px;
}

.invoice-scheduled-flag {
	align-items: center;
	background: #eef4ff;
	border-radius: 999px;
	color: #1557ff;
	display: flex;
	font-size: 11px;
	font-weight: 800;
	gap: 4px;
	margin-top: 6px;
	padding: 3px 9px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	width: fit-content;
	white-space: nowrap;
}

.invoice-scheduled-flag.is-unarmed {
	background: #fff7ed;
	color: #c2410c;
}

.invoice-scheduled-flag i {
	font-size: 10px;
}

/* Scheduled send - invoice view page */
.invoice-schedule-send {
	background: #f8fbff;
	border: 0;
	border-top: 1px solid #cfdbed;
	border-radius: 0 0 15px 15px;
	box-shadow: none;
	margin: 0;
	overflow: hidden;
	width: 100%;
}

.invoice-schedule-send.has-controls {
	display: grid;
	grid-template-areas:
		"summary controls"
		"error error"
		"footer footer";
	grid-template-columns: minmax(260px, .85fr) minmax(540px, 1.6fr);
}

.invoice-schedule-send.is-unarmed {
	background: #fffbf5;
	border-top-color: #fed7aa;
}

.invoice-schedule-send-summary {
	align-items: center;
	display: flex;
	gap: 13px;
	grid-area: summary;
	padding: 16px 18px;
}

.invoice-schedule-send-summary-icon {
	align-items: center;
	background: #e7efff;
	border-radius: 12px;
	color: var(--detail-blue);
	display: inline-flex;
	flex: 0 0 42px;
	font-size: 17px;
	height: 42px;
	justify-content: center;
}

.invoice-schedule-send.is-unarmed .invoice-schedule-send-summary-icon {
	background: #ffedd5;
	color: #c2410c;
}

.invoice-schedule-send-summary-copy {
	display: grid;
	flex: 1;
	gap: 1px;
	min-width: 0;
}

.invoice-schedule-send-eyebrow {
	color: #64748b;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.invoice-schedule-send-summary-copy > strong {
	color: #17212b;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.invoice-schedule-send-summary-copy > small {
	color: #5f6d77;
	font-size: 12px;
	line-height: 1.45;
}

.invoice-schedule-send-badge {
	align-items: center;
	background: #e8f7ee;
	border-radius: 999px;
	color: #147a42;
	display: inline-flex;
	font-size: 11px;
	font-weight: 800;
	gap: 6px;
	padding: 7px 10px;
	white-space: nowrap;
}

.invoice-schedule-send.is-unarmed .invoice-schedule-send-badge {
	background: #ffedd5;
	color: #9a3412;
}

.invoice-schedule-send.is-failed .invoice-schedule-send-badge {
	background: #fff1f2;
	color: #be123c;
}

.invoice-schedule-send-error {
	align-items: flex-start;
	background: #fff1f2;
	border-left: 3px solid #e11d48;
	color: #881337;
	display: flex;
	font-size: 12px;
	gap: 9px;
	grid-area: error;
	margin: 0 18px 14px;
	padding: 10px 12px;
}

.invoice-schedule-send-error i {
	font-size: 12px;
	margin-top: 3px;
}

.invoice-schedule-send-form {
	align-items: flex-end;
	border-left: 1px solid #dbe5f2;
	display: grid;
	gap: 12px;
	grid-area: controls;
	grid-template-columns: minmax(170px, 220px) minmax(230px, 1fr) auto;
	padding: 12px 18px;
}

.invoice-schedule-send.is-unarmed .invoice-schedule-send-form {
	border-left-color: #fed7aa;
}

.invoice-schedule-send-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.invoice-schedule-send-field label {
	color: #52606b;
	font-size: 12px;
	font-weight: 800;
}

.invoice-schedule-send-field .form-control {
	background-color: #fff;
	border-color: #cbd5e1;
	border-radius: 10px;
	font-size: 14px;
	height: 46px;
	min-width: 0;
	padding: 8px 12px;
}

.invoice-schedule-send-field .form-control:focus {
	border-color: var(--detail-blue);
	box-shadow: 0 0 0 3px rgba(21, 87, 255, .12);
}

.invoice-schedule-send-attach {
	align-items: center;
	background: #fff;
	border: 1px solid #d9e2ec;
	border-radius: 10px;
	color: #17212b;
	cursor: pointer;
	display: flex;
	gap: 10px;
	margin: 0;
	min-height: 46px;
	padding: 7px 12px;
}

.invoice-schedule-send-attach:hover {
	border-color: #b7c7dc;
}

.invoice-schedule-send-attach input {
	accent-color: var(--detail-blue);
	flex: 0 0 auto;
	height: 17px;
	margin: 0;
	width: 17px;
}

.invoice-schedule-send-attach span {
	display: grid;
	line-height: 1.25;
}

.invoice-schedule-send-attach strong {
	font-size: 12px;
	font-weight: 800;
}

.invoice-schedule-send-attach small {
	color: #64748b;
	font-size: 10px;
}

.invoice-schedule-send-submit {
	min-height: 46px;
}

.invoice-schedule-send-footer {
	align-items: center;
	border-top: 1px solid #e3eaf2;
	display: flex;
	gap: 18px;
	grid-area: footer;
	justify-content: space-between;
	padding: 10px 18px;
}

.invoice-schedule-send-footer > span {
	color: #6b7780;
	font-size: 11px;
	line-height: 1.4;
}

.invoice-schedule-send-cancel {
	align-items: center;
	background: none;
	border: 0;
	color: #a52a2a;
	cursor: pointer;
	display: inline-flex;
	font-size: 11px;
	font-weight: 800;
	gap: 5px;
	padding: 3px 0;
	text-align: left;
	width: fit-content;
	white-space: nowrap;
}

.invoice-schedule-send-cancel:hover {
	color: #7f1d1d;
	text-decoration: underline;
}

.invoice-schedule-send-cancel:focus-visible {
	border-radius: 4px;
	outline: 3px solid rgba(21, 87, 255, .22);
	outline-offset: 3px;
}

@media (max-width: 860px) {
	.recurring-workflow-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.recurring-workflow-card > i {
		display: none;
	}

	.invoice-schedule-send-form {
		border-left: 0;
		border-top: 1px solid #dbe5f2;
		grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.2fr);
	}

	.invoice-schedule-send.has-controls {
		grid-template-areas:
			"summary"
			"error"
			"controls"
			"footer";
		grid-template-columns: 1fr;
	}

	.invoice-schedule-send-submit {
		grid-column: 1 / -1;
		width: 100%;
	}
}

@media (max-width: 560px) {
	.invoice-schedule-send-summary {
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 15px;
	}

	.invoice-schedule-send-summary-copy {
		flex-basis: calc(100% - 55px);
	}

	.invoice-schedule-send-badge {
		margin-left: 55px;
	}

	.invoice-schedule-send-error {
		margin-left: 15px;
		margin-right: 15px;
	}

	.invoice-schedule-send-form {
		grid-template-columns: 1fr;
		padding: 14px 15px 15px;
	}

	.invoice-schedule-send-submit {
		grid-column: auto;
	}

	.invoice-schedule-send-footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		padding: 10px 15px 13px;
	}
}

.estimates-page .invoices-table-card {
	margin-top: 28px;
}

.estimate-detail-page .estimate-document-card {
	margin-top: 24px;
}

.estimate-detail-page .estimate-document-card > .invoices-table-wrap {
	margin-top: 24px;
}

.estimate-detail-page .estimate-view-bottom {
	margin-top: 28px;
}

.estimate-detail-page .invoice-detail-actions form,
.estimates-page .dropdown-menu form {
	margin: 0;
}

.estimates-page .dropdown-menu form .dropdown-item {
	width: 100%;
}

.invoice-filter-empty td {
	padding: 44px 24px !important;
	text-align: center;
}

.invoice-filter-empty i,
.invoice-filter-empty strong,
.invoice-filter-empty span {
	display: block;
}

.invoice-filter-empty i {
	color: #94a3b8;
	font-size: 26px;
	margin-bottom: 10px;
}

.invoice-filter-empty strong {
	color: #17212b;
	font-size: 16px;
}

.invoice-filter-empty span {
	color: #64748b;
	font-size: 13px;
	margin-top: 5px;
}

.invoice-payment-dialog {
	max-width: 790px;
}

.invoice-payment-modal .modal-header {
	padding: 24px 28px;
}

.invoice-payment-modal .modal-title {
	font-size: 25px;
}

.invoice-payment-modal .modal-body {
	padding: 26px 32px 30px;
}

.invoice-payment-summary {
	background: #f5f9ff;
	border: 1px solid #d9e7fb;
	border-radius: 16px;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 24px;
	padding: 18px 20px;
}

.invoice-payment-summary span {
	color: #64748b;
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .06em;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.invoice-payment-summary strong {
	color: #0f172a;
	display: block;
	font-size: 15px;
	font-weight: 850;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.invoice-payment-test-banner {
	margin-bottom: 22px;
}

.invoice-payment-fields {
	display: grid;
	gap: 20px 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invoice-payment-field {
	align-content: start;
	display: grid;
	gap: 8px;
}

.invoice-payment-field-wide {
	grid-column: 1 / -1;
}

.invoice-payment-field > label:not(.settings-toggle) {
	color: #334155;
	font-size: 13px;
	font-weight: 900;
}

.invoice-payment-field > label > span:not(.required-asterisk) {
	color: #64748b;
	font-weight: 650;
}

.invoice-payment-field .form-control,
.invoice-payment-field .form-select {
	background-color: #ffffff;
	border: 1px solid #b9d5fa;
	border-radius: 12px;
	font-size: 15px;
	min-height: 50px;
}

.invoice-payment-field textarea.form-control {
	min-height: 94px;
	resize: vertical;
}

.invoice-payment-money-input {
	position: relative;
}

.invoice-payment-money-input > span {
	color: #8ca1ba;
	font-size: 18px;
	font-weight: 800;
	left: 16px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

.invoice-payment-money-input .form-control {
	padding-left: 38px;
}

#modal-payment-amount-help {
	color: #64748b;
	font-size: 13px;
	font-weight: 700;
	min-height: 18px;
}

#modal-payment-amount-help.is-success {
	color: #15803d;
}

#modal-payment-amount-help.is-error {
	color: #dc2626;
}

.invoice-payment-receipt-option .settings-toggle {
	min-height: 66px;
}

.invoice-payment-receipt-option .settings-toggle.is-disabled {
	cursor: not-allowed;
	opacity: .58;
}

.invoice-payment-modal .modal-footer {
	gap: 10px;
	padding: 18px 28px;
}

@media (max-width: 1200px) {
	.invoice-overview-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 26px;
	}

	.invoice-overview-metric:nth-child(2) {
		border-right: 0;
	}

	.invoice-overview-metric:nth-child(3) {
		padding-left: 0;
	}

	.invoice-filter-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.invoice-number-search {
		grid-column: 1 / -1;
	}
}

@media (max-width: 720px) {
	.invoice-overview-metrics {
		grid-template-columns: 1fr;
		padding: 22px;
	}

	.invoice-overview-metric,
	.invoice-overview-metric:first-child,
	.invoice-overview-metric:nth-child(3),
	.invoice-overview-metric:last-child {
		border-bottom: 1px solid #e7edf4;
		border-right: 0;
		padding: 0 0 18px;
	}

	.invoice-overview-metric:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.invoice-overview-footer {
		align-items: flex-start;
		flex-direction: column;
		padding: 18px 22px;
	}

	.invoice-overview-footer > strong {
		border-radius: 14px;
		line-height: 1.4;
		width: 100%;
	}

	.invoice-filter-grid {
		grid-template-columns: 1fr;
	}

	.invoice-number-search {
		grid-column: auto;
	}

	.invoice-list-tabs {
		margin-left: 0;
		max-width: 100%;
		overflow-x: auto;
	}

	.invoice-list-tab {
		padding-left: 17px;
		padding-right: 17px;
	}

	.invoice-payment-modal .modal-body {
		padding: 22px 20px;
	}

	.invoice-payment-summary,
	.invoice-payment-fields {
		grid-template-columns: 1fr;
	}

	.invoice-payment-field-wide {
		grid-column: auto;
	}
}

/* ============================================================
   INVOICE DETAIL
============================================================ */

.invoice-detail-page {
	--detail-blue: #1557ff;
	--detail-ink: #17212b;
	--detail-line: #d6e0e8;
	--detail-muted: #5f6d77;
	display: grid;
	gap: 28px;
	margin: 0 auto;
	max-width: 1420px;
}

.invoice-detail-hero {
	background: #fff;
	border: 1px solid var(--detail-line);
	border-radius: 22px;
	padding: 30px 38px;
}

.invoice-detail-title-row,
.invoice-detail-actions,
.invoice-detail-summary,
.invoice-detail-step,
.invoice-detail-document-header,
.invoice-detail-billing,
.invoice-detail-document-bottom {
	align-items: center;
	display: flex;
}

.invoice-detail-title-row {
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	row-gap: 14px;
}

.invoice-detail-kicker,
.invoice-detail-doc-label {
	color: var(--detail-muted);
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.invoice-detail-title-row h2 {
	color: var(--detail-ink);
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 850;
	letter-spacing: -.04em;
	margin: 0;
}

.invoice-detail-actions {
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.invoice-detail-inline-form {
	margin: 0;
}

.invoice-detail-button {
	align-items: center;
	border: 2px solid var(--detail-blue);
	border-radius: 999px;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	gap: 9px;
	justify-content: center;
	min-height: 46px;
	padding: 10px 20px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}

.invoice-detail-button:hover {
	box-shadow: 0 8px 22px rgba(21, 87, 255, .16);
	transform: translateY(-1px);
}

.invoice-detail-button-secondary {
	background: #fff;
	color: var(--detail-blue);
}

.invoice-detail-button-primary {
	background: var(--detail-blue);
	color: #fff;
}

.invoice-detail-button-danger {
	background: #dc2626;
	border-color: #dc2626;
	color: #ffffff;
}

.invoice-detail-button-danger:hover {
	box-shadow: 0 8px 22px rgba(220, 38, 38, .18);
}

.invoice-detail-summary {
	border-top: 1px solid var(--detail-line);
	gap: 34px;
	justify-content: space-between;
	margin-top: 28px;
	padding-top: 28px;
}

.invoice-detail-summary > div {
	min-width: 130px;
}

.invoice-detail-summary-client {
	flex: 1;
}

.invoice-detail-summary span:not(.invoice-status) {
	color: var(--detail-muted);
	display: block;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 8px;
}

.invoice-detail-summary strong:not(.invoice-status) {
	color: var(--detail-ink);
	display: block;
	font-size: 22px;
	font-weight: 750;
}

.invoice-detail-summary-client strong:not(.invoice-status) {
	color: var(--detail-blue);
}

.invoice-detail-timeline {
	display: grid;
	gap: 14px;
	margin: 0 auto;
	max-width: 1240px;
	position: relative;
	width: calc(100% - 60px);
}

.invoice-detail-timeline::before {
	background: #c9d5df;
	bottom: 50px;
	content: "";
	left: 34px;
	position: absolute;
	top: 50px;
	width: 5px;
}

.invoice-detail-step {
	background: #fff;
	border: 1px solid var(--detail-line);
	border-radius: 16px;
	gap: 24px;
	min-height: 116px;
	padding: 24px 28px;
	position: relative;
	z-index: 1;
}

.invoice-detail-step-send {
	display: block;
	overflow: hidden;
	padding: 0;
}

.invoice-detail-step-main {
	align-items: center;
	display: flex;
	gap: 24px;
	min-height: 114px;
	padding: 24px 28px;
}

.invoice-detail-step-main > div:nth-child(2) {
	flex: 1;
}

.invoice-detail-step-icon {
	align-items: center;
	background: #fff;
	border: 2px solid var(--detail-blue);
	border-radius: 50%;
	color: var(--detail-blue);
	display: flex;
	flex: 0 0 48px;
	font-size: 19px;
	height: 48px;
	justify-content: center;
}

.invoice-detail-step > div:nth-child(2) {
	flex: 1;
}

.invoice-detail-step h3 {
	color: #4c5b65;
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 8px;
}

.invoice-detail-step p {
	color: var(--detail-ink);
	margin: 0;
}

.invoice-detail-document {
	background: #fff;
	border: 1px solid #d7dde2;
	box-shadow: 0 5px 18px rgba(15, 23, 42, .13);
	display: flex;
	flex-direction: column;
	margin: 12px auto 0;
	max-width: 1240px;
	min-height: 1120px;
	width: calc(100% - 60px);
}

.invoice-detail-document-header {
	justify-content: space-between;
	min-height: 270px;
	padding: 54px 30px 36px;
}

.invoice-detail-brand {
	align-items: center;
	color: #153a88;
	display: flex;
	font-size: 28px;
	font-weight: 900;
	gap: 18px;
}

.invoice-detail-brand img {
	max-height: 150px;
	max-width: 380px;
	object-fit: contain;
}

.invoice-detail-brand-mark {
	align-items: center;
	background: linear-gradient(135deg, #1557ff, #35b6cf);
	border-radius: 24px;
	color: #fff;
	display: flex;
	font-size: 36px;
	height: 84px;
	justify-content: center;
	width: 84px;
}

.invoice-detail-from {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	text-align: right;
}

.invoice-detail-from h3 {
	color: var(--detail-ink);
	font-size: 44px;
	font-weight: 400;
	letter-spacing: .02em;
	margin: 0 0 14px;
}

.invoice-detail-from .invoice-detail-subheading {
	color: #64748b;
	font-size: 15px;
	font-weight: 700;
	margin: -6px 0 14px;
	max-width: 420px;
}

.invoice-detail-from span,
.invoice-detail-billing span {
	color: #303b45;
	display: block;
	line-height: 1.55;
}

.invoice-detail-billing {
	border-top: 1px solid var(--detail-line);
	gap: 50px;
	justify-content: space-between;
	padding: 36px 30px;
}

.invoice-detail-billing > div:first-child {
	align-self: flex-start;
	display: grid;
}

.invoice-detail-billing > div:first-child strong {
	color: var(--detail-ink);
	font-size: 16px;
}

.invoice-detail-billing a {
	color: var(--detail-blue);
	font-weight: 650;
	margin-top: 18px;
}

.invoice-detail-doc-meta {
	min-width: 380px;
}

.invoice-detail-doc-meta > div,
.invoice-detail-totals > div {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr 140px;
	padding: 5px 12px;
}

.invoice-detail-doc-meta span,
.invoice-detail-totals span {
	font-weight: 750;
	text-align: right;
}

.invoice-detail-doc-meta-due {
	background: #f1f3f5;
}

.invoice-detail-items-wrap {
	overflow-x: auto;
}

.invoice-detail-items {
	border-collapse: collapse;
	min-width: 700px;
	width: 100%;
}

.invoice-detail-items th {
	background: var(--invoice-accent, #176e8a);
	color: #fff;
	font-size: 13px;
	letter-spacing: .04em;
	padding: 15px 20px;
	text-align: right;
	text-transform: uppercase;
}

.invoice-detail-items th:first-child,
.invoice-detail-items td:first-child {
	padding-left: 30px;
	text-align: left;
	width: 58%;
}

.invoice-detail-items th:last-child,
.invoice-detail-items td:last-child {
	padding-right: 30px;
}

.invoice-detail-items td {
	border-bottom: 1px solid #edf1f4;
	color: var(--detail-ink);
	padding: 22px 20px;
	text-align: right;
	vertical-align: top;
}

.invoice-detail-document-bottom {
	align-items: flex-start;
	gap: 50px;
	justify-content: space-between;
	padding: 34px 30px 80px;
}

.invoice-detail-notes {
	flex: 1;
}

.invoice-detail-notes p {
	color: #43515b;
	margin: 0 0 22px;
}

.invoice-detail-totals {
	min-width: 420px;
}

.invoice-detail-totals > div {
	border-bottom: 1px solid #d9e0e5;
}

.invoice-detail-totals .invoice-detail-total {
	border-bottom: 3px solid #d1dbe2;
	font-size: 17px;
	padding-bottom: 16px;
	padding-top: 16px;
}

.invoice-detail-totals .invoice-detail-amount-due {
	border: 0;
	font-size: 18px;
	padding-top: 16px;
}

.invoice-detail-document-footer {
	border-top: 1px solid var(--detail-line);
	color: #64748b;
	font-size: 13px;
	line-height: 1.6;
	margin: auto 30px 0;
	padding: 22px 0 30px;
	text-align: center;
}

.invoice-detail-payments {
	background: #fff;
	border: 1px solid var(--detail-line);
	border-radius: 18px;
	overflow: hidden;
}

.invoice-detail-payments h3 {
	color: var(--detail-ink);
	font-size: 21px;
	font-weight: 850;
	margin: 0;
	padding: 24px;
}

@media (max-width: 900px) {
	.invoice-detail-title-row,
	.invoice-detail-summary,
	.invoice-detail-document-header,
	.invoice-detail-billing,
	.invoice-detail-document-bottom {
		align-items: stretch;
		flex-direction: column;
	}

	.invoice-detail-actions {
		justify-content: flex-start;
	}

	.invoice-detail-summary {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.invoice-detail-timeline,
	.invoice-detail-document {
		width: 100%;
	}

	.invoice-detail-from {
		align-items: flex-start;
		text-align: left;
	}

	.invoice-detail-doc-meta,
	.invoice-detail-totals {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.invoice-detail-hero {
		padding: 24px 20px;
	}

	.invoice-detail-actions,
	.invoice-detail-actions > *,
	.invoice-detail-button {
		width: 100%;
	}

	.invoice-detail-summary {
		grid-template-columns: 1fr;
	}

	.invoice-detail-step {
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 20px;
	}

	.invoice-detail-step-send {
		padding: 0;
	}

	.invoice-detail-step-main {
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 20px;
	}

	.invoice-detail-step > .invoice-detail-button,
	.invoice-detail-step > form,
	.invoice-detail-step-main > .invoice-detail-button,
	.invoice-detail-step-main > form {
		margin-left: 72px;
		width: calc(100% - 72px);
	}

	.invoice-detail-document-header,
	.invoice-detail-billing,
	.invoice-detail-document-bottom {
		padding-left: 22px;
		padding-right: 22px;
	}

	.invoice-detail-brand img {
		max-width: 100%;
	}

	.invoice-detail-doc-meta > div,
	.invoice-detail-totals > div {
		grid-template-columns: 1fr auto;
	}
}

/* ============================================================
   INVOICE EDITOR
============================================================ */

.invoice-editor-page {
	--detail-blue: #1557ff;
	--invoice-blue-soft: #eef5ff;
	--invoice-ink: #0f172a;
	--invoice-line: #dbe4f0;
	--invoice-muted: #64748b;
	--invoice-soft: #f8fafc;
}

.invoice-editor-page .invoice-editor-layout {
	align-items: start;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 auto;
	max-width: 1120px;
}

/* The shared .client-editor-main grid puts a 24px gap between cards, which
   suits the client page's separate floating cards. Here the cards are stacked
   inside one bordered panel and separated by their own bottom border, so the
   gap only exposes strips of the panel's white background between them. */
.invoice-editor-page .invoice-editor-main {
	background: #ffffff;
	border: 1px solid var(--invoice-line);
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .1);
	gap: 0;
	max-width: none;
	overflow: hidden;
	width: 100%;
}

.invoice-editor-page .invoice-editor-card {
	background: #ffffff;
	border: 0;
	border-bottom: 1px solid #e8eef7;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 34px 38px;
}

.invoice-editor-page .invoice-editor-card:last-child {
	border-bottom: 0;
}

.invoice-editor-page .invoice-document-header-card {
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 58%, var(--invoice-blue-soft) 100%);
}

.invoice-editor-page .invoice-document-top {
	align-items: start;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(280px, 1fr) minmax(300px, 420px);
}

.invoice-editor-page .invoice-document-title h2 {
	color: var(--invoice-ink);
	font-size: clamp(44px, 7vw, 74px);
	letter-spacing: -.07em;
	line-height: .88;
	margin: 0 0 16px;
}

.invoice-editor-page .invoice-document-title p,
.invoice-editor-page .client-editor-card-header p {
	color: var(--invoice-muted);
	font-weight: 800;
	margin: 0;
	max-width: 440px;
}

.invoice-editor-page .invoice-document-meta {
	background: rgba(255, 255, 255, .82);
	border: 1px solid var(--invoice-line);
	border-radius: 18px;
	display: grid;
	gap: 12px;
	padding: 18px;
}

.invoice-editor-page .invoice-document-meta-row {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: 120px minmax(0, 1fr);
}

.invoice-editor-page .invoice-document-meta-row label,
.invoice-editor-page .invoice-bill-to label,
.invoice-editor-page .invoice-summary-label {
	color: var(--invoice-muted);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .05em;
	margin: 0;
	text-transform: uppercase;
}

.invoice-editor-page .invoice-document-meta-row .form-control,
.invoice-editor-page .invoice-document-meta-row .form-select,
.invoice-editor-page .invoice-bill-to .form-select {
	border-radius: 10px;
	min-height: 44px;
}

.invoice-editor-page .invoice-bill-to {
	margin-top: 46px;
	max-width: 520px;
}

.invoice-editor-page .invoice-bill-to .form-select {
	margin-top: 8px;
}

.invoice-editor-page .client-editor-card-header {
	background: transparent;
	border-bottom: 0;
	margin-bottom: 20px;
	padding: 0;
}


/* ============================================================
   RECURRING INVOICE SCHEDULE
============================================================ */

.invoice-editor-page .invoice-recurring-card {
	background: #f8fcf9;
	padding: 28px 38px 0;
}

.invoice-editor-page .invoice-recurring-header {
	align-items: center;
	margin: 0 auto 24px;
	max-width: 940px;
}

.invoice-recurring-heading {
	align-items: center;
	display: flex;
	gap: 14px;
}

.invoice-recurring-heading-icon {
	align-items: center;
	background: #e1f5e7;
	border-radius: 12px;
	color: #178446;
	display: flex;
	flex: 0 0 42px;
	font-size: 18px;
	height: 42px;
	justify-content: center;
}

.invoice-editor-page .invoice-recurring-header h3 {
	font-size: 20px;
	letter-spacing: -.025em;
	margin: 0 0 3px;
}

.invoice-editor-page .invoice-recurring-header p {
	color: #6b7b70;
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.invoice-recurring-status {
	background: #edf1f4;
	border-radius: 999px;
	color: #526071;
	font-size: 12px;
	font-weight: 800;
	padding: 8px 12px;
	white-space: nowrap;
}

.invoice-recurring-status.is-active {
	background: #dff4e5;
	color: #15803d;
}

.invoice-recurring-header-actions {
	align-items: center;
	display: flex;
	gap: 14px;
}

.invoice-recurring-dependent[hidden] {
	display: none !important;
}

.invoice-recurring-grid {
	display: grid;
	gap: 20px 16px;
	grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr) minmax(220px, 1fr);
	margin: 0 auto;
	max-width: 940px;
	padding: 0 0 26px;
}

.invoice-recurring-field > label:first-child {
	color: #26374d;
	display: block;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 7px;
}

.invoice-recurring-field label small {
	color: #7a8899;
	font-weight: 650;
	margin-left: 4px;
}

.invoice-recurring-interval-control {
	background: #fff;
	border: 1px solid #d7e2eb;
	border-radius: 12px;
	display: grid;
	grid-template-columns: minmax(80px, 1fr) minmax(100px, 1fr);
	overflow: hidden;
}

.invoice-recurring-field > .form-control,
.invoice-recurring-field > .form-select,
.invoice-recurring-interval-control {
	min-height: 48px;
}

.invoice-recurring-interval-control .form-control {
	border: 0;
	border-radius: 0;
}

.invoice-recurring-interval-control span {
	align-items: center;
	background: #f3f6fa;
	border-left: 1px solid #d7e2eb;
	color: #64748b;
	display: flex;
	font-size: 14px;
	font-weight: 750;
	padding: 0 14px;
}

.invoice-recurring-auto-send .settings-toggle {
	background: #ffffff;
	border: 1px solid #d9e6dd;
	border-radius: 14px;
	gap: 12px;
	min-height: 70px;
	padding: 12px 14px;
}

.invoice-recurring-auto-send {
	grid-column: 1 / -1;
}

.invoice-editor-page .invoice-recurring-auto-send .settings-toggle:hover {
	background: #f3faf5;
	border-color: #bad9c4;
}

.invoice-editor-page .invoice-recurring-auto-send .settings-toggle > .invoice-recurring-delivery-icon {
	align-items: center;
	background: #edf7f0;
	border-radius: 10px;
	color: #23834a;
	display: flex;
	flex: 0 0 40px;
	height: 40px;
	justify-content: center;
	order: 0;
	position: static;
}

.invoice-editor-page .invoice-recurring-auto-send .settings-toggle > .invoice-recurring-delivery-icon::before,
.invoice-editor-page .invoice-recurring-auto-send .settings-toggle > .invoice-recurring-delivery-copy::before {
	display: none;
}

.invoice-editor-page .invoice-recurring-auto-send .settings-toggle > .invoice-recurring-delivery-copy {
	background: transparent;
	border-radius: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: auto;
	order: 1;
	position: static;
}

.invoice-editor-page .invoice-recurring-delivery-copy strong {
	font-size: 14px;
	order: 0;
}

.invoice-recurring-delivery-copy small {
	color: #718078;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	margin-top: 2px;
}

.invoice-editor-page .invoice-recurring-auto-send .settings-toggle > .invoice-recurring-toggle {
	flex: 0 0 48px;
	height: 28px;
	order: 2;
}

.invoice-editor-page .invoice-recurring-auto-send .settings-toggle > .invoice-recurring-toggle::before {
	height: 22px;
	width: 22px;
}

.invoice-editor-page .invoice-recurring-auto-send .settings-toggle input:checked + .invoice-recurring-toggle::before {
	transform: translateX(20px);
}

.invoice-recurring-cancel {
	background: transparent;
	border: 0;
	color: #b42318;
	font-size: 13px;
	font-weight: 800;
	padding: 6px 0;
}

@media (max-width: 720px) {
	.invoice-editor-page .invoice-recurring-card {
		padding: 24px 22px 0;
	}

	.invoice-editor-page .invoice-recurring-header {
		align-items: flex-start;
	}

	.invoice-recurring-grid {
		grid-template-columns: 1fr;
	}

	.invoice-recurring-auto-send {
		grid-column: auto;
	}

	.invoice-recurring-header-actions {
		align-items: flex-end;
		flex-direction: column;
	}
}

.invoice-editor-page .client-editor-card-header h3 {
	font-size: 25px;
	letter-spacing: -.04em;
}

.invoice-editor-page .invoice-line-items-wrap {
	background: #ffffff;
	border: 1px solid var(--invoice-line);
	border-radius: 16px;
	overflow-x: auto;
	width: 100%;
}

.invoice-editor-page .invoice-line-items-table {
	border-collapse: collapse;
	margin: 0;
	min-width: 0;
	width: 100%;
}

.invoice-editor-page .invoice-line-items-table thead,
.invoice-editor-page .invoice-line-items-table tbody {
	display: block;
	width: 100%;
}

.invoice-editor-page .invoice-line-items-table thead {
	background: #eaf0f4;
	border-bottom: 2px solid #d3dde5;
}

.invoice-editor-page .invoice-line-items-table thead tr,
.invoice-editor-page .invoice-item-main-row {
	align-items: center;
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(280px, 1fr) 120px 150px 150px 42px;
	width: 100%;
}

.invoice-editor-page .invoice-line-items-table thead tr {
	background: transparent;
	padding: 0 32px;
}

.invoice-editor-page .invoice-line-items-table thead th {
	display: block;
	text-align: left;
}

.invoice-editor-page .invoice-line-items-table thead th:nth-child(2),
.invoice-editor-page .invoice-line-items-table thead th:nth-child(3),
.invoice-editor-page .invoice-line-items-table thead th:nth-child(4) {
	text-align: right;
}

.invoice-editor-page .invoice-line-item-row,
.invoice-editor-page .invoice-line-item-row > td {
	display: block;
	width: 100%;
}

.invoice-editor-page .invoice-line-items-table th {
	background: var(--invoice-ink);
	color: #ffffff;
	font-size: 12px;
	letter-spacing: .03em;
	line-height: 1.2;
	padding: 14px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

.invoice-editor-page .invoice-line-items-table td {
	border-bottom: 1px solid #e8eef7;
	padding: 10px 12px;
	vertical-align: middle;
}

.invoice-editor-page .invoice-line-items-table tr:last-child td {
	border-bottom: 0;
}

.invoice-editor-page .invoice-line-items-table .form-control {
	background: #ffffff;
	border-radius: 10px;
	min-height: 42px;
	padding-left: 11px;
	padding-right: 11px;
}

.invoice-editor-page .invoice-line-tax-select {
	border: 2px solid #b9d5fa;
	border-radius: 12px;
	font-size: 14px;
	min-height: 52px;
	padding-left: 10px;
	padding-right: 30px;
}

.invoice-editor-page .invoice-line-tax-display {
	color: #52616c;
	display: block;
	font-size: 12px;
	font-weight: 800;
	margin-top: 6px;
	text-align: right;
}

.invoice-editor-page .invoice-line-description-wrap {
	align-items: center;
	display: flex;
	gap: 10px;
}

.invoice-editor-page .invoice-line-description-wrap .invoice-line-description {
	flex: 1;
	min-width: 0;
}

/* The description is a textarea that grows with its content. */

.invoice-editor-page textarea.invoice-line-description {
	display: block;
	font-family: inherit;
	font-size: 15px;
	height: auto;
	line-height: 1.45;
	min-height: 46px;
	overflow: hidden;
	padding-bottom: 11px;
	padding-top: 11px;
	resize: none;
}

/* Keep the drag handle beside the first line rather than floating in the
   middle of a tall description. */

.invoice-editor-page .invoice-line-description-wrap:has(textarea.invoice-line-description) {
	align-items: flex-start;
}

.invoice-editor-page .invoice-line-description-wrap:has(textarea.invoice-line-description) .invoice-line-drag-handle {
	margin-top: 12px;
}

.invoice-editor-page .invoice-line-drag-handle {
	background: transparent;
	border: 0;
	color: #7b8993;
	cursor: grab;
	flex: 0 0 24px;
	font-size: 18px;
	padding: 8px 4px;
}

.invoice-editor-page .invoice-line-drag-handle:active {
	cursor: grabbing;
}

.invoice-editor-page .invoice-line-item-row {
	transition: opacity .15s ease, background .15s ease;
}

.invoice-editor-page .invoice-line-item-row.is-dragging {
	background: #eef5ff;
	opacity: .55;
}

.invoice-editor-page .invoice-line-items-table .invoice-line-money,
.invoice-editor-page .invoice-line-items-table .invoice-line-quantity {
	text-align: right;
}

.invoice-editor-page .invoice-line-total-display {
	color: var(--invoice-ink);
	display: block;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	font-weight: 950;
	padding: 9px 0;
	text-align: right;
}

.invoice-editor-page .invoice-line-action-cell {
	text-align: center;
	width: 54px;
}

.invoice-editor-page .invoice-remove-line {
	border-radius: 12px;
	height: 38px;
	width: 38px;
}

.invoice-editor-page .invoice-payment-layout {
	align-items: start;
	display: grid;
	gap: clamp(30px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
}

.invoice-editor-page .invoice-notes-terms {
	display: grid;
	gap: 24px;
}

.invoice-editor-page .invoice-notes-terms textarea {
	border-radius: 16px;
	min-height: 150px;
	resize: vertical;
}

.invoice-editor-page .invoice-summary-box {
	background: #ffffff;
	border: 1px solid var(--invoice-line);
	border-radius: 18px;
	box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
	overflow: hidden;
}

.invoice-editor-page .invoice-summary-row {
	align-items: center;
	border-bottom: 1px solid #e8eef7;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 68px;
	padding: 15px 22px;
}

.invoice-editor-page .invoice-summary-row:last-child {
	border-bottom: 0;
}

.invoice-editor-page .invoice-summary-value {
	color: var(--invoice-ink);
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	font-weight: 950;
}

.invoice-editor-page .invoice-summary-label {
	color: #64748b;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.invoice-editor-page .invoice-summary-row-total {
	background: var(--invoice-ink);
}

.invoice-editor-page .invoice-summary-row-total .invoice-summary-label,
.invoice-editor-page .invoice-summary-row-total .invoice-summary-value {
	color: #ffffff;
}

.invoice-editor-page .invoice-summary-row-balance .invoice-summary-value {
	font-size: 24px;
}

.invoice-editor-page .invoice-payments-applied-row {
	background: var(--invoice-soft);
}

.invoice-editor-page .invoice-summary-row-balance {
	background: #ffffff;
	min-height: 84px;
}

.invoice-editor-page .invoice-summary-actions {
	background: #f8fafc;
	border-top: 1px solid #e8eef7;
	padding: 18px 22px;
}

.invoice-editor-page .invoice-record-payment-button {
	justify-content: center;
	width: 100%;
}

/* Wave-inspired invoice composer */
body:has(.invoice-editor-page) .app-page-header {
	display: none;
}

body:has(.invoice-editor-page) .app-main {
	background: #f7f9fb;
	padding-top: 34px;
}

.invoice-editor-page .invoice-editor-layout {
	max-width: 1460px;
}

.invoice-editor-page .invoice-editor-toolbar {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	padding: 0 4px 10px;
}

.invoice-editor-page .invoice-editor-kicker {
	color: #64748b;
	display: block;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.invoice-editor-page .invoice-editor-toolbar h2 {
	color: #17212b;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 850;
	letter-spacing: -.045em;
	margin: 0;
}

.invoice-editor-page .invoice-editor-toolbar-actions {
	align-items: center;
	display: flex;
	gap: 12px;
}

.invoice-editor-page .invoice-editor-preview-button,
.invoice-editor-page .invoice-editor-save-button {
	align-items: center;
	border: 2px solid #1557ff;
	border-radius: 999px;
	display: inline-flex;
	font-size: 15px;
	font-weight: 850;
	gap: 9px;
	justify-content: center;
	min-height: 50px;
	padding: 11px 24px;
	text-decoration: none;
}

.invoice-editor-page .invoice-editor-preview-button {
	background: #fff;
	color: #1557ff;
}

.invoice-editor-page .invoice-editor-save-button {
	background: #1557ff;
	color: #fff;
}

.invoice-editor-page .invoice-editor-main {
	border: 0;
	border-radius: 20px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
}

.invoice-editor-page .invoice-editor-card {
	padding: 40px 46px;
}

.invoice-editor-page .invoice-document-header-card {
	background: #fff;
	min-height: 430px;
}

.invoice-editor-page .invoice-document-top {
	gap: clamp(50px, 9vw, 140px);
	grid-template-columns: minmax(0, 1fr) minmax(370px, 460px);
}

.invoice-editor-page .invoice-document-title {
	display: block;
	margin-bottom: 28px;
}

.invoice-editor-page .invoice-document-title-input {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: #17212b;
	display: block;
	font-size: clamp(34px, 4.4vw, 54px);
	font-weight: 850;
	letter-spacing: -.045em;
	margin: 0 0 14px;
	padding: 2px 0;
	width: 100%;
}

.invoice-editor-page .invoice-document-subheading-input {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: #52616c;
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 18px;
	padding: 2px 0;
	width: 100%;
}

.invoice-editor-page .invoice-document-title-input:hover,
.invoice-editor-page .invoice-document-subheading-input:hover {
	border-bottom-color: #dbe4f0;
}

.invoice-editor-page .invoice-document-title-input:focus,
.invoice-editor-page .invoice-document-subheading-input:focus {
	border-bottom-color: #1557ff;
	outline: none;
}

.invoice-editor-page .invoice-document-title p {
	color: #94a3b8;
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}

.invoice-editor-page .invoice-bill-to {
	margin-top: 0;
	max-width: 680px;
}

.invoice-editor-page .invoice-bill-to > label {
	color: #52616c;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}

.invoice-editor-page .invoice-bill-to .form-select {
	border: 2px solid #b9d5fa;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	margin: 10px 0 22px;
	min-height: 52px;
}

/* Compact preview of the Bill To block as it will print. The rows used to be
   stretched apart by a 180px min-height on the grid. */

.invoice-editor-page .invoice-client-preview {
	align-content: start;
	background: #f7fafd;
	border: 1px solid #e6edf6;
	border-radius: 14px;
	color: #52616c;
	display: grid;
	font-size: 15px;
	gap: 1px;
	line-height: 1.5;
	min-height: 0;
	padding: 16px 18px;
}

.invoice-editor-page .invoice-client-preview strong {
	color: #17212b;
	font-size: 17px;
	letter-spacing: -.01em;
	margin-bottom: 4px;
}

.invoice-editor-page .invoice-client-preview span:empty {
	display: none;
}

.invoice-editor-page .invoice-client-preview-email {
	color: #1557ff;
	font-weight: 700;
	margin-top: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.invoice-editor-page .invoice-client-preview.is-empty {
	display: none;
}

.invoice-editor-page .invoice-client-preview[hidden] {
	display: none !important;
}

.invoice-editor-page .invoice-document-meta {
	background: #fff;
	border: 0;
	border-radius: 0;
	gap: 20px;
	padding: 0;
}

.invoice-editor-page .invoice-document-meta-row {
	gap: 20px;
	grid-template-columns: 150px minmax(0, 1fr);
}

.invoice-editor-page .invoice-document-meta-row label {
	color: #52616c;
	font-size: 15px;
	letter-spacing: 0;
	text-align: right;
	text-transform: none;
}

.invoice-editor-page .invoice-document-meta-row .form-control,
.invoice-editor-page .invoice-document-meta-row .form-select {
	background: #fff;
	border: 2px solid #b9d5fa;
	border-radius: 12px;
	font-size: 16px;
	min-height: 52px;
}

.invoice-editor-page .invoice-editor-payment-action {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.invoice-editor-page .invoice-editor-payment-action small {
	color: #667586;
	font-size: 12px;
}

.invoice-editor-page .invoice-editor-payment-status {
	align-items: center;
	background: #f3f7fb;
	border: 1px solid #dce6f0;
	border-radius: 12px;
	color: #52616c;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	gap: 8px;
	min-height: 52px;
	padding: 10px 14px;
}

.invoice-editor-page .invoice-editor-payment-status .fa-circle-check {
	color: #159447;
}

.invoice-editor-page .invoice-line-items-card {
	padding: 0;
}

.invoice-editor-page .invoice-line-items-card .client-editor-card-header {
	background: #fff;
	margin: 0;
	padding: 24px 46px 18px;
}

.invoice-editor-page .invoice-line-items-card .client-editor-card-header h3 {
	font-size: 22px;
}

.invoice-editor-page .invoice-line-items-card .client-editor-card-header p {
	display: none;
}

.invoice-editor-page .invoice-line-items-card #button-add-invoice-line-item {
	background: #eef3f7;
	border-color: transparent;
	color: #1557ff;
}

.invoice-editor-page .invoice-line-items-wrap {
	border: 0;
	border-radius: 0;
}

.invoice-editor-page .invoice-line-items-table th {
	background: transparent;
	border-bottom: 0;
	color: #17212b;
	font-size: 14px;
	padding-bottom: 20px;
	padding-top: 20px;
	text-transform: none;
}

.invoice-editor-page .invoice-line-items-table td {
	padding-bottom: 18px;
	padding-top: 18px;
}

.invoice-editor-page .invoice-line-item-row > td {
	padding: 26px 32px;
}

.invoice-editor-page .invoice-item-main-row .invoice-line-quantity,
.invoice-editor-page .invoice-item-main-row .invoice-line-unit-price {
	text-align: right;
}

.invoice-editor-page .invoice-item-amount {
	text-align: right;
}

.invoice-editor-page .invoice-item-adjustments {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

.invoice-editor-page .invoice-item-adjustment-row {
	align-items: center;
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(280px, 1fr) 120px 150px 150px 42px;
}

.invoice-editor-page .invoice-item-adjustment-row label {
	color: #52616c;
	font-size: 14px;
	font-weight: 800;
	margin: 0;
	text-align: right;
}

.invoice-editor-page .invoice-item-tax-control {
	display: block;
}

.invoice-editor-page .invoice-line-tax-display,
.invoice-editor-page .invoice-item-adjustment-placeholder {
	color: #52616c;
	font-size: 14px;
	font-weight: 800;
	margin: 0;
	text-align: right;
}

.invoice-editor-page .invoice-item-discount-row {
	margin-top: 2px;
}

.invoice-editor-page .invoice-item-discount-row .invoice-line-discount-amount {
	text-align: right;
}

.invoice-editor-page .invoice-line-items-table .form-control {
	border: 2px solid #b9d5fa;
	border-radius: 12px;
	font-size: 15px;
	min-height: 52px;
}

.invoice-editor-page .invoice-payment-summary-card {
	padding-bottom: 46px;
	padding-top: 38px;
}

.invoice-editor-page .invoice-payment-summary-card > .client-editor-card-header {
	display: none;
}

.invoice-editor-page .invoice-payment-layout {
	grid-template-areas: "notes totals";
	grid-template-columns: minmax(0, 1fr) minmax(400px, 500px);
}

.invoice-editor-page .invoice-notes-terms {
	grid-area: notes;
}

.invoice-editor-page .invoice-summary-box {
	box-shadow: none;
	grid-area: totals;
}

.invoice-editor-page .invoice-notes-terms textarea {
	background: #fbfcfd;
	border: 2px solid #d2dfea;
	min-height: 120px;
}

.invoice-editor-page .invoice-floating-save {
	display: none;
}

.invoice-editor-page .invoice-attachments-card {
	padding-bottom: 42px;
	padding-top: 36px;
}

.invoice-editor-page .invoice-attachment-dropzone {
	align-items: center;
	background: #fbfdff;
	border: 2px dashed #89a8ff;
	border-radius: 18px;
	color: #4f5f6b;
	cursor: pointer;
	display: flex;
	gap: 20px;
	justify-content: center;
	min-height: 190px;
	padding: 30px;
	text-align: left;
	transition: background .15s ease, border-color .15s ease;
}

.invoice-editor-page .invoice-attachment-dropzone:hover,
.invoice-editor-page .invoice-attachment-dropzone.is-dragover {
	background: #eef5ff;
	border-color: #1557ff;
}

.invoice-editor-page .invoice-attachment-dropzone-icon {
	align-items: center;
	background: #eaf1ff;
	border-radius: 50%;
	color: #1557ff;
	display: flex;
	flex: 0 0 62px;
	font-size: 25px;
	height: 62px;
	justify-content: center;
}

.invoice-editor-page .invoice-attachment-dropzone strong,
.invoice-editor-page .invoice-attachment-dropzone small {
	display: block;
}

.invoice-editor-page .invoice-attachment-dropzone strong {
	color: #26323b;
	font-size: 18px;
	margin-bottom: 6px;
}

.invoice-editor-page .invoice-attachment-dropzone small {
	color: #7b8993;
}

.invoice-editor-page .invoice-attachment-dropzone input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.invoice-editor-page .invoice-attachment-selection,
.invoice-editor-page .invoice-attachment-list {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

.invoice-editor-page .invoice-attachment-selection:empty {
	display: none;
}

.invoice-editor-page .invoice-attachment-selected-file,
.invoice-editor-page .invoice-attachment-item {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #dce5ed;
	border-radius: 12px;
	display: flex;
	gap: 12px;
	min-height: 58px;
	padding: 10px 14px;
}

.invoice-editor-page .invoice-attachment-selected-file > i,
.invoice-editor-page .invoice-attachment-file-icon {
	color: #1557ff;
	font-size: 19px;
}

.invoice-editor-page .invoice-attachment-selected-file strong,
.invoice-editor-page .invoice-attachment-file-info {
	flex: 1;
}

.invoice-editor-page .invoice-attachment-selected-file small,
.invoice-editor-page .invoice-attachment-file-info small {
	color: #7b8993;
	margin-left: auto;
}

.invoice-editor-page .invoice-attachment-file-info strong,
.invoice-editor-page .invoice-attachment-file-info small {
	display: block;
}

.invoice-editor-page .invoice-attachment-item > a,
.invoice-editor-page .invoice-attachment-remove {
	align-items: center;
	background: #fff;
	border: 1px solid #dce5ed;
	border-radius: 9px;
	color: #1557ff;
	display: flex;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.invoice-editor-page .invoice-attachment-remove {
	color: #dc2626;
}

/* ============================================================
   PAYMENT RECEIPTS
============================================================ */

.payment-actions {
	align-items: center;
	display: inline-flex;
	gap: 7px;
}

.payment-actions form {
	margin: 0;
}

.invoices-stat-card > div:last-child {
	min-width: 0;
}

.payments-page .payments-stat-value-wide,
.invoices-stat-card .directory-stat-value-wide {
	font-size: clamp(22px, 1.6vw, 30px);
	white-space: nowrap;
}

.invoices-stat-card strong small {
	color: #64748b;
	font-size: .48em;
	font-weight: 750;
	letter-spacing: 0;
}

.invoices-stat-card .directory-stat-label-nowrap {
	font-size: clamp(11px, .9vw, 13px);
	white-space: nowrap;
}

.payment-method-pill {
	align-items: center;
	background: #f1f5f9;
	border: 1px solid #dbe4f0;
	border-radius: 10px;
	color: #475569;
	display: inline-flex;
	flex-direction: row;
	font-size: 12px;
	font-weight: 850;
	justify-content: center;
	letter-spacing: .01em;
	line-height: 1.15;
	min-height: 28px;
	padding: 5px 10px;
	white-space: nowrap;
}

.payment-method-pill-etransfer {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #047857;
}

.payment-method-pill-cheque {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1d4ed8;
}

.payment-method-pill-cash {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #15803d;
}

.payment-method-pill-card {
	background: #faf5ff;
	border-color: #e9d5ff;
	color: #7e22ce;
}

.payment-method-pill-debit {
	background: #eef2ff;
	border-color: #c7d2fe;
	color: #4338ca;
}

.payment-method-pill-bank {
	background: #f0f9ff;
	border-color: #bae6fd;
	color: #0369a1;
}

.payment-method-pill-paypal {
	background: #fff7ed;
	border-color: #fed7aa;
	color: #c2410c;
}

.receipt-directory-intro {
	align-items: center;
	background: linear-gradient(135deg, #102a56 0%, #1557ff 100%);
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(21, 87, 255, .18);
	color: #ffffff;
	display: flex;
	gap: 20px;
	padding: 26px 28px;
}

.receipt-directory-intro-icon {
	align-items: center;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 18px;
	display: flex;
	flex: 0 0 auto;
	font-size: 26px;
	height: 62px;
	justify-content: center;
	width: 62px;
}

.receipt-directory-intro .dashboard-kicker {
	color: #bfdbfe;
}

.receipt-directory-intro h2 {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -.025em;
	margin: 3px 0 5px;
}

.receipt-directory-intro p {
	color: rgba(255, 255, 255, .76);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.receipt-stats {
	margin-top: 0;
}

.receipt-directory-table {
	min-width: 1180px !important;
}

.receipt-number-link {
	color: #1557ff;
	font-size: 15px;
	font-weight: 900;
}

.receipt-number-link:hover {
	color: #0b3b9f;
	text-decoration: underline;
}

.receipt-directory-table .invoice-status {
	justify-content: center;
	min-width: 78px;
	text-transform: none;
}

.receipt-directory-actions {
	white-space: nowrap;
}

.receipt-filter-empty td {
	padding: 44px 24px !important;
	text-align: center;
}

.receipt-filter-empty i,
.receipt-filter-empty strong,
.receipt-filter-empty span {
	display: block;
}

.receipt-filter-empty i {
	color: #94a3b8;
	font-size: 24px;
	margin-bottom: 12px;
}

.receipt-filter-empty strong {
	color: #172033;
	font-size: 16px;
}

.receipt-filter-empty span {
	color: #64748b;
	font-size: 14px;
	margin-top: 4px;
}

.receipt-page {
	display: grid;
	gap: 22px;
	margin: 0 auto;
	max-width: 1120px;
}

.receipt-test-banner {
	align-items: center;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 14px;
	color: #9a3412;
	display: flex;
	gap: 12px;
	padding: 15px 18px;
}

.receipt-test-banner i {
	flex: 0 0 auto;
	font-size: 20px;
}

.receipt-test-banner > div {
	display: grid;
	gap: 3px;
	line-height: 1.4;
	min-width: 0;
}

.receipt-test-banner strong,
.receipt-test-banner > div > span {
	display: block;
}

.payment-receipt-option .settings-toggle {
	align-items: center;
	display: flex;
	width: 100%;
}

.payment-receipt-option .settings-toggle strong {
	align-items: center;
	display: flex;
	line-height: 1.35;
	margin: 0;
	min-height: 30px;
}

.payment-receipt-option .settings-help-text {
	margin-top: 8px;
}

.payment-submit-button {
	margin-top: 24px;
}

.receipt-toolbar {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

.receipt-toolbar > div:last-child {
	align-items: center;
	display: flex;
	gap: 10px;
}

.receipt-toolbar form {
	margin: 0;
}

.receipt-toolbar span,
.receipt-paper span {
	color: #64748b;
	display: block;
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.receipt-toolbar h2 {
	color: #0f172a;
	font-size: 34px;
	font-weight: 900;
	margin: 4px 0 0;
}

.receipt-paper {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
	min-height: 760px;
	overflow: hidden;
}

.receipt-paper-header {
	align-items: center;
	background: #0b1224;
	border-top: 8px solid #2f6df6;
	color: #fff;
	display: flex;
	justify-content: space-between;
	min-height: 132px;
	padding: 34px 46px;
}

.receipt-paper-header span {
	color: #91a9cd;
}

.receipt-paper-header strong {
	color: #fff;
	display: block;
	font-size: 23px;
	letter-spacing: -.02em;
	margin-top: 5px;
}

.receipt-paper-identity {
	text-align: right;
}

.receipt-paper-identity strong {
	font-size: 28px;
}

.receipt-paper-identity em {
	background: #dcfce7;
	border-radius: 999px;
	color: #15803d;
	display: inline-block;
	font-size: 11px;
	font-style: normal;
	font-weight: 900;
	letter-spacing: .06em;
	margin-top: 11px;
	padding: 7px 11px;
	text-transform: uppercase;
}

.receipt-paper.is-voided .receipt-paper-identity em {
	background: #fee2e2;
	color: #b91c1c;
}

.receipt-paper-brand {
	align-items: center;
	display: flex;
	gap: 16px;
}

.receipt-paper-logo {
	align-items: center;
	background: #fff;
	border-radius: 12px;
	display: flex;
	height: 64px;
	justify-content: center;
	padding: 8px 12px;
	width: 150px;
}

.receipt-paper-logo img {
	display: block;
	height: auto;
	max-height: 48px;
	max-width: 126px;
	object-fit: contain;
	object-position: center;
}

.receipt-paper-brand-text {
	display: grid;
	gap: 1px;
}

.receipt-amount {
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 38px 46px 36px;
}

.receipt-amount > div:first-child {
	display: grid;
	gap: 7px;
}

.receipt-amount strong {
	color: #0f172a;
	font-size: 44px;
	font-weight: 950;
	letter-spacing: -.04em;
	line-height: 1.05;
}

.receipt-amount small {
	color: #64748b;
	font-size: 13px;
	font-weight: 700;
}

.receipt-status-mark {
	align-items: center;
	background: #ecfdf3;
	border: 1px solid #bbf7d0;
	border-radius: 16px;
	color: #15803d;
	display: flex;
	gap: 10px;
	padding: 12px 15px;
}

.receipt-status-mark i {
	align-items: center;
	display: flex;
	font-size: 15px;
	height: 25px;
	justify-content: center;
	width: 25px;
}

.receipt-status-mark span {
	color: inherit;
	font-size: 12px;
	letter-spacing: .07em;
}

.receipt-paper.is-voided .receipt-status-mark {
	background: #fff1f2;
	border-color: #fecdd3;
	color: #be123c;
}

.receipt-party-row {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr 1fr;
	padding: 30px 46px 34px;
}

.receipt-party-row article {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	min-width: 0;
	padding: 21px 22px;
}

.receipt-party-row strong,
.receipt-party-row small {
	display: block;
}

.receipt-party-row strong {
	color: #172033;
	font-size: 18px;
	margin-top: 9px;
}

.receipt-party-row small {
	color: #64748b;
	font-size: 13px;
	line-height: 1.45;
	margin-top: 6px;
}

.receipt-details-heading {
	align-items: end;
	display: flex;
	justify-content: space-between;
	margin: 0 46px 13px;
}

.receipt-details-heading small {
	color: #94a3b8;
	font-size: 12px;
}

.receipt-details {
	background: #dfe7f1;
	border: 1px solid #dfe7f1;
	border-radius: 16px;
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr 1fr;
	margin: 0 46px;
	overflow: hidden;
}

.receipt-details > div {
	background: #fff;
	display: grid;
	gap: 7px;
	min-width: 0;
	padding: 18px 20px;
}

.receipt-details strong {
	color: #172033;
	overflow-wrap: anywhere;
}

.receipt-notes {
	background: #eef5ff;
	border-left: 4px solid #2f6df6;
	border-radius: 0 12px 12px 0;
	margin: 28px 46px 0;
	padding: 18px 20px;
}

.receipt-notes p {
	color: #334155;
	line-height: 1.6;
	margin: 8px 0 0;
}

.receipt-paper footer {
	align-items: center;
	background: #eef2f7;
	color: #64748b;
	display: flex;
	font-size: 13px;
	gap: 14px;
	margin: 38px 0 0;
	padding: 22px 46px 25px;
}

.receipt-paper footer strong {
	color: #172033;
	display: block;
	font-size: 14px;
}

.receipt-paper footer p {
	line-height: 1.5;
	margin: 4px 0 0;
}

.receipt-footer-mark {
	align-items: center;
	background: #dcfce7;
	border-radius: 999px;
	color: #15803d;
	display: flex;
	flex: 0 0 auto;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.receipt-paper.is-voided .receipt-footer-mark {
	background: #fee2e2;
	color: #b91c1c;
}

@media (max-width: 720px) {
	.receipt-directory-intro {
		align-items: flex-start;
		padding: 22px;
	}

	.receipt-directory-intro-icon {
		display: none;
	}

	.receipt-toolbar,
	.receipt-toolbar > div:last-child,
	.receipt-paper-header,
	.receipt-amount {
		align-items: stretch;
		flex-direction: column;
	}

	.receipt-toolbar > div:last-child > *,
	.receipt-toolbar .invoice-detail-button {
		width: 100%;
	}

	.receipt-paper-header > div:last-child,
	.receipt-paper-identity {
		text-align: left;
	}

	.receipt-party-row,
	.receipt-details {
		grid-template-columns: 1fr;
	}

	.receipt-paper-header,
	.receipt-party-row,
	.receipt-amount,
	.receipt-paper footer {
		padding-left: 24px;
		padding-right: 24px;
	}

	.receipt-paper-header {
		gap: 28px;
	}

	.receipt-details-heading,
	.receipt-details,
	.receipt-notes {
		margin-left: 24px;
		margin-right: 24px;
	}

	.receipt-details-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}

	.receipt-paper-brand {
		align-items: flex-start;
		flex-direction: column;
	}

	.receipt-amount {
		gap: 24px;
	}

	.receipt-amount strong {
		font-size: 36px;
	}
}

.invoice-editor-page .invoice-col-description {
	width: 31%;
}

.invoice-editor-page .invoice-col-quantity {
	width: 10%;
}

.invoice-editor-page .invoice-col-unit-price {
	width: 14%;
}

.invoice-editor-page .invoice-col-tax,
.invoice-editor-page .invoice-col-discount,
.invoice-editor-page .invoice-col-total {
	width: 13%;
}

.invoice-editor-page .invoice-col-actions {
	width: 6%;
}

/* ============================================================
   PUBLIC INVOICE PAGE
============================================================ */

.invoice-public-page {
	margin: 0 auto;
	max-width: 1100px;
	padding: 16px 18px 48px;
}

@media print {
	body[data-page="invoice"] .site-footer {
		display: none;
	}

	body[data-page="invoice"] .invoice-public-page {
		max-width: none;
		padding: 0;
	}

	body[data-page="invoice"] .invoice-public-document {
		border: 0;
		box-shadow: none;
		min-height: 0;
	}
}

.invoice-public-document {
	margin: 0;
	max-width: none;
	min-height: 1424px;
	width: 100%;
}

.invoice-public-document .invoice-detail-from h1 {
	color: var(--detail-ink);
	font-size: 44px;
	font-weight: 400;
	letter-spacing: .02em;
	margin: 0 0 14px;
}

.invoice-public-document .invoice-detail-items td {
	font-variant-numeric: tabular-nums;
}

.invoice-public-paper {
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .1);
	overflow: hidden;
}

.invoice-public-header {
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 58%, #eef5ff 100%);
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
	padding: 44px 30px;
}

.invoice-public-title {
	color: var(--invoice-accent, #0f172a);
	font-size: clamp(46px, 8vw, 78px);
	letter-spacing: -.07em;
	line-height: .9;
	margin: 0 0 18px;
}

.invoice-public-subheading {
	color: #64748b;
	font-size: 16px;
	font-weight: 700;
	margin: -10px 0 18px;
}

.invoice-public-label {
	color: #64748b;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.invoice-public-value {
	color: #0f172a;
	font-size: 18px;
	font-weight: 900;
	margin-top: 6px;
}

.invoice-public-meta {
	background: rgba(255, 255, 255, .85);
	border: 1px solid #dbe4f0;
	border-radius: 18px;
	display: grid;
	gap: 14px;
	padding: 20px;
}

.invoice-public-meta-row {
	align-items: baseline;
	display: grid;
	gap: 14px;
	grid-template-columns: 120px minmax(0, 1fr);
}

.invoice-public-section {
	border-top: 1px solid #e8eef7;
	padding: 34px 30px;
}

.invoice-public-table-wrap {
	border: 1px solid #dbe4f0;
	border-radius: 16px;
	overflow-x: auto;
}

.invoice-public-table {
	border-collapse: collapse;
	min-width: 860px;
	width: 100%;
}

.invoice-public-table th {
	background: var(--invoice-accent, #0f172a);
	color: #ffffff;
	font-size: 12px;
	letter-spacing: .04em;
	padding: 14px 12px;
	text-align: left;
	text-transform: uppercase;
}

.invoice-public-table td {
	border-bottom: 1px solid #e8eef7;
	padding: 14px 12px;
	vertical-align: top;
}

.invoice-public-table tr:last-child td {
	border-bottom: 0;
}

.invoice-public-right {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.invoice-public-bottom {
	display: grid;
	gap: 34px;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
}

.invoice-public-summary {
	border: 1px solid #dbe4f0;
	border-radius: 18px;
	overflow: hidden;
}

.invoice-public-summary-row {
	border-bottom: 1px solid #e8eef7;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 15px 18px;
}

.invoice-public-summary-row:last-child {
	border-bottom: 0;
}

.invoice-public-summary-row strong {
	font-variant-numeric: tabular-nums;
}

.invoice-public-summary-balance {
	background: var(--invoice-accent, #0f172a);
	color: #ffffff;
}

.invoice-public-preline {
	white-space: pre-line;
}

.invoice-public-notes-text {
	margin: 8px 0 24px;
}

.invoice-public-terms-text {
	margin-top: 8px;
}

.invoice-public-footer {
	border-top: 1px solid #e8eef7;
	color: #64748b;
	font-size: 13px;
	line-height: 1.65;
	padding: 24px 30px 28px;
	text-align: center;
}

/* ============================================================
   RESPONSIVE INVOICE EDITOR / PUBLIC INVOICE
============================================================ */

@media (max-width: 900px) {
	.invoice-editor-page .invoice-editor-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.invoice-editor-page .invoice-editor-toolbar-actions {
		width: 100%;
	}

	.invoice-editor-page .invoice-editor-toolbar-actions > * {
		flex: 1;
	}

	.invoice-editor-page .invoice-editor-card {
		padding: 28px 22px;
	}

	.invoice-editor-page .invoice-document-top,
	.invoice-editor-page .invoice-payment-layout {
		gap: 28px;
		grid-template-areas: none;
		grid-template-columns: 1fr;
	}

	.invoice-editor-page .invoice-notes-terms,
	.invoice-editor-page .invoice-summary-box {
		grid-area: auto;
	}

	.invoice-editor-page .invoice-document-meta-row {
		gap: 6px;
		grid-template-columns: 1fr;
	}

	.invoice-editor-page .invoice-document-meta-row label {
		text-align: left;
	}

	.invoice-editor-page .invoice-line-items-table thead {
		display: none;
	}

	.invoice-editor-page .invoice-item-main-row {
		gap: 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.invoice-editor-page .invoice-line-description-wrap {
		grid-column: 1 / -1;
	}

	.invoice-editor-page .invoice-item-amount {
		align-items: center;
		display: flex;
		justify-content: flex-end;
	}

	.invoice-editor-page .invoice-item-adjustment-row {
		gap: 10px;
		grid-template-columns: 72px minmax(0, 1fr) 72px;
	}

	.invoice-editor-page .invoice-item-adjustment-row > span:first-child,
	.invoice-editor-page .invoice-item-adjustment-row > span:last-child {
		display: none;
	}

	.invoice-editor-page .invoice-item-adjustment-row label {
		text-align: left;
	}

	.invoice-editor-page .invoice-bill-to {
		margin-top: 0;
	}

	.client-floating-save-button,
	.invoice-editor-page .invoice-floating-save {
		bottom: 18px;
		min-height: 54px;
		right: 18px;
	}

	.invoice-editor-page .invoice-floating-save {
		min-width: 156px;
		padding: 14px 18px;
	}
}

@media (max-width: 767px) {
	.client-floating-save-button {
		bottom: 18px;
		justify-content: center;
		left: 18px;
		right: 18px;
		width: auto;
	}
}

@media (max-width: 760px) {
	.invoice-public-page {
		padding-left: 10px;
		padding-right: 10px;
	}

	.invoice-public-document {
		min-height: 0;
	}

	.invoice-public-header,
	.invoice-public-bottom {
		grid-template-columns: 1fr;
	}

	.invoice-public-header,
	.invoice-public-section {
		padding: 28px 20px;
	}
}

/* ============================================================
   SETTINGS PAGE
============================================================ */

.settings-page {
	margin: 0 auto;
	max-width: 1480px;
}

.settings-layout {
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) 360px;
}

.settings-main {
	display: grid;
	gap: 24px;
}

.settings-card,
.settings-side-card {
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.settings-card {
	overflow: hidden;
}

.settings-card-header {
	align-items: start;
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, #eef5ff 100%);
	border-bottom: 1px solid #e8eef7;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 28px 32px;
}

.settings-card-header h2,
.settings-side-card h3 {
	color: #0f172a;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin: 0;
}

.settings-card-header h2 {
	font-size: 24px;
}

.settings-side-card h3 {
	font-size: 18px;
	margin-bottom: 14px;
}

.settings-card-header p,
.settings-side-card p,
.settings-muted {
	color: #64748b;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
	margin: 8px 0 0;
}

.settings-fields-grid {
	display: grid;
	gap: 22px 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 30px 32px 34px;
}

.settings-card-actions {
	align-items: center;
	border-top: 1px solid #e8eef7;
	display: flex;
	justify-content: flex-end;
	padding: 20px 32px 24px;
}

.settings-field {
	display: grid;
	gap: 8px;
}

.settings-field-textarea,
.settings-field-tax_rates,
.settings-field-checkbox,
.settings-field-image_upload,
.settings-field-address-search {
	grid-column: 1 / -1;
}

.settings-field .form-control,
.settings-field .form-select {
	background-color: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	color: #0f172a;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.2;
	transition: all .16s ease;
	width: 100%;
}

.settings-field > .form-control,
.settings-field > .form-select {
	height: 52px;
	min-height: 52px;
	padding: 11px 15px;
}

.settings-field .client-editor-input-icon .form-control {
	height: 52px;
	min-height: 52px;
	padding: 11px 15px 11px 46px;
}

.settings-field .form-control:focus,
.settings-field .form-select:focus {
	background-color: #ffffff;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.settings-field label:not(.settings-toggle) {
	color: #334155;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: -.01em;
}

.settings-textarea {
	min-height: 118px;
	resize: vertical;
}

.settings-color-field {
	align-items: center;
	display: flex;
	gap: 12px;
}

.settings-color-field .settings-color-swatch {
	appearance: none;
	background: none;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	cursor: pointer;
	flex: 0 0 auto;
	height: 52px;
	min-height: 52px;
	padding: 4px;
	width: 64px;
}

.settings-color-field .settings-color-swatch::-webkit-color-swatch-wrapper {
	padding: 0;
}

.settings-color-field .settings-color-swatch::-webkit-color-swatch {
	border: none;
	border-radius: 10px;
}

.settings-color-field .settings-color-hex {
	flex: 1 1 auto;
	height: 52px;
	min-height: 52px;
	padding: 11px 15px;
	text-transform: uppercase;
}

.settings-reminders-alert {
	margin: 24px 32px 0;
}

.settings-reminders-banner {
	align-items: center;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 16px;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin: 24px 32px 0;
	padding: 20px 24px;
}

.settings-reminders-banner strong {
	color: #92400e;
	display: block;
	font-size: 15px;
	font-weight: 900;
	margin-bottom: 4px;
}

.settings-reminders-banner p {
	color: #92400e;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	max-width: 480px;
}

.settings-reminders-banner-button {
	align-items: center;
	background: #92400e;
	border: none;
	border-radius: 12px;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 800;
	gap: 8px;
	padding: 12px 18px;
	transition: all .16s ease;
	white-space: nowrap;
}

.settings-reminders-banner-button:hover {
	background: #78350f;
}

.settings-help-text {
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.settings-tax-rates {
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 16px;
	overflow: hidden;
}

.settings-tax-rates.is-invalid {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.settings-tax-rate-header,
.settings-tax-rate-row {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) 44px;
}

.settings-tax-rate-header {
	background: #f1f5f9;
	color: #475569;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .04em;
	padding: 12px 16px;
	text-transform: uppercase;
}

.settings-tax-rate-row {
	border-top: 1px solid #e8eef7;
	padding: 14px 16px;
}

.settings-tax-rate-list .settings-tax-rate-row:first-child {
	border-top: 0;
}

.settings-tax-rate-row .form-control {
	background: #f8fafc;
	min-height: 48px;
}

.settings-tax-rate-percent {
	position: relative;
}

.settings-tax-rate-percent .form-control {
	padding-right: 42px;
}

.settings-tax-rate-percent > span {
	color: #64748b;
	font-size: 15px;
	font-weight: 900;
	pointer-events: none;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.settings-tax-rate-remove {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 12px;
	color: #64748b;
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	width: 44px;
}

.settings-tax-rate-remove:hover {
	background: #fff1f2;
	border-color: #fecdd3;
	color: #dc2626;
}

.settings-tax-rate-add {
	align-items: center;
	background: #f8fafc;
	border: 0;
	border-top: 1px solid #e8eef7;
	color: var(--app-primary);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 900;
	gap: 9px;
	justify-content: flex-start;
	padding: 15px 18px;
	transition: background .15s ease;
	width: 100%;
}

.settings-tax-rate-add:hover {
	background: #eef5ff;
}

.settings-logo-preview {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 12px;
	display: flex;
	gap: 14px;
	margin-bottom: 12px;
	padding: 12px 16px;
}

.settings-logo-preview img {
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 8px;
	height: 52px;
	object-fit: contain;
	padding: 4px;
	width: 52px;
}

.settings-logo-preview span {
	color: #64748b;
	font-size: 13px;
	font-weight: 650;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-logo-remove-btn {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 50%;
	color: #64748b;
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	font-size: 13px;
	height: 28px;
	justify-content: center;
	margin-left: auto;
	padding: 0;
	transition: all .16s ease;
	width: 28px;
}

.settings-logo-remove-btn:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #dc2626;
}

.settings-toggle {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 18px;
	cursor: pointer;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	min-height: 64px;
	padding: 14px 18px;
	transition: all .16s ease;
}

.settings-toggle:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.settings-toggle input {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.settings-toggle span {
	background: #cbd5e1;
	border-radius: 999px;
	flex: 0 0 52px;
	height: 30px;
	position: relative;
	transition: all .16s ease;
}

.settings-toggle span::before {
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 3px 8px rgba(15, 23, 42, .2);
	content: '';
	height: 24px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: all .16s ease;
	width: 24px;
}

.settings-toggle input:checked + span {
	background: var(--app-primary);
}

.settings-toggle input:checked + span::before {
	transform: translateX(22px);
}

.settings-toggle strong {
	color: #0f172a;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.3;
	order: -1;
}

.settings-sidebar {
	display: grid;
	gap: 20px;
	grid-auto-rows: max-content;
	position: sticky;
	top: 24px;
}

.settings-side-card {
	padding: 24px;
}

.settings-business-preview {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 16px;
	display: grid;
	gap: 5px;
	padding: 18px;
}

.settings-business-preview span {
	color: #334155;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.settings-warning-card {
	background: #fff7ed;
	border-color: #fed7aa;
}

.settings-warning-card h3,
.settings-warning-card strong {
	color: #9a3412;
}

.settings-warning-card p {
	color: #9a3412;
}

.settings-save-button {
	width: 100%;
}

.settings-save-note {
	color: #94a3b8;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	margin: -6px 0 0;
	text-align: center;
}

@media (max-width: 1180px) {
	.settings-layout {
		grid-template-columns: 1fr;
	}

	.settings-sidebar {
		position: static;
	}
}

@media (max-width: 760px) {
	.settings-card-header,
	.settings-fields-grid,
	.settings-card-actions {
		padding-left: 22px;
		padding-right: 22px;
	}

	.settings-card-actions .dashboard-primary-button {
		width: 100%;
	}

	.settings-fields-grid {
		grid-template-columns: 1fr;
	}

	.settings-tax-rate-header,
	.settings-tax-rate-row {
		gap: 8px;
		grid-template-columns: minmax(0, 1fr) 106px 42px;
		padding-left: 12px;
		padding-right: 12px;
	}

	.settings-tax-rate-remove {
		height: 42px;
		width: 42px;
	}
}

.invoice-public-business {
	color: #334155;
	display: grid;
	font-size: 14px;
	font-weight: 700;
	gap: 4px;
	line-height: 1.35;
	margin: 8px 0 26px;
}


/*
|--------------------------------------------------------------------------
| Dashboard: Quick Actions, Panels, Charts
|--------------------------------------------------------------------------
*/
.dashboard-quick-actions {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 24px;
}

.dashboard-quick-action {
	align-items: center;
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
	color: var(--app-text);
	display: flex;
	font-size: 15px;
	font-weight: 700;
	gap: 14px;
	padding: 16px 20px;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dashboard-quick-action:hover {
	border-color: #c3d4ee;
	box-shadow: 0 16px 34px rgba(15, 23, 42, .1);
	transform: translateY(-2px);
}

.dashboard-quick-icon {
	align-items: center;
	border-radius: 12px;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 16px;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.dashboard-quick-invoice .dashboard-quick-icon {
	background: rgba(37, 99, 235, .12);
	color: #2563eb;
}

.dashboard-quick-payment .dashboard-quick-icon {
	background: rgba(16, 185, 129, .14);
	color: #059669;
}

.dashboard-quick-client .dashboard-quick-icon {
	background: rgba(124, 58, 237, .12);
	color: #7c3aed;
}

.dashboard-stat-red::before,
.dashboard-stat-red::after {
	background: radial-gradient(circle, rgba(239, 68, 68, .18), transparent 65%);
}

.dashboard-stat-red .dashboard-stat-icon {
	background: rgba(239, 68, 68, .12);
	color: #dc2626;
}

.dashboard-panel-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 24px;
}

.dashboard-panel-grid-wide {
	grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
}

.dashboard-panel {
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 20px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 26px 28px;
}

.dashboard-panel-header {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 22px;
}

.dashboard-panel-header h2 {
	color: var(--app-dark);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0;
}

.dashboard-panel-header p {
	color: var(--app-muted);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	margin: 6px 0 0;
}

.dashboard-chart-wrap {
	flex: 1;
	min-height: 260px;
	position: relative;
}

.dashboard-chart-wrap-short {
	margin-bottom: 22px;
	min-height: 200px;
}

.dashboard-panel-link {
	align-items: center;
	color: var(--app-primary);
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
	margin-top: 18px;
}

.dashboard-panel-link:hover {
	color: var(--app-primary-dark);
}

.dashboard-panel-link i {
	font-size: 12px;
	transition: transform .16s ease;
}

.dashboard-panel-link:hover i {
	transform: translateX(3px);
}


/* Receivable aging */
.dashboard-aging-table,
.dashboard-yoy-table {
	border-collapse: collapse;
	width: 100%;
}

.dashboard-aging-table th,
.dashboard-aging-table td {
	border-bottom: 1px solid #eef2f8;
	font-size: 14.5px;
	padding: 12px 0;
	text-align: left;
}

.dashboard-aging-table td {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

.dashboard-aging-table th {
	color: var(--app-muted);
	font-weight: 600;
}

.dashboard-aging-current th {
	color: var(--app-primary);
	font-weight: 700;
}

.dashboard-aging-overdue th,
.dashboard-aging-overdue td {
	color: #b91c1c;
}

.dashboard-aging-empty th,
.dashboard-aging-empty td {
	color: #94a3b8;
	font-weight: 500;
}

.dashboard-aging-table tfoot th,
.dashboard-aging-table tfoot td {
	border-bottom: 0;
	border-top: 2px solid #e1e8f2;
	color: var(--app-dark);
	font-size: 15px;
	font-weight: 800;
	padding-top: 14px;
}


/* Year over year */
.dashboard-yoy-table th,
.dashboard-yoy-table td {
	border-bottom: 1px solid #eef2f8;
	font-size: 14.5px;
	padding: 11px 0;
	text-align: right;
}

.dashboard-yoy-table thead th {
	border-bottom: 2px solid #e1e8f2;
	color: var(--app-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.dashboard-yoy-table tbody th {
	color: var(--app-muted);
	font-weight: 600;
	text-align: left;
}

.dashboard-yoy-table td {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.dashboard-yoy-total th,
.dashboard-yoy-total td {
	border-bottom: 0;
	color: var(--app-dark);
}


/* Revenue donut */
.dashboard-donut-layout {
	align-items: center;
	display: grid;
	gap: 24px;
	grid-template-columns: 190px minmax(0, 1fr);
	min-width: 0;
}

.dashboard-donut-wrap {
	height: 190px;
	position: relative;
	width: 190px;
}

.dashboard-legend {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.dashboard-legend li {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: 10px minmax(0, 1fr) auto;
	min-width: 0;
}

.dashboard-legend-dot {
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.dashboard-legend-label {
	color: var(--app-text);
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-legend-value {
	color: var(--app-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}


/* Empty states */
.dashboard-empty {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	padding: 30px 12px;
	text-align: center;
}

.dashboard-empty-icon {
	align-items: center;
	background: #f1f5f9;
	border-radius: 50%;
	color: #94a3b8;
	display: inline-flex;
	font-size: 22px;
	height: 60px;
	justify-content: center;
	margin-bottom: 16px;
	width: 60px;
}

.dashboard-empty-icon-good {
	background: rgba(16, 185, 129, .12);
	color: #059669;
}

.dashboard-empty strong {
	color: var(--app-dark);
	font-size: 16px;
	font-weight: 800;
}

.dashboard-empty p {
	color: var(--app-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 8px 0 0;
	max-width: 320px;
}

@media (max-width: 1200px) {
	.dashboard-panel-grid,
	.dashboard-panel-grid-wide {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 980px) {
	.dashboard-quick-actions {
		grid-template-columns: minmax(0, 1fr);
	}

	.dashboard-panel {
		padding: 22px 20px;
	}

	.dashboard-donut-layout {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.dashboard-legend {
		width: 100%;
	}
}


/*
|--------------------------------------------------------------------------
| Mobile Navigation Drawer
|--------------------------------------------------------------------------
| Hidden entirely on desktop, where the sidebar is always visible. Below the
| 980px breakpoint the sidebar becomes a fixed off-canvas drawer driven by
| .is-open, with the bar and backdrop switched on in the media query above.
|
| Padding uses env(safe-area-inset-*) so the bar clears the notch and the
| drawer clears the home indicator once this is wrapped with Capacitor.
|
*/
.app-mobile-bar {
	align-items: center;
	background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
	color: #ffffff;
	display: none;
	gap: 14px;
	padding: calc(12px + env(safe-area-inset-top)) 16px 12px calc(16px + env(safe-area-inset-left));
	position: sticky;
	top: 0;
	z-index: 60;
}

.app-mobile-toggle {
	align-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 42px;
	justify-content: center;
	padding: 0;
	transition: background .16s ease;
	width: 42px;
}

.app-mobile-toggle:hover,
.app-mobile-toggle:focus-visible {
	background: rgba(255, 255, 255, .16);
}

.app-mobile-toggle-bars {
	display: block;
	height: 15px;
	position: relative;
	width: 19px;
}

.app-mobile-toggle-bars span {
	background: #ffffff;
	border-radius: 2px;
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	transition: transform .24s ease, opacity .18s ease;
	width: 100%;
}

.app-mobile-toggle-bars span:nth-child(1) {
	top: 0;
}

.app-mobile-toggle-bars span:nth-child(2) {
	top: 6.5px;
}

.app-mobile-toggle-bars span:nth-child(3) {
	top: 13px;
}

/* Morph the bars into an X while the drawer is open */
.app-mobile-toggle[aria-expanded="true"] .app-mobile-toggle-bars span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.app-mobile-toggle[aria-expanded="true"] .app-mobile-toggle-bars span:nth-child(2) {
	opacity: 0;
}

.app-mobile-toggle[aria-expanded="true"] .app-mobile-toggle-bars span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

.app-mobile-brand {
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 0;
}

.app-mobile-brand-icon {
	align-items: center;
	background: rgba(59, 130, 246, .18);
	border: 1px solid rgba(147, 197, 253, .18);
	border-radius: 10px;
	color: #93c5fd;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 14px;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.app-mobile-brand strong {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-sidebar-close {
	align-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	color: #ffffff;
	cursor: pointer;
	display: none;
	flex: 0 0 auto;
	font-size: 15px;
	height: 34px;
	justify-content: center;
	margin-left: auto;
	padding: 0;
	width: 34px;
}

.app-sidebar-close:hover,
.app-sidebar-close:focus-visible {
	background: rgba(255, 255, 255, .16);
}

.app-nav-backdrop {
	background: rgba(15, 23, 42, .55);
	display: none;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity .26s ease;
	z-index: 70;
}

.app-nav-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Locks the page behind the drawer without losing scroll position */
body.app-nav-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.app-sidebar,
	.app-nav-backdrop,
	.app-mobile-toggle-bars span {
		transition: none;
	}
}

/*
| Below the breakpoint the sidebar leaves the grid and becomes the drawer.
| These rules must stay after the base rules above, since media queries add
| no specificity and a later plain rule would otherwise win.
*/
@media (max-width: 980px) {
	.app-mobile-bar {
		display: flex;
	}

	.app-sidebar-close {
		display: inline-flex;
	}

	.app-nav-backdrop {
		display: block;
	}

	.app-sidebar {
		bottom: 0;
		height: 100vh;
		height: 100dvh;
		left: 0;
		padding: calc(20px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
		position: fixed;
		top: 0;
		transform: translateX(-100%);
		transition: transform .26s ease;
		width: min(84vw, 300px);
		will-change: transform;
		z-index: 80;
	}

	.app-sidebar.is-open {
		box-shadow: 0 0 60px rgba(15, 23, 42, .45);
		transform: translateX(0);
	}
}


/*
|--------------------------------------------------------------------------
| Grid Item Shrink Fix
|--------------------------------------------------------------------------
| .invoices-page and .invoice-detail-page are grids, and a grid item's
| automatic minimum size is its min-content width. The invoice and payment
| tables carry a min-width so their columns stay readable, so those items
| refused to shrink below ~1060-1180px and pushed the whole page sideways -
| roughly 700px of horizontal scroll on a phone.
|
| min-width: 0 lets the item shrink so .invoices-table-wrap can do its job
| and scroll the table inside itself instead.
|
| Not scoped to a breakpoint on purpose: a 1280px laptop leaves about 930px
| of content width once the sidebar and padding are removed, which is also
| narrower than the tables.
|
*/
.app-main {
	min-width: 0;
}

.invoices-page > *,
.invoice-detail-page > *,
.clients-page > *,
.reports-page > * {
	min-width: 0;
}

/* ============================================================
   REPORTS
============================================================ */

.reports-page {
	display: grid;
	gap: 26px;
}

.reports-intro {
	align-items: center;
	background: linear-gradient(135deg, #0f2f6e 0%, #1557ff 58%, #2f73ff 100%);
	border-radius: 24px;
	box-shadow: 0 20px 48px rgba(21, 87, 255, .18);
	color: #ffffff;
	display: flex;
	gap: 22px;
	padding: 30px 32px;
}

.reports-intro-icon {
	align-items: center;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 20px;
	display: flex;
	flex: 0 0 auto;
	font-size: 29px;
	height: 70px;
	justify-content: center;
	width: 70px;
}

.reports-intro .dashboard-kicker {
	color: #bfdbfe;
}

.reports-intro h2 {
	font-size: 27px;
	font-weight: 900;
	letter-spacing: -.035em;
	margin: 4px 0 7px;
}

.reports-intro p {
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
	margin: 0;
	max-width: 820px;
}

.reports-group {
	display: grid;
	gap: 15px;
}

.reports-group-header h2 {
	color: #0f172a;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.025em;
	margin: 0 0 4px;
}

.reports-group-header p {
	color: #64748b;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.reports-card-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-directory-card {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dfe7f1;
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
	display: flex;
	gap: 16px;
	min-height: 116px;
	padding: 20px;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.report-directory-card:hover {
	border-color: #bdd0eb;
	box-shadow: 0 18px 38px rgba(15, 23, 42, .09);
	transform: translateY(-2px);
}

.report-directory-card-icon,
.report-detail-icon {
	align-items: center;
	border-radius: 16px;
	display: flex;
	flex: 0 0 auto;
	font-size: 20px;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.report-card-blue .report-directory-card-icon,
.report-detail-icon.report-card-blue {
	background: #eaf2ff;
	color: #1557ff;
}

.report-card-green .report-directory-card-icon,
.report-detail-icon.report-card-green {
	background: #eafaf0;
	color: #16a34a;
}

.report-card-orange .report-directory-card-icon,
.report-detail-icon.report-card-orange {
	background: #fff3e8;
	color: #ea580c;
}

.report-card-violet .report-directory-card-icon,
.report-detail-icon.report-card-violet {
	background: #f3e8ff;
	color: #7c3aed;
}

.report-card-red .report-directory-card-icon,
.report-detail-icon.report-card-red {
	background: #fef2f2;
	color: #dc2626;
}

.report-card-slate .report-directory-card-icon,
.report-detail-icon.report-card-slate {
	background: #eef2f7;
	color: #475569;
}

.report-directory-card-copy {
	display: grid;
	flex: 1;
	gap: 6px;
	min-width: 0;
}

.report-directory-card-copy strong {
	color: #172033;
	font-size: 16px;
	font-weight: 900;
}

.report-directory-card-copy small {
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.report-directory-arrow {
	color: #94a3b8;
	font-size: 14px;
	transition: color .16s ease, transform .16s ease;
}

.report-directory-card:hover .report-directory-arrow {
	color: #1557ff;
	transform: translateX(3px);
}

.report-detail-heading {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

.report-detail-heading > div:first-child {
	align-items: center;
	display: flex;
	gap: 16px;
}

.report-detail-heading h2 {
	color: #0f172a;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -.03em;
	margin: 2px 0 3px;
}

.report-detail-heading p {
	color: #64748b;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.report-period-label {
	background: #eef5ff;
	border: 1px solid #cfe0fb;
	border-radius: 999px;
	color: #1557ff;
	font-size: 13px;
	font-weight: 850;
	padding: 9px 14px;
	white-space: nowrap;
}

.report-period-form {
	align-items: end;
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
	display: flex;
	gap: 14px;
	padding: 18px 20px;
}

.report-period-field {
	display: grid;
	gap: 7px;
	min-width: 190px;
}

.report-period-field label {
	color: #475569;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .02em;
}

.report-period-field .form-select,
.report-period-field .form-control {
	border-color: #cbd8e8;
	border-radius: 12px;
	font-size: 14px;
	min-height: 48px;
}

.report-custom-dates {
	align-items: end;
	display: flex;
	gap: 12px;
}

.report-custom-dates[hidden] {
	display: none;
}

.report-period-form .dashboard-primary-button {
	margin-left: auto;
	min-height: 48px;
}

.report-kpi-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-kpi-card {
	align-items: center;
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
	display: flex;
	gap: 14px;
	min-width: 0;
	padding: 19px;
}

.report-kpi-icon {
	align-items: center;
	border-radius: 14px;
	display: flex;
	flex: 0 0 auto;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.report-kpi-blue { background: #eaf2ff; color: #1557ff; }
.report-kpi-green { background: #eafaf0; color: #16a34a; }
.report-kpi-orange { background: #fff3e8; color: #ea580c; }
.report-kpi-violet { background: #f3e8ff; color: #7c3aed; }
.report-kpi-red { background: #fef2f2; color: #dc2626; }

.report-kpi-card div {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.report-kpi-card small {
	color: #64748b;
	font-size: 12px;
	font-weight: 800;
}

.report-kpi-card strong {
	color: #0f172a;
	font-size: 21px;
	font-weight: 900;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.report-table-card {
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 22px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, .055);
	overflow: hidden;
}

.report-table-header {
	align-items: center;
	border-bottom: 1px solid #e6ecf4;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 22px 24px;
}

.report-table-header h3 {
	color: #0f172a;
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -.02em;
	margin: 0 0 4px;
}

.report-table-header p,
.report-table-header > span {
	color: #64748b;
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}

.report-table-wrap {
	overflow-x: auto;
}

.report-table {
	border-collapse: collapse;
	min-width: 760px;
	width: 100%;
}

.report-table th,
.report-table td {
	border-bottom: 1px solid #edf1f6;
	font-size: 14px;
	padding: 15px 24px;
	text-align: left;
}

.report-table th {
	background: #f8fafc;
	color: #64748b;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .055em;
	text-transform: uppercase;
}

.report-table td {
	color: #273440;
	font-weight: 650;
}

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

.report-table tbody tr:hover td {
	background: #fbfdff;
}

.report-table .report-cell-number {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	text-align: right;
}

.report-note {
	align-items: flex-start;
	background: #f8fafc;
	border-top: 1px solid #e6ecf4;
	color: #64748b;
	display: flex;
	font-size: 12.5px;
	font-weight: 650;
	gap: 9px;
	line-height: 1.5;
	padding: 16px 24px;
}

.report-note i {
	color: #1557ff;
	margin-top: 2px;
}

.report-empty {
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 52px 24px;
	text-align: center;
}

.report-empty > span {
	align-items: center;
	background: #eef2f7;
	border-radius: 50%;
	color: #94a3b8;
	display: flex;
	font-size: 22px;
	height: 58px;
	justify-content: center;
	margin-bottom: 14px;
	width: 58px;
}

.report-empty strong {
	color: #172033;
	font-size: 17px;
	font-weight: 900;
}

.report-empty p {
	color: #64748b;
	font-size: 14px;
	font-weight: 600;
	margin: 6px 0 0;
}

@media (max-width: 1180px) {
	.report-kpi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.report-period-form,
	.report-custom-dates {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.report-period-form .dashboard-primary-button {
		margin-left: 0;
	}
}

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

	.reports-intro {
		align-items: flex-start;
		padding: 24px;
	}

	.reports-intro-icon {
		display: none;
	}

	.reports-intro h2 {
		font-size: 23px;
	}

	.report-detail-heading,
	.report-detail-heading > div:first-child,
	.report-period-form,
	.report-custom-dates {
		align-items: stretch;
		flex-direction: column;
	}

	.report-period-label {
		align-self: flex-start;
	}

	.report-period-field,
	.report-period-form .dashboard-primary-button {
		width: 100%;
	}

	.report-table-header {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 520px) {
	.report-kpi-grid {
		grid-template-columns: 1fr;
	}

	.report-directory-card {
		min-height: 0;
	}
}


/* Voided invoices are preserved records, not active receivables. */
.invoice-public-void-banner {
	align-items: center;
	background: #f1f5f9;
	border-bottom: 1px solid #cbd5e1;
	color: #475569;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 8px;
	padding: 12px 24px;
}

.invoice-public-void-banner strong {
	letter-spacing: .08em;
}

.invoice-public-void-banner span {
	font-weight: 600;
}

/* Invoice directory pagination is generated after filters/tabs are applied. */
.invoices-pagination[hidden] {
	display: none !important;
}

.invoices-pagination .clients-pagination-link {
	cursor: pointer;
	font-family: inherit;
}

.invoices-pagination .clients-pagination-link.is-active {
	background: #2563eb;
	border-color: #2563eb;
	color: #ffffff;
	cursor: default;
}

/* Administrator user management */
.users-stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.user-stat-purple {
	background: #f3edff;
	color: #7c3aed;
}

.users-table {
	min-width: 980px;
}

.users-table th:nth-child(1),
.users-table td:nth-child(1) {
	width: 27%;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
	width: 14%;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
	width: 13%;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
	width: 16%;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
	width: 18%;
}

.users-table th:nth-child(6),
.users-table td:nth-child(6) {
	width: 12%;
}

.user-row-actions {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: flex-end;
}

.user-impersonate-form {
	display: inline-flex;
	margin: 0;
}

.user-impersonate-button {
	background: #f5f3ff;
	border-color: #ddd6fe;
	color: #6d28d9;
}

.user-impersonate-button:hover {
	background: #ede9fe;
	color: #5b21b6;
}

.user-delete-form,
.user-restore-form,
.user-purge-form {
	display: inline-flex;
	margin: 0;
}

.user-delete-button {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
}

.user-delete-button:hover {
	background: #fee2e2;
	color: #991b1b;
}

/* Deleted accounts are a quiet postscript to the directory, not a second
   directory: muted card, and text buttons rather than icon tiles so the
   permanent one has to be read before it is clicked. */
.users-deleted-card {
	margin-top: 24px;
}

.users-deleted-card .clients-table-header h3 {
	color: #475569;
}

.users-deleted-card .user-avatar {
	background: #f1f5f9;
	color: #64748b;
}

/* Four columns here, not six, so the shared .users-table widths are replaced
   rather than inherited. */
#table-deleted-users th:nth-child(1),
#table-deleted-users td:nth-child(1) {
	width: 34%;
}

#table-deleted-users th:nth-child(2),
#table-deleted-users td:nth-child(2) {
	width: 16%;
}

#table-deleted-users th:nth-child(3),
#table-deleted-users td:nth-child(3) {
	width: 18%;
}

#table-deleted-users th:nth-child(4),
#table-deleted-users td:nth-child(4) {
	width: 32%;
}

.user-restore-button,
.user-purge-button {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 12px;
	color: #475569;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
}

.user-restore-button:hover {
	background: #eaf2ff;
	color: #2563eb;
}

.user-purge-button {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
}

.user-purge-button:hover {
	background: #fee2e2;
	color: #991b1b;
}

.user-avatar {
	background: #eef2ff;
	color: #4f46e5;
}

.user-role-badge,
.user-verification {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 850;
	gap: 7px;
	padding: 7px 11px;
	white-space: nowrap;
}

.user-role-badge {
	background: #eef2ff;
	color: #4f46e5;
}

.user-verification.is-verified {
	background: #eafaf0;
	color: #15803d;
}

.user-verification.is-pending {
	background: #fff7ed;
	color: #c2410c;
}

.user-you-badge {
	background: #eaf2ff;
	border-radius: 999px;
	color: #2563eb;
	display: inline-flex;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .05em;
	margin-top: 5px;
	padding: 3px 7px;
	text-transform: uppercase;
	width: max-content;
}

.users-page .user-email-field {
	grid-column: 1 / -1;
}

.user-access-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-self-access-note {
	align-items: flex-start;
	background: #eff6ff;
	border-top: 1px solid #dbeafe;
	color: #1e40af;
	display: flex;
	font-size: 13px;
	font-weight: 750;
	gap: 10px;
	line-height: 1.5;
	padding: 15px 28px;
}

.user-self-access-note i {
	margin-top: 3px;
}

.user-approval-callout {
	align-items: center;
	background: radial-gradient(circle at top right, rgba(34, 197, 94, .14), transparent 42%), linear-gradient(135deg, #f0fdf4 0%, #ffffff 72%);
	border: 1px solid #bbf7d0;
	border-radius: 22px;
	box-shadow: 0 14px 34px rgba(21, 128, 61, .08);
	display: grid;
	gap: 18px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	margin-bottom: 24px;
	padding: 22px 24px;
}

.user-approval-icon {
	align-items: center;
	background: #dcfce7;
	border-radius: 16px;
	color: #15803d;
	display: inline-flex;
	font-size: 21px;
	height: 50px;
	justify-content: center;
	width: 50px;
}

.user-approval-copy {
	min-width: 0;
}

.user-approval-copy > span {
	color: #15803d;
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .09em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.user-approval-copy h2 {
	color: #14532d;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.2;
	margin: 0 0 5px;
}

.user-approval-copy p {
	color: #3f6f50;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.45;
	margin: 0;
}

.user-approval-form {
	display: flex;
	margin: 0;
}

.user-approval-button {
	background: #15803d;
	border-color: #15803d;
	box-shadow: 0 10px 22px rgba(21, 128, 61, .2);
	white-space: nowrap;
}

.user-approval-button:hover,
.user-approval-button:focus-visible {
	background: #166534;
	border-color: #166534;
}

.account-identity-locked {
	background: #f1f5f9 !important;
	color: #64748b !important;
	cursor: not-allowed;
}

.account-google-managed {
	align-items: center;
	color: #64748b;
	display: inline-flex;
	font-size: 12px;
	font-weight: 750;
	gap: 7px;
	margin-top: 9px;
}

.account-google-managed i,
.account-connection-icon i,
.account-google-connect-button i {
	color: #4285f4;
}

.account-connections-list {
	padding: 26px 32px 30px;
}

.account-connection-row {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

.account-connection-provider {
	align-items: center;
	display: flex;
	gap: 14px;
	min-width: 0;
}

.account-connection-icon {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 20px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.account-connection-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.account-connection-copy strong {
	color: #0f172a;
	font-size: 15px;
	font-weight: 900;
}

.account-connection-copy span {
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.account-connection-actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.account-connection-status {
	align-items: center;
	background: #f1f5f9;
	border-radius: 999px;
	color: #64748b;
	display: inline-flex;
	font-size: 12px;
	font-weight: 850;
	gap: 6px;
	line-height: 1;
	padding: 8px 10px;
	white-space: nowrap;
}

.account-connection-status.is-connected {
	background: #ecfdf3;
	color: #15803d;
}

.account-connection-note {
	align-items: center;
	color: #9a3412;
	display: inline-flex;
	font-size: 12px;
	font-weight: 750;
	gap: 7px;
	line-height: 1.4;
}

.account-google-connect-button,
.account-google-disconnect-button {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 11px;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 850;
	gap: 8px;
	justify-content: center;
	min-height: 42px;
	padding: 9px 13px;
	transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
	white-space: nowrap;
}

.account-google-connect-button {
	color: #334155;
}

.account-google-connect-button:hover,
.account-google-connect-button:focus-visible {
	background: #f8fafc;
	border-color: #bfdbfe;
	color: #1d4ed8;
	outline: none;
	transform: translateY(-1px);
}

.account-google-disconnect-button {
	border-color: #fecaca;
	color: #b91c1c;
}

.account-google-disconnect-button:hover,
.account-google-disconnect-button:focus-visible {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #991b1b;
	outline: none;
	transform: translateY(-1px);
}

@media (max-width: 760px) {
	.account-connections-list {
		padding-left: 22px;
		padding-right: 22px;
	}

	.account-connection-row {
		align-items: stretch;
		flex-direction: column;
		gap: 18px;
	}

	.account-connection-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 1200px) {
	.users-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.impersonation-banner {
		position: relative;
	}
}

@media (max-width: 760px) {
	.users-stats,
	.user-access-grid {
		grid-template-columns: 1fr;
	}

	.user-approval-callout {
		align-items: start;
		grid-template-columns: auto minmax(0, 1fr);
		padding: 20px;
	}

	.user-approval-form {
		grid-column: 1 / -1;
	}

	.user-approval-button {
		width: 100%;
	}

	.impersonation-banner {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
		padding: 13px 16px;
	}

	.impersonation-banner button {
		width: 100%;
	}
}


/* Global form submission state. */
.app-submit-is-loading {
	cursor: wait !important;
}

.app-submit-is-loading > i,
.app-submit-is-loading > svg {
	display: none !important;
}

.app-submit-spinner {
	animation: app-submit-spin .65s linear infinite;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	display: inline-block;
	flex: 0 0 auto;
	height: 1em;
	vertical-align: -.125em;
	width: 1em;
}

.app-submit-spinner-labelled {
	margin-right: .5em;
}

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

@media (prefers-reduced-motion: reduce) {
	.app-submit-spinner {
		animation-duration: 1.2s;
	}
}


/* ============================================================
   ACTION MENUS (BOOTSTRAP DROPDOWNS)
============================================================ */

/* Menus are positioned with a fixed Popper strategy (see script_common.php),
   which lifts them out of any card or table overflow. */

.dropdown-menu {
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
	min-width: 208px;
	padding: 8px;
	z-index: 2055;
}

.dropdown-menu .dropdown-item {
	align-items: center;
	border-radius: 10px;
	color: #334155;
	display: flex;
	font-size: 14px;
	font-weight: 700;
	gap: 2px;
	padding: 10px 12px;
}

.dropdown-menu .dropdown-item i {
	color: #94a3b8;
	font-size: 13px;
	width: 18px;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
	background: #f1f5f9;
	color: #0f172a;
}

.dropdown-menu .dropdown-item:active i,
.dropdown-menu .dropdown-item:focus i,
.dropdown-menu .dropdown-item:hover i {
	color: #2563eb;
}

.dropdown-menu .dropdown-item[disabled],
.dropdown-menu .dropdown-item.is-disabled {
	background: transparent;
	color: #94a3b8;
	cursor: not-allowed;
	opacity: .48;
}


/* ============================================================
   ADDRESS SEARCH
============================================================ */

.address-search {
	position: relative;
}

/* In the client editor the field sits between the card header and the field grid.
   It reads as a lookup tool rather than a form field, so it gets the grid's
   horizontal inset plus a tinted band and a rule to separate it from the
   values it fills in below. */

.client-editor-card > .address-search {
	background: #f7fafd;
	border-bottom: 1px solid #e6edf6;
	padding: 22px 28px 20px;
}

.client-editor-card > .address-search .address-search-input {
	background: #ffffff;
}

.client-editor-card > .address-search + .client-editor-grid {
	padding-top: 22px;
}

@media (min-width: 1500px) {
	.client-editor-card > .address-search {
		padding-left: 38px;
		padding-right: 38px;
	}
}

@media (max-width: 640px) {
	.client-editor-card > .address-search {
		padding: 20px;
	}

	.client-editor-card > .address-search + .client-editor-grid {
		padding-top: 20px;
	}
}

/* Settings keeps the widget inside the field grid, so the rule alone separates it. */

.settings-field-address-search {
	border-bottom: 1px solid #e6edf6;
	padding-bottom: 20px;
}

.address-search-control {
	align-items: center;
	display: flex;
	position: relative;
	width: 100%;
}

.address-search-icon {
	color: #94a3b8;
	font-size: 14px;
	left: 17px;
	pointer-events: none;
	position: absolute;
	transition: color .16s ease;
	z-index: 2;
}

.address-search .address-search-input {
	-webkit-appearance: none;
	appearance: none;
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	color: #0f172a;
	font-family: inherit;
	font-size: 15px;
	font-weight: 650;
	height: 52px;
	line-height: 1.2;
	min-height: 52px;
	outline: none;
	padding: 0 48px 0 46px;
	transition: all .16s ease;
	width: 100%;
}

.address-search .address-search-input::placeholder {
	color: #94a3b8;
	font-weight: 600;
}

.address-search .address-search-input:focus {
	background: #ffffff;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.address-search-control:focus-within .address-search-icon {
	color: #2563eb;
}

.address-search-clear {
	align-items: center;
	background: #e2e8f0;
	border: 0;
	border-radius: 50%;
	color: #475569;
	display: flex;
	font-size: 11px;
	height: 24px;
	justify-content: center;
	position: absolute;
	right: 14px;
	transition: all .16s ease;
	width: 24px;
	z-index: 2;
}

.address-search-clear:hover {
	background: #cbd5e1;
	color: #0f172a;
}

/* display:flex above would otherwise beat the hidden attribute. */

.address-search-clear[hidden] {
	display: none;
}

.address-search-spinner {
	animation: app-submit-spin .7s linear infinite;
	border: 2px solid #dbe4f0;
	border-radius: 50%;
	border-top-color: #2563eb;
	display: none;
	height: 18px;
	position: absolute;
	right: 16px;
	width: 18px;
	z-index: 2;
}

.address-search.is-loading .address-search-spinner {
	display: block;
}

.address-search.is-loading .address-search-clear {
	display: none;
}

.address-search-results {
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(15, 23, 42, .18);
	list-style: none;
	margin: 0;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px;
	position: fixed;
	z-index: 2060;
}

.address-search-results[hidden] {
	display: none;
}

.address-search-option {
	align-items: center;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 10px 12px;
	transition: background .12s ease;
}

.address-search-option i {
	color: #94a3b8;
	flex: none;
	font-size: 13px;
	transition: color .12s ease;
	width: 14px;
}

.address-search-option.is-active,
.address-search-option:hover {
	background: #f1f5f9;
}

.address-search-option.is-active i,
.address-search-option:hover i {
	color: #2563eb;
}

.address-search-option-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.address-search-option-text strong {
	color: #0f172a;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.address-search-option-text span {
	color: #64748b;
	font-size: 12.5px;
	font-weight: 650;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.address-search-empty {
	color: #64748b;
	font-size: 14px;
	font-weight: 650;
	padding: 12px;
}

.address-search-note[data-state="success"] {
	color: #15803d;
	font-weight: 700;
}

.address-search-note[data-state="error"] {
	color: #b91c1c;
	font-weight: 700;
}


/* ============================================================
   SEARCHABLE SELECT
============================================================ */

.searchable-select {
	position: relative;
	width: 100%;
}

/* The native select stays in the layout so validation can point at it. */

.searchable-select .searchable-select-native {
	height: 100%;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.searchable-select-control {
	align-items: center;
	display: flex;
	position: relative;
	width: 100%;
}

.searchable-select .searchable-select-input {
	-webkit-appearance: none;
	appearance: none;
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	color: #0f172a;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 650;
	height: 52px;
	line-height: 1.2;
	min-height: 52px;
	outline: none;
	padding: 0 44px 0 16px;
	text-overflow: ellipsis;
	transition: all .16s ease;
	width: 100%;
}

.searchable-select .searchable-select-input::placeholder {
	color: #94a3b8;
	font-weight: 600;
}

.searchable-select .searchable-select-input:focus {
	background: #ffffff;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
	cursor: text;
}

.searchable-select-caret {
	color: #94a3b8;
	cursor: pointer;
	font-size: 12px;
	position: absolute;
	right: 17px;
	transition: color .16s ease, transform .16s ease;
}

.searchable-select.is-open .searchable-select-caret {
	color: #2563eb;
	transform: rotate(180deg);
}

.searchable-select.is-invalid .searchable-select-input {
	border-color: #dc2626;
}

.searchable-select-list {
	background: #ffffff;
	border: 1px solid #e1e8f2;
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(15, 23, 42, .18);
	list-style: none;
	margin: 0;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px;
	position: fixed;
	z-index: 2060;
}

.searchable-select-list[hidden] {
	display: none;
}

.searchable-select-option {
	border-radius: 10px;
	color: #334155;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	overflow: hidden;
	padding: 10px 12px;
	text-overflow: ellipsis;
	transition: background .12s ease;
	white-space: nowrap;
}

.searchable-select-option.is-active {
	background: #f1f5f9;
	color: #0f172a;
}

.searchable-select-option.is-selected {
	color: #1d4ed8;
}

.searchable-select-empty {
	color: #64748b;
	font-size: 14px;
	font-weight: 650;
	padding: 12px;
}


/* The Bill To combobox replaces a native select, so it inherits that select's
   spacing and the editor's heavier field treatment. */

.invoice-editor-page .invoice-bill-to .searchable-select {
	margin: 10px 0 18px;
}

.invoice-editor-page .invoice-bill-to .searchable-select-input {
	border: 2px solid #b9d5fa;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
}

.invoice-editor-page .invoice-bill-to .searchable-select-input:focus {
	border-color: #2563eb;
}


/* ============================================================
   INVOICE / ESTIMATE EDITOR CARD HEADERS
============================================================ */

/* Keeps the section title on the left and its action button on the right. */

.invoice-editor-page .client-editor-card-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}


/* ============================================================
   INVOICE LEVEL DISCOUNT
============================================================ */

/* Sits in the totals stack, so it carries the same padding and rule as the
   Subtotal / Tax rows above it. */

.invoice-editor-page .invoice-summary-discount {
	border-bottom: 1px solid #e8eef7;
	padding: 15px 22px;
}

.invoice-editor-page .invoice-discount-add {
	align-items: center;
	background: transparent;
	border: 0;
	color: #1557ff;
	display: none;
	font-size: 14px;
	font-weight: 800;
	gap: 8px;
	min-height: 38px;
	padding: 0;
}

.invoice-editor-page .invoice-discount-add:hover {
	color: #0f172a;
}

.invoice-editor-page .invoice-summary-discount.is-empty .invoice-discount-add {
	display: inline-flex;
}

.invoice-editor-page .invoice-summary-discount.is-empty .invoice-discount-fields {
	display: none;
}

/* Row one is the label and the deduction, matching the rows above.
   Row two holds the description and the amount control. */

.invoice-editor-page .invoice-discount-fields {
	align-items: center;
	display: grid;
	gap: 12px 14px;
	grid-template-areas:
		"label amount remove"
		"inputs inputs inputs";
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.invoice-editor-page .invoice-discount-fields > .invoice-summary-label {
	grid-area: label;
}

.invoice-editor-page .invoice-discount-amount {
	grid-area: amount;
	text-align: right;
	white-space: nowrap;
}

.invoice-editor-page .invoice-discount-remove {
	grid-area: remove;
	height: 34px;
	width: 34px;
}

.invoice-editor-page .invoice-discount-inputs {
	display: grid;
	gap: 10px;
	grid-area: inputs;
	grid-template-columns: minmax(0, 1fr) 140px;
}

.invoice-editor-page .invoice-discount-description {
	background: #ffffff;
	border: 1px solid #d2dfea;
	border-radius: 10px;
	color: #0f172a;
	font-size: 14px;
	font-weight: 650;
	min-height: 42px;
	padding: 0 12px;
	width: 100%;
}

.invoice-editor-page .invoice-discount-description:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
	outline: none;
}

/* The unit and the amount read as one control. */

.invoice-editor-page .invoice-discount-value-group {
	align-items: center;
	background: #ffffff;
	border: 1px solid #d2dfea;
	border-radius: 10px;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	min-height: 42px;
	overflow: hidden;
}

.invoice-editor-page .invoice-discount-value-group:focus-within {
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.invoice-editor-page .invoice-discount-value-group .form-select,
.invoice-editor-page .invoice-discount-value-group .form-control {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #0f172a;
	font-size: 14px;
	font-weight: 750;
	min-height: 40px;
	outline: none;
	width: 100%;
}

.invoice-editor-page .invoice-discount-value-group .form-select {
	background-image: none;
	border-right: 1px solid #e2e8f0;
	padding: 0;
	text-align: center;
	text-align-last: center;
}

.invoice-editor-page .invoice-discount-value-group .form-control {
	-moz-appearance: textfield;
	padding: 0 12px 0 10px;
	text-align: right;
}

/* No spinners - they steal the room the amount needs. */

.invoice-editor-page .invoice-discount-value-group .form-control::-webkit-inner-spin-button,
.invoice-editor-page .invoice-discount-value-group .form-control::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* ============================================================
   DOCUMENT NOTES & TERMS PANEL
============================================================ */

/* Matches the PDF: notes and terms sit in a panel that runs the full depth of
   the totals column, instead of floating beside it. */

.invoice-detail-document-bottom {
	align-items: stretch;
}

.invoice-detail-notes:has(p) {
	background: #f7fafd;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
}

.invoice-detail-notes p {
	margin-bottom: 0;
}

.invoice-detail-notes p + .invoice-detail-doc-label {
	margin-top: 26px;
}


/* ============================================================
   LINE ITEM TITLE + DESCRIPTION
============================================================ */

.invoice-line-text {
	display: grid;
	flex: 1;
	gap: 8px;
	min-width: 0;
}

.invoice-editor-page .invoice-line-text .invoice-line-title {
	font-size: 15px;
	font-weight: 800;
	min-height: 44px;
	padding: 10px 14px;
}

.invoice-editor-page .invoice-line-text textarea.invoice-line-description {
	font-size: 14px;
	font-weight: 600;
	min-height: 40px;
	padding-bottom: 9px;
	padding-top: 9px;
}

/* The rendered document: title on its own line, description beneath it. */

.invoice-item-description {
	color: #52616c;
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin-top: 4px;
	white-space: normal;
}

.invoice-detail-items td strong,
.invoice-view-items td strong {
	display: block;
}


.invoice-editor-page .invoice-item-adjustment-row[hidden] {
	display: none;
}

.invoice-editor-page .invoice-line-discount-display {
	color: #52616c;
	font-size: 15px;
	font-weight: 750;
	text-align: right;
}