/* =============================================================
 * Accessibility & Contrast Fixes — W3C WAI WCAG 2.1 AA targeted
 * -------------------------------------------------------------
 * Reference: https://www.w3.org/WAI/standards-guidelines/ar
 * Goals:
 *   • Color contrast ≥ 4.5:1 for normal text, ≥ 3:1 for UI components
 *   • Visible focus indicator on every interactive element (2.4.7)
 *   • Skip link visible on focus (2.4.1)
 *   • Form labels associated with controls (3.3.2 + 4.1.2)
 *   • Reduced motion respected (2.3.3)
 *   • RTL-safe (3.1.2)
 * Loaded LAST so these win over style.css and the RTL stylesheet.
 * ============================================================= */

/* ── 2.4.1  Skip-link, hidden until keyboard focus ──────────── */
.skip-link {
    position: absolute;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 10px 18px;
    background: #2c3e50;
    color: #fff !important;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 6px;
    font-weight: 600;
    transition: top .15s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 8px;
    outline: 3px solid #04a9f5;
    outline-offset: 2px;
}

/* ── 2.4.7  Visible focus on every interactive element ──────── */
:where(a, button, input, textarea, select, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid #04a9f5 !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Buttons — keep brand color but ensure contrast on focus */
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(4, 169, 245, .35) !important;
    outline: 2px solid transparent;
}

/* Form fields — visible focus border */
.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection {
    border-color: #04a9f5 !important;
    box-shadow: 0 0 0 3px rgba(4, 169, 245, .25) !important;
}

/* ── 3.3.2  Required asterisk readable + screen-reader text ─── */
.text-danger[aria-hidden="true"] { color: #b1392c !important; }
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 1.4.3  Body text contrast — was #6c757d on white (4.07:1, fails AA) ─ */
body,
.text-muted,
small.text-muted {
    color: #4a5568;       /* 7.16:1 vs white */
}
.text-muted {
    color: #5a6573 !important;
}

/* Placeholder contrast (1.4.3 — exempt but we improve anyway) */
::placeholder { color: #6c757d; opacity: 1; }

/* Link contrast in body text (1.4.3 + 1.4.11 non-color-conveyed) */
a:not(.btn):not(.nav-link) {
    color: #1a4d8c;
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:not(.btn):not(.nav-link):hover {
    color: #0e3768;
    text-decoration-thickness: 2px;
}

/* ── 2.3.3  Respect prefers-reduced-motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 1.4.10  Reflow / responsive — sidebar safe area ───────── */
.pcoded-content { min-width: 0; }   /* Stops 320px-wide horizontal scroll */

/* ── 1.4.11  Non-text contrast — table borders ─────────────── */
.table th, .table td { border-color: #d5dae0; }

/* =============================================================
 * Original contrast fixes kept below (legacy + general theme)
 * ============================================================= */

/* ── Topbar title — was white on a transparent (white) header ── */
.pcoded-header .topbar-title,
.topbar-title {
    color: #2c3e50 !important;
    font-weight: 600;
}

/* ── Topbar action icons (search/lang/dark-mode/etc.) ────────── */
.pcoded-header .navbar-nav > li > a,
.pcoded-header .navbar-nav > li > .dropdown > a {
    color: #3f4d67;
}
.pcoded-header .navbar-nav > li > a:hover,
.pcoded-header .navbar-nav > li > .dropdown > a:hover {
    color: #04a9f5;
}

/* ── Global search input contrast ────────────────────────────── */
.top-global-search-box .search-ic {
    color: #6c757d;
}
.top-global-search-box input.form-control {
    color: #2c3e50;
    background: #f8f9fa;
}
.top-global-search-box input.form-control::placeholder {
    color: #6c757d;
    opacity: 0.85;
}

/* ── Card headers using bg-* utility classes need WHITE text ── *
 * Without this rule, the master "transparent card-header" rule  *
 * collides with bg-success / bg-info / bg-warning / bg-danger.  */
.card .card-header.bg-primary,
.card .card-header.bg-success,
.card .card-header.bg-info,
.card .card-header.bg-warning,
.card .card-header.bg-danger,
.card .card-header.bg-dark,
.card .card-header.bg-secondary {
    background-clip: padding-box;
    color: #fff !important;
}
.card .card-header.bg-primary  { background: #04a9f5 !important; }
.card .card-header.bg-success  { background: #1de9b6 !important; }
.card .card-header.bg-info     { background: #3ebfea !important; }
.card .card-header.bg-warning  { background: #f4c22b !important; color: #2c3e50 !important; }
.card .card-header.bg-danger   { background: #f44236 !important; }
.card .card-header.bg-dark     { background: #2c3e50 !important; }
.card .card-header.bg-secondary{ background: #748892 !important; }

/* Same protection for elements using utility bg-* classes elsewhere */
.bg-success, .bg-info, .bg-primary, .bg-danger, .bg-dark, .bg-secondary {
    color: #fff;
}
.bg-warning, .bg-light {
    color: #2c3e50;
}

/* ── Status chips (active / inactive / pending) ──────────────── */
.badge.badge-success, .badge.bg-success { color: #fff !important; background-color: #1abc9c !important; }
.badge.badge-danger,  .badge.bg-danger  { color: #fff !important; background-color: #e74c3c !important; }
.badge.badge-warning, .badge.bg-warning { color: #2c3e50 !important; background-color: #f4c22b !important; }
.badge.badge-info,    .badge.bg-info    { color: #fff !important; background-color: #3498db !important; }
.badge.badge-secondary,.badge.bg-secondary { color: #fff !important; background-color: #748892 !important; }
.badge.badge-light,   .badge.bg-light   { color: #2c3e50 !important; background-color: #f1f3f5 !important; }
.badge { font-weight: 600; padding: .35em .6em; }

/* Pale "soft" badges that the LMS uses (e.g. status="منشور") need
   stronger text contrast than the default light-on-light styling. */
.badge.bg-success-soft, .badge.bg-soft-success,
.badge.badge-success-soft, .badge.badge-soft-success {
    background-color: #d1f7e8 !important; color: #0e8a5f !important;
    border: 1px solid #a8eccf;
}
.badge.bg-danger-soft, .badge.bg-soft-danger,
.badge.badge-danger-soft, .badge.badge-soft-danger {
    background-color: #fde2dd !important; color: #b1392c !important;
    border: 1px solid #f7c2b8;
}
.badge.bg-warning-soft, .badge.bg-soft-warning,
.badge.badge-warning-soft, .badge.badge-soft-warning {
    background-color: #fdf2cf !important; color: #8a6d09 !important;
    border: 1px solid #f7e3a1;
}
.badge.bg-info-soft, .badge.bg-soft-info,
.badge.badge-info-soft, .badge.badge-soft-info {
    background-color: #d6ebfa !important; color: #1e5f8a !important;
    border: 1px solid #a9d3f1;
}

/* ── Breadcrumb on light header ──────────────────────────────── */
.page-header .breadcrumb a,
.page-header .page-header-title h5 {
    color: #2c3e50;
}
.page-header .breadcrumb-item.active {
    color: #6c757d;
}

/* ── Form labels (avoid the very-light grey default) ─────────── */
.form-label, label.col-form-label, .form-group > label {
    color: #2c3e50;
    font-weight: 500;
}

/* ── Table column headers stay readable on hover ─────────────── */
table.dataTable thead th, .table thead th {
    color: #2c3e50;
    font-weight: 600;
    background: #f8f9fa;
}

/* ── Dropdown menu items ─────────────────────────────────────── */
.dropdown-menu .dropdown-item { color: #2c3e50; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: #f0f3f6; color: #04a9f5; }

/* ── 404 / 403 error card buttons ────────────────────────────── */
.btn-info { color: #fff !important; }

/* ── Sidebar item caption (when collapsed/expanded) ──────────── */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption > label {
    color: #adb7be !important;
}

/* ── Ensure RTL layout doesn't strip topbar gap ──────────────── */
[dir="rtl"] .topbar-title { margin-left: 10px; margin-right: 0; }

/* End accessibility-fixes.css */
