:root {
    --accent: #f29600;
    --accent-dark: #d98e12;
    --navy: #1a1a2e;
    --cream: #fff3dc;
    --cream-2: #fbf4e9;
    --footer-bg: #1c1c1c;
    --text: #333;
    --text-light: #767676;
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
    background: #f5f6f8;
    color: #1a1a1a;
}

a {
    color: #2563eb;
}

/* App-wide scrollbar style. Same shape as the sidebar nav
   (static/css/app-shell.css .sidebar__nav): thin, 8px, rounded --accent
   thumb. The track is transparent here so this one rule reads correctly on
   both the navy sidebar and the light cream panels (bell panel, calendar
   modal, announcement lists, reservation table). The sidebar keeps its own
   more-specific rules — a navy track + navy thumb border — so its exact
   look is unchanged. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-dark);
}

/* SweetAlert2 (delete confirmations app-wide, static/js/delete-confirm.js
   + the calendar-specific handler in static/js/calendar.js) defaults its
   overlay to z-index 1060 — far below the calendar event modal's
   z-index:10000 (static/css/calendar.css's .calendar-modal, deliberately
   set high to sit above FullCalendar's own "+N more" popover). Confirming
   a delete from inside that still-open modal rendered the SweetAlert2
   dialog behind it — visible but unclickable. SweetAlert2 injects its own
   stylesheet at runtime (on first Swal.fire() call), which can load after
   this file, so a plain same-specificity override isn't reliably safe
   here — !important is the correct tool for beating a dynamically
   injected third-party stylesheet, not a shortcut around app CSS. */
.swal2-container {
    z-index: 10001 !important;
}

/* Flatpickr (datetime-local replacement, used wherever a date/time input
   appears) — full brand theme so the popup reads as part of this app
   (navy header, accent highlights, cream hovers, card shadow/radius)
   instead of flatpickr's plain default look. */
.flatpickr-calendar {
    border-radius: var(--radius);
    border: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
    overflow: hidden;
}

.flatpickr-months {
    background: var(--navy);
    padding: 10px 0 6px;
    color: #fff;
}

.flatpickr-current-month {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 0;
}

.flatpickr-current-month span.cur-month {
    color: #fff;
    font-weight: 600;
}

.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 600;
}

/* Flatpickr defaults to monthSelectorType:"dropdown" — the rendered
   element is a <select> with a transparent background (confirmed in
   flatpickr's own CSS), sitting directly on the navy header, so it needs
   white text like the rest of the header — not navy, which would be
   invisible against navy. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #fff;
    font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    color: var(--navy);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #fff;
    fill: #fff;
    padding-top: 8px;
}

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

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

span.flatpickr-weekday {
    background: var(--cream-2);
    color: var(--navy);
    font-weight: 600;
    font-size: 12px;
}

/* Sat/Sun weekday-header red — matches the #dc2626 already used for Sat/Sun
   on the main company calendar (static/css/calendar.css). Declared after
   the base span.flatpickr-weekday rule above: both are single-class-plus-
   element selectors of equal specificity, so source order decides the tie
   and this needs to come second to actually win. */
span.flatpickr-weekday--sun,
span.flatpickr-weekday--sat {
    color: #dc2626;
}

.flatpickr-days {
    border: none;
}

.flatpickr-day {
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}

/* Sat/Sun day-number red — same reasoning: .flatpickr-day--sun/--sat and
   the base .flatpickr-day above are both single-class selectors (equal
   specificity), so this must come after .flatpickr-day to win the tie.
   .selected/.today/.flatpickr-disabled/prevMonthDay/nextMonthDay all use
   2+ classes and correctly take precedence over this on their own,
   regardless of order, so no :not() guards are needed against those. */
.flatpickr-day--sun,
.flatpickr-day--sat {
    color: #dc2626;
    font-weight: 600;
}

.flatpickr-day.today:not(.selected) {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.flatpickr-day:hover {
    background: var(--cream);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #ccc;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #ddd;
}

.flatpickr-time {
    border-top: 1px solid var(--accent-dark) !important;
    height: 44px;
}

.flatpickr-time input {
    font-weight: 600;
    color: var(--navy);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--cream);
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--navy);
}

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

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

/* Flatpickr's own CSS has a more specific rule scoped under
   .flatpickr-current-month for these same two selectors (near-black
   arrows, meant for a light header) — match that exact scope so this
   override actually wins instead of losing on specificity. */
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--accent);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--accent);
}

.flatpickr-input-wrapper {
    position: relative;
    display: block;
}

.flatpickr-input-wrapper input {
    padding-right: 36px;
    width: 100%;
}

.flatpickr-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    pointer-events: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}