/* ── Datetimepicker theme ── */

/* Positioning context so dropdown width: 100% matches the input */
*:has(> .bootstrap-datetimepicker-widget) { position: relative !important; }

/* Design tokens (fallbacks for modules without colors.css) */
.bootstrap-datetimepicker-widget {
    --dp-brand:       var(--brand, #465194);
    --dp-white:       var(--white, #ffffff);
    --dp-white-light: var(--white-light, #f7f7f8);
    --dp-white-dark:  var(--white-dark, #e5e5e5);
    --dp-black:       var(--black, #1a1a1a);
    --dp-black-light: var(--black-light, #6e6e73);
    font-size: 16px;
}

/* Container — width:100% matches parent input; min-width prevents collapse.
   Use em (not rem) because html font-size is 10px but widget font-size is 16px */
.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 1em;
    background: var(--dp-white);
    border: 1px solid var(--dp-white-dark);
    border-radius: 0.8rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    width: auto;
    min-width: 20em;
}
.bootstrap-datetimepicker-widget.dropdown-menu::before,
.bootstrap-datetimepicker-widget.dropdown-menu::after { display: none; }

/* Table base */
.bootstrap-datetimepicker-widget table { width: 100%; margin: 0; }
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    text-align: center;
    border-radius: 0.4rem;
    padding: 0.5em;
}
.bootstrap-datetimepicker-widget table th {
    color: var(--dp-black-light);
    font-weight: 600;
}

/* Navigation header (prev / month-year / next) */
.bootstrap-datetimepicker-widget table thead tr:first-child th {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--dp-black);
    padding: 0.6rem 0.4rem;
    transition: background 0.2s;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--dp-white-light);
}

/* Day-of-week headers */
.bootstrap-datetimepicker-widget .datepicker-days thead tr:nth-child(2) th {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dp-black-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.5rem;
}

/* Day cells */
.bootstrap-datetimepicker-widget table td.day {
    color: var(--dp-black);
    transition: background 0.2s, color 0.2s;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    background: var(--dp-white-light);
    cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new { color: var(--dp-white-dark); }

/* Today indicator — 4px brand dot */
.bootstrap-datetimepicker-widget table td.today { position: relative; }
.bootstrap-datetimepicker-widget table td.today::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border: none;
    border-radius: 50%;
    background: var(--dp-brand);
}

/* Active (selected) */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--dp-brand);
    color: var(--dp-white);
    text-shadow: none;
}
.bootstrap-datetimepicker-widget table td.active.today::before { background: var(--dp-white); }

/* Disabled */
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: var(--dp-white-dark);
    cursor: not-allowed;
}

/* Month / Year / Decade span cells */
.bootstrap-datetimepicker-widget table td span,
.bootstrap-datetimepicker-widget table td i {
    display: inline-block;
    width: 54px; height: 54px; line-height: 54px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 0.4rem;
    transition: background 0.2s, color 0.2s;
}
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget table td i:hover { background: var(--dp-white-light); }
.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td i.active {
    background-color: var(--dp-brand);
    color: var(--dp-white);
    text-shadow: none;
}

/* Action links */
.bootstrap-datetimepicker-widget a[data-action] {
    padding: 6px 0;
    color: var(--dp-black);
    border-radius: 0.4rem;
    transition: background 0.2s;
}
.bootstrap-datetimepicker-widget a[data-action]:hover { background: var(--dp-white-light); }

/* Picker-switch (date/time toggle toolbar) */
.bootstrap-datetimepicker-widget .picker-switch { text-align: center; }
.bootstrap-datetimepicker-widget .picker-switch table { table-layout: fixed; }
.bootstrap-datetimepicker-widget .picker-switch td { width: 50%; }
.bootstrap-datetimepicker-widget .picker-switch td span,
.bootstrap-datetimepicker-widget .picker-switch td i {
    line-height: 2.5; height: 2.5em; width: 100%;
    border-radius: 0.4rem;
    transition: background 0.2s, color 0.2s;
}
.bootstrap-datetimepicker-widget .picker-switch td span:hover,
.bootstrap-datetimepicker-widget .picker-switch td i:hover { background: var(--dp-white-light); }
.bootstrap-datetimepicker-widget .picker-switch td a {
    color: var(--dp-black-light);
    border-radius: 0.4rem;
    transition: background 0.2s, color 0.2s;
}
.bootstrap-datetimepicker-widget .picker-switch td a:hover {
    background: var(--dp-white-light);
    color: var(--dp-black);
}

/* Timepicker readouts */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    font-weight: 600;
    font-size: 1.2em;
    color: var(--dp-black);
}
.bootstrap-datetimepicker-widget .separator { color: var(--dp-black-light); }

/* Timepicker cell sizing — undo generic 54px td sizing */
.bootstrap-datetimepicker-widget .timepicker .timepicker-picker td {
    height: auto; line-height: normal; padding: 0;
}
.bootstrap-datetimepicker-widget .timepicker .timepicker-picker td a { padding: 6px; }
.bootstrap-datetimepicker-widget .timepicker .timepicker-picker td a i {
    height: auto; line-height: normal; width: auto; margin: 0;
}
.bootstrap-datetimepicker-widget .timepicker .timepicker-picker td span {
    height: auto; line-height: 2; margin: 0;
}

/* Timepicker arrows — brand color */
.bootstrap-datetimepicker-widget .timepicker a[data-action] {
    color: var(--dp-brand);
}

/* AM/PM toggle */
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"] {
    color: var(--dp-black);
    background: var(--dp-white-light);
    border: 1px solid var(--dp-white-dark);
    border-radius: 0.4rem;
    font-weight: 500;
    box-shadow: none;
    transition: background 0.2s;
}
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]:hover,
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]:focus,
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]:active {
    background: var(--dp-white-dark);
    box-shadow: none;
}

/* Side-by-side layout: exact 50/50 — calendar left, timepicker + toolbar right */
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr auto;
    width: max-content;
    gap: 0 0.5em;
}
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .row {
    display: contents;
}

/* Calendar — left column, spans full height */
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .row > .col-md-6:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Timepicker — right column top */
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .row > .col-md-6:last-child {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    max-width: none;
}
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs .timepicker {
    width: 100%;
}

/* Toolbar — right column bottom */
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .picker-switch {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
}
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .picker-switch table {
    width: 100%;
}
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .picker-switch td {
    text-align: center;
}
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .picker-switch td a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.4rem;
    color: var(--dp-black-light);
    transition: background 0.2s, color 0.2s;
}
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs > .picker-switch td a:hover {
    background: var(--dp-white-light);
    color: var(--dp-black);
}

/* Shield: undo inherited info-table / popup flex layout */
.bootstrap-datetimepicker-widget.dropdown-menu table {
    display: table; width: 100%; border-collapse: collapse;
}
.bootstrap-datetimepicker-widget.dropdown-menu table thead { display: table-header-group; }
.bootstrap-datetimepicker-widget.dropdown-menu table tbody { display: table-row-group; }
.bootstrap-datetimepicker-widget.dropdown-menu table tr {
    display: table-row; border-bottom: none; padding: 0;
}
.bootstrap-datetimepicker-widget.dropdown-menu table th {
    display: table-cell; flex: none;
    text-transform: none; letter-spacing: normal; min-height: 0;
}
.bootstrap-datetimepicker-widget.dropdown-menu table td {
    display: table-cell; flex: none;
    min-height: 0; word-break: normal; border: none;
}

/* Shield: undo popup table/flex interference inside any .popup context */
.popup .bootstrap-datetimepicker-widget table tbody { display: table-row-group; }
.popup .bootstrap-datetimepicker-widget table tr { display: table-row; flex-direction: initial; border-bottom: none; padding: 0; }
.popup .bootstrap-datetimepicker-widget table th,
.popup .bootstrap-datetimepicker-widget table td { display: table-cell; width: auto; flex: none; }
.popup .bootstrap-datetimepicker-widget .timepicker td { height: auto; line-height: normal; }
.popup .bootstrap-datetimepicker-widget .timepicker td span,
.popup .bootstrap-datetimepicker-widget .timepicker td i { height: auto; line-height: normal; width: auto; margin: 0; }

/* Mobile: full-width fixed positioning */
@media screen and (max-width: 768px) {
    .bootstrap-datetimepicker-widget {
        position: fixed !important;
        left: 1.5rem !important;
        right: 1.5rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
    .bootstrap-datetimepicker-widget .datepicker,
    .bootstrap-datetimepicker-widget .datepicker table,
    .bootstrap-datetimepicker-widget .timepicker { width: 100%; }
    .modal .bootstrap-datetimepicker-widget {
        top: auto !important;
        bottom: 1.5rem !important;
    }
    .bootstrap-datetimepicker-widget .datepicker-days table td,
    .bootstrap-datetimepicker-widget .datepicker-days table th {
        width: calc(100% / 7);
        min-width: 0; height: auto; line-height: normal; padding: 0.6em 0;
    }
}