/* Final admin readability layer. Loaded after page-specific styles. */
:root {
  --user-readable-text: #182438;
  --user-readable-muted: #68778c;
  --user-readable-surface: #ffffff;
  --user-readable-surface-soft: #f7f9fc;
  --user-readable-border: #e1e8f0;
}

html[data-theme-mode="dark"] {
  --user-readable-text: #edf3fb;
  --user-readable-muted: #a7b4c6;
  --user-readable-surface: #171f2b;
  --user-readable-surface-soft: #1d2937;
  --user-readable-border: #2d3a4b;
}

html[data-theme-mode="dark"] .app-content,
html[data-theme-mode="dark"] .main-content {
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content h1,
html[data-theme-mode="dark"] .app-content h2,
html[data-theme-mode="dark"] .app-content h3,
html[data-theme-mode="dark"] .app-content h4,
html[data-theme-mode="dark"] .app-content h5,
html[data-theme-mode="dark"] .app-content h6,
html[data-theme-mode="dark"] .app-content .page-title,
html[data-theme-mode="dark"] .app-content .card-title,
html[data-theme-mode="dark"] .app-content .modal-title,
html[data-theme-mode="dark"] .app-content .form-label,
html[data-theme-mode="dark"] .app-content label,
html[data-theme-mode="dark"] .app-content legend,
html[data-theme-mode="dark"] .app-content .fw-semibold,
html[data-theme-mode="dark"] .app-content .fw-bold,
html[data-theme-mode="dark"] .app-content .cron-task-name,
html[data-theme-mode="dark"] .app-content .cron-group-title,
html[data-theme-mode="dark"] .app-content .dashboard-stat-value,
html[data-theme-mode="dark"] .app-content .dashboard-section-heading h5,
html[data-theme-mode="dark"] .app-content .dashboard-chart-heading h5 {
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content p,
html[data-theme-mode="dark"] .app-content .text-muted,
html[data-theme-mode="dark"] .app-content small,
html[data-theme-mode="dark"] .app-content .form-text,
html[data-theme-mode="dark"] .app-content .dataTables_info,
html[data-theme-mode="dark"] .app-content .dataTables_length,
html[data-theme-mode="dark"] .app-content .dataTables_filter,
html[data-theme-mode="dark"] .app-content .text-secondary,
html[data-theme-mode="dark"] .app-content .cron-meta,
html[data-theme-mode="dark"] .app-content .cron-task-desc,
html[data-theme-mode="dark"] .app-content .cron-group-count,
html[data-theme-mode="dark"] .app-content .cron-status-note,
html[data-theme-mode="dark"] .app-content .dashboard-stat-label,
html[data-theme-mode="dark"] .app-content .dashboard-stat-note,
html[data-theme-mode="dark"] .app-content .dashboard-chart-heading span {
  color: var(--user-readable-muted) !important;
}

html[data-theme-mode="dark"] .app-content a:not(.btn):not(.badge),
html[data-theme-mode="dark"] .app-content .btn-link {
  color: #8eb7ff !important;
}

html[data-theme-mode="dark"] .app-content .card,
html[data-theme-mode="dark"] .app-content .modal-content,
html[data-theme-mode="dark"] .app-content .dropdown-menu,
html[data-theme-mode="dark"] .app-content .offcanvas,
html[data-theme-mode="dark"] .app-content .list-group-item,
html[data-theme-mode="dark"] .app-content .accordion-item,
html[data-theme-mode="dark"] .app-content .orders-actions-toolbar,
html[data-theme-mode="dark"] .app-content .provider-table-card,
html[data-theme-mode="dark"] .app-content .provider-stat-card,
html[data-theme-mode="dark"] .app-content .cron-hero,
html[data-theme-mode="dark"] .app-content .cron-status-card,
html[data-theme-mode="dark"] .app-content .cron-group-card {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
  background-color: var(--user-readable-surface) !important;
}

html[data-theme-mode="dark"] .app-content .card-header,
html[data-theme-mode="dark"] .app-content .card-footer,
html[data-theme-mode="dark"] .app-content .modal-header,
html[data-theme-mode="dark"] .app-content .modal-footer,
html[data-theme-mode="dark"] .app-content .dropdown-header,
html[data-theme-mode="dark"] .app-content .list-group-item-action:hover,
html[data-theme-mode="dark"] .app-content .cron-group-header,
html[data-theme-mode="dark"] .app-content .provider-table-heading {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
  background-color: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .form-control,
html[data-theme-mode="dark"] .app-content .form-select,
html[data-theme-mode="dark"] .app-content textarea,
html[data-theme-mode="dark"] .app-content input:not([type="checkbox"]):not([type="radio"]),
html[data-theme-mode="dark"] .app-content select,
html[data-theme-mode="dark"] .app-content .choices__inner,
html[data-theme-mode="dark"] .app-content .dataTables_filter input,
html[data-theme-mode="dark"] .app-content .dataTables_length select,
html[data-theme-mode="dark"] .app-content .select2-container--default .select2-selection--single,
html[data-theme-mode="dark"] .app-content .select2-container--default .select2-selection--multiple {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
  background-color: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .form-control::placeholder,
html[data-theme-mode="dark"] .app-content textarea::placeholder,
html[data-theme-mode="dark"] .app-content input::placeholder,
html[data-theme-mode="dark"] .app-content .dataTables_filter input::placeholder {
  color: var(--user-readable-muted) !important;
  opacity: 1;
}

html[data-theme-mode="dark"] .app-content .table,
html[data-theme-mode="dark"] .app-content .table > :not(caption) > * > *,
html[data-theme-mode="dark"] .app-content .table tbody td,
html[data-theme-mode="dark"] .app-content .table tbody th,
html[data-theme-mode="dark"] .app-content .provider-table tbody td {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
}

html[data-theme-mode="dark"] .app-content .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme-mode="dark"] .app-content .table-hover > tbody > tr:hover > *,
html[data-theme-mode="dark"] .app-content .provider-table tbody tr:hover td {
  color: var(--user-readable-text) !important;
  background-color: rgba(142, 183, 255, .07) !important;
}

html[data-theme-mode="dark"] .app-content .table thead th,
html[data-theme-mode="dark"] .app-content .dataTables_scrollHead th,
html[data-theme-mode="dark"] .app-content .provider-table thead th,
html[data-theme-mode="dark"] .app-content #datatable.table > thead > tr > th {
  color: #f7fbff !important;
  background-color: #193b67 !important;
  border-color: #36567d !important;
}

html[data-theme-mode="dark"] .app-content .pagination .page-link,
html[data-theme-mode="dark"] .app-content .dropdown-item,
html[data-theme-mode="dark"] .app-content .select2-results__option,
html[data-theme-mode="dark"] .app-content .select2-container--default .select2-selection__rendered,
html[data-theme-mode="dark"] .app-content .select2-container--default .select2-selection__placeholder {
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .pagination .page-link,
html[data-theme-mode="dark"] .app-content .dropdown-item {
  border-color: var(--user-readable-border) !important;
  background-color: var(--user-readable-surface) !important;
}

html[data-theme-mode="dark"] .app-content .dropdown-item:hover,
html[data-theme-mode="dark"] .app-content .select2-results__option--highlighted {
  color: #ffffff !important;
  background-color: #2563eb !important;
}

html[data-theme-mode="dark"] .app-content .text-dark,
html[data-theme-mode="dark"] .app-content .text-black,
html[data-theme-mode="dark"] .app-content code,
html[data-theme-mode="dark"] .app-content pre,
html[data-theme-mode="dark"] .app-content .bg-light,
html[data-theme-mode="dark"] .app-content .bg-body,
html[data-theme-mode="dark"] .app-content .bg-white {
  color: var(--user-readable-text) !important;
  background-color: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .border,
html[data-theme-mode="dark"] .app-content .border-top,
html[data-theme-mode="dark"] .app-content .border-end,
html[data-theme-mode="dark"] .app-content .border-bottom,
html[data-theme-mode="dark"] .app-content .border-start {
  border-color: var(--user-readable-border) !important;
}

html[data-theme-mode="dark"] .swal2-popup,
html[data-theme-mode="dark"] .swal2-html-container,
html[data-theme-mode="dark"] .swal2-title,
html[data-theme-mode="dark"] .swal2-input,
html[data-theme-mode="dark"] .swal2-textarea,
html[data-theme-mode="dark"] .swal2-select {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
  background-color: var(--user-readable-surface) !important;
}

html[data-theme-mode="dark"] .swal2-popup .swal2-actions .swal2-cancel {
  color: var(--user-readable-text) !important;
}
/* Orders page: override its legacy white-card rules in dark mode. */
html[data-theme-mode="dark"] .app-content .admin-orders-page .orders-actions-toolbar,
html[data-theme-mode="dark"] .app-content .admin-orders-page .card.custom-card,
html[data-theme-mode="dark"] .app-content .admin-orders-page .card.custom-card > .card-header,
html[data-theme-mode="dark"] .app-content .admin-orders-page .card.custom-card > .card-body {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
  background: var(--user-readable-surface) !important;
  box-shadow: var(--user-readable-shadow, 0 16px 36px rgba(0, 0, 0, .22)) !important;
}

html[data-theme-mode="dark"] .app-content .admin-orders-page .card.custom-card > .card-header {
  background: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .admin-orders-page .card.custom-card > .card-header .card-title,
html[data-theme-mode="dark"] .app-content .admin-orders-page .card.custom-card > .card-header h4 {
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .admin-orders-page .table-responsive,
html[data-theme-mode="dark"] .app-content .admin-orders-page .dataTables_wrapper {
  color: var(--user-readable-text) !important;
  background: transparent !important;
}
/* Cron page: override fixed dark text from its legacy stylesheet. */
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-eyebrow,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-status-label,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-table thead th {
  color: var(--user-readable-muted) !important;
}

html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-hero h4,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-status-value,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-group-title,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-task-name,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-last-run,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-table td {
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-hero p,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-status-note,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-meta,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-task-desc,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-group-count {
  color: var(--user-readable-muted) !important;
}

html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-freq,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-url {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
  background: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-help-card ul,
html[data-theme-mode="dark"] .app-content .admin-cron-page .cron-help-card li {
  color: var(--user-readable-muted) !important;
}
/* Providers page: final contrast overrides for fixed legacy colors. */
html[data-theme-mode="dark"] .app-content .providers-page .provider-table-card,
html[data-theme-mode="dark"] .app-content .providers-page .provider-table-heading,
html[data-theme-mode="dark"] .app-content .providers-page .provider-table-scroll,
html[data-theme-mode="dark"] .app-content .providers-page .dataTables_wrapper {
  border-color: var(--user-readable-border) !important;
  background: var(--user-readable-surface) !important;
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-table-heading {
  background: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-section-label,
html[data-theme-mode="dark"] .app-content .providers-page .dataTables_length,
html[data-theme-mode="dark"] .app-content .providers-page .dataTables_filter,
html[data-theme-mode="dark"] .app-content .providers-page .dataTables_info {
  color: var(--user-readable-muted) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-table-heading h3,
html[data-theme-mode="dark"] .app-content .providers-page .provider-selection-summary,
html[data-theme-mode="dark"] .app-content .providers-page .provider-table tbody td,
html[data-theme-mode="dark"] .app-content .providers-page .provider-table tbody td:nth-child(3),
html[data-theme-mode="dark"] .app-content .providers-page .dataTables_wrapper .page-link {
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-selection-summary,
html[data-theme-mode="dark"] .app-content .providers-page .dataTables_wrapper .dataTables_filter input,
html[data-theme-mode="dark"] .app-content .providers-page .dataTables_wrapper .dataTables_length select {
  border-color: var(--user-readable-border) !important;
  background: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-table tbody tr,
html[data-theme-mode="dark"] .app-content .providers-page .provider-table tbody td:last-child {
  background: var(--user-readable-surface) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-table tbody tr:hover,
html[data-theme-mode="dark"] .app-content .providers-page .provider-table tbody tr:hover td:last-child {
  background: #22344d !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-table thead th {
  color: #f7fbff !important;
  background: #193b67 !important;
  border-color: #36567d !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .modal-content,
html[data-theme-mode="dark"] .app-content .providers-page .modal-header,
html[data-theme-mode="dark"] .app-content .providers-page .modal-body,
html[data-theme-mode="dark"] .app-content .providers-page .modal-footer {
  border-color: var(--user-readable-border) !important;
  background: var(--user-readable-surface) !important;
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .modal-header {
  background: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .modal-title,
html[data-theme-mode="dark"] .app-content .providers-page .modal .form-label {
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .modal .form-control,
html[data-theme-mode="dark"] .app-content .providers-page .modal .form-select {
  border-color: var(--user-readable-border) !important;
  background: var(--user-readable-surface-soft) !important;
  color: var(--user-readable-text) !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-actions .btn-outline-primary {
  color: #8eb7ff !important;
  border-color: #3d78c7 !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-actions .btn-outline-warning {
  color: #ffc857 !important;
  border-color: #b78319 !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-actions .btn-outline-success {
  color: #55d6a5 !important;
  border-color: #1b9b70 !important;
}

html[data-theme-mode="dark"] .app-content .providers-page .provider-actions .btn-outline-danger {
  color: #ff7585 !important;
  border-color: #c63d50 !important;
}

/* Page-specific surfaces that previously forced white backgrounds. */
html[data-theme-mode="dark"] .services-page .services-filter-card,
html[data-theme-mode="dark"] .services-page .services-table-card,
html[data-theme-mode="dark"] .services-page .service-row.card,
html[data-theme-mode="dark"] .services-page .top-updated-section,
html[data-theme-mode="dark"] .services-page .top-service-tile,
html[data-theme-mode="dark"] .services-page .service-table tbody tr.service-row,
html[data-theme-mode="dark"] .ticket-list,
html[data-theme-mode="dark"] .ticket-detail-head,
html[data-theme-mode="dark"] .ticket-chat-bubble,
html[data-theme-mode="dark"] .ticket-reply-panel,
html[data-theme-mode="dark"] .ticket-create-modal-section {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
  background: var(--user-readable-surface) !important;
}

html[data-theme-mode="dark"] .services-page .service-table thead th,
html[data-theme-mode="dark"] .services-page .service-table td,
html[data-theme-mode="dark"] .ticket-page-button {
  color: var(--user-readable-text) !important;
  border-color: var(--user-readable-border) !important;
}

html[data-theme-mode="dark"] .services-page .service-table thead th,
html[data-theme-mode="dark"] .ticket-detail-meta span,
html[data-theme-mode="dark"] .ticket-reply-panel textarea,
html[data-theme-mode="dark"] .ticket-create-modal-section .input-group-text,
html[data-theme-mode="dark"] .ticket-page-button {
  background: var(--user-readable-surface-soft) !important;
}

html[data-theme-mode="dark"] .services-page .service-table tbody tr.service-row:hover,
html[data-theme-mode="dark"] .ticket-page-button:hover {
  background: rgba(var(--user-accent-hover-rgb), .16) !important;
}

html[data-theme-mode="dark"] .services-page .service-table td,
html[data-theme-mode="dark"] .ticket-chat-bubble,
html[data-theme-mode="dark"] .ticket-page-button {
  color: var(--user-readable-text) !important;
}