﻿/* Hide the validation summary */
.validation-summary-errors {
    display: none !important;
}

/* Fixed max-width for search form to prevent responsive skip */
#voterSearchCriteria {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    #voterSearchCriteria {
        width: 600px;
        padding: 0;
    }
}

/* Button spacing */
#btnReset {
    margin-left: 8px !important;
}

/* Align chevron (ibox-tools) to the right in VoterSearch sections */
#voterSearchCriteria .ibox-title,
#voterSearchResultsSection .ibox-title {
    display: flex;
    align-items: center;
}
#voterSearchCriteria .ibox-title h5,
#voterSearchResultsSection .ibox-title h5 {
    /* override global float to allow flex spacing */
    float: none;
    margin: 0;
}
#voterSearchCriteria .ibox-title .ibox-tools,
#voterSearchResultsSection .ibox-title .ibox-tools {
    margin-left: auto; /* push tools to the right-most edge */
    display: flex;
    align-items: center;
}
#voterSearchCriteria .ibox-title .ibox-tools a,
#voterSearchResultsSection .ibox-title .ibox-tools a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Results section should take 90% width with 5% margins on each side */
#voterSearchResultsSection {
    width: 90% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    float: none !important; /* neutralize any float behaviors */
    padding-left: 0; /* prevent Bootstrap column padding from shrinking content */
    padding-right: 0;
}

/* 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;
    }
}

/* Search / Reset buttons (blue background, white text) */
.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; }
}

.k-checkbox {
    width: 13px;
    height: 13px;
    border-color: #767676;
    border-radius: .15rem;
}

.k-focus{
        border-color: #1C84C6 !important;
        outline: 2px solid #1C84C6;
        outline-offset: 1px;
}

/* Darken borders of all form fields for accessibility (minimum 3:1 contrast with white) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea,
.k-textbox,
.k-dropdown,
.k-input,
.k-select,
.k-checkbox-label,
.k-combobox,
.k-listbox,
.k-multiselect,
.k-picker,
.k-dropdowngrid,
.k-dropdownlist,
.k-list-container {
    border-color: #949494 !important;
    border-radius: 4px;
    background-color: #fff;
    color: #222;
}

/* ============================================================
   MOBILE ZOOM PREVENTION - ULTRA HIGH SPECIFICITY
   ============================================================
   iOS Safari and other mobile browsers auto-zoom on input fields
   with font-size < 16px. This prevents that behavior while
   maintaining accessibility.
   
   This also prevents double-tap zoom on buttons using
   touch-action: manipulation.
   
   NOTE: These rules use MAXIMUM specificity with !important
   to ensure they override Kendo UI styles loaded in _Layout.cshtml
   ============================================================ */
@media screen and (max-width: 767px) {
    /* CRITICAL: Prevent auto-zoom on input focus - 16px minimum */
    /* Ultra-specific selectors to override Kendo UI defaults */
    
    /* Target all input types within voterSearchCriteria */
    div#voterSearchCriteria input[type="text"],
    div#voterSearchCriteria input[type="password"],
    div#voterSearchCriteria input[type="email"],
    div#voterSearchCriteria input[type="number"],
    div#voterSearchCriteria input,
    div#voterSearchCriteria select,
    div#voterSearchCriteria textarea,
    div#voterSearchCriteria .form-control {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* Kendo TextBox wrapper and inner inputs */
    div#voterSearchCriteria .k-textbox,
    div#voterSearchCriteria .k-textbox > input,
    div#voterSearchCriteria .k-textbox > input.k-input-inner,
    div#voterSearchCriteria .k-input,
    div#voterSearchCriteria .k-input > input,
    div#voterSearchCriteria .k-input-inner,
    div#voterSearchCriteria span.k-textbox,
    div#voterSearchCriteria span.k-textbox input,
    div#voterSearchCriteria span.k-textbox > input {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* Direct ID targeting for generated Kendo inputs */
    div#voterSearchCriteria #VoterSearchFilter_FirstName,
    div#voterSearchCriteria #VoterSearchFilter_MiddleInitial,
    div#voterSearchCriteria #VoterSearchFilter_LastName,
    input#VoterSearchFilter_FirstName,
    input#VoterSearchFilter_MiddleInitial,
    input#VoterSearchFilter_LastName {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* Apply touch-action manipulation to prevent zoom gestures */
    div#voterSearchCriteria input,
    div#voterSearchCriteria select,
    div#voterSearchCriteria textarea,
    div#voterSearchCriteria button,
    div#voterSearchCriteria .btn,
    div#voterSearchCriteria .k-textbox,
    div#voterSearchCriteria .k-textbox input,
    div#voterSearchCriteria .form-control {
        touch-action: manipulation !important;
    }
    
    /* Ensure labels don't cause accidental zoom */
    div#voterSearchCriteria label {
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation !important;
    }
}

/* Match native dropdown height to Kendo input height within Voter Search */
#voterSearchCriteria select.form-control {
    height: 28px;            /* reduced to match other controls */
    line-height: 28px;       /* vertical center text */
    padding-top: 2px;        /* tighter padding for 28px overall height */
    padding-bottom: 2px;
    box-sizing: border-box;  /* include padding in total height */
}

/* Always show a consistent dropdown arrow for native selects in Voter Search */
#voterSearchCriteria select.form-control {
    /* Hide native arrow across browsers */
    -webkit-appearance: none;
    -moz-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;

    /* Ensure text doesn’t overlap the arrow */
    padding-right: 2.25rem;
}

/* Old IE/Edge legacy arrow hide */
#voterSearchCriteria select.form-control::-ms-expand { display: none; }

/* Focus visibility for keyboard users */
#voterSearchCriteria 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) {
    #voterSearchCriteria select.form-control {
        appearance: auto; /* restore native */
        background-image: none;
        padding-right: initial;
        forced-color-adjust: auto;
    }
}

/* Focus style for county and year-of-birth dropdowns: match input control (no yellow) */
#voterSearchCriteria select.form-control:focus,
#voterSearchCriteria 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 on the search form, align focus visuals as well */
#voterSearchCriteria .k-dropdownlist.k-focus,
#voterSearchCriteria .k-combobox.k-focus,
#voterSearchCriteria .k-picker.k-focus,
#voterSearchCriteria .k-dropdowngrid.k-focus {
    border-color: #1C84C6 !important;
    outline: 2px solid #1C84C6 !important;
    outline-offset: 1px;
}
