/* MHFW-51342: ADA-styled Bootstrap Datepicker Theme */
/* Calendar container - Blue border like HSS - COMPACT SIZE */
body .datepicker.datepicker-dialog, body div.datepicker.datepicker-dialog, .datepicker.datepicker-dialog,
div.datepicker.datepicker-dialog, .datepicker-dialog.datepicker.dropdown-menu {
    width: 260px !important; min-width: 260px !important; max-width: 260px !important;
}

.datepicker.datepicker-dialog, div.datepicker.datepicker-dialog, .datepicker-dialog.datepicker.dropdown-menu {
    border: 2px solid hsl(216deg 80% 51%) !important; border-radius: 4px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important; padding: 0 !important;
    background-color: #fff !important; overflow: visible !important; display: block !important;
}

/* Selected date display at top with calendar icon */
.datepicker .datepicker-selected-date { display: flex !important; align-items: center !important; padding: 6px !important;
    background-color: #fff !important; border-bottom: 1px solid #ddd !important; gap: 6px !important; }
.datepicker .datepicker-selected-date .calendar-icon { font-size: 14px !important; flex-shrink: 0 !important; line-height: 1 !important; }
.datepicker .datepicker-selected-date input { flex: 1 !important; border: 1px solid #ccc !important; border-radius: 2px !important;
    padding: 4px 6px !important; font-size: 12px !important; background-color: #fff !important; color: #333 !important; }

/* HSS-style header with navigation buttons */
.datepicker .headercalander { display: flex !important; align-items: center !important; justify-content: space-between !important;
    background-color: hsl(216deg 80% 51%) !important; padding: 4px !important; gap: 4px !important; position: relative !important; z-index: 10 !important; }
.datepicker .headercalander button { background-color: hsl(216deg 80% 51%) !important; border: 1px solid rgba(255,255,255,0.3) !important;
    color: white !important; cursor: pointer !important; padding: 3px 6px !important; border-radius: 2px !important; min-width: 26px !important;
    height: 24px !important; font-size: 13px !important; font-weight: bold !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.datepicker .headercalander button:hover, .datepicker .headercalander button:focus { background-color: hsl(216deg 75% 48%) !important; }
.datepicker .headercalander button:hover { border-color: white !important; }
.datepicker .headercalander button:focus { border: 2px solid white !important; outline: none !important; }
.datepicker .headercalander .month-year { flex: 1 !important; text-align: center !important; color: white !important;
    font-size: 11px !important; font-weight: bold !important; margin: 0 !important; }

/* Hide Bootstrap's original header IMMEDIATELY to prevent flash */
.datepicker.datepicker-dialog .datepicker-days thead tr:first-child,
.datepicker .datepicker-days thead tr:first-child {
    display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important;
}

/* Table wrapper - compact */
.datepicker .table-wrap { padding: 0 4px !important; max-width: 100% !important; }

/* Calendar grid - compact */
.datepicker table.dates { width: 100% !important; max-width: 250px !important; margin: 0 auto !important;
    border-collapse: separate !important; border-spacing: 1px !important; }

/* Day headers (Su Mo Tu We Th Fr Sa) - White background */
.datepicker .datepicker-days thead tr:last-child th { background-color: white !important; color: black !important;
    font-weight: bold !important; border: none !important; padding: 4px 2px !important; text-align: center !important; font-size: 10px !important; }

/* Date cells - Gray background like HSS */
.datepicker table.dates tr td { background: #eeeeee !important; border: 1px solid white !important; border-radius: 3px !important;
    padding: 2px !important; text-align: center !important; color: black !important; width: 28px !important; height: 22px !important;
    font-size: 11px !important; margin: 1px !important; cursor: pointer !important; }

/* Disabled/old/new month dates */
.datepicker table.dates tr td.disabled, .datepicker table.dates tr td.old, .datepicker table.dates tr td.new {
    background-color: rgba(238, 238, 238, 0.5) !important; color: #ccc !important; cursor: default !important; }

/* Today's date - Light blue like HSS */
.datepicker table.dates tr td.today { background-color: hsl(216deg 80% 85%) !important; color: black !important; border-color: rgb(100 100 100) !important; }
.datepicker table.dates tr td.today:hover { background-color: hsl(216deg 55% 72%) !important; }

/* Active/selected date - Blue background */
.datepicker table.dates tr td.active, .datepicker table.dates tr td.active:hover, .datepicker table.dates tr td.active.focused {
    background-color: hsl(216deg 80% 51%) !important; color: white !important; border-color: hsl(216deg 80% 40%) !important; font-weight: bold !important; }

/* Hover state - Light blue */
.datepicker table.dates tr td:hover:not(.disabled):not(.old):not(.new) { background-color: hsl(216deg 80% 85%) !important; border-color: rgb(100 100 100) !important; }

/* Focused date (keyboard navigation) */
.datepicker table.dates tr td.focused, .datepicker table.dates tr td:focus { background-color: hsl(216deg 80% 85%) !important; border: 2px solid hsl(216deg 80% 51%) !important;
    outline: 2px solid hsl(216deg 80% 51%) !important; outline-offset: -2px !important; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important; }

/* HSS-style OK/Cancel buttons */
.datepicker .dialog-ok-cancel-group { display: flex !important; justify-content: space-between !important; padding: 4px 6px !important;
    background-color: #fff !important; border-top: 1px solid #ddd !important; gap: 4px !important; }
.datepicker .dialog-button { flex: 1 !important; padding: 4px 8px !important; font-size: 11px !important;
    border-radius: 2px !important; cursor: pointer !important; border: 1px solid #ccc !important; }
.datepicker .dialog-button[value="cancel"] { background-color: #f5f5f5 !important; color: #333 !important; }
.datepicker .dialog-button[value="cancel"]:hover { background-color: #e8e8e8 !important; }
.datepicker .dialog-button[value="ok"] { background-color: hsl(216deg 80% 51%) !important; border-color: hsl(216deg 80% 51%) !important;
    color: white !important; font-weight: bold !important; }
.datepicker .dialog-button[value="ok"]:hover { background-color: hsl(216deg 75% 45%) !important; }

/* Footer message area - blue bar always visible, text appears/disappears */
.datepicker .dialog-message { display: block !important; background-color: hsl(216deg 80% 51%) !important; color: white !important; text-align: center !important;
    padding: 4px 6px !important; font-size: 10px !important; font-weight: bold !important; border-radius: 0 0 2px 2px !important;
    width: 100% !important; box-sizing: border-box !important; min-height: 24px !important; }

/* Accessibility - Focus visible for all interactive elements */
.datepicker table.dates tr td:focus, .datepicker .dialog-button:focus { outline: 2px solid hsl(216deg 80% 51%) !important; }
.datepicker table.dates tr td:focus { outline-offset: -2px !important; }
.datepicker .dialog-button:focus { outline-offset: 2px !important; }

/* Make calendar popup positioned */
.datepicker.dropdown-menu { z-index: 9999 !important; position: absolute !important; display: block !important; }

/* High contrast mode */
@media (prefers-contrast: high) {
    .datepicker table.dates tr td { border: 2px solid #000 !important; }
    .datepicker table.dates tr td.active { border: 3px solid #fff !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .datepicker * { transition: none !important; animation: none !important; }
}

/* Print - hide calendar */
@media print {
    .datepicker { display: none !important; }
}