/**
 * app.css — Government ECM Platform
 * Phase 15B: Accessibility basics (WCAG 2.1 AA)
 *
 * Contrast notes (changes vs Bootstrap defaults):
 *   - .text-white-50 on #1a3a5c topbar: ratio ≈ 4.8:1 → raised to .text-white (5.9:1)
 *   - .text-muted on white:  Bootstrap #6c757d on #fff ≈ 4.6:1 (passes AA for normal text)
 *   - Sidebar nav-link rgba(255,255,255,.78) on #1a3a5c ≈ 4.5:1 (borderline AA — kept)
 *   - Badge bg-warning (yellow) with .text-dark ≈ 5.9:1 on white bg (passes)
 */

/* ============================================================
   Skip-to-content link
   Bootstrap's .visually-hidden-focusable covers the hidden state;
   this rule ensures the visible state is clearly positioned.
   ============================================================ */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: fixed !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
    z-index: 9999 !important;
    padding: 0.5rem 1rem !important;
    background: #1a73e8 !important;
    color: #fff !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}

/* ============================================================
   Focus indicators — WCAG 2.1 AA §2.4.7 / §2.4.11
   High-contrast outline replaces or augments browser default.
   outline-offset separates it from the element border so it's
   visible even on coloured backgrounds.
   ============================================================ */
:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.list-group-item-action:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
    /* Do NOT remove box-shadow: Bootstrap adds it for .form-control etc.
       We layer on top — both provide accessible state. */
}

/* Ensure Bootstrap never suppresses our outline with box-shadow only. */
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4);
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
}

/* ============================================================
   Contrast fixes — obvious low-contrast spots
   ============================================================ */

/*
 * Topbar icons/links were .text-white-50 (rgba 255,255,255,.5) on #1a3a5c.
 * Contrast ratio: ≈ 3.1:1 — fails AA for normal text (need 4.5:1).
 * Fix: raise to rgba(255,255,255,.85) ≈ 5.6:1.
 */
.app-topbar .text-white-50 {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Sidebar muted section labels (.nav-section):
 * rgba(255,255,255,.38) on #1a3a5c ≈ 2.1:1 — fails.
 * These are grouping labels (large, uppercase) — 3:1 needed for large text.
 * Fix: raise to rgba(255,255,255,.6) ≈ 3.5:1.
 */
.nav-section {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   Responsive helpers
   ============================================================ */

/* Mobile sidebar: collapse on small screens via Bootstrap offcanvas pattern.
   The .app-shell sidebar collapses to width:0 on screens < 768px;
   Bootstrap's .d-md-flex + toggler button handles the toggle. */
@media (max-width: 767.98px) {
    /* NOTE: selectors are scoped to .app-shell so they out-specify the base
       `.app-sidebar { display:flex }` rule declared in the layout's inline
       <style> (which loads after this file — equal specificity would lose on
       source order). Without this, the sidebar never collapsed on mobile. */
    .app-shell .app-sidebar {
        display: none;
    }
    .app-shell .app-sidebar.sidebar-open {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1040;
        width: 240px;
        overflow-y: auto;
    }
    [dir="rtl"] .app-shell .app-sidebar.sidebar-open {
        left: auto;
        right: 0;
    }
}

/* Ensure tables use horizontal scrolling at small widths */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   aria-live flash region — ensure it has some minimum visibility
   ============================================================ */
#flash-region:empty {
    display: none;
}

/* ============================================================
   Required field indicator — visual cue in addition to aria-required
   ============================================================ */
.required-indicator {
    color: #c0392b;
    font-weight: bold;
    margin-inline-start: 0.15em;
}

/* ============================================================
   Mobile access — small-screen responsiveness
   ============================================================ */

/* Backdrop behind the open mobile sidebar (created by JS in the layout). */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1039; /* just under the sidebar's 1040 */
    border: 0;
}

/* Close (X) button — only meaningful inside the open mobile sidebar. */
.app-sidebar .sidebar-close { display: none; }

@media (max-width: 767.98px) {
    /* Tighter content padding on small screens. */
    .app-main { padding: 1rem; overflow-x: hidden; }

    /* Wide data tables that are NOT wrapped in .table-responsive become a
       horizontally-scrollable block, so a wide grid scrolls inside its own
       box instead of forcing the whole page to scroll sideways. Tables that
       already sit in a .table-responsive wrapper are excluded. */
    .app-main *:not(.table-responsive) > table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Long unbreakable tokens (UUIDs, codes, paths) wrap instead of
       overflowing the viewport. */
    .app-main code,
    .app-main .text-break,
    .breadcrumb-item {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Keep the topbar cluster from overflowing — constrain the switcher and
       tighten the navbar padding + the right-hand cluster's gap so the user
       menu does not push past the viewport edge on narrow phones. */
    #ministry-switcher { max-width: 130px; }
    .app-topbar .navbar { padding-left: 0.5rem; padding-right: 0.5rem; }
    .app-topbar .d-flex.gap-3 { gap: 0.5rem !important; }

    /* Reveal the in-sidebar close button when the sidebar is open. */
    .app-sidebar.sidebar-open .sidebar-close {
        display: inline-flex;
        align-self: flex-end;
        margin: 0.25rem 0.5rem 0.25rem 0;
    }
}