/* ------------------------------------------------------------------
 | Dropdown pemilih tema (Bootswatch)
 * ------------------------------------------------------------------ */
.theme-menu {
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
}

/* ------------------------------------------------------------------
 | Panel debug session (mode dev) - sisi kiri, auto hide
 * ------------------------------------------------------------------ */
:root {
    --dev-panel-w: 340px;
}

.dev-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--dev-panel-w);
    max-width: 85vw;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.dev-panel.open {
    transform: translateX(0);
}

.dev-panel-toggle {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 1081;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.6rem 0.45rem;
    opacity: 0.75;
    border-radius: 0 0.5rem 0.5rem 0;
    transition:
        left 0.25s ease,
        opacity 0.2s ease;
}

.dev-panel-toggle:hover {
    opacity: 1;
    background-color: #0d6efd !important;
}

body.dev-open .dev-panel-toggle {
    left: min(var(--dev-panel-w), 85vw);
}

.dev-row {
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-key {
    font-weight: 600;
    font-size: 0.75rem;
    color: #7dd3fc;
    word-break: break-all;
}

.dev-val {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #e2e8f0;
    white-space: pre-wrap;
    word-break: break-all;
}

.dev-empty {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ------------------------------------------------------------------
 | Flatpickr: kalender input tanggal
 | flatpickr.min.css tidak memakai variabel tema, jadi warna diselaraskan
 | di sini memakai --bs-* agar cocok dengan tema terang maupun gelap.
 * ------------------------------------------------------------------ */
.flatpickr-calendar {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--bs-body-bg);
}

.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-top-color: var(--bs-body-bg);
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--bs-primary);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--bs-body-color);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--bs-body-bg);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.flatpickr-weekdays {
    background: transparent;
}

span.flatpickr-weekday {
    color: var(--bs-secondary-color);
    background: transparent;
}

.flatpickr-day {
    color: var(--bs-body-color);
    border-color: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--bs-secondary-color);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--bs-secondary-color);
    opacity: 0.5;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.flatpickr-day.today {
    border-color: var(--bs-primary);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.flatpickr-day.inRange {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-bg);
    box-shadow: none;
}

.numInputWrapper:hover {
    background: var(--bs-secondary-bg);
}

.numInputWrapper span {
    border-color: var(--bs-border-color);
}

.numInputWrapper span:hover {
    background: var(--bs-tertiary-bg);
}

.numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--bs-body-color);
}

.numInputWrapper span.arrowDown::after {
    border-top-color: var(--bs-body-color);
}