/**
 * Loaded LAST in the logged-in header — wins over light-style.css and async daterangepicker.css.
 * One flat surface: no darker “padding ring” vs lighter inner grid.
 */

/*
 * Single-date mode: the plugin wraps the grid in `.drp-calendar.left` (padding) + inner `.calendar-table`.
 * That is two nested boxes; backgrounds diverge and show a grey “ring”. We cannot merge the nodes in the
 * library without rewriting `.html()` targets (would destroy sibling `.calendar-time`). Instead we use
 * `display: contents` on the wrapper so it does not generate a box — only `.calendar-table` paints.
 * `!important` beats jQuery `.show()`’s inline `display: block` on `.drp-calendar`.
 */
html.light-mode body .daterangepicker.single.show-calendar .drp-calendar.left.single,
html.light-mode body .daterangepicker.single.show-calendar .drp-calendar.left,
html.dark-mode body .daterangepicker.single.show-calendar .drp-calendar.left.single,
html.dark-mode body .daterangepicker.single.show-calendar .drp-calendar.left {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    float: none !important;
}

html.light-mode body .daterangepicker.single .calendar-table,
html.dark-mode body .daterangepicker.single .calendar-table {
    box-sizing: border-box !important;
    max-width: 270px !important;
    padding: 8px !important;
}

html.light-mode body .daterangepicker,
html.light-mode body .daterangepicker .drp-calendar,
html.light-mode body .daterangepicker .drp-calendar.left,
html.light-mode body .daterangepicker .drp-calendar.right,
html.light-mode body .daterangepicker.single .drp-calendar,
html.light-mode body .daterangepicker.single .drp-calendar.left,
html.light-mode body .daterangepicker .calendar-table,
html.light-mode body .daterangepicker .drp-calendar .calendar-table,
html.light-mode body .daterangepicker .drp-calendar.left .calendar-table,
html.light-mode body .daterangepicker.single .drp-calendar.left .calendar-table,
html.light-mode body .daterangepicker table.calendar-table {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Do NOT set td/th to transparent — it overrides td.active background while color stays #fff (invisible on white). */
html.light-mode body .daterangepicker .calendar-table thead,
html.light-mode body .daterangepicker .calendar-table tbody,
html.light-mode body .daterangepicker .calendar-table tr {
    background-color: transparent !important;
}

html.light-mode body .daterangepicker td.active,
html.light-mode body .daterangepicker td.active:hover,
html.light-mode body .daterangepicker td.active.start-date,
html.light-mode body .daterangepicker td.active.end-date {
    background-color: #ff002a !important;
    color: #ffffff !important;
}

html.light-mode body .daterangepicker .drp-selected {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
}

html.light-mode body .daterangepicker select.monthselect,
html.light-mode body .daterangepicker select.yearselect {
    background-color: #ffffff !important;
}

/* Shorter year list is driven by minYear/maxYear in JS; keep the control visually compact */
html.light-mode body .daterangepicker select.yearselect,
html.dark-mode body .daterangepicker select.yearselect {
    width: 4.25em !important;
    max-width: 4.25em !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 2px 4px !important;
    line-height: 1.25 !important;
}

html.dark-mode body .daterangepicker,
html.dark-mode body .daterangepicker .drp-calendar,
html.dark-mode body .daterangepicker .drp-calendar.left,
html.dark-mode body .daterangepicker .calendar-table,
html.dark-mode body .daterangepicker .drp-calendar .calendar-table,
html.dark-mode body .daterangepicker table.calendar-table {
    background-color: #21212c !important;
    background-image: none !important;
}

html.dark-mode body .daterangepicker .calendar-table thead,
html.dark-mode body .daterangepicker .calendar-table tbody,
html.dark-mode body .daterangepicker .calendar-table tr {
    background-color: transparent !important;
}

html.dark-mode body .daterangepicker td.active,
html.dark-mode body .daterangepicker td.active:hover,
html.dark-mode body .daterangepicker td.active.start-date,
html.dark-mode body .daterangepicker td.active.end-date {
    background-color: #ff002a !important;
    color: #ffffff !important;
}