:root {
  --sx-bg: #0a0f1f;
  --sx-bg-soft: #111827;
  --sx-surface: rgba(17, 24, 39, 0.92);
  --sx-surface-solid: #111827;
  --sx-surface-muted: rgba(255, 255, 255, 0.06);
  --sx-border: rgba(255, 255, 255, 0.12);
  --sx-text: #f8fafc;
  --sx-text-muted: rgba(248, 250, 252, 0.68);
  --sx-heading: #ffffff;
  --sx-header: rgba(10, 15, 31, 0.94);
  --sx-sidebar: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  --sx-input: rgba(255, 255, 255, 0.07);
  --sx-primary: #6c63ff;
  --sx-primary-rgb: 108, 99, 255;
  --sx-secondary: #00d2ff;
  --sx-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] {
  --sx-bg: #f4f7fb;
  --sx-bg-soft: #eef3f9;
  --sx-surface: rgba(255, 255, 255, 0.94);
  --sx-surface-solid: #ffffff;
  --sx-surface-muted: rgba(69, 104, 220, 0.08);
  --sx-border: rgba(15, 23, 42, 0.12);
  --sx-text: #111827;
  --sx-text-muted: #526174;
  --sx-heading: #0f172a;
  --sx-header: rgba(255, 255, 255, 0.94);
  --sx-sidebar: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
  --sx-input: #ffffff;
  --sx-primary: #4568dc;
  --sx-primary-rgb: 69, 104, 220;
  --sx-secondary: #10a7c8;
  --sx-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
}

html[data-theme] body {
  background: var(--sx-bg) !important;
  color: var(--sx-text) !important;
}

html[data-theme] #header,
html[data-theme] header#header {
  background: var(--sx-header) !important;
  border-bottom: 1px solid var(--sx-border) !important;
  box-shadow: var(--sx-shadow) !important;
  color: var(--sx-text) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme] .header-logo h1,
html[data-theme] .header-right,
html[data-theme] .user-name,
html[data-theme] .page-title,
html[data-theme] .content h1,
html[data-theme] .content h2,
html[data-theme] .content h3,
html[data-theme] .content h4,
html[data-theme] .content h5,
html[data-theme] .content h6 {
  color: var(--sx-heading) !important;
}

html[data-theme] .content,
html[data-theme] main,
html[data-theme] .main-content,
html[data-theme] .dashboard-content,
html[data-theme] .admin-content {
  background: var(--sx-bg) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .card,
html[data-theme] .modal-content,
html[data-theme] .dropdown-menu,
html[data-theme] .list-group-item,
html[data-theme] .offcanvas,
html[data-theme] .accordion-item,
html[data-theme] .modern-stats-card,
html[data-theme] .modern-table-card,
html[data-theme] .trial-status-card,
html[data-theme] .profile-card,
html[data-theme] .settings-card,
html[data-theme] .chart-card,
html[data-theme] .stat-card {
  background: var(--sx-surface-solid) !important;
  border-color: var(--sx-border) !important;
  box-shadow: var(--sx-shadow) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info),
html[data-theme] .card-footer,
html[data-theme] .modal-header,
html[data-theme] .modal-footer,
html[data-theme] .accordion-button,
html[data-theme] .table-light,
html[data-theme] .bg-light {
  background: var(--sx-bg-soft) !important;
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .card-title,
html[data-theme] .modal-title,
html[data-theme] .dropdown-header,
html[data-theme] .accordion-button,
html[data-theme] label,
html[data-theme] .form-label,
html[data-theme] .nav-link,
html[data-theme] .breadcrumb-item,
html[data-theme] .breadcrumb-item a {
  color: var(--sx-text) !important;
}

html[data-theme] p,
html[data-theme] small,
html[data-theme] .small,
html[data-theme] .text-muted,
html[data-theme] .form-text,
html[data-theme] .user-role,
html[data-theme] .notification-text,
html[data-theme] .empty-state p,
html[data-theme] .card-subtitle {
  color: var(--sx-text-muted) !important;
}

html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] textarea,
html[data-theme] .input-group-text,
html[data-theme] .select2-selection,
html[data-theme] .custom-select {
  background-color: var(--sx-input) !important;
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
}

html[data-theme="dark"] select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] select.form-select {
  background-color: #1f2535 !important;
  color: var(--sx-heading) !important;
  color-scheme: dark;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  background-color: #1f2535 !important;
  color: var(--sx-heading) !important;
}

html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:hover,
html[data-theme="dark"] select option:focus {
  background-color: var(--sx-primary) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #addQuestionModal select,
html[data-theme="dark"] #addQuestionModal select.form-select,
html[data-theme="dark"] #addQuestionModal select.form-control {
  background-color: #252a3a !important;
  border-color: rgba(var(--sx-primary-rgb), 0.42) !important;
  color: var(--sx-heading) !important;
  color-scheme: dark;
}

html[data-theme="dark"] #addQuestionModal select option {
  background-color: #252a3a !important;
  color: var(--sx-heading) !important;
}

html[data-theme] .form-control::placeholder,
html[data-theme] textarea::placeholder {
  color: var(--sx-text-muted) !important;
  opacity: 1;
}

html[data-theme="dark"] .modal .btn-close,
html[data-theme="dark"] .modal-header .btn-close,
html[data-theme="dark"] .alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(2.4) !important;
  opacity: 0.82 !important;
}

html[data-theme="dark"] .modal .btn-close:hover,
html[data-theme="dark"] .modal-header .btn-close:hover,
html[data-theme="dark"] .alert .btn-close:hover {
  opacity: 1 !important;
}

html[data-theme="dark"] .sidebar-header {
  background:
    radial-gradient(circle at 50% 42%, rgba(108, 99, 255, 0.16), transparent 58%),
    rgba(255, 255, 255, 0.035) !important;
}

html[data-theme="dark"] .sidebar-logo {
  position: relative;
  isolation: isolate;
}

html[data-theme="dark"] .sidebar-logo::before {
  content: "";
  position: absolute;
  inset: 5px 12px;
  z-index: -1;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(108, 99, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sidebar-logo .logo-img,
html[data-theme="dark"] .header-logo img {
  filter: brightness(1.34) contrast(1.18) saturate(1.16) drop-shadow(0 0 10px rgba(108, 99, 255, 0.42)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) !important;
}

html[data-theme="dark"] .sidebar-logo .logo-text {
  color: var(--sx-heading) !important;
  text-shadow: 0 0 10px rgba(108, 99, 255, 0.28) !important;
}

html[data-theme] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sx-text);
  --bs-table-border-color: var(--sx-border);
  color: var(--sx-text) !important;
}

html[data-theme] .table th,
html[data-theme] .table td {
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .table thead th,
html[data-theme] .table tbody tr:hover,
html[data-theme] .table-hover tbody tr:hover,
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--sx-bg-soft) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .dropdown-item {
  color: var(--sx-text) !important;
}

html[data-theme] .dropdown-item:hover,
html[data-theme] .dropdown-item:focus,
html[data-theme] .dropdown-item.active {
  background: rgba(var(--sx-primary-rgb), 0.14) !important;
  color: var(--sx-heading) !important;
}

html[data-theme] .btn-outline-secondary,
html[data-theme] .language-dropdown-toggle {
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
  background: var(--sx-surface) !important;
}

html[data-theme] .btn-outline-secondary:hover,
html[data-theme] .language-dropdown-toggle:hover {
  border-color: var(--sx-primary) !important;
  color: var(--sx-primary) !important;
}

html[data-theme] .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info),
html[data-theme] .badge.bg-light {
  background: var(--sx-bg-soft) !important;
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .sidebar,
html[data-theme] #sidebar {
  background: var(--sx-sidebar) !important;
  border-right: 1px solid var(--sx-border) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .sidebar-header,
html[data-theme] .sidebar-footer {
  background: transparent !important;
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .sidebar a,
html[data-theme] .sidebar .nav-link,
html[data-theme] .sidebar-menu a,
html[data-theme] .sidebar-menu .menu-link,
html[data-theme] .sidebar-heading,
html[data-theme] .sidebar-title {
  color: var(--sx-text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .sidebar-heading,
:root[data-theme="light"] .sidebar-title,
:root[data-theme="light"] .sidebar small {
  color: var(--sx-text-muted) !important;
}

html[data-theme] .sidebar a:hover,
html[data-theme] .sidebar a.active,
html[data-theme] .sidebar .nav-link:hover,
html[data-theme] .sidebar .nav-link.active,
html[data-theme] .sidebar-menu a:hover,
html[data-theme] .sidebar-menu a.active {
  background: rgba(var(--sx-primary-rgb), 0.14) !important;
  color: var(--sx-heading) !important;
}

html[data-theme] .footer {
  background: var(--sx-surface-solid) !important;
  border-top: 1px solid var(--sx-border) !important;
  color: var(--sx-text-muted) !important;
}

html[data-theme] .footer-link {
  color: var(--sx-primary) !important;
}

html[data-theme] .theme-toggle-system {
  min-height: 34px;
  padding: 7px 12px;
  border-color: var(--sx-border);
  background: var(--sx-surface);
  color: var(--sx-text);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

html[data-theme] .theme-toggle-system:hover {
  color: var(--sx-primary);
}

html[data-theme] .bg-primary,
html[data-theme] .bg-success,
html[data-theme] .bg-danger,
html[data-theme] .bg-info,
html[data-theme] .bg-dark,
html[data-theme] .btn-primary,
html[data-theme] .btn-success,
html[data-theme] .btn-danger,
html[data-theme] .btn-info,
html[data-theme] .modern-table-card .card-header,
html[data-theme] .trial-status-card .card-header,
html[data-theme] .stats-card-primary .card-header,
html[data-theme] .stats-card-success .card-header,
html[data-theme] .stats-card-info .card-header,
html[data-theme] .stats-card-warning .card-header,
html[data-theme] .stats-card-purple .card-header,
html[data-theme] .stats-card-teal .card-header,
html[data-theme] .stats-card-orange .card-header,
html[data-theme] .stats-card-red .card-header {
  color: #ffffff !important;
}

html[data-theme] .bg-primary *,
html[data-theme] .bg-success *,
html[data-theme] .bg-danger *,
html[data-theme] .bg-info *,
html[data-theme] .bg-dark *,
html[data-theme] .btn-primary *,
html[data-theme] .btn-success *,
html[data-theme] .btn-danger *,
html[data-theme] .btn-info *,
html[data-theme] .modern-table-card .card-header *,
html[data-theme] .trial-status-card .card-header *,
html[data-theme] .stats-card-primary .card-header *,
html[data-theme] .stats-card-success .card-header *,
html[data-theme] .stats-card-info .card-header *,
html[data-theme] .stats-card-warning .card-header *,
html[data-theme] .stats-card-purple .card-header *,
html[data-theme] .stats-card-teal .card-header *,
html[data-theme] .stats-card-orange .card-header *,
html[data-theme] .stats-card-red .card-header * {
  color: inherit !important;
}

:root[data-theme="light"] .modern-stats-card .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) .stats-icon-wrapper i,
:root[data-theme="light"] .modern-stats-card .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) .stats-icon i,
:root[data-theme="light"] .modern-stats-card .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) i {
  color: var(--sx-heading) !important;
}

:root[data-theme="dark"] .modern-stats-card .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) .stats-icon-wrapper i,
:root[data-theme="dark"] .modern-stats-card .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) .stats-icon i,
:root[data-theme="dark"] .modern-stats-card .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) i {
  color: var(--sx-text) !important;
}

:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) .text-white,
:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) [class*="text-white"],
:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) .text-light,
:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) [class*="text-light"],
:root[data-theme="light"] .modal-content .text-white,
:root[data-theme="light"] .modal-content .text-light,
:root[data-theme="light"] .dropdown-menu .text-white,
:root[data-theme="light"] .dropdown-menu .text-light,
:root[data-theme="light"] .list-group-item .text-white,
:root[data-theme="light"] .list-group-item .text-light,
:root[data-theme="light"] .table .text-white,
:root[data-theme="light"] .table .text-light,
:root[data-theme="light"] .checkout-container .page-title.text-white,
:root[data-theme="light"] body:not(.bg-primary) .text-white:not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) .text-light:not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *) {
  color: var(--sx-text) !important;
}

:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) i.text-white,
:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) span.text-white,
:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) i.text-light,
:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) span.text-light,
:root[data-theme="light"] .modal-content i.text-white,
:root[data-theme="light"] .modal-content i.text-light,
:root[data-theme="light"] .dropdown-menu i.text-white,
:root[data-theme="light"] .dropdown-menu i.text-light,
:root[data-theme="light"] .list-group-item i.text-white,
:root[data-theme="light"] .list-group-item i.text-light,
:root[data-theme="light"] body:not(.bg-primary) i.text-white,
:root[data-theme="light"] body:not(.bg-primary) i.text-light {
  color: var(--sx-text) !important;
}

/* Hardcoded Inline Color Styles Override */
:root[data-theme="light"] body:not(.bg-primary) [style*="color: white"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color:white"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color: #fff"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color:#fff"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color: #ffffff"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color:#ffffff"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color: rgb(255, 255, 255)"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color:rgb(255,255,255)"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color: rgb(248, 250, 252)"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] body:not(.bg-primary) [style*="color:rgb(248,250,252)"] :not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
:root[data-theme="light"] [style*="color: white"],
:root[data-theme="light"] [style*="color:white"],
:root[data-theme="light"] [style*="color: #fff"],
:root[data-theme="light"] [style*="color:#fff"],
:root[data-theme="light"] [style*="color: #ffffff"],
:root[data-theme="light"] [style*="color:#ffffff"],
:root[data-theme="light"] [style*="color: rgb(255, 255, 255)"],
:root[data-theme="light"] [style*="color:rgb(255,255,255)"],
:root[data-theme="light"] [style*="color: rgb(248, 250, 252)"],
:root[data-theme="light"] [style*="color:rgb(248,250,252)"] {
  color: var(--sx-text) !important;
}

:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) i,
:root[data-theme="light"] .modal-content i,
:root[data-theme="light"] .dropdown-menu i {
  color: inherit;
}

:root[data-theme="light"] .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-dark) .text-white-50,
:root[data-theme="light"] .modal-content .text-white-50,
:root[data-theme="light"] .dropdown-menu .text-white-50,
:root[data-theme="light"] .list-group-item .text-white-50 {
  color: var(--sx-text-muted) !important;
}

:root[data-theme="light"] .btn-outline-light {
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
  background-color: var(--sx-surface-solid) !important;
}

:root[data-theme="light"] .btn-outline-light:hover {
  border-color: var(--sx-primary) !important;
  color: var(--sx-primary) !important;
  background-color: rgba(var(--sx-primary-rgb), 0.08) !important;
}

:root[data-theme="light"] .btn-light {
  background-color: var(--sx-bg-soft) !important;
  border: 1px solid var(--sx-border) !important;
  color: var(--sx-text) !important;
}

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

/* Select2 Dark/Light Theme Integration */
html[data-theme] .select2-container--default .select2-selection--single {
  background-color: var(--sx-input) !important;
  border: 1px solid var(--sx-border) !important;
  border-radius: 8px !important;
  height: 42px !important;
  padding: 6px 12px !important;
}

html[data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sx-text) !important;
  line-height: 28px !important;
}

html[data-theme] .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

html[data-theme] .select2-dropdown {
  background-color: var(--sx-surface-solid) !important;
  border: 1px solid var(--sx-border) !important;
  color: var(--sx-text) !important;
  box-shadow: var(--sx-shadow) !important;
}

html[data-theme] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--sx-bg) !important;
  border: 1px solid var(--sx-border) !important;
  color: var(--sx-text) !important;
  border-radius: 6px !important;
}

html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
  background-color: rgba(var(--sx-primary-rgb), 0.16) !important;
  color: var(--sx-heading) !important;
}

html[data-theme] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(var(--sx-primary-rgb), 0.08) !important;
  color: var(--sx-text) !important;
}

html[data-theme] .select2-results__option {
  color: var(--sx-text) !important;
  padding: 8px 12px !important;
}

/* DataTables Theme Integration */
html[data-theme] .dataTables_wrapper {
  color: var(--sx-text) !important;
}

html[data-theme] .dataTables_wrapper .dataTables_length select,
html[data-theme] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--sx-input) !important;
  border: 1px solid var(--sx-border) !important;
  color: var(--sx-text) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
}

html[data-theme] .dataTables_wrapper .dataTables_info {
  color: var(--sx-text-muted) !important;
}

html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--sx-bg-soft) !important;
  border: 1px solid var(--sx-border) !important;
  color: var(--sx-text) !important;
  border-radius: 6px !important;
}

html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(var(--sx-primary-rgb), 0.16) !important;
  border-color: var(--sx-primary) !important;
  color: var(--sx-heading) !important;
}

html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--sx-primary) !important;
  border-color: var(--sx-primary) !important;
  color: #ffffff !important;
}

body.app-public .content,
body.app-public .footer {
  margin-left: 0 !important;
}

body.app-public .footer {
  width: 100% !important;
}

/* ===== FOOTER LAYOUT FIX =====
   Remove flex-column body layout that causes footer to float over content.
   Use simple block layout: body is a block, footer sits naturally at page end.
   Header is 90px but --header-height var is 60px — correct this too. */
body.app-authenticated {
  display: block !important;
  --header-height: 90px;
}

/* Footer: normal block flow, no margin-top:auto tricks needed */
body.app-authenticated .footer {
  display: block;
  margin-top: 0;
  margin-left: var(--sidebar-width);
  width: auto;
  position: static;
}

body.app-authenticated .footer.collapsed,
body.app-authenticated .footer.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

@media (max-width: 768px) {
  body.app-authenticated .footer {
    margin-left: 0 !important;
  }
}

@media (max-width: 576px) {
  html[data-theme] .theme-toggle-system [data-theme-label] {
    display: none;
  }

  html[data-theme] .theme-toggle-system {
    width: 38px;
    padding-inline: 0;
  }
}

/* ==========================================================================
   HIGH-CONTRAST PROTECTED CONTAINERS & ACCENTS SHIELD (LIGHT THEME SUPPORT)
   Prevents white-on-white and light-on-light visibility issues by locking
   nested texts, icons, headings, and links inside colored or dark containers
   to crisp white/light colors under Light Theme.
   ========================================================================== */

/* Overrides for stats-card-light to dynamically support dark theme */
html[data-theme] .stats-card-light {
  background: var(--sx-surface-solid) !important;
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
}

:root[data-theme="light"] .stats-card-light .text-muted {
  color: var(--sx-text-muted) !important;
}

/* 1. Bulletproof White Color Lock inside protected dark/colored containers */
:root[data-theme="light"] .bg-primary .text-white, :root[data-theme="light"] .bg-primary .text-light, :root[data-theme="light"] .bg-primary i, :root[data-theme="light"] .bg-primary span:not(.badge), :root[data-theme="light"] .bg-primary h1, :root[data-theme="light"] .bg-primary h2, :root[data-theme="light"] .bg-primary h3, :root[data-theme="light"] .bg-primary h4, :root[data-theme="light"] .bg-primary h5, :root[data-theme="light"] .bg-primary h6,
:root[data-theme="light"] .bg-success .text-white, :root[data-theme="light"] .bg-success .text-light, :root[data-theme="light"] .bg-success i, :root[data-theme="light"] .bg-success span:not(.badge), :root[data-theme="light"] .bg-success h1, :root[data-theme="light"] .bg-success h2, :root[data-theme="light"] .bg-success h3, :root[data-theme="light"] .bg-success h4, :root[data-theme="light"] .bg-success h5, :root[data-theme="light"] .bg-success h6,
:root[data-theme="light"] .bg-danger .text-white, :root[data-theme="light"] .bg-danger .text-light, :root[data-theme="light"] .bg-danger i, :root[data-theme="light"] .bg-danger span:not(.badge), :root[data-theme="light"] .bg-danger h1, :root[data-theme="light"] .bg-danger h2, :root[data-theme="light"] .bg-danger h3, :root[data-theme="light"] .bg-danger h4, :root[data-theme="light"] .bg-danger h5, :root[data-theme="light"] .bg-danger h6,
:root[data-theme="light"] .bg-warning .text-white, :root[data-theme="light"] .bg-warning .text-light, :root[data-theme="light"] .bg-warning i, :root[data-theme="light"] .bg-warning span:not(.badge), :root[data-theme="light"] .bg-warning h1, :root[data-theme="light"] .bg-warning h2, :root[data-theme="light"] .bg-warning h3, :root[data-theme="light"] .bg-warning h4, :root[data-theme="light"] .bg-warning h5, :root[data-theme="light"] .bg-warning h6,
:root[data-theme="light"] .bg-info .text-white, :root[data-theme="light"] .bg-info .text-light, :root[data-theme="light"] .bg-info i, :root[data-theme="light"] .bg-info span:not(.badge), :root[data-theme="light"] .bg-info h1, :root[data-theme="light"] .bg-info h2, :root[data-theme="light"] .bg-info h3, :root[data-theme="light"] .bg-info h4, :root[data-theme="light"] .bg-info h5, :root[data-theme="light"] .bg-info h6,
:root[data-theme="light"] .bg-dark .text-white, :root[data-theme="light"] .bg-dark .text-light, :root[data-theme="light"] .bg-dark i, :root[data-theme="light"] .bg-dark span:not(.badge), :root[data-theme="light"] .bg-dark h1, :root[data-theme="light"] .bg-dark h2, :root[data-theme="light"] .bg-dark h3, :root[data-theme="light"] .bg-dark h4, :root[data-theme="light"] .bg-dark h5, :root[data-theme="light"] .bg-dark h6,
:root[data-theme="light"] .btn-primary .text-white, :root[data-theme="light"] .btn-primary .text-light, :root[data-theme="light"] .btn-primary i, :root[data-theme="light"] .btn-primary span,
:root[data-theme="light"] .btn-success .text-white, :root[data-theme="light"] .btn-success .text-light, :root[data-theme="light"] .btn-success i, :root[data-theme="light"] .btn-success span,
:root[data-theme="light"] .btn-danger .text-white, :root[data-theme="light"] .btn-danger .text-light, :root[data-theme="light"] .btn-danger i, :root[data-theme="light"] .btn-danger span,
:root[data-theme="light"] .btn-warning .text-white, :root[data-theme="light"] .btn-warning .text-light, :root[data-theme="light"] .btn-warning i, :root[data-theme="light"] .btn-warning span,
:root[data-theme="light"] .btn-info .text-white, :root[data-theme="light"] .btn-info .text-light, :root[data-theme="light"] .btn-info i, :root[data-theme="light"] .btn-info span,
:root[data-theme="light"] .btn-secondary .text-white, :root[data-theme="light"] .btn-secondary .text-light, :root[data-theme="light"] .btn-secondary i, :root[data-theme="light"] .btn-secondary span,
:root[data-theme="light"] .btn-dark .text-white, :root[data-theme="light"] .btn-dark .text-light, :root[data-theme="light"] .btn-dark i, :root[data-theme="light"] .btn-dark span,
:root[data-theme="light"] [class*="gradient-"] .text-white, :root[data-theme="light"] [class*="gradient-"] .text-light, :root[data-theme="light"] [class*="gradient-"] i, :root[data-theme="light"] [class*="gradient-"] span, :root[data-theme="light"] [class*="gradient-"] h1, :root[data-theme="light"] [class*="gradient-"] h2, :root[data-theme="light"] [class*="gradient-"] h3, :root[data-theme="light"] [class*="gradient-"] h4, :root[data-theme="light"] [class*="gradient-"] h5, :root[data-theme="light"] [class*="gradient-"] h6,
:root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) .text-white, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) .text-light, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) i, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) span, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) h1, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) h2, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) h3, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) h4, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) h5, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) h6,
:root[data-theme="light"] .gradient-card-header .text-white, :root[data-theme="light"] .gradient-card-header .text-light, :root[data-theme="light"] .gradient-card-header i, :root[data-theme="light"] .gradient-card-header span, :root[data-theme="light"] .gradient-card-header h1, :root[data-theme="light"] .gradient-card-header h2, :root[data-theme="light"] .gradient-card-header h3, :root[data-theme="light"] .gradient-card-header h4, :root[data-theme="light"] .gradient-card-header h5, :root[data-theme="light"] .gradient-card-header h6,
:root[data-theme="light"] [class*="card-header-"] .text-white, :root[data-theme="light"] [class*="card-header-"] .text-light, :root[data-theme="light"] [class*="card-header-"] i, :root[data-theme="light"] [class*="card-header-"] span, :root[data-theme="light"] [class*="card-header-"] h1, :root[data-theme="light"] [class*="card-header-"] h2, :root[data-theme="light"] [class*="card-header-"] h3, :root[data-theme="light"] [class*="card-header-"] h4, :root[data-theme="light"] [class*="card-header-"] h5, :root[data-theme="light"] [class*="card-header-"] h6,
:root[data-theme="light"] .badge:not(.bg-light):not(.badge-light) .text-white, :root[data-theme="light"] .badge:not(.bg-light):not(.badge-light) .text-light, :root[data-theme="light"] .badge:not(.bg-light):not(.badge-light) i,
:root[data-theme="light"] [class*="badge-"]:not(.badge-light):not(.bg-light) .text-white, :root[data-theme="light"] [class*="badge-"]:not(.badge-light):not(.bg-light) .text-light, :root[data-theme="light"] [class*="badge-"]:not(.badge-light):not(.bg-light) i,
:root[data-theme="light"] .active .text-white, :root[data-theme="light"] .active .text-light, :root[data-theme="light"] .active i, :root[data-theme="light"] .active span,
:root[data-theme="light"] .nav-link.active .text-white, :root[data-theme="light"] .nav-link.active .text-light, :root[data-theme="light"] .nav-link.active i, :root[data-theme="light"] .nav-link.active span,
:root[data-theme="light"] .page-item.active .page-link, :root[data-theme="light"] .page-item.active .page-link i, :root[data-theme="light"] .page-item.active .page-link span,
:root[data-theme="light"] .progress-bar, :root[data-theme="light"] .progress-bar i, :root[data-theme="light"] .progress-bar span,
:root[data-theme="light"] tr[class*="table-"]:not(.table-light) .text-white,
:root[data-theme="light"] tr[class*="table-"]:not(.table-light) .text-light,
:root[data-theme="light"] tr[class*="table-"]:not(.table-light) i,
:root[data-theme="light"] td[class*="table-"]:not(.table-light) .text-white,
:root[data-theme="light"] td[class*="table-"]:not(.table-light) .text-light,
:root[data-theme="light"] td[class*="table-"]:not(.table-light) i,
:root[data-theme="light"] th[class*="table-"]:not(.table-light) .text-white,
:root[data-theme="light"] th[class*="table-"]:not(.table-light) .text-light,
:root[data-theme="light"] th[class*="table-"]:not(.table-light) i {
  color: #ffffff !important;
}

/* 2. Bulletproof White-50 Color Lock inside protected dark/colored containers */
:root[data-theme="light"] .bg-primary .text-white-50, :root[data-theme="light"] .bg-primary [class*="text-white-50"], :root[data-theme="light"] .bg-primary .text-light-50,
:root[data-theme="light"] .bg-success .text-white-50, :root[data-theme="light"] .bg-success [class*="text-white-50"], :root[data-theme="light"] .bg-success .text-light-50,
:root[data-theme="light"] .bg-danger .text-white-50, :root[data-theme="light"] .bg-danger [class*="text-white-50"], :root[data-theme="light"] .bg-danger .text-light-50,
:root[data-theme="light"] .bg-warning .text-white-50, :root[data-theme="light"] .bg-warning [class*="text-white-50"], :root[data-theme="light"] .bg-warning .text-light-50,
:root[data-theme="light"] .bg-info .text-white-50, :root[data-theme="light"] .bg-info [class*="text-white-50"], :root[data-theme="light"] .bg-info .text-light-50,
:root[data-theme="light"] .bg-dark .text-white-50, :root[data-theme="light"] .bg-dark [class*="text-white-50"], :root[data-theme="light"] .bg-dark .text-light-50,
:root[data-theme="light"] .btn-primary .text-white-50, :root[data-theme="light"] .btn-primary [class*="text-white-50"],
:root[data-theme="light"] .btn-success .text-white-50, :root[data-theme="light"] .btn-success [class*="text-white-50"],
:root[data-theme="light"] .btn-danger .text-white-50, :root[data-theme="light"] .btn-danger [class*="text-white-50"],
:root[data-theme="light"] .btn-warning .text-white-50, :root[data-theme="light"] .btn-warning [class*="text-white-50"],
:root[data-theme="light"] .btn-info .text-white-50, :root[data-theme="light"] .btn-info [class*="text-white-50"],
:root[data-theme="light"] .btn-secondary .text-white-50, :root[data-theme="light"] .btn-secondary [class*="text-white-50"],
:root[data-theme="light"] .btn-dark .text-white-50, :root[data-theme="light"] .btn-dark [class*="text-white-50"],
:root[data-theme="light"] [class*="gradient-"] .text-white-50, :root[data-theme="light"] [class*="gradient-"] [class*="text-white-50"],
:root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) .text-white-50, :root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) [class*="text-white-50"],
:root[data-theme="light"] .gradient-card-header .text-white-50, :root[data-theme="light"] .gradient-card-header [class*="text-white-50"],
:root[data-theme="light"] [class*="card-header-"] .text-white-50, :root[data-theme="light"] [class*="card-header-"] [class*="text-white-50"],
:root[data-theme="light"] .badge:not(.bg-light):not(.badge-light) .text-white-50, :root[data-theme="light"] .badge:not(.bg-light):not(.badge-light) [class*="text-white-50"],
:root[data-theme="light"] [class*="badge-"]:not(.badge-light):not(.bg-light) .text-white-50, :root[data-theme="light"] [class*="badge-"]:not(.badge-light):not(.bg-light) [class*="text-white-50"],
:root[data-theme="light"] .active .text-white-50, :root[data-theme="light"] .active [class*="text-white-50"],
:root[data-theme="light"] .nav-link.active .text-white-50, :root[data-theme="light"] .nav-link.active [class*="text-white-50"],
:root[data-theme="light"] .page-item.active .page-link .text-white-50,
:root[data-theme="light"] .progress-bar .text-white-50 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 3. Bulletproof Inline White Style Lock inside protected dark/colored containers */
:root[data-theme="light"] .bg-primary [style*="color"],
:root[data-theme="light"] .bg-success [style*="color"],
:root[data-theme="light"] .bg-danger [style*="color"],
:root[data-theme="light"] .bg-warning [style*="color"],
:root[data-theme="light"] .bg-info [style*="color"],
:root[data-theme="light"] .bg-dark [style*="color"],
:root[data-theme="light"] .btn-primary [style*="color"],
:root[data-theme="light"] .btn-success [style*="color"],
:root[data-theme="light"] .btn-danger [style*="color"],
:root[data-theme="light"] .btn-warning [style*="color"],
:root[data-theme="light"] .btn-info [style*="color"],
:root[data-theme="light"] .btn-secondary [style*="color"],
:root[data-theme="light"] .btn-dark [style*="color"],
:root[data-theme="light"] [class*="gradient-"] [style*="color"],
:root[data-theme="light"] [class*="stats-card-"]:not(.stats-card-light) [style*="color"],
:root[data-theme="light"] .gradient-card-header [style*="color"],
:root[data-theme="light"] [class*="card-header-"] [style*="color"],
:root[data-theme="light"] .active [style*="color"],
:root[data-theme="light"] .nav-link.active [style*="color"],
:root[data-theme="light"] .page-item.active .page-link [style*="color"],
:root[data-theme="light"] .progress-bar [style*="color"] {
  color: #ffffff !important;
}

/* ==========================================================================
   DARK THEME RESILIENCE & HARDCODED LIGHT PANEL CONVERTER (DARK THEME SUPPORT)
   Converts hardcoded light surfaces, options, lists, tabs, and form preview
   elements to beautiful dark surfaces when data-theme="dark" is active.
   ========================================================================== */

/* 1. Global Utility & Inline Style Overrides under Dark Theme */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] [class*="bg-white"],
html[data-theme="dark"] [class*="bg-light"] {
  background-color: var(--sx-surface-solid) !important;
  color: var(--sx-text) !important;
}

html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background:rgb(255,255,255)"],
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background-color:rgb(255,255,255)"],
html[data-theme="dark"] [style*="background: linear-gradient(145deg, #ffffff"],
html[data-theme="dark"] [style*="background: linear-gradient(145deg, #fff"] {
  background: var(--sx-surface-solid) !important;
  background-color: var(--sx-surface-solid) !important;
  color: var(--sx-text) !important;
}

/* Prevent dark hardcoded texts from becoming invisible on dark background */
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: #2c3e50"],
html[data-theme="dark"] [style*="color:#2c3e50"],
html[data-theme="dark"] [style*="color: #495057"],
html[data-theme="dark"] [style*="color:#495057"] {
  color: var(--sx-text) !important;
}

/* 2. Navigation Tabs (Form Edit & Creation Tabs) */
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  background-color: var(--sx-surface-solid) !important;
  color: var(--sx-primary) !important;
  border-color: var(--sx-border) var(--sx-border) var(--sx-surface-solid) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--sx-text-muted) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--sx-text) !important;
  border-color: transparent !important;
}

/* 3. Form Settings Cards & Option Blocks */
html[data-theme="dark"] .setting-item,
html[data-theme="dark"] .radio-option,
html[data-theme="dark"] .form-basic-info,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] #negative-reasons-settings {
  background-color: var(--sx-bg-soft) !important;
  background: var(--sx-bg-soft) !important;
  border-color: var(--sx-border) !important;
  color: var(--sx-text) !important;
}

html[data-theme="dark"] .setting-item:hover,
html[data-theme="dark"] .radio-option:hover {
  background-color: rgba(var(--sx-primary-rgb), 0.08) !important;
  border-color: var(--sx-primary) !important;
}

html[data-theme="dark"] .radio-option.selected {
  background-color: rgba(var(--sx-primary-rgb), 0.15) !important;
  border-color: var(--sx-primary) !important;
}

html[data-theme="dark"] .setting-title,
html[data-theme="dark"] .radio-group-title,
html[data-theme="dark"] .radio-option .form-check-label,
html[data-theme="dark"] .modern-label {
  color: var(--sx-heading) !important;
}

html[data-theme="dark"] .setting-description,
html[data-theme="dark"] .radio-group-description,
html[data-theme="dark"] .radio-option .radio-description {
  color: var(--sx-text-muted) !important;
}

/* 4. Form Preview & Survey Layouts */
html[data-theme="dark"] .preview-container {
  background-color: var(--sx-bg) !important;
}

html[data-theme="dark"] .preview-form-container {
  background-color: var(--sx-surface-solid) !important;
  border-color: var(--sx-border) !important;
}

html[data-theme="dark"] .form-title {
  color: var(--sx-heading) !important;
}

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

html[data-theme="dark"] .question-card {
  background-color: var(--sx-surface-solid) !important;
  border-color: var(--sx-border) !important;
  box-shadow: var(--sx-shadow) !important;
}

html[data-theme="dark"] .question-header {
  background-color: var(--sx-bg-soft) !important;
  border-bottom: 1px solid var(--sx-border) !important;
}

html[data-theme="dark"] .question-body {
  background-color: var(--sx-surface-solid) !important;
}

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

/* Survey Form Option Card Overrides (.form-check) */
html[data-theme="dark"] .options-list .form-check {
  background: var(--sx-bg-soft) !important;
  border-color: var(--sx-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .options-list .form-check:hover {
  background: rgba(var(--sx-primary-rgb), 0.08) !important;
  border-color: var(--sx-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .options-list .form-check:has(.form-check-input:checked),
html[data-theme="dark"] .options-list .form-check.selected {
  background: rgba(var(--sx-primary-rgb), 0.15) !important;
  border-color: var(--sx-primary) !important;
  box-shadow: 0 0 15px rgba(var(--sx-primary-rgb), 0.25) !important;
}

html[data-theme="dark"] .options-list .form-check-label {
  color: var(--sx-text) !important;
}

html[data-theme="dark"] .options-list .form-check:has(.form-check-input:checked) .form-check-label,
html[data-theme="dark"] .options-list .form-check.selected .form-check-label {
  color: var(--sx-primary) !important;
}

html[data-theme="dark"] .sub-options {
  background: var(--sx-surface-solid) !important;
  border-top-color: var(--sx-border) !important;
}

html[data-theme="dark"] .rating-item:not([data-value]) {
  background-color: var(--sx-bg-soft) !important;
  color: var(--sx-text) !important;
}

/* 5. User Management Rows & Actions Bar */
html[data-theme="dark"] .user-actions-bar {
  background-color: var(--sx-surface-solid) !important;
  background: var(--sx-surface-solid) !important;
  border-color: var(--sx-border) !important;
}

html[data-theme="dark"] .user-card-expired .card {
  background-color: rgba(242, 223, 181, 0.08) !important;
  background: rgba(242, 223, 181, 0.08) !important;
  border-color: rgba(242, 223, 181, 0.25) !important;
}

html[data-theme="dark"] .user-card-expired .info-value,
html[data-theme="dark"] .user-card-expired .user-id {
  color: #f2dfb5 !important;
}

/* ==========================================================================
   ADDITIONAL PREMIUM TABS, WIZARD & REPORTS OVERRIDES
   ========================================================================== */

/* Active Tab & Settings Fixes */
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"] button.nav-link.active,
html[data-theme="dark"] a.nav-link.active,
html[data-theme="dark"] .card-header-tabs .nav-link.active {
    background-color: var(--sx-surface-solid) !important;
    background: var(--sx-surface-solid) !important;
    color: var(--sx-primary) !important;
    border-color: var(--sx-border) var(--sx-border) var(--sx-surface-solid) !important;
}

/* Wizard Creation Form Overrides (create_wizard.php) */
html[data-theme="dark"] .wizard-content {
    background: var(--sx-surface-solid) !important;
    box-shadow: var(--sx-shadow) !important;
}
html[data-theme="dark"] .wizard-panel-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme="dark"] .wizard-panel-header h2 {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .wizard-panel-header p {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .wizard-form-group label {
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .toggle-card {
    background: var(--sx-bg-soft) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme="dark"] .toggle-card.active {
    background: rgba(var(--sx-primary-rgb), 0.15) !important;
    border-color: var(--sx-primary) !important;
}
html[data-theme="dark"] .toggle-card-content h4 {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .toggle-card-content p {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .toggle-status-label {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .radio-group {
    background: var(--sx-bg-soft) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme="dark"] .radio-group-title {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .radio-group-description {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .step-circle {
    background: var(--sx-bg-soft) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .wizard-step.active .step-circle {
    background: var(--sx-primary) !important;
    border-color: var(--sx-primary) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .wizard-step.completed .step-circle {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .step-label {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .wizard-step.active .step-label {
    color: var(--sx-primary) !important;
}
html[data-theme="dark"] .wizard-step.completed .step-label {
    color: #22c55e !important;
}
html[data-theme="dark"] .wizard-progress::before {
    background: var(--sx-border) !important;
}
html[data-theme="dark"] .advanced-mode-link {
    border-top-color: var(--sx-border) !important;
}
html[data-theme="dark"] .advanced-mode-link a,
html[data-theme="dark"] .skip-option a {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .btn-wizard-prev {
    background: var(--sx-bg-soft) !important;
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .btn-wizard-prev:hover {
    background: var(--sx-border) !important;
    color: var(--sx-heading) !important;
}

/* Reports Dashboard Overrides (reports/index.php) */
html[data-theme="dark"] .page-header {
    background: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
    box-shadow: var(--sx-shadow) !important;
}
html[data-theme="dark"] .page-title {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .stats-card {
    background: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
    box-shadow: var(--sx-shadow) !important;
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .stats-card h6 {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .stats-number {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .table-card {
    background: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme="dark"] .table th {
    background-color: var(--sx-bg-soft) !important;
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .table td {
    border-color: var(--sx-border) !important;
    color: var(--sx-text) !important;
}

html[data-theme="dark"] .visitor-log-table-wrapper {
    background: var(--sx-surface-solid) !important;
}

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

html[data-theme="dark"] .visitor-log-table tbody tr,
html[data-theme="dark"] .visitor-log-table tbody td {
    background: var(--sx-surface-solid) !important;
    color: var(--sx-text) !important;
    border-color: var(--sx-border) !important;
}

html[data-theme="dark"] .visitor-log-table .text-secondary,
html[data-theme="dark"] .visitor-log-table .text-muted,
html[data-theme="dark"] .visitor-log-table .small {
    color: var(--sx-text-muted) !important;
}

html[data-theme="dark"] .visitor-log-table .text-primary,
html[data-theme="dark"] .visitor-log-table td::before {
    color: var(--sx-primary) !important;
}

html[data-theme="dark"] .visitor-log-table .badge.bg-light {
    background: var(--sx-bg-soft) !important;
    color: var(--sx-heading) !important;
    border: 1px solid var(--sx-border) !important;
}

@media (max-width: 768px) {
    html[data-theme="dark"] .visitor-log-table tbody tr {
        background: var(--sx-surface-solid) !important;
        border: 1px solid var(--sx-border) !important;
        box-shadow: var(--sx-shadow) !important;
    }

    html[data-theme="dark"] .visitor-log-table tbody td {
        border-bottom-color: var(--sx-border) !important;
    }

    html[data-theme="dark"] .visitor-log-table tbody td:last-child {
        border-bottom: 0 !important;
    }
}
html[data-theme="dark"] .form-card {
    background: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme="dark"] .form-card-title {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .form-card-info-item {
    border-bottom-color: var(--sx-border) !important;
}
html[data-theme="dark"] .form-card-info-label {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .form-card-info-value {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .form-card-actions {
    border-top-color: var(--sx-border) !important;
}

/* Dashboard mobile/tablet cards */
html[data-theme="dark"] .modern-table-card .d-xl-none .card {
    background: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text) !important;
}

html[data-theme="dark"] .modern-table-card .d-xl-none .card .card-title,
html[data-theme="dark"] .modern-table-card .d-xl-none .card .card-title a,
html[data-theme="dark"] .modern-table-card .d-xl-none .card a.text-dark {
    color: var(--sx-heading) !important;
}

html[data-theme="dark"] .modern-table-card .d-xl-none .card .text-end {
    color: var(--sx-heading) !important;
}

html[data-theme="dark"] .report-search input.form-control {
    background-color: var(--sx-input) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .report-search .input-group-text {
    background-color: var(--sx-bg-soft) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .report-search select.form-select {
    background-color: var(--sx-input) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text) !important;
}

/* Light theme safety protection for reports print/export buttons */
html[data-theme="light"] .btn-outline-light,
html[data-theme="light"] a.btn-outline-light {
    border-color: var(--sx-border) !important;
    color: var(--sx-text) !important;
    background-color: var(--sx-bg-soft) !important;
}
html[data-theme="light"] .btn-outline-light:hover,
html[data-theme="light"] a.btn-outline-light:hover {
    border-color: var(--sx-primary) !important;
    color: var(--sx-primary) !important;
    background-color: rgba(var(--sx-primary-rgb), 0.08) !important;
}

/* btn-light overrides under Dark Theme */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] a.btn-light {
    background-color: var(--sx-bg-soft) !important;
    border: 1px solid var(--sx-border) !important;
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] a.btn-light:hover {
    background-color: var(--sx-border) !important;
    color: var(--sx-heading) !important;
}

/* Premium Bootstrap Pagination Integration for both Light and Dark Themes */
html[data-theme] .pagination .page-link {
    background-color: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text) !important;
}
html[data-theme] .pagination .page-link:hover {
    background-color: var(--sx-bg-soft) !important;
    color: var(--sx-primary) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme] .pagination .page-item.active .page-link {
    background-color: var(--sx-primary) !important;
    border-color: var(--sx-primary) !important;
    color: #ffffff !important;
}
html[data-theme] .pagination .page-item.disabled .page-link {
    background-color: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text-muted) !important;
    opacity: 0.6;
}

/* Form List View Overrides (forms/list.php) */
html[data-theme="dark"] .mobile-form-title a,
html[data-theme="dark"] .mobile-form-title-link a {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .mobile-filters {
    background: var(--sx-bg-soft) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme="dark"] .mobile-filters .card-body {
    background: var(--sx-surface-solid) !important;
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .mobile-form-actions {
    border-top-color: var(--sx-border) !important;
}
html[data-theme="dark"] .mobile-form-card .card {
    background-color: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
}
html[data-theme="dark"] .mobile-form-info small {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .mobile-separator {
    background-color: var(--sx-border) !important;
}

/* ==========================================================================
   LIGHT MODE ACCESSIBILITY & VISIBILITY SAFETY SHIELD
   ========================================================================== */

/* 1. Sidebar Navigation - Collapsible Menu Links and Icons Visibility */
html[data-theme="light"] .sidebar a,
html[data-theme="light"] .sidebar span,
html[data-theme="light"] .sidebar-menu a,
html[data-theme="light"] .sidebar-menu span,
html[data-theme="light"] .collapsible-menu a,
html[data-theme="light"] .collapsible-menu span,
html[data-theme="light"] .sidebar-heading,
html[data-theme="light"] .sidebar-title {
    color: var(--sx-text) !important;
    opacity: 1 !important;
}

html[data-theme="light"] .sidebar a i,
html[data-theme="light"] .sidebar-menu a i,
html[data-theme="light"] .collapsible-menu a i,
html[data-theme="light"] .collapsible-heading i {
    color: var(--sx-text-muted) !important;
    opacity: 1 !important;
}

html[data-theme="light"] .sidebar a.active,
html[data-theme="light"] .sidebar a.active i,
html[data-theme="light"] .sidebar a.active span,
html[data-theme="light"] .collapsible-menu a.active,
html[data-theme="light"] .collapsible-menu a.active i,
html[data-theme="light"] .collapsible-menu a.active span {
    color: var(--sx-primary) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* 2. Active Question Card Overrides (un-locking white on white inside cards) */
html[data-theme="light"] .card.active i:not(.text-white):not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
html[data-theme="light"] .question-card.active i:not(.text-white):not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
html[data-theme="light"] .card.active span:not(.text-white):not(.badge):not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *),
html[data-theme="light"] .question-card.active span:not(.text-white):not(.badge):not(.btn-primary *):not(.btn-success *):not(.btn-danger *):not(.btn-info *) {
    color: inherit !important;
}

html[data-theme="light"] .question-card.active .handle i {
    color: var(--sx-text-muted) !important;
}

/* 3. NPS Extremity Labels Legibility */
html[data-theme="light"] .nps-labels-inline,
html[data-theme="light"] .nps-labels-inline span,
html[data-theme="light"] .question-card.active .nps-labels-inline span {
    color: var(--sx-text-muted) !important;
}

/* 4. outline Buttons Accent Color Lock */
html[data-theme="light"] .btn-outline-primary i {
    color: var(--sx-primary) !important;
}
html[data-theme="light"] .btn-outline-primary:hover i {
    color: #ffffff !important;
}
html[data-theme="light"] .btn-outline-danger i {
    color: #ef4444 !important;
}
html[data-theme="light"] .btn-outline-danger:hover i {
    color: #ffffff !important;
}
html[data-theme="light"] .btn-outline-success i {
    color: #22c55e !important;
}
html[data-theme="light"] .btn-outline-success:hover i {
    color: #ffffff !important;
}
html[data-theme="light"] .btn-outline-info i {
    color: #0ea5e9 !important;
}
html[data-theme="light"] .btn-outline-info:hover i {
    color: #ffffff !important;
}
html[data-theme="light"] .btn-outline-warning i {
    color: #f59e0b !important;
}
html[data-theme="light"] .btn-outline-warning:hover i {
    color: #ffffff !important;
}
html[data-theme="light"] .btn-outline-secondary i {
    color: var(--sx-text-muted) !important;
}
html[data-theme="light"] .btn-outline-secondary:hover i {
    color: var(--sx-text) !important;
}

/* Table action buttons: override broad table icon safety rules. */
html[data-theme="light"] .table .btn-outline-primary,
html[data-theme="light"] .table-hover .btn-outline-primary,
html[data-theme="light"] #formsTable .btn-outline-primary {
    color: var(--sx-primary) !important;
    border-color: var(--sx-primary) !important;
}
html[data-theme="light"] .table .btn-outline-primary i,
html[data-theme="light"] .table-hover .btn-outline-primary i,
html[data-theme="light"] #formsTable .btn-outline-primary i {
    color: var(--sx-primary) !important;
}
html[data-theme="light"] .table .btn-outline-info,
html[data-theme="light"] .table-hover .btn-outline-info,
html[data-theme="light"] #formsTable .btn-outline-info {
    color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}
html[data-theme="light"] .table .btn-outline-info i,
html[data-theme="light"] .table-hover .btn-outline-info i,
html[data-theme="light"] #formsTable .btn-outline-info i {
    color: #0ea5e9 !important;
}
html[data-theme="light"] .table .btn-outline-success,
html[data-theme="light"] .table-hover .btn-outline-success,
html[data-theme="light"] #formsTable .btn-outline-success {
    color: #16a34a !important;
    border-color: #16a34a !important;
}
html[data-theme="light"] .table .btn-outline-success i,
html[data-theme="light"] .table-hover .btn-outline-success i,
html[data-theme="light"] #formsTable .btn-outline-success i {
    color: #16a34a !important;
}
html[data-theme="light"] .table .btn-outline-warning,
html[data-theme="light"] .table-hover .btn-outline-warning,
html[data-theme="light"] #formsTable .btn-outline-warning {
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}
html[data-theme="light"] .table .btn-outline-warning i,
html[data-theme="light"] .table-hover .btn-outline-warning i,
html[data-theme="light"] #formsTable .btn-outline-warning i {
    color: #f59e0b !important;
}
html[data-theme="light"] .table .btn-outline-danger,
html[data-theme="light"] .table-hover .btn-outline-danger,
html[data-theme="light"] #formsTable .btn-outline-danger {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}
html[data-theme="light"] .table .btn-outline-danger i,
html[data-theme="light"] .table-hover .btn-outline-danger i,
html[data-theme="light"] #formsTable .btn-outline-danger i {
    color: #ef4444 !important;
}
html[data-theme="light"] .table .btn-outline-primary:hover,
html[data-theme="light"] .table .btn-outline-info:hover,
html[data-theme="light"] .table .btn-outline-success:hover,
html[data-theme="light"] .table .btn-outline-warning:hover,
html[data-theme="light"] .table .btn-outline-danger:hover,
html[data-theme="light"] .table-hover .btn-outline-primary:hover,
html[data-theme="light"] .table-hover .btn-outline-info:hover,
html[data-theme="light"] .table-hover .btn-outline-success:hover,
html[data-theme="light"] .table-hover .btn-outline-warning:hover,
html[data-theme="light"] .table-hover .btn-outline-danger:hover,
html[data-theme="light"] #formsTable .btn[class*="btn-outline-"]:hover,
html[data-theme="light"] #formsTable .btn[class*="btn-outline-"]:hover i {
    color: #ffffff !important;
}

/* 5. Form Detail Tabs Recovery (un-locking white on white active tabs) */
html[data-theme="light"] .nav-tabs .nav-link {
    color: var(--sx-text-muted) !important;
}
html[data-theme="light"] .nav-tabs .nav-link i {
    color: var(--sx-text-muted) !important;
}
html[data-theme="light"] .nav-tabs .nav-link.active {
    color: var(--sx-primary) !important;
    background-color: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) var(--sx-border) var(--sx-surface-solid) !important;
}
html[data-theme="light"] .nav-tabs .nav-link.active i {
    color: var(--sx-primary) !important;
}

/* Dashboard light-mode recovery: keep gradient headers and readable bodies. */
html[data-theme] .modern-stats-card.stats-card-primary .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
html[data-theme] .modern-stats-card.stats-card-success .card-header {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}
html[data-theme] .modern-stats-card.stats-card-warning .card-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}
html[data-theme] .modern-stats-card.stats-card-info .card-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}
html[data-theme] .modern-stats-card.stats-card-purple .card-header {
    background: linear-gradient(135deg, #9D50BB 0%, #6E48AA 100%) !important;
}
html[data-theme] .modern-stats-card.stats-card-teal .card-header {
    background: linear-gradient(135deg, #00cdac 0%, #8ddad5 100%) !important;
}
html[data-theme] .modern-stats-card.stats-card-orange .card-header {
    background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%) !important;
}
html[data-theme] .modern-stats-card.stats-card-red .card-header {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
}
html[data-theme] .modern-stats-card .card-header,
html[data-theme] .modern-stats-card .card-header * {
    color: #ffffff !important;
}
html[data-theme] .modern-stats-card .stats-icon-wrapper {
    background: rgba(255, 255, 255, 0.2) !important;
}
html[data-theme] .modern-stats-card .stats-icon-wrapper i {
    color: #ffffff !important;
}
html[data-theme="light"] .modern-stats-card .card-body,
html[data-theme="light"] .modern-stats-card .card-title,
html[data-theme="light"] .modern-stats-card .stats-number {
    color: var(--sx-text) !important;
}
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body h1,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body h2,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body h3,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body h4,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body h5,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body h6,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body span:not(.badge),
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body p {
    color: var(--sx-text) !important;
}
html[data-theme="light"] .modern-stats-card .text-muted,
html[data-theme="light"] .modern-stats-card small,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body .text-muted,
html[data-theme="light"] .modern-stats-card[class*="stats-card-"] .card-body small {
    color: var(--sx-text-muted) !important;
}

html[data-theme] .modern-table-card .card-header.card-header-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}
html[data-theme] .modern-table-card .card-header.card-header-info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}
html[data-theme] .modern-table-card .card-header.card-header-danger {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
}
html[data-theme] body .content .card.modern-table-card.modern-table-card > .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.card-header-warning):not(.card-header-info):not(.card-header-danger) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
html[data-theme] body .content .card.modern-table-card.modern-table-card > .card-header.card-header-warning:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
html[data-theme] body .content .card.modern-table-card.modern-table-card > .card-header.card-header-info:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
html[data-theme] body .content .card.modern-table-card.modern-table-card > .card-header.card-header-danger:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
html[data-theme] .modern-table-card .card-header,
html[data-theme] .modern-table-card .card-header h1,
html[data-theme] .modern-table-card .card-header h2,
html[data-theme] .modern-table-card .card-header h3,
html[data-theme] .modern-table-card .card-header h4,
html[data-theme] .modern-table-card .card-header h5,
html[data-theme] .modern-table-card .card-header h6,
html[data-theme] .modern-table-card .card-header span:not(.badge),
html[data-theme] .modern-table-card .card-header i {
    color: #ffffff !important;
}

/* Sidebar light-mode recovery for headings, nested items and icons. */
html[data-theme="light"] .sidebar,
html[data-theme="light"] #sidebar {
    background: var(--sx-sidebar) !important;
    color: var(--sx-text) !important;
}
html[data-theme="light"] .sidebar-menu a:not(.active),
html[data-theme="light"] .collapsible-menu a:not(.active) {
    color: #1f2937 !important;
    opacity: 1 !important;
}
html[data-theme="light"] .sidebar-menu a:not(.active) span,
html[data-theme="light"] .collapsible-menu a:not(.active) span,
html[data-theme="light"] .sidebar-heading span,
html[data-theme="light"] .sidebar-title {
    color: inherit !important;
    opacity: 1 !important;
}
html[data-theme="light"] .sidebar-menu a:not(.active) i,
html[data-theme="light"] .collapsible-menu a:not(.active) i,
html[data-theme="light"] .sidebar-heading .toggle-icon {
    color: #526174 !important;
    opacity: 1 !important;
}
html[data-theme="light"] .sidebar-heading {
    color: #526174 !important;
    opacity: 1 !important;
}
html[data-theme="light"] .sidebar-heading.active,
html[data-theme="light"] .sidebar-heading.active span,
html[data-theme="light"] .sidebar-heading.collapsible-heading,
html[data-theme="light"] .sidebar-heading.collapsible-heading span,
html[data-theme="light"] .sidebar-heading.collapsible-heading .toggle-icon {
    color: #526174 !important;
    opacity: 1 !important;
}
html[data-theme="light"] .collapsible-menu {
    background-color: rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .collapsible-heading:hover,
html[data-theme="light"] .sidebar-menu a:hover,
html[data-theme="light"] .collapsible-menu a:hover {
    background-color: rgba(var(--sx-primary-rgb), 0.1) !important;
    color: var(--sx-primary) !important;
}
html[data-theme="light"] .sidebar-menu a.active,
html[data-theme="light"] .sidebar-menu a.active span,
html[data-theme="light"] .sidebar-menu a.active i,
html[data-theme="light"] .collapsible-menu a.active,
html[data-theme="light"] .collapsible-menu a.active span,
html[data-theme="light"] .collapsible-menu a.active i {
    color: var(--sx-primary) !important;
    opacity: 1 !important;
}

/* Explicit filters bar button icon overrides in Light Mode */
html[data-theme="light"] .desktop-filters .btn-outline-secondary i,
html[data-theme="light"] .mobile-filters .btn-outline-secondary i {
    color: var(--sx-text-muted) !important;
    transition: color 0.15s ease-in-out !important;
}
html[data-theme="light"] .desktop-filters .btn-outline-secondary:hover i,
html[data-theme="light"] .mobile-filters .btn-outline-secondary:hover i {
    color: var(--sx-primary) !important;
}
html[data-theme="light"] .desktop-filters .btn-outline-danger i,
html[data-theme="light"] .mobile-filters .btn-outline-danger i {
    color: #ef4444 !important;
    transition: color 0.15s ease-in-out !important;
}
html[data-theme="light"] .desktop-filters .btn-outline-danger:hover i,
html[data-theme="light"] .mobile-filters .btn-outline-danger:hover i {
    color: #ffffff !important;
}


/* Emoji Results Dark Mode Fix */
html[data-theme="dark"] .emoji-results-container {
    background-color: var(--sx-surface-solid) !important;
}
html[data-theme="dark"] .emoji-result-item {
    background-color: var(--sx-bg-soft) !important;
    border-color: var(--sx-border) !important;
    color: var(--sx-text) !important;
}
html[data-theme="dark"] .emoji-result-item:hover {
    background-color: var(--sx-surface-muted) !important;
}

/* Bildirim Menüsü Dark Mode Düzeltmeleri */
html[data-theme="dark"] .notification-title {
    color: var(--sx-heading) !important;
}
html[data-theme="dark"] .notification-text {
    color: var(--sx-text-muted) !important;
}
html[data-theme="dark"] .notification-time {
    color: rgba(255, 255, 255, 0.4) !important;
}
html[data-theme="dark"] .notification-dropdown-menu .dropdown-item {
    border-bottom-color: var(--sx-border) !important;
    background-color: var(--sx-surface) !important;
}
html[data-theme="dark"] .notification-dropdown-menu .dropdown-item:hover {
    background-color: var(--sx-surface-muted) !important;
}
html[data-theme="dark"] .notification-dropdown-menu .dropdown-item.unread {
    background-color: rgba(108, 99, 255, 0.1) !important;
    border-left-color: var(--sx-primary) !important;
}
html[data-theme="dark"] .notification-dropdown-menu .dropdown-item.unread:hover {
    background-color: rgba(108, 99, 255, 0.15) !important;
}
html[data-theme="dark"] .notification-dropdown-menu .dropdown-item.unread .notification-title {
    color: #a5a0ff !important;
}
html[data-theme="dark"] .notification-dropdown-menu .dropdown-item.no-notifications {
    color: var(--sx-text-muted) !important;
}

/* Tüm Katılımlar (Card Header bg-info) Dark Mode Düzeltmesi */
html[data-theme="dark"] .card-header.bg-info {
    background-color: var(--sx-surface-solid) !important;
    color: var(--sx-heading) !important;
    border-bottom: 1px solid var(--sx-border) !important;
}

/* Form Görünümü Dark Mode ve Mobil Düzeltmeleri */
html[data-theme="dark"] .form-check {
    background: var(--sx-surface-solid) !important;
    border-color: var(--sx-border) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="dark"] .form-check:hover {
    background: var(--sx-surface-muted) !important;
    border-color: var(--sx-primary) !important;
}
html[data-theme="dark"] .form-check:nth-child(odd):hover,
html[data-theme="dark"] .form-check:nth-child(even):hover {
    background: var(--sx-surface-muted) !important;
}
html[data-theme="dark"] .form-check.selected {
    background: rgba(108, 99, 255, 0.15) !important;
    border-color: var(--sx-primary) !important;
    box-shadow: 0 0 15px rgba(108, 99, 255, 0.3) !important;
}

/* Mobil header üst üste binme düzeltmesi */
@media (max-width: 768px) {
    .preview-container {
        padding-top: 130px !important;
    }
}

/* Emoji Seçenekleri Dark Mode Düzeltmesi (Masaüstünde de mobil gibi şeffaf/koyu kutular) */
html[data-theme="dark"] .memnuniyet label {
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .memnuniyet label:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Seçili olan emoji (Nötr vb.) beyaz kalsın */
html[data-theme="dark"] .memnuniyet label:has(input[type="radio"]:checked) {
    background: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .memnuniyet label:has(input[type="radio"]:checked) .yazi {
    color: #1a1a1a !important;
    font-weight: bold !important;
}

html[data-theme="dark"] .memnuniyet .yazi {
    color: rgba(255, 255, 255, 0.6);
}

/* Dual Logo Theme Toggling */
.logo-light { display: none !important; }
.logo-dark { display: inline-block !important; }

html[data-theme="light"] .logo-light { display: inline-block !important; }
html[data-theme="light"] .logo-dark { display: none !important; }