/*
 * Agent Splitter
 * Shared application stylesheet
 * Static path: static/agentsplitter/css/agentsplitter.css
 */


/* ==========================================================
   layout.html
   ========================================================== */

:root {
			--bg: #f4f6f8;
			--surface: #ffffff;
			--surface-muted: #f8fafc;
			--text: #172033;
			--text-muted: #667085;
			--border: #e4e7ec;
			--nav-bg: #111827;
			--nav-bg-hover: #1f2937;
			--nav-text: #cbd5e1;
			--nav-text-strong: #ffffff;
			--accent: #3b82f6;
			--accent-soft: rgba(59, 130, 246, 0.14);
			--success: #15803d;
			--warning: #b45309;
			--danger: #b42318;
			--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
			--shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
			--radius-sm: 8px;
			--radius-md: 12px;
			--radius-lg: 16px;
			--sidebar-width: 264px;
			--topbar-height: 72px;
		}

		* {
			box-sizing: border-box;
		}

		html,
		body {
			min-height: 100%;
			margin: 0;
		}

		body {
			font-family: "Inter", sans-serif;
			background: var(--bg);
			color: var(--text);
			-webkit-font-smoothing: antialiased;
		}

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

		button,
		input,
		select,
		textarea {
			font: inherit;
		}

		.app-shell {
			min-height: 100vh;
			display: grid;
			grid-template-columns: var(--sidebar-width) 1fr;
		}

		.sidebar {
			position: fixed;
			inset: 0 auto 0 0;
			width: var(--sidebar-width);
			background:
				radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 34%),
				var(--nav-bg);
			color: var(--nav-text);
			display: flex;
			flex-direction: column;
			z-index: 40;
			border-right: 1px solid rgba(255, 255, 255, 0.05);
		}

		.brand {
			height: var(--topbar-height);
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 0 22px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		}

		.brand-mark {
			width: 44px;
			height: 44px;
			border-radius: 10px;
			display: grid;
			place-items: center;
			overflow: hidden;
			flex-shrink: 0;
		}

		.brand-mark img {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
		}

		.brand-name {
			font-family: "Manrope", sans-serif;
			font-size: 17px;
			font-weight: 800;
			letter-spacing: -0.02em;
			color: #fff;
		}

		.brand-subtitle {
			font-size: 11px;
			color: #94a3b8;
			margin-top: 1px;
		}

		.nav {
			padding: 18px 14px 22px;
			overflow-y: auto;
			flex: 1;
		}

		.nav-section + .nav-section {
			margin-top: 24px;
		}

		.nav-label {
			margin: 0 10px 8px;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: #64748b;
		}

		.nav-item {
			display: flex;
			align-items: center;
			gap: 12px;
			min-height: 44px;
			padding: 0 12px;
			border-radius: 10px;
			color: var(--nav-text);
			font-size: 13.5px;
			font-weight: 500;
			transition: 140ms ease;
			margin: 2px 0;
		}

		.nav-item:hover {
			background: var(--nav-bg-hover);
			color: var(--nav-text-strong);
		}

		.nav-item.active {
			background: var(--accent-soft);
			color: #fff;
		}

		.nav-item.active .nav-icon {
			color: #60a5fa;
		}

		.nav-icon {
			width: 19px;
			height: 19px;
			color: #94a3b8;
			flex: 0 0 auto;
		}

		.nav-spacer {
			flex: 1;
		}

		.nav-badge {
			min-width: 21px;
			height: 21px;
			padding: 0 6px;
			border-radius: 999px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.08);
			color: #cbd5e1;
			font-size: 10px;
			font-weight: 700;
		}

		.sidebar-footer {
			padding: 14px;
			border-top: 1px solid rgba(255, 255, 255, 0.08);
		}

		.subscription-card {
			padding: 13px;
			border: 1px solid rgba(255, 255, 255, 0.08);
			background: rgba(255, 255, 255, 0.035);
			border-radius: 12px;
		}

		.subscription-card strong {
			display: block;
			font-size: 12px;
			color: #f8fafc;
			margin-bottom: 4px;
		}

		.subscription-card span {
			font-size: 11px;
			color: #94a3b8;
		}

		.main-shell {
			grid-column: 2;
			min-width: 0;
		}

		.topbar {
			height: var(--topbar-height);
			position: sticky;
			top: 0;
			z-index: 30;
			background: rgba(255, 255, 255, 0.94);
			backdrop-filter: blur(12px);
			border-bottom: 1px solid var(--border);
			display: flex;
			align-items: center;
			padding: 0 30px;
		}

		.page-heading {
			min-width: 0;
		}

		.page-heading h1 {
			margin: 0;
			font-family: "Manrope", sans-serif;
			font-size: 19px;
			font-weight: 800;
			letter-spacing: -0.025em;
			color: #101828;
		}

		.page-heading p {
			margin: 2px 0 0;
			font-size: 12px;
			color: var(--text-muted);
		}

		.topbar-actions {
			margin-left: auto;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.icon-button {
			width: 40px;
			height: 40px;
			border: 1px solid var(--border);
			border-radius: 10px;
			background: #fff;
			display: grid;
			place-items: center;
			color: #475467;
			cursor: pointer;
			box-shadow: var(--shadow-sm);
		}

		.icon-button:hover {
			background: #f9fafb;
			color: #101828;
		}

		.profile {
			position: relative;
		}

		.profile-button {
			display: flex;
			align-items: center;
			gap: 10px;
			border: 0;
			background: transparent;
			padding: 6px 7px 6px 8px;
			border-radius: 12px;
			cursor: pointer;
		}

		.profile-button:hover {
			background: var(--surface-muted);
		}

		.avatar {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			background: linear-gradient(145deg, #e0e7ff, #dbeafe);
			color: #1d4ed8;
			font-size: 12px;
			font-weight: 800;
			border: 1px solid #c7d7fe;
		}

		.profile-meta {
			text-align: left;
		line-height: 1.15;
		}

		.profile-meta strong {
			display: block;
			max-width: 160px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 12.5px;
			color: #101828;
			font-weight: 700;
		}

		.profile-meta span {
			display: block;
			margin-top: 3px;
			font-size: 10.5px;
			color: var(--text-muted);
		}

		.chevron {
			width: 16px;
			height: 16px;
			color: #98a2b3;
		}

		.profile-menu {
			display: none;
			position: absolute;
			right: 0;
			top: calc(100% + 10px);
			width: 230px;
			padding: 7px;
			border: 1px solid var(--border);
			background: #fff;
			border-radius: 12px;
			box-shadow: var(--shadow-md);
		}

		.profile-menu.open {
			display: block;
		}

		.profile-menu-header {
			padding: 10px 10px 12px;
			border-bottom: 1px solid var(--border);
			margin-bottom: 5px;
		}

		.profile-menu-header strong {
			display: block;
			font-size: 12.5px;
			margin-bottom: 3px;
		}

		.profile-menu-header span {
			display: block;
			font-size: 11px;
			color: var(--text-muted);
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.profile-menu a,
		.profile-menu button {
			width: 100%;
			min-height: 38px;
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 0 10px;
			border: 0;
			background: transparent;
			border-radius: 8px;
			color: #344054;
			cursor: pointer;
			font-size: 12.5px;
			text-align: left;
		}

		.profile-menu a:hover,
		.profile-menu button:hover {
			background: var(--surface-muted);
			color: #101828;
		}

		.profile-menu svg {
			width: 17px;
			height: 17px;
			color: #667085;
		}

		.profile-menu .danger {
			color: var(--danger);
		}

		.profile-divider {
			height: 1px;
			background: var(--border);
			margin: 5px 0;
		}

		.content {
			padding: 28px 30px 44px;
			max-width: 1600px;
			margin: 0 auto;
		}

		.alert {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 12px 14px;
			border-radius: 10px;
			margin-bottom: 18px;
			font-size: 12.5px;
			border: 1px solid;
		}

		.alert-warning {
			background: #fffaeb;
			border-color: #fedf89;
			color: #93370d;
		}

		.alert-danger {
			background: #fef3f2;
			border-color: #fecdca;
			color: #912018;
		}

		.mobile-menu-button {
			display: none;
		}

		@media (max-width: 960px) {
			.app-shell {
				display: block;
			}

			.sidebar {
				transform: translateX(-100%);
				transition: transform 180ms ease;
				box-shadow: var(--shadow-md);
			}

			.sidebar.open {
				transform: translateX(0);
			}

			.main-shell {
				grid-column: auto;
			}

			.mobile-menu-button {
				display: grid;
				margin-right: 12px;
			}

			.content {
				padding: 22px 18px 36px;
			}

			.topbar {
				padding: 0 18px;
			}

			.profile-meta {
				display: none;
			}
		}


/* ==========================================================
   login.html
   ========================================================== */

:root {
			--bg: #f4f6f8;
			--surface: #ffffff;
			--text: #172033;
			--text-muted: #667085;
			--border: #e4e7ec;
			--accent: #2563eb;
			--accent-hover: #1d4ed8;
			--danger: #b42318;
			--shadow: 0 24px 60px rgba(16, 24, 40, 0.12);
		}

		* {
			box-sizing: border-box;
		}

		html,
		body {
			min-height: 100%;
			margin: 0;
		}

		body {
			font-family: "Inter", sans-serif;
			background:
				radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32%),
				linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
			color: var(--text);
			-webkit-font-smoothing: antialiased;
		}

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

		button,
		input {
			font: inherit;
		}

		.login-shell {
			min-height: 100vh;
			display: grid;
			grid-template-columns: minmax(360px, 560px) 1fr;
		}

		.login-panel {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 48px 40px;
			background: rgba(255, 255, 255, 0.92);
			border-right: 1px solid var(--border);
		}

		.login-content {
			width: 100%;
			max-width: 390px;
		}

		.auth-brand {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 46px;
		}

		.auth-brand-mark {
			width: 40px;
			height: 40px;
			border-radius: 11px;
			display: grid;
			place-items: center;
			background: linear-gradient(145deg, #60a5fa, #2563eb);
			color: #fff;
			box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
		}

		.auth-brand-mark svg {
			width: 21px;
			height: 21px;
		}

		.auth-brand-name {
			font-family: "Manrope", sans-serif;
			font-size: 18px;
			font-weight: 800;
			letter-spacing: -0.025em;
			color: #101828;
		}

		.auth-brand-subtitle {
			margin-top: 2px;
			font-size: 11px;
			color: #98a2b3;
		}

		.login-heading {
			margin-bottom: 26px;
		}

		.login-heading h1 {
			margin: 0 0 8px;
			font-family: "Manrope", sans-serif;
			font-size: 28px;
			font-weight: 800;
			letter-spacing: -0.045em;
			color: #101828;
		}

		.login-heading p {
			margin: 0;
			color: var(--text-muted);
			font-size: 13px;
			line-height: 1.55;
		}

		.auth-message {
			margin-bottom: 18px;
			padding: 11px 13px;
			border-radius: 9px;
			font-size: 12px;
			line-height: 1.45;
			border: 1px solid;
		}

		.auth-message-error {
			background: #fef3f2;
			border-color: #fecdca;
			color: #912018;
		}

		.auth-message-info {
			background: #eff8ff;
			border-color: #b2ddff;
			color: #175cd3;
		}

		.auth-form-field {
			margin-bottom: 17px;
		}

		.auth-form-field label {
			display: block;
			margin-bottom: 7px;
			color: #344054;
			font-size: 12px;
			font-weight: 650;
		}

		.auth-form-field input {
			width: 100%;
			height: 44px;
			padding: 0 13px;
			border: 1px solid #d0d5dd;
			border-radius: 10px;
			background: #fff;
			color: #101828;
			font-size: 13px;
			outline: none;
			box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
			transition: 140ms ease;
		}

		.auth-form-field input::placeholder {
			color: #98a2b3;
		}

		.auth-form-field input:focus {
			border-color: #84adff;
			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
		}

		.auth-password-wrap {
			position: relative;
		}

		.auth-password-wrap input {
			padding-right: 46px;
		}

		.auth-password-toggle {
			position: absolute;
			right: 7px;
			top: 50%;
			transform: translateY(-50%);
			width: 34px;
			height: 34px;
			display: grid;
			place-items: center;
			border: 0;
			border-radius: 8px;
			background: transparent;
			color: #667085;
			cursor: pointer;
		}

		.auth-password-toggle:hover {
			background: #f2f4f7;
			color: #101828;
		}

		.auth-password-toggle svg {
			width: 17px;
			height: 17px;
		}

		.form-options {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			margin: 2px 0 22px;
		}

		.remember {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: 12px;
			color: #475467;
			cursor: pointer;
		}

		.remember input {
			width: 16px;
			height: 16px;
			accent-color: var(--accent);
		}

		.forgot-link {
			font-size: 12px;
			font-weight: 650;
			color: var(--accent);
		}

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

		.signin-button {
			width: 100%;
			height: 44px;
			border: 1px solid var(--accent);
			border-radius: 10px;
			background: var(--accent);
			color: #fff;
			font-size: 13px;
			font-weight: 700;
			cursor: pointer;
			box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
		}

		.signin-button:hover {
			background: var(--accent-hover);
			border-color: var(--accent-hover);
		}

		.register-copy {
			margin: 22px 0 0;
			text-align: center;
			color: var(--text-muted);
			font-size: 12px;
		}

		.register-copy a {
			color: var(--accent);
			font-weight: 700;
		}

		.register-copy a:hover {
			text-decoration: underline;
		}

		.login-visual {
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 60px;
			background:
				radial-gradient(circle at 72% 18%, rgba(96, 165, 250, 0.22), transparent 25%),
				radial-gradient(circle at 20% 78%, rgba(37, 99, 235, 0.20), transparent 27%),
				#111827;
			color: #fff;
		}

		.visual-grid {
			position: absolute;
			inset: 0;
			opacity: 0.13;
			background-image:
				linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
				linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
			background-size: 46px 46px;
			mask-image: linear-gradient(to bottom right, transparent, black 28%, black 72%, transparent);
		}

		.visual-content {
			position: relative;
			z-index: 1;
			width: min(560px, 100%);
		}

		.visual-eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			height: 28px;
			padding: 0 10px;
			border: 1px solid rgba(255,255,255,0.11);
			border-radius: 999px;
			background: rgba(255,255,255,0.06);
			color: #cbd5e1;
			font-size: 10.5px;
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.visual-eyebrow::before {
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #60a5fa;
		}

		.visual-content h2 {
			margin: 22px 0 16px;
			max-width: 520px;
			font-family: "Manrope", sans-serif;
			font-size: clamp(34px, 4vw, 52px);
			line-height: 1.08;
			font-weight: 800;
			letter-spacing: -0.055em;
		}

		.visual-content p {
			margin: 0;
			max-width: 470px;
			color: #aeb9ca;
			font-size: 14px;
			line-height: 1.7;
		}

		.visual-card {
			margin-top: 38px;
			width: min(420px, 100%);
			padding: 18px;
			border: 1px solid rgba(255,255,255,0.10);
			border-radius: 16px;
			background: rgba(255,255,255,0.055);
			backdrop-filter: blur(8px);
			box-shadow: 0 24px 60px rgba(0,0,0,0.16);
		}

		.visual-card-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 17px;
		}

		.visual-card-head span:first-child {
			font-size: 11px;
			color: #94a3b8;
		}

		.visual-status {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 10px;
			color: #86efac;
		}

		.visual-status::before {
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: currentColor;
		}

		.visual-amount {
			font-family: "Manrope", sans-serif;
			font-size: 28px;
			font-weight: 800;
			letter-spacing: -0.04em;
		}

		.visual-caption {
			margin-top: 4px;
			font-size: 11px;
			color: #94a3b8;
		}

		.visual-bars {
			margin-top: 18px;
			display: grid;
			gap: 9px;
		}

		.visual-bar {
			height: 6px;
			border-radius: 999px;
			background: rgba(255,255,255,0.08);
			overflow: hidden;
		}

		.visual-bar span {
			display: block;
			height: 100%;
			border-radius: inherit;
			background: linear-gradient(90deg, #2563eb, #60a5fa);
		}

		.visual-bar:nth-child(1) span {
			width: 82%;
		}

		.visual-bar:nth-child(2) span {
			width: 64%;
		}

		.visual-bar:nth-child(3) span {
			width: 91%;
		}

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

			.login-panel {
				min-height: 100vh;
				border-right: 0;
			}

			.login-visual {
				display: none;
			}
		}

		@media (max-width: 520px) {
			.login-panel {
				padding: 34px 22px;
			}

			.auth-brand {
				margin-bottom: 38px;
			}
		}


/* ==========================================================
   register.html
   ========================================================== */

:root {
			--bg: #f4f6f8;
			--surface: #ffffff;
			--text: #172033;
			--text-muted: #667085;
			--border: #e4e7ec;
			--accent: #2563eb;
			--accent-hover: #1d4ed8;
			--danger: #b42318;
		}

		* {
			box-sizing: border-box;
		}

		html,
		body {
			min-height: 100%;
			margin: 0;
		}

		body {
			font-family: "Inter", sans-serif;
			background:
				radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32%),
				linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
			color: var(--text);
			-webkit-font-smoothing: antialiased;
		}

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

		button,
		input {
			font: inherit;
		}

		.auth-shell {
			min-height: 100vh;
			display: grid;
			grid-template-columns: minmax(420px, 600px) 1fr;
		}

		.auth-panel {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 48px 40px;
			background: rgba(255, 255, 255, 0.94);
			border-right: 1px solid var(--border);
		}

		.auth-content {
			width: 100%;
			max-width: 430px;
		}

		.auth-brand {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 42px;
		}

		.auth-brand-mark {
			width: 40px;
			height: 40px;
			border-radius: 11px;
			display: grid;
			place-items: center;
			background: linear-gradient(145deg, #60a5fa, #2563eb);
			color: #fff;
			box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
		}

		.auth-brand-mark svg {
			width: 21px;
			height: 21px;
		}

		.auth-brand-name {
			font-family: "Manrope", sans-serif;
			font-size: 18px;
			font-weight: 800;
			letter-spacing: -0.025em;
			color: #101828;
		}

		.auth-brand-subtitle {
			margin-top: 2px;
			font-size: 11px;
			color: #98a2b3;
		}

		.auth-heading {
			margin-bottom: 24px;
		}

		.auth-heading h1 {
			margin: 0 0 8px;
			font-family: "Manrope", sans-serif;
			font-size: 28px;
			font-weight: 800;
			letter-spacing: -0.045em;
			color: #101828;
		}

		.auth-heading p {
			margin: 0;
			color: var(--text-muted);
			font-size: 13px;
			line-height: 1.55;
		}

		.auth-message {
			margin-bottom: 18px;
			padding: 11px 13px;
			border-radius: 9px;
			font-size: 12px;
			line-height: 1.45;
			border: 1px solid;
		}

		.auth-message-error {
			background: #fef3f2;
			border-color: #fecdca;
			color: #912018;
		}

		.auth-message-success {
			background: #ecfdf3;
			border-color: #abefc6;
			color: #067647;
		}

		.auth-message-info {
			background: #eff8ff;
			border-color: #b2ddff;
			color: #175cd3;
		}

		.auth-form-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 14px;
		}

		.auth-form-field {
			margin-bottom: 16px;
		}

		.auth-form-field label {
			display: block;
			margin-bottom: 7px;
			color: #344054;
			font-size: 12px;
			font-weight: 650;
		}

		.auth-form-field input {
			width: 100%;
			height: 44px;
			padding: 0 13px;
			border: 1px solid #d0d5dd;
			border-radius: 10px;
			background: #fff;
			color: #101828;
			font-size: 13px;
			outline: none;
			box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
		}

		.auth-form-field input:focus {
			border-color: #84adff;
			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
		}

		.auth-password-wrap {
			position: relative;
		}

		.auth-password-wrap input {
			padding-right: 46px;
		}

		.auth-password-toggle {
			position: absolute;
			right: 7px;
			top: 50%;
			transform: translateY(-50%);
			width: 34px;
			height: 34px;
			display: grid;
			place-items: center;
			border: 0;
			border-radius: 8px;
			background: transparent;
			color: #667085;
			cursor: pointer;
		}

		.auth-password-toggle:hover {
			background: #f2f4f7;
			color: #101828;
		}

		.auth-password-toggle svg {
			width: 17px;
			height: 17px;
		}

		.checkbox-row {
			display: flex;
			align-items: flex-start;
			gap: 9px;
			margin: 4px 0 22px;
			font-size: 11.5px;
			line-height: 1.55;
			color: #475467;
		}

		.checkbox-row input {
			width: 16px;
			height: 16px;
			margin-top: 2px;
			accent-color: var(--accent);
		}

		.checkbox-row a {
			color: var(--accent);
			font-weight: 650;
		}

		.auth-primary-button {
			width: 100%;
			height: 44px;
			border: 1px solid var(--accent);
			border-radius: 10px;
			background: var(--accent);
			color: #fff;
			font-size: 13px;
			font-weight: 700;
			cursor: pointer;
			box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
		}

		.auth-primary-button:hover {
			background: var(--accent-hover);
			border-color: var(--accent-hover);
		}

		.auth-footer {
			margin: 22px 0 0;
			text-align: center;
			color: var(--text-muted);
			font-size: 12px;
		}

		.auth-footer a {
			color: var(--accent);
			font-weight: 700;
		}

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

		.auth-visual {
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 60px;
			background:
				radial-gradient(circle at 72% 18%, rgba(96, 165, 250, 0.22), transparent 25%),
				radial-gradient(circle at 20% 78%, rgba(37, 99, 235, 0.20), transparent 27%),
				#111827;
			color: #fff;
		}

		.visual-grid {
			position: absolute;
			inset: 0;
			opacity: 0.13;
			background-image:
				linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
				linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
			background-size: 46px 46px;
			mask-image: linear-gradient(to bottom right, transparent, black 28%, black 72%, transparent);
		}

		.visual-content {
			position: relative;
			z-index: 1;
			width: min(560px, 100%);
		}

		.visual-eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			height: 28px;
			padding: 0 10px;
			border: 1px solid rgba(255,255,255,0.11);
			border-radius: 999px;
			background: rgba(255,255,255,0.06);
			color: #cbd5e1;
			font-size: 10.5px;
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.visual-eyebrow::before {
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #60a5fa;
		}

		.visual-content h2 {
			margin: 22px 0 16px;
			max-width: 520px;
			font-family: "Manrope", sans-serif;
			font-size: clamp(34px, 4vw, 52px);
			line-height: 1.08;
			font-weight: 800;
			letter-spacing: -0.055em;
		}

		.visual-content p {
			margin: 0;
			max-width: 470px;
			color: #aeb9ca;
			font-size: 14px;
			line-height: 1.7;
		}

		@media (max-width: 900px) {
			.auth-shell {
				grid-template-columns: 1fr;
			}

			.auth-panel {
				min-height: 100vh;
				border-right: 0;
			}

			.auth-visual {
				display: none;
			}
		}

		@media (max-width: 560px) {
			.auth-panel {
				padding: 34px 22px;
			}

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


/* ==========================================================
   lookupvalues.html
   ========================================================== */

.lookup-page {
		display: grid;
		gap: 22px;
	}

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

	.lookup-summary-card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-md);
		padding: 18px 20px;
		box-shadow: var(--shadow-sm);
	}

	.lookup-summary-card--clickable {
		display: block;
		width: 100%;
		margin: 0;
		appearance: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		text-align: left;
		transition: 140ms ease;
	}

	.lookup-summary-card--clickable:hover {
		border-color: #93c5fd;
		box-shadow: var(--shadow-md);
	}

	.lookup-summary-card--clickable:focus-visible {
		outline: 2px solid #2563eb;
		outline-offset: 2px;
	}

	.lookup-summary-card-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 14px;
	}

	.lookup-summary-icon {
		width: 38px;
		height: 38px;
		border-radius: 10px;
		display: grid;
		place-items: center;
		background: #eff6ff;
		color: #2563eb;
		border: 1px solid #dbeafe;
	}

	.lookup-summary-icon svg {
		width: 19px;
		height: 19px;
	}

	.lookup-summary-count {
		font-family: "Manrope", sans-serif;
		font-size: 26px;
		font-weight: 800;
		letter-spacing: -0.04em;
		color: #101828;
	}

	.lookup-summary-card h2 {
		margin: 0 0 5px;
		font-family: "Manrope", sans-serif;
		font-size: 14px;
		font-weight: 800;
		color: #101828;
	}

	.lookup-summary-card p {
		margin: 0;
		font-size: 12px;
		line-height: 1.55;
		color: var(--text-muted);
	}

	.lookup-panel {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
		overflow: hidden;
	}

	.lookup-toolbar {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 17px 18px;
		border-bottom: 1px solid var(--border);
		background: #fff;
	}

	.lookup-tabs {
		display: inline-flex;
		align-items: center;
		padding: 4px;
		background: #f2f4f7;
		border-radius: 10px;
	}

	.lookup-tab {
		border: 0;
		background: transparent;
		color: #667085;
		font-size: 12.5px;
		font-weight: 600;
		padding: 8px 13px;
		border-radius: 8px;
		cursor: pointer;
	}

	.lookup-tab:hover {
		color: #344054;
	}

	.lookup-tab.active {
		background: #fff;
		color: #101828;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
	}

	.lookup-search {
		margin-left: auto;
		position: relative;
		width: min(300px, 100%);
	}

	.lookup-search svg {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 17px;
		height: 17px;
		color: #98a2b3;
		pointer-events: none;
	}

	.lookup-search input {
		width: 100%;
		height: 38px;
		padding: 0 12px 0 37px;
		border: 1px solid #d0d5dd;
		border-radius: 9px;
		background: #fff;
		color: #101828;
		font-size: 12.5px;
		outline: none;
		box-shadow: var(--shadow-sm);
	}

	.lookup-search input:focus {
		border-color: #84adff;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
	}

	.lookup-table-wrap {
		overflow-x: auto;
	}

	.lookup-table {
		width: 100%;
		border-collapse: collapse;
		min-width: 680px;
	}

	.lookup-table thead th {
		height: 42px;
		padding: 0 18px;
		background: #f9fafb;
		border-bottom: 1px solid var(--border);
		color: #667085;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.055em;
		text-transform: uppercase;
		text-align: left;
	}

	.lookup-table tbody td {
		height: 58px;
		padding: 0 18px;
		border-bottom: 1px solid #eef1f4;
		color: #344054;
		font-size: 12.5px;
		vertical-align: middle;
	}

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

	.lookup-table tbody tr:hover {
		background: #fcfcfd;
	}

	.lookup-name {
		font-weight: 650;
		color: #101828;
	}

	.lookup-group-label {
		display: inline-flex;
		align-items: center;
		height: 24px;
		padding: 0 8px;
		border-radius: 999px;
		background: #f2f4f7;
		color: #475467;
		font-size: 10.5px;
		font-weight: 650;
	}

	.status-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 25px;
		padding: 0 9px;
		border-radius: 999px;
		font-size: 10.5px;
		font-weight: 700;
	}

	.status-pill::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
	}

	.status-active {
		background: #ecfdf3;
		color: #027a48;
	}

	.status-inactive {
		background: #f2f4f7;
		color: #667085;
	}

	.lookup-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
	}

	.lookup-action-button {
		width: 34px;
		height: 34px;
		border: 1px solid transparent;
		border-radius: 8px;
		background: transparent;
		color: #667085;
		display: grid;
		place-items: center;
		cursor: pointer;
	}

	.lookup-action-button:hover {
		background: #f9fafb;
		border-color: var(--border);
		color: #101828;
	}

	.lookup-action-button.danger:hover {
		background: #fef3f2;
		border-color: #fecdca;
		color: #b42318;
	}

	.lookup-action-button svg {
		width: 16px;
		height: 16px;
	}

	.lookup-empty {
		padding: 58px 20px;
		text-align: center;
	}

	.lookup-empty-icon {
		width: 44px;
		height: 44px;
		margin: 0 auto 13px;
		border-radius: 12px;
		display: grid;
		place-items: center;
		background: #f2f4f7;
		color: #667085;
	}

	.lookup-empty-icon svg {
		width: 20px;
		height: 20px;
	}

	.lookup-empty h3 {
		margin: 0 0 6px;
		font-family: "Manrope", sans-serif;
		font-size: 14px;
		font-weight: 800;
		color: #101828;
	}

	.lookup-empty p {
		margin: 0;
		color: var(--text-muted);
		font-size: 12px;
	}

	.lookup-primary-button {
		height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 0 14px;
		border: 1px solid #2563eb;
		border-radius: 10px;
		background: #2563eb;
		color: #fff;
		font-size: 12.5px;
		font-weight: 700;
		cursor: pointer;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
	}

	.lookup-primary-button:hover {
		background: #1d4ed8;
		border-color: #1d4ed8;
	}

	.lookup-primary-button svg {
		width: 17px;
		height: 17px;
	}

	.lookup-modal-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(15, 23, 42, 0.48);
		backdrop-filter: blur(2px);
		padding: 24px;
	}

	.lookup-modal-backdrop.open {
		display: grid;
		place-items: center;
	}

	.lookup-modal {
		width: min(460px, 100%);
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		background: #fff;
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 16px;
		box-shadow: 0 24px 64px rgba(16, 24, 40, 0.22);
		overflow: hidden;
	}

	.lookup-modal-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 18px;
		padding: 21px 22px 17px;
		border-bottom: 1px solid var(--border);
	}

	.lookup-modal-header h2 {
		margin: 0 0 5px;
		font-family: "Manrope", sans-serif;
		font-size: 16px;
		font-weight: 800;
		color: #101828;
	}

	.lookup-modal-header p {
		margin: 0;
		font-size: 11.5px;
		color: var(--text-muted);
		line-height: 1.5;
	}

	.lookup-close-button {
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		display: grid;
		place-items: center;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: #667085;
		cursor: pointer;
	}

	.lookup-close-button:hover {
		background: #f2f4f7;
		color: #101828;
	}

	.lookup-close-button svg {
		width: 18px;
		height: 18px;
	}

	.lookup-form {
		padding: 20px 22px 22px;
	}

	.lookup-field {
		margin-bottom: 16px;
	}

	.lookup-field label {
		display: block;
		margin-bottom: 7px;
		font-size: 11.5px;
		font-weight: 650;
		color: #344054;
	}

	.lookup-field select,
	.lookup-field input[type="text"],
	.lookup-field input[type="number"] {
		width: 100%;
		height: 42px;
		padding: 0 12px;
		border: 1px solid #d0d5dd;
		border-radius: 9px;
		background: #fff;
		color: #101828;
		font-size: 12.5px;
		outline: none;
		box-shadow: var(--shadow-sm);
	}

	.lookup-field select:focus,
	.lookup-field input[type="text"]:focus,
	.lookup-field input[type="number"]:focus {
		border-color: #84adff;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
	}

	.lookup-check {
		display: flex;
		align-items: center;
		gap: 9px;
		font-size: 12px;
		color: #344054;
		cursor: pointer;
	}

	.lookup-check input {
		width: 16px;
		height: 16px;
		accent-color: #2563eb;
	}

	.lookup-modal-actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 9px;
		margin-top: 22px;
		padding-top: 17px;
		border-top: 1px solid var(--border);
	}

	.lookup-secondary-button {
		height: 39px;
		padding: 0 14px;
		border: 1px solid #d0d5dd;
		border-radius: 9px;
		background: #fff;
		color: #344054;
		font-size: 12.5px;
		font-weight: 650;
		cursor: pointer;
	}

	.lookup-secondary-button:hover {
		background: #f9fafb;
	}

	.lookup-table-section {
		display: none;
	}

	.lookup-table-section.active {
		display: block;
	}

	@media (max-width: 760px) {
		.lookup-summary {
			grid-template-columns: 1fr;
		}

		.lookup-toolbar {
			align-items: stretch;
			flex-direction: column;
		}

		.lookup-search {
			margin-left: 0;
			width: 100%;
		}

		.lookup-tabs {
			width: 100%;
		}

		.lookup-tab {
			flex: 1;
		}
	}


/* ==========================================================
   transaction.html
   ========================================================== */

.transaction-page {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 330px;
		gap: 22px;
		align-items: start;
	}

	.transaction-card {
		background: #fff;
		border: 1px solid var(--border);
		border-radius: 16px;
		box-shadow: var(--shadow-sm);
	}

	.transaction-card + .transaction-card {
		margin-top: 18px;
	}

	.transaction-card-header {
		padding: 19px 21px 15px;
		border-bottom: 1px solid var(--border);
	}

	.transaction-card-header h2 {
		margin: 0;
		font-family: "Manrope", sans-serif;
		font-size: 14px;
		font-weight: 800;
		color: #101828;
	}

	.transaction-card-header p {
		margin: 5px 0 0;
		color: var(--text-muted);
		font-size: 11.5px;
		line-height: 1.5;
	}

	.transaction-card-body {
		padding: 20px 21px 22px;
	}

	.transaction-form-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 17px 18px;
	}

	.transaction-form-grid.three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.transaction-form-field label {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-bottom: 7px;
		color: #344054;
		font-size: 11.5px;
		font-weight: 650;
	}

	.required {
		color: #dc2626;
	}

	.transaction-form-field input,
	.transaction-form-field select,
	.transaction-form-field textarea {
		width: 100%;
		border: 1px solid #d0d5dd;
		border-radius: 9px;
		background: #fff;
		color: #101828;
		font-size: 12.5px;
		outline: none;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	}

	.transaction-form-field input,
	.transaction-form-field select {
		height: 42px;
		padding: 0 11px;
	}

	.transaction-form-field textarea {
		min-height: 92px;
		padding: 11px;
		resize: vertical;
	}

	.transaction-form-field input:focus,
	.transaction-form-field select:focus,
	.transaction-form-field textarea:focus {
		border-color: #84adff;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
	}

	.field-help {
		margin-top: 6px;
		color: #98a2b3;
		font-size: 10.5px;
		line-height: 1.4;
	}

	.currency-wrap,
	.percent-wrap {
		position: relative;
	}

	.currency-wrap::before {
		content: "$";
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		color: #667085;
		font-size: 12px;
		z-index: 1;
	}

	.currency-wrap input {
		padding-left: 27px;
	}

	.percent-wrap::after {
		content: "%";
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		color: #667085;
		font-size: 12px;
	}

	.percent-wrap input {
		padding-right: 28px;
	}

	.profile-loader {
		display: flex;
		gap: 9px;
		align-items: end;
	}

	.profile-loader .transaction-form-field {
		flex: 1;
	}

	.transaction-secondary-button,
	.transaction-primary-button,
	.transaction-text-button {
		height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 0 13px;
		border-radius: 9px;
		font-size: 12px;
		font-weight: 700;
		cursor: pointer;
	}

	.transaction-secondary-button {
		border: 1px solid #d0d5dd;
		background: #fff;
		color: #344054;
	}

	.transaction-secondary-button:hover {
		background: #f9fafb;
	}

	.transaction-primary-button {
		border: 1px solid #2563eb;
		background: #2563eb;
		color: #fff;
	}

	.transaction-primary-button:hover {
		background: #1d4ed8;
	}

	.transaction-text-button {
		height: 34px;
		border: 0;
		background: transparent;
		color: #2563eb;
		padding: 0 5px;
	}

	.adjustment-table-wrap {
		overflow-x: auto;
	}

	.adjustment-table {
		width: 100%;
		border-collapse: collapse;
		min-width: 920px;
	}

	.adjustment-table th {
		padding: 0 8px 8px;
		color: #667085;
		font-size: 10px;
		font-weight: 700;
		text-align: left;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.adjustment-table td {
		padding: 6px 8px;
		vertical-align: top;
	}

	.adjustment-table th:first-child,
	.adjustment-table td:first-child {
		padding-left: 0;
	}

	.adjustment-table th:last-child,
	.adjustment-table td:last-child {
		padding-right: 0;
		position: sticky;
		right: 0;
		z-index: 2;
		background: #fff;
		box-shadow: -10px 0 18px -18px rgba(16, 24, 40, 0.55);
	}

	.adjustment-table select,
	.adjustment-table input {
		width: 100%;
		height: 38px;
		border: 1px solid #d0d5dd;
		border-radius: 8px;
		padding: 0 9px;
		background: #fff;
		color: #101828;
		font-size: 11.5px;
	}

	.remove-adjustment {
		width: 34px;
		height: 34px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: #98a2b3;
		cursor: pointer;
		font-size: 18px;
	}

	.remove-adjustment:hover {
		background: #fef3f2;
		color: #b42318;
	}

	.add-adjustment-row {
		margin-top: 10px;
	}

	.error-panel {
		margin-bottom: 18px;
		padding: 14px 16px;
		border: 1px solid #fecdca;
		border-radius: 11px;
		background: #fef3f2;
		color: #912018;
		font-size: 12px;
	}

	.error-panel strong {
		display: block;
		margin-bottom: 6px;
	}

	.error-panel ul {
		margin: 0;
		padding-left: 18px;
	}

	.error-panel li + li {
		margin-top: 3px;
	}

	.transaction-sidebar {
		position: sticky;
		top: 94px;
	}

	.summary-card {
		padding: 21px;
		background:
			linear-gradient(180deg, rgba(59,130,246,.045), transparent 58%),
			#fff;
		border: 1px solid var(--border);
		border-radius: 16px;
		box-shadow: var(--shadow-sm);
	}

	.summary-label {
		color: #667085;
		font-size: 10.5px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.summary-main {
		margin-top: 8px;
		font-family: "Manrope", sans-serif;
		font-size: 28px;
		font-weight: 800;
		letter-spacing: -0.045em;
		color: #101828;
	}

	.summary-divider {
		height: 1px;
		margin: 18px 0;
		background: var(--border);
	}

	.summary-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 7px 0;
		font-size: 11.5px;
	}

	.summary-row span:first-child {
		color: #667085;
	}

	.summary-row strong {
		color: #101828;
		font-weight: 700;
	}

	.calculated-tag {
		display: inline-flex;
		align-items: center;
		height: 22px;
		margin-top: 8px;
		padding: 0 8px;
		border-radius: 999px;
		background: #eff6ff;
		color: #2563eb;
		font-size: 9.5px;
		font-weight: 700;
	}

	.form-actions {
		display: flex;
		justify-content: flex-end;
		gap: 9px;
		margin-top: 18px;
	}

	.conditional-hidden {
		display: none !important;
	}

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

		.transaction-sidebar {
			position: static;
		}
	}

	@media (max-width: 700px) {
		.transaction-form-grid,
		.transaction-form-grid.three {
			grid-template-columns: 1fr;
		}

		.transaction-form-field.full {
			grid-column: auto;
		}

		.profile-loader {
			align-items: stretch;
			flex-direction: column;
		}
	}

/* ==========================================================
   transactionlist.html
   ========================================================== */

.transactionlist-page {
	display: grid;
	gap: 20px;
}

.transactionlist-panel {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.transactionlist-filters {
	padding: 18px 20px 20px;
}

.transactionlist-search {
	position: relative;
	max-width: 420px;
	margin-bottom: 18px;
}

.transactionlist-search svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: #98a2b3;
}

.transactionlist-search input {
	width: 100%;
	height: 40px;
	padding: 0 12px 0 37px;
	border: 1px solid #d0d5dd;
	border-radius: 9px;
	background: #fff;
	color: #101828;
	font-size: 12.5px;
	outline: none;
}

.transactionlist-search input:focus,
.transactionlist-field input:focus,
.transactionlist-field select:focus {
	border-color: #84adff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.transactionlist-filter-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.transactionlist-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 10.5px;
	font-weight: 700;
	color: #475467;
}

.transactionlist-field input,
.transactionlist-field select {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: #101828;
	font-size: 11.5px;
	outline: none;
}

.transactionlist-filter-actions {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.transactionlist-primary-button,
.transactionlist-secondary-button {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 13px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.transactionlist-primary-button {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.transactionlist-primary-button:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.transactionlist-primary-button svg {
	width: 16px;
	height: 16px;
}

.transactionlist-secondary-button {
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #344054;
}

.transactionlist-secondary-button:hover {
	background: #f9fafb;
}

.transactionlist-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 17px 19px 14px;
	border-bottom: 1px solid var(--border);
}

.transactionlist-panel-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.transactionlist-panel-header p {
	margin: 4px 0 0;
	font-size: 10.5px;
	color: #98a2b3;
}

.transactionlist-table-wrap {
	overflow-x: auto;
	position: relative;
}

.transactionlist-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 1450px;
}

.transactionlist-table th {
	height: 42px;
	padding: 0 14px;
	background: #f9fafb;
	border-bottom: 1px solid var(--border);
	color: #667085;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

.transactionlist-table td {
	height: 60px;
	padding: 0 14px;
	background: #fff;
	border-bottom: 1px solid #eef1f4;
	color: #475467;
	font-size: 11.5px;
	white-space: nowrap;
	vertical-align: middle;
}

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

.transactionlist-table tbody tr:hover td {
	background: #fcfcfd;
}

.transactionlist-name {
	font-weight: 700;
	color: #101828;
	max-width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.transactionlist-money {
	font-weight: 700;
	color: #101828;
}

.transactionlist-status,
.transactionlist-discrepancy {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
}

.transactionlist-status-open {
	background: #eff8ff;
	color: #175cd3;
}

.transactionlist-status-complete {
	background: #ecfdf3;
	color: #027a48;
}

.transactionlist-status-cancelled {
	background: #f2f4f7;
	color: #667085;
}

.transactionlist-discrepancy-yes {
	background: #fef3f2;
	color: #b42318;
}

.transactionlist-discrepancy-no {
	background: #ecfdf3;
	color: #027a48;
}

.transactionlist-muted {
	color: #98a2b3;
}

.transactionlist-actions-column {
	position: sticky;
	right: 0;
	z-index: 2;
	min-width: 154px;
	background: #fff;
	box-shadow: -10px 0 18px -18px rgba(16, 24, 40, 0.55);
}

.transactionlist-table thead .transactionlist-actions-column {
	z-index: 4;
	background: #f9fafb;
	text-align: right;
}

.transactionlist-table tbody tr:hover .transactionlist-actions-column {
	background: #fcfcfd;
}

.transactionlist-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
}

.transactionlist-inline-form {
	margin: 0;
	display: inline-flex;
}

.transactionlist-action-button {
	width: 32px;
	height: 32px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #667085;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.transactionlist-action-button:hover {
	background: #f9fafb;
	border-color: var(--border);
	color: #101828;
}

.transactionlist-action-button.danger:hover {
	background: #fef3f2;
	border-color: #fecdca;
	color: #b42318;
}

.transactionlist-action-button svg {
	width: 15px;
	height: 15px;
}

.transactionlist-empty {
	padding: 58px 20px;
	text-align: center;
}

.transactionlist-empty-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 13px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: #f2f4f7;
	color: #667085;
}

.transactionlist-empty-icon svg {
	width: 20px;
	height: 20px;
}

.transactionlist-empty h3 {
	margin: 0 0 6px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.transactionlist-empty p {
	margin: 0 0 17px;
	color: #667085;
	font-size: 11.5px;
}

/* Change log modal */

body.transactionlist-modal-open {
	overflow: hidden;
}

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

.transactionlist-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 24px;
}

.transactionlist-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.42);
	backdrop-filter: blur(2px);
}

.transactionlist-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: min(760px, calc(100vh - 48px));
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(208, 213, 221, 0.9);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(16, 24, 40, 0.20);
	overflow: hidden;
}

.transactionlist-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px 17px;
	border-bottom: 1px solid var(--border);
}

.transactionlist-modal-eyebrow {
	margin-bottom: 5px;
	color: #2563eb;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.transactionlist-modal-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	color: #101828;
	font-size: 18px;
	font-weight: 800;
}

.transactionlist-modal-header p {
	margin: 5px 0 0;
	color: #667085;
	font-size: 11.5px;
}

.transactionlist-modal-close {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: #667085;
	cursor: pointer;
}

.transactionlist-modal-close:hover {
	background: #f9fafb;
	border-color: var(--border);
	color: #101828;
}

.transactionlist-modal-close svg {
	width: 17px;
	height: 17px;
}

.transactionlist-modal-body {
	padding: 18px 22px 22px;
	overflow-y: auto;
}

.transactionlist-history-list {
	display: grid;
	gap: 12px;
}

.transactionlist-history-entry {
	padding: 15px 16px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #fff;
}

.transactionlist-history-entry-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 12px;
}

.transactionlist-history-entry-header > strong {
	color: #101828;
	font-size: 12px;
	font-weight: 750;
}

.transactionlist-history-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	color: #98a2b3;
	font-size: 10px;
	white-space: nowrap;
}

.transactionlist-history-meta-separator {
	color: #d0d5dd;
}

.transactionlist-history-values {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
	align-items: stretch;
	gap: 8px;
}

.transactionlist-history-value {
	min-width: 0;
	padding: 10px 11px;
	border-radius: 9px;
	background: #f9fafb;
}

.transactionlist-history-value span {
	display: block;
	margin-bottom: 4px;
	color: #98a2b3;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.transactionlist-history-value strong {
	display: block;
	color: #344054;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
}

.transactionlist-history-arrow {
	display: grid;
	place-items: center;
	color: #98a2b3;
	font-size: 14px;
}

.transactionlist-history-empty {
	padding: 46px 20px;
	text-align: center;
}

.transactionlist-history-empty-icon {
	width: 42px;
	height: 42px;
	margin: 0 auto 12px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #f2f4f7;
	color: #667085;
}

.transactionlist-history-empty-icon svg {
	width: 19px;
	height: 19px;
}

.transactionlist-history-empty h3 {
	margin: 0 0 5px;
	color: #101828;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 800;
}

.transactionlist-history-empty p {
	margin: 0;
	color: #667085;
	font-size: 11px;
}

@media (max-width: 1250px) {
	.transactionlist-filter-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.transactionlist-filter-grid {
		grid-template-columns: 1fr;
	}

	.transactionlist-search {
		max-width: none;
	}

	.transactionlist-filter-actions {
		flex-direction: column-reverse;
	}

	.transactionlist-primary-button,
	.transactionlist-secondary-button {
		width: 100%;
	}

	.transactionlist-actions-column {
		min-width: 146px;
	}

	.transactionlist-modal {
		padding: 12px;
	}

	.transactionlist-modal-dialog {
		max-height: calc(100vh - 24px);
	}

	.transactionlist-modal-header,
	.transactionlist-modal-body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.transactionlist-history-entry-header {
		display: block;
	}

	.transactionlist-history-meta {
		justify-content: flex-start;
		margin-top: 5px;
		white-space: normal;
	}

	.transactionlist-history-values {
		grid-template-columns: 1fr;
	}

	.transactionlist-history-arrow {
		transform: rotate(90deg);
	}
}
/* ==========================================================
   Compensation Profiles
   Append to the application's stylesheet.
   ========================================================== */

.compensationprofile-page,
.compensationprofile-form-page {
	display: grid;
	gap: 20px;
}

.compensationprofile-panel,
.compensationprofile-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.compensationprofile-panel-header,
.compensationprofile-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px 15px;
	border-bottom: 1px solid var(--border);
}

.compensationprofile-panel-header h2,
.compensationprofile-card-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.compensationprofile-panel-header p,
.compensationprofile-card-header p {
	margin: 4px 0 0;
	font-size: 10.5px;
	color: #98a2b3;
}

.compensationprofile-card-body {
	padding: 20px;
}

.compensationprofile-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}

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

.compensationprofile-form-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 10.5px;
	font-weight: 700;
	color: #475467;
}

.compensationprofile-form-field input,
.compensationprofile-form-field select,
.compensationprofile-form-field textarea {
	width: 100%;
	border: 1px solid #d0d5dd;
	border-radius: 9px;
	background: #fff;
	color: #101828;
	font: inherit;
	font-size: 12px;
	outline: none;
}

.compensationprofile-form-field input,
.compensationprofile-form-field select {
	height: 40px;
	padding: 0 11px;
}

.compensationprofile-form-field textarea {
	min-height: 84px;
	padding: 10px 11px;
	resize: vertical;
}

.compensationprofile-form-field input:focus,
.compensationprofile-form-field select:focus,
.compensationprofile-form-field textarea:focus {
	border-color: #84adff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.compensationprofile-active-field {
	display: flex;
	align-items: flex-end;
	padding-bottom: 2px;
}

.compensationprofile-switch {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	cursor: pointer;
}

.compensationprofile-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.compensationprofile-switch-control {
	position: relative;
	width: 38px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: #d0d5dd;
	transition: 0.18s ease;
}

.compensationprofile-switch-control::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18);
	transition: 0.18s ease;
}

.compensationprofile-switch input:checked + .compensationprofile-switch-control {
	background: #2563eb;
}

.compensationprofile-switch input:checked + .compensationprofile-switch-control::after {
	transform: translateX(16px);
}

.compensationprofile-switch strong {
	display: block;
	color: #344054;
	font-size: 11.5px;
}

.compensationprofile-switch small {
	display: block;
	margin-top: 2px;
	color: #98a2b3;
	font-size: 9.5px;
	font-weight: 500;
}

.compensationprofile-adjustment-table-wrap,
.compensationprofile-table-wrap {
	overflow-x: auto;
}

.compensationprofile-adjustment-table,
.compensationprofile-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.compensationprofile-adjustment-table {
	min-width: 980px;
}

.compensationprofile-table {
	min-width: 1080px;
}

.compensationprofile-adjustment-table th,
.compensationprofile-table th {
	height: 42px;
	padding: 0 12px;
	background: #f9fafb;
	border-bottom: 1px solid var(--border);
	color: #667085;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

.compensationprofile-adjustment-table td,
.compensationprofile-table td {
	padding: 9px 12px;
	background: #fff;
	border-bottom: 1px solid #eef1f4;
	color: #475467;
	font-size: 11.5px;
	vertical-align: middle;
}

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

.compensationprofile-adjustment-table select,
.compensationprofile-adjustment-table input {
	width: 100%;
	height: 36px;
	padding: 0 9px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: #101828;
	font-size: 11px;
	outline: none;
}

.compensationprofile-add-adjustment-row {
	padding-top: 14px;
}

.compensationprofile-text-button {
	padding: 0;
	border: 0;
	background: transparent;
	color: #2563eb;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

.compensationprofile-remove-adjustment {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #98a2b3;
	font-size: 18px;
	cursor: pointer;
}

.compensationprofile-remove-adjustment:hover {
	background: #fef3f2;
	color: #b42318;
}

.compensationprofile-primary-button,
.compensationprofile-secondary-button {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 13px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.compensationprofile-primary-button {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.compensationprofile-primary-button:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.compensationprofile-primary-button svg {
	width: 16px;
	height: 16px;
}

.compensationprofile-secondary-button {
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #344054;
}

.compensationprofile-secondary-button:hover {
	background: #f9fafb;
}

.compensationprofile-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
}

.compensationprofile-name {
	display: block;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #101828;
	font-weight: 700;
	white-space: nowrap;
}

.compensationprofile-description {
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.compensationprofile-status {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
}

.compensationprofile-status.active {
	background: #ecfdf3;
	color: #027a48;
}

.compensationprofile-status.inactive {
	background: #f2f4f7;
	color: #667085;
}

.compensationprofile-actions-column {
	position: sticky;
	right: 0;
	z-index: 2;
	min-width: 122px;
	background: #fff;
	box-shadow: -10px 0 18px -18px rgba(16, 24, 40, 0.55);
}

.compensationprofile-table thead .compensationprofile-actions-column {
	z-index: 4;
	background: #f9fafb;
	text-align: right;
}

.compensationprofile-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
}

.compensationprofile-inline-form {
	display: inline-flex;
	margin: 0;
}

.compensationprofile-action-button {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #667085;
	cursor: pointer;
}

.compensationprofile-action-button:hover {
	background: #f9fafb;
	border-color: var(--border);
	color: #101828;
}

.compensationprofile-action-button.danger:hover {
	background: #fef3f2;
	border-color: #fecdca;
	color: #b42318;
}

.compensationprofile-action-button svg {
	width: 15px;
	height: 15px;
}

.compensationprofile-empty {
	padding: 58px 20px;
	text-align: center;
}

.compensationprofile-empty-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 13px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: #f2f4f7;
	color: #667085;
}

.compensationprofile-empty-icon svg {
	width: 20px;
	height: 20px;
}

.compensationprofile-empty h3 {
	margin: 0 0 6px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.compensationprofile-empty p {
	margin: 0 0 17px;
	color: #667085;
	font-size: 11.5px;
}

/* Transaction: save populated compensation fields as a profile */

.transaction-profile-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

body.transaction-profile-modal-open {
	overflow: hidden;
}

.transaction-profile-modal[hidden] {
	display: none;
}

.transaction-profile-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 24px;
}

.transaction-profile-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.42);
	backdrop-filter: blur(2px);
}

.transaction-profile-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	background: #fff;
	border: 1px solid rgba(208, 213, 221, 0.9);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(16, 24, 40, 0.20);
	overflow: hidden;
}

.transaction-profile-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 22px 17px;
	border-bottom: 1px solid var(--border);
}

.transaction-profile-modal-eyebrow {
	margin-bottom: 5px;
	color: #2563eb;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.transaction-profile-modal-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 17px;
	font-weight: 800;
	color: #101828;
}

.transaction-profile-modal-header p {
	max-width: 450px;
	margin: 5px 0 0;
	color: #667085;
	font-size: 10.5px;
	line-height: 1.5;
}

.transaction-profile-modal-close {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #667085;
	font-size: 20px;
	cursor: pointer;
}

.transaction-profile-modal-close:hover {
	background: #f9fafb;
	border-color: var(--border);
	color: #101828;
}

.transaction-profile-modal-body {
	display: grid;
	gap: 15px;
	padding: 20px 22px;
}

.transaction-profile-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	padding: 16px 22px 20px;
	border-top: 1px solid var(--border);
	background: #fcfcfd;
}

@media (max-width: 760px) {
	.compensationprofile-form-grid {
		grid-template-columns: 1fr;
	}

	.compensationprofile-form-field.full {
		grid-column: auto;
	}

	.compensationprofile-form-actions {
		flex-direction: column-reverse;
	}

	.compensationprofile-primary-button,
	.compensationprofile-secondary-button {
		width: 100%;
	}

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

	.transaction-profile-modal {
		padding: 12px;
	}

	.transaction-profile-modal-actions {
		flex-direction: column-reverse;
	}
}
/* ==========================================================
   Transaction responsive fixes
   Append after the existing transaction styles.
   ========================================================== */

/*
 * Allow the main transaction column to shrink below the intrinsic
 * width of descendants such as the adjustments table.
 */
.transaction-page > div,
.transaction-card,
.transaction-card-body,
.profile-loader,
.profile-loader .transaction-form-field,
.transaction-profile-actions,
.adjustment-table-wrap {
	min-width: 0;
}

.transaction-card,
.transaction-card-body,
.adjustment-table-wrap {
	max-width: 100%;
}

/*
 * The adjustments table remains horizontally scrollable without
 * forcing the entire page wider than the viewport.
 */
.adjustment-table-wrap {
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

/*
 * Profile loader: keep both sides shrinkable on desktop.
 */
.profile-loader .transaction-form-field {
	flex: 1 1 320px;
}

.transaction-profile-actions {
	flex: 0 1 auto;
}

.transaction-profile-actions .transaction-text-button {
	max-width: 100%;
	white-space: normal;
	text-align: right;
	line-height: 1.35;
}

/*
 * Once the application sidebar collapses, give the transaction form
 * a single-column layout sooner rather than waiting until 700px.
 */
@media (max-width: 960px) {
	.transaction-form-grid,
	.transaction-form-grid.three {
		grid-template-columns: 1fr;
	}

	.transaction-form-field.full {
		grid-column: auto;
	}

	.profile-loader {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.profile-loader .transaction-form-field {
		flex: 1 1 auto;
	}

	.transaction-profile-actions {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.transaction-profile-actions .transaction-text-button {
		width: auto;
		justify-content: flex-start;
		text-align: left;
		padding-left: 0;
		padding-right: 0;
	}

	.transaction-sidebar {
		position: static;
	}

	.form-actions {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	.content {
		padding-left: 12px;
		padding-right: 12px;
	}

	.transaction-card {
		border-radius: 12px;
	}

	.transaction-card-header,
	.transaction-card-body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.profile-loader .field-help {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.transaction-form-field input,
	.transaction-form-field select,
	.transaction-form-field textarea {
		min-width: 0;
		max-width: 100%;
	}

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

	.form-actions .transaction-primary-button,
	.form-actions .transaction-secondary-button {
		width: 100%;
	}

	.summary-main {
		font-size: 24px;
	}
}
/* ==========================================================
   Caps / Thresholds
   Append after the existing application styles.
   ========================================================== */

.capthreshold-page,
.capthreshold-form-page {
	display: grid;
	gap: 20px;
}

.capthreshold-panel,
.capthreshold-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.capthreshold-panel-header,
.capthreshold-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px 15px;
	border-bottom: 1px solid var(--border);
}

.capthreshold-panel-header h2,
.capthreshold-card-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.capthreshold-panel-header p,
.capthreshold-card-header p {
	margin: 4px 0 0;
	font-size: 10.5px;
	color: #98a2b3;
}

.capthreshold-card-body {
	padding: 20px;
}

.capthreshold-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.capthreshold-form-field {
	min-width: 0;
}

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

.capthreshold-form-field > label {
	display: block;
	margin-bottom: 6px;
	font-size: 10.5px;
	font-weight: 700;
	color: #475467;
}

.capthreshold-form-field input {
	width: 100%;
	height: 40px;
	padding: 0 11px;
	border: 1px solid #d0d5dd;
	border-radius: 9px;
	background: #fff;
	color: #101828;
	font: inherit;
	font-size: 12px;
	outline: none;
}

.capthreshold-form-field input:focus {
	border-color: #84adff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.capthreshold-active-field {
	display: flex;
	align-items: center;
	padding-top: 18px;
}

.capthreshold-switch {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	cursor: pointer;
}

.capthreshold-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.capthreshold-switch-control {
	position: relative;
	width: 38px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: #d0d5dd;
	transition: 0.18s ease;
}

.capthreshold-switch-control::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18);
	transition: 0.18s ease;
}

.capthreshold-switch input:checked + .capthreshold-switch-control {
	background: #2563eb;
}

.capthreshold-switch input:checked + .capthreshold-switch-control::after {
	transform: translateX(16px);
}

.capthreshold-switch strong {
	display: block;
	color: #344054;
	font-size: 11.5px;
}

.capthreshold-switch small {
	display: block;
	margin-top: 2px;
	color: #98a2b3;
	font-size: 9.5px;
	font-weight: 500;
}

.capthreshold-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
}

.capthreshold-primary-button,
.capthreshold-secondary-button {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 13px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.capthreshold-primary-button {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.capthreshold-primary-button:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.capthreshold-primary-button svg {
	width: 16px;
	height: 16px;
}

.capthreshold-secondary-button {
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #344054;
}

.capthreshold-secondary-button:hover {
	background: #f9fafb;
}

.capthreshold-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.capthreshold-table {
	width: 100%;
	min-width: 760px;
	border-collapse: separate;
	border-spacing: 0;
}

.capthreshold-table th {
	height: 42px;
	padding: 0 14px;
	background: #f9fafb;
	border-bottom: 1px solid var(--border);
	color: #667085;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.capthreshold-table td {
	height: 58px;
	padding: 0 14px;
	background: #fff;
	border-bottom: 1px solid #eef1f4;
	color: #475467;
	font-size: 11.5px;
	white-space: nowrap;
	vertical-align: middle;
}

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

.capthreshold-table tbody tr:hover td {
	background: #fcfcfd;
}

.capthreshold-name,
.capthreshold-money {
	color: #101828;
	font-weight: 700;
}

.capthreshold-status {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
}

.capthreshold-status.active {
	background: #ecfdf3;
	color: #027a48;
}

.capthreshold-status.inactive {
	background: #f2f4f7;
	color: #667085;
}

.capthreshold-actions-column {
	position: sticky;
	right: 0;
	z-index: 2;
	min-width: 92px;
	background: #fff;
	box-shadow: -10px 0 18px -18px rgba(16, 24, 40, 0.55);
}

.capthreshold-table thead .capthreshold-actions-column {
	z-index: 4;
	background: #f9fafb;
	text-align: right;
}

.capthreshold-table tbody tr:hover .capthreshold-actions-column {
	background: #fcfcfd;
}

.capthreshold-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
}

.capthreshold-inline-form {
	display: inline-flex;
	margin: 0;
}

.capthreshold-action-button {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #667085;
	cursor: pointer;
}

.capthreshold-action-button:hover {
	background: #f9fafb;
	border-color: var(--border);
	color: #101828;
}

.capthreshold-action-button.danger:hover {
	background: #fef3f2;
	border-color: #fecdca;
	color: #b42318;
}

.capthreshold-action-button svg {
	width: 15px;
	height: 15px;
}

.capthreshold-empty {
	padding: 58px 20px;
	text-align: center;
}

.capthreshold-empty-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 13px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #f2f4f7;
	color: #667085;
}

.capthreshold-empty-icon svg {
	width: 20px;
	height: 20px;
}

.capthreshold-empty h3 {
	margin: 0 0 6px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.capthreshold-empty p {
	margin: 0 0 17px;
	color: #667085;
	font-size: 11.5px;
}

@media (max-width: 760px) {
	.capthreshold-card-header,
	.capthreshold-card-body {
		padding-left: 16px;
		padding-right: 16px;
	}

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

	.capthreshold-form-field.full {
		grid-column: auto;
	}

	.capthreshold-active-field {
		padding-top: 0;
	}

	.capthreshold-form-actions {
		flex-direction: column-reverse;
	}

	.capthreshold-primary-button,
	.capthreshold-secondary-button {
		width: 100%;
	}
}
.threshold-position {
	padding: 14px 15px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-muted);
}

.threshold-position-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 5px 0;
	font-size: 12px;
}

.threshold-position-row span {
	color: var(--text-muted);
}

.threshold-position-row strong {
	color: #101828;
	font-weight: 700;
}

.threshold-position .field-help {
	margin-top: 8px;
	padding-top: 9px;
	border-top: 1px solid var(--border);
}

.transaction-threshold-warning {
	margin-top: 16px;
	padding: 13px 15px;
	border: 1px solid #fedf89;
	border-radius: 10px;
	background: #fffaeb;
	color: #93370d;
}

.transaction-threshold-warning strong {
	display: block;
	margin-bottom: 4px;
	font-size: 12.5px;
}

.transaction-threshold-warning p {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.55;
}

/* ==========================================================
   Dashboard
   ========================================================== */

.dashboard-page {
	display: grid;
	gap: 20px;
}

.dashboard-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	flex-wrap: wrap;
}

.dashboard-primary-button,
.dashboard-secondary-button {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 13px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.dashboard-primary-button {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.dashboard-primary-button:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.dashboard-secondary-button {
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #344054;
}

.dashboard-secondary-button:hover {
	background: #f9fafb;
}

.dashboard-primary-button svg,
.dashboard-secondary-button svg {
	width: 16px;
	height: 16px;
}

.dashboard-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.dashboard-metric {
	min-width: 0;
	padding: 17px 18px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
}

.dashboard-metric-label {
	margin-bottom: 8px;
	color: #667085;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.dashboard-metric-value {
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: #101828;
	overflow-wrap: anywhere;
}

.dashboard-metric-note {
	margin-top: 5px;
	color: #98a2b3;
	font-size: 10.5px;
	line-height: 1.45;
}

.dashboard-counts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.dashboard-count-card {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 17px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
}

.dashboard-count-icon {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #eff6ff;
	color: #2563eb;
}

.dashboard-count-icon.warning {
	background: #fffaeb;
	color: #b54708;
}

.dashboard-count-icon.danger {
	background: #fef3f2;
	color: #b42318;
}

.dashboard-count-icon svg {
	width: 18px;
	height: 18px;
}

.dashboard-count-value {
	font-family: "Manrope", sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: #101828;
}

.dashboard-count-label {
	margin-top: 2px;
	color: #667085;
	font-size: 10.5px;
}

.dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
	gap: 20px;
	align-items: start;
}

.dashboard-panel {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.dashboard-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 19px 14px;
	border-bottom: 1px solid var(--border);
}

.dashboard-panel-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.dashboard-panel-header p {
	margin: 4px 0 0;
	color: #98a2b3;
	font-size: 10.5px;
	line-height: 1.45;
}

.dashboard-panel-link {
	flex: 0 0 auto;
	color: #2563eb;
	font-size: 11px;
	font-weight: 700;
}

.dashboard-panel-link:hover {
	text-decoration: underline;
}

.contact-form {
	padding: 20px;
	max-width: 480px;
}

.contact-form-field {
	margin-bottom: 18px;
}

.contact-form-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 10.5px;
	font-weight: 700;
	color: #475467;
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
	width: 100%;
	border: 1px solid #d0d5dd;
	border-radius: 9px;
	background: #fff;
	color: #101828;
	font: inherit;
	font-size: 12px;
	outline: none;
}

.contact-form-field input,
.contact-form-field select {
	height: 40px;
	padding: 0 11px;
}

.contact-form-field textarea {
	min-height: 140px;
	padding: 10px 11px;
	resize: vertical;
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
	border-color: #84adff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
}

.contact-form-actions {
	margin-top: 4px;
}

.dashboard-table-wrap {
	overflow-x: auto;
}

.dashboard-table {
	width: 100%;
	min-width: 720px;
	border-collapse: separate;
	border-spacing: 0;
}

.dashboard-table th {
	height: 40px;
	padding: 0 14px;
	background: #f9fafb;
	border-bottom: 1px solid var(--border);
	color: #667085;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

.dashboard-table td {
	height: 56px;
	padding: 0 14px;
	border-bottom: 1px solid #eef1f4;
	color: #475467;
	font-size: 11.5px;
	white-space: nowrap;
}

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

.dashboard-table tbody tr:hover td {
	background: #fcfcfd;
}

.dashboard-transaction-name {
	display: block;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #101828;
	font-weight: 700;
}

.dashboard-money {
	color: #101828;
	font-weight: 700;
}

.dashboard-status {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
}

.dashboard-status-open {
	background: #eff8ff;
	color: #175cd3;
}

.dashboard-status-complete {
	background: #ecfdf3;
	color: #027a48;
}

.dashboard-empty {
	padding: 44px 20px;
	text-align: center;
	color: #667085;
	font-size: 11.5px;
}

.dashboard-threshold-list {
	display: grid;
	gap: 0;
}

.dashboard-threshold {
	padding: 17px 19px;
	border-bottom: 1px solid #eef1f4;
}

.dashboard-threshold:last-child {
	border-bottom: 0;
}

.dashboard-threshold-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}

.dashboard-threshold-name {
	color: #101828;
	font-size: 12px;
	font-weight: 700;
}

.dashboard-threshold-state {
	display: inline-flex;
	align-items: center;
	height: 23px;
	padding: 0 8px;
	border-radius: 999px;
	background: #f2f4f7;
	color: #667085;
	font-size: 9.5px;
	font-weight: 700;
}

.dashboard-threshold-state.reached {
	background: #fffaeb;
	color: #b54708;
}

.dashboard-threshold-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 14px;
	margin-bottom: 12px;
}

.dashboard-threshold-value span {
	display: block;
	margin-bottom: 3px;
	color: #98a2b3;
	font-size: 9.5px;
}

.dashboard-threshold-value strong {
	display: block;
	color: #344054;
	font-size: 11.5px;
	font-weight: 700;
}

.dashboard-progress {
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: #eef2f6;
}

.dashboard-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: #2563eb;
}

.dashboard-threshold-note {
	margin-top: 8px;
	color: #98a2b3;
	font-size: 9.5px;
	line-height: 1.45;
}

.dashboard-quick-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	padding: 17px 19px 19px;
}

.dashboard-quick-action {
	min-height: 70px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	padding: 12px 13px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: #fff;
	color: #344054;
}

.dashboard-quick-action:hover {
	background: #f9fafb;
	border-color: #d0d5dd;
}

.dashboard-quick-action strong {
	font-size: 11.5px;
	color: #101828;
}

.dashboard-quick-action span {
	font-size: 9.5px;
	line-height: 1.35;
	color: #98a2b3;
}

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

	.dashboard-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.dashboard-metrics,
	.dashboard-counts,
	.dashboard-quick-actions {
		grid-template-columns: 1fr;
	}

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

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

	.dashboard-threshold-values {
		grid-template-columns: 1fr;
	}
}

.dashboard-suggestion-banner {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
}

.dashboard-suggestion-banner span {
	font-size: 12.5px;
	font-weight: 600;
	color: #1e3a8a;
}

.dashboard-suggestion-link {
	flex-shrink: 0;
	font-size: 12.5px;
	font-weight: 700;
	color: #2563eb;
}

.dashboard-suggestion-link:hover {
	text-decoration: underline;
}

@media (max-width: 700px) {
	.dashboard-suggestion-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================
   Profile & Settings
   ========================================================== */

.accountprofile-page {
	display: grid;
	gap: 20px;
}

.accountprofile-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 20px;
	align-items: start;
}

.accountprofile-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.accountprofile-card-header {
	padding: 18px 20px 15px;
	border-bottom: 1px solid var(--border);
}

.accountprofile-card-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.accountprofile-card-header p {
	margin: 4px 0 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: #98a2b3;
}

.accountprofile-form {
	padding: 20px;
}

.accountprofile-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 17px 18px;
}

.accountprofile-field {
	min-width: 0;
}

.accountprofile-field.full {
	grid-column: 1 / -1;
}

.accountprofile-field label {
	display: block;
	margin-bottom: 7px;
	color: #344054;
	font-size: 11.5px;
	font-weight: 650;
}

.accountprofile-field input {
	width: 100%;
	height: 42px;
	padding: 0 11px;
	border: 1px solid #d0d5dd;
	border-radius: 9px;
	background: #fff;
	color: #101828;
	font-size: 12.5px;
	outline: none;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.accountprofile-field input:focus {
	border-color: #84adff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.accountprofile-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
}

.accountprofile-primary-button,
.accountprofile-secondary-button {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.accountprofile-primary-button {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.accountprofile-primary-button:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.accountprofile-secondary-button {
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #344054;
}

.accountprofile-secondary-button:hover {
	background: #f9fafb;
}

.accountprofile-side {
	display: grid;
	gap: 20px;
}

.accountprofile-action-list {
	padding: 8px;
}

.accountprofile-action-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 66px;
	padding: 12px 13px;
	border-radius: 10px;
}

.accountprofile-action-row:hover {
	background: #f9fafb;
}

.accountprofile-action-row strong {
	display: block;
	margin-bottom: 4px;
	color: #101828;
	font-size: 11.5px;
	font-weight: 700;
}

.accountprofile-action-row span:not(.accountprofile-action-arrow) {
	display: block;
	color: #98a2b3;
	font-size: 9.5px;
	line-height: 1.4;
}

.accountprofile-action-arrow {
	flex: 0 0 auto;
	color: #98a2b3;
	font-size: 16px;
}

.accountprofile-note {
	padding: 17px 20px 20px;
	color: #667085;
	font-size: 10.5px;
	line-height: 1.55;
}

@media (max-width: 1080px) {
	.accountprofile-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.accountprofile-form-grid {
		grid-template-columns: 1fr;
	}

	.accountprofile-field.full {
		grid-column: auto;
	}

	.accountprofile-form-actions {
		flex-direction: column-reverse;
	}

	.accountprofile-primary-button,
	.accountprofile-secondary-button {
		width: 100%;
	}
}

.accountprofile-password-wrap {
	max-width: 720px;
}

.accountprofile-password-grid {
	grid-template-columns: 1fr;
}

/* ==========================================================
   Administration
   ========================================================== */

.admin-page {
	display: grid;
	gap: 20px;
}

.admin-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.admin-summary-card,
.admin-panel {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
}

.admin-summary-card {
	padding: 18px 20px;
}

.admin-summary-card span {
	display: block;
	margin-bottom: 7px;
	color: #667085;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.admin-summary-card strong {
	display: block;
	color: #101828;
	font-family: "Manrope", sans-serif;
	font-size: 26px;
	font-weight: 800;
}

.admin-panel {
	overflow: hidden;
}

.admin-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px 15px;
	border-bottom: 1px solid var(--border);
}

.admin-panel-header h2 {
	margin: 0;
	color: #101828;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
}

.admin-panel-header p {
	margin: 4px 0 0;
	color: #98a2b3;
	font-size: 10.5px;
}

.admin-panel-body {
	padding: 20px;
}

.admin-table-wrap {
	overflow-x: auto;
}

.admin-table {
	width: 100%;
	min-width: 850px;
	border-collapse: collapse;
}

.admin-table th {
	height: 42px;
	padding: 0 14px;
	background: #f9fafb;
	border-bottom: 1px solid var(--border);
	color: #667085;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .045em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.admin-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #eef1f4;
	color: #475467;
	font-size: 11.5px;
	vertical-align: middle;
}

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

.admin-table tbody tr:hover td {
	background: #fcfcfd;
}

.admin-name {
	color: #101828;
	font-weight: 700;
}

.admin-muted {
	color: #98a2b3;
}

.admin-status {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
}

.admin-status.active {
	background: #ecfdf3;
	color: #027a48;
}

.admin-status.warning {
	background: #fffaeb;
	color: #b54708;
}

.admin-status.danger {
	background: #fef3f2;
	color: #b42318;
}

.admin-status.neutral {
	background: #f2f4f7;
	color: #667085;
}

.admin-toolbar,
.admin-form-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.admin-toolbar {
	align-items: end;
}

.admin-field label {
	display: block;
	margin-bottom: 6px;
	color: #475467;
	font-size: 10.5px;
	font-weight: 700;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
	width: 100%;
	border: 1px solid #d0d5dd;
	border-radius: 9px;
	background: #fff;
	color: #101828;
	font: inherit;
	font-size: 12px;
	outline: none;
}

.admin-field input,
.admin-field select {
	height: 40px;
	padding: 0 11px;
}

.admin-field textarea {
	min-height: 84px;
	padding: 10px 11px;
	resize: vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
	border-color: #84adff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
}

.admin-field.full {
	grid-column: 1 / -1;
}

.admin-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	color: #344054;
	font-size: 11.5px;
}

.admin-checkbox input {
	width: 16px;
	height: 16px;
	accent-color: #2563eb;
}

.admin-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	margin-top: 18px;
}

.admin-button {
	min-height: 39px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 13px;
	border-radius: 9px;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
}

.admin-button.primary {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.admin-button.primary:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.admin-button.secondary {
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #344054;
}

.admin-button.secondary:hover {
	background: #f9fafb;
}

.admin-button.danger {
	border: 1px solid #fecdca;
	background: #fff;
	color: #b42318;
}

.admin-button.danger:hover {
	background: #fef3f2;
}

.admin-inline-form {
	display: inline-flex;
	margin: 0;
}

.admin-link {
	color: #2563eb;
	font-weight: 700;
}

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

.admin-section-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.admin-code {
	max-width: 430px;
	color: #475467;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.admin-empty {
	padding: 42px 20px;
	color: #667085;
	font-size: 11.5px;
	text-align: center;
}

.admin-details-list {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 10px 18px;
	margin: 0;
}

.admin-details-list dt {
	color: #667085;
	font-size: 10.5px;
	font-weight: 700;
}

.admin-details-list dd {
	margin: 0;
	color: #344054;
	font-size: 11.5px;
	overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
	.admin-summary-grid,
	.admin-toolbar,
	.admin-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.admin-summary-grid,
	.admin-toolbar,
	.admin-form-grid,
	.admin-section-grid {
		grid-template-columns: 1fr;
	}

	.admin-field.full {
		grid-column: auto;
	}

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

	.admin-button {
		width: 100%;
	}

	.admin-panel-header {
		align-items: flex-start;
		flex-direction: column;
	}
}


/* ==========================================================
   Password reset
   ========================================================== */

.reset-page {
	max-width: 520px;
	margin: 44px auto;
}

.reset-card {
	padding: 26px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
}

.reset-card h1 {
	margin: 0 0 8px;
	color: #101828;
	font-family: "Manrope", sans-serif;
	font-size: 22px;
	font-weight: 800;
}

.reset-card p {
	margin: 0 0 20px;
	color: #667085;
	font-size: 12px;
	line-height: 1.55;
}
/* ==========================================================
   Subscription & Billing
   Append to agentsplitter.css
   ========================================================== */

.subscription-page {
	display: grid;
	gap: 20px;
}

.subscription-summary-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 20px;
}

.subscription-card-panel {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.subscription-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px 15px;
	border-bottom: 1px solid var(--border);
}

.subscription-card-header h2 {
	margin: 0;
	color: #101828;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
}

.subscription-card-header p,
.subscription-copy,
.subscription-plan p,
.subscription-note,
.subscription-empty-state p {
	margin: 4px 0 0;
	color: #667085;
	font-size: 11px;
	line-height: 1.6;
}

.subscription-card-body {
	padding: 20px;
}

.subscription-status {
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
	background: #f2f4f7;
	color: #475467;
}

.subscription-status.active {
	background: #ecfdf3;
	color: #027a48;
}

.subscription-status.trialing {
	background: #eff8ff;
	color: #175cd3;
}

.subscription-status.grace {
	background: #fffaeb;
	color: #b54708;
}

.subscription-status.cancelled,
.subscription-status.locked,
.subscription-status.suspended {
	background: #fef3f2;
	color: #b42318;
}

.subscription-details-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--border);
}

.subscription-detail {
	padding: 16px 20px;
	background: #fff;
}

.subscription-detail span {
	display: block;
	margin-bottom: 5px;
	color: #98a2b3;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.subscription-detail strong {
	display: block;
	color: #344054;
	font-size: 11.5px;
	font-weight: 700;
}

.subscription-action-list {
	display: grid;
	gap: 10px;
	padding: 20px;
}

.subscription-action-list form,
.subscription-action-list button {
	width: 100%;
}

.subscription-primary-button,
.subscription-secondary-button,
.subscription-danger-button,
.subscription-table-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 750;
	text-decoration: none;
	cursor: pointer;
}

.subscription-primary-button {
	width: 100%;
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.subscription-secondary-button {
	border: 1px solid var(--border);
	background: #fff;
	color: #344054;
}

.subscription-danger-button {
	border: 1px solid #fecdca;
	background: #fff;
	color: #b42318;
}

.subscription-table-button {
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--border);
	background: #fff;
	color: #344054;
}

.subscription-plan-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding: 20px;
}

.subscription-plan {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: #fff;
}

.subscription-plan.featured {
	border-color: #b2ccff;
	background: #f8faff;
}

.subscription-plan-label {
	display: block;
	margin-bottom: 8px;
	color: #475467;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.subscription-plan-price {
	color: #101828;
	font-family: "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.subscription-plan-price small {
	color: #667085;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
}

.subscription-note {
	padding: 0 20px 20px;
}

.subscription-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 15px;
	border: 1px solid;
	border-radius: 11px;
	font-size: 11px;
	line-height: 1.5;
}

.subscription-alert strong {
	white-space: nowrap;
}

.subscription-alert.warning {
	background: #fffaeb;
	border-color: #fedf89;
	color: #93370d;
}

.subscription-alert.danger {
	background: #fef3f2;
	border-color: #fecdca;
	color: #912018;
}

.subscription-alert.neutral {
	background: #f9fafb;
	border-color: #eaecf0;
	color: #475467;
}

.subscription-table-wrap {
	overflow-x: auto;
}

.subscription-table {
	width: 100%;
	border-collapse: collapse;
}

.subscription-table th,
.subscription-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	font-size: 10.5px;
	white-space: nowrap;
}

.subscription-table th {
	background: #f9fafb;
	color: #667085;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.subscription-table td {
	color: #344054;
}

.subscription-empty-state {
	padding: 44px 20px;
	text-align: center;
}

.subscription-empty-state strong {
	color: #101828;
	font-size: 12px;
}

@media (max-width: 900px) {
	.subscription-summary-grid,
	.subscription-plan-grid,
	.subscription-details-grid {
		grid-template-columns: 1fr;
	}

	.subscription-alert {
		display: block;
	}

	.subscription-alert strong {
		display: block;
		margin-bottom: 4px;
	}
}

/* ==========================================================
   Field information popups
   ========================================================== */

.field-info {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border: 1px solid #98a2b3;
	border-radius: 50%;
	color: #667085;
	font-size: 10px;
	font-weight: 800;
	font-style: normal;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: help;
	outline: none;
}

.field-info:hover,
.field-info:focus {
	border-color: #667085;
	color: #344054;
}

.field-info::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	z-index: 1200;
	width: max-content;
	max-width: 290px;
	padding: 9px 11px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #101828;
	color: #fff;
	box-shadow: 0 8px 22px rgba(16, 24, 40, 0.18);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	text-transform: none;
	letter-spacing: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.field-info:hover::after,
.field-info:focus::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

@media (max-width: 760px) {
	.field-info::after {
		left: 0;
		max-width: min(260px, calc(100vw - 48px));
		transform: translate(0, 4px);
	}

	.field-info:hover::after,
	.field-info:focus::after {
		transform: translate(0, 0);
	}
}

/* ==========================================================
   Public legal pages
   ========================================================== */

.legal-body {
	min-height: 100vh;
	margin: 0;
	background: #f8fafc;
	color: #172033;
	font-family: "Inter", sans-serif;
}

.legal-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 68px;
	padding: 0 max(24px, calc((100vw - 1040px) / 2));
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid #e4e7ec;
	backdrop-filter: blur(10px);
}

.legal-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #101828;
}

.legal-brand-mark {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: linear-gradient(145deg, #60a5fa, #2563eb);
	color: #fff;
}

.legal-brand-mark svg {
	width: 18px;
	height: 18px;
}

.legal-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.legal-nav a {
	padding: 8px 10px;
	border-radius: 8px;
	color: #667085;
	font-size: 12px;
	font-weight: 650;
}

.legal-nav a:hover,
.legal-nav a.active {
	background: #f2f4f7;
	color: #101828;
}

.legal-shell {
	width: min(920px, calc(100% - 36px));
	margin: 42px auto 64px;
}

.legal-document {
	padding: 46px 54px 52px;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 18px;
	box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06);
}

.legal-title {
	padding-bottom: 28px;
	margin-bottom: 30px;
	border-bottom: 1px solid #e4e7ec;
}

.legal-eyebrow {
	margin: 0 0 8px !important;
	color: #2563eb !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.legal-title h1 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: clamp(30px, 5vw, 42px);
	font-weight: 800;
	letter-spacing: -0.045em;
	color: #101828;
}

.legal-title > p:last-child {
	margin: 8px 0 0;
	color: #98a2b3;
	font-size: 11px;
}

.legal-document section + section {
	margin-top: 30px;
}

.legal-document h2 {
	margin: 0 0 10px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: #101828;
}

.legal-document h3 {
	margin: 18px 0 7px;
	font-size: 12.5px;
	font-weight: 750;
	color: #344054;
}

.legal-document p {
	margin: 0;
	color: #475467;
	font-size: 12.5px;
	line-height: 1.75;
}

.legal-document p + p {
	margin-top: 10px;
}

.legal-document a {
	color: #2563eb;
	font-weight: 650;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.legal-footer {
	width: min(920px, calc(100% - 36px));
	margin: 0 auto 34px;
	display: flex;
	align-items: center;
	gap: 18px;
	color: #98a2b3;
	font-size: 10.5px;
}

.legal-footer a {
	color: #667085;
}

.legal-footer a:hover {
	color: #344054;
}

@media (max-width: 700px) {
	.legal-header {
		height: auto;
		min-height: 64px;
		padding: 12px 18px;
		align-items: flex-start;
	}

	.legal-nav {
		gap: 1px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.legal-nav a {
		padding: 7px 8px;
		font-size: 10.5px;
	}

	.legal-shell {
		margin-top: 22px;
	}

	.legal-document {
		padding: 30px 22px 36px;
		border-radius: 14px;
	}

	.legal-footer {
		align-items: flex-start;
		flex-wrap: wrap;
	}
}
.legal {
	font-size: 11px;
	color: #94a3b8;
		
}


/* ==========================================================
   Field information popup viewport fix
   Body-mounted by layout.html so ancestor overflow cannot clip it.
   ========================================================== */

.field-info::after {
	display: none !important;
}

.field-info-popup {
	position: fixed;
	z-index: 2000;
	width: max-content;
	max-width: min(290px, calc(100vw - 24px));
	padding: 9px 11px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #101828;
	color: #fff;
	box-shadow: 0 8px 22px rgba(16, 24, 40, 0.18);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 120ms ease, visibility 120ms ease;
}

.field-info-popup.visible {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================
   Mobile usability hardening
   ========================================================== */

.sidebar-close-button,
.sidebar-backdrop {
	display: none;
}

@media (max-width: 960px) {
	body.mobile-nav-open {
		overflow: hidden;
	}

	.sidebar {
		width: min(var(--sidebar-width), calc(100vw - 48px));
		max-width: 320px;
	}

	.sidebar-close-button {
		position: absolute;
		top: 16px;
		right: 12px;
		z-index: 2;
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.06);
		color: #e5e7eb;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.sidebar .brand {
		padding-right: 58px;
	}

	.sidebar-backdrop.visible {
		position: fixed;
		inset: 0;
		z-index: 35;
		display: block;
		background: rgba(15, 23, 42, 0.46);
		backdrop-filter: blur(1px);
	}

	.nav-item {
		min-height: 46px;
	}

	.icon-button,
	.mobile-menu-button,
	.profile-button {
		min-width: 44px;
		min-height: 44px;
	}

	.topbar {
		min-height: var(--topbar-height);
		height: auto;
		gap: 8px;
	}

	.page-heading {
		flex: 1 1 auto;
	}

	.topbar-actions {
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.topbar {
		padding: 0 12px;
	}

	.mobile-menu-button {
		margin-right: 4px;
	}

	.page-heading h1 {
		font-size: 16px;
	}

	.page-heading p {
		display: none;
	}

	.topbar-actions {
		gap: 4px;
	}

	.topbar-actions > a,
	.topbar-actions > button {
		min-height: 44px;
	}

	.profile-button {
		padding-left: 4px;
		padding-right: 4px;
		gap: 4px;
	}

	.profile-button .chevron {
		display: none;
	}

	.alert {
		align-items: flex-start;
	}
}

/* Touch-accessible information controls. */
@media (pointer: coarse), (max-width: 760px) {
	.field-info {
		width: 24px;
		height: 24px;
		margin: -4px 0;
		font-size: 11px;
		cursor: pointer;
	}
}

/* Transaction ledger becomes readable cards instead of a 1450px desktop table. */
@media (max-width: 760px) {
	.transactionlist-table-wrap {
		overflow: visible;
	}

	.transactionlist-table,
	.transactionlist-table tbody,
	.transactionlist-table tr,
	.transactionlist-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.transactionlist-table {
		min-width: 0;
	}

	.transactionlist-table thead {
		display: none;
	}

	.transactionlist-table tbody {
		display: grid;
		gap: 12px;
		padding: 12px;
	}

	.transactionlist-table tbody tr {
		overflow: hidden;
		border: 1px solid var(--border);
		border-radius: 12px;
		background: #fff;
	}

	.transactionlist-table tbody tr:hover td {
		background: #fff;
	}

	.transactionlist-table td {
		height: auto;
		min-height: 42px;
		padding: 10px 12px;
		border-bottom: 1px solid #eef1f4;
		white-space: normal;
		text-align: right;
		overflow-wrap: anywhere;
	}

	.transactionlist-table td:not(.transactionlist-actions-column) {
		display: grid;
		grid-template-columns: minmax(118px, 42%) minmax(0, 1fr);
		align-items: center;
		gap: 12px;
	}

	.transactionlist-table td:not(.transactionlist-actions-column)::before {
		color: #667085;
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.035em;
		text-align: left;
		text-transform: uppercase;
	}

	.transactionlist-table td:nth-child(1)::before { content: "Transaction / Property"; }
	.transactionlist-table td:nth-child(2)::before { content: "Status"; }
	.transactionlist-table td:nth-child(3)::before { content: "Deal Source"; }
	.transactionlist-table td:nth-child(4)::before { content: "Sale Price"; }
	.transactionlist-table td:nth-child(5)::before { content: "Expected Closing"; }
	.transactionlist-table td:nth-child(6)::before { content: "Actual Closing"; }
	.transactionlist-table td:nth-child(7)::before { content: "Expected Commission"; }
	.transactionlist-table td:nth-child(8)::before { content: "Approved / Final"; }
	.transactionlist-table td:nth-child(9)::before { content: "Paid to Date"; }
	.transactionlist-table td:nth-child(10)::before { content: "Outstanding"; }
	.transactionlist-table td:nth-child(11)::before { content: "Discrepancy"; }

	.transactionlist-name {
		max-width: none;
		white-space: normal;
		text-align: right;
	}

	.transactionlist-actions-column {
		position: static;
		min-width: 0;
		padding: 8px 10px;
		background: #f9fafb !important;
		box-shadow: none;
	}

	.transactionlist-actions {
		justify-content: flex-end;
		gap: 6px;
	}

	.transactionlist-action-button {
		width: 44px;
		height: 44px;
	}
}

/* Compensation profile and cap/threshold lists use stacked mobile records. */
@media (max-width: 760px) {
	.compensationprofile-table-wrap,
	.capthreshold-table-wrap {
		overflow: visible;
	}

	.compensationprofile-table,
	.compensationprofile-table tbody,
	.compensationprofile-table tr,
	.compensationprofile-table td,
	.capthreshold-table,
	.capthreshold-table tbody,
	.capthreshold-table tr,
	.capthreshold-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.compensationprofile-table,
	.capthreshold-table {
		min-width: 0;
	}

	.compensationprofile-table thead,
	.capthreshold-table thead {
		display: none;
	}

	.compensationprofile-table tbody,
	.capthreshold-table tbody {
		display: grid;
		gap: 12px;
		padding: 12px;
	}

	.compensationprofile-table tbody tr,
	.capthreshold-table tbody tr {
		overflow: hidden;
		border: 1px solid var(--border);
		border-radius: 12px;
		background: #fff;
	}

	.compensationprofile-table td,
	.capthreshold-table td {
		height: auto;
		min-height: 42px;
		padding: 10px 12px;
		border-bottom: 1px solid #eef1f4;
		white-space: normal;
		text-align: right;
		overflow-wrap: anywhere;
	}

	.compensationprofile-table td:not(.compensationprofile-actions-column),
	.capthreshold-table td:not(.capthreshold-actions-column) {
		display: grid;
		grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
		align-items: center;
		gap: 12px;
	}

	.compensationprofile-table td:not(.compensationprofile-actions-column)::before,
	.capthreshold-table td:not(.capthreshold-actions-column)::before {
		color: #667085;
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.035em;
		text-align: left;
		text-transform: uppercase;
	}

	.compensationprofile-table td:nth-child(1)::before { content: "Profile Name"; }
	.compensationprofile-table td:nth-child(2)::before { content: "Description"; }
	.compensationprofile-table td:nth-child(3)::before { content: "Method"; }
	.compensationprofile-table td:nth-child(4)::before { content: "Default Value"; }
	.compensationprofile-table td:nth-child(5)::before { content: "Cap / Threshold"; }
	.compensationprofile-table td:nth-child(6)::before { content: "Status"; }
	.compensationprofile-table td:nth-child(7)::before { content: "Last Modified"; }

	.capthreshold-table td:nth-child(1)::before { content: "Name"; }
	.capthreshold-table td:nth-child(2)::before { content: "Threshold Amount"; }
	.capthreshold-table td:nth-child(3)::before { content: "Pre-Threshold Agent %"; }
	.capthreshold-table td:nth-child(4)::before { content: "Post-Threshold Agent %"; }
	.capthreshold-table td:nth-child(5)::before { content: "Status"; }

	.compensationprofile-name,
	.compensationprofile-description {
		max-width: none;
		white-space: normal;
		text-align: right;
	}

	.compensationprofile-actions-column,
	.capthreshold-actions-column {
		position: static;
		min-width: 0;
		padding: 8px 10px;
		background: #f9fafb !important;
		box-shadow: none;
	}

	.compensationprofile-action-button,
	.capthreshold-action-button {
		width: 44px;
		height: 44px;
	}
}

/* Adjustment editors stack fields vertically on phones. */
@media (max-width: 760px) {
	.adjustment-table-wrap,
	.compensationprofile-adjustment-table-wrap {
		overflow: visible;
	}

	.adjustment-table,
	.adjustment-table tbody,
	.adjustment-table tr,
	.adjustment-table td,
	.compensationprofile-adjustment-table,
	.compensationprofile-adjustment-table tbody,
	.compensationprofile-adjustment-table tr,
	.compensationprofile-adjustment-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.adjustment-table,
	.compensationprofile-adjustment-table {
		min-width: 0;
	}

	.adjustment-table thead,
	.compensationprofile-adjustment-table thead {
		display: none;
	}

	.adjustment-table tbody,
	.compensationprofile-adjustment-table tbody {
		display: grid;
		gap: 12px;
	}

	.adjustment-table tr,
	.compensationprofile-adjustment-table tr {
		padding: 12px;
		border: 1px solid var(--border);
		border-radius: 12px;
		background: #f9fafb;
	}

	.adjustment-table td,
	.compensationprofile-adjustment-table td {
		padding: 6px 0;
	}

	.adjustment-table td:not(:last-child),
	.compensationprofile-adjustment-table td:not(:last-child) {
		display: grid;
		grid-template-columns: minmax(108px, 36%) minmax(0, 1fr);
		align-items: center;
		gap: 10px;
	}

	.adjustment-table td:not(:last-child)::before,
	.compensationprofile-adjustment-table td:not(:last-child)::before {
		color: #667085;
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.035em;
		text-transform: uppercase;
	}

	.adjustment-table td:nth-child(1)::before,
	.compensationprofile-adjustment-table td:nth-child(1)::before { content: "Adjustment"; }
	.adjustment-table td:nth-child(2)::before,
	.compensationprofile-adjustment-table td:nth-child(2)::before { content: "Value Type"; }
	.adjustment-table td:nth-child(3)::before,
	.compensationprofile-adjustment-table td:nth-child(3)::before { content: "Value"; }
	.adjustment-table td:nth-child(4)::before,
	.compensationprofile-adjustment-table td:nth-child(4)::before { content: "Effect"; }
	.adjustment-table td:nth-child(5)::before,
	.compensationprofile-adjustment-table td:nth-child(5)::before { content: "Percentage Basis"; }
	.adjustment-table td:nth-child(6)::before,
	.compensationprofile-adjustment-table td:nth-child(6)::before { content: "Note"; }

	.adjustment-table select,
	.adjustment-table input,
	.compensationprofile-adjustment-table select,
	.compensationprofile-adjustment-table input {
		min-width: 0;
		height: 44px;
	}

	.adjustment-table td:last-child,
	.compensationprofile-adjustment-table td:last-child {
		display: flex;
		justify-content: flex-end;
		padding-top: 8px;
	}

	.adjustment-table td:last-child {
		position: static;
		background: transparent;
		box-shadow: none;
	}

	.remove-adjustment,
	.compensationprofile-remove-adjustment {
		width: 44px;
		height: 44px;
	}
}

/* General mobile touch targets for common row actions. */
@media (max-width: 760px) {
	.lookup-action-button,
	.admin-button,
	.subscription-table-button,
	.lookup-close-button,
	.transactionlist-modal-close,
	.transaction-profile-modal-close {
		min-width: 44px;
		min-height: 44px;
	}

	.lookup-modal-backdrop,
	.transactionlist-modal,
	.transaction-profile-modal {
		padding: 12px;
	}
}

/* ==========================================================
   Transaction list mobile search action
   ========================================================== */

.transactionlist-mobile-search-button {
	display: none;
}

@media (max-width: 760px) {
	.transactionlist-search {
		margin-bottom: 10px;
	}

	.transactionlist-mobile-search-button {
		display: flex;
		width: 100%;
		margin-bottom: 18px;
	}
}

/* ==========================================================
   Transaction list pagination
   ========================================================== */

.transactionlist-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--border);
	background: #fff;
}

.transactionlist-pagination-summary {
	color: #667085;
	font-size: 11px;
	font-weight: 650;
}

.transactionlist-pagination-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.transactionlist-pagination-button {
	min-width: 82px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 11.5px;
	font-weight: 700;
}

.transactionlist-pagination-button:hover {
	background: #f9fafb;
}

.transactionlist-pagination-button.disabled {
	color: #98a2b3;
	background: #f9fafb;
	cursor: default;
}

@media (max-width: 760px) {
	.transactionlist-pagination {
		align-items: stretch;
		flex-direction: column;
		padding: 14px 16px 16px;
	}

	.transactionlist-pagination-summary {
		text-align: center;
	}

	.transactionlist-pagination-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.transactionlist-pagination-button {
		width: 100%;
		height: 44px;
	}
}

/* ==========================================================
   Shared list pagination
   ========================================================== */

.list-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--border);
	background: #fff;
}

.list-pagination-summary {
	color: #667085;
	font-size: 11px;
	font-weight: 650;
}

.list-pagination-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.list-pagination-button {
	min-width: 82px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 11.5px;
	font-weight: 700;
}

.list-pagination-button:hover {
	background: #f9fafb;
}

.list-pagination-button.disabled {
	color: #98a2b3;
	background: #f9fafb;
	cursor: default;
}

@media (max-width: 760px) {
	.list-pagination {
		align-items: stretch;
		flex-direction: column;
		padding: 14px 16px 16px;
	}

	.list-pagination-summary {
		text-align: center;
	}

	.list-pagination-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.list-pagination-button {
		width: 100%;
		height: 44px;
	}
}

/* ---------------------------------------------------------------------
   Reports
--------------------------------------------------------------------- */

.report-page {
	display: grid;
	gap: 20px;
}

.report-panel {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	padding: 0 0 20px;
}

.report-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px 15px;
}

.report-panel-header h2 {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
}

.report-panel-header p {
	margin: 4px 0 0;
	font-size: 10.5px;
	color: #98a2b3;
}

.report-empty {
	padding: 30px 20px;
	color: #98a2b3;
	font-size: 11.5px;
	text-align: center;
}

.report-list {
	display: grid;
	gap: 1px;
	background: #eef1f4;
	border-top: 1px solid #eef1f4;
}

.report-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: #fff;
	color: #101828;
	text-decoration: none;
}

.report-list-item:hover {
	background: #fcfcfd;
}

.report-list-item-name {
	font-size: 12.5px;
	font-weight: 700;
}

.report-list-item svg {
	width: 16px;
	height: 16px;
	color: #98a2b3;
}

.report-errors {
	margin: 0 20px 15px;
	padding: 12px 14px;
	border: 1px solid #fda29b;
	background: #fef3f2;
	border-radius: 10px;
	color: #b42318;
	font-size: 11px;
}

.report-errors ul {
	margin: 0;
	padding-left: 16px;
}

.report-filters {
	padding: 0 20px;
}

.report-filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.report-field {
	display: grid;
	gap: 6px;
}

.report-field label {
	font-size: 10.5px;
	font-weight: 700;
	color: #344054;
}

.report-field input,
.report-field select {
	height: 40px;
	padding: 0 12px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: #101828;
	font-size: 11.5px;
}

.report-field input:focus,
.report-field select:focus {
	outline: none;
	border-color: #2563eb;
}

.report-filter-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
}

.report-primary-button,
.report-secondary-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.report-primary-button {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
}

.report-primary-button:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

.report-secondary-button {
	border: 1px solid #d0d5dd;
	background: #fff;
	color: #344054;
}

.report-secondary-button:hover {
	background: #f9fafb;
}

.report-secondary-button svg {
	width: 16px;
	height: 16px;
}

.report-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 20px;
}

.report-table {
	width: 100%;
	min-width: 760px;
	border-collapse: separate;
	border-spacing: 0;
}

.report-table th {
	height: 42px;
	padding: 0 14px;
	background: #f9fafb;
	border-bottom: 1px solid var(--border);
	color: #667085;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.report-table td {
	height: 50px;
	padding: 0 14px;
	background: #fff;
	border-bottom: 1px solid #eef1f4;
	color: #475467;
	font-size: 11.5px;
	white-space: nowrap;
	vertical-align: middle;
}

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

.report-table tbody tr:hover td {
	background: #fcfcfd;
}

.report-subtotal-row td {
	background: #f9fafb;
	font-weight: 700;
	color: #101828;
}

.report-grandtotal-row td {
	background: #f2f4f7;
	border-top: 2px solid var(--border);
	font-weight: 800;
	color: #101828;
}

@media (max-width: 640px) {
	.report-filter-grid {
		grid-template-columns: 1fr;
	}

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

	.report-primary-button,
	.report-secondary-button {
		justify-content: center;
	}
}