@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Manrope', 'SF Pro Display', ui-sans-serif, system-ui, sans-serif;
    --color-ink-950: #0f172a;
    --color-ink-900: #162033;
    --color-ink-800: #25324b;
    --color-cloud-50: #f6f8fb;
    --color-cloud-100: #eef2f7;
    --color-cloud-200: #dce5ef;
    --color-brand-500: #2667ff;
    --color-brand-600: #1d4ed8;
    --color-brand-50: #eaf1ff;
    --color-brand-100: #dbe8ff;
    --color-success-500: #16a34a;
    --color-warning-500: #d97706;
    --color-danger-500: #dc2626;
}

@layer base {
    html {
        scroll-behavior: smooth;
        font-size: 16px;
    }

    body {
        @apply bg-cloud-50 text-ink-950 antialiased;
        background-image:
            radial-gradient(circle at top, rgba(38, 103, 255, 0.12), transparent 28%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 242, 247, 0.92));
    }

    input,
    button,
    textarea,
    select {
        @apply appearance-none;
    }
}

@layer components {
    .shell-card {
        @apply rounded-3xl border border-white/70 bg-white/90 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur;
    }

    .primary-button,
    .secondary-button,
    .danger-button {
        @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-semibold transition duration-200 ease-out active:translate-y-0 active:scale-[0.99] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-55 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-50;
    }

    .primary-button {
        @apply bg-ink-950 text-white shadow-[0_16px_36px_-28px_rgba(15,23,42,0.72)] hover:-translate-y-0.5 hover:bg-ink-800;
    }

    .secondary-button {
        @apply border border-cloud-200 bg-white text-ink-900 shadow-[0_12px_30px_-26px_rgba(15,23,42,0.28)] hover:-translate-y-0.5 hover:border-ink-900 hover:text-ink-950;
    }

    .danger-button {
        @apply bg-danger-500 text-white shadow-[0_16px_36px_-28px_rgba(220,38,38,0.62)] hover:-translate-y-0.5 hover:bg-red-700 focus-visible:ring-red-100;
    }

    .text-input {
        @apply w-full rounded-2xl border border-cloud-200 bg-white px-4 py-3 text-sm text-ink-950 shadow-sm outline-none transition disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400 focus:border-brand-500 focus:ring-4 focus:ring-brand-50;
    }

    .label {
        @apply mb-2 block text-sm font-semibold text-ink-900;
    }

    .auth-shell {
        @apply relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-12 sm:px-6 lg:px-8;
    }

    .auth-backdrop {
        background:
            radial-gradient(circle at 12% 16%, rgba(15, 23, 42, 0.045), transparent 30%),
            radial-gradient(circle at 86% 18%, rgba(100, 116, 139, 0.10), transparent 28%),
            linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
    }

    .auth-grain {
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%230f172a' fill-opacity='.035'%3E%3Ccircle cx='12' cy='14' r='1'/%3E%3Ccircle cx='80' cy='40' r='1'/%3E%3Ccircle cx='132' cy='16' r='1'/%3E%3Ccircle cx='164' cy='90' r='1'/%3E%3Ccircle cx='40' cy='110' r='1'/%3E%3Ccircle cx='96' cy='132' r='1'/%3E%3Ccircle cx='24' cy='154' r='1'/%3E%3Ccircle cx='150' cy='148' r='1'/%3E%3C/g%3E%3C/svg%3E");
        background-size: auto, 180px 180px;
        mix-blend-mode: multiply;
        opacity: 0.55;
    }

    .auth-card {
        @apply relative w-full max-w-[420px] rounded-[20px] border border-white/70 bg-white/82 p-8 shadow-[0_28px_90px_-42px_rgba(15,23,42,0.42)] backdrop-blur-xl sm:p-10;
    }

    .auth-brand {
        @apply text-[0.72rem] font-semibold uppercase tracking-[0.42em] text-ink-900;
    }

    .auth-logo {
        @apply mx-auto h-10 w-auto max-w-[180px] object-contain;
    }

    .auth-title {
        @apply mt-5 text-sm font-medium tracking-[-0.01em] text-ink-950;
    }

    .auth-subtitle {
        @apply mt-3 text-sm leading-6 text-ink-800;
    }

    .auth-header {
        @apply text-center;
    }

    .auth-form {
        @apply mt-7 space-y-6;
    }

    .auth-field {
        @apply space-y-2;
    }

    .auth-input {
        @apply h-12 w-full rounded-xl border border-slate-200/90 bg-white/92 px-4 text-sm text-ink-950 shadow-[0_1px_2px_rgba(15,23,42,0.04)] outline-none transition duration-200 ease-out placeholder:text-slate-400 hover:border-slate-300 focus:border-brand-500 focus:ring-4 focus:ring-brand-50/90;
    }

    .auth-link {
        @apply text-sm font-medium text-ink-800 transition duration-200 hover:text-ink-950;
    }

    .auth-checkbox {
        @apply flex cursor-pointer items-center gap-3 rounded-xl border border-transparent px-1 py-1 text-sm font-medium text-ink-800 transition duration-200 hover:text-ink-950;
    }

    .auth-checkbox input {
        @apply h-4 w-4 shrink-0 cursor-pointer rounded border-2 border-slate-500 bg-white accent-ink-950 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.75)] transition duration-200 checked:border-ink-950 focus:outline-none focus:ring-4 focus:ring-brand-50;
    }
    .auth-checkbox-simple {
        @apply mt-1 w-fit gap-2 px-0 py-0 text-sm font-medium text-slate-700;
    }

    .login-remember {
        @apply flex w-fit items-center gap-2 text-sm font-medium text-slate-700;
    }

    .login-remember input {
        @apply h-4 w-4 shrink-0 cursor-pointer appearance-auto rounded border border-slate-400 accent-ink-950;
    }

    .login-remember span {
        @apply cursor-default select-none;
    }

    .auth-submit {
        @apply inline-flex h-12 w-full items-center justify-center rounded-[14px] bg-gradient-to-b from-ink-900 to-ink-950 px-4 text-sm font-semibold text-white shadow-[0_16px_34px_-18px_rgba(15,23,42,0.7)] transition duration-200 ease-out hover:-translate-y-0.5 hover:brightness-110 active:translate-y-0 active:scale-[0.995] focus:ring-4 focus:ring-brand-50;
    }

    .auth-loading-overlay {
        @apply fixed inset-0 z-[80] flex items-center justify-center bg-slate-950/55 px-4 opacity-0 backdrop-blur-md transition duration-200 ease-out;
    }

    .auth-loading-overlay.is-visible {
        @apply opacity-100;
    }

    .auth-loading-panel {
        @apply flex flex-col items-center gap-4 rounded-[1.5rem] border border-white/15 bg-white/10 px-8 py-7 text-center shadow-[0_28px_80px_-36px_rgba(0,0,0,0.72)] backdrop-blur-xl;
    }

    .auth-loading-spinner {
        @apply h-11 w-11 rounded-full border border-white/20 border-t-white shadow-[0_0_32px_rgba(255,255,255,0.18)];
        animation: tarnovaSpin 780ms linear infinite;
    }

    .auth-loading-text {
        @apply text-xs font-medium tracking-[0.14em] text-white/75 uppercase;
    }

    .auth-panel {
        @apply mb-6 rounded-2xl border px-4 py-3 text-sm;
    }

    .dashboard-shell {
        @apply mx-auto flex min-h-screen max-w-[1560px] flex-col gap-6 p-4 lg:flex-row lg:gap-8 lg:p-6;
    }

    .dashboard-sidebar {
        @apply rounded-3xl border border-white/70 bg-white/90 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur lg:sticky lg:top-6 lg:h-[calc(100vh-3rem)] lg:w-[240px] lg:flex-shrink-0 lg:p-5;
    }

    .dashboard-sidebar-inner {
        @apply flex h-full flex-col;
    }

    .dashboard-brand {
        @apply flex justify-center border-b border-slate-200/80 pb-5 text-center;
    }

    .dashboard-brand-mark {
        @apply text-[0.72rem] font-semibold uppercase tracking-[0.4em] text-brand-600;
    }

    .dashboard-logo {
        @apply h-8 w-auto max-w-[150px] object-contain;
    }

    .dashboard-brand-title {
        @apply mt-3 text-sm font-medium tracking-[-0.01em] text-slate-900;
    }

    .dashboard-brand-copy {
        @apply mt-2 text-xs leading-5 text-slate-500;
    }

    .sidebar-nav {
        @apply mt-6 space-y-2;
    }

    .sidebar-section {
        @apply space-y-1.5;
    }

    .sidebar-section-title {
        @apply px-4 pt-4 pb-1 text-[0.68rem] font-bold uppercase tracking-[0.22em] text-slate-400;
    }

    .sidebar-link {
        @apply relative flex items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-slate-500 transition duration-200 ease-out hover:border-slate-200/80 hover:bg-slate-50 hover:text-slate-900;
    }

    .sidebar-link::before {
        content: '';
        @apply absolute left-0 top-1/2 h-8 w-1 -translate-y-1/2 rounded-full bg-transparent transition duration-200 ease-out;
    }

    .sidebar-link-active {
        @apply border-brand-100 bg-brand-50/80 font-semibold text-slate-900 shadow-[0_12px_30px_-24px_rgba(37,99,235,0.4)];
    }

    .sidebar-link-active::before {
        @apply bg-brand-500;
    }

    .sidebar-link-icon {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200/80 bg-white text-slate-500 transition duration-200 ease-out;
    }

    .sidebar-link:hover .sidebar-link-icon {
        @apply border-slate-300 text-slate-800;
    }

    .sidebar-link-active .sidebar-link-icon {
        @apply border-brand-100 bg-white text-brand-600;
    }

    .dashboard-content {
        @apply min-w-0 flex-1;
    }

    .dashboard-header {
        @apply relative z-50 flex flex-col gap-5 overflow-visible rounded-3xl border border-white/70 bg-white/90 p-6 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7 lg:flex-row lg:items-center lg:justify-between;
    }

    .dashboard-kicker {
        @apply text-xs font-semibold uppercase tracking-[0.24em] text-slate-500;
    }

    .dashboard-title {
        @apply mt-2 text-sm font-medium tracking-[-0.01em] text-slate-900;
    }

    .dashboard-actions {
        @apply relative z-50 flex w-full flex-wrap overflow-visible items-center gap-3 lg:w-auto lg:justify-end;
    }

    .dashboard-actions > form {
        @apply w-full sm:w-auto;
    }

    .dashboard-actions .primary-button,
    .dashboard-actions .secondary-button,
    .dashboard-actions .danger-button {
        @apply w-full sm:w-auto;
    }

    .surface-alert {
        @apply rounded-2xl border px-4 py-3 text-sm shadow-[0_12px_30px_-24px_rgba(15,23,42,0.25)];
    }

    .stats-grid {
        @apply grid gap-5 md:grid-cols-2 xl:grid-cols-4;
    }

    .stat-card {
        @apply rounded-[1.75rem] border border-white/70 bg-white/90 p-6 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur transition duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_28px_70px_-38px_rgba(15,23,42,0.35)];
    }

    .stat-label {
        @apply text-xs font-medium text-slate-500;
    }

    .stat-value {
        @apply mt-4 text-base font-bold tracking-[-0.01em] text-slate-900;
    }

    .stat-card-accent {
        @apply border-slate-900 bg-slate-900 text-white;
    }

    .stat-card-accent .stat-label,
    .stat-card-accent .stat-value {
        @apply text-white;
    }

    .stat-card-accent .stat-label {
        @apply text-white/70;
    }

    .section-card {
        @apply rounded-[1.75rem] border border-white/70 bg-white/90 p-6 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7;
    }

    .metric-card {
        @apply rounded-[1.45rem] border border-white/70 bg-white/90 p-5 shadow-[0_18px_54px_-36px_rgba(15,23,42,0.48)] backdrop-blur transition duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_26px_70px_-42px_rgba(15,23,42,0.45)];
    }

    .metric-label {
        @apply text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .metric-value {
        @apply mt-3 text-base font-bold leading-6 tracking-[-0.02em] text-slate-950;
    }

    .metric-helper {
        @apply mt-3 text-sm leading-6 text-slate-500;
    }


    .workspace-module-nav,
    .sales-module-nav {
        @apply flex snap-x gap-1 overflow-x-auto rounded-[1.35rem] border border-slate-950 bg-slate-950 p-1.5 shadow-[0_18px_52px_-36px_rgba(15,23,42,0.8)] sm:flex-wrap sm:justify-center sm:overflow-visible;
        scrollbar-width: none;
    }

    .workspace-module-nav::-webkit-scrollbar,
    .sales-module-nav::-webkit-scrollbar {
        display: none;
    }

    .workspace-module-nav-link,
    .sales-module-nav-link {
        @apply relative inline-flex min-h-10 min-w-[10.5rem] snap-start items-center justify-center gap-2 rounded-[0.95rem] px-3.5 py-2 text-sm font-semibold text-white transition duration-200 ease-out hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/20 sm:min-w-[9.75rem];
    }

    .workspace-module-nav-icon,
    .sales-module-nav-icon {
        @apply text-[0.78rem] text-white/72 transition duration-200 ease-out;
    }

    .workspace-module-nav-link:hover .workspace-module-nav-icon,
    .workspace-module-nav-link-active .workspace-module-nav-icon,
    .sales-module-nav-link:hover .sales-module-nav-icon,
    .sales-module-nav-link-active .sales-module-nav-icon {
        @apply text-white;
    }

    .workspace-module-nav-link::before,
    .sales-module-nav-link::before {
        content: '';
        @apply absolute left-5 right-5 top-1 h-0.5 rounded-full bg-transparent transition duration-200 ease-out;
    }

    .workspace-module-nav-link-active,
    .sales-module-nav-link-active {
        @apply bg-white/8 text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.07)];
    }

    .workspace-module-nav-link-active::before,
    .sales-module-nav-link-active::before {
        @apply bg-white;
    }

    .executive-hero {
        @apply flex flex-col gap-5 overflow-hidden rounded-[1.75rem] border border-white/70 bg-white/90 p-6 shadow-[0_24px_72px_-42px_rgba(15,23,42,0.52)] backdrop-blur sm:p-7 lg:flex-row lg:items-center lg:justify-between;
    }

    .executive-hero-title {
        @apply mt-2 text-base font-bold tracking-[-0.02em] text-slate-950;
    }

    .executive-hero-copy {
        @apply mt-3 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .executive-hero-panel {
        @apply w-full rounded-[1.35rem] border border-slate-200 bg-slate-950 px-5 py-4 text-white shadow-[0_20px_52px_-34px_rgba(15,23,42,0.75)] lg:max-w-xs;
    }

    .executive-panel-label,
    .executive-eyebrow,
    .executive-stat-label,
    .comparison-label {
        @apply text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .executive-panel-label,
    .executive-panel-copy {
        @apply text-white/60;
    }

    .executive-panel-value {
        @apply mt-2 text-xl font-bold tracking-[-0.03em] text-white;
    }

    .executive-panel-copy {
        @apply mt-2 text-xs font-medium;
    }

    .executive-stats-grid {
        @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
    }

    .executive-stat-card {
        @apply flex gap-4 rounded-[1.5rem] border border-white/70 bg-white/90 p-5 shadow-[0_18px_54px_-36px_rgba(15,23,42,0.48)] backdrop-blur transition duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_26px_70px_-42px_rgba(15,23,42,0.45)];
    }

    .executive-stat-card-primary {
        @apply border-slate-950 bg-slate-950 text-white;
    }

    .executive-stat-icon {
        @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-brand-600;
    }

    .executive-stat-card-primary .executive-stat-icon {
        @apply border-white/10 bg-white/10 text-white;
    }

    .executive-stat-icon-warning {
        @apply border-amber-100 bg-amber-50 text-amber-600;
    }

    .executive-stat-value {
        @apply mt-2 text-base font-bold tracking-[-0.02em] text-slate-950;
    }

    .executive-stat-copy {
        @apply mt-2 text-xs font-medium text-slate-500;
    }

    .executive-stat-card-primary .executive-stat-label,
    .executive-stat-card-primary .executive-stat-copy {
        @apply text-white/60;
    }

    .executive-stat-card-primary .executive-stat-value {
        @apply text-white;
    }

    .executive-dashboard-grid {
        @apply grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)];
    }

    .executive-card {
        @apply rounded-[1.75rem] border border-white/70 bg-white/90 p-5 shadow-[0_22px_64px_-40px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7;
    }

    .executive-card-wide {
        @apply min-w-0;
    }

    .executive-card-header {
        @apply flex flex-col gap-4 border-b border-slate-200/80 pb-5 sm:flex-row sm:items-start sm:justify-between;
    }

    .executive-card-title {
        @apply mt-2 text-[15px] font-bold tracking-[-0.01em] text-slate-950;
    }

    .executive-card-copy {
        @apply mt-2 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .executive-mini-panel {
        @apply w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-left sm:w-auto sm:min-w-44 sm:text-right;
    }

    .executive-mini-panel span {
        @apply block text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .executive-mini-panel strong {
        @apply mt-1 block text-sm font-bold text-slate-950;
    }

    .executive-empty-state {
        @apply mt-6 flex flex-col items-center justify-center rounded-[1.5rem] border border-dashed border-slate-200 bg-slate-50/80 px-6 py-10 text-center;
    }

    .executive-empty-state-compact {
        @apply py-7;
    }

    .executive-empty-icon {
        @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-brand-600;
    }

    .executive-empty-icon-success {
        @apply border-green-100 bg-green-50 text-green-700;
    }

    .executive-empty-title {
        @apply mt-4 text-sm font-bold text-slate-950;
    }

    .executive-empty-copy {
        @apply mt-2 max-w-md text-sm leading-6 text-slate-500;
    }

    .revenue-chart-shell {
        @apply relative mt-6 h-80 overflow-hidden rounded-[1.5rem] border border-slate-200 bg-[linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)] p-4 sm:p-6;
    }

    .revenue-chart-grid {
        @apply pointer-events-none absolute inset-x-4 top-6 bottom-12 grid grid-rows-4 sm:inset-x-6;
    }

    .revenue-chart-grid span {
        @apply border-t border-slate-200/70;
    }

    .revenue-chart-bars {
        @apply relative z-10 flex h-full items-end gap-2 sm:gap-3;
    }

    .revenue-chart-month {
        @apply flex h-full min-w-0 flex-1 flex-col justify-end;
    }

    .revenue-chart-bar-wrap {
        @apply relative flex flex-1 items-end justify-center;
    }

    .revenue-chart-bar {
        @apply w-full max-w-10 rounded-t-2xl bg-slate-950 shadow-[0_18px_40px_-26px_rgba(15,23,42,0.55)] transition duration-200 ease-out;
    }

    .revenue-chart-tooltip {
        @apply pointer-events-none absolute bottom-[calc(100%+0.75rem)] left-1/2 hidden -translate-x-1/2 whitespace-nowrap rounded-xl bg-slate-950 px-3 py-2 text-xs font-semibold text-white shadow-xl;
    }

    .revenue-chart-bar-wrap:hover .revenue-chart-bar {
        @apply bg-brand-600;
    }

    .revenue-chart-bar-wrap:hover .revenue-chart-tooltip {
        @apply block;
    }

    .revenue-chart-month p {
        @apply mt-3 truncate text-center text-[11px] font-bold text-slate-500;
    }

    .overdue-focus-card {
        @apply transition duration-200;
    }

    .overdue-focus-card-active {
        @apply border-red-100 bg-red-50/80;
    }

    .overdue-amount-panel {
        @apply mt-6 rounded-[1.5rem] border border-slate-200 bg-white p-5 shadow-[0_18px_44px_-34px_rgba(15,23,42,0.35)];
    }

    .overdue-amount-panel p {
        @apply text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .overdue-amount-panel strong {
        @apply mt-2 block text-base font-bold tracking-[-0.02em] text-slate-950;
    }

    .overdue-amount-panel span {
        @apply mt-2 block text-sm text-slate-500;
    }

    .executive-list {
        @apply mt-5 space-y-3;
    }

    .executive-list-row {
        @apply flex flex-col gap-3 rounded-2xl border border-slate-200 bg-slate-50/80 px-4 py-4 transition duration-200 ease-out hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white hover:shadow-[0_16px_40px_-30px_rgba(15,23,42,0.36)] sm:flex-row sm:items-center;
    }

    .executive-list-icon {
        @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-brand-600;
    }

    .executive-list-icon-success {
        @apply border-green-100 bg-green-50 text-green-700;
    }

    .executive-list-icon-danger {
        @apply border-red-100 bg-red-50 text-red-600;
    }

    .executive-list-main {
        @apply min-w-0 flex-1;
    }

    .executive-list-main strong {
        @apply block truncate text-sm font-bold text-slate-950;
    }

    .executive-list-main small {
        @apply mt-1 block text-xs leading-5 text-slate-500;
    }

    .executive-list-amount {
        @apply text-sm font-bold text-slate-950 sm:text-right;
    }

    .executive-table-shell {
        @apply mt-6 overflow-hidden rounded-[1.35rem] border border-slate-200 bg-white;
    }

    .executive-table-shell {
        overflow-x: auto;
    }

    .executive-table {
        @apply min-w-full text-left;
    }

    .executive-table thead {
        @apply bg-slate-50 text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .executive-table th,
    .executive-table td {
        @apply px-5 py-4;
    }

    .executive-table tbody {
        @apply divide-y divide-slate-100 bg-white text-sm text-slate-600;
    }

    .executive-table tbody tr {
        @apply transition duration-200 hover:bg-slate-50/80;
    }

    .executive-table td span {
        @apply mt-1 block text-xs text-slate-400;
    }

    .executive-table-link,
    .executive-table-amount {
        @apply font-bold text-slate-950;
    }

    .executive-table-link {
        @apply transition hover:text-brand-600;
    }

    .top-client-list {
        @apply mt-5 space-y-3;
    }

    .top-client-row {
        @apply grid gap-3 rounded-2xl border border-slate-200 bg-slate-50/80 px-4 py-4 transition duration-200 ease-out hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white hover:shadow-[0_16px_40px_-30px_rgba(15,23,42,0.36)] sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center;
    }

    .top-client-rank {
        @apply inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-950 text-xs font-bold text-white;
    }

    .top-client-main strong {
        @apply block truncate text-sm font-bold text-slate-950;
    }

    .top-client-main small {
        @apply mt-1 block text-xs leading-5 text-slate-500;
    }

    .top-client-revenue {
        @apply text-sm font-bold text-slate-950 sm:text-right;
    }

    .comparison-grid {
        @apply mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4;
    }

    .comparison-card {
        @apply rounded-[1.5rem] border border-slate-200 bg-slate-50/80 p-5 transition duration-200 ease-out hover:-translate-y-0.5 hover:bg-white hover:shadow-[0_18px_46px_-34px_rgba(15,23,42,0.34)];
    }

    .comparison-value {
        @apply mt-3 text-xl font-bold tracking-[-0.03em] text-slate-950;
    }

    .dashboard-trend {
        @apply mt-4 inline-flex rounded-full border px-3 py-1 text-xs font-bold;
    }

    .dashboard-trend-up {
        @apply border-green-100 bg-green-50 text-green-700;
    }

    .dashboard-trend-down {
        @apply border-red-100 bg-red-50 text-red-700;
    }

    .dashboard-trend-flat {
        @apply border-slate-100 bg-white text-slate-500;
    }

    .client-directory-card,
    .client-section-card,
    .client-filter-card,
    .client-statement-hero {
        @apply rounded-[1.75rem] border border-white/70 bg-white/90 p-5 shadow-[0_22px_64px_-40px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7;
    }

    .client-directory-header,
    .client-section-header,
    .client-filter-header {
        @apply flex flex-col gap-4 border-b border-slate-200/80 pb-5 lg:flex-row lg:items-start lg:justify-between;
    }

    .client-directory-title,
    .client-section-title {
        @apply mt-2 text-[15px] font-bold tracking-[-0.01em] text-slate-950;
    }

    .client-directory-copy,
    .client-section-copy {
        @apply mt-2 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .client-search {
        @apply relative w-full lg:max-w-md;
    }

    .client-search-icon {
        @apply absolute left-4 top-1/2 -translate-y-1/2 text-sm text-slate-400;
    }

    .client-search-input {
        @apply h-12 w-full rounded-2xl border border-slate-200 bg-white/95 pl-11 pr-4 text-sm font-medium text-slate-900 shadow-[0_10px_30px_-26px_rgba(15,23,42,0.42)] outline-none transition duration-200 placeholder:font-normal placeholder:text-slate-400 hover:border-slate-300 focus:border-brand-500 focus:ring-4 focus:ring-brand-50;
    }

    .client-grid {
        @apply mt-6 grid gap-4;
    }

    .client-card {
        @apply rounded-[1.35rem] border border-slate-200/90 bg-white/95 p-4 shadow-[0_16px_42px_-34px_rgba(15,23,42,0.34)] transition duration-200 ease-out hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-[0_24px_60px_-38px_rgba(15,23,42,0.42)] sm:p-5;
    }

    .client-card-main {
        @apply flex min-w-0 items-start gap-4;
    }

    .client-avatar {
        @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-slate-950 text-sm font-bold uppercase text-white shadow-[0_16px_34px_-26px_rgba(15,23,42,0.7)];
    }

    .client-avatar-large {
        @apply h-14 w-14 rounded-[1.25rem] text-base;
    }

    .client-name {
        @apply truncate text-[15px] font-bold tracking-[-0.01em] text-slate-950;
    }

    .client-contact-list {
        @apply mt-2 flex flex-wrap gap-x-5 gap-y-2 text-xs leading-5 text-slate-500;
    }

    .client-contact-list span {
        @apply inline-flex items-center gap-2;
    }

    .client-card {
        @apply flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between;
    }

    .client-card-actions {
        @apply flex flex-wrap items-center gap-2;
    }

    .client-card-actions .client-action-primary {
        @apply w-full sm:w-auto;
    }

    .client-action-primary {
        @apply inline-flex h-11 items-center justify-center gap-2 rounded-2xl bg-slate-950 px-4 text-sm font-bold text-white shadow-[0_16px_36px_-28px_rgba(15,23,42,0.75)] transition duration-200 hover:-translate-y-0.5 hover:bg-slate-800 active:translate-y-0 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-50;
    }

    .client-icon-action {
        @apply relative inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-500 transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-950 active:translate-y-0 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-50;
    }

    .client-icon-action-danger {
        @apply hover:border-red-200 hover:bg-red-50 hover:text-red-600;
    }

    .client-empty-wrap {
        @apply rounded-[1.5rem] border border-dashed border-slate-200 bg-slate-50/80 px-4 py-6;
    }

    .client-pagination {
        @apply mt-6 border-t border-slate-200/80 pt-5;
    }

    .client-statement-hero {
        @apply grid gap-6 lg:grid-cols-[minmax(0,1fr)_380px] lg:items-start;
    }

    .client-statement-identity {
        @apply flex items-start gap-4;
    }

    .client-statement-title {
        @apply mt-2 text-xl font-bold tracking-[-0.03em] text-slate-950;
    }

    .client-statement-copy {
        @apply mt-3 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .client-detail-panel {
        @apply rounded-[1.5rem] border border-slate-200 bg-slate-50/80 p-5;
    }

    .client-detail-label {
        @apply text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .client-detail-list {
        @apply mt-4 space-y-3 text-sm;
    }

    .client-detail-list div {
        @apply flex justify-between gap-4;
    }

    .client-detail-list span {
        @apply text-slate-500;
    }

    .client-detail-list strong {
        @apply text-right font-bold text-slate-900;
    }

    .client-detail-address {
        @apply block border-t border-slate-200 pt-3;
    }

    .client-detail-address strong {
        @apply mt-1 block whitespace-pre-line text-left;
    }

    .client-filter-form {
        @apply mt-6 grid gap-4 lg:grid-cols-[minmax(180px,0.8fr)_minmax(160px,0.6fr)_minmax(160px,0.6fr)_auto] lg:items-end;
    }

    .client-filter-field {
        @apply block;
    }

    .client-filter-field span {
        @apply mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-slate-500;
    }

    .client-statement-stats {
        @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
    }

    .client-statement-stat {
        @apply flex gap-4 rounded-[1.5rem] border border-white/70 bg-white/90 p-5 shadow-[0_18px_54px_-36px_rgba(15,23,42,0.48)] backdrop-blur transition duration-200 hover:-translate-y-0.5;
    }

    .client-statement-stat-paid {
        @apply border-slate-950 bg-slate-950 text-white;
    }

    .client-stat-icon {
        @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-brand-600;
    }

    .client-stat-icon-warning {
        @apply border-amber-100 bg-amber-50 text-amber-600;
    }

    .client-statement-stat-paid .client-stat-icon {
        @apply border-white/10 bg-white/10 text-white;
    }

    .client-statement-stat p {
        @apply text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .client-statement-stat strong {
        @apply mt-2 block text-base font-bold tracking-[-0.02em] text-slate-950;
    }

    .client-statement-stat-paid p {
        @apply text-white/60;
    }

    .client-statement-stat-paid strong {
        @apply text-white;
    }

    .client-empty-state {
        @apply mt-6 flex flex-col items-center justify-center rounded-[1.5rem] border border-dashed border-slate-200 bg-slate-50/80 px-6 py-10 text-center;
    }

    .client-empty-state-success {
        @apply border-green-200 bg-green-50;
    }

    .client-empty-state span {
        @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-brand-600;
    }

    .client-empty-state-success span {
        @apply border-green-100 bg-white text-green-700;
    }

    .client-empty-state p {
        @apply mt-4 text-sm font-bold text-slate-950;
    }

    .client-empty-state small {
        @apply mt-2 max-w-md text-sm leading-6 text-slate-500;
    }

    .client-table-shell {
        @apply mt-6 overflow-x-auto rounded-[1.35rem] border border-slate-200 bg-white;
    }

    .client-table {
        @apply min-w-full text-left;
    }

    .client-table thead {
        @apply bg-slate-50 text-xs font-bold uppercase tracking-[0.18em] text-slate-500;
    }

    .client-table th,
    .client-table td {
        @apply px-5 py-4;
    }

    .client-table tbody {
        @apply divide-y divide-slate-100 bg-white text-sm text-slate-600;
    }

    .client-table tr {
        @apply transition duration-200;
    }

    .client-table tbody tr:hover {
        @apply bg-slate-50/80;
    }

    .client-table a {
        @apply text-sm font-bold text-slate-950 transition hover:text-brand-600;
    }

    .settings-hero {
        @apply flex flex-col gap-5 overflow-hidden rounded-[1.75rem] border border-white/70 bg-white/90 p-6 shadow-[0_24px_72px_-42px_rgba(15,23,42,0.52)] backdrop-blur sm:p-7 lg:flex-row lg:items-center lg:justify-between;
    }

    .settings-hero-title {
        @apply mt-2 text-base font-bold tracking-[-0.02em] text-slate-950;
    }

    .settings-hero-copy {
        @apply mt-3 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .settings-hero-badge {
        @apply inline-flex w-fit items-center gap-2 rounded-2xl border border-brand-100 bg-brand-50 px-4 py-3 text-xs font-bold text-brand-600 shadow-[0_18px_42px_-34px_rgba(37,99,235,0.6)];
    }

    .settings-layout {
        @apply grid gap-6 xl:grid-cols-[minmax(0,1fr)_380px] xl:items-start;
    }

    .settings-main-stack,
    .settings-side-stack {
        @apply space-y-6;
    }

    .settings-side-stack {
        @apply xl:sticky xl:top-28;
    }

    .settings-card,
    .settings-save-card {
        @apply rounded-[1.75rem] border border-white/70 bg-white/90 p-5 shadow-[0_22px_64px_-40px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7;
    }

    .settings-side-card {
        @apply h-fit;
    }

    .settings-section-header {
        @apply mb-6 flex items-start gap-4 border-b border-slate-200/80 pb-5;
    }

    .settings-section-icon {
        @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-brand-600;
    }

    .settings-section-icon-warning {
        @apply border-amber-100 bg-amber-50 text-amber-600;
    }

    .settings-section-title {
        @apply mt-2 text-[15px] font-bold tracking-[-0.01em] text-slate-950;
    }

    .settings-section-copy {
        @apply mt-2 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .settings-grid {
        @apply grid gap-5 md:grid-cols-2;
    }

    .settings-field,
    .settings-reminder-field {
        @apply block space-y-2;
    }

    .settings-field > span,
    .settings-reminder-field > span {
        @apply block text-xs font-bold uppercase tracking-[0.16em] text-slate-500;
    }

    .settings-field em,
    .settings-reminder-field em {
        @apply block text-xs not-italic leading-5 text-slate-500;
    }

    .settings-field small,
    .settings-reminder-field small,
    .settings-error {
        @apply block text-xs font-bold text-red-600;
    }


    .settings-banking-field {
        @apply space-y-3;
    }

    .settings-banking-shell {
        @apply overflow-hidden rounded-[1.35rem] border border-slate-200 bg-white shadow-[0_14px_40px_-34px_rgba(15,23,42,0.45)];
    }

    .settings-banking-toolbar {
        @apply flex flex-col gap-1 border-b border-slate-200 bg-slate-50/80 px-4 py-3 sm:flex-row sm:items-center sm:justify-between;
    }

    .settings-banking-toolbar strong {
        @apply text-sm font-semibold tracking-[-0.01em] text-slate-950;
    }

    .settings-banking-toolbar em {
        @apply text-xs not-italic font-medium text-slate-500;
    }

    .settings-banking-textarea {
        @apply min-h-[11rem] rounded-none border-0 bg-white px-4 py-4 shadow-none focus:ring-0;
    }

    .settings-reminder-grid {
        @apply grid gap-4 md:grid-cols-3;
    }

    .settings-reminder-field {
        @apply rounded-[1.35rem] border border-slate-200 bg-slate-50/80 p-4;
    }

    .settings-logo-preview {
        @apply flex min-h-36 items-center justify-center rounded-[1.5rem] border border-slate-200 bg-slate-50/80 p-6 text-center;
    }

    .settings-logo-preview img {
        @apply max-h-24 max-w-[220px] object-contain;
    }

    .settings-logo-preview p {
        @apply text-sm font-bold tracking-[0.3em] text-slate-950;
    }
    .settings-logo-upload {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
        @apply mt-2 cursor-pointer border border-slate-200 bg-white p-3 text-left shadow-sm transition duration-200 hover:border-slate-950 hover:bg-slate-50 focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-50;
    }

    .settings-logo-upload-input {
        @apply sr-only;
    }

    .settings-logo-upload-icon {
        @apply flex h-10 w-10 shrink-0 items-center justify-center border border-slate-200 bg-slate-950 text-sm text-white shadow-sm;
    }

    .settings-logo-upload-body {
        @apply min-w-0;
    }

    .settings-logo-upload-body strong {
        @apply block text-sm font-bold leading-5 text-slate-950;
    }

    .settings-logo-upload-body em {
        @apply mt-0.5 block text-xs not-italic leading-5 text-slate-500;
    }

    .settings-logo-upload-file {
        grid-column: 2;
        @apply inline-flex max-w-full truncate border border-slate-200 bg-slate-50 px-2.5 py-1 text-[0.68rem] font-bold uppercase tracking-[0.12em] text-slate-500;
    }

    .settings-logo-upload-invalid {
        @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-100;
    }

    .settings-save-card {
        @apply space-y-5 border-slate-950 bg-slate-950 text-white;
    }

    .settings-save-title {
        @apply text-sm font-bold text-white;
    }

    .settings-save-copy {
        @apply mt-2 text-sm leading-6 text-white/60;
    }

    .settings-alert {
        @apply flex items-start gap-4 rounded-[1.5rem] border border-red-100 bg-red-50/90 p-5 text-red-700 shadow-[0_18px_48px_-36px_rgba(220,38,38,0.45)] backdrop-blur;
    }

    .settings-alert span {
        @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-white text-red-500 shadow-[0_12px_28px_-24px_rgba(220,38,38,0.55)];
    }

    .settings-alert strong {
        @apply text-sm font-bold text-red-700;
    }

    .settings-alert p {
        @apply mt-1 text-sm leading-6 text-red-600;
    }

    .document-form-intro {
        @apply flex flex-col gap-5 overflow-hidden rounded-[1.75rem] border border-white/70 bg-white/90 p-6 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7 lg:flex-row lg:items-center lg:justify-between;
    }

    .document-form-intro-title {
        @apply mt-2 text-sm font-medium tracking-[-0.01em] text-slate-900;
    }

    .document-form-intro-copy {
        @apply mt-3 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .document-form-intro-badge {
        @apply inline-flex w-fit items-center gap-2 rounded-2xl border border-brand-100 bg-brand-50 px-4 py-3 text-xs font-semibold text-brand-600 shadow-[0_18px_42px_-34px_rgba(37,99,235,0.6)];
    }

    .document-form-shell {
        @apply block;
    }

    .section-header {
        @apply mb-6 flex items-center justify-between gap-4;
    }

    .section-title {
        @apply text-sm font-medium tracking-[-0.01em] text-slate-900;
    }

    .section-link {
        @apply text-sm font-medium text-brand-600 transition duration-200 hover:text-brand-500;
    }

    .document-row {
        @apply flex items-center justify-between rounded-2xl border border-slate-200/80 bg-slate-50/80 px-4 py-4 transition duration-200 ease-out hover:border-slate-300 hover:bg-white hover:shadow-[0_16px_35px_-28px_rgba(15,23,42,0.3)];
    }

    .document-number {
        @apply font-semibold text-slate-900;
    }

    .document-meta {
        @apply text-sm text-slate-500;
    }

    .document-total {
        @apply text-[15px] font-bold text-slate-900;
    }

    .document-status {
        @apply text-sm capitalize text-slate-500;
    }

    .empty-state-card {
        @apply mx-auto flex w-full max-w-[520px] flex-col items-center justify-center rounded-[1.75rem] border border-dashed border-slate-200 bg-[linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)] px-6 py-12 text-center shadow-[0_20px_50px_-36px_rgba(15,23,42,0.28)] sm:px-8 sm:py-14;
    }

    .empty-state-icon {
        @apply flex h-16 w-16 items-center justify-center rounded-[1.25rem] border border-brand-100 bg-brand-50 text-brand-600 shadow-[0_18px_40px_-30px_rgba(37,99,235,0.45)];
    }

    .empty-state-title {
        @apply mt-6 text-sm font-medium tracking-[-0.01em] text-slate-900;
    }

    .empty-state-copy {
        @apply mt-3 max-w-md text-sm leading-7 text-slate-500;
    }

    .builder-shell {
        @apply grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px] xl:items-start;
    }

    .builder-stack {
        @apply space-y-6;
    }

    .builder-card {
        @apply rounded-[1.5rem] border border-white/70 bg-white/90 p-5 shadow-[0_22px_64px_-38px_rgba(15,23,42,0.52)] backdrop-blur transition duration-200 ease-out sm:p-7;
    }

    .builder-header {
        @apply mb-6 flex flex-col gap-2 border-b border-slate-200/80 pb-5;
    }

    .builder-header-main {
        @apply flex items-start gap-4;
    }

    .builder-step {
        @apply inline-flex h-9 min-w-9 shrink-0 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 px-2 text-[11px] font-bold uppercase tracking-[0.12em] text-brand-600 shadow-[0_14px_32px_-24px_rgba(37,99,235,0.45)];
    }

    .builder-title {
        @apply text-[15px] font-bold tracking-[-0.01em] text-slate-900;
    }

    .builder-subtitle {
        @apply mt-1 text-sm leading-6 text-slate-500;
    }

    .builder-grid {
        @apply grid gap-5 md:grid-cols-2;
    }

    .builder-field {
        @apply space-y-2;
    }

    .builder-field-full {
        @apply md:col-span-2;
    }

    .builder-label {
        @apply block text-xs font-bold uppercase tracking-[0.12em] text-slate-500;
    }

    .builder-input,
    .builder-select,
    .builder-textarea {
        @apply w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm font-medium text-slate-900 shadow-[0_1px_2px_rgba(15,23,42,0.04)] outline-none transition duration-200 ease-out placeholder:font-normal placeholder:text-slate-400 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400 hover:border-slate-300 hover:bg-slate-50/50 focus:border-brand-500 focus:bg-white focus:ring-4 focus:ring-brand-50;
    }

    .builder-input,
    .builder-select {
        @apply h-[3.125rem];
    }

    .builder-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2364758b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: right 1rem center;
        background-repeat: no-repeat;
        background-size: 1.125rem;
        padding-right: 2.75rem;
    }

    .builder-textarea {
        @apply min-h-36 py-3.5 leading-6;
    }

    .builder-input-invalid,
    .builder-select-invalid,
    .builder-textarea-invalid {
        @apply border-red-500 focus:border-red-500 focus:ring-red-100;
    }

    .builder-error {
        @apply text-sm font-medium text-red-500;
    }

    .builder-help {
        @apply text-xs leading-5 text-slate-500;
    }

    .builder-validation-panel {
        @apply flex items-start gap-4 rounded-[1.5rem] border border-red-100 bg-red-50/90 p-5 text-red-700 shadow-[0_18px_48px_-36px_rgba(220,38,38,0.45)] backdrop-blur;
    }

    .builder-validation-icon {
        @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-white text-red-500 shadow-[0_12px_28px_-24px_rgba(220,38,38,0.55)];
    }

    .builder-validation-title {
        @apply text-sm font-bold text-red-700;
    }

    .builder-validation-copy {
        @apply mt-1 text-sm leading-6 text-red-600;
    }

    .builder-items-header {
        @apply mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between;
    }

    .builder-add-button {
        @apply inline-flex h-11 w-full items-center justify-center gap-2 rounded-2xl border border-slate-200 bg-white px-4 text-sm font-bold text-slate-900 shadow-[0_12px_30px_-26px_rgba(15,23,42,0.42)] transition duration-200 ease-out hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50 active:translate-y-0 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-50 sm:w-auto;
    }

    .builder-items-table {
        @apply overflow-hidden rounded-[1.5rem] border border-slate-200 bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.72)];
    }

    .builder-items-head,
    .builder-item-row {
        @apply grid grid-cols-1 gap-3 px-4 py-4 md:grid-cols-[minmax(0,2.4fr)_100px_140px_140px_52px] md:items-center lg:px-5;
    }

    .builder-items-head {
        @apply hidden border-b border-slate-200 bg-slate-50/90 text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500 md:grid;
    }

    .builder-item-row {
        @apply border-b border-slate-100 transition duration-200 ease-out hover:bg-slate-50/70;
    }

    .builder-item-row:last-child {
        @apply border-b-0;
    }

    .builder-row-cell {
        @apply space-y-2 md:space-y-0;
    }

    .builder-row-label {
        @apply text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400 md:hidden;
    }

    .builder-line-total {
        @apply flex h-[3.125rem] w-full items-center rounded-2xl border border-slate-200 bg-slate-50 px-4 text-[15px] font-bold text-slate-900 md:inline-flex md:w-auto;
    }

    .builder-remove {
        @apply inline-flex h-[3.125rem] w-full items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-400 transition duration-200 ease-out hover:-translate-y-0.5 text-slate-950 hover:border-red-200 hover:bg-red-50 hover:text-red-600 active:translate-y-0 md:w-[3.125rem];
    }

    .builder-line-guidance {
        @apply mt-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50/70 px-4 py-3;
    }

    .builder-line-guidance-title {
        @apply text-sm font-bold text-slate-900;
    }

    .builder-line-guidance-copy {
        @apply mt-1 text-xs leading-5 text-slate-500;
    }

    .builder-summary {
        @apply h-fit rounded-[1.5rem] border border-white/70 bg-white/95 p-5 shadow-[0_26px_72px_-38px_rgba(15,23,42,0.55)] backdrop-blur sm:p-7 xl:sticky xl:top-28;
    }

    .builder-summary-list {
        @apply space-y-4;
    }

    .builder-summary-row {
        @apply flex items-center justify-between rounded-2xl border border-slate-100 bg-slate-50/70 px-4 py-3 text-sm text-slate-500;
    }

    .builder-summary-total {
        @apply mt-5 flex items-end justify-between rounded-[1.25rem] bg-ink-950 px-4 py-4 text-white shadow-[0_18px_46px_-30px_rgba(15,23,42,0.75)];
    }

    .builder-summary-total-label {
        @apply text-xs font-bold uppercase tracking-[0.18em] text-white/60;
    }

    .builder-summary-total-value {
        @apply text-base font-bold tracking-[-0.01em] text-white;
    }

    .builder-summary-chip {
        @apply mt-4 inline-flex items-center gap-2 rounded-full border border-brand-100 bg-brand-50 px-3 py-2 text-xs font-bold text-brand-600;
    }

    .builder-actions {
        @apply mt-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-1;
    }

    .builder-actions .primary-button,
    .builder-actions .secondary-button {
        @apply w-full;
    }

    .builder-note {
        @apply mt-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm leading-6 text-slate-500;
    }

    .builder-animate-in {
        animation: builderFadeIn 180ms ease-out;
    }

    .global-search {
        @apply relative z-[70] w-full flex-1 lg:max-w-[420px];
    }

    .global-search-leading {
        @apply absolute left-4 top-1/2 z-10 -translate-y-1/2 text-sm text-slate-400;
    }

    .global-search-input {
        @apply h-11 w-full rounded-full border border-slate-200 bg-white/90 pl-11 pr-4 text-sm text-slate-900 shadow-[0_12px_34px_-28px_rgba(15,23,42,0.35)] outline-none transition duration-200 placeholder:text-slate-400 focus:border-brand-500 focus:bg-white focus:ring-4 focus:ring-brand-50;
    }

    .global-search-results {
        @apply absolute left-0 right-0 top-[calc(100%+0.75rem)] z-[90] overflow-hidden rounded-[1.25rem] border border-slate-200 bg-white/98 shadow-[0_28px_90px_-42px_rgba(15,23,42,0.55)] backdrop-blur;
    }

    .global-search-result {
        @apply flex items-center gap-3 px-4 py-3 text-slate-900 transition duration-150 hover:bg-slate-50;
    }

    .global-search-result-active {
        @apply bg-slate-50;
    }

    .global-search-result-icon {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-xl bg-brand-50 text-brand-600;
    }

    .global-search-result-title {
        @apply block truncate text-sm font-semibold text-slate-900;
    }

    .global-search-result-subtitle {
        @apply mt-0.5 block truncate text-xs text-slate-500;
    }

    .global-search-empty {
        @apply p-4 text-sm text-slate-500;
    }

    .record-register {
        @apply overflow-hidden rounded-[1.75rem];
    }

    .record-toolbar {
        @apply flex flex-col gap-4 border-b border-slate-200/80 pb-5 lg:flex-row lg:items-end lg:justify-between;
    }

    .record-grid {
        @apply mt-6 grid gap-4;
    }

    .record-card {
        @apply rounded-[1.35rem] border border-slate-200/90 bg-white/95 p-4 shadow-[0_16px_42px_-34px_rgba(15,23,42,0.35)] transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-[0_24px_60px_-36px_rgba(15,23,42,0.4)] sm:p-5;
    }

    .record-main {
        @apply grid gap-4 min-[900px]:grid-cols-[minmax(0,1.25fr)_minmax(180px,0.8fr)_minmax(160px,0.7fr)_auto] min-[900px]:items-center;
    }

    .record-title {
        @apply text-[15px] font-bold tracking-[-0.01em] text-slate-900;
    }

    .record-subtitle {
        @apply mt-1 text-xs text-slate-500;
    }

    .record-label {
        @apply text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400;
    }

    .record-value {
        @apply mt-1 text-[15px] font-bold text-slate-900;
    }

    .audit-hero {
        @apply items-start gap-5;
    }

    .audit-hero-side {
        @apply flex w-full flex-col gap-3 sm:w-auto sm:items-end;
    }

    .audit-hero-stat {
        @apply min-w-[12rem] rounded-[1.35rem] border border-slate-200/80 bg-white/85 px-4 py-4 text-left shadow-[0_18px_48px_-36px_rgba(15,23,42,0.4)] backdrop-blur sm:text-right;
    }

    .audit-hero-stat small {
        @apply text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500;
    }

    .audit-hero-stat strong {
        @apply mt-2 block text-base font-bold tracking-[-0.02em] text-slate-950;
    }

    .audit-hero-stat span {
        @apply mt-1 block text-xs leading-5 text-slate-500;
    }

    .audit-filter-card {
        @apply rounded-[1.75rem] border border-white/70 bg-white/90 p-5 shadow-[0_22px_64px_-40px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7;
    }

    .audit-filter-header {
        @apply flex flex-col gap-4 border-b border-slate-200/80 pb-5 xl:flex-row xl:items-start xl:justify-between;
    }

    .audit-filter-copy {
        @apply mt-2 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .audit-filter-summary {
        @apply flex flex-wrap items-center gap-2;
    }

    .audit-filter-summary-pill {
        @apply inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.14em] text-blue-700;
    }

    .audit-filter-summary-copy {
        @apply text-xs font-medium text-slate-500;
    }

    .audit-filter-form {
        @apply mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3;
    }

    .audit-filter-field {
        @apply block min-w-0;
    }

    .audit-filter-search {
        @apply md:col-span-2 xl:col-span-3;
    }

    .audit-filter-field span {
        @apply mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-slate-500;
    }

    .audit-filter-actions {
        @apply mt-2 flex min-w-0 flex-col gap-2 border-t border-slate-200/70 pt-5 sm:flex-row sm:flex-wrap sm:justify-center md:col-span-2 xl:col-span-3;
    }

    .audit-filter-submit,
    .audit-filter-reset {
        @apply w-full justify-center sm:w-auto sm:min-w-[140px];
    }

    .audit-log-shell {
        @apply overflow-hidden;
    }

    .audit-log-toolbar {
        @apply gap-5;
    }

    .audit-log-copy {
        @apply mt-2 max-w-2xl text-sm leading-6 text-slate-500;
    }

    .audit-log-toolbar-stat {
        @apply rounded-[1.25rem] border border-slate-200/80 bg-slate-50/80 px-4 py-3;
    }

    .audit-log-toolbar-stat strong {
        @apply block text-xl font-bold tracking-[-0.03em] text-slate-950;
    }

    .audit-log-toolbar-stat span {
        @apply mt-1 block text-xs leading-5 text-slate-500;
    }

    .audit-log-grid {
        @apply gap-5;
    }

    .audit-log-card {
        @apply p-4 sm:p-5 lg:p-6;
    }

    .audit-log-card-top {
        @apply flex flex-col gap-4 border-b border-slate-200/80 pb-5 lg:flex-row lg:items-start lg:justify-between;
    }

    .audit-log-main {
        @apply min-w-0;
    }

    .audit-log-badges {
        @apply flex flex-wrap items-center gap-2;
    }

    .audit-log-title {
        @apply mt-3 text-[15px] font-bold leading-6 tracking-[-0.01em] text-slate-950 sm:text-base;
    }

    .audit-log-timestamp {
        @apply rounded-[1.2rem] border border-slate-200/80 bg-slate-50/85 px-4 py-3 lg:min-w-[11rem] lg:text-right;
    }

    .audit-log-timestamp .record-value {
        @apply mt-2;
    }

    .audit-log-meta-grid {
        @apply mt-5 grid gap-4 xl:grid-cols-[minmax(0,0.7fr)_minmax(0,0.95fr)_minmax(0,1.35fr)];
    }

    .audit-log-meta-panel {
        @apply rounded-[1.2rem] border border-slate-200/80 bg-slate-50/85 p-4;
    }

    .audit-log-device {
        overflow-wrap: anywhere;
    }

    .audit-log-metadata-panel {
        @apply min-w-0;
    }

    .audit-log-metadata-list {
        @apply mt-3 flex flex-wrap gap-2;
    }

    .audit-log-metadata-chip {
        @apply inline-flex max-w-full flex-col rounded-2xl border border-slate-200 bg-white px-3 py-2 text-left shadow-[0_12px_28px_-24px_rgba(15,23,42,0.35)];
    }

    .audit-log-metadata-chip strong {
        @apply text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500;
    }

    .audit-log-metadata-chip em {
        @apply mt-1 not-italic text-sm font-medium leading-5 text-slate-800;
        overflow-wrap: anywhere;
    }

    .audit-empty-state {
        @apply py-10;
    }

    .status-badge {
        @apply inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full border border-transparent px-3 py-1 text-xs font-bold capitalize leading-none;
    }

    .status-draft {
        @apply bg-slate-100 text-slate-600;
    }

    .status-sent {
        @apply bg-brand-50 text-brand-600;
    }

    .status-paid,
    .status-accepted {
        @apply bg-green-50 text-green-700;
    }

    .status-partially-paid {
        @apply bg-amber-50 text-amber-700;
    }

    .status-overdue,
    .status-expired {
        @apply bg-red-50 text-red-600;
    }

    .status-cancelled {
        @apply bg-slate-100 text-slate-500;
    }

    .status-void {
        @apply bg-zinc-900 text-white;
    }

    .record-actions {
        @apply flex flex-wrap gap-2 min-[900px]:justify-end;
    }

    .record-actions form,
    .invoice-action-panel form,
    .client-card-actions form {
        @apply inline-flex;
    }

    .icon-action {
        @apply relative inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-[0.95rem] border border-slate-200 bg-white text-slate-600 transition duration-150 hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 active:translate-y-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-50;
    }

    .icon-action-primary {
        @apply text-brand-600;
    }

    .icon-action-danger {
        @apply text-red-600;
    }

    .icon-action::after {
        content: attr(data-tooltip);
        @apply pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg bg-slate-900 px-2 py-1 text-[0.72rem] text-white opacity-0 transition duration-150;
    }

    .icon-action:hover::after,
    .icon-action:focus-visible::after {
        @apply translate-y-0 opacity-100;
    }

    .invoice-toolbar {
        @apply lg:items-center;
    }

    .invoice-list-grid {
        @apply gap-5;
    }

    .invoice-card {
        @apply rounded-[1.5rem] border border-slate-200/90 bg-white/95 p-4 shadow-[0_16px_42px_-34px_rgba(15,23,42,0.35)] transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-[0_24px_60px_-36px_rgba(15,23,42,0.4)] sm:p-5;
    }

    .invoice-card-main {
        @apply grid gap-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(260px,0.62fr)_auto] xl:items-center;
    }

    .invoice-mini-metric {
        @apply rounded-2xl border border-slate-200/80 bg-slate-50/80 px-4 py-3;
    }

    .invoice-mini-metric span {
        @apply block text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400;
    }

    .invoice-mini-metric strong {
        @apply mt-1 block truncate text-sm font-semibold text-slate-800;
    }

    .invoice-amount-panel {
        @apply rounded-[1.25rem] border border-slate-200/80 bg-slate-50/80 p-4;
    }

    .invoice-action-panel {
        @apply flex flex-wrap gap-2 xl:max-w-[170px] xl:justify-end;
    }

    .invoice-detail-hero {
        @apply overflow-hidden rounded-[1.75rem] border border-white/70 bg-white/90 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur;
    }

    .invoice-detail-hero-top {
        @apply flex flex-col gap-5 border-b border-slate-200/80 p-6 sm:p-7 lg:flex-row lg:items-start lg:justify-between;
    }

    .invoice-detail-title {
        @apply mt-3 text-base font-bold tracking-[-0.02em] text-slate-950;
    }

    .invoice-detail-subtitle {
        @apply mt-2 text-sm leading-6 text-slate-500;
    }

    .invoice-hero-stats {
        @apply grid gap-4 p-6 sm:grid-cols-2 sm:p-7 xl:grid-cols-4;
    }

    .invoice-hero-stat {
        @apply rounded-[1.25rem] border border-slate-200/80 bg-slate-50/80 p-4;
    }

    .invoice-hero-stat span {
        @apply block text-[11px] font-bold uppercase tracking-[0.16em] text-slate-400;
    }

    .invoice-hero-stat strong {
        @apply mt-2 block text-[15px] font-bold text-slate-900;
    }

    .invoice-side-card {
        @apply h-fit rounded-[1.75rem] border border-white/70 bg-white/90 p-6 shadow-[0_20px_60px_-32px_rgba(15,23,42,0.5)] backdrop-blur sm:p-7 xl:sticky xl:top-28;
    }

    .invoice-progress-bar {
        @apply h-2 overflow-hidden rounded-full bg-slate-100;
    }

    .invoice-progress-fill {
        @apply h-full rounded-full bg-slate-950 transition-all duration-300;
    }

    .invoice-action-strip {
        @apply mt-6 grid gap-3 rounded-[1.35rem] border border-slate-200 bg-white p-4 sm:grid-cols-2 lg:grid-cols-4;
    }

    .invoice-action-tile {
        @apply inline-flex items-center justify-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700 transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white hover:text-slate-950;
    }

    .app-footer {
        @apply mt-8 pb-2 pt-5 text-center text-sm text-slate-400;
    }

    .ajax-loading {
        @apply pointer-events-none relative opacity-70;
    }

    .ajax-loading::after {
        content: '';
        @apply absolute inset-x-6 top-6 h-1 overflow-hidden rounded-full bg-slate-100;
        background-image: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.35), transparent);
        animation: tarnovaLoading 900ms ease-in-out infinite;
    }

    .modal-backdrop {
        @apply fixed inset-0 z-50 flex items-center justify-center bg-slate-950/35 px-4 py-8 opacity-0 backdrop-blur-sm transition duration-200;
    }

    .modal-backdrop.is-open {
        @apply opacity-100;
    }

    .modal-panel {
        @apply max-h-[calc(100vh-4rem)] w-full max-w-[440px] scale-95 overflow-y-auto rounded-[1.75rem] border border-white/80 bg-white/95 p-6 text-center shadow-[0_32px_100px_-48px_rgba(15,23,42,0.65)] transition duration-200 sm:p-7;
    }

    .modal-backdrop.is-open .modal-panel {
        @apply scale-100;
    }

    .modal-icon {
        @apply mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 shadow-[0_18px_42px_-32px_rgba(37,99,235,0.7)];
    }

    .modal-title {
        @apply mt-5 text-sm font-medium tracking-[-0.01em] text-slate-900;
    }

    .modal-copy {
        @apply mt-3 text-sm leading-6 text-slate-500;
    }

    .modal-actions {
        @apply mt-7 flex flex-col-reverse gap-3 sm:flex-row sm:justify-center;
    }

    .modal-actions .primary-button,
    .modal-actions .secondary-button,
    .modal-actions .danger-button {
        @apply w-full min-w-[140px] sm:w-auto;
    }

    .send-modal-button {
        @apply gap-0;
    }

    .loading-dots {
        @apply ml-0.5 inline-flex tracking-[0.08em];
    }

    .loading-dots span {
        opacity: 0.25;
        animation: dotFade 1.2s infinite ease-in-out;
    }

    .loading-dots span:nth-child(1) {
        animation-delay: 0s;
    }

    .loading-dots span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .loading-dots span:nth-child(3) {
        animation-delay: 0.4s;
    }

    .toast-stack {
        @apply fixed bottom-5 right-5 z-[60] flex w-[calc(100%-2.5rem)] max-w-sm flex-col gap-3 sm:bottom-6 sm:right-6;
    }

    .toast {
        @apply rounded-2xl border bg-white/95 px-4 py-3 text-sm font-medium leading-6 text-slate-800 shadow-[0_22px_60px_-36px_rgba(15,23,42,0.55)] backdrop-blur transition duration-200;
    }

    .toast-success {
        @apply border-green-200;
    }

    .toast-error {
        @apply border-red-200;
    }

    .theme-choice {
        @apply flex cursor-pointer items-start gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50;
    }

    .theme-choice input {
        @apply mt-1 h-4 w-4 shrink-0 rounded-full border-2 border-slate-400 bg-white accent-ink-950 transition focus:outline-none focus:ring-4 focus:ring-brand-50;
    }

    .theme-choice:has(input:checked) {
        @apply border-brand-100 bg-brand-50 shadow-[0_16px_42px_-34px_rgba(37,99,235,0.55)];
    }

    .theme-choice-title {
        @apply block text-sm font-semibold text-slate-900;
    }

    .theme-choice-copy {
        @apply mt-1 block text-xs leading-5 text-slate-500;
    }

    .theme-switch-wrap {
        @apply mt-0;
    }

    .theme-switch-card {
        @apply flex flex-col gap-5 rounded-[6px] border border-slate-200 bg-[#eef2f7] px-4 py-5 shadow-[9px_9px_22px_rgba(148,163,184,0.28),-9px_-9px_22px_rgba(255,255,255,0.95)] transition duration-300 ease-out sm:px-5;
    }

    .theme-switch-title {
        @apply text-sm font-semibold text-slate-900;
    }

    .theme-switch-copy {
        @apply mt-1 text-xs leading-5 text-slate-500;
    }

    .theme-switch-stage {
        @apply grid grid-cols-[1fr_auto_1fr] items-center gap-2.5 sm:gap-4;
    }

    .theme-switch-side-label {
        @apply flex flex-col text-[0.6rem] font-extrabold uppercase leading-[0.78rem] tracking-[0.16em] text-slate-400 transition duration-300 ease-out sm:text-[0.7rem] sm:leading-[0.9rem];
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .theme-switch-side-label-light {
        @apply items-end text-right;
    }

    .theme-switch-side-label-dark {
        @apply items-start text-left;
    }

    .theme-switch {
        @apply relative inline-flex shrink-0 cursor-pointer items-center rounded-full outline-none focus-within:ring-4 focus-within:ring-brand-50;
    }

    .theme-switch input {
        @apply sr-only;
    }

    .theme-switch-track {
        @apply relative block h-[2.95rem] w-[7.25rem] rounded-full border border-white/80 bg-[#dfe4ec] transition duration-300 ease-[cubic-bezier(.22,1,.36,1)] sm:h-[3.2rem] sm:w-[7.9rem];
        box-shadow:
            inset 6px 6px 12px rgba(123, 135, 153, 0.34),
            inset -5px -5px 12px rgba(255, 255, 255, 0.84),
            0 12px 22px -18px rgba(15, 23, 42, 0.46);
    }

    .theme-switch-knob {
        @apply absolute left-1.5 top-1/2 h-[2.25rem] w-[2.25rem] -translate-y-1/2 rounded-full bg-gradient-to-br from-white to-slate-100 transition duration-300 ease-[cubic-bezier(.22,1,.36,1)] sm:h-[2.45rem] sm:w-[2.45rem];
        box-shadow:
            6px 6px 12px rgba(123, 135, 153, 0.34),
            -5px -5px 10px rgba(255, 255, 255, 0.92),
            inset 1px 1px 1px rgba(255, 255, 255, 0.9);
    }

    .theme-switch input:checked + .theme-switch-track {
        @apply border-slate-950/70 bg-[#232838];
        box-shadow:
            inset 7px 7px 14px rgba(0, 0, 0, 0.46),
            inset -5px -5px 12px rgba(71, 85, 105, 0.18),
            0 14px 26px -20px rgba(0, 0, 0, 0.82);
    }

    .theme-switch input:checked + .theme-switch-track .theme-switch-knob {
        @apply translate-x-[3.45rem] bg-gradient-to-br from-slate-500 to-slate-700 sm:translate-x-[3.85rem];
        box-shadow:
            7px 7px 13px rgba(0, 0, 0, 0.5),
            -4px -4px 10px rgba(148, 163, 184, 0.14),
            inset 1px 1px 1px rgba(255, 255, 255, 0.14);
    }

    .theme-switch-status {
        @apply mt-3 min-h-5 text-xs font-medium text-slate-500;
    }

    .theme-switch-wrap:not(:has(input:checked)) .theme-switch-side-label-light,
    .theme-switch-wrap:has(input:checked) .theme-switch-side-label-dark {
        @apply text-slate-700;
    }
}

html[data-effective-theme='dark'] {
    color-scheme: dark;
}

html[data-effective-theme='dark'] body {
    background-color: #05070d;
    color: #f8fafc;
    background-image:
        radial-gradient(circle at 14% 8%, rgba(96, 165, 250, 0.13), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.07), transparent 24%),
        linear-gradient(180deg, #05070d 0%, #0b1020 45%, #060913 100%);
}

html[data-effective-theme='dark'] .auth-backdrop {
    background:
        radial-gradient(circle at 14% 14%, rgba(96, 165, 250, 0.16), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #05070d 0%, #0b1020 54%, #060913 100%);
}

html[data-effective-theme='dark'] .auth-grain {
    mix-blend-mode: screen;
    opacity: 0.2;
}

html[data-effective-theme='dark'] .shell-card,
html[data-effective-theme='dark'] .auth-card,
html[data-effective-theme='dark'] .dashboard-sidebar,
html[data-effective-theme='dark'] .dashboard-header,
html[data-effective-theme='dark'] .stat-card,
html[data-effective-theme='dark'] .section-card,
html[data-effective-theme='dark'] .executive-hero,
html[data-effective-theme='dark'] .executive-stat-card,
html[data-effective-theme='dark'] .executive-card,
html[data-effective-theme='dark'] .client-directory-card,
html[data-effective-theme='dark'] .client-section-card,
html[data-effective-theme='dark'] .client-filter-card,
html[data-effective-theme='dark'] .client-statement-hero,
html[data-effective-theme='dark'] .client-statement-stat,
html[data-effective-theme='dark'] .client-card,
html[data-effective-theme='dark'] .audit-filter-card,
html[data-effective-theme='dark'] .audit-hero-stat,
html[data-effective-theme='dark'] .audit-log-timestamp,
html[data-effective-theme='dark'] .audit-log-meta-panel,
html[data-effective-theme='dark'] .audit-log-metadata-chip,
html[data-effective-theme='dark'] .audit-log-toolbar-stat,
html[data-effective-theme='dark'] .settings-hero,
html[data-effective-theme='dark'] .settings-card,
html[data-effective-theme='dark'] .settings-save-card,
html[data-effective-theme='dark'] .settings-alert,
html[data-effective-theme='dark'] .document-form-intro,
html[data-effective-theme='dark'] .builder-card,
html[data-effective-theme='dark'] .builder-summary,
html[data-effective-theme='dark'] .builder-validation-panel,
html[data-effective-theme='dark'] .record-card,
html[data-effective-theme='dark'] .invoice-card,
html[data-effective-theme='dark'] .invoice-detail-hero,
html[data-effective-theme='dark'] .invoice-side-card,
html[data-effective-theme='dark'] [class~='bg-white'],
html[data-effective-theme='dark'] [class~='bg-white/90'],
html[data-effective-theme='dark'] [class~='bg-white/95'],
html[data-effective-theme='dark'] [class~='bg-white/98'] {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.86) !important;
    box-shadow: 0 28px 80px -42px rgba(0, 0, 0, 0.78) !important;
}

html[data-effective-theme='dark'] .dashboard-sidebar,
html[data-effective-theme='dark'] .dashboard-header,
html[data-effective-theme='dark'] .section-card,
html[data-effective-theme='dark'] .builder-card,
html[data-effective-theme='dark'] .builder-summary,
html[data-effective-theme='dark'] .record-card {
    backdrop-filter: blur(18px);
}

html[data-effective-theme='dark'] .stat-card-accent {
    border-color: rgba(96, 165, 250, 0.35) !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92)) !important;
}

html[data-effective-theme='dark'] .executive-hero-panel,
html[data-effective-theme='dark'] .executive-stat-card-primary,
html[data-effective-theme='dark'] .client-statement-stat-paid,
html[data-effective-theme='dark'] .client-action-primary,
html[data-effective-theme='dark'] .client-avatar,
html[data-effective-theme='dark'] .settings-save-card {
    border-color: rgba(96, 165, 250, 0.35) !important;
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(30, 41, 59, 0.9)) !important;
}

html[data-effective-theme='dark'] .dashboard-brand,
html[data-effective-theme='dark'] .executive-card-header,
html[data-effective-theme='dark'] .client-directory-header,
html[data-effective-theme='dark'] .client-section-header,
html[data-effective-theme='dark'] .client-filter-header,
html[data-effective-theme='dark'] .settings-section-header,
html[data-effective-theme='dark'] .builder-header,
html[data-effective-theme='dark'] .record-toolbar,
html[data-effective-theme='dark'] .builder-summary-total,
html[data-effective-theme='dark'] [class~='border-t'],
html[data-effective-theme='dark'] [class~='border-b'],
html[data-effective-theme='dark'] [class~='border-slate-200'],
html[data-effective-theme='dark'] [class~='border-slate-200/80'],
html[data-effective-theme='dark'] [class~='border-slate-100'] {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-effective-theme='dark'] .dashboard-brand-title,
html[data-effective-theme='dark'] .dashboard-title,
html[data-effective-theme='dark'] .executive-hero-title,
html[data-effective-theme='dark'] .executive-card-title,
html[data-effective-theme='dark'] .executive-stat-value,
html[data-effective-theme='dark'] .executive-mini-panel strong,
html[data-effective-theme='dark'] .executive-empty-title,
html[data-effective-theme='dark'] .executive-list-main strong,
html[data-effective-theme='dark'] .executive-list-amount,
html[data-effective-theme='dark'] .top-client-main strong,
html[data-effective-theme='dark'] .top-client-revenue,
html[data-effective-theme='dark'] .comparison-value,
html[data-effective-theme='dark'] .executive-table-link,
html[data-effective-theme='dark'] .executive-table-amount,
html[data-effective-theme='dark'] .overdue-amount-panel strong,
html[data-effective-theme='dark'] .client-directory-title,
html[data-effective-theme='dark'] .client-section-title,
html[data-effective-theme='dark'] .client-statement-title,
html[data-effective-theme='dark'] .client-name,
html[data-effective-theme='dark'] .audit-hero-stat strong,
html[data-effective-theme='dark'] .audit-log-title,
html[data-effective-theme='dark'] .audit-log-metadata-chip em,
html[data-effective-theme='dark'] .audit-log-toolbar-stat strong,
html[data-effective-theme='dark'] .client-detail-list strong,
html[data-effective-theme='dark'] .client-statement-stat strong,
html[data-effective-theme='dark'] .client-empty-state p,
html[data-effective-theme='dark'] .client-table a,
html[data-effective-theme='dark'] .client-table [class~='text-slate-900'],
html[data-effective-theme='dark'] .settings-hero-title,
html[data-effective-theme='dark'] .settings-section-title,
html[data-effective-theme='dark'] .settings-logo-preview p,
html[data-effective-theme='dark'] .settings-save-title,
html[data-effective-theme='dark'] .auth-brand,
html[data-effective-theme='dark'] .auth-title,
html[data-effective-theme='dark'] .section-title,
html[data-effective-theme='dark'] .document-form-intro-title,
html[data-effective-theme='dark'] .builder-title,
html[data-effective-theme='dark'] .builder-label,
html[data-effective-theme='dark'] .builder-line-guidance-title,
html[data-effective-theme='dark'] .builder-validation-title,
html[data-effective-theme='dark'] .builder-line-total,
html[data-effective-theme='dark'] .builder-summary-total-value,
html[data-effective-theme='dark'] .document-number,
html[data-effective-theme='dark'] .document-total,
html[data-effective-theme='dark'] .record-title,
html[data-effective-theme='dark'] .record-value,
html[data-effective-theme='dark'] .invoice-detail-title,
html[data-effective-theme='dark'] .invoice-mini-metric strong,
html[data-effective-theme='dark'] .invoice-hero-stat strong,
html[data-effective-theme='dark'] .global-search-result-title,
html[data-effective-theme='dark'] .modal-title,
html[data-effective-theme='dark'] .theme-choice-title,
html[data-effective-theme='dark'] .label,
html[data-effective-theme='dark'] [class~='text-slate-900'],
html[data-effective-theme='dark'] [class~='text-ink-950'],
html[data-effective-theme='dark'] [class~='text-ink-900'] {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .dashboard-kicker,
html[data-effective-theme='dark'] .executive-hero-copy,
html[data-effective-theme='dark'] .executive-card-copy,
html[data-effective-theme='dark'] .executive-eyebrow,
html[data-effective-theme='dark'] .executive-stat-label,
html[data-effective-theme='dark'] .executive-stat-copy,
html[data-effective-theme='dark'] .executive-mini-panel span,
html[data-effective-theme='dark'] .executive-empty-copy,
html[data-effective-theme='dark'] .executive-list-main small,
html[data-effective-theme='dark'] .top-client-main small,
html[data-effective-theme='dark'] .comparison-label,
html[data-effective-theme='dark'] .overdue-amount-panel p,
html[data-effective-theme='dark'] .overdue-amount-panel span,
html[data-effective-theme='dark'] .client-directory-copy,
html[data-effective-theme='dark'] .client-section-copy,
html[data-effective-theme='dark'] .client-statement-copy,
html[data-effective-theme='dark'] .audit-filter-copy,
html[data-effective-theme='dark'] .audit-filter-summary-copy,
html[data-effective-theme='dark'] .audit-hero-stat small,
html[data-effective-theme='dark'] .audit-hero-stat span,
html[data-effective-theme='dark'] .audit-log-copy,
html[data-effective-theme='dark'] .audit-log-toolbar-stat span,
html[data-effective-theme='dark'] .audit-log-metadata-chip strong,
html[data-effective-theme='dark'] .client-contact-list,
html[data-effective-theme='dark'] .client-detail-label,
html[data-effective-theme='dark'] .client-detail-list span,
html[data-effective-theme='dark'] .client-filter-field span,
html[data-effective-theme='dark'] .audit-filter-field span,
html[data-effective-theme='dark'] .client-statement-stat p,
html[data-effective-theme='dark'] .client-empty-state small,
html[data-effective-theme='dark'] .settings-hero-copy,
html[data-effective-theme='dark'] .settings-section-copy,
html[data-effective-theme='dark'] .settings-field > span,
html[data-effective-theme='dark'] .settings-field em,
html[data-effective-theme='dark'] .settings-reminder-field span,
html[data-effective-theme='dark'] .settings-reminder-field em,
html[data-effective-theme='dark'] .settings-save-copy,
html[data-effective-theme='dark'] .dashboard-brand-copy,
html[data-effective-theme='dark'] .auth-subtitle,
html[data-effective-theme='dark'] .document-form-intro-copy,
html[data-effective-theme='dark'] .builder-subtitle,
html[data-effective-theme='dark'] .builder-summary-row,
html[data-effective-theme='dark'] .builder-summary-total-label,
html[data-effective-theme='dark'] .builder-note,
html[data-effective-theme='dark'] .builder-help,
html[data-effective-theme='dark'] .builder-line-guidance-copy,
html[data-effective-theme='dark'] .document-meta,
html[data-effective-theme='dark'] .document-status,
html[data-effective-theme='dark'] .record-subtitle,
html[data-effective-theme='dark'] .record-label,
html[data-effective-theme='dark'] .invoice-detail-subtitle,
html[data-effective-theme='dark'] .invoice-mini-metric span,
html[data-effective-theme='dark'] .invoice-hero-stat span,
html[data-effective-theme='dark'] .global-search-result-subtitle,
html[data-effective-theme='dark'] .global-search-empty,
html[data-effective-theme='dark'] .modal-copy,
html[data-effective-theme='dark'] .theme-choice-copy,
html[data-effective-theme='dark'] .app-footer,
html[data-effective-theme='dark'] [class~='text-slate-500'],
html[data-effective-theme='dark'] [class~='text-slate-400'],
html[data-effective-theme='dark'] [class~='text-ink-800'] {
    color: #94a3b8 !important;
}

html[data-effective-theme='dark'] .primary-button,
html[data-effective-theme='dark'] .auth-submit {
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%) !important;
    color: #020617 !important;
    box-shadow: 0 18px 44px -28px rgba(226, 232, 240, 0.5) !important;
}

html[data-effective-theme='dark'] .primary-button:hover,
html[data-effective-theme='dark'] .auth-submit:hover {
    filter: brightness(1.04);
}

html[data-effective-theme='dark'] .secondary-button,
html[data-effective-theme='dark'] .icon-action,
html[data-effective-theme='dark'] .invoice-action-tile,
html[data-effective-theme='dark'] .builder-add-button,
html[data-effective-theme='dark'] .builder-remove,
html[data-effective-theme='dark'] .executive-mini-panel,
html[data-effective-theme='dark'] .executive-empty-state,
html[data-effective-theme='dark'] .executive-list-row,
html[data-effective-theme='dark'] .top-client-row,
html[data-effective-theme='dark'] .comparison-card,
html[data-effective-theme='dark'] .overdue-amount-panel,
html[data-effective-theme='dark'] .client-search-input,
html[data-effective-theme='dark'] .client-icon-action,
html[data-effective-theme='dark'] .client-detail-panel,
html[data-effective-theme='dark'] .client-empty-wrap,
html[data-effective-theme='dark'] .client-empty-state,
html[data-effective-theme='dark'] .audit-filter-summary-pill,
html[data-effective-theme='dark'] .settings-reminder-field,
html[data-effective-theme='dark'] .settings-logo-preview,
html[data-effective-theme='dark'] .theme-choice,
html[data-effective-theme='dark'] [class~='bg-slate-50'],
html[data-effective-theme='dark'] [class~='bg-slate-50/80'],
html[data-effective-theme='dark'] [class~='bg-slate-50/90'],
html[data-effective-theme='dark'] [class~='bg-slate-100'] {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(30, 41, 59, 0.76) !important;
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .secondary-button:hover,
html[data-effective-theme='dark'] .icon-action:hover,
html[data-effective-theme='dark'] .invoice-action-tile:hover,
html[data-effective-theme='dark'] .builder-remove:hover,
html[data-effective-theme='dark'] .theme-choice:hover {
    border-color: rgba(203, 213, 225, 0.34) !important;
    background: rgba(51, 65, 85, 0.84) !important;
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .theme-choice:has(input:checked),
html[data-effective-theme='dark'] .sidebar-link-active {
    border-color: rgba(96, 165, 250, 0.36) !important;
    background: rgba(37, 99, 235, 0.16) !important;
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .sidebar-link {
    color: #94a3b8;
}

html[data-effective-theme='dark'] .sidebar-section-title {
    color: #64748b;
}

html[data-effective-theme='dark'] .sidebar-link:hover {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.68);
    color: #f8fafc;
}

html[data-effective-theme='dark'] .sidebar-link-icon,
html[data-effective-theme='dark'] .sidebar-link-active .sidebar-link-icon,
html[data-effective-theme='dark'] .global-search-result-icon,
html[data-effective-theme='dark'] .empty-state-icon,
html[data-effective-theme='dark'] .executive-stat-icon,
html[data-effective-theme='dark'] .invoice-timeline-icon,
html[data-effective-theme='dark'] .executive-empty-icon,
html[data-effective-theme='dark'] .executive-list-icon,
html[data-effective-theme='dark'] .client-stat-icon,
html[data-effective-theme='dark'] .client-empty-state span,
html[data-effective-theme='dark'] .settings-section-icon,
html[data-effective-theme='dark'] .settings-hero-badge,
html[data-effective-theme='dark'] .settings-alert span,
html[data-effective-theme='dark'] .modal-icon,
html[data-effective-theme='dark'] .document-form-intro-badge,
html[data-effective-theme='dark'] .builder-step,
html[data-effective-theme='dark'] .builder-summary-chip,
html[data-effective-theme='dark'] .builder-validation-icon {
    border-color: rgba(96, 165, 250, 0.24) !important;
    background: rgba(37, 99, 235, 0.16) !important;
    color: #93c5fd !important;
}

html[data-effective-theme='dark'] .builder-input,
html[data-effective-theme='dark'] .builder-select,
html[data-effective-theme='dark'] .builder-textarea,
html[data-effective-theme='dark'] .text-input,
html[data-effective-theme='dark'] .auth-input,
html[data-effective-theme='dark'] .global-search-input,
html[data-effective-theme='dark'] input,
html[data-effective-theme='dark'] select,
html[data-effective-theme='dark'] textarea {
    border-color: rgba(148, 163, 184, 0.24) !important;
    background-color: rgba(2, 6, 23, 0.58) !important;
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] input::placeholder,
html[data-effective-theme='dark'] textarea::placeholder {
    color: #64748b !important;
}

html[data-effective-theme='dark'] .builder-input:focus,
html[data-effective-theme='dark'] .builder-select:focus,
html[data-effective-theme='dark'] .builder-textarea:focus,
html[data-effective-theme='dark'] .text-input:focus,
html[data-effective-theme='dark'] .auth-input:focus,
html[data-effective-theme='dark'] .global-search-input:focus {
    border-color: #e2e8f0 !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16), 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

html[data-effective-theme='dark'] .auth-checkbox,
html[data-effective-theme='dark'] .auth-link {
    color: #cbd5e1;
}

html[data-effective-theme='dark'] .auth-checkbox:hover,
html[data-effective-theme='dark'] .auth-link:hover {
    color: #f8fafc;
}

html[data-effective-theme='dark'] .auth-checkbox input,
html[data-effective-theme='dark'] .theme-choice input {
    border-color: #94a3b8 !important;
    background: #020617 !important;
    accent-color: #e2e8f0;
}

html[data-effective-theme='dark'] .theme-switch-card {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.78) !important;
    box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.34), -10px -10px 24px rgba(51, 65, 85, 0.12) !important;
}

html[data-effective-theme='dark'] .theme-switch-title {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .theme-switch-copy,
html[data-effective-theme='dark'] .theme-switch-status {
    color: #94a3b8 !important;
}

html[data-effective-theme='dark'] .theme-switch-track {
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html[data-effective-theme='dark'] .theme-switch-side-label {
    color: #64748b;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.36);
}

html[data-effective-theme='dark'] .theme-switch-wrap:not(:has(input:checked)) .theme-switch-side-label-light,
html[data-effective-theme='dark'] .theme-switch-wrap:has(input:checked) .theme-switch-side-label-dark {
    color: #cbd5e1 !important;
}

html[data-effective-theme='dark'] .builder-items-table,
html[data-effective-theme='dark'] .builder-line-guidance,
html[data-effective-theme='dark'] .revenue-chart-shell,
html[data-effective-theme='dark'] .executive-table-shell,
html[data-effective-theme='dark'] .executive-table tbody,
html[data-effective-theme='dark'] .client-table-shell,
html[data-effective-theme='dark'] .client-table tbody,
html[data-effective-theme='dark'] .global-search-results,
html[data-effective-theme='dark'] .modal-panel,
html[data-effective-theme='dark'] .toast,
html[data-effective-theme='dark'] .empty-state-card {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.96) !important;
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .builder-items-head,
html[data-effective-theme='dark'] .executive-table thead,
html[data-effective-theme='dark'] .executive-table tbody tr:hover,
html[data-effective-theme='dark'] .client-table thead,
html[data-effective-theme='dark'] .client-table tbody tr:hover,
html[data-effective-theme='dark'] .builder-item-row:hover,
html[data-effective-theme='dark'] .document-row:hover,
html[data-effective-theme='dark'] .global-search-result:hover,
html[data-effective-theme='dark'] .global-search-result-active {
    background: rgba(30, 41, 59, 0.72) !important;
}

html[data-effective-theme='dark'] .builder-item-row,
html[data-effective-theme='dark'] .document-row,
html[data-effective-theme='dark'] .invoice-mini-metric,
html[data-effective-theme='dark'] .invoice-amount-panel,
html[data-effective-theme='dark'] .invoice-hero-stat,
html[data-effective-theme='dark'] .revenue-chart-grid span,
html[data-effective-theme='dark'] .executive-table th,
html[data-effective-theme='dark'] .executive-table td,
html[data-effective-theme='dark'] .client-table th,
html[data-effective-theme='dark'] .client-table td,
html[data-effective-theme='dark'] .client-detail-address {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-effective-theme='dark'] .builder-item-row,
html[data-effective-theme='dark'] .document-row,
html[data-effective-theme='dark'] .invoice-mini-metric,
html[data-effective-theme='dark'] .invoice-amount-panel,
html[data-effective-theme='dark'] .invoice-hero-stat {
    background: rgba(15, 23, 42, 0.5) !important;
}

html[data-effective-theme='dark'] .revenue-chart-bar,
html[data-effective-theme='dark'] .top-client-rank {
    background: #e2e8f0 !important;
    color: #020617 !important;
}

html[data-effective-theme='dark'] .invoice-progress-bar {
    background: rgba(51, 65, 85, 0.85) !important;
}

html[data-effective-theme='dark'] .invoice-progress-fill {
    background: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .builder-line-total {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(2, 6, 23, 0.45) !important;
}

html[data-effective-theme='dark'] .builder-summary-total {
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.92), rgba(30, 41, 59, 0.8)) !important;
}

html[data-effective-theme='dark'] .builder-summary-total-label,
html[data-effective-theme='dark'] .builder-summary-total [class~='text-slate-500'] {
    color: rgba(226, 232, 240, 0.66) !important;
}

html[data-effective-theme='dark'] .status-draft {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
}

html[data-effective-theme='dark'] .status-sent {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #93c5fd !important;
}

html[data-effective-theme='dark'] .status-paid,
html[data-effective-theme='dark'] .status-accepted {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #86efac !important;
}

html[data-effective-theme='dark'] .status-partially-paid {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fcd34d !important;
}

html[data-effective-theme='dark'] .status-overdue,
html[data-effective-theme='dark'] .status-expired {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
}

html[data-effective-theme='dark'] .status-cancelled {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
}

html[data-effective-theme='dark'] .status-void {
    background: rgba(3, 7, 18, 0.84) !important;
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .surface-alert.border-green-200,
html[data-effective-theme='dark'] .toast-success {
    border-color: rgba(34, 197, 94, 0.28) !important;
    background: rgba(20, 83, 45, 0.42) !important;
    color: #dcfce7 !important;
}

html[data-effective-theme='dark'] .surface-alert.border-red-200,
html[data-effective-theme='dark'] .toast-error {
    border-color: rgba(248, 113, 113, 0.3) !important;
    background: rgba(127, 29, 29, 0.42) !important;
    color: #fee2e2 !important;
}

html[data-effective-theme='dark'] .ajax-loading::after {
    background-color: rgba(30, 41, 59, 0.9);
    background-image: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.45), transparent);
}

html[data-effective-theme='dark'] .modal-backdrop {
    background: rgba(2, 6, 23, 0.58);
}

html[data-effective-theme='dark'] .auth-loading-overlay {
    background: rgba(2, 6, 23, 0.72);
}

@media print {
    html[data-effective-theme='dark'] body {
        background: #ffffff !important;
        color: #111827 !important;
    }
}

@keyframes builderFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tarnovaLoading {
    from {
        background-position: -240px 0;
    }

    to {
        background-position: 240px 0;
    }
}

@keyframes tarnovaSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dotFade {
    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }
}

@layer components {
    .auth-frame {
        @apply relative w-full max-w-[460px];
    }

    .auth-showcase {
        @apply relative hidden min-h-[720px] overflow-hidden lg:block;
    }

    .auth-showcase-panel {
        @apply relative flex h-full flex-col justify-between overflow-hidden bg-[linear-gradient(145deg,#0b0f19_0%,#111827_48%,#171717_100%)] px-9 py-10 text-white xl:px-12 xl:py-12;
    }

    .auth-showcase-panel::before {
        content: '';
        @apply pointer-events-none absolute inset-x-10 top-24 h-px bg-white/10;
    }

    .auth-showcase-panel::after {
        content: '';
        @apply pointer-events-none absolute -bottom-28 -right-24 h-72 w-72 rounded-full border border-white/10 bg-white/[0.035] blur-2xl;
    }

    .auth-showcase-brand {
        @apply relative z-10 flex items-center justify-between gap-4;
    }

    .auth-showcase-wordmark {
        @apply text-[2rem] font-semibold leading-none tracking-[-0.085em] text-white sm:text-[2.35rem];
    }

    .auth-form-logo-wrap {
        @apply mb-7 flex justify-center;
    }

    .auth-form-logo {
        @apply h-11 w-auto max-w-[190px] object-contain sm:h-12;
    }

    .auth-form-wordmark {
        @apply text-[2rem] font-semibold leading-none tracking-[-0.085em] text-ink-950 sm:text-[2.35rem];
    }

    .auth-logo-left {
        @apply mx-0 h-10;
    }

    .auth-showcase-badge {
        @apply inline-flex items-center rounded-full border border-white/12 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/62;
    }

    .auth-showcase-copy {
        @apply max-w-xl;
    }

    .auth-showcase-kicker {
        @apply text-xs font-semibold uppercase tracking-[0.24em] text-white/48;
    }

    .auth-showcase-title {
        @apply mt-5 max-w-[34rem] text-[1.35rem] font-semibold leading-[1.18] tracking-[-0.035em] text-white;
    }

    .auth-showcase-text {
        @apply mt-5 max-w-lg text-[0.95rem] leading-7 text-white/64;
    }

    .auth-showcase-grid {
        @apply relative z-10 mt-10 grid gap-3 xl:grid-cols-3;
    }

    .auth-showcase-card {
        @apply rounded-[1.25rem] border border-white/10 bg-white/[0.055] p-5 shadow-none backdrop-blur;
    }

    .auth-showcase-card span {
        @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-white/46;
    }

    .auth-showcase-card strong {
        @apply mt-3 block text-sm font-semibold leading-6 text-white/82;
    }

    .auth-card {
        @apply relative w-full rounded-[1.75rem] border border-slate-200/80 bg-white/94 p-7 shadow-[0_28px_90px_-46px_rgba(15,23,42,0.46)] backdrop-blur-xl sm:p-10;
    }

    .auth-kicker {
        @apply text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500;
    }

    .auth-title {
        @apply mt-3 text-xl font-semibold tracking-[-0.03em] text-ink-950 sm:text-xl;
    }

    .auth-subtitle {
        @apply mt-4 text-sm leading-7 text-ink-800;
    }

    .auth-form {
        @apply mt-7 space-y-6;
    }

    .auth-input-shell {
        @apply relative;
    }

    .auth-input-icon {
        @apply pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-slate-400 transition duration-200;
    }

    .auth-input-with-icon {
        @apply pl-11;
    }

    .auth-input-shell:focus-within .auth-input-icon {
        @apply text-ink-900;
    }

    .auth-field-error {
        @apply text-sm font-medium text-danger-500;
    }

    .auth-form-meta {
        @apply space-y-3;
    }

    .auth-meta-copy {
        @apply text-xs leading-6 text-slate-500;
    }

    .auth-panel-danger {
        @apply border border-red-200 bg-red-50 text-red-700;
    }

    .auth-panel-title {
        @apply text-sm font-semibold text-red-800;
    }

    .auth-panel-copy {
        @apply mt-1 text-sm text-red-700;
    }
}

@media (max-width: 1023px) {
    .auth-shell {
        @apply px-4 py-6 sm:px-6;
    }

    .auth-frame {
        @apply max-w-[460px] rounded-[1.8rem];
    }

    .auth-card {
        @apply p-6 sm:p-8;
    }
}

html[data-effective-theme='dark'] .auth-frame {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-effective-theme='dark'] .auth-showcase-panel {
    background: linear-gradient(145deg, #020617 0%, #0f172a 52%, #111827 100%) !important;
}

html[data-effective-theme='dark'] .auth-card {
    background: rgba(15, 23, 42, 0.82) !important;
}

html[data-effective-theme='dark'] .auth-showcase-badge,
html[data-effective-theme='dark'] .auth-showcase-card {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

html[data-effective-theme='dark'] .auth-showcase-kicker,
html[data-effective-theme='dark'] .auth-showcase-badge,
html[data-effective-theme='dark'] .auth-showcase-card span {
    color: rgba(226, 232, 240, 0.58) !important;
}

html[data-effective-theme='dark'] .auth-showcase-text,
html[data-effective-theme='dark'] .auth-showcase-card strong {
    color: rgba(241, 245, 249, 0.82) !important;
}

html[data-effective-theme='dark'] .auth-meta-copy {
    color: #94a3b8 !important;
}

html[data-effective-theme='dark'] .auth-form-wordmark {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .auth-panel-danger {
    border-color: rgba(248, 113, 113, 0.3) !important;
    background: rgba(127, 29, 29, 0.34) !important;
    color: #fee2e2 !important;
}

html[data-effective-theme='dark'] .auth-panel-title,
html[data-effective-theme='dark'] .auth-panel-copy,
html[data-effective-theme='dark'] .auth-field-error {
    color: #fecaca !important;
}

@layer components {
    .section-copy {
        @apply text-sm leading-6 text-slate-500;
    }

    .modal-icon-danger {
        @apply border-red-100 bg-red-50 text-red-600;
    }

    .team-register {
        @apply overflow-hidden;
    }

    .team-grid {
        @apply mt-6 space-y-4;
    }

    .team-card {
        @apply rounded-[1.4rem] border border-slate-200/80 bg-white/90 p-5 shadow-[0_18px_46px_-34px_rgba(15,23,42,0.3)] transition duration-200 ease-out hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-[0_24px_54px_-38px_rgba(15,23,42,0.34)];
    }

    .team-card-main {
        @apply flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between;
    }

    .team-avatar {
        @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-sm font-bold text-brand-600;
    }

    .team-name {
        @apply text-[15px] font-bold tracking-[-0.01em] text-slate-950;
    }

    .team-email {
        @apply mt-2 text-sm text-slate-500;
    }

    .team-self-badge {
        @apply inline-flex rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500;
    }

    .team-actions {
        @apply flex flex-wrap gap-3;
    }
}

html[data-effective-theme='dark'] .team-card {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.82) !important;
}

html[data-effective-theme='dark'] .team-name {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .team-email,
html[data-effective-theme='dark'] .section-copy {
    color: #94a3b8 !important;
}

html[data-effective-theme='dark'] .team-self-badge {
    border-color: rgba(148, 163, 184, 0.16) !important;
    background: rgba(30, 41, 59, 0.82) !important;
    color: #cbd5e1 !important;
}

@layer components {
    .settings-hero-badge-secure {
        @apply border-green-200 bg-green-50 text-green-800;
    }

    .settings-section-icon-danger {
        @apply border-red-100 bg-red-50 text-red-600;
    }

    .mfa-overview-grid {
        @apply grid gap-3 md:grid-cols-3;
    }

    .mfa-overview-card {
        @apply flex items-center gap-3 rounded-[1.5rem] border border-white/70 bg-white/86 p-4 shadow-[0_18px_54px_-42px_rgba(15,23,42,0.45)] backdrop-blur;
    }

    .mfa-overview-card-secure {
        @apply border-green-200 bg-green-50/86;
    }

    .mfa-overview-icon {
        @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 text-slate-600;
    }

    .mfa-overview-card p {
        @apply text-[11px] font-bold uppercase tracking-[0.16em] text-slate-400;
    }

    .mfa-overview-card strong {
        @apply mt-1 block text-sm font-semibold text-slate-950;
    }

    .mfa-intro-panel {
        @apply mt-6 flex flex-col gap-4 rounded-3xl border border-slate-200/80 bg-slate-50/80 p-5 sm:flex-row sm:items-center sm:justify-between;
    }

    .mfa-intro-panel strong {
        @apply block text-sm font-semibold text-slate-950;
    }

    .mfa-intro-panel span {
        @apply mt-1 block text-sm leading-6 text-slate-500;
    }

    .mfa-step-list {
        @apply mt-6 flex flex-wrap gap-2 text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400;
    }

    .mfa-step-list span {
        @apply rounded-full border border-slate-200 bg-white px-3 py-1.5;
    }

    .mfa-step-list .mfa-step-active {
        @apply border-ink-900 bg-ink-950 text-white;
    }

    .mfa-setup-grid {
        @apply mt-5 grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)];
    }

    .mfa-setup-copy {
        @apply min-w-0;
    }

    .mfa-qr-card {
        @apply flex min-h-[260px] items-center justify-center rounded-3xl border border-slate-200/80 bg-white p-5 shadow-[0_20px_48px_-34px_rgba(15,23,42,0.42)];
    }

    .mfa-qr-card svg {
        @apply h-auto w-full max-w-[220px];
    }

    .mfa-manual-label {
        @apply mt-5 text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500;
    }

    .mfa-secret-box {
        @apply mt-2 break-all rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 font-mono text-xs font-semibold tracking-[0.12em] text-slate-700;
    }

    .mfa-status-panel {
        @apply mt-6 flex items-start gap-3 rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800;
    }

    .mfa-status-panel i {
        @apply mt-0.5 text-green-600;
    }

    .mfa-status-panel strong {
        @apply block font-semibold;
    }

    .mfa-status-panel span {
        @apply block text-xs text-green-700;
    }

    .mfa-recovery-grid {
        @apply grid gap-3 sm:grid-cols-2;
    }

    .mfa-recovery-grid code {
        @apply rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-center font-mono text-xs font-semibold tracking-[0.12em] text-slate-800;
    }

    .mfa-sensitive-note {
        @apply mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium leading-6 text-amber-800;
    }
}

html[data-effective-theme='dark'] .settings-hero-badge-secure,
html[data-effective-theme='dark'] .mfa-status-panel {
    border-color: rgba(34, 197, 94, 0.24) !important;
    background: rgba(20, 83, 45, 0.28) !important;
    color: #dcfce7 !important;
}

html[data-effective-theme='dark'] .settings-section-icon-danger {
    border-color: rgba(248, 113, 113, 0.22) !important;
    background: rgba(127, 29, 29, 0.28) !important;
    color: #fecaca !important;
}

html[data-effective-theme='dark'] .mfa-overview-card,
html[data-effective-theme='dark'] .mfa-overview-icon,
html[data-effective-theme='dark'] .mfa-session-count,
html[data-effective-theme='dark'] .mfa-session-card,
html[data-effective-theme='dark'] .mfa-session-icon,
html[data-effective-theme='dark'] .mfa-session-empty,
html[data-effective-theme='dark'] .mfa-intro-panel,
html[data-effective-theme='dark'] .mfa-step-list span,
html[data-effective-theme='dark'] .mfa-qr-card,
html[data-effective-theme='dark'] .mfa-secret-box,
html[data-effective-theme='dark'] .mfa-recovery-grid code {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .mfa-step-list .mfa-step-active {
    border-color: rgba(226, 232, 240, 0.28) !important;
    background: rgba(226, 232, 240, 0.92) !important;
    color: #020617 !important;
}

html[data-effective-theme='dark'] .mfa-overview-card strong,
html[data-effective-theme='dark'] .mfa-session-title-row h4,
html[data-effective-theme='dark'] .mfa-session-empty strong,
html[data-effective-theme='dark'] .mfa-intro-panel strong {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .mfa-overview-card p,
html[data-effective-theme='dark'] .mfa-session-main p,
html[data-effective-theme='dark'] .mfa-session-main small,
html[data-effective-theme='dark'] .mfa-session-empty span,
html[data-effective-theme='dark'] .mfa-intro-panel span,
html[data-effective-theme='dark'] .mfa-manual-label {
    color: #94a3b8 !important;
}

html[data-effective-theme='dark'] .mfa-status-panel i,
html[data-effective-theme='dark'] .mfa-status-panel span {
    color: #bbf7d0 !important;
}

html[data-effective-theme='dark'] .mfa-sensitive-note {
    border-color: rgba(245, 158, 11, 0.24) !important;
    background: rgba(120, 53, 15, 0.28) !important;
    color: #fde68a !important;
}






@layer components {
    @media (hover: none) {
        .icon-action::after,
        .client-icon-action::after {
            display: none;
        }
    }

    @media (max-width: 640px) {
        .record-toolbar,
        .audit-filter-header,
        .settings-section-header,
        .mfa-session-header {
            align-items: stretch;
        }

        .audit-filter-summary,
        .audit-log-badges,
        .invoice-action-panel,
        .record-actions,
        .client-card-actions {
            width: 100%;
        }

        .audit-filter-summary-pill,
        .audit-filter-summary-copy,
        .mfa-session-count {
            max-width: 100%;
            overflow-wrap: anywhere;
        }
    }
}

html[data-effective-theme='dark'] .primary-button:focus-visible,
html[data-effective-theme='dark'] .secondary-button:focus-visible,
html[data-effective-theme='dark'] .danger-button:focus-visible,
html[data-effective-theme='dark'] .icon-action:focus-visible,
html[data-effective-theme='dark'] .client-icon-action:focus-visible,
html[data-effective-theme='dark'] .client-action-primary:focus-visible,
html[data-effective-theme='dark'] .builder-add-button:focus-visible,
html[data-effective-theme='dark'] .auth-submit:focus-visible {
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18), 0 18px 42px -30px rgba(0, 0, 0, 0.72) !important;
}

html[data-effective-theme='dark'] .secondary-button,
html[data-effective-theme='dark'] .builder-add-button,
html[data-effective-theme='dark'] .icon-action,
html[data-effective-theme='dark'] .client-icon-action {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .secondary-button:hover,
html[data-effective-theme='dark'] .builder-add-button:hover,
html[data-effective-theme='dark'] .icon-action:hover,
html[data-effective-theme='dark'] .client-icon-action:hover {
    border-color: rgba(148, 163, 184, 0.38) !important;
    background: rgba(30, 41, 59, 0.84) !important;
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .danger-button {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #fff7f7 !important;
}

html[data-effective-theme='dark'] .status-badge {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

@layer components {
    .dashboard-brand-link {
        @apply block rounded-[1.35rem] -mx-2 px-2 pt-2 transition duration-200 ease-out hover:bg-slate-50/80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-50;
    }

    .dashboard-content,
    .dashboard-content main,
    .executive-hero,
    .executive-card,
    .executive-stat-card,
    .executive-dashboard-grid,
    .comparison-card,
    .top-client-row,
    .audit-log-shell,
    .audit-log-card,
    .audit-log-main,
    .audit-log-meta-grid,
    .audit-log-meta-panel,
    .audit-log-metadata-panel {
        min-width: 0;
    }

    .executive-stat-card > div:last-child,
    .top-client-main,
    .comparison-card,
    .audit-log-toolbar > div:first-child {
        @apply min-w-0;
    }

    .executive-stat-value,
    .executive-panel-value,
    .comparison-value,
    .overdue-amount-panel strong {
        overflow-wrap: anywhere;
    }

    .executive-list-row,
    .top-client-row,
    .comparison-card {
        @apply overflow-hidden;
    }

    .executive-list-amount,
    .top-client-revenue,
    .executive-table-amount {
        @apply whitespace-nowrap;
    }

    .executive-table {
        min-width: 760px;
    }

    .audit-log-card {
        @apply overflow-hidden;
    }

    .audit-log-title,
    .audit-log-meta-panel .record-value,
    .audit-log-meta-panel .record-subtitle,
    .audit-log-metadata-chip em {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .audit-log-badges .status-badge {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .audit-log-metadata-list {
        min-width: 0;
    }

    .audit-log-metadata-chip {
        min-width: 0;
        flex: 1 1 180px;
    }

    .audit-log-metadata-chip em {
        max-width: 100%;
    }

    @media (max-width: 640px) {
        .dashboard-shell {
            @apply gap-4 p-3;
        }

        .dashboard-header,
        .executive-hero,
        .executive-card,
        .audit-filter-card,
        .section-card {
            @apply rounded-[1.35rem] p-4;
        }

        .executive-stats-grid,
        .executive-dashboard-grid,
        .comparison-grid {
            @apply gap-4;
        }

        .revenue-chart-shell {
            @apply h-64 p-3;
        }

        .revenue-chart-bars {
            @apply gap-1.5;
        }

        .executive-list-row,
        .top-client-row {
            @apply px-3 py-3;
        }

        .audit-log-meta-panel {
            @apply p-3;
        }
    }
}

html[data-effective-theme='dark'] .dashboard-brand-link:hover {
    background: rgba(30, 41, 59, 0.55) !important;
}
@layer components {
    .dashboard-sidebar {
        @apply lg:overflow-hidden;
    }

    .dashboard-sidebar-inner {
        min-height: 0;
    }

    .sidebar-nav {
        @apply min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 pb-2;
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
    }

    .sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.45);
        border-radius: 999px;
    }

    @media (max-height: 860px) and (min-width: 1024px) {
        .dashboard-sidebar {
            @apply p-4;
        }

        .dashboard-brand {
            @apply pb-4;
        }

        .dashboard-logo {
            @apply h-7 max-w-[140px];
        }

        .dashboard-brand-title {
            @apply mt-2;
        }

        .dashboard-brand-copy {
            @apply mt-1 line-clamp-2;
        }

        .sidebar-nav {
            @apply mt-4 space-y-1;
        }

        .sidebar-link {
            @apply rounded-xl px-3 py-2.5 text-[13px];
        }

        .sidebar-link-icon {
            @apply h-8 w-8 rounded-xl;
        }
    }

    @media (max-height: 740px) and (min-width: 1024px) {
        .dashboard-brand-copy {
            @apply hidden;
        }

        .dashboard-brand {
            @apply pb-3;
        }

        .sidebar-nav {
            @apply mt-3;
        }

        .sidebar-link {
            @apply py-2;
        }
    }
}

html[data-effective-theme='dark'] .sidebar-nav {
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
@layer components {
    .payment-method-card {
        @apply rounded-[1.5rem] border border-slate-200 bg-slate-50/88 p-5 shadow-[0_18px_54px_-42px_rgba(15,23,42,0.42)] backdrop-blur;
    }

    .payment-method-card-primary {
        @apply border-slate-900 bg-slate-950 text-white shadow-[0_22px_60px_-42px_rgba(15,23,42,0.9)];
    }

    .payment-method-icon,
    .payment-proof-notice-icon {
        @apply flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-600 shadow-[0_12px_28px_-24px_rgba(15,23,42,0.35)];
    }

    .payment-method-title {
        @apply text-base font-black tracking-[-0.03em] text-slate-950;
    }

    .payment-method-copy {
        @apply mt-2 text-sm leading-6 text-slate-500;
    }

    .payment-summary-grid {
        @apply mt-5 grid gap-3 text-sm sm:grid-cols-2;
    }

    .payment-summary-tile {
        @apply rounded-2xl border border-slate-200 bg-white p-4;
    }

    .payment-summary-tile-emphasis {
        @apply border-slate-900 bg-slate-950 text-white;
    }

    .payment-summary-tile-label {
        @apply text-xs font-bold uppercase tracking-[0.16em] text-slate-400;
    }

    .payment-summary-tile-value {
        @apply mt-2 block break-all text-sm font-black text-slate-950;
    }

    .payment-summary-tile-emphasis .payment-summary-tile-label {
        @apply text-white/50;
    }

    .payment-summary-tile-emphasis .payment-summary-tile-value {
        @apply text-white;
    }

    .payment-bank-details {
        @apply mt-4 space-y-3 rounded-2xl border border-slate-200 bg-white p-4 text-sm leading-6 text-slate-700;
    }

    .payment-bank-detail-row {
        @apply flex flex-col gap-1 border-b border-slate-100 pb-3 last:border-b-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between sm:gap-4;
    }

    .payment-bank-detail-row span {
        @apply text-[0.68rem] font-black uppercase tracking-[0.18em] text-slate-400;
    }

    .payment-bank-detail-row strong {
        @apply text-sm font-semibold text-slate-900 sm:text-right;
    }

    .payment-proof-form {
        @apply mt-5 space-y-4 rounded-[1.35rem] border border-slate-200 bg-white p-4;
    }

    .payment-field-label {
        @apply mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-slate-500;
    }

    .payment-file-input {
        @apply block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 shadow-sm transition file:mr-3 file:rounded-xl file:border-0 file:bg-slate-950 file:px-3 file:py-2 file:text-xs file:font-bold file:text-white sm:file:px-4 sm:file:text-sm hover:border-slate-300 focus:outline-none focus:ring-4 focus:ring-brand-50;
    }

    .payment-help-text {
        @apply mt-2 block text-xs leading-5 text-slate-500;
    }

    .payment-proof-notice {
        @apply mt-4 flex items-start gap-3 rounded-2xl border border-amber-100 bg-amber-50 p-4 text-sm leading-6 text-amber-900;
    }

    .payment-proof-notice-icon {
        @apply h-9 w-9 rounded-xl border-amber-100 bg-white text-amber-700;
    }

    .payment-verification-panel {
        @apply rounded-[1.15rem] border border-slate-200 bg-white p-4 shadow-[0_14px_36px_-30px_rgba(15,23,42,0.45)];
    }

    .payment-verification-actions {
        @apply mt-4 grid gap-3;
    }

    .payment-verification-form {
        @apply rounded-2xl border border-slate-200 bg-slate-50/80 p-3;
    }

    .payment-verification-form-danger {
        @apply border-red-100 bg-red-50/80;
    }

    .payment-proof-link {
        @apply inline-flex items-center gap-2 rounded-full border border-brand-100 bg-brand-50 px-3 py-1.5 text-xs font-bold text-brand-600 transition hover:border-brand-100 hover:bg-brand-100 hover:text-brand-600;
    }

    .financial-warning-row {
        @apply mt-3 flex justify-between gap-4 rounded-2xl border border-amber-100 bg-amber-50 px-3 py-2 text-sm font-bold text-amber-800;
    }

    .invoice-timeline-grid,
    .invoice-timeline-card {
        min-width: 0;
    }

    .invoice-timeline-icon {
        @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-brand-100 bg-brand-50 text-sm text-brand-600;
    }

    .invoice-timeline-icon-current {
        @apply border-brand-100 bg-brand-50 text-brand-600;
    }

    .invoice-timeline-icon-stopped {
        @apply border-rose-100 bg-rose-50 text-rose-600;
    }

    .invoice-timeline-icon-muted {
        @apply border-slate-200 bg-slate-50 text-slate-500;
    }

    .invoice-timeline-copy,
    .invoice-timeline-note,
    .invoice-timeline-link {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .public-document-table {
        min-width: 680px;
    }

    @media (max-width: 640px) {
        .responsive-data-table {
            min-width: 0 !important;
            width: 100%;
        }

        .responsive-data-table thead {
            display: none;
        }

        .responsive-data-table tbody,
        .responsive-data-table tr,
        .responsive-data-table td {
            display: block;
            width: 100%;
        }

        .responsive-data-table tr {
            border-bottom: 1px solid #e2e8f0;
            padding: 0.75rem 0;
        }

        .responsive-data-table tr:last-child {
            border-bottom: 0;
        }

        .responsive-data-table td {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            border-bottom: 0 !important;
            padding: 0.45rem 1rem !important;
            text-align: right !important;
        }

        .responsive-data-table td::before {
            content: attr(data-label);
            flex: 0 0 42%;
            text-align: left;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #94a3b8;
        }

        .responsive-data-table td:first-child {
            padding-top: 0.85rem !important;
        }

        .responsive-data-table td:last-child {
            padding-bottom: 0.85rem !important;
        }
    }
}

html[data-effective-theme='dark'] .responsive-data-table tr {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-effective-theme='dark'] .responsive-data-table td::before {
    color: #64748b !important;
}
html[data-effective-theme='dark'] .financial-warning-row {
    border-color: rgba(245, 158, 11, 0.24) !important;
    background: rgba(120, 53, 15, 0.28) !important;
    color: #fde68a !important;
}

html[data-effective-theme='dark'] .payment-method-card,
html[data-effective-theme='dark'] .payment-summary-tile,
html[data-effective-theme='dark'] .payment-bank-details,
html[data-effective-theme='dark'] .payment-proof-form,
html[data-effective-theme='dark'] .payment-verification-panel,
html[data-effective-theme='dark'] .payment-verification-form {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .payment-method-card-primary,
html[data-effective-theme='dark'] .payment-summary-tile-emphasis {
    border-color: rgba(226, 232, 240, 0.12) !important;
    background: rgba(2, 6, 23, 0.92) !important;
}

html[data-effective-theme='dark'] .payment-method-title,
html[data-effective-theme='dark'] .payment-summary-tile-value {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .payment-method-copy,
html[data-effective-theme='dark'] .payment-help-text,
html[data-effective-theme='dark'] .payment-bank-details {
    color: #94a3b8 !important;
}

html[data-effective-theme='dark'] .payment-bank-detail-row strong {
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .payment-method-icon,
html[data-effective-theme='dark'] .payment-proof-notice-icon {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(30, 41, 59, 0.86) !important;
    color: #cbd5e1 !important;
}

html[data-effective-theme='dark'] .payment-proof-notice,
html[data-effective-theme='dark'] .payment-verification-form-danger {
    border-color: rgba(245, 158, 11, 0.24) !important;
    background: rgba(120, 53, 15, 0.28) !important;
    color: #fde68a !important;
}

html[data-effective-theme='dark'] .payment-file-input {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.84) !important;
    color: #e2e8f0 !important;
}
@layer components {
    .revenue-line-chart-shell {
        @apply relative mt-6 grid h-[22rem] grid-cols-[4.75rem_minmax(0,1fr)] gap-4 rounded-[1.5rem] border border-slate-200/80 bg-[linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)] px-4 py-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.82)] sm:px-5 sm:py-6;
    }

    .revenue-line-chart-y-axis {
        @apply relative h-full pb-10 text-right;
    }

    .revenue-line-chart-y-axis span {
        @apply absolute right-0 -translate-y-1/2 whitespace-nowrap text-[10px] font-semibold tabular-nums text-slate-400;
    }

    .revenue-line-chart-stage {
        @apply relative min-w-0 pb-10;
    }

    .revenue-line-chart-grid {
        @apply pointer-events-none absolute inset-0 bottom-10;
    }

    .revenue-line-chart-grid span {
        @apply absolute left-0 right-0 border-t border-slate-200/60;
    }

    .revenue-line-chart-svg {
        @apply absolute inset-0 bottom-10 h-[calc(100%-2.5rem)] w-full overflow-visible text-slate-950;
    }

    .revenue-line-chart-area {
        @apply fill-[url(#revenueAreaGradient)];
    }

    .revenue-line-chart-line {
        @apply fill-none stroke-slate-950;
        stroke-width: 1.85;
        vector-effect: non-scaling-stroke;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.10));
    }

    .revenue-line-chart-points {
        @apply absolute inset-0 bottom-10;
    }

    .revenue-line-chart-point-wrap {
        @apply absolute z-10 -translate-x-1/2 -translate-y-1/2;
    }

    .revenue-line-chart-point {
        @apply block h-2.5 w-2.5 rounded-full border-2 border-white bg-slate-950 shadow-[0_8px_18px_-10px_rgba(15,23,42,0.8)] transition duration-200 ease-out;
    }

    .revenue-line-chart-point-wrap-current .revenue-line-chart-point {
        @apply h-3.5 w-3.5 border-[3px] shadow-[0_0_0_6px_rgba(15,23,42,0.08),0_12px_24px_-14px_rgba(15,23,42,0.72)];
    }

    .revenue-line-chart-tooltip {
        @apply pointer-events-none absolute bottom-[calc(100%+0.75rem)] left-1/2 hidden -translate-x-1/2 whitespace-nowrap rounded-xl bg-slate-950 px-3 py-2 text-xs font-semibold text-white shadow-xl;
    }

    .revenue-line-chart-point-wrap:hover .revenue-line-chart-tooltip,
    .revenue-line-chart-point-wrap:focus-within .revenue-line-chart-tooltip {
        @apply block;
    }

    .revenue-line-chart-point-wrap:hover .revenue-line-chart-point {
        @apply scale-125;
    }

    .revenue-line-chart-months {
        @apply absolute inset-x-0 bottom-0 grid grid-cols-12 gap-2 text-center;
    }

    .revenue-line-chart-months span {
        @apply truncate text-[11px] font-bold text-slate-400;
    }

    .revenue-line-chart-months .is-current {
        @apply text-slate-950;
    }
}

html[data-effective-theme='dark'] .revenue-line-chart-shell {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.72)) !important;
}

html[data-effective-theme='dark'] .revenue-line-chart-grid span {
    border-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-effective-theme='dark'] .revenue-line-chart-y-axis span,
html[data-effective-theme='dark'] .revenue-line-chart-months span {
    color: #64748b !important;
}

html[data-effective-theme='dark'] .revenue-line-chart-months .is-current {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .revenue-line-chart-line {
    stroke: #e2e8f0 !important;
    filter: drop-shadow(0 12px 22px rgba(226, 232, 240, 0.08));
}

html[data-effective-theme='dark'] .revenue-line-chart-svg {
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .revenue-line-chart-point {
    border-color: #020617 !important;
    background: #e2e8f0 !important;
}
















@layer components {
    :root {
        --tn-radius-sm: 4px;
        --tn-radius-md: 6px;
        --tn-radius-lg: 8px;
    }

    .shell-card,
    .dashboard-sidebar,
    .dashboard-header,
    .surface-alert,
    .stat-card,
    .section-card,
    .metric-card,
    .executive-hero,
    .executive-hero-panel,
    .executive-stat-card,
    .executive-card,
    .executive-mini-panel,
    .executive-empty-state,
    .revenue-chart-shell,
    .revenue-line-chart-shell,
    .comparison-card,
    .top-client-row,
    .audit-log-card,
    .audit-filter-card,
    .payment-method-card,
    .payment-summary-tile,
    .payment-bank-details,
    .payment-proof-form,
    .payment-proof-notice,
    .payment-verification-panel,
    .payment-verification-form,
    .invoice-timeline-card,
    .auth-card,
    .auth-panel,
    .auth-loading-panel,
    .public-document-shell,
    .workspace-module-nav,
    .sales-module-nav,
    [class*="rounded-[0.95rem]"],
    [class*="rounded-[1."],
    [class*="rounded-[2rem]"],
    [class*="rounded-[14px]"],
    [class*="rounded-[20px]"],
    .rounded-xl,
    .rounded-2xl,
    .rounded-3xl {
        border-radius: var(--tn-radius-md) !important;
    }

    .primary-button,
    .secondary-button,
    .danger-button,
    .auth-submit,
    .text-input,
    .auth-input,
    .payment-file-input,
    .builder-add-button,
    .icon-action,
    .client-icon-action,
    .client-action-primary {
        border-radius: var(--tn-radius-md) !important;
    }

    .status-badge,
    .payment-proof-link,
    .rounded-full {
        border-radius: 999px !important;
    }

    .rounded-t-2xl {
        border-top-left-radius: var(--tn-radius-md) !important;
        border-top-right-radius: var(--tn-radius-md) !important;
    }

    .rounded-b-2xl {
        border-bottom-right-radius: var(--tn-radius-md) !important;
        border-bottom-left-radius: var(--tn-radius-md) !important;
    }

    .dashboard-brand-link,
    .sidebar-link,
    .sidebar-link-icon,
    .executive-stat-icon,
    .executive-empty-icon,
    .payment-method-icon,
    .payment-proof-notice-icon,
    .invoice-timeline-icon {
        border-radius: var(--tn-radius-sm) !important;
    }

    @media (max-width: 640px) {
        .dashboard-header,
        .executive-hero,
        .executive-card,
        .audit-filter-card,
        .section-card {
            border-radius: var(--tn-radius-md) !important;
        }
    }
}

/* Final radius guard: dashboard list rows should be sharp, while icons/ranks stay circular. */
.executive-list-row,
.top-client-row {
    border-radius: var(--tn-radius-md, 6px) !important;
}

.executive-list-icon,
.top-client-rank {
    border-radius: 999px !important;
}

/* Final surface consistency guard: keep Tarnova sharp without touching backend logic. */
[class~="rounded-xl"],
[class~="rounded-2xl"],
[class~="rounded-3xl"],
[class*="rounded-[0.95rem]"],
[class*="rounded-[1."],
[class*="rounded-[2rem]"],
[class*="rounded-[14px]"],
[class*="rounded-[20px]"] {
    border-radius: var(--tn-radius-md, 6px) !important;
}

.rounded-full,
.status-badge,
.payment-proof-link,
.revenue-chart-tooltip,
.revenue-line-chart-tooltip,
.revenue-line-chart-point,
.executive-list-icon,
.top-client-rank {
    border-radius: 999px !important;
}

.sidebar-link-icon,
.executive-stat-icon,
.executive-empty-icon,
.payment-method-icon,
.payment-proof-notice-icon,
.invoice-timeline-icon,
.modal-icon,
.empty-state-icon,
.builder-step,
.builder-validation-icon,
.settings-section-icon,
.client-stat-icon,
.mfa-overview-icon {
    border-radius: var(--tn-radius-sm, 4px) !important;
}

.sales-module-nav-link,
.workspace-module-nav-link {
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-radius: var(--tn-radius-md, 6px) !important;
}

.sales-module-nav-link:hover,
.workspace-module-nav-link:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.11) !important;
}

.sales-module-nav-link-active,
.workspace-module-nav-link-active {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

/* Page-family radius guard: settings, users, security, audit logs, and clients. */
.settings-hero,
.settings-card,
.settings-save-card,
.settings-logo-preview,
.settings-logo-upload,
.settings-logo-upload-icon,
.settings-reminder-field,
.settings-banking-shell,
.settings-alert,
.settings-hero-badge,
.team-register,
.team-card,
.team-self-badge,
.mfa-overview-card,
.mfa-intro-panel,
.mfa-qr-card,
.mfa-secret-box,
.mfa-status-panel,
.mfa-recovery-grid code,
.mfa-sensitive-note,
.mfa-session-card,
.mfa-session-count,
.mfa-session-empty,
.mfa-session-safe-note,
.mfa-revoke-form,
.audit-filter-card,
.audit-filter-summary-pill,
.audit-log-card,
.audit-log-meta-panel,
.audit-log-metadata-panel,
.audit-log-metadata-chip,
.audit-log-toolbar-stat,
.client-directory-card,
.client-section-card,
.client-filter-card,
.client-statement-hero,
.client-card,
.client-empty-wrap,
.client-detail-panel,
.client-statement-stat,
.client-table-shell,
.record-card,
.record-register,
.global-search-results,
.builder-input,
.builder-select,
.builder-textarea,
.builder-line-total,
.builder-remove,
.builder-line-guidance,
.builder-summary-row,
.builder-summary-total,
.builder-note,
.theme-choice,
.toast,
.modal-window,
.confirm-modal,
.confirm-modal-panel {
    border-radius: var(--tn-radius-md, 6px) !important;
}

.settings-section-icon,
.team-avatar,
.client-avatar,
.client-avatar-large,
.client-icon-action,
.empty-state-icon,
.modal-icon,
.mfa-session-icon,
.audit-log-timestamp {
    border-radius: var(--tn-radius-sm, 4px) !important;
}

.status-badge,
.team-self-badge,
.audit-filter-summary-pill,
.mfa-step-list span {
    border-radius: 999px !important;
}
/* Theme switch radius guard: keep the settings toggle card aligned while preserving the switch pill. */
.theme-switch-card {
    border-radius: var(--tn-radius-md, 6px) !important;
}

.theme-switch-track,
.theme-switch-knob {
    border-radius: 999px !important;
}
/* Final sharp-radius pass for badges, invoice lists, builders, and empty states. */
.status-badge,
.team-self-badge,
.audit-filter-summary-pill,
.audit-log-metadata-chip,
.settings-hero-badge,
.document-form-intro-badge,
.mfa-session-count {
    border-radius: var(--tn-radius-md, 6px) !important;
}

.empty-state-card,
.client-empty-state,
.client-empty-wrap,
.executive-empty-state,
.builder-card,
.builder-summary,
.builder-items-table,
.builder-item-row,
.builder-line-total,
.builder-remove,
.builder-line-guidance,
.builder-summary-row,
.builder-summary-total,
.builder-note,
.invoice-card,
.invoice-mini-metric,
.invoice-amount-panel,
.invoice-hero-stat,
.invoice-side-card,
.invoice-detail-hero,
.invoice-action-strip,
.invoice-action-tile,
.document-row,
.record-card,
.metric-card,
.payment-method-card,
.payment-summary-tile,
.payment-bank-details,
.payment-proof-form,
.payment-proof-notice,
.payment-verification-panel,
.payment-verification-form {
    border-radius: var(--tn-radius-md, 6px) !important;
}

.empty-state-icon,
.client-empty-state span,
.builder-step,
.builder-validation-icon,
.payment-method-icon,
.payment-proof-notice-icon,
.invoice-timeline-icon {
    border-radius: var(--tn-radius-sm, 4px) !important;
}

.rounded-full,
.executive-list-icon,
.top-client-rank,
.theme-switch-track,
.theme-switch-knob {
    border-radius: 999px !important;
}
/* Builder row alignment: keep remove actions vertically aligned with line item fields. */
.builder-remove-cell {
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .builder-remove-cell {
        padding-top: 0 !important;
        align-self: center;
    }
}
/* Builder remove icon: use a clear black delete affordance with restrained danger hover. */
.builder-remove {
    color: #020617 !important;
}

.builder-remove:hover {
    color: #dc2626 !important;
}
html[data-effective-theme='dark'] .settings-logo-upload {
    border-color: rgba(148, 163, 184, 0.28) !important;
    background: rgba(15, 23, 42, 0.82) !important;
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .settings-logo-upload:hover {
    border-color: rgba(226, 232, 240, 0.56) !important;
    background: rgba(30, 41, 59, 0.9) !important;
}

html[data-effective-theme='dark'] .settings-logo-upload-icon {
    border-color: rgba(148, 163, 184, 0.26) !important;
    background: #f8fafc !important;
    color: #020617 !important;
}

html[data-effective-theme='dark'] .settings-logo-upload-body strong {
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .settings-logo-upload-body em,
html[data-effective-theme='dark'] .settings-logo-upload-file {
    color: #94a3b8 !important;
}

/* Premium theme system: shared dark-mode surfaces and Light/Dark/System control. */
@layer components {
    .tn-surface,
    .tn-card,
    .tn-panel {
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.94);
        color: #0f172a;
        box-shadow: 0 22px 60px -44px rgba(15, 23, 42, 0.34);
    }

    .tn-input,
    .tn-select,
    .tn-textarea {
        border: 1px solid #dce5ef;
        background: #ffffff;
        color: #0f172a;
    }

    .tn-table {
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.96);
    }

    .tn-muted {
        color: #64748b;
    }

    .theme-switch-card {
        gap: 1rem !important;
        background: rgba(248, 250, 252, 0.86) !important;
        box-shadow: 0 18px 44px -36px rgba(15, 23, 42, 0.38) !important;
    }

    .theme-switch-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .theme-switch-stage {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
        border: 1px solid rgba(226, 232, 240, 0.92);
        border-radius: var(--tn-radius-md, 6px) !important;
        background: rgba(255, 255, 255, 0.72);
        padding: 0.25rem;
    }

    .theme-mode-option {
        display: flex;
        min-height: 3.25rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        border-radius: var(--tn-radius-sm, 4px);
        border: 1px solid transparent;
        color: #64748b;
        text-align: center;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .theme-mode-option:hover:not(:disabled) {
        background: rgba(241, 245, 249, 0.9);
        color: #0f172a;
    }

    .theme-mode-option:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(38, 103, 255, 0.12);
    }

    .theme-mode-option.is-active {
        border-color: rgba(15, 23, 42, 0.08);
        background: #020617;
        color: #ffffff;
        box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.7);
    }

    .theme-mode-option:disabled {
        cursor: wait;
        opacity: 0.68;
    }

    .theme-mode-label {
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .theme-mode-description {
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.15;
        color: currentColor;
        opacity: 0.72;
    }
}

html[data-effective-theme='dark'] .tn-surface,
html[data-effective-theme='dark'] .tn-card,
html[data-effective-theme='dark'] .tn-panel {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.84) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 24px 68px -44px rgba(0, 0, 0, 0.82) !important;
}

html[data-effective-theme='dark'] .tn-input,
html[data-effective-theme='dark'] .tn-select,
html[data-effective-theme='dark'] .tn-textarea,
html[data-effective-theme='dark'] .text-input {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.82) !important;
    color: #f8fafc !important;
}

html[data-effective-theme='dark'] .tn-input::placeholder,
html[data-effective-theme='dark'] .tn-select::placeholder,
html[data-effective-theme='dark'] .tn-textarea::placeholder,
html[data-effective-theme='dark'] .text-input::placeholder {
    color: #64748b !important;
}

html[data-effective-theme='dark'] .tn-table {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.78) !important;
}

html[data-effective-theme='dark'] .tn-muted {
    color: #94a3b8 !important;
}

html[data-effective-theme='dark'] .primary-button {
    border-color: rgba(226, 232, 240, 0.12) !important;
    background: #f8fafc !important;
    color: #020617 !important;
}

html[data-effective-theme='dark'] .modal-panel,
html[data-effective-theme='dark'] .confirm-modal-panel {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.96) !important;
    color: #e2e8f0 !important;
}

html[data-effective-theme='dark'] .theme-switch-card {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.78) !important;
    box-shadow: 0 20px 52px -38px rgba(0, 0, 0, 0.86) !important;
}

html[data-effective-theme='dark'] .theme-switch-stage {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(2, 6, 23, 0.58) !important;
}

html[data-effective-theme='dark'] .theme-mode-option {
    color: #94a3b8;
}

html[data-effective-theme='dark'] .theme-mode-option:hover:not(:disabled) {
    background: rgba(30, 41, 59, 0.86);
    color: #f8fafc;
}

html[data-effective-theme='dark'] .theme-mode-option.is-active {
    border-color: rgba(226, 232, 240, 0.16);
    background: #f8fafc;
    color: #020617;
}

/* Dashboard decision hierarchy: restrained metrics, explicit risk, and an actionable collection queue. */
@layer components {
    .executive-stat-card-risk {
        @apply border-red-200 bg-red-50/70 shadow-[0_18px_54px_-36px_rgba(185,28,28,0.2)];
    }

    .executive-stat-card-risk .executive-stat-label,
    .executive-stat-card-risk .executive-stat-copy {
        @apply text-red-700/75;
    }

    .dashboard-attention-card {
        @apply scroll-mt-6 border-slate-200;
    }

    .dashboard-attention-actions {
        @apply flex flex-wrap items-center gap-3 sm:justify-end;
    }

    .dashboard-action-queue {
        @apply mt-5 grid gap-2;
    }

    .dashboard-action-item {
        @apply grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 rounded-md border border-slate-200 bg-white px-4 py-3.5 text-left transition duration-150 hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 sm:grid-cols-[auto_minmax(0,1fr)_auto_auto];
    }

    .dashboard-action-icon {
        @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-slate-50 text-sm text-slate-700;
    }

    .dashboard-action-main {
        @apply min-w-0;
    }

    .dashboard-action-main strong {
        @apply block text-sm font-semibold text-slate-950;
    }

    .dashboard-action-main small {
        @apply mt-0.5 block text-xs leading-5 text-slate-500;
    }

    .dashboard-action-next {
        @apply mt-2 block text-xs font-medium leading-5 text-slate-700;
    }

    .dashboard-action-next > span {
        @apply mr-2 text-[0.65rem] font-bold uppercase tracking-[0.14em] text-slate-400;
    }

    .dashboard-action-count {
        @apply inline-flex min-w-8 items-center justify-center rounded-md bg-slate-100 px-2 py-1 text-xs font-semibold tabular-nums text-slate-700;
    }

    .dashboard-action-link {
        @apply col-start-2 inline-flex items-center gap-2 text-xs font-semibold text-slate-700 sm:col-start-auto;
    }

    .dashboard-action-item-critical .dashboard-action-icon {
        @apply border-red-200 bg-red-50 text-red-700;
    }

    .dashboard-action-item-warning .dashboard-action-icon {
        @apply border-amber-200 bg-amber-50 text-amber-700;
    }
}

html[data-effective-theme='dark'] .executive-stat-card-risk {
    border-color: rgba(248, 113, 113, 0.28) !important;
    background: rgba(69, 10, 10, 0.35) !important;
}

html[data-effective-theme='dark'] .executive-stat-card-risk .executive-stat-label,
html[data-effective-theme='dark'] .executive-stat-card-risk .executive-stat-copy {
    color: rgba(254, 202, 202, 0.72) !important;
}

html[data-effective-theme='dark'] .dashboard-action-item {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.72);
}

html[data-effective-theme='dark'] .dashboard-action-item:hover {
    border-color: rgba(148, 163, 184, 0.34);
    background: rgba(30, 41, 59, 0.8);
}

html[data-effective-theme='dark'] .dashboard-action-icon,
html[data-effective-theme='dark'] .dashboard-action-count {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(30, 41, 59, 0.88);
    color: #cbd5e1;
}

html[data-effective-theme='dark'] .dashboard-action-main strong,
html[data-effective-theme='dark'] .dashboard-action-link {
    color: #f8fafc;
}

html[data-effective-theme='dark'] .dashboard-action-main small {
    color: #94a3b8;
}

html[data-effective-theme='dark'] .dashboard-action-next {
    color: #cbd5e1;
}

html[data-effective-theme='dark'] .dashboard-action-next > span {
    color: #64748b;
}

html[data-effective-theme='dark'] .dashboard-action-item-critical .dashboard-action-icon {
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(69, 10, 10, 0.48);
    color: #fca5a5;
}

html[data-effective-theme='dark'] .dashboard-action-item-warning .dashboard-action-icon {
    border-color: rgba(251, 191, 36, 0.25);
    background: rgba(69, 26, 3, 0.48);
    color: #fcd34d;
}
/* Dashboard compact toolbar: retain search and actions without an introductory surface. */
@layer components {
    .dashboard-header-compact {
        @apply border-0 bg-transparent p-0 shadow-none backdrop-blur-none lg:justify-end;
    }

    .dashboard-header-compact .dashboard-actions {
        @apply lg:w-full lg:justify-end;
    }

    .dashboard-quick-actions {
        @apply order-first flex w-full flex-wrap items-center gap-2 sm:w-auto;
    }

    .dashboard-quick-actions .primary-button,
    .dashboard-quick-actions .secondary-button {
        @apply flex-1 whitespace-nowrap sm:flex-none;
    }
}


/* Client profile form: structured for fast business data entry. */
.profile-form-shell {
    overflow: hidden;
    padding: 0;
}

.profile-form-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 70%);
}

.profile-form-heading-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe8ff;
    border-radius: var(--tn-radius-md, 6px);
    background: #eaf1ff;
    color: #1d4ed8;
}

.profile-form-eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
}

.profile-form-title {
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.015em;
    color: #0f172a;
}

.profile-form-heading-copy,
.profile-form-section-copy {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
}

.profile-form-section {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
}

.profile-form-section + .profile-form-section {
    border-top: 1px solid #e2e8f0;
}

.profile-form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.profile-form-section-number {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe8ff;
    border-radius: var(--tn-radius-md, 6px);
    background: #f0f5ff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #1d4ed8;
}

.profile-form-section-title {
    font-size: 0.9375rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.profile-form-grid {
    display: grid;
    gap: 1.125rem;
}

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

.profile-form-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    color: #334155;
}

.profile-form-required {
    color: #dc2626;
}

.profile-form-control-wrap {
    position: relative;
}

.profile-form-control-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    z-index: 1;
    width: 1rem;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
    pointer-events: none;
    transition: color 160ms ease;
}

.profile-form-control {
    min-height: 3rem;
    padding-left: 2.65rem !important;
    border-radius: var(--tn-radius-md, 6px) !important;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

.profile-form-control:hover {
    border-color: #cbd5e1;
}

.profile-form-control-wrap:focus-within .profile-form-control-icon {
    color: #1d4ed8;
}

.profile-form-control-error {
    border-color: #fca5a5 !important;
    background: #fffafa !important;
}

.profile-form-control-wrap-textarea .profile-form-control-icon {
    top: 1.1rem;
    transform: none;
}

.profile-form-textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.profile-form-error {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #dc2626;
}

.profile-form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

html[data-effective-theme='dark'] .profile-form-heading,
html[data-effective-theme='dark'] .profile-form-actions {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.38);
}

html[data-effective-theme='dark'] .profile-form-section + .profile-form-section {
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-effective-theme='dark'] .profile-form-heading-icon,
html[data-effective-theme='dark'] .profile-form-section-number {
    border-color: rgba(96, 165, 250, 0.2);
    background: rgba(37, 99, 235, 0.14);
    color: #93c5fd;
}

html[data-effective-theme='dark'] .profile-form-title,
html[data-effective-theme='dark'] .profile-form-section-title {
    color: #f8fafc;
}

html[data-effective-theme='dark'] .profile-form-label {
    color: #cbd5e1;
}

html[data-effective-theme='dark'] .profile-form-heading-copy,
html[data-effective-theme='dark'] .profile-form-section-copy,
html[data-effective-theme='dark'] .profile-form-eyebrow {
    color: #94a3b8;
}

html[data-effective-theme='dark'] .profile-form-control-error {
    border-color: rgba(248, 113, 113, 0.65) !important;
    background: rgba(127, 29, 29, 0.16) !important;
}

@media (min-width: 640px) {
    .profile-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-form-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

@media (min-width: 1024px) {
    .profile-form-heading,
    .profile-form-section,
    .profile-form-actions {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .profile-form-section {
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: 2.25rem;
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
}

/* Tarnova light-theme contrast hierarchy. */
html[data-effective-theme='light'] body {
    background-color: #f3f6f9;
    background-image: linear-gradient(180deg, #f8fafc 0%, #f1f4f8 100%);
}

html[data-effective-theme='light'] .shell-card,
html[data-effective-theme='light'] .dashboard-sidebar,
html[data-effective-theme='light'] .dashboard-header,
html[data-effective-theme='light'] .stat-card,
html[data-effective-theme='light'] .section-card,
html[data-effective-theme='light'] .metric-card,
html[data-effective-theme='light'] .executive-card,
html[data-effective-theme='light'] .executive-stat-card,
html[data-effective-theme='light'] .comparison-card,
html[data-effective-theme='light'] .client-directory-card,
html[data-effective-theme='light'] .client-section-card,
html[data-effective-theme='light'] .client-filter-card,
html[data-effective-theme='light'] .client-statement-hero,
html[data-effective-theme='light'] .client-card,
html[data-effective-theme='light'] .settings-card,
html[data-effective-theme='light'] .settings-save-card,
html[data-effective-theme='light'] .settings-side-card,
html[data-effective-theme='light'] .record-register,
html[data-effective-theme='light'] .record-card,
html[data-effective-theme='light'] .audit-filter-card,
html[data-effective-theme='light'] .audit-log-card,
html[data-effective-theme='light'] .team-register,
html[data-effective-theme='light'] .team-card,
html[data-effective-theme='light'] .mfa-overview-card,
html[data-effective-theme='light'] .mfa-intro-panel,
html[data-effective-theme='light'] .mfa-session-card {
    border-color: #d9e1ea;
    background-color: #ffffff;
    backdrop-filter: none;
}

html[data-effective-theme='light'] .shell-card,
html[data-effective-theme='light'] .section-card,
html[data-effective-theme='light'] .client-directory-card,
html[data-effective-theme='light'] .client-section-card,
html[data-effective-theme='light'] .client-filter-card,
html[data-effective-theme='light'] .settings-card,
html[data-effective-theme='light'] .settings-side-card,
html[data-effective-theme='light'] .audit-filter-card,
html[data-effective-theme='light'] .audit-log-card {
    box-shadow: 0 18px 48px -38px rgba(15, 23, 42, 0.38);
}

html[data-effective-theme='light'] [class~='text-slate-500'] {
    color: #526176 !important;
}

html[data-effective-theme='light'] [class~='text-slate-400'] {
    color: #748196 !important;
}

html[data-effective-theme='light'] .label,
html[data-effective-theme='light'] .profile-form-label,
html[data-effective-theme='light'] .settings-field > span,
html[data-effective-theme='light'] .settings-reminder-field > span,
html[data-effective-theme='light'] .audit-filter-field > span,
html[data-effective-theme='light'] .record-label {
    color: #334155;
}

html[data-effective-theme='light'] .metric-helper,
html[data-effective-theme='light'] .client-directory-copy,
html[data-effective-theme='light'] .client-section-copy,
html[data-effective-theme='light'] .settings-section-copy,
html[data-effective-theme='light'] .audit-filter-copy,
html[data-effective-theme='light'] .profile-form-heading-copy,
html[data-effective-theme='light'] .profile-form-section-copy {
    color: #526176;
}

html[data-effective-theme='light'] .text-input,
html[data-effective-theme='light'] .client-search-input,
html[data-effective-theme='light'] .builder-input,
html[data-effective-theme='light'] .builder-select,
html[data-effective-theme='light'] .builder-textarea {
    border-color: #cfd8e3;
    background-color: #ffffff;
    color: #0f172a;
}

html[data-effective-theme='light'] .text-input::placeholder,
html[data-effective-theme='light'] .client-search-input::placeholder,
html[data-effective-theme='light'] .builder-input::placeholder,
html[data-effective-theme='light'] .builder-textarea::placeholder {
    color: #7b8799;
}

html[data-effective-theme='light'] .text-input:hover,
html[data-effective-theme='light'] .client-search-input:hover,
html[data-effective-theme='light'] .builder-input:hover,
html[data-effective-theme='light'] .builder-select:hover,
html[data-effective-theme='light'] .builder-textarea:hover {
    border-color: #aebaca;
}

html[data-effective-theme='light'] .profile-form-heading,
html[data-effective-theme='light'] .profile-form-actions {
    border-color: #d9e1ea;
    background: #f7f9fb;
}

html[data-effective-theme='light'] .profile-form-section + .profile-form-section {
    border-color: #d9e1ea;
}

/* Tarnova shared form control system. Change these tokens once for every standard form. */
:root {
    --tn-field-height: 3rem;
    --tn-field-radius: 6px;
    --tn-field-border: #cfd8e3;
    --tn-field-border-hover: #aebaca;
    --tn-field-background: #ffffff;
    --tn-field-text: #0f172a;
    --tn-field-placeholder: #7b8799;
    --tn-field-label: #334155;
    --tn-field-focus: #2667ff;
    --tn-field-focus-ring: rgba(38, 103, 255, 0.10);
    --tn-field-error: #dc2626;
    --tn-field-error-ring: rgba(220, 38, 38, 0.10);
}

.text-input,
.builder-input,
.builder-select,
.builder-textarea,
.tn-input,
.tn-select,
.tn-textarea,
.auth-input {
    width: 100%;
    border: 1px solid var(--tn-field-border);
    border-radius: var(--tn-field-radius) !important;
    background-color: var(--tn-field-background);
    color: var(--tn-field-text);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.text-input,
.builder-input,
.builder-select,
.tn-input,
.tn-select,
.auth-input {
    min-height: var(--tn-field-height);
}

.text-input:hover,
.builder-input:hover,
.builder-select:hover,
.builder-textarea:hover,
.tn-input:hover,
.tn-select:hover,
.tn-textarea:hover,
.auth-input:hover {
    border-color: var(--tn-field-border-hover);
}

.text-input:focus,
.builder-input:focus,
.builder-select:focus,
.builder-textarea:focus,
.tn-input:focus,
.tn-select:focus,
.tn-textarea:focus,
.auth-input:focus {
    border-color: var(--tn-field-focus);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px var(--tn-field-focus-ring), 0 1px 2px rgba(15, 23, 42, 0.05);
}

.text-input::placeholder,
.builder-input::placeholder,
.builder-textarea::placeholder,
.tn-input::placeholder,
.tn-textarea::placeholder,
.auth-input::placeholder {
    color: var(--tn-field-placeholder);
    font-weight: 400;
    opacity: 1;
}

.text-input:disabled,
.builder-input:disabled,
.builder-select:disabled,
.builder-textarea:disabled,
.tn-input:disabled,
.tn-select:disabled,
.tn-textarea:disabled,
.auth-input:disabled {
    cursor: not-allowed;
    border-color: #e2e8f0;
    background-color: #f8fafc;
    color: #64748b;
}

.label,
.builder-label,
.profile-form-label,
.settings-field > span,
.settings-reminder-field > span,
.audit-filter-field > span {
    color: var(--tn-field-label);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.035em;
}

.builder-input-invalid,
.builder-select-invalid,
.builder-textarea-invalid,
.profile-form-control-error,
.text-input[aria-invalid='true'],
.auth-input[aria-invalid='true'] {
    border-color: var(--tn-field-error) !important;
    background-color: #fffafa !important;
}

.builder-input-invalid:focus,
.builder-select-invalid:focus,
.builder-textarea-invalid:focus,
.profile-form-control-error:focus,
.text-input[aria-invalid='true']:focus,
.auth-input[aria-invalid='true']:focus {
    border-color: var(--tn-field-error) !important;
    box-shadow: 0 0 0 4px var(--tn-field-error-ring) !important;
}

html[data-effective-theme='dark'] {
    --tn-field-border: rgba(148, 163, 184, 0.26);
    --tn-field-border-hover: rgba(148, 163, 184, 0.46);
    --tn-field-background: rgba(15, 23, 42, 0.86);
    --tn-field-text: #f8fafc;
    --tn-field-placeholder: #7f8da3;
    --tn-field-label: #cbd5e1;
    --tn-field-focus: #60a5fa;
    --tn-field-focus-ring: rgba(96, 165, 250, 0.14);
}

html[data-effective-theme='dark'] .text-input:focus,
html[data-effective-theme='dark'] .builder-input:focus,
html[data-effective-theme='dark'] .builder-select:focus,
html[data-effective-theme='dark'] .builder-textarea:focus,
html[data-effective-theme='dark'] .tn-input:focus,
html[data-effective-theme='dark'] .tn-select:focus,
html[data-effective-theme='dark'] .tn-textarea:focus,
html[data-effective-theme='dark'] .auth-input:focus {
    background-color: #0f172a;
}

html[data-effective-theme='dark'] .builder-input-invalid,
html[data-effective-theme='dark'] .builder-select-invalid,
html[data-effective-theme='dark'] .builder-textarea-invalid,
html[data-effective-theme='dark'] .profile-form-control-error,
html[data-effective-theme='dark'] .text-input[aria-invalid='true'],
html[data-effective-theme='dark'] .auth-input[aria-invalid='true'] {
    border-color: #f87171 !important;
    background-color: rgba(127, 29, 29, 0.16) !important;
}

/* Logo upload typography and optical alignment. */
.settings-logo-upload-body em {
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.settings-logo-upload-icon i {
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.profile-form-help {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #526176;
}

html[data-effective-theme='dark'] .profile-form-help {
    color: #94a3b8;
}