/*
 * MAWRID HR Management System - Accessibility Fixes
 * Ensures white text on blue/black backgrounds for optimal readability
 * Author: MAWRID Development Team
 * Version: 1.0.0
 */

/* ================================
   BLUE BACKGROUND TEXT READABILITY FIXES
   ================================ */

/* Navigation Elements - Ensure white text on blue backgrounds */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--mawrid-white) !important;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
    color: var(--mawrid-white) !important;
}

/* Dropdown menu items on blue backgrounds */
.user-menu .dropdown-toggle,
.user-menu .dropdown-toggle:hover,
.user-menu .dropdown-toggle:focus {
    color: var(--mawrid-white) !important;
}

/* Sidebar Elements - Ensure white text on blue backgrounds */
.sidebar,
.sidebar-nav .nav-link,
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus,
.sidebar-nav .nav-link.active {
    color: var(--mawrid-white) !important;
}

.sidebar-section-header,
.sidebar-section-header:hover,
.sidebar-section-header:focus {
    color: var(--mawrid-white) !important;
}

.sidebar-section-content .nav-link,
.sidebar-section-content .nav-link:hover,
.sidebar-section-content .nav-link:focus {
    color: var(--mawrid-white) !important;
}

.sidebar-header h5,
.sidebar-header small {
    color: var(--mawrid-white) !important;
}

/* Card Headers - Ensure white text on blue backgrounds */
.card-header,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--mawrid-white) !important;
}

.card-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Table Headers - Ensure white text on blue backgrounds */
.table th,
.attendance-table th,
.table thead th {
    color: var(--mawrid-white) !important;
}

/* Button Elements - Ensure proper contrast */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: var(--mawrid-white) !important;
}

.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    color: var(--mawrid-white) !important;
}

/* Badge Elements - Ensure white text on dark backgrounds */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-info {
    color: var(--mawrid-white) !important;
}

.bg-primary,
.bg-primary * {
    color: var(--mawrid-white) !important;
}

.bg-secondary,
.bg-secondary * {
    color: var(--mawrid-white) !important;
}

.bg-dark,
.bg-dark * {
    color: var(--mawrid-white) !important;
}

.bg-info,
.bg-info * {
    color: var(--mawrid-white) !important;
}

/* ================================
   ALERT ELEMENTS WITH BLUE/BLACK BACKGROUNDS
   ================================ */

.alert-primary,
.alert-primary *,
.alert-info,
.alert-info * {
    color: var(--mawrid-white) !important;
}

.alert-success,
.alert-success *,
.alert-danger,
.alert-danger * {
    color: var(--mawrid-white) !important;
}

/* ================================
   MODAL ELEMENTS
   ================================ */

.modal-header,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-title {
    color: var(--mawrid-white) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ================================
   PAGINATION ELEMENTS
   ================================ */

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    color: var(--mawrid-white) !important;
}

/* ================================
   DASHBOARD SPECIFIC ELEMENTS
   ================================ */

.dashboard-header,
.dashboard-header h1,
.dashboard-header h2,
.dashboard-header h3,
.dashboard-header h4,
.dashboard-header h5,
.dashboard-header h6,
.dashboard-header p,
.dashboard-header span,
.dashboard-header div {
    color: var(--mawrid-white) !important;
}

.welcome-title,
.welcome-subtitle,
.text-white-50 {
    color: var(--mawrid-white) !important;
}

.quick-actions-header,
.quick-actions-header h5 {
    color: var(--mawrid-white) !important;
}

.activity-header,
.activity-header h5,
.system-status-header,
.system-status-header h5 {
    color: var(--mawrid-white) !important;
}

/* ================================
   LOGIN PAGE SPECIFIC ELEMENTS
   ================================ */

.login-header,
.login-header h1,
.login-header h2,
.login-header p,
.login-header .company-title,
.login-header .company-subtitle {
    color: var(--mawrid-white) !important;
}

/* ================================
   ATTENDANCE DASHBOARD SPECIFIC
   ================================ */

.management-header,
.management-header h1,
.management-header p,
.management-header .text-white-50,
.management-header .opacity-90 {
    color: var(--mawrid-white) !important;
}

.period-badge {
    color: var(--mawrid-white) !important;
}

.filter-btn,
.filter-btn:hover,
.filter-btn:focus {
    color: var(--mawrid-white) !important;
}

/* ================================
   STATUS INDICATORS AND BADGES
   ================================ */

.status-badge.status-present,
.status-badge.status-absent,
.status-badge.status-late,
.status-badge.status-early {
    color: var(--mawrid-white) !important;
}

.status-indicator.online,
.status-indicator.offline {
    color: var(--mawrid-white) !important;
}

/* Override for warning badges that should have dark text */
.status-badge.status-late,
.status-indicator.warning,
.user-role-badge,
.role-badge {
    color: var(--mawrid-dark-blue) !important;
}

/* ================================
   BREADCRUMB FIXES
   ================================ */

.breadcrumb-item a {
    color: var(--mawrid-blue) !important;
}

.breadcrumb-item a:hover {
    color: var(--mawrid-dark-blue) !important;
}

/* ================================
   FORM ELEMENTS ON DARK BACKGROUNDS
   ================================ */

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--mawrid-gold) !important;
}

/* ================================
   RTL SUPPORT FOR ACCESSIBILITY FIXES
   ================================ */

[dir="rtl"] .navbar-brand,
[dir="rtl"] .navbar-nav .nav-link,
[dir="rtl"] .sidebar-nav .nav-link,
[dir="rtl"] .card-header h1,
[dir="rtl"] .card-header h2,
[dir="rtl"] .card-header h3,
[dir="rtl"] .card-header h4,
[dir="rtl"] .card-header h5,
[dir="rtl"] .card-header h6 {
    color: var(--mawrid-white) !important;
}

/* RTL support for text readability fixes */
[dir="rtl"] .text-muted,
[dir="rtl"] .table .text-muted,
[dir="rtl"] .card-body .text-muted,
[dir="rtl"] .table-borderless .text-muted,
[dir="rtl"] .table tbody .text-muted,
[dir="rtl"] .table td .text-muted,
[dir="rtl"] .table tr .text-muted {
    color: var(--mawrid-dark-blue) !important;
    font-weight: 600 !important;
}

[dir="rtl"] .table tbody td,
[dir="rtl"] .table-borderless tbody td,
[dir="rtl"] .card-body table td,
[dir="rtl"] .card-body table th:not(.table-dark th) {
    color: var(--mawrid-dark-blue) !important;
}

[dir="rtl"] .table tbody th.text-muted,
[dir="rtl"] .table-borderless tbody th.text-muted,
[dir="rtl"] .table tbody th,
[dir="rtl"] .table-borderless tbody th {
    color: var(--mawrid-dark-blue) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

[dir="rtl"] .welcome-title,
[dir="rtl"] .welcome-subtitle,
[dir="rtl"] .welcome-message .welcome-title,
[dir="rtl"] .welcome-message .welcome-subtitle,
[dir="rtl"] .login-body .welcome-title,
[dir="rtl"] .login-body .welcome-subtitle,
[dir="rtl"] .login-body .welcome-message h2,
[dir="rtl"] .login-body .welcome-message p {
    color: var(--mawrid-dark-blue) !important;
}

[dir="rtl"] .login-body .welcome-subtitle {
    color: var(--mawrid-dark-gray) !important;
}

/* ================================
   ACCESSIBILITY ENHANCEMENT
   ================================ */

/* Ensure sufficient contrast for all interactive elements */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--mawrid-gold);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card-header,
    .modal-header,
    .dashboard-header,
    .management-header,
    .login-header,
    .navbar,
    .sidebar {
        background: var(--mawrid-dark-blue) !important;
        color: var(--mawrid-white) !important;
    }
    
    .table th,
    .attendance-table th {
        background: var(--mawrid-dark-blue) !important;
        color: var(--mawrid-white) !important;
    }
}

/* Print accessibility */
@media print {
    .card-header,
    .modal-header,
    .table th {
        background: black !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

/* ================================
   TEXT READABILITY FIXES FOR LIGHT BACKGROUNDS
   ================================ */

/* Fix text-muted class to be readable on light backgrounds */
.text-muted,
.table .text-muted,
.card-body .text-muted,
.table-borderless .text-muted,
.table tbody .text-muted,
.table td .text-muted,
.table tr .text-muted {
    color: var(--mawrid-dark-blue) !important;
    font-weight: 600 !important;
}

/* Ensure table content on light backgrounds uses dark text */
.table tbody td,
.table-borderless tbody td,
.card-body table td,
.card-body table th:not(.table-dark th) {
    color: var(--mawrid-dark-blue) !important;
}

/* Specific fixes for table labels that should be dark and readable */
.table tbody th.text-muted,
.table-borderless tbody th.text-muted,
.table tbody th,
.table-borderless tbody th {
    color: var(--mawrid-dark-blue) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Login page welcome text should be dark and readable */
.welcome-title,
.welcome-subtitle,
.welcome-message .welcome-title,
.welcome-message .welcome-subtitle,
.login-body .welcome-title,
.login-body .welcome-subtitle,
.login-body .welcome-message h2,
.login-body .welcome-message p {
    color: var(--mawrid-dark-blue) !important;
}

.login-body .welcome-subtitle {
    color: var(--mawrid-dark-gray) !important;
}

/* ================================
   CUSTOM COMPONENTS ACCESSIBILITY
   ================================ */

/* Ensure chart elements have proper contrast */
.chart-bar,
.chart-bar-value {
    background: var(--mawrid-blue) !important;
    color: var(--mawrid-white) !important;
}

/* Export buttons */
.export-pdf,
.export-excel {
    color: var(--mawrid-white) !important;
}

/* Metric cards with blue elements */
.metric-card.primary .metric-number,
.metric-card.info .metric-number {
    color: var(--mawrid-dark-blue) !important;
}

/* Timeline elements */
.timeline-icon {
    color: var(--mawrid-dark-blue) !important;
}

/* ================================
   FORCED COLOR MODE SUPPORT
   ================================ */

@media (forced-colors: active) {
    .card-header,
    .modal-header,
    .table th,
    .navbar,
    .sidebar {
        forced-color-adjust: none;
        background: ButtonFace !important;
        color: ButtonText !important;
        border: 1px solid ButtonBorder !important;
    }
}