: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;
}

.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-body {
	align-content: center;
	display: grid;
	margin: 0 auto;
	max-width: 430px;
	padding: 48px 0;
	width: calc(100% - 80px);
}

.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%;
}

.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);
	box-shadow: 0 14px 28px rgba(37, 99, 235, .24);
	color: #ffffff;
}

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

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

.app-sidebar-user {
	margin-bottom: 16px;
	padding: 0 14px;
}

.app-sidebar-user span {
	color: rgba(255, 255, 255, .42);
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	margin-bottom: 8px;
	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: 4px;
}

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

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

.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 {
	flex: 0 0 auto;
}

.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;
}

.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;
}

.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;
}

.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 {
	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-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 {
	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);
}

.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;
}

.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: 1fr;
	}

	.app-sidebar {
		height: auto;
		position: relative;
		top: auto;
	}

	.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 {
		width: 100%;
	}

	.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;
	}

	.login-branding {
		padding: 38px 28px;
	}

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

	.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;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.clients-pagination-link,
.clients-pagination-number,
.clients-pagination-ellipsis {
	align-items: center;
	border-radius: 12px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 900;
	gap: 7px;
	height: 38px;
	justify-content: center;
	min-width: 38px;
	padding: 0 12px;
}

.clients-pagination-link,
.clients-pagination-number {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	color: #334155;
}

.clients-pagination-link:hover,
.clients-pagination-number:hover {
	background: #eaf2ff;
	border-color: #bfdbfe;
	color: #2563eb;
}

.clients-pagination-number.is-active {
	background: #2563eb;
	border-color: #2563eb;
	color: #ffffff;
}

.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: 26px;
	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;
	}
}
/* ============================================================
   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-card {
	overflow: visible;
}

.invoices-page .invoices-table-wrap {
	overflow-x: auto;
	overflow-y: visible;
	padding-bottom: 96px;
}

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

.invoices-page .dropdown-menu {
	z-index: 2055;
}

.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 EDITOR
============================================================ */

.invoice-editor-page {
	--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;
}

.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);
	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;
}

.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: 920px;
	table-layout: fixed;
	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-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: 38px;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

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

.invoice-editor-page .invoice-notes-terms textarea {
	border-radius: 16px;
	min-height: 130px;
	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;
	padding: 15px 18px;
}

.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-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-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: 980px;
	padding: 16px 0 48px;
}

.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;
}

.invoice-public-title {
	color: #0f172a;
	font-size: clamp(46px, 8vw, 78px);
	letter-spacing: -.07em;
	line-height: .9;
	margin: 0 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 44px;
}

.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: #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: #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;
}

/* ============================================================
   RESPONSIVE INVOICE EDITOR / PUBLIC INVOICE
============================================================ */

@media (max-width: 900px) {
	.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-columns: 1fr;
	}

	.invoice-editor-page .invoice-document-meta-row {
		gap: 6px;
		grid-template-columns: 1fr;
	}

	.invoice-editor-page .invoice-bill-to {
		margin-top: 28px;
	}

	.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-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-field {
	display: grid;
	gap: 8px;
}

.settings-field-textarea,
.settings-field-checkbox {
	grid-column: 1 / -1;
}

.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-help-text {
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.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%;
}

@media (max-width: 1180px) {
	.settings-layout {
		grid-template-columns: 1fr;
	}

	.settings-sidebar {
		position: static;
	}
}

@media (max-width: 760px) {
	.settings-card-header,
	.settings-fields-grid {
		padding-left: 22px;
		padding-right: 22px;
	}

	.settings-fields-grid {
		grid-template-columns: 1fr;
	}
}

.invoice-public-business {
	color: #334155;
	display: grid;
	font-size: 14px;
	font-weight: 700;
	gap: 4px;
	line-height: 1.35;
	margin: 8px 0 26px;
}