@charset "utf-8";

/* ── Navbar calendar ──────────────────────────────────── */

#calendar {
    background: transparent;
    display: flex;
    align-items: center;
}

.weekday,
.date {
    text-transform: none;
}

.date-picker {
    position: relative;
    user-select: none;
}

.date-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.date-container > .weekday {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-500, #4b5563);
    text-transform: uppercase;
}

.date-container > .date {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink-700, #1d1d1f);
    letter-spacing: -0.01em;
}

.date-container > .year {
    font-size: 0.85rem;
    color: var(--ink-300, #9ca3af);
    margin-left: 2px;
}

.date-picker [data-toggle="datepicker"] {
    font-size: 1rem;
    cursor: pointer;
    color: var(--ink-300, #9ca3af);
    padding: 4px 7px;
    border-radius: 6px;
    transition: background .13s ease, color .13s ease;
}

.date-picker [data-toggle="datepicker"]:hover {
    background: var(--surface-2, #f4f4f6);
    color: var(--ink-700, #1d1d1f);
}

.date-picker [data-toggle="calendar"] {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--ink-300, #9ca3af);
    margin-left: 4px;
    padding: 4px 7px;
    border-radius: 6px;
    transition: color .13s ease, background .13s ease;
}

.date-picker [data-toggle="calendar"]:hover {
    color: var(--accent, #1b5e20);
    background: var(--accent-soft, rgba(27,94,32,0.08));
}

/* ── Input datepicker dropdown ──────────────────────────── */

.date-picker .input-datepicker {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    z-index: 1050;
}

.date-picker .input-datepicker.show-input {
    display: flex;
}

.input-datepicker .form-control {
    padding: 5px 10px;
    height: auto;
    font-size: 13px;
    border-color: var(--ink-100, #e5e7eb);
    background: var(--surface-0, #fff);
    color: var(--ink-700, #1d1d1f);
}

.input-datepicker .btn {
    padding: 4px 10px;
    border-color: var(--ink-100, #e5e7eb);
    color: var(--ink-500, #4b5563);
}
.input-datepicker .btn:hover {
    background: var(--surface-2, #f4f4f6);
    color: var(--ink-700, #1d1d1f);
}

/* ── Flatpickr overrides ──────────────────────────────── */

.flatpickr-calendar {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    font-family: inherit;
    z-index: 9999 !important;
    border: 1px solid var(--ink-100, #e5e7eb);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--accent, #1b5e20);
    border-color: var(--accent, #1b5e20);
}

.flatpickr-day.today {
    border-color: var(--accent, #1b5e20);
}

.flatpickr-day.today:hover {
    background: var(--accent, #1b5e20);
    border-color: var(--accent, #1b5e20);
    color: #fff;
}

.flatpickr-months .flatpickr-month {
    background: var(--accent, #1b5e20);
    border-radius: 10px 10px 0 0;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: rgba(255,255,255,.85);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #fff;
}

.flatpickr-current-month {
    color: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--accent, #1b5e20);
    color: #fff;
}

span.flatpickr-weekday {
    color: var(--accent, #1b5e20);
    font-weight: 600;
}

/* ── Dark mode ────────────────────────────────────────── */

[data-theme="dark"] #page_header.visible {
    border-bottom-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .date-container > .date     { color: var(--text-primary, #e8eaff); }
[data-theme="dark"] .date-container > .weekday  { color: rgba(232,234,255,0.55); }
[data-theme="dark"] .date-container > .year     { color: rgba(232,234,255,0.35); }
[data-theme="dark"] .date-picker [data-toggle="datepicker"] { color: rgba(232,234,255,0.35); }
[data-theme="dark"] .date-picker [data-toggle="datepicker"]:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #e8eaff);
}
[data-theme="dark"] .date-picker [data-toggle="calendar"] { color: rgba(232,234,255,0.35); }
[data-theme="dark"] .date-picker [data-toggle="calendar"]:hover {
    background: rgba(27,94,32,0.18);
    color: #86efac;
}
[data-theme="dark"] .input-datepicker .form-control {
    background: #161824;
    border-color: rgba(255,255,255,0.09);
    color: #e8eaff;
}
[data-theme="dark"] .input-datepicker .btn {
    border-color: rgba(255,255,255,0.09);
    color: rgba(232,234,255,0.55);
}
[data-theme="dark"] .flatpickr-calendar {
    background: #1e2030;
    border-color: rgba(255,255,255,0.09);
    color: #e8eaff;
}
[data-theme="dark"] .flatpickr-day {
    color: #e8eaff;
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
    background: rgba(255,255,255,0.08);
    border-color: transparent;
}
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay { color: rgba(232,234,255,0.25); }
[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: rgba(232,234,255,0.18); }