﻿/* Date numbers - normal days */
.datepicker table tr td,
.datepicker table tr th {
    color: #000000; /* passes 4.5:1 */
}

    /* Hover / active state */
    .datepicker table tr td:hover,
    .datepicker table tr td.active,
    .datepicker table tr td.active:hover {
        background-color: #005fcc; /* accessible blue */
        color: #ffffff;
    }

    /* Disabled days */
    .datepicker table tr td.disabled,
    .datepicker table tr td.disabled:hover {
        color: #6c757d; /* accessible gray */
        opacity: 1;
    }

    /* Previous / next month dates */
    .datepicker table tr td.old,
    .datepicker table tr td.new {
        color: #000000; /* High contrast */
        background-color: #ffffff;
        opacity: 1; /* IMPORTANT */
    }

    /* Keep disabled dates distinct but accessible */
    .datepicker table tr td.disabled,
    .datepicker table tr td.disabled.old,
    .datepicker table tr td.disabled.new {
        color: #6c757d; /* Accessible gray */
        background-color: #ffffff;
        opacity: 1;
    }

    /* Hover / focus state */
    .datepicker table tr td.day:hover,
    .datepicker table tr td.day:focus {
        background-color: #e9ecef;
        color: #000000;
    }

    /* Active (selected) date */
    .datepicker table tr td.active,
    .datepicker table tr td.active:hover {
        background-color: #005fcc;
        color: #ffffff;
    }


.form-field-center {
    margin: 0 auto; /* centers the block */
}

    .form-field-center label {
        text-align: left; /* keeps label left-aligned */
        display: block;
    }

.cssLabelRequired {
    color: #B00020;
    font-size: small;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 6px;
}

.checkbox-group label {
    display: inline;
    margin-bottom: 0;
}

.checkbox-group-border {
    border: 1px solid #0B809D;
    border-radius: 6px;
    padding: 12px;
}

.select-control {
    appearance: auto; /* restores native dropdown arrow */
    background-image: none; /* prevents Bootstrap masking */
}

.fontBrown {
    color: #993300;
}

.required-text {
    color: #B00020;
    font-size: 0.9em;
}

.label-nowrap {
    white-space: nowrap;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Container for DOB textbox + calendar icon */
.dob-wrapper {
    display: inline-flex; /* Keep textbox and icon inline */
    align-items: center; /* Vertically center icon */
    width: 100%; /* Take full width like other fields */
}

    /* Make textbox take all available width */
    .dob-wrapper .dob-textbox {
        flex: 1 1 auto; /* Take all remaining space */
        width: auto; /* Allow flex to control width */
    }

/* Calendar icon positioning */
.ui-datepicker-trigger {
    margin-left: 6px;
    cursor: pointer;
    flex: 0 0 auto; /* Icon does not grow/shrink */
}

.checkbox-group ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

.checkbox-group li {
    list-style: none;
}

.checkbox-group input[aria-invalid="true"] {
    outline: 2px solid #0B809D;
}

button[aria-readonly="true"],
input[type="submit"][aria-readonly="true"],
input[type="button"][aria-readonly="true"] {
    background-color: #e0e0e0;
    color: #6c757d;
    border-color: #c6c6c6;
    cursor: not-allowed;
    opacity: 0.65;
}

.readonly-dropdown {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.applicationDetails {
    width: fit-content; /* shrink to content width */
    margin: 0 auto; /* center the whole dl */
}

    .applicationDetails div {
        display: flex;
        margin-bottom: 6px;
    }

    .applicationDetails dt {
        font-weight: bold;
        width: 180px; /* fixed label column width */
        text-align: right; /* labels align right */
        padding-right: 10px;
    }

    .applicationDetails dd {
        margin: 0;
        text-align: left; /* values align left */
    }

.applicantDetails {
    display: grid;
    grid-template-columns: 180px auto 180px auto;
    column-gap: 15px;
    row-gap: 6px;
    width: fit-content;
    margin: auto;
}

    .applicantDetails dt {
        font-weight: bold;
        text-align: right;
    }

    .applicantDetails dd {
        margin: 0;
        text-align: left;
    }

/* Mobile view */
@media (max-width:768px) {

    .applicantDetails {
        grid-template-columns: 150px auto;
        width: 100%;
    }

        .applicantDetails dt {
            text-align: left;
        }
}

.docStatusContainer {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.docStatusItem {
    border-radius: 1rem;
    border: 1px solid;
    color: white;
    font-size: 15px;
    font-family: Arial;
    padding: 4px 8px;
    text-align: center;
    display: flex;
    gap: 5px;
}

    .docStatusItem dt {
        font-weight: bold;
    }

    .docStatusItem dd {
        margin: 0;
    }


.docContainer {
    border-radius: 1rem;
    border: 1px solid #0B809D;
    font-size: 15px;
    font-family: Arial;
}

.docContainer-normal {
    background-color: #ffffff;
    color: #0B809D;
}

.docContainer-reviewed {
    background-color: #0B809D;
    color: #ffffff;
}

.fileTypeMsg {
    display: block;
    color: #B00020;
    font-size: 0.9em;
    margin-bottom: 4px;
}

.checkboxHighlight {
    outline: 2px solid #0B809D;
    outline-offset: 2px;
}

.errorList {
    text-align: left;
    font-weight: bold;
    padding-left: 100px; /* keeps bullet close to text */
    margin-left: 0; 
}

    .errorList li {
        margin-bottom: 6px;
    }

.errorLink {
    font-weight: bold;
    color: #B00020;
    text-decoration: underline;
    display: inline-block;
}

.cssWarningRR .errorLink {
    color: #B00020; /* ensures warning links stay red */
}

.focus-link-highlight {
    outline: 2px solid #B00020;
    padding: 2px;
    display: inline-block;
}

.cssPageTitle {
    color: #212529; /*dark black*/
    /*color: #FF4719;*/ /*red orange*/
}