/*
 * Tabler-style theming for FullCalendar v5 (used by the Till calendar page).
 * Derived from Tabler v1.4 tabler-vendors fullcalendar rules, with hardcoded
 * fallbacks so it works regardless of the Tabler version shipped in this app.
 */

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

.fc .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 .fc-button:hover {
    background-color: var(--tblr-active-bg, rgba(0, 0, 0, .04)) !important;
}

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

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

/* ---- Column headers / day cells ---- */
.fc .fc-col-header-cell {
    background-color: var(--tblr-bg-surface-secondary, #f5f7fb);
    color: var(--tblr-secondary, #667382);
    text-transform: uppercase;
    /* match the toolbar buttons (เดือน / กำหนดการ / สัปดาห์): same size, bold */
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    line-height: 1;
}

.fc .fc-col-header-cell-cushion {
    color: inherit;
    padding: .5rem;
    font-weight: 600;
}

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

/* taller, uniform week rows so empty cells match Tabler's proportions */
.fc .fc-daygrid-day-frame {
    min-height: 7rem;
}

/* ---- Event colors by Till status (light block) ----
 * FullCalendar defaults the event text to white on .fc-event-main; force it to
 * inherit the dark colour set on the event element so it stays readable.       */
.fc-daygrid-event .fc-event-main,
.fc-daygrid-event .fc-event-main * {
    color: inherit !important;
}

.fc-event.till-status-azure,
.fc-event.till-status-azure .fc-list-event-dot { border-color: #4299e1; }
.fc-event.till-status-azure { background-color: rgba(66, 153, 225, .14) !important; color: inherit !important; }

.fc-event.till-status-blue,
.fc-event.till-status-blue .fc-list-event-dot { border-color: #206bc4; }
.fc-event.till-status-blue { background-color: rgba(32, 107, 196, .14) !important; color: inherit !important; }

.fc-event.till-status-red,
.fc-event.till-status-red .fc-list-event-dot { border-color: #d63939; }
.fc-event.till-status-red { background-color: rgba(214, 57, 57, .14) !important; color: inherit !important; }

.fc-event.till-status-orange,
.fc-event.till-status-orange .fc-list-event-dot { border-color: #f76707; }
.fc-event.till-status-orange { background-color: rgba(247, 103, 7, .14) !important; color: inherit !important; }

.fc-event.till-status-green,
.fc-event.till-status-green .fc-list-event-dot { border-color: #2fb344; }
.fc-event.till-status-green { background-color: rgba(47, 179, 68, .14) !important; color: inherit !important; }

.fc-event.till-status-gray,
.fc-event.till-status-gray .fc-list-event-dot { border-color: #919eab; }
.fc-event.till-status-gray { background-color: rgba(145, 158, 171, .18) !important; color: inherit !important; }

.fc-event.till-status-dark,
.fc-event.till-status-dark .fc-list-event-dot { border-color: #1d273b; }
.fc-event.till-status-dark { background-color: rgba(29, 39, 59, .12) !important; color: inherit !important; }

/* daygrid (month) events: full-width rounded CARD with a thicker left status
 * bar, so the whole event is a large, easy click target (matches the rx-erp HR
 * calendar). The tinted background + status colour come from the till-status-*
 * classes above; here we only shape the card. */
.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;
}

/* let the card content stack and fill the width (FullCalendar wraps the html in
 * .fc-event-main) */
.fc-daygrid-event .fc-event-main {
    display: block;
    width: 100%;
    min-width: 0;
}

/* operator (cashier) name: bold primary line; till No: muted subline. Both clip
 * to one line so long codes/names never overflow into the next cell. */
.fc-event .fc-event-name {
    font-weight: 700;
    font-size: .82rem;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fc-event .fc-event-sub {
    margin-top: 1px;
    font-size: .74rem;
    opacity: .75;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* lift the card slightly on hover (desktop / pointer devices only) */
@media (hover: hover) and (min-width: 577px) {
    .fc-daygrid-event.fc-event {
        cursor: pointer;
        transition: box-shadow .12s ease, transform .12s ease;
    }
    .fc-daygrid-event.fc-event:hover,
    .fc-daygrid-event.fc-event:focus-within {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    }
}

/* one-line chip styling kept for the list / week views */
.fc-event .till-no { font-weight: 700; }
.fc-event .till-operator { font-weight: 400; }
.fc-daygrid-event .fc-event-main:not(:has(.fc-event-name)) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* list view rows keep the app's normal text color, dot carries the status color */
.fc-list-event.till-status-azure,
.fc-list-event.till-status-blue,
.fc-list-event.till-status-red,
.fc-list-event.till-status-orange,
.fc-list-event.till-status-green,
.fc-list-event.till-status-gray,
.fc-list-event.till-status-dark {
    background-color: transparent !important;
    color: inherit !important;
    cursor: pointer;
}

/* ---- Status filter swatches: medium pastel tones (more visible than -lt) ---- */
.form-colorinput-color.till-swatch-azure  { background-color: #79bdec; border: 1px solid rgba(66, 153, 225, .5); }
.form-colorinput-color.till-swatch-red    { background-color: #e88a8a; border: 1px solid rgba(214, 57, 57, .5); }
.form-colorinput-color.till-swatch-orange { background-color: #f3b274; border: 1px solid rgba(247, 103, 7, .5); }
.form-colorinput-color.till-swatch-green  { background-color: #82cf96; border: 1px solid rgba(47, 179, 68, .5); }
.form-colorinput-color.till-swatch-gray   { background-color: #aab2bd; border: 1px solid rgba(110, 123, 138, .5); }

/* ---- Mobile: compact full-width stacked chips so they fit the narrow day
 * cells (same approach as the rx-erp HR calendar) ---- */
@media (max-width: 576px) {
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }
    .fc .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 .fc-daygrid-day-frame {
        min-height: 4.25rem;
    }
    .fc .fc-daygrid-day-number {
        font-size: .75rem;
        padding: 1px 3px;
    }
    /* keep the full-width card on mobile, just tighter padding / smaller text */
    .fc-daygrid-event.fc-event {
        margin: 2px 1px 0;
        padding: 3px 6px;
    }
    .fc-event .fc-event-name {
        font-size: .72rem;
    }
    .fc-event .fc-event-sub {
        font-size: .66rem;
    }
    /* the narrow mobile chip just truncates the till No to "000…", which is
     * useless at a glance; show the operator (cashier) name instead (list view) */
    .fc-event .till-no {
        display: none;
    }
    .fc-event .till-operator {
        font-weight: 600;
    }
}