/* Copyright (c) 2026 Center for Family Development
   All rights reserved.
   Calendar grid styles shared by the staff calendar and the public availability calendar. */

.cal-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 2px solid #6c757d;
    /* Long-press-drag is a selection gesture; suppress native text selection and the iOS
       tap-callout/magnifier while holding. Harmless on desktop (drag already preventDefaults). */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.cal-grid th,
.cal-grid td {
    border: 1px solid #adb5bd;
    vertical-align: top;
    padding: 0.25rem;
    font-size: 0.85rem;
}

.cal-grid thead th {
    text-align: center;
    background-color: #e9ecef;
    color: #343a40;
}

.cal-grid .cal-hour-label {
    width: 5.5rem;
    white-space: nowrap;
    text-align: right;
    background-color: #e9ecef;
    font-weight: 600;
    color: #343a40;
}

.cal-grid td.cal-today,
.cal-grid th.cal-today {
    background-color: #fffbe6;
}

.cal-cell-entry {
    display: block;
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
    margin-bottom: 0.15rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-cell-entry--scheduled {
    background-color: #cfe2ff;
    border-left: 3px solid #0d6efd;
}

.cal-cell-entry--approved {
    background-color: #d1e7dd;
    border-left: 3px solid #198754;
}

.cal-cell-entry--pending {
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
}

.cal-cell-entry--released {
    background: repeating-linear-gradient(45deg, #e9ecef, #e9ecef 6px, #f8f9fa 6px, #f8f9fa 12px);
    border-left: 3px solid #6c757d;
    color: #6c757d;
    text-decoration: line-through;
}

/* NEST childcare hours: distinct teal so they read as their own kind of entry. */
.cal-cell-entry--childcare {
    background-color: #d2f4ea;
    border-left: 3px solid #0dcaf0;
    color: #0a4f5c;
}

.cal-slot {
    text-align: center;
}

.cal-slot--busy {
    background-color: #dee2e6;
    color: #343a40;
}

.cal-slot--pending {
    background-color: #fff3cd;
    color: #664d03;
}

.cal-slot--you {
    background-color: #d1e7dd;
    color: #0f5132;
    font-weight: 600;
}

.cal-slot--free {
    background-color: #ffffff;
}

/* Open spots use the released stripe pattern (so they read as distinct from solid-green
   approved/own hours) but in the approved green, keeping "open" clearly a green state. */
.cal-slot--open {
    background: repeating-linear-gradient(45deg, #d1e7dd, #d1e7dd 6px, #eafaf1 6px, #eafaf1 12px);
    color: #0f5132;
    cursor: pointer;
}

.cal-slot--open:hover,
.cal-slot--open:focus {
    outline: 2px solid #198754;
    outline-offset: -2px;
}

.cal-slot--selecting {
    background-color: #198754;
    color: #ffffff;
    outline: 2px solid #146c43;
    outline-offset: -2px;
}

/* A cell already queued into the schedule-request pending list (persists across renders,
   independent of the transient drag highlight). */
.cal-slot--queued {
    outline: 2px dashed #6f42c1;
    outline-offset: -2px;
}

/* Selecting the viewer's own hours to release reads as danger, never as "reserve". */
.cal-slot--selecting-release {
    background-color: #dc3545;
    color: #ffffff;
    outline: 2px solid #b02a37;
    outline-offset: -2px;
}

/* The viewer's own hours are click/drag targets for release (per-room --you cells and
   the lone-reservation cells in My schedule). Recurring 'you' hours release this-date-only. */
[data-own-cell],
[data-recurring-cell] {
    cursor: pointer;
}

[data-own-cell]:hover,
[data-own-cell]:focus,
[data-recurring-cell]:hover,
[data-recurring-cell]:focus {
    outline: 2px solid #dc3545;
    outline-offset: -2px;
}

/* Brief confirmation flash on the hours just reserved from a calendar view. The
   animation self-fades, so no JS cleanup is needed after the grid re-renders. */
@keyframes calJustReserved {
    0% { box-shadow: inset 0 0 0 3px #198754; background-color: #a3cfbb; }
    70% { box-shadow: inset 0 0 0 3px #198754; }
    100% { box-shadow: inset 0 0 0 0 rgba(25, 135, 84, 0); }
}
.cal-slot--just-reserved {
    animation: calJustReserved 2.5s ease-out;
}

/* Own chips in My-schedule cells are individually cancellable. */
[data-chip-release] {
    cursor: pointer;
}

[data-chip-release]:hover,
[data-chip-release]:focus {
    outline: 1px solid #dc3545;
    outline-offset: 1px;
}

.cal-slot--full {
    background-color: #f8d7da;
    color: #842029;
}

.cal-slot--locked {
    background-color: #e9ecef;
    color: #adb5bd;
}

.cal-month-day {
    min-height: 5.5rem;
    cursor: pointer;
}

.cal-month-day:hover,
.cal-month-day:focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.cal-month-day--outside {
    background-color: #f8f9fa;
    color: #adb5bd;
    cursor: default;
}

.cal-month-date {
    font-weight: 600;
    display: block;
}

/* Clickable day column headers in the Building Calendars week view. */
.cal-grid th.cal-day-header {
    cursor: pointer;
}

.cal-grid th.cal-day-header:hover,
.cal-grid th.cal-day-header:focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

/* Reserve-mode chooser: keep both options full-height and readable when stacked. */
.reserve-mode-chooser .btn {
    white-space: normal;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.85rem;
}

.cal-legend .cal-legend-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.2rem;
    vertical-align: text-bottom;
    margin-right: 0.25rem;
}

/* ---- Room Calendars floor plan ---- */
.fp-stage {
    position: relative;
}

.fp-plan svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.fp-plan.fp-blur svg {
    filter: blur(3px);
    opacity: 0.45;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Room overlays are transparent hitboxes over the raster picture. The highlight is a
   translucent tint + stroke (changes fill-opacity AND stroke, not hue alone, so it reads
   over any backdrop and is color-blind safe). Overlays are inert by default; only rooms
   that exist in the DB for the shown floor become interactive (fp-room--known), set by JS
   at render time so it adapts per environment (dev vs live rooms differ). */
.fp-room {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;
}

.fp-room--inert {
    pointer-events: none;
}

.fp-room--known {
    cursor: pointer;
}

.fp-room--known:hover {
    fill: #1971c2;
    fill-opacity: 0.15;
}

.fp-room--selected {
    fill: #1971c2;
    fill-opacity: 0.22;
    stroke: #1971c2;
    stroke-width: 2;
}

/* Furniture icons are built into the base SVG but only shown in the exploded view — at
   whole-floor scale they'd be unreadable clutter. The explode overlay deep-clones the base
   SVG's children, so the icons come along and this selector reveals them there. Colour is
   set here and inherited by the icon primitives (they carry no fill of their own); the
   muted grey deliberately avoids the selection blue. */
/* Furniture icons are built into the base SVG, so they show on the whole-floor plan AND
   ride into the exploded view (which deep-clones the base SVG's children). Colour, not
   grey: furniture is permanent, and grey sank into the plan's own line work. Each part of
   an icon picks its own role colour via .fi-* (style.css); this fill only covers anything
   untoned, and the soft shadow lifts the whole group off the drawing. */
.fp-furniture {
    display: block;
    fill: var(--furn-base);
    fill-opacity: 1;
    stroke: none;
    pointer-events: none;
    /* Light touch on purpose: the keylines do the lifting now, and a heavier shadow
       reads as a smudge under the near-white pastel fills. */
    filter: drop-shadow(0 0.5px 0.5px rgba(30, 20, 55, 0.16));
}

/* DEV ONLY: the previewer's icon-scope toggle. "exploded" restores the original behaviour
   — icons hidden at whole-floor scale, revealed only inside the exploded room — for
   comparing the two. Default (no attribute) shows them everywhere. */
[data-furn-scope="exploded"] .fp-furniture {
    display: none;
}

[data-furn-scope="exploded"] .fp-exploded .fp-furniture {
    display: block;
}

.fp-exploded {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    max-height: 90%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
    transition: transform 0.35s ease;
    pointer-events: none;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .fp-exploded {
        transition: none;
    }
}

/* "Back to floor plan" button floats above the enlarged overlay. */
.fp-back {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.fp-key p {
    font-size: 0.9rem;
}

.fp-key .badge {
    margin-right: 0.25rem;
}

/* Furniture legend: the icon exactly as drawn on the plan, then its name and count. It
   pulls the same palette as .fp-furniture above, or the key stops being a key. */
.fp-key-furniture li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.fp-key-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.fp-key-icon svg {
    display: block;
    fill: var(--furn-base);
}

.fp-key-swatch {
    margin-top: 0.5rem;
}

.fp-key-box {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: #1971c2;
    opacity: 0.22;
    border: 2px solid #1971c2;
    border-radius: 0.15rem;
    vertical-align: text-bottom;
    margin-right: 0.25rem;
}

/* Phones: the 6-column week grid otherwise forces a wide horizontal scroll. Tighten cell
   padding/size and the hour-label column so more fits before scrolling kicks in. The header
   controls already flex-wrap and the plan/key columns already stack below md. */
@media (max-width: 575.98px) {
    .cal-grid th,
    .cal-grid td {
        padding: 0.15rem;
        font-size: 0.75rem;
    }
    .cal-grid .cal-hour-label {
        width: 3.25rem;
        font-size: 0.7rem;
    }
    .cal-month-day {
        min-height: 4rem;
    }
}