.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
}

.theme-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.theme-toggle__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #94a3b8;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.theme-toggle__icon--sun {
    color: #fbbf24;
}

.theme-toggle--panel .theme-toggle__icon--sun {
    color: #d97706;
}

html:not(.dark) .theme-toggle__icon--moon {
    opacity: 0.45;
}

html.dark .theme-toggle__icon--sun {
    opacity: 0.45;
}

html.dark .theme-toggle__icon--moon {
    color: #cbd5e1;
}

.theme-toggle__track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.5rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle__thumb {
    position: absolute;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s ease;
}

.theme-toggle__input:checked + .theme-toggle__track,
html.dark .theme-toggle__track {
    background: rgba(148, 163, 184, 0.35);
    border-color: rgba(148, 163, 184, 0.45);
}

.theme-toggle__input:checked + .theme-toggle__track .theme-toggle__thumb,
html.dark .theme-toggle__thumb {
    transform: translateX(1.125rem);
}

.theme-toggle--panel .theme-toggle__track {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.theme-toggle--panel .theme-toggle__input:checked + .theme-toggle__track,
html.dark .theme-toggle--panel .theme-toggle__track {
    background: #404040;
    border-color: #525252;
}

.admin-topbar {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

html.dark {
    color-scheme: dark;
    --dm-bg: #121212;
    --dm-surface: #1c1c1c;
    --dm-surface-muted: #242424;
    --dm-border: #2e2e2e;
    --dm-border-strong: #3a3a3a;
    --dm-text: #a3a3a3;
    --dm-text-strong: #b8b8b8;
    --dm-text-muted: #9ca3af;
    --dm-text-faint: #a8b0bd;
    --dm-placeholder: #9ca3af;
    --dm-accent-brand: #6ee7b7;
    --dm-accent-green: #6d9478;
    --dm-accent-red: #a87878;
    --dm-input-bg: #242424;
    --dm-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --dm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

html.dark body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

.dark .bg-white {
    background-color: var(--dm-surface) !important;
}

.dark .bg-slate-50,
.dark .bg-slate-50\/70,
.dark .bg-slate-50\/80 {
    background-color: var(--dm-surface-muted) !important;
}

.dark .bg-slate-100 {
    background-color: var(--dm-bg) !important;
}

.dark .bg-slate-200 {
    background-color: #2e2e2e !important;
}

.dark .text-slate-900,
.dark .text-slate-800 {
    color: var(--dm-text-strong) !important;
}

.dark .text-slate-700 {
    color: var(--dm-text) !important;
}

.dark th,
.dark thead {
    color: var(--dm-text-muted) !important;
}

.dark main h1,
.dark main h2,
.dark main h3,
.dark main h4 {
    color: var(--dm-text-strong) !important;
}

.dark .text-slate-600 {
    color: var(--dm-text-muted) !important;
}

.dark .text-slate-500 {
    color: var(--dm-text-muted) !important;
}

.dark .text-slate-400 {
    color: var(--dm-text-faint) !important;
}

.dark .text-blue-900,
.dark .text-blue-800,
.dark .text-blue-700 {
    color: var(--dm-accent-brand) !important;
}

.dark .text-blue-600 {
    color: var(--dm-accent-brand) !important;
}

.dark .text-indigo-800,
.dark .text-indigo-700 {
    color: var(--dm-accent-brand) !important;
}

.dark .text-green-800,
.dark .text-green-900,
.dark .text-green-700 {
    color: var(--dm-accent-green) !important;
}

.dark .text-red-700,
.dark .text-red-800 {
    color: #fca5a5 !important;
}

.dark .text-red-900 {
    color: #fecaca !important;
}

.dark .text-red-600 {
    color: #f87171 !important;
}

.dark .hover\:text-red-800:hover {
    color: #fca5a5 !important;
}

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-slate-400,
.dark .border-blue-200,
.dark .border-red-200,
.dark .border-emerald-200,
.dark .border-amber-200 {
    border-color: var(--dm-border) !important;
}

.dark .border-2.border-blue-200 {
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dm-border) !important;
}

.dark .bg-blue-50,
.dark .bg-blue-100,
.dark .bg-blue-50\/40,
.dark .bg-blue-50\/50 {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

.dark .bg-green-50,
.dark .bg-green-100 {
    background-color: rgba(22, 163, 74, 0.2) !important;
}

.dark .bg-red-50 {
    background-color: rgba(220, 38, 38, 0.18) !important;
}

.dark .bg-slate-100.text-slate-700,
.dark span.bg-slate-100 {
    background-color: var(--dm-surface-muted) !important;
    color: var(--dm-text) !important;
}

.dark .hover\:bg-slate-50:hover {
    background-color: #2a2a2a !important;
}

.dark .hover\:bg-blue-50:hover,
.dark .hover\:bg-blue-100:hover {
    background-color: rgba(37, 99, 235, 0.28) !important;
}

.dark .hover\:bg-red-50:hover {
    background-color: rgba(220, 38, 38, 0.24) !important;
}

.dark .hover\:text-blue-800:hover {
    color: #809eb8 !important;
}

.dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
.dark textarea,
.dark select {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--dm-placeholder) !important;
    opacity: 1 !important;
}

.dark .placeholder\:text-slate-400::placeholder {
    color: var(--dm-placeholder) !important;
    opacity: 1 !important;
}

.dark input::-webkit-input-placeholder,
.dark textarea::-webkit-input-placeholder {
    color: var(--dm-placeholder) !important;
    opacity: 1 !important;
}

.dark input[type='checkbox'],
.dark input[type='radio'] {
    background-color: var(--dm-input-bg);
    border-color: var(--dm-border-strong);
}

.dark .shadow-sm {
    box-shadow: var(--dm-shadow) !important;
}

.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: var(--dm-shadow-lg) !important;
}

.dark .site-legend__title {
    color: var(--dm-text-muted) !important;
}

.dark .site-legend__pill {
    background-color: #2a2a2a !important;
    border-color: var(--dm-border-strong) !important;
    box-shadow: var(--dm-shadow);
}

.dark .site-legend__code {
    color: var(--dm-accent-brand) !important;
}

.dark .site-legend__domain {
    color: var(--dm-text-muted) !important;
}

.dark .ring-slate-200 {
    --tw-ring-color: var(--dm-border-strong) !important;
}

.dark .admin-pagination nav[aria-label="Pagination Navigation"] .text-gray-700,
.dark .admin-pagination nav[aria-label="Pagination Navigation"] .text-gray-600 {
    color: var(--dm-text-muted) !important;
}

.dark .admin-pagination nav[aria-label="Pagination Navigation"] .bg-white,
.dark .admin-pagination nav[aria-label="Pagination Navigation"] span.bg-white {
    background-color: var(--dm-surface) !important;
}

.dark .admin-pagination nav[aria-label="Pagination Navigation"] .border-gray-300 {
    border-color: var(--dm-border-strong) !important;
}

.dark .admin-pagination nav[aria-label="Pagination Navigation"] .text-gray-500,
.dark .admin-pagination nav[aria-label="Pagination Navigation"] .text-gray-800 {
    color: var(--dm-text) !important;
}

.dark .admin-pagination nav[aria-label="Pagination Navigation"] .bg-gray-200 {
    background-color: var(--dm-surface-muted) !important;
}

@media (max-width: 767px) {
    .dark .responsive-table tbody tr,
    .dark .responsive-table tbody tr:nth-child(even) {
        border-color: var(--dm-border);
        background: var(--dm-surface);
        box-shadow: var(--dm-shadow);
    }

    .dark .responsive-table td + td {
        border-top-color: var(--dm-border);
    }

    .dark .responsive-table td::before {
        color: var(--dm-text-muted);
    }
}

.dark .text-blue-800\/80 {
    color: rgba(167, 243, 208, 0.92) !important;
}

.dark .bg-emerald-50,
.dark .bg-emerald-100,
.dark .bg-emerald-50\/50,
.dark .bg-emerald-50\/60 {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

.dark .text-emerald-700,
.dark .text-emerald-800,
.dark .text-emerald-900 {
    color: #a7f3d0 !important;
}

.dark .ring-emerald-200 {
    --tw-ring-color: rgba(52, 211, 153, 0.35) !important;
}

.dark .hover\:bg-emerald-100:hover {
    background-color: rgba(16, 185, 129, 0.22) !important;
}

.dark .peer-focus\:ring-emerald-300 {
    --tw-ring-color: rgba(52, 211, 153, 0.4) !important;
}

.dark .bg-amber-50,
.dark .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.16) !important;
}

.dark .text-amber-700,
.dark .text-amber-800,
.dark .text-amber-900 {
    color: #fcd34d !important;
}

.dark .bg-red-100 {
    background-color: rgba(220, 38, 38, 0.2) !important;
}

.dark .admin-tinymce-wrap .tox-tinymce {
    border-color: var(--dm-border-strong) !important;
    background-color: var(--dm-input-bg) !important;
}

.dark .admin-tinymce-wrap .tox .tox-toolbar-overlord,
.dark .admin-tinymce-wrap .tox .tox-toolbar__primary {
    background-color: var(--dm-surface-muted) !important;
}

.dark .admin-tinymce-wrap .tox .tox-edit-area__iframe {
    background-color: var(--dm-input-bg) !important;
}

.dark .admin-tinymce-wrap .tox .tox-tbtn {
    color: var(--dm-text) !important;
}

.dark .admin-tinymce-wrap .tox .tox-tbtn svg {
    fill: var(--dm-text) !important;
}

.dark .italic.text-slate-400,
.dark button.italic.text-slate-400,
.dark span.italic.text-slate-400 {
    color: var(--dm-placeholder) !important;
}

.dark .admin-tinymce-wrap .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
    color: var(--dm-placeholder) !important;
    opacity: 1 !important;
}
