/* ============================================================
   a11y.css – Accessibility shared styles (additive, non-breaking)
   All rules are scoped so they do not override existing layout CSS.
   ============================================================ */

/* ---- Skip-to-content link --------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    background: #ffffff;
    color: #0d47a1;
    padding: 10px 16px;
    border: 2px solid #0d47a1;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}
.skip-link:focus {
    position: fixed;
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

/* ---- Screen-reader only utility --------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Visible focus indicator ------------------------------ */
:focus-visible {
    outline: 3px solid #0d47a1;
    outline-offset: 2px;
}
/* Ensure interactive elements always show a focus ring */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #0d47a1;
    outline-offset: 2px;
}

/* ---- aria-invalid field styling --------------------------- */
[aria-invalid="true"] {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 1px #c62828 !important;
}

/* ---- Live region for AJAX/validation announcements -------- */
[role="status"],
[aria-live] {
    /* no visual change; purely semantic */
}

/* ---- Modal accessibility additions (attribute-only) ------- */
/* When modal has role=dialog the existing Bootstrap backdrop  */
/* handles the visual layer; nothing extra needed here.        */

/* ---- Utility text-color classes with failing contrast ----------
   material-dashboard sets .text-danger: #f44336 on white = 3.66:1
   .description / .card-description: #999999 on white = 2.85:1
   Both fail WCAG 1.4.3 (AA requires 4.5:1).
   ---------------------------------------------------------------- */
.text-danger  { color: #c62828 !important; }   /* 5.5:1 on white */
.text-warning { color: #e65100 !important; }   /* 4.6:1 on white */
.text-primary { color: #1565c0 !important; }   /* 5.9:1 on white */
.description,
.card-description { color: #595959 !important; }  /* 7:1 on white */

/* ---- Active sidebar tab contrast fix (WCAG 1.4.3) -------------
   .selected-tab sets bg #4c4c4c but material-dashboard `a { color:#333333 }`
   overrides inherited #fff → dark on dark = 1.47:1. Force white on anchor.
   ---------------------------------------------------------------- */
.selected-tab a,
.selected-tab a:hover,
.selected-tab a:focus {
    color: #fff !important;
}

/* ---- Navbar text contrast fix (WCAG 1.4.3) --------------------
   .navbar.navbar-transparent has no background → body color #777
   inherits and sits over white page = 3.95:1, fails 4.5:1.
   Affects navbar-brand (page title), Help link, user-name link.
   ---------------------------------------------------------------- */
.navbar .navbar-brand,
.navbar .navbar-nav > li > a,
.navbar .navbar-text {
    color: #595959 !important;
}

/* ---- Notification badge contrast fix (WCAG 1.4.3) -------------
   background:red + color:#fff = 3.99:1 — FAILS. Use #c62828 (5.5:1)
   Applied here as safety net in case header.php is cached.
   ---------------------------------------------------------------- */
.notif-count {
    background-color: #c62828 !important;
}

/* ---- Dashboard button contrast (WCAG 1.4.3) -------------------
   .selected-filter / .big-btn use #4caf50 bg + white text = 2.78:1
   .selected-big-btn uses #999 bg + white text = 2.85:1 — both FAIL.
   .btn-success also uses #4caf50-family colors that fail.
   ---------------------------------------------------------------- */
#main-content .selected-filter,
#main-content .big-btn,
#main-content .btn.btn-warn,
#main-content .btn-success,
#main-content a.btn-success {
    background-color: #2e7d32 !important;
    color: #fff !important;
}
#main-content .selected-big-btn {
    background-color: #424242 !important;
    color: #fff !important;
}

/* ---- btn-group adjacent-button separator (WCAG 1.4.11) --------
   Bootstrap 3 collapses adjacent borders in .btn-group via -1px
   margin, making same-coloured buttons appear fused. A white
   separator restores sufficient boundary contrast (3:1 ratio).
   ---------------------------------------------------------------- */
#main-content .btn-group > .btn + .btn {
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ---- Label contrast fix (WCAG 1.4.3) --------------------------
   Labels inherit body color #777 = 4.48:1 on white — fails 4.5:1.
   ---------------------------------------------------------------- */
#main-content label {
    color: #595959 !important;
}

/* ---- Dashboard / authenticated pages contrast fix (WCAG 1.4.3)
   body { color:#777 } fails 4.5:1 on white/near-white backgrounds.
   Scoped to #main-content so sidebar and header are unaffected.
   Alerts are excluded — they use white text on colored backgrounds
   and need their own background fix (see below).
   ---------------------------------------------------------------- */
#main-content p:not(.alert):not([class*="alert"]),
#main-content td,
#main-content th,
#main-content li:not(.alert),
#main-content span:not(.badge):not(.label):not([class*="alert"]),
#main-content small,
#main-content legend,
#main-content .card-header,
#main-content .title {
    color: #595959;
}

/* ---- Alert contrast fixes (WCAG 1.4.3) ------------------------
   material-dashboard sets bright alert backgrounds with white text
   — all fail 4.5:1. Fix: use dark text (#1a1a1a) on the original
   background instead of changing background color, preserving the
   existing visual design as closely as possible.
   Also ensures #main-content color override doesn't bleed in.
   ---------------------------------------------------------------- */
.alert-danger  { color: #1a1a1a !important; }  /* dark on #f55a4e = 5.5:1 */
.alert-success { color: #1a1a1a !important; }  /* dark on #5cb860 = 4.7:1 */
.alert-warning { color: #1a1a1a !important; }  /* dark on #ffa21a = 9.9:1 */
.alert-info    { color: #1a1a1a !important; }  /* dark on #00d3ee = 7.5:1 */

/* ---- Sr#16/Sr#17: Contrast fix for <strong> inside <li> (WCAG 1.4.3) ----
   body { color:#777 } (3.95:1) fails on white and gray backgrounds.
   #main-content li already corrected above. This rule ensures <strong>
   inside any <li> within .content / .main-panel also inherits the
   corrected color rather than the body #777 default, covering
   company-info sections rendered outside #main-content by database config.
   Safe: .disclaimer li strong gets color from .disclaimer { color:#721c24 }
   which is a more-specific rule and will still override `inherit` here.
   ------------------------------------------------------------------- */
.content li > strong,
.main-panel li > strong,
.wrapper li > strong { color: inherit; }

/* Raise any remaining #777 list text inside known containers */
.content li,
.main-panel > .content li { color: #595959; }

/* ---- Parsley validation error messages (WCAG 1.4.3 AA) --------
   Broad li rules (.innerContainer li, #main-content li) override
   parsley.css color:red (4.0:1, fails AA). Restore globally with
   #c62828 (5.5:1 on white) — matches .text-danger fix everywhere.
   ---------------------------------------------------------------- */
.parsley-errors-list li {
    color: #c62828 !important;
}

/* ---- Minimum touch/click target size (WCAG 2.5.8 AA) ---------
   Inline text links inside auth pages can be too small on mobile.
   Expand tap area without changing visual layout.
   ---------------------------------------------------------------- */
.innerContainer a {
    display: inline-block;
    min-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ---- Text-spacing resilience (WCAG 1.4.12 AA) -----------------
   Ensures content does not clip when users override letter/word/
   line spacing via browser extension or user stylesheet.
   Scoped to text nodes only — excludes form controls so button
   dimensions are not affected.
   ---------------------------------------------------------------- */
.innerContainer p,
.innerContainer li,
.innerContainer span,
.innerContainer label,
.innerContainer div,
.innerContainer td,
.innerContainer th {
    overflow-wrap: break-word;
}

/* ---- Color contrast fixes – Login / Auth pages (WCAG 1.4.3) ---
   These are ADDITIVE overrides scoped to .innerContainer (login,
   reset-password, OTP pages) and to .btn on those pages.
   The base style.css sets body { color:#777 } and .btn {
   background:#4caf50 } which both fail AA (4.5:1). We fix them
   without touching style.css to avoid regressions elsewhere.
   ---------------------------------------------------------------- */

/* body color #777 gives ~3.95:1 on white → fix to #595959 (7.0:1) */
.innerContainer,
.innerContainer p,
.innerContainer li,
.innerContainer small {
    color: #595959;
}

/* Floating label class uses #999 (~2.85:1) → fix to #595959 */
.innerContainer .label,
.innerContainer label {
    color: #595959 !important;
}

/* .input text color (#777) in login container → fix */
.innerContainer .input {
    color: #595959 !important;
}

/* Focused / valid floating label was #ccc → unreadable */
.innerContainer .input:focus + .label,
.innerContainer input:valid + .label {
    color: #595959 !important;
}

/* .btn: white text on #4caf50 green = ~2.78:1 → darken to #2e7d32 (5.1:1 with white) */
.innerContainer .btn,
.innerContainer input[type="submit"] {
    background-color: #2e7d32 !important;
    border-color: #1b5e20 !important;
}

/* ---- Semantic headings matching existing visual h4/h5 sizing ------- */
.a11y-inherit-heading { font-size: inherit; font-weight: inherit; margin: 0; }
.a11y-section-heading { font-size: inherit; font-weight: inherit; margin-top: 0; margin-left: 15px; }

/* ---- Modal header headings ---------------------------------------- */
.modal-header h2 { font-size: 1.1em; font-weight: 600; margin: 0; }

/* ---- Reflow at 320px viewport (WCAG 1.4.10 AA) --------------------
   Prevents horizontal scroll at 320px-wide viewport (equivalent to
   400% zoom on 1280px screen). Inherits existing responsive breakpoints.
   -------------------------------------------------------------------- */
@media screen and (max-width: 320px) {
    .main-panel,
    .container-fluid,
    .card,
    .card-content,
    table { max-width: 100%; overflow-x: auto; }
    [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

/* ---- Portrait orientation (WCAG 1.3.4 AA) -------------------------
   Prevent content from being locked to landscape by not constraining
   min-height with landscape-only units. Sidebar position is NOT changed
   here — the existing fixed sidebar layout must be preserved.
   -------------------------------------------------------------------- */
@media screen and (orientation: portrait) {
    .main-panel > .content {
        min-height: auto;
    }
}

/* ---- 200% zoom / narrow viewport (WCAG 1.4.4 AA) -----------------
   At 200% zoom on a 1280px screen the viewport is ~640px wide.
   Fixed widths (.image-container, .instructions, wide chart wrappers)
   clip or cause horizontal scroll. Override to fluid widths so all
   content reflows without loss of information.
   -------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
    /* OTP / 2FA page image container */
    .image-container {
        width: 100% !important;
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Instruction text block next to QR code */
    .instructions {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Chart / widget wrappers that use inline max-width */
    .chart-container,
    .widget-container,
    [class*="chart-wrap"] {
        max-width: 100% !important;
        overflow-x: auto;
    }
    /* Canvas elements (Chart.js) — only constrain width; height is set inline by Chart.js */
    canvas {
        max-width: 100% !important;
    }
    /* Filter / option rows that use flex without wrapping */
    .options,
    .filters,
    .filter-row,
    .btn-group-horizontal {
        flex-wrap: wrap !important;
    }
    /* Generic center-block helpers */
    .center-block {
        max-width: 100% !important;
    }
    /* Ensure the authenticated main content area scrolls rather than clips */
    .main-panel,
    .main-panel > .content,
    .container-fluid,
    .card,
    .card-content {
        max-width: 100% !important;
        overflow-x: auto;
    }
}

/* ---- Chart.js external tooltip (WCAG 1.4.13 – findings #15, #36, #39) ------
   Styled to match Chart.js default canvas tooltip (dark bg, white text).
   pointer-events:auto lets users hover over the tooltip without it closing.
   -------------------------------------------------------------------- */
.a11y-chart-tooltip {
    position: fixed;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 9999;
    display: none;
    max-width: 280px;
    white-space: normal;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.a11y-chart-tooltip strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
}