/**
 * Portal dark theme — loaded after app.css
 * Toggle: html.dark (see static/js/theme.js)
 */

html.dark {
    color-scheme: dark;
}

/* ── Page shell ─────────────────────────────────────────────── */
html.dark,
html.dark body,
html.dark body.app {
    background: var(--portal-bg-page) !important;
    color: #f1f5f9;
}

html.dark .content {
    background: var(--portal-bg-page) !important;
}

html.dark .content-inner {
    background: var(--portal-bg-page) !important;
    color: #f1f5f9 !important;
}

html.dark .side-nav {
    background: var(--portal-bg-shell) !important;
}

html.dark .top-bar {
    background: var(--portal-bg-topbar) !important;
    border-bottom: none !important;
    border-radius: 8px !important;
    color: #f1f5f9 !important;
}

html.dark .top-bar .dropdown-box__content,
html.dark .top-bar .notification-content__box,
html.dark .top-bar [class*="border-gray"] {
    border-color: transparent !important;
}

html.dark .top-bar h1,
html.dark .top-bar h2,
html.dark .top-bar h3,
html.dark .top-bar p,
html.dark .top-bar span,
html.dark .top-bar .font-medium,
html.dark .top-bar .font-semibold {
    color: #f1f5f9 !important;
}

html.dark .top-bar #current-date-time {
    color: #94a3b8 !important;
}

html.dark .top-bar i[data-feather],
html.dark .top-bar svg:not(.mobile-credits-icon) {
    color: #cbd5e1 !important;
    stroke: #cbd5e1 !important;
}

/* ── Cards & boxes ─────────────────────────────────────────── */
html.dark .box,
html.dark .card,
html.dark .intro-y.box {
    background: var(--portal-bg-card) !important;
    color: #f1f5f9 !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html.dark .report-box--- .box,
html.dark .padBox1a,
html.dark .padBox1,
html.dark .padBox2 {
    background: var(--portal-bg-card) !important;
    color: #f1f5f9 !important;
}

html.dark .box .border-b,
html.dark .box [class*="border-b"] {
    border-color: transparent !important;
}

/* ── Tailwind gray text ─────────────────────────────────────── */
html.dark .text-gray-400 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-600 { color: #cbd5e1 !important; }
html.dark .text-gray-700 { color: #e2e8f0 !important; }
html.dark .text-gray-800 { color: #f1f5f9 !important; }
html.dark .text-gray-900 { color: #f8fafc !important; }
html.dark .text-black { color: #f8fafc !important; }

/* Default text inside main content (headings without explicit color) */
html.dark .content-inner h1,
html.dark .content-inner h2,
html.dark .content-inner h3,
html.dark .content-inner h4,
html.dark .content-inner h5,
html.dark .content-inner h6,
html.dark .content-inner p,
html.dark .content-inner label,
html.dark .content-inner li {
    color: inherit;
}

html.dark .content-inner .text-xl,
html.dark .content-inner .text-lg,
html.dark .content-inner .text-base,
html.dark .content-inner .text-sm {
    color: inherit;
}

/* ── Status badges & colored pills (My Files, Admin, modals) ─── */
html.dark [class*="bg-blue-100"] {
    background-color: rgba(59, 130, 246, 0.22) !important;
}
html.dark [class*="bg-purple-100"] {
    background-color: rgba(168, 85, 247, 0.25) !important;
}
html.dark [class*="bg-green-100"] {
    background-color: rgba(34, 197, 94, 0.22) !important;
}
html.dark [class*="bg-red-100"] {
    background-color: rgba(239, 68, 68, 0.22) !important;
}
html.dark [class*="bg-orange-100"] {
    background-color: rgba(249, 115, 22, 0.22) !important;
}
html.dark [class*="bg-yellow-100"] {
    background-color: rgba(234, 179, 8, 0.22) !important;
}
html.dark [class*="bg-amber-100"] {
    background-color: rgba(245, 158, 11, 0.22) !important;
}
html.dark [class*="bg-indigo-100"] {
    background-color: rgba(99, 102, 241, 0.22) !important;
}
html.dark [class*="bg-teal-100"] {
    background-color: rgba(20, 184, 166, 0.22) !important;
}
html.dark [class*="bg-cyan-100"] {
    background-color: rgba(6, 182, 212, 0.22) !important;
}
html.dark [class*="bg-pink-100"] {
    background-color: rgba(236, 72, 153, 0.22) !important;
}

html.dark [class*="text-blue-800"] { color: #93c5fd !important; }
html.dark [class*="text-purple-800"] { color: #d8b4fe !important; }
html.dark [class*="text-green-800"] { color: #86efac !important; }
html.dark [class*="text-red-800"] { color: #fca5a5 !important; }
html.dark [class*="text-orange-800"] { color: #fdba74 !important; }
html.dark [class*="text-yellow-800"] { color: #fde047 !important; }
html.dark [class*="text-amber-800"] { color: #fcd34d !important; }
html.dark [class*="text-indigo-800"] { color: #a5b4fc !important; }
html.dark [class*="text-teal-800"] { color: #5eead4 !important; }
html.dark [class*="text-cyan-800"] { color: #67e8f9 !important; }
html.dark [class*="text-pink-800"] { color: #f9a8d4 !important; }

/* Solid accent badges (NEW MESSAGE, FILE READY, etc.) */
html.dark .bg-orange-500,
html.dark [class*="bg-orange-500"] {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

html.dark .hover\:bg-gray-50:hover,
html.dark tr.hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

html.dark button.bg-white,
html.dark .bg-white.border.border-gray-300 {
    background-color: #334155 !important;
    border-color: transparent !important;
    color: #e2e8f0 !important;
}

html.dark button.bg-white:hover,
html.dark .hover\:bg-gray-50:hover {
    background-color: #475569 !important;
}

html.dark .bg-blue-600,
html.dark button.bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html.dark #pagination-container,
html.dark #pagination-container .text-gray-700 {
    color: #cbd5e1 !important;
}

/* ── Tailwind gray backgrounds ──────────────────────────────── */
html.dark .bg-white { background-color: var(--portal-bg-card) !important; }
html.dark .bg-gray-50 { background-color: #334155 !important; }
html.dark .bg-gray-100 { background-color: #334155 !important; }
html.dark .bg-gray-200 { background-color: #475569 !important; }
html.dark .bg-gray-300 { background-color: #475569 !important; }

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-theme-9 {
    border-color: transparent !important;
}

html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-200:hover {
    background-color: #475569 !important;
}

html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: transparent !important;
}

html.dark thead,
html.dark thead th,
html.dark tbody tr {
    background-color: transparent;
}

html.dark thead th {
    color: #cbd5e1 !important;
}

html.dark tbody tr:hover {
    background-color: #334155 !important;
}

html.dark .shadow-sm,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html.dark .bg-gray-100.text-gray-700,
html.dark button.bg-gray-100 {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark button.bg-gray-100:hover,
html.dark .bg-gray-100:hover {
    background-color: #64748b !important;
}

html.dark .hover\:bg-blue-50:hover {
    background-color: #1e3a5f !important;
}

html.dark .hover\:text-gray-600:hover {
    color: #e2e8f0 !important;
}

/* ── Forms & inputs ─────────────────────────────────────────── */
html.dark .input,
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark select,
html.dark textarea,
html.dark .login__input,
html.dark .chat-textarea,
html.dark #admin-team-chat-text {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark .input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8 !important;
}

html.dark .input-form label {
    color: #cbd5e1 !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
html.dark .table,
html.dark .file-detail-table,
html.dark .render-table,
html.dark .vrm-table {
    color: #e2e8f0;
}

html.dark .table th,
html.dark .file-detail-table th,
html.dark .render-table th,
html.dark .vrm-table th {
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

html.dark .table td,
html.dark .file-detail-table td,
html.dark .render-table td,
html.dark .vrm-table td {
    border-color: #475569 !important;
    color: #e2e8f0;
}

html.dark .file-detail-table tr,
html.dark .table tr {
    border-bottom-color: #475569 !important;
}

html.dark .table thead th,
html.dark table.table thead th {
    border-bottom-color: #64748b !important;
}

html.dark thead.bg-gray-50,
html.dark thead[class~="bg-gray-50"] {
    background-color: #334155 !important;
}

html.dark tbody.bg-white,
html.dark tbody[class*="bg-white"] {
    background-color: transparent !important;
}

html.dark .vrm-vertical {
    color: #cbd5e1 !important;
}

/* ── Dropdowns & notifications ──────────────────────────────── */
html.dark .dropdown-box__content,
html.dark .dropdown-box__content.box {
    background-color: var(--portal-bg-card) !important;
    color: #f1f5f9 !important;
}

html.dark .dropdown-box__content a,
html.dark .dropdown-box__content span,
html.dark .account-dropdown-link,
html.dark .language-option span {
    color: #f1f5f9 !important;
}

html.dark .notification-content__title,
html.dark .notification-content__box > div[style*="background"] {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: transparent !important;
}

html.dark #top-notification-content div[style*="color: #111827"] {
    color: #f1f5f9 !important;
}

/* ── Modals ─────────────────────────────────────────────────── */
html.dark .modal__content,
html.dark [id*="modal"]:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .box,
html.dark .fixed.inset-0:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .bg-white,
html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .rounded-lg.bg-white,
html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .rounded-xl.bg-white {
    background: var(--portal-bg-card) !important;
    color: #f1f5f9 !important;
}

html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .text-gray-900,
html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .text-gray-700,
html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .text-gray-600,
html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .text-gray-500 {
    color: #e2e8f0 !important;
}

html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .border-gray-200,
html.dark .fixed:not(#upload-file-modal):not(#upload-disclaimer-modal):not(#upload-success-modal) .border-gray-300 {
    border-color: transparent !important;
}

/* Upload modal Light toggle — independent of portal dark theme (Chrome honors color-scheme) */
html.dark #upload-file-modal:not([data-upload-theme="dark"]) {
    color-scheme: light;
    color: #111827 !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .modal-content-wrapper,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .upload-modal-body,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .upload-modal-footer,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .upload-step,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-white,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-white.border.border-gray-300 {
    background-color: #ffffff !important;
    color: inherit;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-black { color: #000000 !important; }
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-gray-900 { color: #111827 !important; }
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-gray-800 { color: #1f2937 !important; }
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-gray-700 { color: #374151 !important; }
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-gray-600 { color: #4b5563 !important; }
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-gray-500 { color: #6b7280 !important; }
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-gray-400 { color: #9ca3af !important; }

/* Spans without explicit colour (e.g. ECU value) */
html.dark #upload-file-modal:not([data-upload-theme="dark"]) #upload-spec-ecu,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) #upload-spec-engine-code {
    color: #1f2937 !important;
}

/* White / outline buttons — undo portal dark button overrides */
html.dark #upload-file-modal:not([data-upload-theme="dark"]) button.bg-white,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-white.border.border-gray-300 button {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) button.bg-white.text-gray-900 {
    color: #111827 !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .text-\[\#2a333f\] {
    color: #2a333f !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) button.bg-white:hover,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) button.bg-white.text-gray-900:hover {
    background-color: #f9fafb !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) button.text-\[\#2a333f\].bg-white:hover {
    background-color: #bc7b1d !important;
    color: #ffffff !important;
}

/* Selected state buttons (transmission, tool, etc.) */
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-\[\#2a333f\],
html.dark #upload-file-modal:not([data-upload-theme="dark"]) button.bg-\[\#2a333f\] {
    background-color: #2a333f !important;
    color: #ffffff !important;
    border-color: #2a333f !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .border-\[\#2a333f\] {
    border-color: #2a333f !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-\[\#3cbeb9\],
html.dark #upload-file-modal:not([data-upload-theme="dark"]) button.bg-\[\#3cbeb9\] {
    background-color: #3cbeb9 !important;
    color: #ffffff !important;
    border-color: #3cbeb9 !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .border-\[\#3cbeb9\] {
    border-color: #3cbeb9 !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) [id^="solution-btn-"].bg-white,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) [id^="tool-"].bg-white,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) [id^="connection-"].bg-white,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) [id^="read-type-"].bg-white,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) [id^="master-slave-"].bg-white,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) [id^="transmission-"].bg-white {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .hover\:bg-blue-50:hover {
    background-color: #eff6ff !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .border-gray-100,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .border-gray-200,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) .border-gray-300 {
    border-color: #e5e7eb !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-gray-50 {
    background-color: #f9fafb !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-gray-100 {
    background-color: #f3f4f6 !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) .bg-gradient-to-br.from-gray-50.to-white {
    background: linear-gradient(to bottom right, #f9fafb, #ffffff) !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark #upload-file-modal:not([data-upload-theme="dark"]) select,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) textarea {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) input::placeholder,
html.dark #upload-file-modal:not([data-upload-theme="dark"]) textarea::placeholder {
    color: #9ca3af !important;
}

html.dark #upload-file-modal:not([data-upload-theme="dark"]) #upload-manual-registration {
    background-color: #ffed61c7 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

#upload-file-modal[data-upload-theme="dark"] {
    color-scheme: dark;
}

/* ── Inline-styled elements in content ──────────────────────── */
html.dark .content-inner div[style*="background: white"],
html.dark .content-inner div[style*="background:white"],
html.dark .content-inner div[style*="background: #fff"],
html.dark .content-inner div[style*="background:#fff"] {
    background: var(--portal-bg-card) !important;
}

html.dark .content-inner div[style*="background: #f9fafb"],
html.dark .content-inner div[style*="background:#f9fafb"],
html.dark .content-inner div[style*="background: #f1f5f9"] {
    background: #334155 !important;
}

html.dark .content-inner div[style*="color: #111827"],
html.dark .content-inner span[style*="color: #111827"],
html.dark .content-inner p[style*="color: #111827"] {
    color: #f1f5f9 !important;
}

html.dark .content-inner div[style*="border: 1px solid #e2e8f0"],
html.dark .content-inner div[style*="border-bottom: 1px solid #e2e8f0"],
html.dark .content-inner div[style*="border-top: 1px solid #f3f4f6"],
html.dark .content-inner div[style*="border: 1px solid #d1d5db"] {
    border-color: transparent !important;
}

/* Drop Tailwind default light edge on bordered cards */
html.dark .content-inner .border.box,
html.dark .content-inner .box.border,
html.dark .content-inner .box[class*="border"] {
    border: none !important;
}

/* ── Dashboard: vehicle selection & spec cards ──────────────── */
html.dark #dvla-lookup-section,
html.dark #vehicle-selection-box,
html.dark #result__render-vehicle,
html.dark .rounded-xl.border.border-gray-200,
html.dark .border.border-gray-200.rounded-xl {
    background: var(--portal-bg-card) !important;
    border: none !important;
}

html.dark .vehicle-type-btn .rounded-lg {
    background: transparent;
}

html.dark .vehicle-type-btn:hover .rounded-lg,
html.dark .vehicle-type-btn .hover\:bg-gray-200:hover {
    background: #475569 !important;
}

/* Vehicle type icons — light silhouettes on dark background */
html.dark .vehicle-type-btn img,
html.dark .imgBox[src*="vehicle_icons"] {
    filter: brightness(0) invert(90%);
    transition: filter 0.2s ease, transform 0.2s ease;
}

html.dark .vehicle-type-btn:hover img,
html.dark .imgBox[src*="vehicle_icons"]:hover {
    filter: brightness(0) invert(100%);
}

html.dark .vehicle-box-close-btn {
    color: #f1f5f9 !important;
}

html.dark .vehicle-box-close-btn:hover {
    color: #ffffff !important;
    background-color: #475569 !important;
}

html.dark .vehicle-box-back-link {
    color: #f1f5f9 !important;
}

html.dark .vehicle-box-back-link:hover {
    color: #fb923c !important;
}

html.dark .ecu-selectors button {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark .ecu-selectors button:hover {
    background: #475569 !important;
}

/* ── Dashboard: RSS feed cards ──────────────────────────────── */
html.dark .rss-feed-card {
    background: var(--portal-bg-card) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html.dark .rss-feed-card-title {
    color: #f1f5f9 !important;
}

html.dark .rss-feed-card-description {
    color: #94a3b8 !important;
}

html.dark .rss-feed-card-footer {
    color: #94a3b8 !important;
    border-top-color: transparent !important;
}

html.dark .rss-feed-card-link {
    color: #60a5fa !important;
}

html.dark .rss-feed-card-image-placeholder,
html.dark .rss-feed-card-image[style*="color: #6b7280"] {
    color: #94a3b8 !important;
    background: #334155 !important;
}

/* ── Admin team chat (dark mode) ────────────────────────────── */
html.dark #admin-team-chat .admin-team-chat-header,
html.dark .admin-team-chat-input-area {
    background: var(--portal-bg-card) !important;
}

html.dark #admin-team-chat-messages {
    background: linear-gradient(to bottom, var(--portal-bg-page), var(--portal-bg-card)) !important;
}

html.dark .admin-team-chat-input-row {
    background: #334155 !important;
    border-color: transparent !important;
}

html.dark .admin-team-chat-shell {
    border-color: transparent !important;
}

html.dark .admin-team-chat-header {
    background: var(--portal-bg-card) !important;
    border-color: transparent !important;
    color: #f1f5f9 !important;
}

html.dark .admin-team-chat-header h3 {
    color: #f1f5f9 !important;
}

html.dark .admin-team-chat-msg,
html.dark .admin-team-chat-msg-body {
    color: #000000 !important;
}

html.dark .admin-team-chat-msg-name {
    color: #374151 !important;
}

html.dark .admin-team-chat-msg-time {
    color: #6b7280 !important;
}

html.dark .admin-team-chat-attachment {
    color: #111827 !important;
}

html.dark .admin-team-chat-btn.send {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}

html.dark .admin-team-chat-btn.send:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45) !important;
}

/* ── File support chat — admin team dark theme (dark mode only) */
html.dark #file-support-chat {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35) !important;
}

html.dark #file-support-chat .file-support-chat-header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

html.dark #file-support-chat .file-support-chat-header h2,
html.dark #file-support-chat .file-support-chat-header svg {
    color: #fbbf24 !important;
    stroke: #fbbf24 !important;
}

html.dark #file-support-chat #comments-container {
    background: #0f172a !important;
    scrollbar-color: #475569 #0f172a;
}

html.dark #file-support-chat #comments-container::-webkit-scrollbar-track {
    background: #0f172a !important;
}

html.dark #file-support-chat #comments-container::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

html.dark #file-support-chat #comments-container .text-slate-500,
html.dark #file-support-chat #comments-container .text-indigo-300 {
    color: #64748b !important;
}

html.dark #file-support-chat .message-bubble-admin {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #e2e8f0 !important;
    border: none !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
}

html.dark #file-support-chat .message-bubble-admin .message-sender {
    color: #fbbf24 !important;
    opacity: 1;
}

html.dark #file-support-chat .message-bubble-admin .message-content,
html.dark #file-support-chat .message-bubble-admin .message-time {
    color: #e2e8f0 !important;
}

html.dark #file-support-chat .message-bubble-admin .message-attachment {
    background: rgba(51, 65, 85, 0.8) !important;
    color: #cbd5e1 !important;
}

html.dark #file-support-chat .message-bubble-admin .message-attachment:hover {
    background: rgba(71, 85, 105, 0.95) !important;
    color: #f8fafc !important;
}

html.dark #file-support-chat .message-bubble-user {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #e2e8f0 !important;
    border: none !important;
    border-left: 3px solid #38bdf8 !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
}

html.dark #file-support-chat .message-bubble-user .message-sender {
    color: #7dd3fc !important;
}

html.dark #file-support-chat .message-bubble-user .message-content,
html.dark #file-support-chat .message-bubble-user .message-time {
    color: #e2e8f0 !important;
}

html.dark #file-support-chat .message-bubble-user .message-attachment {
    background: rgba(51, 65, 85, 0.8) !important;
    color: #cbd5e1 !important;
}

html.dark #file-support-chat .message-avatar.admin {
    background: #334155 !important;
    color: #fbbf24 !important;
    border-color: #475569 !important;
}

html.dark #file-support-chat .message-avatar.user {
    background: #0c4a6e !important;
    color: #7dd3fc !important;
    border-color: #38bdf8 !important;
}

html.dark #file-support-chat .chat-input-container {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

html.dark #file-support-chat .chat-input-wrapper {
    background: #0f172a !important;
    border-color: #475569 !important;
}

html.dark #file-support-chat .chat-input-wrapper:focus-within {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

html.dark #file-support-chat .chat-textarea {
    color: #f1f5f9 !important;
    background: transparent !important;
}

html.dark #file-support-chat .chat-textarea::placeholder {
    color: #64748b !important;
}

html.dark #file-support-chat .chat-action-buttons {
    border-left-color: #334155 !important;
}

html.dark #file-support-chat .chat-icon-button {
    color: #cbd5e1 !important;
    background: transparent !important;
}

html.dark #file-support-chat .chat-icon-button:hover {
    background: #334155 !important;
    color: #f8fafc !important;
}

html.dark #file-support-chat .chat-icon-button.send-button {
    background: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

html.dark #file-support-chat .chat-icon-button.send-button:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

html.dark #file-support-chat #emoji-picker-popover {
    background: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.5) !important;
}

html.dark #file-support-chat #emoji-picker-popover .emoji-choice:hover,
html.dark #file-support-chat #emoji-picker-popover .emoji-choice:focus-visible {
    background: #334155 !important;
}

html.dark #new-message-indicator {
    color: #ffffff !important;
}

html.dark .content-inner .border-b.border-gray-200.bg-white {
    background: var(--portal-bg-card) !important;
    border-color: transparent !important;
}

html.dark .emoji-picker-wrap #emoji-picker-popover,
html.dark #emoji-picker-popover {
    background: #334155 !important;
    border-color: transparent !important;
}

/* ── Sidebar active item (dark theme) ───────────────────────── */
html.dark .side-menu.side-menu--active,
html.dark a.side-menu.side-menu--active,
html.dark .side-nav .side-menu.side-menu--active {
    background: #475569 !important;
    color: #f8fafc !important;
    width: calc(100% - 1.5rem) !important;
    margin: 0 0.75rem !important;
    border-radius: 8px !important;
    overflow: hidden;
}

html.dark .side-menu:not(.side-menu--active):hover,
html.dark a.side-menu:not(.side-menu--active):hover {
    width: calc(100% - 1.5rem) !important;
    margin: 0 0.75rem !important;
    border-radius: 8px !important;
    transform: none;
}

html.dark .sidebar-collapsed .side-menu.side-menu--active,
html.dark .sidebar-collapsed:hover .side-menu.side-menu--active {
    width: calc(100% - 1rem) !important;
    margin: 0 0.5rem !important;
    border-radius: 8px !important;
}

html.dark .side-menu.side-menu--active *,
html.dark a.side-menu.side-menu--active *,
html.dark .side-menu.side-menu--active .side-menu__title,
html.dark a.side-menu.side-menu--active .side-menu__title,
html.dark .side-menu.side-menu--active .side-menu__icon,
html.dark a.side-menu.side-menu--active .side-menu__icon,
html.dark .side-menu.side-menu--active .side-menu__icon i,
html.dark .side-menu.side-menu--active .side-menu__icon svg {
    color: #f8fafc !important;
    stroke: #f8fafc !important;
}

html.dark .side-menu.side-menu--active:hover,
html.dark a.side-menu.side-menu--active:hover {
    background: #64748b !important;
    color: #ffffff !important;
    width: calc(100% - 1.5rem) !important;
    margin: 0 0.75rem !important;
    border-radius: 8px !important;
}

html.dark .side-menu.side-menu--active:hover::before,
html.dark a.side-menu.side-menu--active:hover::before {
    display: none;
}

/* ── Preserve semantic / brand colors ─────────────────────────── */
html.dark .text-red-500,
html.dark .text-red-600 { color: #f87171 !important; }

html.dark .text-green-500,
html.dark .text-green-600 { color: #4ade80 !important; }

html.dark .text-blue-500,
html.dark .text-blue-600 { color: #60a5fa !important; }

html.dark .text-yellow-500,
html.dark .text-yellow-600 { color: #facc15 !important; }

html.dark .text-orange-500,
html.dark .text-orange-600 { color: #fb923c !important; }

html.dark .text-orange-700 { color: #fdba74 !important; }

html.dark .text-orange-800 { color: #fdba74 !important; }

html.dark .text-purple-600 { color: #c084fc !important; }

html.dark .text-indigo-600 { color: #a5b4fc !important; }

html.dark .bg-orange-50,
html.dark [class~="bg-orange-50"] {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

html.dark .bg-amber-50,
html.dark [class~="bg-amber-50"] {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark .bg-blue-50,
html.dark [class~="bg-blue-50"] {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark .bg-red-50,
html.dark [class~="bg-red-50"] {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .bg-green-50,
html.dark [class~="bg-green-50"] {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

html.dark .border-orange-200,
html.dark .border-amber-200,
html.dark .border-red-200,
html.dark .border-blue-200,
html.dark .border-green-200 {
    border-color: transparent !important;
}

html.dark .text-orange-700,
html.dark .text-amber-700,
html.dark .text-amber-800 {
    color: #fcd34d !important;
}

html.dark .button,
html.dark .btn {
    color: inherit;
}

html.dark .button.bg-theme-9,
html.dark button.bg-theme-9 {
    color: #ffffff !important;
}

html.dark a.button {
    color: #ffffff;
}

html.dark .info-value {
    color: #e2e8f0 !important;
}

html.dark .bg-blue-500,
html.dark button.bg-blue-500,
html.dark .bg-blue-600 {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

html.dark .bg-blue-500 *,
html.dark button.bg-blue-500 * {
    color: #ffffff !important;
}

html.dark .bg-green-500,
html.dark a.bg-green-500,
html.dark button.bg-green-500,
html.dark .button.bg-green-500 {
    background-color: #22c55e !important;
    color: #ffffff !important;
}

html.dark .bg-green-500:hover,
html.dark a.bg-green-500:hover,
html.dark button.bg-green-500:hover,
html.dark .button.bg-green-500:hover,
html.dark .hover\:bg-green-600:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

html.dark .bg-red-500,
html.dark a.bg-red-500,
html.dark button.bg-red-500 {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

html.dark .bg-red-600,
html.dark a.bg-red-600,
html.dark button.bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

html.dark .bg-yellow-500,
html.dark a.bg-yellow-500,
html.dark button.bg-yellow-500 {
    background-color: #eab308 !important;
    color: #ffffff !important;
}

html.dark .bg-orange-500,
html.dark a.bg-orange-500,
html.dark button.bg-orange-500 {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

html.dark .text-white { color: #ffffff !important; }

html.dark #dvla-country-text,
html.dark span#dvla-country-text {
    color: #ffffff !important;
}

/* ── VRM lookup (dashboard) ─────────────────────────────────── */
html.dark .vrm-input {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #13547c !important;
}

/* DVLA results bar — unified dark styling */
html.dark #vrm-table-container .overflow-x-auto.bg-gray-200,
html.dark #vrm-table-container [class*="bg-gray-200"].overflow-x-auto {
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
}

html.dark #vrm-table-container .vrm-table th {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -1px 0 #64748b !important;
}

html.dark #vrm-table-container .vrm-table th:not(:last-child) {
    box-shadow: inset -1px 0 0 #475569, inset 0 -1px 0 #64748b !important;
}

html.dark #vrm-table-container .vrm-table td {
    background-color: #2a333f !important;
    color: #f1f5f9 !important;
}

html.dark #vrm-table-container .vrm-table td:not(:last-child) {
    box-shadow: inset -1px 0 0 #475569 !important;
}

html.dark #vrm-table-container .vrm-table td.bg-white,
html.dark #vrm-table-container .vrm-table td[class~="bg-gray-50"] {
    background-color: #2a333f !important;
}

html.dark #vrm-table-container .vrm-vertical {
    background-color: #2a333f !important;
    border: 1px solid #475569 !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
}

html.dark #vrm-table-container .vrm-vertical > div {
    color: #e2e8f0 !important;
}

html.dark #vrm-table-container .vrm-vertical > div:not(:last-child) {
    box-shadow: inset 0 -1px 0 #475569 !important;
}

html.dark #vrm-table-container .vrm-vertical span:first-child {
    color: #94a3b8 !important;
}

html.dark #dvla-lookup-section-continued-wrapper .box,
html.dark #dvla-lookup-section-continued {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Quill / admin message editor ─────────────────────────────── */
html.dark .ql-toolbar,
html.dark .ql-container {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark .ql-editor {
    color: #f1f5f9 !important;
}

/* Quill HTML with inline colours (price list, admin messages) */
html.dark .price-list-content,
html.dark .admin-message-rich-text.ql-editor {
    color: #f1f5f9 !important;
}

html.dark .price-list-content *:not(a):not(code):not(pre),
html.dark .admin-message-rich-text.ql-editor *:not(a):not(code):not(pre) {
    color: inherit !important;
}

html.dark .price-list-content a,
html.dark .admin-message-rich-text.ql-editor a {
    color: #60a5fa !important;
}

html.dark .price-list-content blockquote,
html.dark .admin-message-rich-text.ql-editor blockquote {
    border-left-color: #64748b !important;
}

html.dark .price-list-content code,
html.dark .price-list-content pre:not(.ql-syntax),
html.dark .admin-message-rich-text.ql-editor code,
html.dark .admin-message-rich-text.ql-editor pre:not(.ql-syntax) {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark .ql-stroke {
    stroke: #cbd5e1 !important;
}

html.dark .ql-fill {
    fill: #cbd5e1 !important;
}

html.dark .ql-picker-label {
    color: #cbd5e1 !important;
}

/* ── Mobile overrides (beat app.css !important light rules) ───── */
@media (max-width: 768px) {
    html.dark .content-inner {
        background: var(--portal-bg-page) !important;
        color: #f1f5f9 !important;
    }

    html.dark .top-bar {
        background: var(--portal-bg-card) !important;
        border-radius: 8px !important;
        color: #f1f5f9 !important;
    }

    html.dark .mobile-credits-grid .text-black,
    html.dark .mobile-credits-grid p.text-2xl,
    html.dark [data-mobile-credits] {
        color: #f1f5f9 !important;
    }

    html.dark .side-nav .side-menu.side-menu--active {
        background: #475569 !important;
        color: #f8fafc !important;
        width: calc(100% - 1.5rem) !important;
        margin: 0 0.75rem !important;
        border-radius: 8px !important;
    }

    html.dark .side-nav .side-menu.side-menu--active .side-menu__icon,
    html.dark .side-nav .side-menu.side-menu--active .side-menu__title {
        color: #f8fafc !important;
    }
}

/* ── High-specificity: status pills in tables (My Files, Admin) ─ */
html.dark td span.inline-flex.rounded-full,
html.dark td span[class*="rounded-full"],
html.dark span.px-2.py-1.rounded-full,
html.dark span.px-3.py-1.rounded-full,
html.dark span[class*="rounded-full"][class*="font-bold"],
html.dark span[class*="rounded-full"][class*="font-semibold"] {
    border: none !important;
}

html.dark td span.bg-purple-100,
html.dark td span[class*="bg-purple-100"] {
    background-color: rgba(168, 85, 247, 0.3) !important;
    color: #e9d5ff !important;
}

html.dark td span.bg-red-100,
html.dark td span[class*="bg-red-100"] {
    background-color: rgba(239, 68, 68, 0.28) !important;
    color: #fecaca !important;
}

html.dark td span.bg-blue-100,
html.dark td span[class*="bg-blue-100"] {
    background-color: rgba(59, 130, 246, 0.28) !important;
    color: #bfdbfe !important;
}

html.dark td span.bg-green-100,
html.dark td span[class*="bg-green-100"] {
    background-color: rgba(34, 197, 94, 0.28) !important;
    color: #bbf7d0 !important;
}

html.dark td span.bg-orange-100,
html.dark td span[class*="bg-orange-100"] {
    background-color: rgba(249, 115, 22, 0.28) !important;
    color: #fed7aa !important;
}

html.dark td span.bg-yellow-100,
html.dark td span[class*="bg-yellow-100"],
html.dark td span.bg-amber-100,
html.dark td span[class*="bg-amber-100"] {
    background-color: rgba(245, 158, 11, 0.28) !important;
    color: #fde68a !important;
}

html.dark td span.bg-indigo-100,
html.dark td span[class*="bg-indigo-100"] {
    background-color: rgba(99, 102, 241, 0.28) !important;
    color: #c7d2fe !important;
}

/* ── Dark mode: remove structural borders portal-wide ───────── */
html.dark .content .border,
html.dark .content .border-b,
html.dark .content .border-t,
html.dark .content .border-l,
html.dark .content .border-r,
html.dark .content .border-x,
html.dark .content .border-y,
html.dark .content .border-2,
html.dark .content .border-4,
html.dark .content [class*="border-gray"],
html.dark .content [class*="border-theme"],
html.dark .content [class*="border-red-200"],
html.dark .content [class*="border-blue-200"],
html.dark .content [class*="border-green-200"],
html.dark .content [class*="border-orange-200"],
html.dark .content [class*="border-amber-200"],
html.dark .content-inner .border,
html.dark .content-inner .border-b,
html.dark .content-inner .border-t,
html.dark .content-inner .border-l,
html.dark .content-inner .border-r,
html.dark .content-inner .border-x,
html.dark .content-inner .border-y,
html.dark .content-inner [class*="border-gray"],
html.dark .content-inner [class*="border-theme"],
html.dark .modal__content .border,
html.dark .modal__content .border-b,
html.dark .modal__content .border-t,
html.dark .modal__content [class*="border-gray"],
html.dark .file-timer-tuner-box {
    border-color: transparent !important;
}

html.dark .content .bg-white.border,
html.dark .content .rounded-lg.border,
html.dark .content .rounded-xl.border,
html.dark .content-inner .bg-white.border,
html.dark .content-inner .rounded-lg.border,
html.dark .content-inner .rounded-xl.border {
    border: none !important;
}

html.dark .content-inner div[style*="border: 1px solid"],
html.dark .content-inner div[style*="border: 2px solid"],
html.dark .content-inner div[style*="border-bottom: 1px solid"],
html.dark .content-inner div[style*="border-top: 1px solid"],
html.dark .content-inner div[style*="border-left: 1px solid"],
html.dark .content-inner div[style*="border-right: 1px solid"] {
    border-color: transparent !important;
}

/* Keep borders on form controls and chat input only */
html.dark .content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark .content select,
html.dark .content textarea,
html.dark .content .input,
html.dark .content .login__input,
html.dark .content #admin-team-chat-text,
html.dark .content .chat-input-wrapper,
html.dark .content-inner input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark .content-inner select,
html.dark .content-inner textarea,
html.dark .content-inner .input,
html.dark .content-inner .chat-input-wrapper {
    border-color: #475569 !important;
}

html.dark .content .chat-input-wrapper:focus-within,
html.dark .content-inner .chat-input-wrapper:focus-within {
    border-color: #64748b !important;
}

/* #upload-file-modal borders are controlled in dashboard.html (higher specificity) */

/* Data tables — restore row/column lines (overrides structural border reset above) */
html.dark .content table.table th,
html.dark .content table.table td,
html.dark .content-inner table.table th,
html.dark .content-inner table.table td,
html.dark .content .table th,
html.dark .content .table td,
html.dark .content-inner .table th,
html.dark .content-inner .table td,
html.dark .content .file-detail-table th,
html.dark .content .file-detail-table td,
html.dark .content .render-table th,
html.dark .content .render-table td,
html.dark .content .vrm-table th,
html.dark .content .vrm-table td,
html.dark .content table th.border,
html.dark .content table td.border,
html.dark .content-inner table th.border,
html.dark .content-inner table td.border {
    border-color: #475569 !important;
}

html.dark .content table.table thead th,
html.dark .content-inner table.table thead th,
html.dark .content .table thead th {
    border-bottom-color: #64748b !important;
}

html.dark .content table.table tr,
html.dark .content-inner table.table tr,
html.dark .content .table tr,
html.dark .content .file-detail-table tr {
    border-bottom-color: #475569 !important;
}

/* Invoice / action links inside data tables */
html.dark .table a[class*="bg-blue-50"],
html.dark table.table a[class*="border-blue"] {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}

html.dark .table a[class*="bg-blue-50"]:hover,
html.dark table.table a[class*="border-blue"]:hover {
    background-color: rgba(59, 130, 246, 0.35) !important;
    color: #bfdbfe !important;
}

/* My Files & list tables (w-full / divide-y — no .table class) */
html.dark .content table.w-full th,
html.dark .content table.w-full td,
html.dark .content table.min-w-full th,
html.dark .content table.min-w-full td,
html.dark .content-inner table.w-full th,
html.dark .content-inner table.w-full td,
html.dark .content-inner table.min-w-full th,
html.dark .content-inner table.min-w-full td,
html.dark #files-table th,
html.dark #files-table td {
    border-color: #475569 !important;
}

html.dark .content table thead th,
html.dark .content-inner table thead th,
html.dark #files-table thead th {
    border-bottom: 1px solid #64748b !important;
}

html.dark .content table tbody tr,
html.dark .content-inner table tbody tr,
html.dark #files-table tbody tr {
    border-bottom: 1px solid #475569 !important;
}

html.dark .content [class*="divide-gray"] > :not([hidden]) ~ :not([hidden]),
html.dark .content-inner [class*="divide-gray"] > :not([hidden]) ~ :not([hidden]) {
    border-top-color: #475569 !important;
}

/* File support chat — preserve admin dark theme borders (after portal border reset) */
html.dark #file-support-chat[style*="border"] {
    border: 1px solid #334155 !important;
}

html.dark #file-support-chat .file-support-chat-header.border-b,
html.dark #file-support-chat .file-support-chat-header[class*="border-gray"] {
    border-bottom: 1px solid #334155 !important;
}

html.dark #file-support-chat .chat-input-container {
    border-top: 1px solid #334155 !important;
}

html.dark #file-support-chat .chat-input-wrapper:focus-within {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

/* Send File — ECU upload drop zone (dashed border in dark mode) */
html.dark #admin-ecu-file-container {
    border: 2px dashed #64748b !important;
}

html.dark #admin-ecu-file-container:hover {
    border-color: #60a5fa !important;
}

html.dark #admin-ecu-file-container.border-blue-500 {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Admin settings — restore card borders in dark mode (after portal border reset) */
html.dark .content .bg-white.rounded-lg.border.border-gray-200,
html.dark .content-inner .bg-white.rounded-lg.border.border-gray-200 {
    border: 1px solid #475569 !important;
}

html.dark .content .bg-white.rounded-lg.border.border-gray-200 > .border-b.border-gray-200,
html.dark .content-inner .bg-white.rounded-lg.border.border-gray-200 > .border-b.border-gray-200 {
    border-bottom: 1px solid #475569 !important;
}

html.dark .content a.border.border-gray-200.rounded-lg,
html.dark .content-inner a.border.border-gray-200.rounded-lg,
html.dark .content button.border.border-gray-200.rounded-lg,
html.dark .content-inner button.border.border-gray-200.rounded-lg {
    border: 1px solid #475569 !important;
}

html.dark .content a.border.border-gray-200.rounded-lg:hover,
html.dark .content-inner a.border.border-gray-200.rounded-lg:hover,
html.dark .content button.border.border-gray-200.rounded-lg:hover,
html.dark .content-inner button.border.border-gray-200.rounded-lg:hover {
    border-color: #3b82f6 !important;
    background-color: #334155 !important;
}

html.dark .content a.border.border-gray-300.rounded-lg,
html.dark .content-inner a.border.border-gray-300.rounded-lg {
    border: 1px solid #475569 !important;
}

/* DVLA results table — final overrides (after portal border/bg reset) */
html.dark .content #vrm-table-container .overflow-x-auto.bg-gray-200,
html.dark .content-inner #vrm-table-container .overflow-x-auto.bg-gray-200 {
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
}

html.dark .content #vrm-table-container .vrm-table td,
html.dark .content-inner #vrm-table-container .vrm-table td,
html.dark .content #vrm-table-container .vrm-table td.bg-white,
html.dark .content-inner #vrm-table-container .vrm-table td.bg-white,
html.dark .content #vrm-table-container .vrm-table td[class~="bg-gray-50"],
html.dark .content-inner #vrm-table-container .vrm-table td[class~="bg-gray-50"] {
    background-color: #2a333f !important;
    color: #f1f5f9 !important;
}

html.dark .content #vrm-table-container .vrm-table th,
html.dark .content-inner #vrm-table-container .vrm-table th {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Time Scale & Tuner merged box — section dividers in dark mode (match light mode) */
html.dark .file-timer-tuner-box .file-timer-tuner-header.border-b,
html.dark .file-timer-tuner-box .file-timer-tuner-header[class*="border-gray"] {
    border-bottom: 1px solid #475569 !important;
}

html.dark .file-timer-tuner-box .file-timer-tuner-options-header.border-t,
html.dark .file-timer-tuner-box .file-timer-tuner-options-header[class*="border-gray"] {
    border-top: 1px solid #475569 !important;
}