/*
 * Portal theme for bootstrap-datepicker (FLS-105).
 * Self-contained: includes the structural rules the popup needs (the plugin CSS
 * is not loaded by the shared head fragment) plus the portal skin.
 * Colors derive from the Bootstrap 5 theme variables in dist/css/main.min.css
 * (--bs-primary / --bs-primary-rgb) — no hard-coded theme colors.
 */

/* ---------- structure ---------- */

.datepicker {
    direction: ltr;
}

.datepicker.datepicker-dropdown {
    top: 0;
    left: 0;
    z-index: 1060;
    padding: 10px;
}

.datepicker table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: transparent;
}

.datepicker table tr td,
.datepicker table tr th {
    text-align: center;
    width: 34px;
    height: 32px;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
}

.datepicker .datepicker-switch {
    width: 145px;
    font-weight: 600;
}

.datepicker table tr td span {
    display: block;
    width: 23%;
    height: 44px;
    line-height: 44px;
    float: left;
    margin: 1%;
    cursor: pointer;
    border-radius: 6px;
}

/* ---------- popup container ---------- */

.datepicker.dropdown-menu {
    background-color: #fff;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    color: #333;
}

/* ---------- header: month switch + prev/next ---------- */
/* !important defeats global `table > thead > tr > th` rules */

.datepicker table tr th.prev,
.datepicker table tr th.next,
.datepicker table tr th.datepicker-switch {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    cursor: pointer;
}

.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover,
.datepicker table tr th.datepicker-switch:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.85) !important;
}

/* day-of-week row */
.datepicker table tr th.dow {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary) !important;
    font-weight: 600;
}

/* ---------- days ---------- */

.datepicker table tr td.day {
    cursor: pointer;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #adb5bd;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: none;
    color: #adb5bd;
    cursor: default;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
    font-weight: 600;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.today {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ---------- month / year / decade grids ---------- */

.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    background: none;
    color: #adb5bd;
    cursor: default;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: #adb5bd;
}

/* clear / today footer cells, if enabled */
.datepicker table tr th.clear,
.datepicker table tr th.today {
    cursor: pointer;
}

/* ---------- calendar icon next to date inputs ---------- */

input.mydatepicker + .input-group-text,
.input-group:has(> input.mydatepicker) .input-group-text {
    cursor: pointer;
}