/*
 * 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 empty cells match Tabler's proportions */
.fc-tabler .fc-daygrid-day-frame {
    min-height: 7rem;
}

/* ---- Event chips: faded fill + solid border, dark readable text ---- */
.fc-tabler .fc-daygrid-event.fc-event {
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    padding: 0 2px;
}

/* the faded fill comes from eventDidMount (applied to the outer <a>); the inner
 * markup hard-codes a solid Tabler "bg-{color}" class + text-white, which would
 * hide the tint and wash out the text. Force the inner blocks transparent and
 * the text to the normal body color. */
.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;
}

/* Tabler-style compact chip: hide the leading icon block, trim the flex padding */
.fc-tabler .fc-daygrid-event .fc-event-main .px-2 {
    display: none !important;
}
.fc-tabler .fc-daygrid-event .fc-event-main .p-2 {
    padding: 1px 6px !important;
}

/* keep chip text on one line and clip with an ellipsis so long titles
 * (e.g. "Wee: ลาพักร้อน (Approved)") never overflow / overlap the next cell */
.fc-tabler .fc-daygrid-event .fc-event-main,
.fc-tabler .fc-daygrid-event .fc-event-main > .d-flex {
    min-width: 0;
    overflow: hidden;
}
.fc-tabler .fc-daygrid-event .fc-event-main .p-2 {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* ---- Mobile: compact chips so they fit the narrow day cells ---- */
@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;
    }
    /* shorter rows so the month fits without endless scrolling */
    .fc-tabler .fc-daygrid-day-frame {
        min-height: 4.25rem;
    }
    .fc-tabler .fc-daygrid-day-number {
        font-size: .75rem;
        padding: 1px 3px;
    }
    /* full-width stacked chips like the mobile mockup (fill the whole day cell) */
    .fc-tabler .fc-daygrid-event.fc-event {
        display: block;
        font-size: .68rem;
        line-height: 1.3;
        padding: 1px 3px;
        margin-top: 2px;
    }
    .fc-tabler .fc-daygrid-event .fc-event-main,
    .fc-tabler .fc-daygrid-event .fc-event-main > .d-flex {
        display: block !important;
        width: 100%;
    }
    .fc-tabler .fc-daygrid-event .fc-event-main .p-2 {
        display: block;
        padding: 0 2px !important;
    }
}