:root {
    color-scheme: light;
    --app-bg: #f3f4f6;
    --app-surface: #ffffff;
    --app-surface-muted: #f9fafb;
    --app-border: #d1d5db;
    --app-text: #111827;
    --app-text-muted: #4b5563;
    --app-hover: #f3f4f6;
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --app-bg: #0f172a;
    --app-surface: #172033;
    --app-surface-muted: #111827;
    --app-border: #334155;
    --app-text: #f8fafc;
    --app-text-muted: #cbd5e1;
    --app-hover: rgba(148, 163, 184, 0.16);
}

body {
    background-color: var(--app-bg);
    color: var(--app-text);
    transition: background-color 0.18s ease, color 0.18s ease;
}

html[data-theme='dark'] body,
html[data-theme='dark'] main.bg-gray-100 {
    background-color: var(--app-bg) !important;
}

html[data-theme='dark'] .bg-white,
html[data-theme='dark'] .bg-gray-50,
html[data-theme='dark'] .bg-gray-100,
html[data-theme='dark'] .dark\:bg-white {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] .bg-gray-200,
html[data-theme='dark'] .dark\:bg-gray-800,
html[data-theme='dark'] .dark\:bg-gray-700,
html[data-theme='dark'] .dark\:bg-gray-600 {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] header.dark\:bg-white {
    background-color: #1f2937 !important;
}

html[data-theme='dark'] .text-gray-900,
html[data-theme='dark'] .text-gray-800,
html[data-theme='dark'] .text-gray-700,
html[data-theme='dark'] .text-gray-600,
html[data-theme='dark'] .text-gray-500,
html[data-theme='dark'] .text-black,
html[data-theme='dark'] .dark\:text-neutral-800,
html[data-theme='dark'] .dark\:text-black {
    color: var(--app-text) !important;
}

html[data-theme='dark'] .text-gray-400,
html[data-theme='dark'] .dark\:text-gray-400,
html[data-theme='dark'] .dark\:text-gray-300,
html[data-theme='dark'] .dark\:text-gray-200 {
    color: var(--app-text-muted) !important;
}

html[data-theme='dark'] .border-gray-200,
html[data-theme='dark'] .border-gray-300,
html[data-theme='dark'] .border-gray-400,
html[data-theme='dark'] .dark\:border-gray-600,
html[data-theme='dark'] .dark\:border-gray-500 {
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']),
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
    background-color: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

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

html[data-theme='dark'] .shadow,
html[data-theme='dark'] .shadow-sm,
html[data-theme='dark'] .shadow-md,
html[data-theme='dark'] .shadow-lg {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme='dark'] .hover\:bg-white:hover,
html[data-theme='dark'] .hover\:bg-gray-50:hover,
html[data-theme='dark'] .hover\:bg-gray-100:hover,
html[data-theme='dark'] .hover\:bg-gray-200:hover,
html[data-theme='dark'] .group:hover .group-hover\:bg-white,
html[data-theme='dark'] .group:hover .group-hover\:bg-gray-50,
html[data-theme='dark'] .group:hover .group-hover\:bg-gray-100,
html[data-theme='dark'] tr.hover\:bg-white:hover,
html[data-theme='dark'] tr.hover\:bg-gray-50:hover,
html[data-theme='dark'] tr.hover\:bg-gray-100:hover,
html[data-theme='dark'] tr.hover\:bg-gray-200:hover {
    background-color: var(--app-hover) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] table {
    color: var(--app-text);
}

html[data-theme='dark'] thead.bg-gray-50,
html[data-theme='dark'] th.bg-gray-50 {
    background-color: #1e293b !important;
    color: var(--app-text-muted) !important;
}

html[data-theme='dark'] .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html[data-theme='dark'] .divide-gray-300 > :not([hidden]) ~ :not([hidden]),
html[data-theme='dark'] .divide-gray-400 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .choices,
html[data-theme='dark'] .choices__inner,
html[data-theme='dark'] .choices__list--dropdown {
    background-color: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] .choices__list--dropdown .choices__item--selectable {
    background-color: var(--app-surface-muted);
    color: var(--app-text);
}

html[data-theme='dark'] .choices__list--dropdown .choices__item--selectable:hover,
html[data-theme='dark'] .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--app-hover);
    color: var(--app-text);
}

html[data-theme='dark'] .choices__input {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] .table-container .bg-yellow-100 {
    background-color: #292524 !important;
    color: #fef3c7 !important;
}

html[data-theme='dark'] .table-container .text-yellow-600 {
    color: #facc15 !important;
}

html[data-theme='dark'] .table-container .bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

html[data-theme='dark'] .table-container .bg-blue-700,
html[data-theme='dark'] .table-container .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme='dark'] .settings-main {
    background-color: var(--app-bg) !important;
}

html[data-theme='dark'] .settings-sidebar a:hover,
html[data-theme='dark'] .settings-sidebar .bg-gray-700 {
    background-color: rgba(148, 163, 184, 0.18) !important;
    color: #ffffff !important;
}

html[data-theme='dark'] .zones-container .zone,
html[data-theme='dark'] .cash-control-page .county-block {
    background-color: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] .cash-control-page .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #bfdbfe !important;
}

html[data-theme='dark'] .cash-control-page .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #bbf7d0 !important;
}

html[data-theme='dark'] .cash-control-page .bg-red-50 {
    background-color: rgba(248, 113, 113, 0.18) !important;
    color: #fecaca !important;
}

[data-color-swatch] {
    display: inline-block;
    min-width: 1.5rem;
    min-height: 1.5rem;
    border-radius: 9999px;
    pointer-events: none;
}

html[data-theme='dark'] [data-color-swatch] {
    border-color: rgba(255, 255, 255, 0.48) !important;
}

.theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.92);
    color: #334155;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background-color: #f8fafc;
    border-color: #94a3b8;
    outline: none;
}

.theme-toggle__icon {
    width: 1.25rem;
    height: 1.25rem;
}

.theme-toggle__icon--sun {
    display: block;
}

.theme-toggle__icon--moon {
    display: none;
}

html[data-theme='dark'] .theme-toggle {
    background-color: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.32);
    color: #f8fafc;
}

html[data-theme='dark'] .theme-toggle:hover,
html[data-theme='dark'] .theme-toggle:focus-visible {
    background-color: #1e293b;
    border-color: #64748b;
}

html[data-theme='dark'] .theme-toggle__icon--sun {
    display: none;
}

html[data-theme='dark'] .theme-toggle__icon--moon {
    display: block;
}

.theme-toggle--sidebar {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto;
}

.theme-toggle--sidebar-wide {
    width: 100%;
    height: 2.5rem;
}