/* Theme colour schemes — adapted from local-only/demo/src/styles/colors.css */

:root {
    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-300: #a5b4fc;
    --color-indigo-400: #818cf8;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;
    --color-indigo-800: #3730a3;
    --color-indigo-900: #312e81;
    --color-indigo-950: #1e1b4b;
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;
    --color-blue-950: #172554;
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-300: #86efac;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;
    --color-green-900: #14532d;
    --color-green-950: #052e16;
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
    --color-amber-950: #451a03;
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-300: #d8b4fe;
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-700: #7e22ce;
    --color-purple-800: #6b21a8;
    --color-purple-900: #581c87;
    --color-purple-950: #3b0764;
    --color-rose-50: #fff1f2;
    --color-rose-100: #ffe4e6;
    --color-rose-200: #fecdd3;
    --color-rose-300: #fda4af;
    --color-rose-400: #fb7185;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-rose-700: #be123c;
    --color-rose-800: #9f1239;
    --color-rose-900: #881337;
    --color-rose-950: #4c0519;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-150: #ebedf0;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-150: #ededed;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0a0a0a;
}

/* Light colour scheme tokens (default: slate) */
:root,
[data-theme-light="slate"] {
    --tlx-light-bg: var(--color-slate-50);
    --tlx-light-surface: #ffffff;
    --tlx-light-surface-muted: var(--color-slate-100);
    --tlx-light-border: var(--color-slate-200);
    --tlx-light-text: var(--color-slate-800);
    --tlx-light-text-secondary: var(--color-slate-600);
    --tlx-light-text-muted: var(--color-slate-500);
    --tlx-light-hover: var(--color-slate-100);
    --tlx-border: var(--color-slate-200);
}

[data-theme-light="gray"] {
    --tlx-light-bg: #faf9f7;
    --tlx-light-surface: #ffffff;
    --tlx-light-surface-muted: #f3f0ec;
    --tlx-light-border: #e8e2d9;
    --tlx-light-text: #2c2520;
    --tlx-light-text-secondary: #6b5f57;
    --tlx-light-text-muted: #8a7a72;
    --tlx-light-hover: #f3f0ec;
    --tlx-border: #e8e2d9;
}

[data-theme-light="neutral"] {
    --tlx-light-bg: #f4f4f5;
    --tlx-light-surface: #ffffff;
    --tlx-light-surface-muted: #e4e4e7;
    --tlx-light-border: #d4d4d8;
    --tlx-light-text: #18181b;
    --tlx-light-text-secondary: #52525b;
    --tlx-light-text-muted: #71717a;
    --tlx-light-hover: #e4e4e7;
    --tlx-border: #d4d4d8;
}

[data-theme-dark="navy"] {
    --color-dark-50: #e7e9ef;
    --color-dark-100: #c2c9d6;
    --color-dark-200: #a5afc4;
    --color-dark-300: #6d7ea1;
    --color-dark-400: #5c6b8a;
    --color-dark-450: #465675;
    --color-dark-500: #384766;
    --color-dark-600: #313e59;
    --color-dark-700: #24314a;
    --color-dark-750: #222e45;
    --color-dark-800: #202b40;
    --color-dark-900: #182030;
}

[data-theme-dark="mirage"] {
    --color-dark-50: #dde5f5;
    --color-dark-100: #b4bfd9;
    --color-dark-200: #9eaac4;
    --color-dark-300: #6c7c9e;
    --color-dark-400: #3d4e70;
    --color-dark-450: #293859;
    --color-dark-500: #1e2b47;
    --color-dark-600: #1a2640;
    --color-dark-700: #101a2e;
    --color-dark-750: #0f1729;
    --color-dark-800: #0c1221;
    --color-dark-900: #050a16;
}

[data-theme-dark="mint"] {
    --color-dark-50: #e1e5ea;
    --color-dark-100: #c5ccd3;
    --color-dark-200: #a0abb6;
    --color-dark-300: #70838f;
    --color-dark-400: #506877;
    --color-dark-450: #384954;
    --color-dark-500: #2a3942;
    --color-dark-600: #242f38;
    --color-dark-700: #152129;
    --color-dark-750: #111b22;
    --color-dark-800: #0d161c;
    --color-dark-900: #0a1014;
}

[data-theme-dark="black"] {
    --color-dark-50: #ebebed;
    --color-dark-100: #d9d9de;
    --color-dark-200: #c5c5cc;
    --color-dark-300: #93939c;
    --color-dark-400: #4a4a4f;
    --color-dark-450: #333338;
    --color-dark-500: #242428;
    --color-dark-600: #1f1f21;
    --color-dark-700: #131314;
    --color-dark-750: #0c0c0d;
    --color-dark-800: #080809;
    --color-dark-900: #000000;
}

[data-theme-dark="cinder"] {
    --color-dark-50: #e6e7eb;
    --color-dark-100: #d0d2db;
    --color-dark-200: #b7bac4;
    --color-dark-300: #838794;
    --color-dark-400: #4c4f57;
    --color-dark-450: #383a41;
    --color-dark-500: #2a2c32;
    --color-dark-600: #232429;
    --color-dark-700: #1c1d21;
    --color-dark-750: #1a1b1f;
    --color-dark-800: #15161a;
    --color-dark-900: #0e0f11;
}

[data-theme-primary="indigo"] {
    --color-primary-50: var(--color-indigo-50);
    --color-primary-100: var(--color-indigo-100);
    --color-primary-200: var(--color-indigo-200);
    --color-primary-300: var(--color-indigo-300);
    --color-primary-400: var(--color-indigo-400);
    --color-primary-500: var(--color-indigo-500);
    --color-primary-600: var(--color-indigo-600);
    --color-primary-700: var(--color-indigo-700);
    --color-primary-800: var(--color-indigo-800);
    --color-primary-900: var(--color-indigo-900);
    --color-primary-950: var(--color-indigo-950);
}

[data-theme-primary="blue"] {
    --color-primary-50: var(--color-blue-50);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-400: var(--color-blue-400);
    --color-primary-500: var(--color-blue-500);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);
    --color-primary-900: var(--color-blue-900);
    --color-primary-950: var(--color-blue-950);
}

[data-theme-primary="green"] {
    --color-primary-50: var(--color-green-50);
    --color-primary-100: var(--color-green-100);
    --color-primary-200: var(--color-green-200);
    --color-primary-300: var(--color-green-300);
    --color-primary-400: var(--color-green-400);
    --color-primary-500: var(--color-green-500);
    --color-primary-600: var(--color-green-600);
    --color-primary-700: var(--color-green-700);
    --color-primary-800: var(--color-green-800);
    --color-primary-900: var(--color-green-900);
    --color-primary-950: var(--color-green-950);
}

[data-theme-primary="amber"] {
    --color-primary-50: var(--color-amber-50);
    --color-primary-100: var(--color-amber-100);
    --color-primary-200: var(--color-amber-300);
    --color-primary-300: var(--color-amber-300);
    --color-primary-400: var(--color-amber-400);
    --color-primary-500: var(--color-amber-500);
    --color-primary-600: var(--color-amber-600);
    --color-primary-700: var(--color-amber-700);
    --color-primary-800: var(--color-amber-800);
    --color-primary-900: var(--color-amber-900);
    --color-primary-950: var(--color-amber-950);
}

[data-theme-primary="purple"] {
    --color-primary-50: var(--color-purple-50);
    --color-primary-100: var(--color-purple-100);
    --color-primary-200: var(--color-purple-200);
    --color-primary-300: var(--color-purple-300);
    --color-primary-400: var(--color-purple-400);
    --color-primary-500: var(--color-purple-500);
    --color-primary-600: var(--color-purple-600);
    --color-primary-700: var(--color-purple-700);
    --color-primary-800: var(--color-purple-800);
    --color-primary-900: var(--color-purple-900);
    --color-primary-950: var(--color-purple-950);
}

[data-theme-primary="rose"] {
    --color-primary-50: var(--color-rose-50);
    --color-primary-100: var(--color-rose-100);
    --color-primary-200: var(--color-rose-200);
    --color-primary-300: var(--color-rose-300);
    --color-primary-400: var(--color-rose-400);
    --color-primary-500: var(--color-rose-500);
    --color-primary-600: var(--color-rose-600);
    --color-primary-700: var(--color-rose-700);
    --color-primary-800: var(--color-rose-800);
    --color-primary-900: var(--color-rose-900);
    --color-primary-950: var(--color-rose-950);
}

/* Appearance settings page */
.tlx-appearance-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 7rem;
    cursor: pointer;
}

.tlx-appearance-option--compact {
    width: 5.5rem;
}

.tlx-appearance-option__preview {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 4.5rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    background: #f8fafc;
    color: #64748b;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.tlx-appearance-option--compact .tlx-appearance-option__preview {
    height: 3.5rem;
}

.tlx-appearance-option__preview--light {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.tlx-appearance-option__preview--dark {
    background: #111827;
    border-color: #1f2937;
}

/* Split light/dark preview: clip the gradient to the padding box so it
   does not paint under the border (which looked like a lopsided black edge). */
.tlx-appearance-option__preview--auto {
    background: linear-gradient(135deg, #f8fafc 50%, #0e0f11 50%);
    background-clip: padding-box;
    border-color: #cbd5e1;
}

.tlx-appearance-mockup {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    width: 100%;
    padding: 0.375rem;
}

.tlx-appearance-mockup__block {
    flex: 1;
    min-height: 0;
    border-radius: 0.25rem;
    padding: 0.25rem 0.3125rem;
}

.tlx-appearance-mockup__block--stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1875rem;
}

.tlx-appearance-mockup__block--row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tlx-appearance-mockup__bar {
    display: block;
    height: 0.1875rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.tlx-appearance-mockup__bar--short {
    width: 68%;
}

.tlx-appearance-mockup__bar--long {
    width: 88%;
}

.tlx-appearance-mockup__bar--flex {
    flex: 1;
    min-width: 0;
}

.tlx-appearance-mockup__dot {
    display: block;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.tlx-appearance-option__preview--light .tlx-appearance-mockup__block {
    background: #ffffff;
}

.tlx-appearance-option__preview--light .tlx-appearance-mockup__bar,
.tlx-appearance-option__preview--light .tlx-appearance-mockup__dot {
    background: #e5e7eb;
}

.tlx-appearance-option__preview--dark .tlx-appearance-mockup__block {
    background: #374151;
}

.tlx-appearance-option__preview--dark .tlx-appearance-mockup__bar,
.tlx-appearance-option__preview--dark .tlx-appearance-mockup__dot {
    background: #4b5563;
}

.tlx-appearance-option--selected .tlx-appearance-option__preview {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500);
}

.tlx-appearance-option__label {
    font-size: 0.8125rem;
    color: #64748b;
    text-transform: capitalize;
}

.tlx-appearance-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tlx-appearance-swatch--selected {
    border-color: var(--color-primary-500);
}

.tlx-appearance-swatch--selected .tlx-appearance-swatch__diamond {
    transform: rotate(45deg) scale(1.1);
}

.tlx-appearance-swatch__diamond {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.2rem;
    transition: transform 0.2s ease;
}

/* Light mode layout overrides — driven by data-theme-light tokens */
html:not(.dark),
html:not(.dark) body,
html:not(.dark) [data-layout="main-layout"] {
    color: var(--tlx-light-text);
    background: var(--tlx-light-bg);
}

html:not(.dark)[data-card-skin="bordered"] body,
html:not(.dark)[data-card-skin="bordered"] [data-layout="main-layout"],
html:not([data-card-skin]):not(.dark) body,
html:not([data-card-skin]):not(.dark) [data-layout="main-layout"] {
    background: var(--tlx-light-surface);
}

html:not(.dark) .tlx-main-rail,
html:not(.dark) [data-layout="main-layout"] .prime-panel {
    background: var(--tlx-light-surface);
    border-color: var(--tlx-light-border);
}

html:not(.dark) .tlx-rail-btn {
    color: var(--tlx-light-text-muted);
}

html:not(.dark) .tlx-rail-btn--brand,
html:not(.dark) .tlx-rail-btn--brand:hover,
html:not(.dark) .tlx-rail-btn--brand:focus-visible,
html:not(.dark) .tlx-rail-btn--brand:active {
    color: var(--color-primary-600);
    background: transparent;
}

html:not(.dark) .tlx-prime-panel__brand {
    color: var(--tlx-light-text);
}

html:not(.dark) .tlx-prime-panel__link,
html:not(.dark) .tlx-prime-panel__sublink {
    color: var(--tlx-light-text-secondary);
}

html:not(.dark) .tlx-prime-panel__link:hover,
html:not(.dark) .tlx-prime-panel__sublink:hover,
html:not(.dark) .tlx-prime-panel__link:focus-visible,
html:not(.dark) .tlx-prime-panel__sublink:focus-visible {
    color: var(--tlx-light-text);
}

html:not(.dark) .tlx-prime-panel__link--active,
html:not(.dark) .tlx-prime-panel__sublink--active {
    color: var(--color-primary-600);
}

html:not(.dark) .tlx-prime-panel__link--has-children[aria-expanded="true"] {
    color: var(--tlx-light-text);
    font-weight: 600;
}

html:not(.dark) .tlx-prime-panel__toggle-icon {
    color: var(--tlx-light-text-muted);
}

html:not(.dark) .tlx-prime-panel__back {
    color: var(--tlx-light-text-muted);
}

html:not(.dark) .tlx-prime-panel__back:hover {
    background: var(--tlx-light-hover);
    color: var(--tlx-light-text);
}

html:not(.dark) .tlx-prime-panel__badge {
    background: var(--tlx-light-surface-muted);
    color: var(--tlx-light-text-secondary);
}

html:not(.dark) [data-layout="main-layout"] .app-header {
    background: color-mix(in srgb, var(--tlx-light-surface) 88%, transparent);
    border-color: var(--tlx-light-border);
}

html:not(.dark) .tlx-header-search {
    border-color: #d1d5db;
    background: #ffffff;
    color: #6b7280;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html:not(.dark) .tlx-header-search:hover {
    border-color: #9ca3af;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

@media (max-width: 767px) {
    html:not(.dark) .tlx-header-search,
    html:not(.dark) .tlx-header-search:hover {
        border: none;
        box-shadow: none;
    }
}

html:not(.dark) .tlx-header-btn {
    color: var(--tlx-light-text-muted);
}

html:not(.dark) .tlx-header-btn:hover {
    background: var(--tlx-light-hover);
    color: var(--tlx-light-text);
}

html:not(.dark) .tlx-header-btn--avatar {
    background: var(--tlx-light-surface-muted);
}

html:not(.dark) .tlx-header-btn--avatar::after {
    border-color: var(--tlx-light-surface);
}

html:not(.dark) .tlx-card {
    background: var(--tlx-light-surface);
    border-color: var(--tlx-light-border);
}

html:not(.dark) .tlx-card__title {
    color: var(--tlx-light-text);
    border-color: var(--tlx-light-border);
}

html:not(.dark) .text-slate-800,
html:not(.dark) .text-slate-900,
html:not(.dark) .text-gray-800 {
    color: var(--tlx-light-text) !important;
}

html:not(.dark) .text-slate-500,
html:not(.dark) .text-slate-600,
html:not(.dark) .text-slate-700,
html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-700 {
    color: var(--tlx-light-text-muted) !important;
}

html:not(.dark) .border-slate-100,
html:not(.dark) .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--tlx-light-border) !important;
}

html:not(.dark) .tlx-appearance-option__preview:not(.tlx-appearance-option__preview--light):not(.tlx-appearance-option__preview--dark):not(.tlx-appearance-option__preview--auto) {
    background: var(--tlx-light-surface-muted);
    color: var(--tlx-light-text-muted);
}

html:not(.dark) .tlx-appearance-swatch {
    border-color: var(--tlx-light-border);
}

html:not(.dark) .tlx-appearance-swatch--selected {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500);
}

html:not(.dark) .tlx-rail-tooltip {
    background: var(--tlx-light-text);
    color: var(--tlx-light-surface);
}

/* Dark mode layout overrides */
html.dark {
    color-scheme: dark;
    --tlx-dt-cell-bg: var(--color-dark-700);
    --tlx-dt-head-bg: var(--color-dark-800);
    --tlx-dt-cell-border: var(--color-dark-500);
    --tlx-dt-head-border: var(--color-dark-600);
    --tlx-dt-loading-overlay: rgba(24, 32, 48, 0.92);
    --tlx-dt-spinner-track: var(--color-dark-500);
}

html.dark,
html.dark body,
html.dark [data-layout="main-layout"] {
    color: var(--color-dark-200);
    background: var(--color-dark-900);
}

html.dark .tlx-main-rail,
html.dark [data-layout="main-layout"] .prime-panel {
    background: var(--color-dark-750);
    border-color: var(--color-dark-600);
}

html.dark .tlx-rail-btn {
    color: var(--color-dark-300);
}

html.dark .tlx-rail-btn:hover,
html.dark .tlx-rail-btn:focus-visible {
    color: var(--color-primary-400);
    background: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
}

html.dark .tlx-rail-btn--active {
    color: var(--color-primary-400);
    background: color-mix(in srgb, var(--color-primary-500) 22%, transparent);
}

html.dark .tlx-rail-btn--brand,
html.dark .tlx-rail-btn--brand:hover,
html.dark .tlx-rail-btn--brand:focus-visible,
html.dark .tlx-rail-btn--brand:active {
    color: var(--color-primary-400);
    background: transparent;
}

html.dark .tlx-prime-panel__brand {
    color: var(--color-dark-100);
}

html.dark .tlx-prime-panel__link,
html.dark .tlx-prime-panel__sublink {
    color: var(--color-dark-200);
}

html.dark .tlx-prime-panel__link:hover,
html.dark .tlx-prime-panel__sublink:hover,
html.dark .tlx-prime-panel__link:focus-visible,
html.dark .tlx-prime-panel__sublink:focus-visible {
    color: var(--color-dark-50);
}

html.dark .tlx-prime-panel__link--active,
html.dark .tlx-prime-panel__sublink--active {
    color: var(--color-primary-400);
}

html.dark .tlx-prime-panel__link--has-children[aria-expanded="true"] {
    color: var(--color-dark-50);
    font-weight: 600;
}

html.dark .tlx-prime-panel__sublink--active .tlx-prime-panel__sublink-bullet {
    background: var(--color-primary-400);
    border-color: var(--color-primary-400);
}

html.dark .tlx-prime-panel__toggle-icon {
    color: var(--color-dark-400);
}

html.dark .tlx-prime-panel__back:hover {
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

html.dark .tlx-prime-panel__badge {
    background: var(--color-dark-600);
    color: var(--color-dark-200);
}

html.dark [data-layout="main-layout"] .app-header {
    background: color-mix(in srgb, var(--color-dark-750) 88%, transparent);
    border-color: var(--color-dark-600);
}

html.dark [data-layout="main-layout"] .app-header__title {
    color: var(--color-dark-100);
}

html.dark .tlx-header-search {
    border-color: var(--color-dark-500);
    background: color-mix(in srgb, var(--color-dark-700) 92%, #000000);
    color: var(--color-dark-300);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html.dark .tlx-header-search:hover {
    border-color: var(--color-dark-400);
    background: var(--color-dark-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

@media (max-width: 767px) {
    html.dark .tlx-header-search,
    html.dark .tlx-header-search:hover {
        border: none;
        box-shadow: none;
    }
}

html.dark .tlx-header-btn {
    color: var(--color-dark-300);
}

html.dark .tlx-header-btn:hover {
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

html.dark .tlx-header-btn--avatar {
    background: var(--color-dark-600);
}

html.dark .tlx-header-btn--avatar::after {
    border-color: var(--color-dark-750);
}

html.dark .tlx-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-600);
}

html.dark .tlx-card__title {
    color: var(--color-dark-100);
    border-color: var(--color-dark-600);
}

html.dark .tlx-modal__panel {
    background: var(--color-dark-700);
    border-color: var(--color-dark-500);
}

html.dark .tlx-modal__header,
html.dark .tlx-modal__footer {
    border-color: var(--color-dark-600);
}

html.dark .tlx-modal__title,
html.dark .text-slate-800,
html.dark .text-slate-900,
html.dark .text-gray-800,
html.dark .text-gray-900 {
    color: var(--color-dark-100) !important;
}

html.dark .tlx-confirm__title {
    color: var(--color-dark-50);
}

html.dark .tlx-confirm__description {
    color: var(--color-dark-300);
}

html.dark .tlx-confirm__description strong,
html.dark .tlx-confirm__description b {
    color: var(--color-dark-100);
}

html.dark .tlx-modal__backdrop {
    background: rgba(5, 10, 22, 0.72);
}

html.dark .text-slate-500,
html.dark .text-slate-600,
html.dark .text-slate-700,
html.dark .text-gray-400,
html.dark .text-gray-500,
html.dark .text-gray-600,
html.dark .text-gray-700 {
    color: var(--color-dark-300) !important;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-dark-600) !important;
}

html.dark .bg-slate-100 {
    background-color: var(--color-dark-600) !important;
}

html.dark .bg-slate-200 {
    background-color: var(--color-dark-500) !important;
}

html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-200:hover {
    background-color: var(--color-dark-500) !important;
}

/* Quick search modal (Ctrl+Q / header search) */
html.dark .tlx-search-modal .tlx-modal__header {
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

html.dark .tlx-search-modal .tlx-input {
    border-color: var(--color-dark-500);
    background: var(--color-dark-750);
}

html.dark .tlx-search-modal .tlx-input input {
    color: var(--color-dark-100);
}

html.dark .tlx-search-modal .tlx-input input::placeholder {
    color: var(--color-dark-400);
}

html.dark .tlx-search-modal .tlx-input__prefix {
    color: var(--color-dark-300);
}

html.dark .tlx-search-modal__footer {
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

html.dark .tlx-search-quick-label {
    color: var(--color-dark-400);
}

html.dark .tlx-search-quick-link {
    color: var(--color-dark-200);
    background: var(--color-dark-600);
    border-color: var(--color-dark-500);
}

html.dark .tlx-search-quick-link:hover {
    background: var(--color-dark-500);
    border-color: var(--color-dark-400);
    color: var(--color-dark-50);
}

html.dark #admin-search-results [data-search-result]:hover,
html.dark #admin-search-results [data-search-result].bg-slate-100 {
    color: var(--color-dark-100);
}

html.dark .tlx-appearance-option__preview:not(.tlx-appearance-option__preview--light):not(.tlx-appearance-option__preview--dark):not(.tlx-appearance-option__preview--auto) {
    background: var(--color-dark-600);
}

html.dark .tlx-appearance-option__preview--auto {
    border-color: #4b5563;
}

html.dark .tlx-appearance-swatch {
    border-color: var(--color-dark-500);
}

html.dark .tlx-appearance-swatch--selected {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px var(--color-dark-700), 0 0 0 4px var(--color-primary-500);
}

html.dark .tlx-appearance-option__label {
    color: var(--color-dark-300);
}

html.dark .tlx-appearance-option--selected .tlx-appearance-option__preview {
    box-shadow: 0 0 0 2px var(--color-dark-700), 0 0 0 4px var(--color-primary-500);
}

html.dark .tlx-select {
    border-color: var(--color-dark-500);
    background: var(--color-dark-750);
    color: var(--color-dark-100);
}

html.dark .tlx-select:hover {
    border-color: var(--color-dark-400);
}

html.dark .tlx-select:focus {
    border-color: var(--color-primary-500);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
}

html.dark .tlx-select option {
    background: var(--color-dark-750);
    color: var(--color-dark-100);
}

html.dark .tlx-rail-tooltip {
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

/* DataTables — dark mode chrome with a light table island (matches Tailux list pages). */
html.dark .tlx-card .tlx-toolbar--table {
    border-bottom-color: var(--color-dark-600);
}

html.dark .tlx-card .tlx-search-input {
    border-color: var(--color-dark-500);
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

html.dark .tlx-card .tlx-search-input:hover {
    border-color: var(--color-dark-400);
}

html.dark .tlx-card .tlx-search-input__prefix {
    color: var(--color-dark-300);
}

html.dark .tlx-card .tlx-search-input input::placeholder {
    color: var(--color-dark-400);
}

html.dark .tlx-card .tlx-search-input.has-value,
html.dark .tlx-card .tlx-search-input:has(input:not(:placeholder-shown)) {
    background-color: var(--color-dark-600);
}

html.dark .tlx-card .tlx-filter-pill {
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .tlx-card .tlx-filter-pill:hover {
    border-color: var(--color-dark-400);
    color: var(--color-dark-100);
}

html.dark .tlx-card .tlx-filter-pill__icon {
    color: var(--color-dark-300);
}

html.dark .tlx-card .tlx-filter-pill[data-filter-active="true"],
html.dark .tlx-card .tlx-filter-pill[data-filter-show-value="true"] {
    background-color: transparent;
}

html.dark .tlx-card .tlx-filter-pill[data-filter-active="true"] .tlx-filter-pill__sep,
html.dark .tlx-card .tlx-filter-pill[data-filter-show-value="true"] .tlx-filter-pill__sep {
    background: var(--color-dark-500);
}

html.dark .tlx-card .tlx-filter-pill[data-filter-active="true"] .tlx-filter-pill__value,
html.dark .tlx-card .tlx-filter-pill[data-filter-show-value="true"] .tlx-filter-pill__value {
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

html.dark .tlx-card .tlx-filter-pill__input::placeholder {
    color: var(--color-dark-400);
}

html.dark .tlx-card .tlx-toolbar__reset {
    color: var(--color-dark-300);
}

html.dark .tlx-card .tlx-toolbar__reset:hover {
    color: var(--color-dark-100);
}

html.dark .tlx-card [data-filter-panel] {
    border-color: var(--color-dark-500) !important;
    background: var(--color-dark-700) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html.dark .tlx-card [data-filter-panel].bg-white {
    background: var(--color-dark-700) !important;
}

html.dark .tlx-card [data-filter-panel] .hover\:bg-gray-100:hover {
    background-color: var(--color-dark-600) !important;
}

html.dark .tlx-card [data-filter-panel] .hover\:bg-gray-200:hover {
    background-color: var(--color-dark-500) !important;
}

html.dark .tlx-card [data-filter-panel] [data-filter-option] {
    color: var(--color-dark-100);
}

html.dark .tlx-card [data-filter-panel] [data-filter-option]:hover {
    background: var(--color-dark-600);
}

html.dark .tlx-card [data-filter-panel] [data-filter-clear] {
    border-top-color: var(--color-dark-600);
    background: var(--color-dark-750);
    color: var(--color-dark-200);
}

html.dark .tlx-card [data-filter-panel] [data-filter-clear]:hover {
    background: var(--color-dark-600);
    color: var(--color-dark-50);
}

html.dark .tlx-card [data-filter-panel] .border-b,
html.dark .tlx-card [data-filter-panel] .border-t {
    border-color: var(--color-dark-600) !important;
}

html.dark .tlx-card [data-filter-panel] .bg-gray-100 {
    background: var(--color-dark-750) !important;
}

html.dark .tlx-card [data-filter-panel] [data-filter-search] {
    color: var(--color-dark-100);
}

html.dark .tlx-card [data-filter-panel] [data-filter-search]::placeholder {
    color: var(--color-dark-400);
}

html.dark .tlx-card [data-filter-panel] [data-filter-empty] {
    color: var(--color-dark-400) !important;
}

/* Table — dark header and body (matches Tailux projects-datatable). */
html.dark .tlx-card .tlx-table thead th,
html.dark .tlx-card table.dataTable thead th {
    background: var(--color-dark-800);
    color: var(--color-dark-100);
    border-bottom-color: var(--color-dark-600);
}

html.dark .tlx-card .tlx-table tbody td,
html.dark .tlx-card .tlx-table td,
html.dark .tlx-card table.dataTable tbody td,
html.dark .tlx-card .tlx-table .datatable-loading-placeholder__cell,
html.dark .tlx-card table.dataTable td.dataTables_empty {
    background: var(--color-dark-700) !important;
    color: var(--color-dark-200);
    border-bottom-color: var(--color-dark-500);
}

html.dark .tlx-card table.dataTable {
    color: var(--color-dark-200);
}

html.dark .tlx-card .tlx-table.tlx-table--row-clickable tbody tr:not(.tlx-row-no-action):not(.file-row-static):hover td {
    background: color-mix(in srgb, var(--color-dark-500) 50%, var(--color-dark-700)) !important;
}

html.dark .tlx-card .tlx-table tbody tr.selected td {
    background: color-mix(in srgb, var(--color-primary-500) 12%, var(--color-dark-700)) !important;
}

html.dark .tlx-card .tlx-table .tlx-row-stack__primary,
html.dark .tlx-card table.dataTable .tlx-row-stack__primary {
    color: var(--color-dark-100);
}

html.dark .tlx-card .tlx-table .tlx-row-stack__secondary,
html.dark .tlx-card table.dataTable .tlx-row-stack__secondary {
    color: var(--color-dark-400);
}

html.dark .tlx-card .tlx-table a.text-gray-400:hover,
html.dark .tlx-card table.dataTable a.text-gray-400:hover {
    color: var(--color-dark-200) !important;
}

html.dark .tlx-card table.dataTable td.dataTables_empty {
    color: var(--color-dark-400);
}

html.dark .tlx-card table.dataTable thead .sorting:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5afc4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4'/><path d='M16 15l-4 4-4-4'/></svg>");
}

html.dark .tlx-card table.dataTable thead .sorting_asc:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7e9ef' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 14l4-4 4 4'/></svg>");
}

html.dark .tlx-card table.dataTable thead .sorting_desc:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7e9ef' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 10l4 4 4-4'/></svg>");
}

html.dark .tlx-card .tlx-table input[type="checkbox"],
html.dark .tlx-card .bulk_action input[type="checkbox"] {
    border-color: var(--color-dark-500);
    background-color: var(--color-dark-700);
}

html.dark .tlx-card .tlx-table td .btn.btn-sm,
html.dark .tlx-card .tlx-table td .btn.btn-default.btn-sm,
html.dark .tlx-card .admin-dt-actions > .btn,
html.dark .tlx-card .admin-dt-actions > .btn.btn-sm {
    background: var(--color-dark-600);
    color: var(--color-dark-200);
}

html.dark .tlx-card .tlx-table td .btn.btn-sm:hover,
html.dark .tlx-card .tlx-table td .btn.btn-default.btn-sm:hover,
html.dark .tlx-card .admin-dt-actions > .btn:hover {
    background: var(--color-dark-500);
    color: var(--color-dark-50);
}

html.dark .tlx-card .file-listing-download {
    color: var(--color-dark-400);
}

html.dark .tlx-card .file-listing-name {
    color: var(--color-primary-400);
}

html.dark .tlx-card .file-listing-name:hover {
    color: var(--color-primary-300);
}

html.dark .tlx-card div.dataTables_wrapper div.dataTables_processing,
html.dark .tlx-card .dataTables_processing {
    background: var(--tlx-dt-loading-overlay) !important;
}

html.dark .tlx-card .dataTables_processing::before {
    border-color: var(--tlx-dt-spinner-track);
    border-top-color: var(--color-primary-400);
}

html.dark .tlx-card .tlx-tb-foot__size,
html.dark .tlx-card .tlx-tb-foot__size label,
html.dark .tlx-card .tlx-tb-foot__info,
html.dark .tlx-card .dataTables_info {
    color: var(--color-dark-300);
}

html.dark .tlx-card .tlx-tb-foot__size select,
html.dark .tlx-card div.dataTables_wrapper div.dataTables_length select {
    border-color: var(--color-dark-500);
    background-color: var(--color-dark-600);
    color: var(--color-dark-100);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5afc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

html.dark .tlx-card .dataTables_paginate ul.pagination > li {
    background: var(--color-dark-600);
}

html.dark .tlx-card .dataTables_paginate ul.pagination > li.active {
    background: var(--color-dark-600);
}

html.dark .tlx-card .dataTables_paginate ul.pagination > li > a,
html.dark .tlx-card .dataTables_paginate ul.pagination > li > span {
    background: var(--color-dark-600) !important;
    color: var(--color-dark-200) !important;
}

html.dark .tlx-card .dataTables_paginate ul.pagination > li > a:hover {
    background: var(--color-dark-500) !important;
    color: var(--color-dark-50) !important;
}

html.dark .tlx-card .dataTables_paginate ul.pagination > li.active > a,
html.dark .tlx-card .dataTables_paginate ul.pagination > li.active > a:hover,
html.dark .tlx-card .dataTables_paginate ul.pagination > li.active > span {
    background: var(--color-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--color-primary-600) !important;
}

html.dark .tlx-card .dataTables_paginate ul.pagination > li.disabled > a,
html.dark .tlx-card .dataTables_paginate ul.pagination > li.disabled > a:hover,
html.dark .tlx-card .dataTables_paginate ul.pagination > li.disabled > span {
    background: var(--color-dark-600) !important;
    color: var(--color-dark-500) !important;
}

html.dark .tlx-card .dataTables_paginate .ellipsis,
html.dark .tlx-card .dataTables_paginate ul.pagination > li.disabled > span.ellipsis {
    color: var(--color-dark-400);
    background: transparent !important;
}

html.dark .tlx-card .tlx-table-scroll::-webkit-scrollbar-thumb {
    background: var(--color-dark-500);
}

/* File view — tabs, info list, sidebar dividers */
html.dark .tlx-tabbed__track,
html.dark [data-tlx-tabs]:not(.tlx-tabbed) > .tlx-tabs,
html.dark [data-tlx-tabs]:not(.tlx-tabbed) > .-mb-px.border-b .tlx-tabs,
html.dark [data-tlx-tabs]:not(.tlx-tabbed) > div > .tlx-tabs {
    border-bottom-color: var(--color-dark-600);
}

html.dark .tlx-tabs__btn,
html.dark .admin-tw-tab-btn {
    color: var(--color-dark-400);
}

html.dark .tlx-tabs__btn:hover,
html.dark .admin-tw-tab-btn:hover {
    color: var(--color-dark-100);
}

html.dark .tlx-tabs__btn--active,
html.dark .admin-tw-tab-btn[aria-selected="true"],
html.dark .admin-tw-tab-btn.tlx-tabs__btn--active {
    color: var(--color-primary-400);
    border-bottom-color: var(--color-primary-400);
}

html.dark .admin-dl-list__row {
    border-bottom-color: var(--color-dark-600);
}

html.dark .admin-dl-list__row dt {
    color: var(--color-dark-400);
}

html.dark .admin-dl-list__row dd {
    color: var(--color-dark-200);
}

html.dark .file-view-sidebar__preview {
    background: var(--color-dark-800);
    border-bottom-color: var(--color-dark-600);
}

html.dark .file-view-sidebar__ext {
    background: var(--color-dark-700);
    border-color: var(--color-dark-600);
    color: var(--color-dark-300);
}

html.dark .file-view-sidebar__meta-row dt,
html.dark .file-view-sidebar__section-label {
    color: var(--color-dark-400);
}

html.dark .file-view-sidebar__meta-row dd {
    color: var(--color-dark-200);
}

html.dark .file-view-sidebar__meta-sub {
    color: var(--color-dark-400);
}

html.dark .file-view-sidebar__meta-muted {
    color: var(--color-dark-500);
}

html.dark .file-view-sidebar__divider {
    background: var(--color-dark-600);
}

html.dark .tlx-prime-panel__divider {
    background: var(--color-dark-600);
}

html.dark .file-view-sidebar__icon-btn {
    color: var(--color-dark-400);
}

html.dark .file-view-sidebar__icon-btn:hover {
    color: var(--color-primary-400);
    background: color-mix(in srgb, var(--color-primary-500) 12%, var(--color-dark-700));
}

html.dark .file-view-sidebar__action-btn {
    color: var(--color-dark-300);
}

html.dark .file-view-sidebar__action-btn:hover {
    background: var(--color-dark-600);
}

html.dark .file-view-sidebar__action-btn svg,
html.dark .file-view-sidebar__action-btn i.bx,
html.dark .file-view-sidebar__icon-btn i.bx {
    color: var(--color-dark-400);
}

html.dark .file-view-sidebar__action-btn--danger:hover {
    background: color-mix(in srgb, #dc2626 14%, var(--color-dark-700));
}

html.dark .tlx-stat-tile {
    background: var(--color-dark-750);
    border-color: var(--color-dark-600);
}

html.dark .tlx-stat-tile__label {
    color: var(--color-dark-400);
}

html.dark .tlx-stat-tile__value {
    color: var(--color-dark-100);
}

html.dark .file-stats-empty svg,
html.dark .file-stats-empty i.bx {
    color: var(--color-dark-500);
}

html.dark .file-stats-empty h3 {
    color: var(--color-dark-200);
}

html.dark .file-stats-empty p {
    color: var(--color-dark-400);
}

html.dark .tlx-tabbed__scroll::-webkit-scrollbar-thumb {
    background: var(--color-dark-500);
}

/* User edit — sidebar identity + form section chrome */
html.dark .user-edit-sidebar__preview {
    background: var(--color-dark-800);
    border-bottom-color: var(--color-dark-600);
}

html.dark .user-edit-sidebar__preview img {
    border-color: var(--color-dark-600);
}

html.dark .user-edit-sidebar__identity {
    color: var(--color-dark-100);
}

html.dark .user-edit-sidebar__identity-sub {
    color: var(--color-dark-400);
}

html.dark .tlx-card .input-group-addon.bg-slate-100,
html.dark .tlx-card button.input-group-addon.bg-slate-100 {
    color: var(--color-dark-200);
}

html.dark .tlx-card button.input-group-addon.hover\:bg-slate-100:hover {
    color: var(--color-dark-100);
}

/* Server add/edit — resource stat cards, type picker, checkbox groups */
html.dark .tlx-stat-card {
    background: var(--color-dark-700);
    border-color: var(--color-dark-600);
    box-shadow: none;
}

html.dark .tlx-stat-card__label {
    color: var(--color-dark-400);
}

html.dark .tlx-stat-card__value {
    color: var(--color-dark-100);
}

html.dark .tlx-stat-card__value--warning {
    color: #fb923c;
}

html.dark .tlx-stat-card__value--danger {
    color: #f87171;
}

html.dark .tlx-stat-card__sub {
    color: var(--color-dark-400);
}

html.dark .tlx-stat-card__chart {
    border-top-color: var(--color-dark-600);
    background: var(--color-dark-750);
}

html.dark .tlx-stat-card__chart-caption {
    color: var(--color-dark-400);
}

html.dark .tlx-stat-card__chart-caption-sub {
    color: var(--color-dark-500);
}

html.dark .tlx-stat-card__chart-empty-msg {
    color: var(--color-dark-400);
}

html.dark .tlx-stat-card .text-primary-600 {
    color: var(--color-primary-400) !important;
}

html.dark .tlx-stat-card__chart .tlx-mini-bar-chart__bar {
    background: color-mix(in srgb, var(--color-primary-500) 32%, var(--color-dark-600));
}

html.dark .tlx-stat-card__chart .tlx-mini-bar-chart__bar:hover,
html.dark .tlx-stat-card__chart .tlx-mini-bar-chart__bar--peak {
    background: var(--color-primary-500);
}

html.dark .tlx-server-type-option {
    background: var(--color-dark-750);
    border-color: var(--color-dark-600);
    color: var(--color-dark-200);
}

html.dark .tlx-server-type-option:hover:not(.tlx-server-type-option--static) {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
    box-shadow: none;
}

html.dark .tlx-server-type-option--active {
    border-color: var(--color-primary-500);
    background: color-mix(in srgb, var(--color-primary-500) 14%, var(--color-dark-750));
    box-shadow: 0 0 0 1px var(--color-primary-500);
}

html.dark .tlx-server-type-option__title {
    color: var(--color-dark-100);
}

html.dark .tlx-server-type-option__desc {
    color: var(--color-dark-400);
}

html.dark .tlx-checkbox-group__option {
    color: var(--color-dark-200);
}

html.dark .tlx-resource-stats-header .tlx-row-stack__primary {
    color: var(--color-dark-200);
}

/* JSON / code blocks — API testing tool, documentation, system update release notes */
html.dark pre.literal-block,
html.dark div.literal-block,
html.dark .tlx-card__body pre.literal-block,
html.dark .api-test-error-detail.literal-block {
    color: var(--color-dark-100);
    background: var(--color-dark-800);
    border: 1px solid var(--color-dark-600);
}

html.dark .tlx-card__body pre.literal-block {
    margin-top: 0;
}

html.dark pre.literal-block strong {
    color: var(--color-primary-400);
}

html.dark div.literal-block {
    color: var(--color-dark-300);
}

html.dark div.literal-block a {
    color: var(--color-primary-400);
}

html.dark div.literal-block a:hover {
    color: var(--color-primary-300);
}

html.dark div.literal-block strong,
html.dark div.literal-block b {
    color: var(--color-dark-100);
}

/* Log file viewer — syntax-highlighted log panel (log_file_viewer.html.twig). */
html.dark .tlx-log-viewer {
    --tlx-log-bg: var(--color-dark-800);
    --tlx-log-gutter-bg: var(--color-dark-750, #1e293b);
    --tlx-log-gutter-text: var(--color-dark-400);
    --tlx-log-text: var(--color-dark-100);
    --tlx-log-border: var(--color-dark-600);
    --tlx-log-line-border: color-mix(in srgb, var(--color-dark-600) 85%, transparent);
    --tlx-log-ts: var(--color-dark-300);
    --tlx-log-session: var(--color-primary-300);
    --tlx-log-error-bg: color-mix(in srgb, #7f1d1d 35%, transparent);
    --tlx-log-error-text: #fecaca;
    --tlx-log-warning-bg: color-mix(in srgb, #78350f 35%, transparent);
    --tlx-log-warning-text: #fde68a;
    --tlx-log-user-error-bg: color-mix(in srgb, #7c2d12 32%, transparent);
    --tlx-log-request-bg: color-mix(in srgb, #1e3a8a 28%, transparent);
    --tlx-log-response-bg: color-mix(in srgb, #064e3b 28%, transparent);
    --tlx-log-debug-bg: color-mix(in srgb, #312e81 24%, transparent);
    --tlx-log-session-break-bg: color-mix(in srgb, var(--color-dark-700) 80%, transparent);
    --tlx-log-session-break: var(--color-dark-400);
    --tlx-log-array-text: #dbeafe;
    --tlx-log-array-key: #7dd3fc;
    --tlx-log-array-type: #c4b5fd;
    --tlx-log-json-key: #86efac;
    --tlx-log-json: var(--color-dark-200);
    --tlx-log-url: #67e8f9;
    --tlx-log-path: #fcd34d;
    --tlx-log-route: #f9a8d4;
    --tlx-log-badge-error-text: #fecaca;
    --tlx-log-badge-error-bg: color-mix(in srgb, #7f1d1d 55%, transparent);
    --tlx-log-badge-warning-text: #fde68a;
    --tlx-log-badge-warning-bg: color-mix(in srgb, #78350f 55%, transparent);
    --tlx-log-badge-session-text: var(--color-dark-200);
    --tlx-log-badge-session-bg: color-mix(in srgb, var(--color-dark-600) 85%, transparent);
    --tlx-log-level-error-text: #7f1d1d;
    --tlx-log-level-error-bg: #fecaca;
    --tlx-log-level-warning-text: #78350f;
    --tlx-log-level-warning-bg: #fde68a;
    --tlx-log-level-user-error-text: #7c2d12;
    --tlx-log-level-user-error-bg: #fdba74;
    --tlx-log-level-request-text: #1e3a8a;
    --tlx-log-level-request-bg: #bfdbfe;
    --tlx-log-level-response-text: #064e3b;
    --tlx-log-level-response-bg: #a7f3d0;
    --tlx-log-level-debug-text: #312e81;
    --tlx-log-level-debug-bg: #c7d2fe;
    --tlx-log-url-decoration: rgba(103, 232, 249, 0.45);
}

html.dark .tlx-log-viewer__scroll {
    scrollbar-color: var(--color-dark-500) var(--color-dark-800);
}

html.dark .tlx-intro-text code,
html.dark .tlx-form-panel .tlx-intro-text code {
    color: var(--color-dark-100);
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

html.dark .api-test-error-message {
    color: #f87171 !important;
}

/* API documentation — sidebar nav + reference content */

html.dark .api-doc__nav {
    background: var(--color-dark-750);
    border-color: var(--color-dark-600);
    box-shadow: none;
}

html.dark .api-doc__nav h4 {
    color: var(--color-dark-400);
}

html.dark .api-doc__nav-toggle {
    color: var(--color-dark-400);
}

html.dark .api-doc__nav-toggle:hover,
html.dark .api-doc__nav-toggle:focus-visible {
    color: var(--color-dark-200);
    background: var(--color-dark-600);
}

html.dark .api-doc__nav-toggle-icon {
    color: var(--color-dark-500);
}

html.dark .api-doc__nav a {
    color: var(--color-dark-300);
}

html.dark .api-doc__nav a:hover,
html.dark .api-doc__nav a.is-active {
    color: var(--color-primary-400);
    background: color-mix(in srgb, var(--color-primary-500) 14%, var(--color-dark-750));
}

html.dark .api-doc__nav-note {
    color: var(--color-dark-500);
}

html.dark .api-doc__content .x_title {
    border-bottom-color: var(--color-dark-600);
}

html.dark .api-doc__content .x_title h2,
html.dark .api-doc__content h2 {
    color: var(--color-dark-100);
}

html.dark .api-doc__content p,
html.dark .api-doc__content .section > p,
html.dark .api-doc__content .section dd > p,
html.dark .api-doc__content .toc-el > p {
    color: var(--color-dark-300);
}

html.dark .api-doc__content h4 {
    color: var(--color-dark-100);
}

html.dark .api-doc__content a {
    color: var(--color-primary-400);
}

html.dark .api-doc__content a:hover {
    color: var(--color-primary-300);
}

html.dark .api-doc__content code {
    color: var(--color-dark-100);
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

html.dark .api-doc__content dt {
    color: var(--color-dark-200);
}

html.dark .api-doc__content .param {
    color: var(--color-dark-100);
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

html.dark .api-doc__param-list,
html.dark .api-doc__content ul.parameters {
    color: var(--color-dark-300);
}

html.dark .api-doc__content strong {
    color: var(--color-dark-100);
}

html.dark .api-doc__content table.table-data-list {
    border-color: var(--color-dark-600);
}

html.dark .api-doc__content table.table-data-list tr:first-child td {
    color: var(--color-dark-200);
    background: var(--color-dark-800);
}

html.dark .api-doc__content table.table-data-list td {
    border-top-color: var(--color-dark-600);
    color: var(--color-dark-300);
}

html.dark .api-doc__content table.table-data-list td:first-child {
    color: var(--color-dark-200);
}

/* Site settings (setting_manage) */
html.dark .tlx-site-settings .tlx-site-setting-item--highlighted {
    background-color: color-mix(in srgb, var(--color-primary-500) 14%, var(--color-dark-700));
}

html.dark .tlx-site-settings .input-description a {
    color: var(--color-primary-400);
}

html.dark .tlx-site-settings .input-description a:hover {
    color: var(--color-primary-300);
}

html.dark .tlx-site-settings .input-description code {
    color: var(--color-dark-100);
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

html.dark .tlx-site-settings .form-control {
    border-color: var(--color-dark-500);
    background-color: var(--color-dark-750);
    color: var(--color-dark-100);
}

html.dark .tlx-site-settings select.form-control:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

html.dark .tlx-site-settings .form-control:hover {
    border-color: var(--color-dark-400);
}

html.dark .tlx-site-settings .form-control:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
}

html.dark .tlx-site-settings .form-control:disabled,
html.dark .tlx-site-settings .form-control[readonly] {
    background-color: var(--color-dark-800);
    color: var(--color-dark-500);
}

html.dark .tlx-site-settings select.form-control option,
html.dark .tlx-site-settings select.form-control optgroup {
    background: var(--color-dark-750);
    color: var(--color-dark-100);
}

/* Download page manage + list page info cards */
html.dark .tlx-card .tlx-intro-text code {
    color: var(--color-dark-100);
    background: var(--color-dark-800);
    border: 1px solid var(--color-dark-600);
}

html.dark .tlx-intro-text a,
html.dark .tlx-card .tlx-intro-text a {
    color: var(--color-primary-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.dark .tlx-intro-text a:hover,
html.dark .tlx-card .tlx-intro-text a:hover {
    color: var(--color-primary-300);
    text-decoration: none;
}

html.dark .tlx-card .tlx-table td .btn.admin-dt-action--danger:hover,
html.dark .tlx-card .admin-dt-actions > .btn.admin-dt-action--danger:hover {
    background: color-mix(in srgb, #dc2626 18%, var(--color-dark-600));
    color: #f87171;
}

html.dark .tlx-card .tlx-table td .btn.admin-dt-action--danger .text-danger,
html.dark .tlx-card .admin-dt-actions > .btn.admin-dt-action--danger .text-danger {
    color: #f87171;
}

html.dark .tlx-spinner {
    border-color: var(--color-dark-500);
    border-top-color: var(--color-primary-400);
}

/* Test tools — iframe response host + output document */
html.dark .test-tools-iframe-host,
html.dark .test-tools-iframe {
    background: var(--color-dark-800);
}

html.dark body.test-tool-output-page {
    background: var(--color-dark-900);
    color-scheme: dark;
}

html.dark .test-tool-output {
    color: var(--color-dark-300);
}

html.dark .test-tool-output a {
    color: var(--color-primary-400);
}

html.dark .test-tool-output a:hover {
    color: var(--color-primary-300);
}

html.dark .test-tool-output b,
html.dark .test-tool-output strong {
    color: var(--color-dark-100);
}

html.dark .test-tool-output [style*="color: green"],
html.dark .test-tool-output [style*="color:green"] {
    color: #34d399 !important;
}

html.dark .test-tool-output [style*="color: red"],
html.dark .test-tool-output [style*="color:red"] {
    color: #f87171 !important;
}

/* Server info — phpinfo() output (/admin/server_info) */
html.dark .tlx-phpinfo {
    color: var(--color-dark-300);
}

html.dark .tlx-phpinfo pre {
    color: var(--color-dark-200);
}

html.dark .tlx-phpinfo table td,
html.dark .tlx-phpinfo table th {
    border-color: var(--color-dark-600) !important;
}

html.dark .tlx-phpinfo tr.h td,
html.dark .tlx-phpinfo tr.h th,
html.dark .tlx-phpinfo .h td,
html.dark .tlx-phpinfo .h th {
    background: var(--color-dark-800) !important;
    color: var(--color-dark-100) !important;
}

html.dark .tlx-phpinfo td.e,
html.dark .tlx-phpinfo th.e {
    background: var(--color-dark-750) !important;
    color: var(--color-dark-200) !important;
}

html.dark .tlx-phpinfo td.v,
html.dark .tlx-phpinfo td.vr {
    background: var(--color-dark-700) !important;
    color: var(--color-dark-300) !important;
}

html.dark .tlx-phpinfo hr {
    background: var(--color-dark-600);
}

html.dark .tlx-phpinfo a {
    color: var(--color-primary-400);
}

html.dark .tlx-phpinfo a:hover {
    color: var(--color-primary-300);
}

/* Support info (/admin/support_info) */
html.dark .tlx-support-info__pre {
    color: var(--color-dark-100);
    background: var(--color-dark-800);
    border-color: var(--color-dark-600);
}

html.dark .tlx-support-info__extensions {
    color: var(--color-dark-300);
}

html.dark .admin-dl-list .tlx-row-stack__primary {
    color: var(--color-dark-100);
}

html.dark .admin-dl-list .tlx-row-stack__secondary {
    color: var(--color-dark-400);
}

html.dark .admin-dl-list .text-emerald-600 {
    color: #34d399 !important;
}

html.dark .admin-dl-list .text-slate-400 {
    color: var(--color-dark-400) !important;
}

/* System update (/admin/system-update) */
.tlx-wizard-stepper {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.tlx-wizard-stepper__inner {
    display: flex;
    align-items: flex-start;
    min-width: min(100%, 44rem);
    margin: 0 auto;
}

.tlx-wizard-stepper__item {
    display: flex;
    flex: 1 1 0;
    align-items: flex-start;
    min-width: 0;
}

.tlx-wizard-stepper__item:last-child {
    flex: 0 0 auto;
}

.tlx-wizard-stepper__label-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 5.5rem;
    flex-shrink: 0;
    text-align: center;
}

.tlx-wizard-stepper__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.tlx-wizard-stepper__label {
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 500;
    color: #64748b;
}

.tlx-wizard-stepper__line {
    flex: 1 1 auto;
    height: 2px;
    margin-top: 1rem;
    margin-inline: 0.375rem;
    background: #e2e8f0;
}

.tlx-wizard-stepper__item.is-active .tlx-wizard-stepper__dot {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
    color: #fff;
}

.tlx-wizard-stepper__item.is-active .tlx-wizard-stepper__label {
    color: var(--color-primary-700);
    font-weight: 600;
}

.tlx-wizard-stepper__item.is-complete .tlx-wizard-stepper__dot {
    border-color: #10b981;
    background: #10b981;
    color: transparent;
    font-size: 0;
}

.tlx-wizard-stepper__item.is-complete .tlx-wizard-stepper__dot::after {
    content: '';
    display: block;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.tlx-wizard-stepper__item.is-complete .tlx-wizard-stepper__label {
    color: #047857;
}

.tlx-wizard-stepper__item.is-complete .tlx-wizard-stepper__line {
    background: #10b981;
}

@media (max-width: 767px) {
    .tlx-wizard-stepper {
        overflow-x: visible;
        padding-bottom: 0;
    }

    .tlx-wizard-stepper__inner {
        flex-wrap: wrap;
        min-width: 0;
        row-gap: 1rem;
    }

    .tlx-wizard-stepper__item,
    .tlx-wizard-stepper__item:last-child {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        justify-content: center;
    }

    .tlx-wizard-stepper__line {
        display: none;
    }

    .tlx-wizard-stepper__label-wrap {
        width: 100%;
        max-width: 5.5rem;
    }
}

.tlx-spinner--btn {
    width: 1rem;
    height: 1rem;
    border-width: 1.5px;
}

html.dark .tlx-wizard-stepper__dot {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
    color: var(--color-dark-300);
}

html.dark .tlx-wizard-stepper__label {
    color: var(--color-dark-400);
}

html.dark .tlx-wizard-stepper__line {
    background: var(--color-dark-600);
}

html.dark .tlx-wizard-stepper__item.is-active .tlx-wizard-stepper__dot {
    border-color: var(--color-primary-500);
    background: var(--color-primary-500);
    color: #fff;
}

html.dark .tlx-wizard-stepper__item.is-active .tlx-wizard-stepper__label {
    color: var(--color-primary-300);
}

html.dark .tlx-wizard-stepper__item.is-complete .tlx-wizard-stepper__label {
    color: #6ee7b7;
}

.upgrade-patch-list {
    list-style: none;
    padding: 0;
}

.upgrade-patch-list__item {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.upgrade-patch-list__item[data-status="complete"] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.upgrade-patch-list__statement-count {
    color: #94a3b8;
    font-weight: 400;
}

html.dark .upgrade-patch-list__statement-count {
    color: var(--color-dark-400);
}

html.dark .upgrade-patch-list__item {
    border-color: var(--color-dark-600);
    background: var(--color-dark-800);
}

html.dark .upgrade-patch-list__item[data-status="complete"] {
    border-color: color-mix(in srgb, #22c55e 35%, var(--color-dark-600));
    background: color-mix(in srgb, #22c55e 8%, var(--color-dark-800));
}

.upgrade-cron-list {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #334155;
}

.upgrade-backup-summary {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.upgrade-backup-summary__list,
.upgrade-backup-summary__item,
.upgrade-backup-summary__link {
    overflow-wrap: anywhere;
    word-break: break-all;
}

.upgrade-upload-summary {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.upgrade-upload-summary__path {
    overflow-wrap: anywhere;
    word-break: break-all;
}

.upgrade-cron-list__item + .upgrade-cron-list__item {
    margin-top: 0.75rem;
}

html.dark .upgrade-cron-list {
    border-color: var(--color-dark-600);
    background: var(--color-dark-800);
    color: var(--color-dark-200);
}

html.dark .tlx-stat-tile .text-primary-600 {
    color: var(--color-primary-400) !important;
}

html.dark a.tlx-stat-tile--link:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 40%, var(--color-dark-600));
}

html.dark .tlx-dashboard-chart-loading {
    background: color-mix(in srgb, var(--color-dark-700) 88%, transparent);
}

html.dark .tlx-dashboard-chart-empty {
    color: var(--color-dark-400);
}

html.dark .file-stats-country-list__name {
    color: var(--color-dark-200);
}

html.dark .file-stats-country-list__count {
    color: var(--color-dark-300);
}

html.dark .file-stats-country-list__pct {
    color: var(--color-dark-500);
}

html.dark .file-stats-country-list__bar {
    background: var(--color-dark-600);
}

html.dark .tlx-quick-action {
    background: var(--color-dark-700);
    border-color: var(--color-dark-600);
    color: var(--color-dark-100);
    box-shadow: none;
}

html.dark .tlx-quick-action:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, var(--color-dark-600));
    color: var(--color-primary-300);
    background: color-mix(in srgb, var(--color-primary-500) 12%, var(--color-dark-700));
}

html.dark .tlx-quick-action .bx,
html.dark .tlx-quick-action svg {
    color: var(--color-primary-400);
}

html.dark .tlx-stat-tile__meter {
    background: var(--color-dark-600);
}

html.dark .tlx-kpi-tile {
    background: var(--color-dark-700);
    border-color: var(--color-dark-600);
    box-shadow: none;
}

html.dark a.tlx-kpi-tile--link:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, var(--color-dark-600));
    box-shadow: none;
}

html.dark .tlx-kpi-tile__value {
    color: var(--color-dark-50);
}

html.dark .tlx-kpi-tile__label {
    color: var(--color-dark-300);
}

html.dark .tlx-kpi-tile__sub {
    color: var(--color-dark-400);
}

html.dark .tlx-kpi-tile__meter {
    background: var(--color-dark-600);
}

html.dark .tlx-kpi-tile__icon--primary {
    background: color-mix(in srgb, var(--color-primary-500) 22%, var(--color-dark-700));
    color: var(--color-primary-300);
}

html.dark .tlx-kpi-tile__icon--sky {
    background: color-mix(in srgb, #0ea5e9 22%, var(--color-dark-700));
    color: #7dd3fc;
}

html.dark .tlx-kpi-tile__icon--emerald {
    background: color-mix(in srgb, #10b981 22%, var(--color-dark-700));
    color: #6ee7b7;
}

html.dark .tlx-kpi-tile__icon--violet {
    background: color-mix(in srgb, #8b5cf6 22%, var(--color-dark-700));
    color: #c4b5fd;
}

html.dark .tlx-kpi-tile__icon--amber {
    background: color-mix(in srgb, #f59e0b 22%, var(--color-dark-700));
    color: #fcd34d;
}

html.dark .tlx-kpi-tile__icon--rose {
    background: color-mix(in srgb, #f43f5e 22%, var(--color-dark-700));
    color: #fda4af;
}

html.dark .tlx-stat-delta.is-up {
    color: #4ade80;
    background: color-mix(in srgb, #16a34a 22%, var(--color-dark-700));
}

html.dark .tlx-stat-delta.is-down {
    color: #f87171;
    background: color-mix(in srgb, #dc2626 22%, var(--color-dark-700));
}

html.dark .tlx-feed__item {
    border-top-color: var(--color-dark-600);
}

html.dark .tlx-feed__icon {
    background: color-mix(in srgb, var(--color-primary-500) 18%, var(--color-dark-700));
    color: var(--color-primary-300);
}

html.dark .tlx-feed__message {
    color: var(--color-dark-200);
}

html.dark .tlx-feed__meta,
html.dark .tlx-dashboard-chart-footnote {
    color: var(--color-dark-400);
}

html.dark .tlx-feed__link,
html.dark .tlx-feed__footer {
    color: var(--color-primary-300);
}

html.dark .tlx-intro-text {
    color: var(--color-dark-300);
}

html.dark .tlx-intro-text strong,
html.dark .tlx-intro-text b {
    color: var(--color-dark-100);
}

html.dark .systemUpdateAvailable ol li,
html.dark .systemUpdatePrimary ol li {
    color: var(--color-dark-300);
}

/* Bulk action dropdown (file_manage, sharing_manage, etc.) */
html.dark .tlx-dropdown {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.dark .tlx-dropdown__item {
    color: var(--color-dark-200);
}

html.dark .tlx-dropdown__item:hover {
    background: var(--color-dark-600);
    color: var(--color-dark-50);
}

/* Legacy modal footer buttons (remove file, move files, etc.) */
html.dark .tlx-modal__footer .btn {
    background: var(--color-dark-600);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .tlx-modal__footer .btn:hover {
    background: var(--color-dark-500);
    color: var(--color-dark-50);
}

html.dark .tlx-modal__footer .btn-primary {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}

html.dark .tlx-modal__footer .btn-primary:hover {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #fff;
}

html.dark .tlx-modal__footer .btn-default {
    background: var(--color-dark-600);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

/* Modal forms — tlx-card .form rules beat .dark .form-control without html.dark prefix */
html.dark .tlx-modal .tlx-card .form > .form-group > label,
html.dark .tlx-modal .tlx-card .form .control-label,
html.dark .tlx-modal .admin-form__label {
    color: var(--color-dark-200);
}

html.dark .tlx-modal .tlx-card__body > p,
html.dark .tlx-modal__body form > p {
    color: var(--color-dark-300);
}

html.dark .tlx-modal .tlx-card .form select,
html.dark .tlx-modal .tlx-card .form input[type="text"],
html.dark .tlx-modal .tlx-card .form input[type="number"],
html.dark .tlx-modal .tlx-card .form input[type="password"],
html.dark .tlx-modal .tlx-card .form input[type="email"],
html.dark .tlx-modal .tlx-card .form textarea {
    border-color: var(--color-dark-500);
    background: var(--color-dark-750);
    color: var(--color-dark-100);
}

html.dark .tlx-modal .tlx-card .form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

html.dark .tlx-modal .tlx-card .form select:focus,
html.dark .tlx-modal .tlx-card .form input:focus,
html.dark .tlx-modal .tlx-card .form textarea:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
}

html.dark .tlx-modal .form-control {
    border-color: var(--color-dark-500);
    background: var(--color-dark-750);
    color: var(--color-dark-100);
}

html.dark .tlx-modal .form-control:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
}

html.dark .tlx-modal select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 1rem;
}

/* File manage (/admin/file_manage) */
html.dark .tlx-card .tlx-row-avatar {
    background: color-mix(in srgb, var(--color-primary-500) 22%, var(--color-dark-700)) !important;
    color: var(--color-primary-300) !important;
}

html.dark .tlx-card .tlx-row-avatar--photo {
    background: var(--color-dark-600) !important;
}

html.dark .tlx-card [class^="statusText"],
html.dark .tlx-card [class*=" statusText"] {
    background: var(--color-dark-600);
    color: var(--color-dark-200);
}

html.dark .tlx-card .statusTextActive {
    background: color-mix(in srgb, #7c3aed 30%, var(--color-dark-700));
    color: #c4b5fd;
}

html.dark .tlx-card .statusTextTrash,
html.dark .tlx-card .statusTextExpired,
html.dark .tlx-card .statusTextPending {
    background: color-mix(in srgb, #d97706 28%, var(--color-dark-700));
    color: #fcd34d;
}

html.dark .tlx-card .statusTextSuccess,
html.dark .tlx-card .statusTextComplete,
html.dark .tlx-card .statusTextAccepted {
    background: color-mix(in srgb, #16a34a 28%, var(--color-dark-700));
    color: #86efac;
}

html.dark .tlx-card .statusTextDeleted,
html.dark .tlx-card .statusTextFailed {
    background: color-mix(in srgb, #dc2626 28%, var(--color-dark-700));
    color: #fca5a5;
}

html.dark .tlx-card .statusTextDownloading,
html.dark .tlx-card .statusTextProcessing {
    background: color-mix(in srgb, #2563eb 28%, var(--color-dark-700));
    color: #93c5fd;
}

html.dark .tlx-card .statusTextCancelled {
    background: var(--color-dark-600);
    color: var(--color-dark-400);
}

html.dark .file-thumbnail-view img {
    border-color: var(--color-dark-600) !important;
}

html.dark .hover\:text-gray-600:hover {
    color: var(--color-dark-200) !important;
}

/* User manage (/admin/user_manage) */
html.dark .tlx-card table.dataTable a.text-primary-600,
html.dark .tlx-card .tlx-table a.text-primary-600 {
    color: var(--color-primary-400) !important;
}

html.dark .tlx-card table.dataTable a.text-primary-600:hover,
html.dark .tlx-card .tlx-table a.text-primary-600:hover,
html.dark .hover\:text-primary-700:hover {
    color: var(--color-primary-300) !important;
}

html.dark .tlx-card .tlx-table td .btn .text-emerald-600,
html.dark .tlx-card .admin-dt-actions > .btn .text-emerald-600 {
    color: #34d399;
}

/* Account type badges (.tlx-status) */
html.dark .tlx-card .tlx-status {
    background: var(--color-dark-600);
    color: var(--color-dark-200);
}

html.dark .tlx-card .tlx-status--shipping {
    background: color-mix(in srgb, #7c3aed 30%, var(--color-dark-700));
    color: #c4b5fd;
}

html.dark .tlx-card .tlx-status--processing {
    background: color-mix(in srgb, #d97706 28%, var(--color-dark-700));
    color: #fcd34d;
}

html.dark .tlx-card .tlx-status--completed {
    background: color-mix(in srgb, #16a34a 28%, var(--color-dark-700));
    color: #86efac;
}

html.dark .tlx-card .tlx-status--cancelled {
    background: color-mix(in srgb, #dc2626 28%, var(--color-dark-700));
    color: #fca5a5;
}

html.dark .tlx-card .tlx-status--info {
    background: color-mix(in srgb, #2563eb 28%, var(--color-dark-700));
    color: #93c5fd;
}

/* User account status badges */
html.dark .tlx-card .statusTextAwaitingApproval {
    background: color-mix(in srgb, #d97706 28%, var(--color-dark-700));
    color: #fcd34d;
}

html.dark .tlx-card .statusTextDisabled {
    background: var(--color-dark-600);
    color: var(--color-dark-400);
}

html.dark .tlx-card .statusTextSuspended {
    background: color-mix(in srgb, #dc2626 28%, var(--color-dark-700));
    color: #fca5a5;
}

/* Server manage (/admin/server_manage) */
html.dark .tlx-card .tlx-table .tlx-mini-bar-chart__bar,
html.dark .tlx-card table.dataTable .tlx-mini-bar-chart__bar {
    background: color-mix(in srgb, var(--color-primary-500) 32%, var(--color-dark-600));
}

html.dark .tlx-card .tlx-table .tlx-mini-bar-chart__bar:hover,
html.dark .tlx-card table.dataTable .tlx-mini-bar-chart__bar:hover,
html.dark .tlx-card .tlx-table .tlx-mini-bar-chart__bar--peak,
html.dark .tlx-card table.dataTable .tlx-mini-bar-chart__bar--peak {
    background: var(--color-primary-500);
}

html.dark .tlx-card .statusTextReadOnly {
    background: color-mix(in srgb, #2563eb 28%, var(--color-dark-700));
    color: #93c5fd;
}

html.dark .tlx-modal__body .server-manage-test-iframe {
    background: var(--color-dark-800);
}

/* DataTable overflow action menu (plugin_manage, sharing_manage, etc.) */
html.dark .tlx-card .admin-dt-actions__menu {
    border-color: var(--color-dark-500);
    background: var(--color-dark-700);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.dark .tlx-card .admin-dt-actions__menu a,
html.dark .tlx-card .tlx-table td .admin-dt-actions__menu a,
html.dark .tlx-card table.dataTable td .admin-dt-actions__menu a {
    color: var(--color-dark-200);
}

html.dark .tlx-card .admin-dt-actions__menu a:hover,
html.dark .tlx-card .tlx-table td .admin-dt-actions__menu a:hover,
html.dark .tlx-card table.dataTable td .admin-dt-actions__menu a:hover {
    background: var(--color-dark-600);
    color: var(--color-dark-50);
}

html.dark .tlx-card .admin-dt-actions__menu a.admin-dt-action--danger,
html.dark .tlx-card .admin-dt-actions__menu a.admin-dt-action--danger .admin-dt-menu-icon {
    color: #f87171;
}

html.dark .tlx-card .admin-dt-actions__menu a.admin-dt-action--danger:hover {
    background: color-mix(in srgb, #dc2626 18%, var(--color-dark-600));
    color: #fca5a5;
}

html.dark .tlx-card .admin-dt-actions__menu .admin-dt-menu-icon {
    color: var(--color-dark-400);
}

/* Tailwind `dark:` variants in server-rendered cells do not apply (theme uses html.dark) */
html.dark .tlx-card .tlx-table .text-emerald-600,
html.dark .tlx-card table.dataTable .text-emerald-600 {
    color: #34d399 !important;
}

html.dark .tlx-card .tlx-table .text-amber-600,
html.dark .tlx-card table.dataTable .text-amber-600 {
    color: #fbbf24 !important;
}

html.dark .tlx-card .admin-dt-actions > .btn.admin-dt-action--warning:hover,
html.dark .tlx-card .admin-dt-actions > .btn.admin-dt-action--warning:focus,
html.dark .tlx-card .tlx-table td .btn.admin-dt-action--warning:hover,
html.dark .tlx-card table.dataTable td .btn.admin-dt-action--warning:hover {
    background: rgba(251, 191, 36, 0.12);
    color: #fcd34d;
}

html.dark .tlx-card .admin-dt-actions > .btn.admin-dt-action--success:hover,
html.dark .tlx-card .admin-dt-actions > .btn.admin-dt-action--success:focus,
html.dark .tlx-card .tlx-table td .btn.admin-dt-action--success:hover,
html.dark .tlx-card table.dataTable td .btn.admin-dt-action--success:hover {
    background: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
}

html.dark .tlx-card .tlx-table .text-slate-400,
html.dark .tlx-card table.dataTable .text-slate-400,
html.dark .tlx-card .tlx-table .text-slate-500,
html.dark .tlx-card table.dataTable .text-slate-500 {
    color: var(--color-dark-400) !important;
}

html.dark .tlx-card table.dataTable td.dataTables_empty a {
    color: var(--color-primary-400);
}

html.dark .tlx-card table.dataTable td.dataTables_empty a:hover {
    color: var(--color-primary-300);
}

/* Plugin manage (/admin/plugin_manage) */
html.dark .tlx-card table.dataTable .tlx-row-stack__primary a,
html.dark .tlx-card .tlx-table .tlx-row-stack__primary a {
    color: var(--color-primary-400);
}

html.dark .tlx-card table.dataTable .tlx-row-stack__primary a:hover,
html.dark .tlx-card .tlx-table .tlx-row-stack__primary a:hover {
    color: var(--color-primary-300);
}

html.dark .tlx-card .admin-dt-actions > a:not(.btn) {
    color: var(--color-primary-400);
    font-size: 0.8125rem;
    text-decoration: none;
}

html.dark .tlx-card .admin-dt-actions > a:not(.btn):hover {
    color: var(--color-primary-300);
    text-decoration: underline;
}

/* Banned IP manage (/admin/banned_ip_manage) — add-ban modal form */
html.dark .tlx-modal .input-label {
    color: var(--color-dark-200);
}

html.dark .tlx-modal .input-description {
    color: var(--color-dark-400);
}

html.dark .tlx-modal button.input-group-addon.hover\:bg-slate-100:hover {
    color: var(--color-dark-100);
}

/* Translation manage (/admin/translation_manage) */
html.dark .tlx-card .tlx-table button.hover\:bg-slate-100:hover,
html.dark .tlx-card table.dataTable button.hover\:bg-slate-100:hover {
    background-color: var(--color-dark-600) !important;
}

/* Plugin upgrade (/admin/plugin-manage-upgrade) */
.plugin-upgrade-flow__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.plugin-upgrade-flow__step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.6em;
    position: relative;
    padding-bottom: 1.5rem;
}

.plugin-upgrade-flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 2.25rem;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
    transform: translateX(-50%);
}

.plugin-upgrade-flow__step:last-child {
    padding-bottom: 0;
}

.plugin-upgrade-flow__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    z-index: 1;
}

.plugin-upgrade-flow__content {
    min-width: 0;
    padding: 0.3rem 0;
}

.plugin-upgrade-section {
    border: none;
}

.plugin-upgrade-section__head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.plugin-upgrade-section__status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.plugin-upgrade-section__status-glyph {
    font-size: 1.375rem;
    line-height: 1;
}

.plugin-upgrade-section__status-glyph--complete {
    color: #059669;
}

.plugin-upgrade-section__status-glyph--failed {
    color: #dc2626;
}

.plugin-upgrade-section__status-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.plugin-upgrade-section__error,
.plugin-upgrade-form__error {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #b91c1c;
}

.plugin-upgrade-flow__step[data-status="processing"] .plugin-upgrade-flow__marker {
    border-color: #f59e0b;
    color: #b45309;
    background: #fffbeb;
}

.plugin-upgrade-flow__step[data-status="failed"] .plugin-upgrade-flow__marker {
    border-color: #ef4444;
    color: #b91c1c;
    background: #fef2f2;
}

.plugin-upgrade-flow__step[data-status="complete"] .plugin-upgrade-flow__marker {
    border-color: #22c55e;
    color: #fff;
    background: #22c55e;
}

.plugin-upgrade-flow__step[data-status="complete"]:not(:last-child)::before {
    background: #86efac;
}

.plugin-upgrade-checklist {
    list-style: none;
    padding: 0;
}

.plugin-upgrade-checklist__item {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
}

html.dark .plugin-upgrade-flow__heading {
    color: var(--color-dark-300);
}

html.dark .plugin-upgrade-section__error,
html.dark .plugin-upgrade-form__error {
    color: #fca5a5;
}

html.dark .plugin-upgrade-section__status-glyph--complete {
    color: #34d399;
}

html.dark .plugin-upgrade-section__status-glyph--failed {
    color: #f87171;
}

html.dark .plugin-upgrade-flow__step:not(:last-child)::before {
    background: var(--color-dark-600);
}

html.dark .plugin-upgrade-flow__step[data-status="complete"]:not(:last-child)::before {
    background: color-mix(in srgb, #22c55e 45%, var(--color-dark-600));
}

html.dark .plugin-upgrade-flow__marker {
    border-color: var(--color-dark-500);
    background: var(--color-dark-800);
    color: var(--color-dark-300);
}

html.dark .plugin-upgrade-checklist__item {
    border-color: var(--color-dark-600);
    background: var(--color-dark-800);
}

/* Shared upgrade notice panels (system + plugin upgrade pages) */
.upgrade-notice {
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.upgrade-notice--warning {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #78350f;
}

.upgrade-notice--success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #064e3b;
}

.upgrade-notice--error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.upgrade-file-input {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: #475569;
}

.upgrade-file-input::file-selector-button {
    margin-right: 1rem;
    border-radius: 0.375rem;
    border: 0;
    background: var(--color-primary-50);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary-700);
    cursor: pointer;
}

html.dark .upgrade-notice--warning {
    border-color: color-mix(in srgb, #f59e0b 35%, var(--color-dark-600));
    background: color-mix(in srgb, #f59e0b 10%, var(--color-dark-800));
    color: #fcd34d;
}

html.dark .upgrade-notice--warning .font-medium {
    color: #fde68a;
}

html.dark .upgrade-notice--success {
    border-color: color-mix(in srgb, #22c55e 35%, var(--color-dark-600));
    background: color-mix(in srgb, #22c55e 8%, var(--color-dark-800));
    color: #a7f3d0;
}

html.dark .upgrade-notice--success .font-medium {
    color: #6ee7b7;
}

html.dark .upgrade-notice--error {
    border-color: color-mix(in srgb, #ef4444 35%, var(--color-dark-600));
    background: color-mix(in srgb, #ef4444 8%, var(--color-dark-800));
    color: #fca5a5;
}

html.dark .upgrade-notice--error a {
    color: var(--color-primary-300);
}

html.dark .upgrade-notice--error a:hover {
    color: var(--color-primary-200);
}

html.dark .upgrade-notice--success a,
html.dark .upgrade-backup-summary__link {
    color: var(--color-primary-300);
}

html.dark .upgrade-notice--success a:hover,
html.dark .upgrade-backup-summary__link:hover {
    color: var(--color-primary-200);
}

html.dark .upgrade-upload-summary__path {
    color: var(--color-dark-200);
}

html.dark .upgrade-file-input {
    color: var(--color-dark-300);
}

html.dark .upgrade-file-input::file-selector-button {
    background: color-mix(in srgb, var(--color-primary-500) 18%, var(--color-dark-700));
    color: var(--color-primary-300);
}

html.dark .plugin-upgrade-flow__step[data-status="processing"] .plugin-upgrade-flow__marker {
    border-color: #f59e0b;
    color: #fcd34d;
    background: color-mix(in srgb, #f59e0b 12%, var(--color-dark-800));
}

html.dark .plugin-upgrade-flow__step[data-status="failed"] .plugin-upgrade-flow__marker {
    border-color: #ef4444;
    color: #fca5a5;
    background: color-mix(in srgb, #ef4444 10%, var(--color-dark-800));
}

html.dark .plugin-upgrade-section__head h3 {
    color: var(--color-dark-100);
}

html.dark #upgradePatchList .upgrade-patch-list__icon .text-emerald-600 {
    color: #34d399 !important;
}

html.dark #upgradePatchList .upgrade-patch-list__icon .text-amber-500 {
    color: #fbbf24 !important;
}