/*
 * School-day calendar preview.
 *
 * Plain CSS, registered through FilamentAsset, rather than Tailwind utilities.
 * The panel ships a PRE-COMPILED stylesheet containing only the classes
 * Filament itself uses, so `grid-cols-7` and friends written in a custom Blade
 * view resolve to nothing — which is how this month view ended up as a single
 * vertical column of day numbers with no grid at all.
 *
 * Everything is namespaced under .cal- so it cannot collide with Filament.
 *
 * Sizes are in rem throughout, so the whole calendar follows the per-user font
 * scale set on the Appearance page instead of ignoring it.
 */

.cal-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------------------------------------------------------------- toolbar */

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    background-color: rgb(255 255 255);
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cal-month {
    min-width: 10rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgb(24 24 27);
}

/* ----------------------------------------------------------------- totals */

.cal-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/*
 * Each total is a chip carrying its own colour, so the summary and the grid
 * below use one shared visual language: the colour that means "school day" in
 * the chip is the colour that means it in a cell.
 */
.cal-total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    white-space: nowrap;
}

.cal-total strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.cal-total--school {
    color: rgb(6 95 70);
    background-color: rgb(236 253 245);
    border-color: rgb(167 243 208);
}

.cal-total--holiday {
    color: rgb(159 18 57);
    background-color: rgb(255 241 242);
    border-color: rgb(254 205 211);
}

.cal-total--weekend {
    color: rgb(63 63 70);
    background-color: rgb(244 244 245);
    border-color: rgb(228 228 231);
}

.cal-total--override {
    color: rgb(7 89 133);
    background-color: rgb(240 249 255);
    border-color: rgb(186 230 253);
}

/* ------------------------------------------------------------------- grid */

.cal-scroll {
    overflow-x: auto;
    /* Keeps a focus ring on a cell from being clipped by the scroll box. */
    padding: 0.25rem;
    margin: -0.25rem;
}

.cal-grid {
    display: grid;
    /* The one declaration the whole page depends on. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.375rem;
    min-width: 44rem;
}

.cal-heading {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgb(113 113 122);
    text-transform: none;
}

/* ------------------------------------------------------------------ cells */

.cal-day {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 5.5rem;
    padding: 0.5rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.625rem;
    background-color: rgb(255 255 255);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Padding cells before the first of the month: present but visually silent. */
.cal-day--blank {
    border-style: dashed;
    border-color: rgb(228 228 231);
    background-color: rgb(250 250 250);
    min-height: 5.5rem;
}

.cal-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.cal-daynum {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: rgb(39 39 42);
}

.cal-mark {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/*
 * The reason, not just the verdict.
 *
 * An administrator needs to trace a surprising day off to the rule that caused
 * it, so the reason is always on the cell rather than hidden behind a tooltip
 * that never appears on a touch screen.
 */
.cal-reason {
    font-size: 0.7rem;
    line-height: 1.35;
    color: rgb(82 82 91);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ cell states */

.cal-day--school {
    border-color: rgb(167 243 208);
    background-color: rgb(240 253 244);
}

.cal-day--school .cal-daynum {
    color: rgb(6 95 70);
}

.cal-day--school .cal-mark {
    color: rgb(16 185 129);
}

.cal-day--override {
    border-color: rgb(125 211 252);
    background-color: rgb(240 249 255);
}

.cal-day--override .cal-daynum {
    color: rgb(7 89 133);
}

.cal-day--override .cal-mark {
    color: rgb(14 165 233);
}

.cal-day--holiday {
    border-color: rgb(254 205 211);
    background-color: rgb(255 241 242);
}

.cal-day--holiday .cal-daynum {
    color: rgb(159 18 57);
}

.cal-day--off {
    border-color: rgb(228 228 231);
    background-color: rgb(250 250 250);
}

.cal-day--off .cal-daynum,
.cal-day--off .cal-reason {
    color: rgb(113 113 122);
}

/* Today outranks its state colour: it is the cell a reader looks for first. */
.cal-day--today {
    box-shadow: 0 0 0 2px rgb(20 184 166);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------- legend */

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.8rem;
    color: rgb(82 82 91);
}

.cal-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cal-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.25rem;
    border: 1px solid rgb(228 228 231);
    flex: none;
}

.cal-swatch--school { background-color: rgb(209 250 229); border-color: rgb(110 231 183); }
.cal-swatch--override { background-color: rgb(224 242 254); border-color: rgb(125 211 252); }
.cal-swatch--holiday { background-color: rgb(255 228 230); border-color: rgb(253 164 175); }
.cal-swatch--off { background-color: rgb(244 244 245); border-color: rgb(212 212 216); }

/* ------------------------------------------------------------------ rules */

.cal-rules {
    margin: 0;
    padding-inline-start: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: rgb(82 82 91);
}

.cal-note {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: rgb(113 113 122);
}

.cal-note--warning {
    color: rgb(180 83 9);
}

/* ------------------------------------------------------------- dark theme */

.dark .cal-toolbar {
    border-color: rgb(63 63 70);
    background-color: rgb(39 39 42);
}

.dark .cal-month { color: rgb(244 244 245); }
.dark .cal-heading { color: rgb(161 161 170); }

.dark .cal-day {
    border-color: rgb(63 63 70);
    background-color: rgb(39 39 42);
}

.dark .cal-daynum { color: rgb(228 228 231); }
.dark .cal-reason { color: rgb(161 161 170); }

.dark .cal-day--blank {
    border-color: rgb(63 63 70);
    background-color: rgb(24 24 27);
}

.dark .cal-day--school {
    border-color: rgb(6 95 70);
    background-color: rgb(6 78 59 / 0.35);
}

.dark .cal-day--school .cal-daynum { color: rgb(110 231 183); }

.dark .cal-day--override {
    border-color: rgb(7 89 133);
    background-color: rgb(12 74 110 / 0.35);
}

.dark .cal-day--override .cal-daynum { color: rgb(125 211 252); }

.dark .cal-day--holiday {
    border-color: rgb(159 18 57);
    background-color: rgb(136 19 55 / 0.3);
}

.dark .cal-day--holiday .cal-daynum { color: rgb(253 164 175); }

.dark .cal-day--off {
    border-color: rgb(63 63 70);
    background-color: rgb(24 24 27);
}

.dark .cal-total--school { color: rgb(110 231 183); background-color: rgb(6 78 59 / 0.35); border-color: rgb(6 95 70); }
.dark .cal-total--holiday { color: rgb(253 164 175); background-color: rgb(136 19 55 / 0.3); border-color: rgb(159 18 57); }
.dark .cal-total--weekend { color: rgb(212 212 216); background-color: rgb(39 39 42); border-color: rgb(63 63 70); }
.dark .cal-total--override { color: rgb(125 211 252); background-color: rgb(12 74 110 / 0.35); border-color: rgb(7 89 133); }

.dark .cal-legend,
.dark .cal-rules { color: rgb(161 161 170); }

.dark .cal-note { color: rgb(161 161 170); }
.dark .cal-note--warning { color: rgb(252 211 77); }

/* ------------------------------------------------------------ narrow view */

@media (max-width: 40rem) {
    .cal-grid {
        /*
         * Below this width seven usable columns do not fit, so the grid scrolls
         * sideways rather than collapsing — a calendar that is not seven wide
         * has stopped being a calendar.
         */
        min-width: 38rem;
        gap: 0.25rem;
    }

    .cal-day {
        min-height: 4.75rem;
        padding: 0.375rem;
    }

    .cal-reason {
        font-size: 0.65rem;
    }
}

/* Respects the Appearance page's reduce-motion setting and the OS one. */
@media (prefers-reduced-motion: reduce) {
    .cal-day {
        transition: none;
    }

    .cal-day--today {
        transform: none;
    }
}