/* VolunTrak accessibility layer (ADO #4404, WCAG 2.1 AA).
   Loaded AFTER Acara's style.css and theme.css. Keep this file identical in
   VolunTrak.Web/wwwroot/css/a11y.css and VolunTrak.Admin/wwwroot/css/a11y.css.

   Colour policy: Acara's stock palette (#FE634E primary, #2BC155 success, #FF4847 danger,
   #9E9E9E muted, #7E7E7E body) fails the 4.5:1 text contrast minimum (1.4.3) on white and on the
   #F4F6FA page background. The tokens below are the darkened equivalents that reach >= 4.5:1
   against both. Decorative uses of the brand colours (illustrations, borders, chart fills) are
   left alone; only text and filled controls that carry text are remapped. */

:root {
    --vt-a11y-primary: #B93A24;       /* white on it 5.6:1; on #F4F6FA 5.2:1 */
    --vt-a11y-primary-hover: #9B2F1D;
    --vt-a11y-success: #1A7F37;       /* white 5.1:1 */
    --vt-a11y-success-hover: #156B2E;
    --vt-a11y-danger: #C62828;        /* white 5.6:1 */
    --vt-a11y-danger-hover: #A81F1F;
    --vt-a11y-warning-text: #8A4B00;  /* on white 6.4:1 */
    --vt-a11y-muted: #5A5F66;         /* on white 6.6:1; on #FFD1D1 4.6:1 */
    --vt-a11y-body: #4A4A4A;
    --vt-a11y-focus: #0B57D0;         /* 3:1+ against white and against the brand orange */
    --bs-body-color: var(--vt-a11y-body);
    --bs-link-color: var(--vt-a11y-primary);
    --bs-link-hover-color: var(--vt-a11y-primary-hover);
    --bs-link-color-rgb: 185, 58, 36;
    --bs-link-hover-color-rgb: 155, 47, 29;
}

body { color: var(--vt-a11y-body); }

/* ---- Skip link (2.4.1) -------------------------------------------------------------------- */
.vt-skip-link {
    position: absolute;
    left: .5rem;
    top: -4rem;
    z-index: 100000;
    padding: .65rem 1rem;
    background: #fff;
    color: #111;
    border: 2px solid var(--vt-a11y-focus);
    border-radius: .35rem;
    font-weight: 600;
    text-decoration: none;
}
.vt-skip-link:focus, .vt-skip-link:focus-visible { top: .5rem; outline: 3px solid var(--vt-a11y-focus); outline-offset: 2px; }

/* <header> wrapper only exists to give the fixed brand + top bar a banner landmark. */
.vt-banner { display: contents; }
main.content-body:focus { outline: none; }

/* ---- Focus visible (2.4.7) ---------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, .btn:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .nav-control:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible {
    outline: 3px solid var(--vt-a11y-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

/* ---- Date/time native controls: focus ring (2.4.7, ADO #4424) ---------------------------------
   Browsers can fail to apply :focus-visible to the native date/time widget the same way they do for
   a plain text input (observed missing on the event-create form's EventDate/StartTime/EndTime
   fields). Force a visible outline on plain :focus too for these specific control types so the
   indicator always shows, regardless of how focus was triggered. */
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus {
    outline: 3px solid var(--vt-a11y-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

/* ---- Native-button resets for controls that used to be div/a role=button ------------------- */
.vt-btn-reset { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
button.nav-control { background: transparent; border: 0; min-width: 44px; min-height: 44px; }
button.nav-control .hamburger .line { background: var(--vt-a11y-primary); }
.vt-toggle-header { cursor: pointer; user-select: none; width: 100%; background: transparent; border: 0; text-align: left; font: inherit; color: inherit; }

/* ---- Mini sidebar: keep link names available to assistive tech (4.1.2 / 2.4.4) ------------ */
[data-sidebar-style="mini"] .deznav .metismenu > li > a .nav-text {
    display: block !important;
    position: absolute;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
/* ...and reveal it as a label on hover / keyboard focus (1.4.13: hoverable, persistent, dismissible by leaving). */
[data-sidebar-style="mini"] .deznav .metismenu > li > a:hover .nav-text,
[data-sidebar-style="mini"] .deznav .metismenu > li > a:focus-visible .nav-text {
    width: auto; height: auto; margin: 0; padding: .35rem .75rem;
    clip: auto; clip-path: none; overflow: visible;
    left: 100%; top: 50%; transform: translateY(-50%);
    background: #1e2746; color: #fff; border-radius: .4rem; z-index: 10000; font-size: .85rem;
}

/* ---- Text colours (1.4.3) ---------------------------------------------------------------- */
.text-muted, .form-text, .text-body-secondary { color: var(--vt-a11y-muted) !important; }
.text-secondary { color: #565b61 !important; }
small { color: var(--vt-a11y-muted); }
:where(.text-white, .bg-primary, .bg-success, .bg-danger, .bg-dark, .bg-info, .bg-warning, .bg-secondary, .badge, .btn, .alert, .card-header, .table-danger, .table-success, .table-warning) small { color: inherit; }
/* Headings and lead text placed on a filled surface follow that surface's foreground, not the default heading colour. */
:where(.text-white, .bg-primary, .bg-success, .bg-danger, .bg-dark, .bg-info, .bg-secondary) :is(h1, h2, h3, h4, h5, h6, .card-title, .card-text) { color: inherit; }
.bg-warning :is(h1, h2, h3, h4, h5, h6, .card-title, .card-text), .bg-warning.text-white, .card.bg-warning { color: #212529 !important; }
.bg-dark { background-color: #3d4465 !important; color: #fff !important; }
.alert-warning { color: #6b3a00; }
.alert-info { color: #1f2a6b; }
.alert-success { color: #145a2a; }
.alert-danger { color: #8a1c1c; }
.text-primary { color: var(--vt-a11y-primary) !important; }
.text-success { color: var(--vt-a11y-success) !important; }
.text-danger { color: var(--vt-a11y-danger) !important; }
.text-warning { color: var(--vt-a11y-warning-text) !important; }
.text-dark { color: #212529 !important; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--vt-a11y-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vt-a11y-muted); }
.vt-layout-breadcrumb .breadcrumb-item a { color: var(--vt-a11y-primary); text-decoration: underline; }
.vt-layout-breadcrumb .breadcrumb-item.active { color: var(--vt-a11y-muted); }
/* Links inside running text must be distinguishable without colour alone (1.4.1). */
p a:not(.btn), li a:not(.btn):not(.dropdown-item):not(.page-link), td a:not(.btn), .form-text a, .alert a:not(.btn) { text-decoration: underline; }

/* ---- Filled controls carrying text (1.4.3) ------------------------------------------------ */
.btn-primary, .bg-primary, .badge.bg-primary, .page-item.active .page-link, .nav-pills .nav-link.active {
    background-color: var(--vt-a11y-primary) !important; border-color: var(--vt-a11y-primary) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--vt-a11y-primary-hover) !important; border-color: var(--vt-a11y-primary-hover) !important; color: #fff !important; }
.btn-outline-primary { color: var(--vt-a11y-primary) !important; border-color: var(--vt-a11y-primary) !important; background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--vt-a11y-primary) !important; color: #fff !important; }
.btn-success, .bg-success, .badge.bg-success { background-color: var(--vt-a11y-success) !important; border-color: var(--vt-a11y-success) !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--vt-a11y-success-hover) !important; border-color: var(--vt-a11y-success-hover) !important; }
.btn-outline-success { color: var(--vt-a11y-success) !important; border-color: var(--vt-a11y-success) !important; background: transparent; }
.btn-outline-success:hover, .btn-outline-success:focus { background-color: var(--vt-a11y-success) !important; color: #fff !important; }
.btn-danger, .bg-danger, .badge.bg-danger { background-color: var(--vt-a11y-danger) !important; border-color: var(--vt-a11y-danger) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: var(--vt-a11y-danger-hover) !important; border-color: var(--vt-a11y-danger-hover) !important; }
.btn-outline-danger { color: var(--vt-a11y-danger) !important; border-color: var(--vt-a11y-danger) !important; background: transparent; }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--vt-a11y-danger) !important; color: #fff !important; }
.btn-warning, .bg-warning, .badge.bg-warning { color: #212529 !important; }
.badge.bg-info, .bg-info { color: #fff !important; }
.btn-outline-secondary { color: #565b61 !important; border-color: #6c757d !important; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { color: #fff !important; background: #565b61 !important; }
/* Acara's --bs-dark (#B1B1B1) is too light for text/outline use (ratio ~2.1:1 on white). */
.btn-outline-dark { color: var(--vt-a11y-muted) !important; border-color: var(--vt-a11y-muted) !important; background: transparent; }
.btn-outline-dark:hover, .btn-outline-dark:focus { color: #fff !important; background: var(--vt-a11y-muted) !important; }
.btn-secondary { background-color: #565b61 !important; border-color: #565b61 !important; color: #fff !important; }
.badge-vt-pending  { background: rgba(250,204,21,.18); color: #7a4a00; }
.badge-vt-approved { background: rgba(34,197,94,.18);  color: #0f5a2a; }
.badge-vt-denied   { background: rgba(248,113,113,.18); color: #9b1c1c; }
.table-danger, .table-danger > td, .table-danger > th { --bs-table-bg: #fde2e2; }
.table-danger .text-muted, .table-danger .small { color: #4a4f55 !important; }

/* ---- Consolidated validation-summary error links (ADO #4404 finding 4, WCAG 1.4.3) --------
   The generic `.alert a:not(.btn)` rule further down does not win against the browser/Bootstrap
   default link colour with enough specificity in every case; be explicit so the error links in
   data-vt-validation-summary's single alert region always meet 4.5:1 against the alert-danger
   background. */
[data-vt-validation-summary] [id$="-error-summary"] a,
[data-vt-validation-summary] [id$="-error-summary-list"] a {
    color: #7A2010 !important;
    text-decoration: underline;
}
[data-vt-validation-summary] [id$="-error-summary"] a:hover,
[data-vt-validation-summary] [id$="-error-summary-list"] a:hover {
    color: #5E1808 !important;
}

/* ---- Forms: error semantics (3.3.1), non-text contrast of control borders (1.4.11) -------- */
.form-control, .form-select, .form-check-input { border-color: #767676; }
.text-danger.field-validation-error, .field-validation-error, .invalid-feedback { color: var(--vt-a11y-danger) !important; font-weight: 500; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--vt-a11y-danger) !important; border-width: 2px; }

/* ---- Reflow (1.4.10) / text spacing (1.4.12) ----------------------------------------------- */
img, svg, video, canvas { max-width: 100%; }
.table-responsive { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
@media (max-width: 400px) {
    .content-body .container-fluid { padding-left: 15px; padding-right: 15px; } /* .row uses -15px gutters; less padding would clip 1.4.10 */
    .vt-page-header { flex-direction: column; align-items: flex-start; }
    .dropdown-menu { max-width: calc(100vw - 1rem); }
    h1.dashboard_bar { font-size: 1.05rem; }
}

/* ---- Page title in the top bar is the page h1 ----------------------------------------------- */
h1.dashboard_bar { margin: 0; }

/* ---- Motion (2.3.3 / good practice) --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

/* ---- Forced colours ------------------------------------------------------------------------ */
@media (forced-colors: active) {
    .hamburger .line { background: CanvasText !important; }
    .vt-skip-link { border-color: Highlight; }
}

/* ---- Inputs, links, pagination (1.4.3 / 1.4.1) ----------------------------------------------- */
.form-control, .form-select, .form-control:focus, .form-select:focus { color: #2b2f36; }
.form-control::placeholder, textarea::placeholder { color: #6b7078; opacity: 1; }
label.required, .form-label.required { color: inherit; }
label.required::after, .form-label.required::after { color: var(--vt-a11y-danger); }
.form-label.required { color: var(--vt-a11y-body); }
a:where(:not([class])), .breadcrumb a, .list-group-item a:not(.btn):not(.badge), .card-body a:not(.btn):not(.badge):not(.stretched-link), .table a:not(.btn):not(.badge), .alert a:not(.btn), .form-text a, .public-footer a {
    color: var(--vt-a11y-primary);
}
a:where(:not([class])):hover, .breadcrumb a:hover, .list-group-item a:not(.btn):hover, .card-body a:not(.btn):hover, .table a:not(.btn):hover { color: var(--vt-a11y-primary-hover); }
/* Acara's `.page-titles .breadcrumb li.active a` (style.css) is more specific than the generic
   `.breadcrumb a` rule above and repaints an active/current breadcrumb link back to the raw
   Acara orange -- match its specificity to keep the AA-safe colour. */
.page-titles .breadcrumb li.active a { color: var(--vt-a11y-primary); }
.page-link { color: var(--vt-a11y-primary); }
.page-item.disabled .page-link { color: #6b7078; }
.btn-outline-warning { color: var(--vt-a11y-warning-text) !important; border-color: var(--vt-a11y-warning-text) !important; background: transparent; }
.btn-outline-warning:hover, .btn-outline-warning:focus { background-color: #FF6D4D !important; color: #212529 !important; }
.btn-outline-secondary.active, .btn-outline-secondary:active, .btn-check:checked + .btn-outline-secondary, .show > .btn-outline-secondary.dropdown-toggle {
    background: #565b61 !important; border-color: #565b61 !important; color: #fff !important;
}

/* ---- Misc contrast fixes found by the axe baseline (ADO #4404) ----------------------------- */
.pagination .page-item .page-link, .page-link { color: var(--vt-a11y-primary); }
.pagination .page-item.disabled .page-link { color: #6b7078; }
.pagination .page-item.active .page-link { color: #fff; }
code { color: #A8232F; }
.alert a:not(.btn), .alert-info a:not(.btn), [class*="bg-opacity"] a:not(.btn) { color: #7A2010; }
.authincation-content { background: var(--vt-a11y-primary) !important; }
.authincation .text-white-50, .authincation .text-white-50 a { color: #fff !important; }
.authincation a:not(.btn) { color: #fff; text-decoration: underline; }
.authincation .btn-outline-light, .authincation-content .btn-outline-light { color: #fff !important; border-color: #fff !important; }

/* ---- Reflow at 320 CSS px (1.4.10): let wide control groups wrap ---------------------------- */
.pagination { flex-wrap: wrap; }
@media (max-width: 576px) {
    .d-flex.gap-2, .d-flex.gap-3, .btn-group { flex-wrap: wrap; }
    .vt-page-header > * { max-width: 100%; }
}

/* ---- Combobox option highlight (keyboard focus within a listbox, 2.4.7) ------------------------- */
[role="listbox"] [role="option"][aria-selected="true"] { background: #DCE8FB; outline: 2px solid var(--vt-a11y-focus); outline-offset: -2px; }

/* ---- Menus and sidebar text (1.4.3), mobile page title stays a real h1 (1.3.1) ----------------- */
.dropdown-item, .dropdown-menu .dropdown-item.ai-icon { color: var(--vt-a11y-body); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { color: #111; background: #EEF1F6; }
.dropdown-item.text-danger { color: var(--vt-a11y-danger) !important; }
.deznav .metismenu a, .deznav .metismenu > li > a { color: #555B62; }
.deznav .metismenu > li.mm-active > a, .deznav .metismenu > li:hover > a, .deznav .metismenu > li > a:focus { color: var(--vt-a11y-primary); }
.deznav .metismenu > li.mm-active > a i, .deznav .metismenu > li:hover > a i { color: inherit; }
[data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a,
[data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li:hover > a { background: var(--vt-a11y-primary); color: #fff; }
.deznav .copyright, .deznav .copyright p, .deznav .copyright a { color: var(--vt-a11y-muted); }
@media (max-width: 767.98px) {
    h1.dashboard_bar {
        display: block !important; position: absolute !important;
        width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
}