/* ============================================================
   Washeej Contrast Fix CSS
   Phase 5.3: Solve white-on-white and dark-on-dark issues
   Date: 2026-02-01
   
   This file ensures all UI components have proper contrast
   in both light and dark modes using CSS variables.
   ============================================================ */

/* ========================================
   Base Variables (Fallbacks)
======================================== */
:root {
    --contrast-bg-light: #ffffff;
    --contrast-bg-dark: #1a1a2e;
    --contrast-text-light: #1f2937;
    --contrast-text-dark: #f3f4f6;
    --contrast-border-light: #e5e7eb;
    --contrast-border-dark: #374151;
    --contrast-surface-light: #f9fafb;
    --contrast-surface-dark: #111827;
}

/* ========================================
   5.3.1 Cards - Ensure visible backgrounds
======================================== */
.card,
.custom-card,
.dashboard-card,
.dashboard-widget,
.widget-card {
    background-color: var(--contrast-bg-light) !important;
    color: var(--contrast-text-light) !important;
    border: 1px solid var(--contrast-border-light) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .custom-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .dashboard-widget,
[data-theme="dark"] .widget-card {
    background-color: var(--contrast-bg-dark) !important;
    color: var(--contrast-text-dark) !important;
    border-color: var(--contrast-border-dark) !important;
}

/* Card headers — preserve .bg-* utility colors (e.g. .bg-danger.bg-opacity-10) */
.card-header:not([class*="bg-"]) {
    background-color: var(--contrast-surface-light) !important;
    border-bottom: 1px solid var(--contrast-border-light) !important;
}

[data-theme="dark"] .card-header:not([class*="bg-"]) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: var(--contrast-border-dark) !important;
}

/* Colored card headers (.bg-danger.bg-opacity-10 etc.) — ensure heading text is white */
.card-header.bg-danger .text-danger,
.card-header.bg-danger h6,
.card-header.bg-danger h5,
.card-header.bg-success .text-success,
.card-header.bg-success h6,
.card-header.bg-warning .text-warning,
.card-header.bg-warning h6 {
    color: #fff !important;
}

/* In light theme, colored card headers with bg-opacity keep their light tint.
   Make the heading text the SOLID variant of that color for readability. */
.card-header.bg-danger.bg-opacity-10 .text-danger,
.card-header.bg-danger.bg-opacity-10 h6 {
    color: #991b1b !important;
}

.card-header.bg-success.bg-opacity-10 .text-success,
.card-header.bg-success.bg-opacity-10 h6 {
    color: #065f46 !important;
}

.card-header.bg-warning.bg-opacity-10 .text-warning,
.card-header.bg-warning.bg-opacity-10 h6 {
    color: #92400e !important;
}

/* Dark mode: colored card headers with opacity — use light text */
[data-theme="dark"] .card-header.bg-danger.bg-opacity-10 .text-danger,
[data-theme="dark"] .card-header.bg-danger.bg-opacity-10 h6,
[data-theme="dark"] .card-header.bg-success.bg-opacity-10 .text-success,
[data-theme="dark"] .card-header.bg-success.bg-opacity-10 h6,
[data-theme="dark"] .card-header.bg-warning.bg-opacity-10 .text-warning,
[data-theme="dark"] .card-header.bg-warning.bg-opacity-10 h6 {
    color: #fff !important;
}

.card-body {
    background-color: transparent !important;
}

.card-footer {
    background-color: var(--contrast-surface-light) !important;
    border-top: 1px solid var(--contrast-border-light) !important;
}

[data-theme="dark"] .card-footer {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-top-color: var(--contrast-border-dark) !important;
}

/* ========================================
   5.3.2 Tables - Readable headers and rows
======================================== */
.table {
    --bs-table-bg: var(--contrast-bg-light);
    --bs-table-color: var(--contrast-text-light);
    background-color: var(--contrast-bg-light) !important;
    color: var(--contrast-text-light) !important;
}

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

.table thead th {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border-bottom: 2px solid var(--contrast-border-light) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .table thead th {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-bottom-color: var(--contrast-border-dark) !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--contrast-border-light);
}

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

.table tbody td {
    color: inherit !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ========================================
   5.3.3 Form Inputs - Visible in all modes
======================================== */
.form-control,
.form--control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select:not(.select2-hidden-accessible) {
    background-color: var(--contrast-bg-light) !important;
    color: var(--contrast-text-light) !important;
    border: 1px solid var(--contrast-border-light) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form--control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea,
[data-theme="dark"] select:not(.select2-hidden-accessible) {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

.form-control:focus,
.form--control:focus {
    border-color: hsl(var(--base, 142 71% 45%)) !important;
    box-shadow: 0 0 0 3px hsl(var(--base, 142 71% 45%) / 0.15) !important;
}

.form-control::placeholder,
.form--control::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form--control::placeholder {
    color: #6b7280 !important;
}

/* Select2 Contrast Fix */
.select2-container--default .select2-selection--single {
    background-color: var(--contrast-bg-light) !important;
    border-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--contrast-text-light) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e5e7eb !important;
}

.select2-dropdown {
    background-color: var(--contrast-bg-light) !important;
    border-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .select2-dropdown {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.select2-container--default .select2-results__option {
    color: var(--contrast-text-light) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #e5e7eb !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: hsl(var(--base, 142 71% 45%)) !important;
    color: #fff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--contrast-bg-light) !important;
    color: var(--contrast-text-light) !important;
    border-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

/* ========================================
   5.3.4 Badges - Always readable
======================================== */
.badge {
    font-weight: 500 !important;
}

/* Badge-specific color overrides — scoped to badge/span elements only.
   DO NOT apply to container elements like .card-header, .alert, etc.
   Those use .bg-* with .bg-opacity-* which must NOT be overridden. */
.badge--primary,
.badge-primary,
span.bg-primary,
.badge.bg-primary {
    background-color: hsl(var(--base, 142 71% 45%)) !important;
    color: #fff !important;
}

.badge--success,
.badge-success,
span.bg-success,
.badge.bg-success {
    background-color: #10b981 !important;
    color: #fff !important;
}

.badge--danger,
.badge-danger,
span.bg-danger,
.badge.bg-danger {
    background-color: #ef4444 !important;
    color: #fff !important;
}

.badge--warning,
.badge-warning,
span.bg-warning,
.badge.bg-warning {
    background-color: #f59e0b !important;
    color: #fff !important;
}

.badge--info,
.badge-info,
span.bg-info,
.badge.bg-info {
    background-color: #3b82f6 !important;
    color: #fff !important;
}

.badge--secondary,
.badge-secondary,
span.bg-secondary,
.badge.bg-secondary {
    background-color: #6b7280 !important;
    color: #fff !important;
}

.badge--dark,
.badge-dark,
span.bg-dark,
.badge.bg-dark {
    background-color: #1f2937 !important;
    color: #fff !important;
}

.badge--light,
.badge-light,
span.bg-light,
.badge.bg-light {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* Soft badges */
.badge--primary-soft,
.badge-soft-primary {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
}

.badge--success-soft,
.badge-soft-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
}

.badge--danger-soft,
.badge-soft-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
}

.badge--warning-soft,
.badge-soft-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
}

/* ========================================
   5.3.5 Modals - Proper backgrounds
======================================== */
.modal-content {
    background-color: var(--contrast-bg-light) !important;
    color: var(--contrast-text-light) !important;
    border: 1px solid var(--contrast-border-light) !important;
}

[data-theme="dark"] .modal-content {
    background-color: #1f2937 !important;
    color: var(--contrast-text-dark) !important;
    border-color: var(--contrast-border-dark) !important;
}

.modal-header {
    border-bottom: 1px solid var(--contrast-border-light) !important;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--contrast-border-dark) !important;
}

.modal-footer {
    border-top: 1px solid var(--contrast-border-light) !important;
}

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

/* ========================================
   5.3.6 Dropdowns - Visible menus
======================================== */
.dropdown-menu {
    background-color: var(--contrast-bg-light) !important;
    border: 1px solid var(--contrast-border-light) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: #1f2937 !important;
    border-color: var(--contrast-border-dark) !important;
}

.dropdown-item {
    color: var(--contrast-text-light) !important;
}

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dropdown-divider {
    border-top-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--contrast-border-dark) !important;
}

/* ========================================
   5.3.7 Alerts - Clear visibility
======================================== */
.alert {
    border: 1px solid transparent !important;
}

.alert-primary {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #b91c1c !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #1d4ed8 !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .alert-primary,
[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

/* ========================================
   5.3.8 Buttons - Consistent contrast
======================================== */
.btn-primary,
.btn--primary {
    background-color: hsl(var(--base, 142 71% 45%)) !important;
    border-color: hsl(var(--base, 142 71% 45%)) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn--primary:hover {
    background-color: hsl(var(--base-d-100, 142 71% 35%)) !important;
    border-color: hsl(var(--base-d-100, 142 71% 35%)) !important;
}

.btn-outline-primary,
.btn--outline-primary {
    border-color: hsl(var(--base, 142 71% 45%)) !important;
    color: hsl(var(--base, 142 71% 45%)) !important;
}

.btn-outline-primary:hover,
.btn--outline-primary:hover {
    background-color: hsl(var(--base, 142 71% 45%)) !important;
    color: #fff !important;
}

.btn-secondary,
.btn--secondary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #fff !important;
}

.btn-success,
.btn--success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
}

.btn-danger,
.btn--danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

.btn-warning,
.btn--warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}

.btn-info,
.btn--info {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

/* ========================================
   5.3.9 Pagination - Visible controls
======================================== */
.page-link {
    background-color: var(--contrast-bg-light) !important;
    color: var(--contrast-text-light) !important;
    border-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .page-link {
    background-color: #1f2937 !important;
    color: var(--contrast-text-dark) !important;
    border-color: var(--contrast-border-dark) !important;
}

.page-item.active .page-link {
    background-color: hsl(var(--base, 142 71% 45%)) !important;
    border-color: hsl(var(--base, 142 71% 45%)) !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    background-color: var(--contrast-surface-light) !important;
    color: #9ca3af !important;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: #111827 !important;
    color: #6b7280 !important;
}

/* ========================================
   5.3.10 Tooltips & Popovers
======================================== */
.tooltip-inner {
    background-color: #1f2937 !important;
    color: #fff !important;
}

.popover {
    background-color: var(--contrast-bg-light) !important;
    border-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .popover {
    background-color: #1f2937 !important;
    border-color: var(--contrast-border-dark) !important;
}

.popover-header {
    background-color: var(--contrast-surface-light) !important;
    border-bottom-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .popover-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: var(--contrast-border-dark) !important;
    color: var(--contrast-text-dark) !important;
}

.popover-body {
    color: var(--contrast-text-light) !important;
}

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

/* ========================================
   5.3.11 Lists - Readable items
======================================== */
.list-group-item {
    background-color: var(--contrast-bg-light) !important;
    color: var(--contrast-text-light) !important;
    border-color: var(--contrast-border-light) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--contrast-bg-dark) !important;
    color: var(--contrast-text-dark) !important;
    border-color: var(--contrast-border-dark) !important;
}

.list-group-item.active {
    background-color: hsl(var(--base, 142 71% 45%)) !important;
    border-color: hsl(var(--base, 142 71% 45%)) !important;
    color: #fff !important;
}

/* ========================================
   5.3.12 Navigation Tabs
======================================== */
.nav-tabs .nav-link {
    color: var(--contrast-text-light) !important;
}

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

.nav-tabs .nav-link.active {
    background-color: var(--contrast-bg-light) !important;
    color: hsl(var(--base, 142 71% 45%)) !important;
    border-color: var(--contrast-border-light) var(--contrast-border-light) var(--contrast-bg-light) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--contrast-bg-dark) !important;
    border-color: var(--contrast-border-dark) var(--contrast-border-dark) var(--contrast-bg-dark) !important;
}

/* ========================================
   5.3.13 Dashboard specific elements
======================================== */
.dashboard-body {
    background-color: #f3f4f6 !important;
}

[data-theme="dark"] .dashboard-body {
    background-color: #0f172a !important;
}

.dashboard__right {
    background-color: #f3f4f6 !important;
}

[data-theme="dark"] .dashboard__right {
    background-color: #0f172a !important;
}

/* Dashboard header — KEEP original dark base-color background.
   The header is designed with white text/icons on a dark bg.
   Forcing it white breaks ALL header content (bells, user info, etc). */
.dashboard-header {
    /* Do NOT override background — let main.css hsl(var(--base-d-400)) apply */
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] .dashboard-header {
    background-color: hsl(222 47% 11%) !important;
    border-bottom-color: hsl(217 33% 17%) !important;
}

/* Header text — white on the dark header background in BOTH themes */
.dashboard-header .title,
.dashboard-header h3 {
    color: #fff !important;
}

/* Header icons/buttons — white on dark header */
.dashboard-header .notification-bell-btn,
.dashboard-header .theme-toggle-btn,
.dashboard-header .fas,
.dashboard-header .far,
.dashboard-header .fab,
.dashboard-header .fa-solid,
.dashboard-header .fa-regular,
.dashboard-header .dashboard-body__bar-icon {
    color: rgba(255,255,255,0.9) !important;
}

/* User info in header — white text */
.dashboard-header .user-info__name {
    color: #fff !important;
}

.dashboard-header .user-info__desc {
    color: rgba(255,255,255,0.7) !important;
}

.dashboard-header .user-info__desc .icon {
    color: rgba(255,255,255,0.7) !important;
}

/* Language switch text in header */
.dashboard-header .lang-switch-text {
    color: rgba(255,255,255,0.9) !important;
}

/* Header shape overlay — subtle in both themes */
.dashboard-header__shape {
    opacity: 0.15 !important;
}

/* Dashboard widgets */
.dashboard-widget {
    background-color: var(--contrast-bg-light) !important;
}

[data-theme="dark"] .dashboard-widget {
    background-color: #1f2937 !important;
}

.dashboard-widget__content h4,
.dashboard-widget__content .amount {
    color: var(--contrast-text-light) !important;
}

[data-theme="dark"] .dashboard-widget__content h4,
[data-theme="dark"] .dashboard-widget__content .amount {
    color: var(--contrast-text-dark) !important;
}

/* ========================================
   5.3.14 Text utilities override
======================================== */
.text-muted {
    color: #6b7280 !important;
}

[data-theme="dark"] .text-muted {
    color: #9ca3af !important;
}

.text-dark {
    color: var(--contrast-text-light) !important;
}

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

/* ========================================
   5.3.15 Borders visibility
======================================== */
.border {
    border-color: var(--contrast-border-light) !important;
}

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

.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--contrast-border-light) !important;
}

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

/* ========================================
   5.3.16 iziToast Contrast
======================================== */
.iziToast {
    border: none !important;
}

.iziToast-body {
    color: inherit !important;
}

/* ========================================
   5.3.17 Empty States
======================================== */
.empty-state,
.no-data,
.no-results {
    color: #6b7280 !important;
}

[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-data,
[data-theme="dark"] .no-results {
    color: #9ca3af !important;
}

/* ========================================
   5.3.18 Dashboard Badge Override
   main.css: .dashboard__right span { color: #606576 }
   This kills badge text contrast. Override with high specificity.
======================================== */
.dashboard__right span.badge,
.dashboard__right span.badge--primary,
.dashboard__right span.badge--success,
.dashboard__right span.badge--danger,
.dashboard__right span.badge--warning,
.dashboard__right span.badge--info,
.dashboard__right span.badge--secondary,
.dashboard__right span.badge--dark,
.dashboard span.badge,
.dashboard span.badge--primary,
.dashboard span.badge--success,
.dashboard span.badge--danger,
.dashboard span.badge--warning,
.dashboard span.badge--info,
.dashboard span.badge--secondary,
.dashboard span.badge--dark {
    color: #fff !important;
}

.dashboard__right span.badge--light,
.dashboard span.badge--light {
    color: #1f2937 !important;
}

/* Bootstrap .bg-* badges inside dashboard */
.dashboard__right span.bg-success,
.dashboard__right span.bg-danger,
.dashboard__right span.bg-primary,
.dashboard__right span.bg-warning,
.dashboard__right span.bg-info,
.dashboard__right span.bg-secondary,
.dashboard__right span.bg-dark,
.dashboard span.bg-success,
.dashboard span.bg-danger,
.dashboard span.bg-primary,
.dashboard span.bg-warning,
.dashboard span.bg-info,
.dashboard span.bg-secondary,
.dashboard span.bg-dark {
    color: #fff !important;
}

.dashboard__right span.bg-light,
.dashboard span.bg-light {
    color: #1f2937 !important;
}

/* Ensure buttons inside dashboard have correct text color */
.dashboard__right .btn--success,
.dashboard__right .btn--danger,
.dashboard__right .btn--primary,
.dashboard__right .btn--base,
.dashboard__right .btn--warning,
.dashboard__right .btn--info,
.dashboard__right .btn-success,
.dashboard__right .btn-danger,
.dashboard__right .btn-primary,
.dashboard__right .btn-warning,
.dashboard__right .btn-info {
    color: #fff !important;
}

/* ========================================
   5.3.19 Pagination Arrow Flip for RTL
   Laravel renders ‹ (prev) and › (next) with rel="prev"/rel="next".
   In RTL the row is already reversed via flex-direction: row-reverse,
   but the arrow GLYPHS still need to be mirrored so ‹ becomes › and vice versa.
======================================== */

/* Flip the prev arrow glyph: ‹ → › */
[dir="rtl"] .pagination .page-link[rel="prev"],
[dir="rtl"] .pagination li:first-child .page-link {
    transform: scaleX(-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Flip the next arrow glyph: › → ‹ */
[dir="rtl"] .pagination .page-link[rel="next"],
[dir="rtl"] .pagination li:last-child .page-link {
    transform: scaleX(-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Line Awesome arrow icons inside pagination */
[dir="rtl"] .pagination .la-angle-left::before {
    content: "\f105" !important;
}

[dir="rtl"] .pagination .la-angle-right::before {
    content: "\f104" !important;
}

/* Font Awesome chevron icons inside pagination */
[dir="rtl"] .pagination .fa-chevron-left::before {
    content: "\f054" !important;
}

[dir="rtl"] .pagination .fa-chevron-right::before {
    content: "\f053" !important;
}

/* ========================================
   5.3.20 QR Page Button Fix
   .done-btn on QR page has gray text (#999) — force white on green bg
======================================== */
.btn--success,
.btn--success:hover,
.btn--success:focus,
a.btn--success,
a.btn--success:hover {
    color: #fff !important;
}

/* ========================================
   5.3.21 Modal Badge Override
   .custom--modal span { color: #606576 } kills badge contrast in modals
======================================== */
.custom--modal span.badge,
.custom--modal span.badge--primary,
.custom--modal span.badge--success,
.custom--modal span.badge--danger,
.custom--modal span.badge--warning,
.custom--modal span.badge--info,
.custom--modal span.badge--secondary,
.custom--modal span.bg-success,
.custom--modal span.bg-danger,
.custom--modal span.bg-primary,
.custom--modal span.bg-warning,
.custom--modal span.bg-info {
    color: #fff !important;
}

/* ============================================================
   End of Contrast Fix CSS
   ============================================================ */