/* Theme-aware private application components and Tailwind utility bridges. */
body { background: var(--page-background); color: var(--text-primary); }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.surface-soft { background: var(--surface-2) !important; }
.surface-soft-hover:hover { background: var(--surface-3) !important; }
.theme-border-neutral { border-color: var(--border) !important; }
.group:hover .theme-link-hover, .theme-link-hover:hover { color: var(--accent-2) !important; }
.app-shell { background: var(--app-background); box-shadow: var(--shadow-floating); }
.app-canvas { background: var(--page-background); }
.side-nav, .drawer-nav {
    --sidebar-current-fg: var(--on-accent);
    background: var(--primary-background);
    color: var(--sidebar-current-fg);
}
[data-theme="base"] .side-nav,
[data-theme="base"] .drawer-nav {
    --sidebar-current-fg: #FFFFFF;
    background: #080808;
}
[data-theme="base"] .nav-item.active { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
[data-appearance="dark"][data-theme="base"] .side-brand-mark { background: #FFFFFF; color: #080808; }
.ui-card-primary { background: var(--primary-background); color: var(--primary-foreground); }
.side-brand-mark, .nav-item.active, .quick-action-circle { background: rgba(0, 0, 0, .88); color: #fff; }
.side-brand-sub, .nav-item, .side-signout { color: color-mix(in srgb, var(--sidebar-current-fg) 76%, transparent); }
.side-signout { font-size: 12px; }
.nav-item:hover { background: rgba(0, 0, 0, .18); color: var(--sidebar-current-fg); }
.nav-item.active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.side-footer { border-color: color-mix(in srgb, var(--on-accent) 22%, transparent); }
.side-footer .avatar-badge { background: rgba(0, 0, 0, .24); color: var(--sidebar-current-fg); }

.topbar, .app-footer { background: var(--surface-1); border-color: var(--border); color: var(--muted); }
.topbar-title, .menu-pop, .confirm-panel, .ui-card, .ui-card-stat, .matthew-toast { color: var(--text-primary); }
.topbar-title { color: var(--text-primary); }
.topbar-greeting { color: var(--text-muted); }
.theme-link { color: var(--accent-2) !important; }
[data-appearance="light"][data-theme="base"] .theme-link,
[data-appearance="light"][data-theme="base"] .theme-link-hover:hover,
[data-appearance="light"][data-theme="base"] .group:hover .theme-link-hover { color: #171717 !important; }
[data-appearance="dark"][data-theme="base"] .theme-link,
[data-appearance="dark"][data-theme="base"] .theme-link-hover:hover,
[data-appearance="dark"][data-theme="base"] .group:hover .theme-link-hover { color: #d4d4d8 !important; }
.topbar-search, .icon-btn, .ui-card-soft, .pay-row { background: var(--surface-2); color: var(--text-primary); }
.topbar-search:focus-within { background: var(--surface-3); box-shadow: var(--focus-ring), inset 0 0 0 1px var(--accent-2); }
.topbar-search input { color: var(--text-primary); }
.icon-btn:hover { background: var(--surface-3); }
.icon-btn .dot { border-color: var(--surface-1); }
.avatar-badge { background: var(--accent-soft); color: var(--accent-2); }
[data-theme="base"] .avatar-badge { color: var(--text-primary); }
.menu-pop, .confirm-panel { background: var(--surface-2); border-color: var(--border); }
.menu-pop__identity { border-bottom: 1px solid var(--border); }
.menu-pop a, .menu-pop button { color: var(--text-primary); }
.menu-pop a:hover, .menu-pop button:hover { background: var(--surface-3); }

.ui-card, .ui-card-stat, .bg-white { background: var(--card-background) !important; border-color: var(--border) !important; }
.ui-card-soft, .bg-slate-50, .bg-slate-100, .bg-gray-50 { background: var(--card-background-soft) !important; }
.bg-slate-200, .bg-gray-200, .bg-zinc-100 { background: var(--surface-3) !important; }
.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100, .border-gray-200, .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800, .text-gray-700, .text-zinc-900, .text-\[\#171717\], .text-\[\#262626\] { color: var(--text-primary) !important; }
.text-slate-600, .text-slate-500, .text-slate-400, .text-gray-600, .text-gray-500, .text-gray-400, .text-\[\#777\], .text-\[\#a3a3a3\] { color: var(--text-muted) !important; }
table { color: var(--text-primary); }
thead { color: var(--text-muted); }
tbody tr { border-color: var(--border) !important; }

.theme-primary { background: var(--primary-background) !important; color: var(--primary-foreground) !important; }
.btn-neutral { background: var(--neutral-button-bg) !important; color: var(--neutral-button-fg) !important; }
.theme-primary-hover:hover { box-shadow: 0 0 24px rgba(var(--accent-rgb), .30); }
.theme-soft { background: var(--accent-soft) !important; }
.theme-border { border-color: var(--accent-border) !important; }
.theme-ring { --tw-ring-color: var(--accent-border) !important; }
.theme-soft-hover:hover { background: rgba(var(--accent-rgb), .16) !important; }
a.bg-slate-800, button.bg-slate-800 { background: var(--primary-background) !important; color: var(--primary-foreground) !important; }
a.hover\:bg-slate-700:hover, button.hover\:bg-slate-700:hover { box-shadow: 0 0 24px rgba(var(--accent-rgb), .30); }
.ui-card-primary { box-shadow: var(--accent-shadow); }
.ui-card-primary [class*="text-white"] { color: var(--on-accent) !important; }
.side-nav [class*="text-white"], .drawer-nav [class*="text-white"] { color: var(--sidebar-current-fg) !important; }
.quick-action { color: color-mix(in srgb, var(--on-accent) 92%, transparent); }
.empty-icon { background: var(--accent-soft); }
.empty-icon::after { background-color: var(--accent-2); }
.st-accent { background: var(--accent-soft); color: var(--accent-2); }
[data-theme="base"] .empty-icon::after { background-color: #d4d4d8; }
[data-theme="base"] .st-accent { color: #d4d4d8; }
[data-appearance="light"][data-theme="base"] .empty-icon::after { background-color: #171717; }
[data-appearance="light"][data-theme="base"] .st-accent { color: #171717; }
.st-neutral { background: var(--surface-3); color: var(--muted); }
.st-black { background: var(--surface-4); }
.matthew-toast { background: var(--surface-3); border-color: var(--border-strong); }
.matthew-toast-info span:first-child { background: var(--accent-2); color: var(--on-accent); }
.progress-track { background: var(--surface-3); }

.preview-panel-bg { background: var(--surface-2); background-image: radial-gradient(var(--border-strong) 1px, transparent 1px); }
.inv-doc, .quote-doc { color-scheme: light; background: #fff !important; color: #171717 !important; }

/* Settings appearance chooser */
.appearance-panel { scroll-margin-top: 84px; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-option { position: relative; display: block; min-height: 132px; cursor: pointer; }
.mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.mode-option__card { height: 100%; min-height: 132px; padding: 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-2); display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 12px; }
.mode-option__preview { width: 88px; height: 72px; border-radius: 13px; padding: 10px; display: grid; grid-template-columns: 18px 1fr; gap: 8px; box-shadow: inset 0 0 0 1px rgba(127,127,127,.18); }
.mode-option__preview::before { content: ""; border-radius: 6px; }
.mode-option__preview-lines { display: flex; flex-direction: column; gap: 6px; padding-top: 5px; }
.mode-option__preview-lines::before, .mode-option__preview-lines::after { content: ""; height: 6px; border-radius: 99px; }
.mode-option__preview-lines span { width: 70%; height: 14px; margin-top: 3px; border-radius: 99px; }
.mode-option[data-option-mode="light"] .mode-option__preview { background:#fff; }
.mode-option[data-option-mode="light"] .mode-option__preview::before { background:#080808; }
.mode-option[data-option-mode="light"] .mode-option__preview-lines::before,
.mode-option[data-option-mode="light"] .mode-option__preview-lines::after { background:#d4d4d8; }
.mode-option[data-option-mode="light"] .mode-option__preview-lines span { background:#080808; }
.mode-option[data-option-mode="dark"] .mode-option__preview { background:#050505; }
.mode-option[data-option-mode="dark"] .mode-option__preview::before { background:#fff; }
.mode-option[data-option-mode="dark"] .mode-option__preview-lines::before,
.mode-option[data-option-mode="dark"] .mode-option__preview-lines::after { background:#404040; }
.mode-option[data-option-mode="dark"] .mode-option__preview-lines span { background:#fff; }
.mode-option__check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-4); color: transparent; font-size: 12px; }
.mode-option input:checked + .mode-option__card { border-color: var(--accent-border); box-shadow: var(--accent-shadow); }
.mode-option input:checked + .mode-option__card .mode-option__check { background: var(--primary-background); color: var(--primary-foreground); }
.mode-option input:focus-visible + .mode-option__card { border-color: var(--accent-2); box-shadow: var(--focus-ring); }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-option { position: relative; display: block; min-height: 112px; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option__card { height: 100%; min-height: 112px; padding: 12px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.theme-option__preview { height: 48px; border-radius: 12px; background: linear-gradient(145deg, var(--option-1), var(--option-2) 50%, var(--option-3)); color: var(--option-on); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.theme-option__meta { display: flex; align-items: center; gap: 8px; }
.theme-option__name { font-size: 13px; font-weight: 700; }
.theme-option__check { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-4); color: transparent; font-size: 12px; }
.theme-option input:checked + .theme-option__card { border-color: var(--accent-border); box-shadow: var(--accent-shadow); }
.theme-option input:checked + .theme-option__card .theme-option__check { background: var(--primary-background); color: var(--primary-foreground); }
.theme-option input:focus-visible + .theme-option__card { border-color: var(--accent-2); box-shadow: var(--focus-ring); }
.appearance-preview { background: var(--primary-background); color: var(--primary-foreground); box-shadow: var(--accent-shadow); }
.appearance-unsaved { color: var(--warning); }