﻿/* ADA Compliant Styles */
:root {
    --error-color: #d63321;
    --focus-color: #005FCC;
    --primary-color: #0d6efd;
    --warning-color: #ffc107;
}

:focus {
    outline: 3px solid var(--focus-color) !important;
    outline-offset: 2px;
}

.error {
    color: var(--error-color);
    font-weight: bold;
}

.required::after {
    content: " *";
    color: var(--error-color);
    font-weight: bold;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.alert.alert-warning {
    border-left: 4px solid var(--warning-color);
    /* #7D6135 on Bootstrap alert-warning backgrounds = ~5.2:1 — passes 4.5:1 WCAG AA
       (Bootstrap 3 default #8A6D3B was 4.34:1, just below threshold) */
    color: #7D6135;
}

/* WCAG 1.4.11: Bootstrap .close uses opacity:0.2 making the × #C8C4AF on #FBF6DB (1.3:1).
   Override to full opacity dark color for 3:1 contrast against the warning alert background. */
.registerAlert .close {
    color: #595959;
    opacity: 1;
    text-shadow: none;
}

/* WCAG 1.4.11: Bootstrap .close uses opacity:0.2 making the × #C8C4AF on #FBF6DB (1.3:1).
   Override to full opacity dark color for 3:1 contrast against the warning alert background. */
.registerAlert .close {
    color: #595959;
    opacity: 1;
    text-shadow: none;
}

.ui-datepicker {
    font-size: 1em;
    background: white;
    border: 2px solid var(--focus-color);
    z-index: 9999 !important;
}

    .ui-datepicker a {
        color: var(--primary-color);
    }

.ui-state-highlight {
    border: 1px solid var(--focus-color);
}

table {
    border-collapse: collapse;
}

/* WCAG 1.4.10 Reflow: constrain date input width on larger viewports */
@media (min-width: 48em) {
    .txtInsuranceExp {
        max-width: 10em;
    }
}

th[scope="col"],
th[scope="row"] {
    text-align: left;
}

/* WCAG 1.4.12: at 200% zoom with text-spacing rules applied, Bootstrap's float-based
   grid cols stack full-width. The ::after clearfix on .row can fail to establish row
   height when floats grow taller due to increased line-height, causing adjacent
   list-group-item backgrounds to paint over the overflowing text (top and bottom clip).
   display:flow-root creates a Block Formatting Context that inherently contains floats,
   replacing the fragile clearfix. height:auto / overflow:visible on the item and cols
   ensure no fixed-height constraint clips the content when text-spacing is applied. */
#divGroupFiles .list-group-item {
    height: auto !important;
    overflow: visible !important;
}

#divGroupFiles .list-group-item .row {
    display: flow-root;
}

#divGroupFiles .list-group-item .row > div {
    overflow-wrap: break-word;
    word-break: break-word;
    height: auto;
}

.textEntry:focus,
select:focus,
.btn:focus {
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
}
