/* ============================================
   DATEPICKER CSS FIXES
   ============================================
   Purpose: Fix Bootstrap Datepicker display issues
   - Calendar alignment and z-index
   - Proper table layout for date cells
   - Compact, content-sized popup

   SIZING NOTE
   The dropdown is position:absolute, so it has no width of its own - it
   takes the width of whatever is inside it. This file used to put
   `width: 100%` and `table-layout: fixed` on the calendar table, with
   `width: 14.28%` cells and `width: 23%` month/year buttons. A percentage
   inside an absolutely positioned box resolves against the space available
   to it, which is the page, so the table grew to the width of the screen
   and dragged the popup with it.
   Everything below is sized in rem instead. Seven 1.625rem cells plus the
   dropdown padding put the calendar at roughly 12rem (~195px) whatever the
   screen does - it was 2rem cells and ~240px, which a trial user still found
   too big beside the field it belongs to.
   ============================================ */

/* Datepicker Dropdown Container */
.datepicker-dropdown {
    z-index: 1060 !important;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.375rem;
    /* Shrink to the calendar, never to the page. */
    width: auto;
    min-width: 0;
    font-size: 0.75rem;
}

/* Datepicker Table - Fix Layout */
.datepicker table {
    /* auto, so the cell widths below decide the table, not the other way round */
    width: auto;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

/* Day Headers (Su, Mo, Tu, etc) */
.datepicker table thead th {
    text-align: center;
    padding: 0;
    height: 1.5rem;
    line-height: 1.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: #495057;
    background-color: #f8f9fa;
    border: none;
}

/* The header row carries prev / month-year / next and must not be squeezed
   into the 1.625rem a day cell gets. */
.datepicker table thead th.prev,
.datepicker table thead th.next,
.datepicker table thead th.datepicker-switch {
    width: auto;
}

/* Date Cells */
.datepicker table tbody td {
    text-align: center;
    padding: 0;
    border: none;
    cursor: pointer;
    width: 1.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
    font-size: 0.75rem;
}

.datepicker table tbody td.day {
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
}

.datepicker table tbody td.day:hover {
    background-color: #e9ecef;
}

/* Selected Date */
.datepicker table tbody td.active,
.datepicker table tbody td.active:hover,
.datepicker table tbody td.active.highlighted {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Today's Date */
.datepicker table tbody td.today {
    background-color: #cfe2ff;
    color: #084298;
}

.datepicker table tbody td.today:hover {
    background-color: #9ec5fe;
}

/* Disabled Dates */
.datepicker table tbody td.disabled,
.datepicker table tbody td.disabled:hover {
    color: #adb5bd;
    background-color: transparent;
    cursor: not-allowed;
}

/* Old/New Month Dates */
.datepicker table tbody td.old,
.datepicker table tbody td.new {
    color: #adb5bd;
}

/* Navigation Arrows */
.datepicker .prev,
.datepicker .next {
    cursor: pointer;
    padding: 0 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
}

.datepicker .prev:hover,
.datepicker .next:hover {
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

/* Month/Year Switcher */
.datepicker .datepicker-switch {
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    padding: 0 0.5rem;
    white-space: nowrap;
}

.datepicker .datepicker-switch:hover {
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

/* Month / Year / Decade / Century View
   These views are one cell holding twelve buttons. The cell is given the
   width of four buttons so the grid matches the seven-column day view
   instead of stretching to the page. */
.datepicker .datepicker-months tbody td,
.datepicker .datepicker-years tbody td,
.datepicker .datepicker-decades tbody td,
.datepicker .datepicker-centuries tbody td {
    padding: 0.25rem 0;
    width: 11.5rem;
    height: auto;
    line-height: normal;
}

.datepicker .datepicker-months .month,
.datepicker .datepicker-years .year,
.datepicker .datepicker-decades .decade,
.datepicker .datepicker-centuries .century {
    display: inline-block;
    width: 3.25rem;
    margin: 0.125rem;
    padding: 0.375rem 0;
    text-align: center;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.8125rem;
}

.datepicker .datepicker-months .month:hover,
.datepicker .datepicker-years .year:hover,
.datepicker .datepicker-decades .decade:hover,
.datepicker .datepicker-centuries .century:hover {
    background-color: #e9ecef;
}

.datepicker .datepicker-months .month.active,
.datepicker .datepicker-years .year.active,
.datepicker .datepicker-decades .decade.active,
.datepicker .datepicker-centuries .century.active {
    background-color: #0d6efd;
    color: #ffffff;
}

/* `body.datepicker-open { overflow: hidden }` used to sit here. Nothing in
   the application ever adds that class, so it never did anything except
   stand ready to freeze the page scroll if something did. Removed. */

/* Input Field with Datepicker */
input.datepicker {
    cursor: pointer;
    background-color: #ffffff;
}

input.datepicker:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Responsive Adjustments
   A phone gets the same calendar, one notch tighter - not a wider one. */
@media (max-width: 576px) {
    .datepicker-dropdown {
        font-size: 0.75rem;
        padding: 0.25rem;
    }

    .datepicker table tbody td {
        width: 1.875rem;
        height: 1.875rem;
        line-height: 1.875rem;
        font-size: 0.75rem;
    }

    .datepicker .datepicker-months tbody td,
    .datepicker .datepicker-years tbody td,
    .datepicker .datepicker-decades tbody td,
    .datepicker .datepicker-centuries tbody td {
        width: 13rem;
    }

    .datepicker .datepicker-months .month,
    .datepicker .datepicker-years .year,
    .datepicker .datepicker-decades .decade,
    .datepicker .datepicker-centuries .century {
        width: 3rem;
        padding: 0.25rem 0;
    }
}

/* Inline datepicker (rendered in the page, not in a popup) */
.datepicker-inline {
    width: auto;
    max-width: 16rem;
    margin: 0 auto;
}

/* Clear Button (if enabled) */
.datepicker .datepicker-clear {
    padding: 0.25rem 0.5rem;
    margin-top: 0.25rem;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #dee2e6;
}

.datepicker .datepicker-clear:hover {
    background-color: #f8f9fa;
}