/*
 * Tabler-style theming for FullCalendar v5.
 * Scoped to ".fc-tabler" so it ONLY applies to calendars that opt in (the HR
 * pages). Calendars rendered with Legacy="true" (e.g. the fuel-order calendar)
 * keep the original FullCalendar look.
 * Adapted from the forex POS calendar.tabler.css. It only restyles the toolbar,
 * column headers, day cells and event chips - it does NOT change which color
 * maps to which status (that stays in FullCalendarJsEventViewModel).
 */

/* ---- Toolbar / buttons ---- */
.fc-tabler .fc-toolbar-title {
    font-size: var(--tblr-font-size-h3, 1.25rem);
    font-weight: 500;
}

.fc-tabler .fc-button {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--tblr-border-color, #dadfe5) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    text-transform: capitalize;
}

.fc-tabler .fc-button:hover {
    background-color: var(--tblr-active-bg, rgba(0, 0, 0, .04)) !important;
}

.fc-tabler .fc-button-primary:not(:disabled).fc-button-active,
.fc-tabler .fc-button-primary:not(:disabled):active {
    color: #fff !important;
    background-color: var(--tblr-primary, #206bc4) !important;
    border-color: var(--tblr-primary, #206bc4) !important;
}

.fc-tabler .fc-button-primary:disabled {
    opacity: .5;
}

/* ---- Column headers / day cells ---- */
.fc-tabler .fc-col-header-cell {
    background-color: var(--tblr-bg-surface-secondary, #f5f7fb);
    color: var(--tblr-secondary, #667382);
    text-transform: uppercase;
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    line-height: 1;
}

.fc-tabler .fc-col-header-cell-cushion {
    color: inherit;
    padding: .5rem;
    font-weight: 600;
    /* day names are <a> tags; strip the link underline / pointer */
    text-decoration: none !important;
    cursor: default;
}

.fc-tabler .fc-daygrid-day-number {
    color: var(--tblr-secondary, #667382);
}

/* taller, uniform week rows so a single card sits comfortably in the cell */
.fc-tabler .fc-daygrid-day-frame {
    min-height: 7.5rem;
}

/* ---- Event chips: full-width CARD with a left status-colour bar ----
 * Each event fills the day-cell width so it is large and easy to read/tap.
 * The faded 10% fill, the 20% side border, and the solid 3px LEFT bar are all
 * applied per-event in fullcalendar.js eventDidMount (the colour is dynamic and
 * stays owned by FullCalendarJsEventViewModel). This file only sizes the card. */
.fc-tabler .fc-daygrid-event.fc-event {
    display: block;
    width: 100%;
    margin: 3px 2px 0;
    padding: 5px 9px;
    border-style: solid;
    border-width: 1px;
    border-left-width: 3px;
    border-radius: 7px;
}

/* the inner markup hard-codes a solid Tabler "bg-{color}" + text-white, which
 * would hide the tint and wash out the text. Force the inner blocks transparent
 * so the eventDidMount fill shows, and reset text to the normal body colour. */
.fc-tabler .fc-daygrid-event .fc-event-main,
.fc-tabler .fc-daygrid-event .fc-event-main * {
    background-color: transparent !important;
}
.fc-tabler .fc-daygrid-event.fc-event,
.fc-tabler .fc-daygrid-event .fc-event-main,
.fc-tabler .fc-daygrid-event .fc-event-main * {
    color: var(--tblr-body-color, #1d273b) !important;
}

/* hide the leading icon block and stack the inner flex so the card fills the
 * whole cell width instead of a tight one-line row */
.fc-tabler .fc-daygrid-event .fc-event-main .px-2 {
    display: none !important;
}
.fc-tabler .fc-daygrid-event .fc-event-main,
.fc-tabler .fc-daygrid-event .fc-event-main > .d-flex {
    display: block !important;
    width: 100%;
    min-width: 0;
}
.fc-tabler .fc-daygrid-event .fc-event-main .p-2 {
    display: block;
    padding: 0 !important;
    min-width: 0;
    line-height: 1.25;
}

/* line 1: employee name (bold), tinted with a DEEP shade of the status colour
 * (set per-event in eventDidMount); line 2: leave type + status in dark body
 * text. Each line clips with an ellipsis so a long label never blows the card's
 * height; the full label + reason are one click away in the leave dialog. Events
 * whose title has no ":" render the name line only. */
.fc-tabler .fc-daygrid-event .fc-event-name {
    font-weight: 700;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-tabler .fc-daygrid-event .fc-event-main .fc-event-sub {
    margin-top: 1px;
    font-size: .74rem;
    color: var(--tblr-body-color, #1d273b) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* single-line events (e.g. a day-off "Off", which has no second line) reserve
 * the same content height as the two-line shift cards so the month grid stays
 * visually even instead of showing a short stubby chip */
.fc-tabler .fc-daygrid-event .fc-event-main {
    min-height: calc((.82rem + .74rem) * 1.25 + 1px);
}

/* list view rows: keep the app's normal text color, dot carries the event color */
.fc-tabler .fc-list-event {
    cursor: pointer;
}

/* ---- Desktop hover: the card lifts slightly with a soft shadow + pointer
 * cursor so it reads as clickable. The card keeps its size (no width change) so
 * stacked cards in the same day never cover each other. Gated on hover-capable,
 * non-mobile devices so the touch layout is untouched. */
@media (hover: hover) and (min-width: 577px) {
    .fc-tabler .fc-daygrid-event.fc-event {
        cursor: pointer;
        transition: box-shadow .12s ease, transform .12s ease;
    }
    .fc-tabler .fc-daygrid-event.fc-event:hover,
    .fc-tabler .fc-daygrid-event.fc-event:focus-within {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    }
}

/* ---- Mobile: keep the card but with tighter padding + smaller type so the
 * month still fits the narrow day cells without endless scrolling ---- */
@media (max-width: 576px) {
    .fc-tabler .fc-toolbar-title {
        font-size: 1rem;
    }
    .fc-tabler .fc-col-header-cell {
        font-size: .7rem;
        padding-top: .25rem !important;
        padding-bottom: .25rem !important;
    }
    .fc-tabler .fc-daygrid-day-frame {
        min-height: 4.5rem;
    }
    .fc-tabler .fc-daygrid-day-number {
        font-size: .75rem;
        padding: 1px 3px;
    }
    .fc-tabler .fc-daygrid-event.fc-event {
        margin: 2px 1px 0;
        padding: 3px 6px;
    }
    .fc-tabler .fc-daygrid-event .fc-event-name {
        font-size: .7rem;
    }
    .fc-tabler .fc-daygrid-event .fc-event-main .fc-event-sub {
        font-size: .64rem;
    }
    .fc-tabler .fc-daygrid-event .fc-event-main {
        min-height: calc((.7rem + .64rem) * 1.25 + 1px);
    }
}