/* dark.css - Dark Mode Overrides */

/* Apply dark mode when data-theme="dark" is set on html element */
[data-theme="dark"] {
  /* Bootstrap root variable overrides */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-secondary-bg: var(--color-surface-2);
  --bs-tertiary-bg: var(--color-surface);

  /* Base backgrounds and text */
  background-color: var(--color-bg);
  color: var(--color-text);
}

[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Main content containers */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Any white backgrounds */
[data-theme="dark"] .bg-white {
  background-color: var(--color-surface) !important;
}

/* Table responsive containers */
[data-theme="dark"] .table-responsive {
  background-color: var(--color-surface);
}

/* Logo theme switching */
.navbar-logo-dark { display: none; }
.login-logo-dark { display: none; }

[data-theme="dark"] .navbar-logo-light { display: none; }
[data-theme="dark"] .navbar-logo-dark { display: inline; }
[data-theme="dark"] .login-logo-light { display: none; }
[data-theme="dark"] .login-logo-dark { display: block; }

/* Footer: styled with tokens on the login / 2FA pages */

/* Navbar */
[data-theme="dark"] .navbar-custom {
  background-color: var(--color-surface);
  box-shadow: 0 2px 5px var(--color-shadow);
}

[data-theme="dark"] .navbar-custom .container-fluid {
  background-color: var(--color-surface) !important;
}

[data-theme="dark"] .navbar-custom .navbar-brand,
[data-theme="dark"] .navbar-custom .nav-link,
[data-theme="dark"] .navbar-custom .btn {
  color: var(--color-text) !important;
}

[data-theme="dark"] .nav-link.nav-hover:hover {
  background-color: var(--color-surface-3);
}

[data-theme="dark"] .nav-link.active {
  color: var(--color-primary-text) !important;
}

[data-theme="dark"] .nav-link.dropdown-toggle.active {
  color: var(--color-primary-text) !important;
}

[data-theme="dark"] .nav-separator {
  background: var(--color-surface-3);
}

/* Dropdowns: colors come from tokens via Bootstrap variables (common.css) */

/* Cards */
[data-theme="dark"] .card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .card-header {
  background-color: var(--color-surface-2);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .card-body {
  background-color: var(--color-surface);
  color: var(--color-text);
}

[data-theme="dark"] .card-body.p-0 {
  background-color: var(--color-surface);
}

[data-theme="dark"] .card-footer {
  background-color: var(--color-surface-2);
  border-top-color: var(--color-border);
}

/* Tables */
[data-theme="dark"] .table {
  color: var(--color-text);
  border-color: var(--color-border);
  background-color: var(--color-surface);
  --bs-table-color: var(--color-text);
  --bs-table-bg: var(--color-surface);
  --bs-table-striped-color: var(--color-text);
  --bs-table-striped-bg: var(--color-surface-2);
  --bs-table-active-color: var(--color-text);
  --bs-table-active-bg: var(--color-surface-2);
  --bs-table-hover-color: var(--color-text);
  --bs-table-hover-bg: var(--color-surface-2);
}

[data-theme="dark"] .table thead {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

[data-theme="dark"] .table tbody {
  background-color: var(--color-surface);
  color: var(--color-text);
}

[data-theme="dark"] .table tbody tr {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--color-border);
  background-color: transparent;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--color-surface-2);
}

[data-theme="dark"] .table-primary {
  --bs-table-color: var(--color-text) !important;
  --bs-table-bg: var(--color-brand-subtle) !important;
  --bs-table-border-color: var(--color-border) !important;
  --bs-table-striped-color: var(--color-text) !important;
  --bs-table-striped-bg: var(--color-brand-muted) !important;
  --bs-table-hover-color: var(--color-text) !important;
  --bs-table-hover-bg: var(--color-brand-muted) !important;
}

[data-theme="dark"] .bg-light {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--color-surface-2);
  border-color: var(--color-primary-text);
  color: var(--color-text);
}

[data-theme="dark"] .form-control-plaintext {
  color: var(--color-text);
}

[data-theme="dark"] .form-control-plaintext.border {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--color-text-muted);
}

[data-theme="dark"] .form-label {
  color: var(--color-text);
}

[data-theme="dark"] .form-check-label {
  color: var(--color-text);
}

[data-theme="dark"] .input-group-text {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Modals */
[data-theme="dark"] .modal-content {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .modal-header {
  background-color: var(--color-surface-2);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .modal-body {
  color: var(--color-text);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--color-border);
}

/* Transcription modal dark mode overrides */
[data-theme="dark"] #transcriptionModal .modal-header {
  background-color: var(--color-primary-subtle) !important;
  border-bottom-color: var(--color-brand) !important;
}

[data-theme="dark"] #transcriptionModal .speed-btn.btn-outline-secondary {
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}

[data-theme="dark"] #transcriptionModal .speed-btn.btn-secondary.active {
  background-color: var(--color-surface-4);
  border-color: var(--color-border-strong);
}

[data-theme="dark"] #transcriptionModal code {
  background-color: var(--color-surface-3);
  color: var(--color-text);
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Clean up button appearance in dark mode */
[data-theme="dark"] .btn {
  box-shadow: none !important;
  background-image: none !important;
}

[data-theme="dark"] .btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-accent) !important;
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--color-primary-text) !important;
  border-color: var(--color-primary-text) !important;
}

[data-theme="dark"] .btn-secondary {
  background-color: var(--color-surface-3) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--color-surface-4) !important;
  border-color: var(--color-border-strong) !important;
}

[data-theme="dark"] .btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-on-accent) !important;
}

[data-theme="dark"] .btn-success:hover {
  background-color: var(--color-success-hover) !important;
  border-color: var(--color-success-hover) !important;
}

[data-theme="dark"] .btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-on-accent) !important;
}

[data-theme="dark"] .btn-danger:hover {
  background-color: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
}

[data-theme="dark"] .btn-info {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: var(--color-on-warning) !important;
}

[data-theme="dark"] .btn-outline-info {
  color: var(--color-info-accent) !important;
  border-color: var(--color-info) !important;
}

[data-theme="dark"] .btn-outline-info:hover {
  background-color: var(--color-info-subtle) !important;
  color: var(--color-info-accent) !important;
  border-color: var(--color-info-accent) !important;
}

[data-theme="dark"] .btn-outline-danger {
  color: var(--color-danger-text) !important;
  border-color: var(--color-danger-text) !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
  background-color: var(--color-danger-subtle) !important;
  color: var(--color-danger-text) !important;
  border-color: var(--color-danger-text) !important;
}

/* Outline buttons — blue instead of white */
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-primary {
  color: var(--color-primary-text) !important;
  border-color: var(--color-primary-text) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus,
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
  background-color: var(--color-brand-muted) !important;
  color: var(--color-on-accent) !important;
  border-color: var(--color-primary-emphasis) !important;
}

[data-theme="dark"] .btn-outline-secondary.active,
[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-outline-primary.active,
[data-theme="dark"] .btn-outline-primary:active,
[data-theme="dark"] .btn-check:checked + .btn-outline-secondary,
[data-theme="dark"] .btn-check:checked + .btn-outline-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-on-accent) !important;
  border-color: var(--color-primary) !important;
}

/* Alerts */
[data-theme="dark"] .alert-info {
  background-color: var(--color-primary-subtle);
  border-color: var(--color-primary-border);
  color: var(--color-primary-text);
}

[data-theme="dark"] .alert-success {
  background-color: var(--color-success-subtle);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

[data-theme="dark"] .alert-warning {
  background-color: var(--color-warning-subtle);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

[data-theme="dark"] .alert-danger {
  background-color: var(--color-danger-subtle);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

/* Badges */
[data-theme="dark"] .badge.bg-secondary {
  background-color: var(--color-surface-3) !important;
  color: var(--color-text);
}

[data-theme="dark"] .badge.bg-light {
  background-color: var(--color-surface-3) !important;
  color: var(--color-text);
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--color-text);
}

/* Pagination */
[data-theme="dark"] .pagination .page-link {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-primary-text);
}

[data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-primary-text);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* List groups */
[data-theme="dark"] .list-group-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .list-group-item:hover {
  background-color: var(--color-surface-2);
}

[data-theme="dark"] .list-group-item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Borders */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
  border-color: var(--color-border) !important;
}

/* Text colors */
[data-theme="dark"] .text-muted {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .text-dark {
  color: var(--color-text) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--color-text);
}

/* Admin pages: colors come from tokens (administration.css) */

/* Login page specific */
[data-theme="dark"] .login-card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 4px 6px var(--color-shadow);
}

[data-theme="dark"] .login-card h2 {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .password-toggle {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .password-toggle:hover {
  color: var(--color-text);
}

[data-theme="dark"] .remember-duration {
  color: var(--color-text-muted);
}

/* Shadows */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem var(--color-shadow) !important;
}

/* HR separator */
[data-theme="dark"] hr {
  border-color: var(--color-border);
  opacity: 1;
}

/* Code and pre blocks */
[data-theme="dark"] code {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

[data-theme="dark"] pre {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Accordion */
[data-theme="dark"] .accordion-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .accordion-button {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--color-surface-2);
  color: var(--color-primary-text);
}

[data-theme="dark"] .accordion-body {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Progress bars */
[data-theme="dark"] .progress {
  background-color: var(--color-surface-2);
}

/* Tooltips and popovers */
[data-theme="dark"] .tooltip-inner {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

[data-theme="dark"] .popover {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .popover-header {
  background-color: var(--color-surface-2);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .popover-body {
  color: var(--color-text);
}

/* Tab styling */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--color-border) var(--color-border) var(--color-border);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--color-surface);
  border-color: var(--color-border) var(--color-border) var(--color-surface);
  color: var(--color-text);
}

/* Settings page specific styles */
[data-theme="dark"] .settings-card {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: 0 2px 5px var(--color-shadow) !important;
}

[data-theme="dark"] .col-md-3 .settings-card,
[data-theme="dark"] .col-md-9 .settings-card {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
}

[data-theme="dark"] .settings-header {
  border-bottom: 1px solid var(--color-border) !important;
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .settings-header h3 {
  color: var(--color-text) !important;
}

[data-theme="dark"] .settings-header i {
  color: var(--color-primary-text) !important;
}

/* Tab content containers */
[data-theme="dark"] .tab-content {
  background-color: transparent !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .tab-pane {
  background-color: transparent !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .tab-pane .settings-card {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
}

/* Settings page rows and columns */
[data-theme="dark"] .container .row,
[data-theme="dark"] .container-fluid .row {
  color: var(--color-text) !important;
}

[data-theme="dark"] .container .col-md-3,
[data-theme="dark"] .container .col-md-9,
[data-theme="dark"] .container-fluid .col-lg-2,
[data-theme="dark"] .container-fluid .col-lg-10,
[data-theme="dark"] .container-fluid .col-md-3,
[data-theme="dark"] .container-fluid .col-md-9 {
  color: var(--color-text) !important;
}

/* Settings feedback messages override */
[data-theme="dark"] .settings-feedback {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .nav-pills .nav-link {
  color: var(--color-text-secondary) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--color-primary) !important;
  color: var(--color-on-accent) !important;
}

[data-theme="dark"] .settings-feedback.success {
  background-color: var(--color-success-subtle) !important;
  border-color: var(--color-success-border) !important;
  color: var(--color-success-text) !important;
}

[data-theme="dark"] .settings-feedback.error {
  background-color: var(--color-danger-subtle) !important;
  border-color: var(--color-danger-border) !important;
  color: var(--color-danger-text) !important;
}

[data-theme="dark"] .color-option {
  box-shadow: 0 0 0 1px var(--color-border) !important;
}

[data-theme="dark"] .option-disabled {
  opacity: 0.5;
}

[data-theme="dark"] .coming-soon {
  background-color: var(--color-surface-3) !important;
}

/* Row and column backgrounds */
[data-theme="dark"] .row {
  color: var(--color-text);
}

[data-theme="dark"] .col,
[data-theme="dark"] [class*="col-"] {
  color: var(--color-text);
}

/* Panel and section backgrounds */
[data-theme="dark"] .panel,
[data-theme="dark"] .section {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Content area backgrounds */
[data-theme="dark"] .content,
[data-theme="dark"] .content-area,
[data-theme="dark"] .main-content {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Well and jumbotron */
[data-theme="dark"] .well,
[data-theme="dark"] .jumbotron {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Any remaining white text on dark should be light */
[data-theme="dark"] .text-white {
  color: var(--color-text) !important;
}

/* Strong and bold text */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: var(--color-text);
}

/* Links in dark mode */
[data-theme="dark"] a {
  color: var(--color-primary-text);
}

[data-theme="dark"] a:hover {
  color: var(--color-primary-emphasis);
}

/* Password toggle buttons */
[data-theme="dark"] .password-wrapper .password-toggle {
  color: var(--color-text-secondary) !important;
  background: none !important;
}

[data-theme="dark"] .password-wrapper .password-toggle:hover {
  color: var(--color-text) !important;
}

/* List group items in settings */
[data-theme="dark"] .settings-card .list-group-item {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Settings modal: colors come from tokens (settings_modal.html) */

/* Comprehensive override for any remaining white backgrounds in containers */
[data-theme="dark"] div[class*="col-"],
[data-theme="dark"] .container div,
[data-theme="dark"] .container-fluid div {
  /* Only target direct background colors, not all divs */
}

/* Statistics page: colors come from tokens (statistics.css) */

/* Date Range Picker */
[data-theme="dark"] .daterangepicker {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .daterangepicker:after {
  border-bottom-color: var(--color-surface);
}

[data-theme="dark"] .daterangepicker:before {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .daterangepicker .calendar-table {
  background-color: var(--color-surface);
  border-color: var(--color-surface);
}

[data-theme="dark"] .daterangepicker .calendar-table th,
[data-theme="dark"] .daterangepicker .calendar-table td {
  color: var(--color-text);
}

[data-theme="dark"] .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover {
  background-color: var(--color-surface-3);
}

[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.off.in-range,
[data-theme="dark"] .daterangepicker td.off.start-date,
[data-theme="dark"] .daterangepicker td.off.end-date {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

[data-theme="dark"] .daterangepicker td.in-range {
  background-color: var(--color-brand-muted);
  color: var(--color-text);
}

[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover {
  background-color: var(--color-primary);
  color: var(--color-on-accent);
}

[data-theme="dark"] .daterangepicker td.disabled {
  color: var(--color-text-muted);
}

[data-theme="dark"] .daterangepicker th.month {
  color: var(--color-text);
}

[data-theme="dark"] .daterangepicker .calendar-table .next span,
[data-theme="dark"] .daterangepicker .calendar-table .prev span {
  border-color: var(--color-border-strong);
}

[data-theme="dark"] .daterangepicker select.monthselect,
[data-theme="dark"] .daterangepicker select.yearselect {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .daterangepicker .drp-buttons {
  border-top-color: var(--color-border);
}

[data-theme="dark"] .daterangepicker .drp-selected {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .daterangepicker .ranges li {
  color: var(--color-text);
}

[data-theme="dark"] .daterangepicker .ranges li:hover {
  background-color: var(--color-surface-3);
}

[data-theme="dark"] .daterangepicker .ranges li.active {
  background-color: var(--color-primary);
  color: var(--color-on-accent);
}

/* ===== CHANNELS PAGE (channels.html) ===== */

/* Channels container */
[data-theme="dark"] .channels-container {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .channels-container h2 {
  color: var(--color-text) !important;
}

[data-theme="dark"] .channels-container .table {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .channels-container .table thead {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .channels-container .table thead th {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .channels-container .table tbody tr {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .channels-container .table tbody td {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .channels-container .table-light {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
}

/* Speaker buttons on channels page */
[data-theme="dark"] .speaker-btn {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .speaker-btn:hover {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .speaker-btn.active {
  color: var(--color-success-text) !important;
}

/* ===== RECORDINGS PAGE (index.html) ===== */

/* Recording Browser Sidebar - flush against left/top/bottom edges in dark
   mode too; only the right border separates it from the recordings area. */
[data-theme="dark"] .sidebar {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  border: none !important;
  border-right: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .sidebar h5 {
  color: var(--color-text) !important;
  border-bottom-color: var(--color-border) !important;
}

[data-theme="dark"] .sidebar .nav-link {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .sidebar .nav-link:hover {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
}

/* Soft tinted "active" state - mirrors the light-mode treatment so the
   selection reads as highlighted without flooding the row with saturated
   primary blue against a dark background. */
[data-theme="dark"] .sidebar .nav-link.selected {
  background-color: var(--color-brand-muted) !important;
  color: var(--color-primary-emphasis) !important;
  font-weight: 500 !important;
  border-left: 3px solid var(--color-primary-text) !important;
  padding-left: calc(0.75rem - 3px) !important;
}

[data-theme="dark"] .nav-link.selected .recording-count {
  background-color: var(--color-brand-muted) !important;
  color: var(--color-primary-emphasis) !important;
}

[data-theme="dark"] .sidebar .bi-chevron-down,
[data-theme="dark"] .sidebar .bi-chevron-right {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .year-item {
  color: var(--color-text) !important;
}

[data-theme="dark"] .day-item {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .channel-item {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .recording-count {
  color: var(--color-text-muted) !important;
  background: var(--color-surface-2) !important;
}

/* Master Playback Panel - colors come from tokens via index.html */
[data-theme="dark"] .btn-player-secondary {
  border-color: var(--color-primary-text) !important;
  color: var(--color-primary-text) !important;
}

[data-theme="dark"] .btn-player-secondary:hover {
  background-color: var(--color-brand-muted) !important;
  border-color: var(--color-primary-emphasis) !important;
  color: var(--color-primary-emphasis) !important;
}

[data-theme="dark"] .btn-player-secondary:active {
  background-color: var(--color-brand-muted) !important;
}

[data-theme="dark"] .btn-player-toggle {
  border-color: var(--color-primary-text) !important;
  color: var(--color-primary-text) !important;
}

[data-theme="dark"] .btn-player-toggle:hover {
  background-color: var(--color-brand-muted) !important;
  border-color: var(--color-primary-emphasis) !important;
  color: var(--color-primary-emphasis) !important;
}

[data-theme="dark"] .btn-player-toggle.active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-accent) !important;
}

/* Context menu (right-click): styles.css uses theme tokens, nothing to override */

[data-theme="dark"] .row-menu-btn {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .row-menu-btn:hover {
  color: var(--color-text);
}

/* table-light override (used by recordings thead and others) */
[data-theme="dark"] .table-light {
  --bs-table-color: var(--color-text) !important;
  --bs-table-bg: var(--color-surface-2) !important;
  --bs-table-border-color: var(--color-border) !important;
  --bs-table-striped-bg: var(--color-surface-2) !important;
  --bs-table-striped-color: var(--color-text) !important;
  --bs-table-hover-bg: var(--color-surface-3) !important;
  --bs-table-hover-color: var(--color-text) !important;
}

/* Recordings Panel and outer containers */
[data-theme="dark"] .recordings-panel {
  background-color: var(--color-bg) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .main-content {
  background-color: var(--color-bg) !important;
}

[data-theme="dark"] .main-content .container-fluid {
  background-color: var(--color-bg) !important;
}

[data-theme="dark"] .main-content .container-fluid > .d-flex {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .recordings-panel h4 {
  color: var(--color-text) !important;
}

/* Recordings Table */
[data-theme="dark"] .recordings-table {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  outline: none !important;
}

[data-theme="dark"] .recordings-table .table {
  border-color: var(--color-border) !important;
  --bs-table-border-color: var(--color-border);
  outline: none !important;
}

[data-theme="dark"] .recordings-table .table > * {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .recordings-table .table {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  --bs-table-border-color: var(--color-border);
  --bs-table-color: var(--color-text);
  --bs-table-bg: var(--color-surface);
}

[data-theme="dark"] .recordings-table thead th {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  border-bottom-color: var(--color-border) !important;
  box-shadow: 0 2px 4px var(--color-shadow) !important;
}

[data-theme="dark"] .recordings-table tbody {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .recordings-table tbody tr {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .recordings-table tbody td {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .recording-row {
  color: var(--color-text) !important;
}

[data-theme="dark"] .recording-row td {
  color: var(--color-text) !important;
}

[data-theme="dark"] .sortable-column:hover {
  background-color: var(--color-brand-muted) !important;
}

[data-theme="dark"] .recording-row:hover {
  background-color: var(--color-brand-subtle) !important;
}

[data-theme="dark"] .recording-row:hover td {
  color: var(--color-text) !important;
}

[data-theme="dark"] .recording-row.selected td {
  background-color: var(--color-row-selected) !important;
  color: var(--color-row-selected-text) !important;
}

[data-theme="dark"] .recording-row.selected:hover td {
  background-color: var(--color-row-selected) !important;
  color: var(--color-row-selected-text) !important;
}

[data-theme="dark"] .waveform {
  background-color: var(--color-surface-2) !important;
}

/* Waveform container in master playback */
[data-theme="dark"] .player-waveform-container {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .waveform-integrated {
  background-color: var(--color-surface-2) !important;
}

/* Player controls text colors */
[data-theme="dark"] .player-time-display {
  color: var(--color-text) !important;
}

[data-theme="dark"] .master-playback h6 {
  color: var(--color-text) !important;
}

/* ===== PAGING BADGE ===== */

[data-theme="dark"] .badge.bg-warning {
  background-color: var(--color-warning) !important;
  color: var(--color-bg) !important;
}

[data-theme="dark"] .tooltip {
  --bs-tooltip-bg: var(--color-surface-3);
  --bs-tooltip-color: var(--color-text);
}

[data-theme="dark"] .tooltip-inner {
  background-color: var(--color-surface-3);
  color: var(--color-text);
}

/* ===== 2FA / TOTP ===== */

/* QR code wrapper needs white background so it's scannable in dark mode */
[data-theme="dark"] .twofa-qr-wrapper {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

/* Manual key input */
[data-theme="dark"] .twofa-manual-key {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Backup codes grid */
[data-theme="dark"] .twofa-backup-grid {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .twofa-backup-code {
  color: var(--color-text) !important;
}

/* 2FA code inputs */
[data-theme="dark"] .twofa-code-input {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* setup_2fa.html - enforced setup page */
[data-theme="dark"] .qr-wrapper {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .manual-key-field {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .backup-grid {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .backup-code-item {
  color: var(--color-text) !important;
}

[data-theme="dark"] .setup-subtitle {
  color: var(--color-text-muted);
}

/* verify_2fa.html - inherits login-card dark styles, plus TOTP-specific */
[data-theme="dark"] .totp-input {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .totp-input::placeholder {
  color: var(--color-text-muted);
}

[data-theme="dark"] .totp-subtitle {
  color: var(--color-text-muted);
}

[data-theme="dark"] .backup-toggle {
  color: var(--color-text-muted);
}

[data-theme="dark"] .backup-toggle:hover {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .backup-input {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .backup-input::placeholder {
  color: var(--color-text-muted);
}

[data-theme="dark"] .back-link a {
  color: var(--color-text-muted);
}

[data-theme="dark"] .back-link a:hover {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .attempts-warning {
  color: var(--color-danger-text);
}

/* Reports page: colors come from tokens (reports.css) */