/* Provisional Search form styles: required indicators and helper text (mirrors VoterSearch) */

/* Fixed max-width for search form to prevent responsive skip */
#provisionalSearchCriteria {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    #provisionalSearchCriteria {
        width: 600px;
        padding: 0;
    }
}

/* Button spacing */
#btnReset {
    margin-left: 8px !important;
}

/* High-contrast required field indicator */
.required-indicator {
    color: #B00020; /* Dark red for strong contrast on white */
    font-weight: 700;
    margin-right: 2px;
}
.required-help {
    font-size: .875rem;
    color: #B00020; /* match asterisk color */
}
/* Screen-reader only utility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Ensure visibility in Windows High Contrast Mode */
@media (forced-colors: active) {
    .required-indicator,
    .required-help {
        color: ButtonText;
        forced-color-adjust: auto;
    }
}

/* Buttons (match VoterSearch styles) */
.button-search {
    background-color: #1C84C6 !important; /* brand blue */
    border-color: #1C84C6 !important;
    color: #FFFFFF !important;
    font-size: 19px; /* large text threshold for WCAG */
    font-weight: 700; /* bold to reinforce readability */
    line-height: 1.1;
    padding: 8px 18px;
    background-image: none !important;
    text-shadow: none !important;
    border-radius: 4px;
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: auto !important; /* override legacy fixed width */
    min-width: 140px !important; /* ensure enough space for label */
    white-space: nowrap; /* prevent label wrapping/truncation */
}
.button-search:hover,
.button-search:focus {
    background-color: #186FA8 !important; /* slightly darker hover */
    border-color: #186FA8 !important;
    color: #FFFFFF !important;
}
.button-search:active {
    background-color: #155F8F !important; /* active state */
    border-color: #155F8F !important;
}
.button-search:disabled,
.button-search[disabled] {
    background-color: #7FB6DC !important; /* lighter but keeps >=3:1 at large size */
    border-color: #7FB6DC !important;
    opacity: .85;
    cursor: not-allowed;
}
.button-search:focus-visible {
    outline: 3px solid #FFBF47;
    outline-offset: 2px;
}
@media (forced-colors: active) {
    .button-search { forced-color-adjust: auto; }
}

/* Match native dropdown height to Kendo input height within Provisional Search */
#provisionalSearchCriteria select.form-control {
    height: var(--provisional-field-height);            /* reduced to match other controls */
    line-height: var(--provisional-field-height);       /* vertical center text */
    padding-top: 2px;        /* tighter padding for 28px overall height */
    padding-bottom: 2px;
    box-sizing: border-box;  /* include padding in total height */

    /* Hide native arrow across browsers */
    -webkit-appearance: none;
    appearance: none;

    /* Custom arrow (inline SVG) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; /* space from right edge */
    background-size: 16px 16px;
    padding-right: 2.25rem; /* Ensure text doesn’t overlap the arrow */
}

/* Old IE/Edge legacy arrow hide */
#provisionalSearchCriteria select.form-control::-ms-expand { display: none; }

/* Focus visibility for keyboard users */
#provisionalSearchCriteria select.form-control:focus-visible {
    outline: 3px solid #FFBF47; /* matches button focus */
    outline-offset: 2px;
}

/* High-contrast mode: use system arrow and avoid background images */
@media (forced-colors: active) {
    #provisionalSearchCriteria select.form-control {
        appearance: auto; /* restore native */
        background-image: none;
        padding-right: initial;
        forced-color-adjust: auto;
    }
}

/* Focus style for selects: match Kendo input focus (no yellow) */
#provisionalSearchCriteria select.form-control:focus,
#provisionalSearchCriteria select.form-control:focus-visible {
    border-color: #1C84C6 !important; /* match .k-focus border */
    outline: 2px solid #1C84C6 !important; /* replace yellow focus ring */
    outline-offset: 1px;
    box-shadow: none !important;
}

/* If Kendo dropdown wrappers are used later on this form, align focus visuals as well */
#provisionalSearchCriteria .k-dropdownlist.k-focus,
#provisionalSearchCriteria .k-combobox.k-focus,
#provisionalSearchCriteria .k-picker.k-focus,
#provisionalSearchCriteria .k-dropdowngrid.k-focus {
    border-color: #1C84C6 !important;
    outline: 2px solid #1C84C6 !important;
    outline-offset: 1px;
}

/* Global Kendo focus style: match VoterSearch focus visuals */
.k-focus {
    border-color: #1C84C6 !important;
    outline: 2px solid #1C84C6;
    outline-offset: 1px;
}

/* Hide the validation summary */
.validation-summary-errors {
    display: none !important;
}

/* Responsive centering of form controls within Provisional Search form
   Desktop (>=600px): each control gets 15% left/right margin => centered at 70% width.
   Mobile (<600px): remain full width (bootstrap col-12 behavior).
   Scoped to #provisionalSearchForm to avoid affecting other pages. */
@media (min-width: 600px) {
    #provisionalSearchForm .form-group > .form-control:not(.button-search),
    #provisionalSearchForm .form-group > select.form-control,
    #provisionalSearchForm .form-group > textarea.form-control,
    #provisionalSearchForm .form-group > input.form-control,
    /* Kendo wrapper elements */
    #provisionalSearchForm .form-group > .k-input,
    #provisionalSearchForm .form-group > .k-textbox,
    #provisionalSearchForm .form-group > .k-picker,
    #provisionalSearchForm .form-group > .k-dropdownlist,
    #provisionalSearchForm .form-group > .k-combobox,
    #provisionalSearchForm .form-group > .k-dateinput,
    #provisionalSearchForm .form-group > .k-datetimepicker {
        width: 70% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
        box-sizing: border-box;
    }

    /* Ensure validation messages still span available width for readability */
    #provisionalSearchForm .form-group .text-danger {
        display: block;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }

    /* Extend centering to labels (including control-label class) */
    #provisionalSearchForm .form-group > label,
    #provisionalSearchForm .form-group > .control-label {
        display: block;
        width: 70% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
        box-sizing: border-box;
    }

    /* Also center Kendo dropdown wrappers even if not direct child */
    #provisionalSearchForm .form-group .k-dropdownlist,
    #provisionalSearchForm .form-group .k-combobox,
    #provisionalSearchForm .form-group .k-picker,
    #provisionalSearchForm .form-group .k-dateinput,
    #provisionalSearchForm .form-group .k-datetimepicker,
    #provisionalSearchForm .form-group .k-dropdowngrid {
        width: 70% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
    }

    /* Election dropdown centering fix: only center the select, let wrapper span full form-group width */
    #provisionalSearchForm .form-group #electionDropdownContainer {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    #provisionalSearchForm .form-group #electionDropdownContainer select.form-control {
        width: 70% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
        box-sizing: border-box;
    }

    /* Center the "* required fields" helper text (outside the form but within criteria container) */
    #provisionalSearchCriteria .required-help {
        display: block;
        width: 70% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
        box-sizing: border-box;
        text-align: left; /* keep left alignment inside centered block */
    }
}

/* High contrast mode: allow system to manage colors but keep layout */
@media (forced-colors: active) and (min-width: 600px) {
    #provisionalSearchForm .form-group > .form-control:not(.button-search),
    #provisionalSearchForm .form-group > select.form-control,
    #provisionalSearchForm .form-group > textarea.form-control,
    #provisionalSearchForm .form-group > input.form-control,
    #provisionalSearchForm .form-group > .k-input,
    #provisionalSearchForm .form-group > .k-textbox,
    #provisionalSearchForm .form-group > .k-picker,
    #provisionalSearchForm .form-group > .k-dropdownlist,
    #provisionalSearchForm .form-group > .k-combobox,
    #provisionalSearchForm .form-group > .k-dateinput,
    #provisionalSearchForm .form-group > .k-datetimepicker {
        forced-color-adjust: auto;
    }
}

/* Unified field font size for Provisional Search form controls */
:root {
    --provisional-field-font-size: 1rem; 
    --provisional-field-height: 28px; /* single source of truth for control height */
}

/* Apply consistent font size across native and Kendo inputs (DOB, PIN, dropdowns) */
#provisionalSearchForm .form-group select.form-control,
#provisionalSearchForm .form-group input.form-control,
#provisionalSearchForm .form-group .k-textbox input,
#provisionalSearchForm .form-group .k-input-inner,
#provisionalSearchForm .form-group .k-input .k-input-inner,
#provisionalSearchForm .form-group .k-input.k-textbox,
#provisionalSearchForm .form-group .k-input.k-textbox input {
    font-size: var(--provisional-field-font-size) !important;
}

/* Standardize Kendo TextBox heights (Date of Birth, PIN) to match dropdown height.
   Kendo structure: span.k-textbox (wrapper) > input.k-input-inner.
   We set height/line-height on wrapper and ensure inner input inherits 100% height without extra vertical padding.
   Using CSS variable for maintainability. */
#provisionalSearchForm .k-textbox,
#provisionalSearchForm .k-input.k-textbox {
    height: var(--provisional-field-height);
    min-height: var(--provisional-field-height);
    line-height: var(--provisional-field-height);
    padding-top: 2px; /* match select adjustments */
    padding-bottom: 2px;
    box-sizing: border-box;
}
#provisionalSearchForm .k-textbox .k-input-inner,
#provisionalSearchForm .k-input.k-textbox .k-input-inner {
    height: 100%;
    line-height: var(--provisional-field-height);
    padding-top: 0;
    padding-bottom: 0; /* remove extra padding that can increase total height */
    box-sizing: border-box;
}
@media (forced-colors: active) {
    #provisionalSearchForm .k-textbox,
    #provisionalSearchForm .k-input.k-textbox {
        forced-color-adjust: auto; /* allow system colors */
    }
}

/* Darker modal backdrop (still translucent, no blue tint) */
body.modal-open #searchModal + .modal-backdrop,
body.modal-open #searchModal + .modal-backdrop.fade,
body.modal-open #searchModal + .modal-backdrop.show,
body.modal-open #searchModal + .modal-backdrop.fade.show,
body.modal-open .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.35) !important; /* lighter translucency */
    opacity: 1 !important; /* rely on rgba alpha rather than Bootstrap's 0.5 */
}

/* Overlay fallback to ensure darker background even if Bootstrap backdrop vars revert */
.search-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-in-out;
    z-index: 1049; /* between Bootstrap backdrop (1040) and modal (1050) */
}
#searchModal.show ~ .search-modal-overlay {
    opacity: 1;
}