/* ============================================================
   availability.css — dual-handle time-range slider
   ============================================================
   Used only by the Availability Manager panel (js/availability.js).
   The floating-panel shell itself reuses css/admin-panels.css's shared
   .floating-panel/.floating-panel-overlay component (loaded on every
   page alongside this file, since Availability -- unlike the other
   floating-panel tools -- needs to open from anywhere via the avatar
   dropdown, not just Admin Tools).

   Deliberately compact -- with up to 7 days x multiple ranges each,
   this needs to fit a full-screen browser without much scrolling, so
   every element here runs smaller than admin-panels.css's normal
   .btn-cfg/.btn-small sizing (which is tuned for tools with far less
   repeated content).

   Two native <input type="range"> stacked on the same track (one for
   the start handle, one for the end) -- pointer-events disabled on the
   track/wrapper and re-enabled per-input so both remain independently
   draggable despite fully overlapping. The highlighted fill between
   them is a background gradient driven by --fill-start/--fill-end, set
   from JS on every input event.

   The native thumbs themselves are invisible (opacity:0) -- browsers
   keep a range thumb's rendered *center* inset from the track's true
   0%/100% edges by roughly half the thumb's own size, which drifts the
   thumb away from --fill-start/--fill-end's true-percentage math the
   closer a value gets to either extreme (tried algebraically cancelling
   this out by widening the input, but the actual inset Chromium applies
   didn't match any documented/predictable formula closely enough --
   measured a consistent ~14px error either direction). Instead,
   .avail-thumb-visual is a plain positioned div, placed via the exact
   same pctMin/pctMax the fill gradient uses (see updateSliderFill in
   js/availability.js) -- guaranteed pixel-identical to the fill bar's
   edges by construction, independent of any browser-internal thumb
   math. The invisible native thumb still handles the actual dragging. */

.avail-slider-wrap {
    --fill-start: 0%;
    --fill-end: 100%;
    --avail-thumb: 10px;
    position: relative;
    height: 10px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.08) var(--fill-start),
        var(--crystal-gold) var(--fill-start),
        var(--crystal-gold) var(--fill-end),
        rgba(255, 255, 255, 0.08) var(--fill-end),
        rgba(255, 255, 255, 0.08) 100%
    );
    border-radius: 2px;
}

.avail-slider-wrap input[type='range'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--avail-thumb);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-sizing: content-box;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    /* Several pages define a page-wide `input, textarea, select { border:
       ...; padding: ...; }` reset for their own forms (e.g. calendar.html's
       event-creation modal) -- that selector is less specific than this
       one for properties it also sets, so those properties (border,
       padding, box-sizing) were never actually contested here and the
       generic page rule's much larger padded/bordered box was winning by
       default, rendering as a big empty box the real 10px slider sat
       inside of. Every property that rule touches now has an explicit
       value here too, so there's nothing left for it to leak through on,
       regardless of which page this loads on. */
}

.avail-slider-wrap input[type='range']::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--avail-thumb);
    height: var(--avail-thumb);
    border-radius: 50%;
    background: transparent;
    border: none;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}
.avail-slider-wrap input[type='range']::-moz-range-thumb {
    width: var(--avail-thumb);
    height: var(--avail-thumb);
    border-radius: 50%;
    background: transparent;
    border: none;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}
.avail-slider-wrap input[type='range']::-webkit-slider-runnable-track,
.avail-slider-wrap input[type='range']::-moz-range-track {
    background: transparent;
    height: var(--avail-thumb);
}

/* The actual visible circle -- positioned by JS via `left`, set to the
   exact same percentage the fill gradient's --fill-start/--fill-end
   use, so it can never drift from the fill bar's edge. Allowed to
   overflow the wrapper at extreme values (no clipping) -- see the
   day's discussion for why that's the intended behavior, not a bug. */
.avail-thumb-visual {
    position: absolute;
    top: 50%;
    width: var(--avail-thumb);
    height: var(--avail-thumb);
    border-radius: 50%;
    background: var(--crystal-gold);
    border: 1px solid var(--void-deep);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.avail-day-content input[type='time'] {
    background: var(--void-soft);
    border: 1px solid var(--aether-dim);
    color: var(--parchment);
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    font-family: 'Spectral', serif;
    font-size: 0.72rem;
    width: 6.5rem;
    /* Tells the browser to theme its own native controls (including the
       clock icon below) for a dark UI directly, rather than rendering its
       light-mode default and needing a manual filter to fix it after the
       fact -- see the day's discussion for why the filter approach broke:
       some pages already set color-scheme: dark globally for their own
       forms, which made the icon already light, and the filter:invert(1)
       below then inverted it a second time, back to black. Setting this
       explicitly here makes the icon color correct and consistent on
       every page this loads on, regardless of what else that page does. */
    color-scheme: dark;
}

/* Icon color itself now comes from color-scheme: dark above, not a
   filter -- only opacity/cursor need setting here. */
.avail-day-content input[type='time']::-webkit-calendar-picker-indicator {
    opacity: 0.75;
    cursor: pointer;
}
.avail-day-content input[type='time']::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ---- Day tab bar (replaces the old always-expanded 7-stacked-blocks
   layout) -- 7 tabs across the top, click to slide that day's ranges
   open below; only one day is ever open at a time. ---- */
.avail-tab-bar {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.3rem;
}
.avail-tab {
    flex: 1;
    /* Flex items default to min-width:auto, which floors them at their
       own content size and blocks flex-shrink from working -- with 7
       tabs fighting for space on a narrow phone, that pushed the row
       wider than its container instead of each tab actually shrinking
       (same quirk fixed on the calendar's weekday header, see
       calendar-grid.css). */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.2rem;
    border-radius: 3px;
    border: 1px solid var(--aether-dim);
    background: transparent;
    color: var(--parchment-dim);
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
}
.avail-tab:hover {
    border-color: var(--aether);
    color: var(--parchment);
}
.avail-tab.active {
    border-color: var(--crystal-gold);
    background: var(--crystal-gold);
    color: var(--void-deep);
}
.avail-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.avail-tab-dot.avail-dot-green {
    background: #5fd38a;
}
.avail-tab-dot.avail-dot-red {
    background: #e74c3c;
}

.avail-day-content {
    border: 1px solid var(--aether-dim);
    border-radius: 4px;
    padding: 0 0.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.2s ease,
        opacity 0.15s ease,
        padding 0.2s ease;
}
.avail-day-content.open {
    max-height: 480px;
    opacity: 1;
    padding: 0.2rem 0.5rem 0.5rem;
    overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
    .avail-day-content {
        transition: none;
    }
}

/* Phones: tighter gap/padding gives the 7-tab row a bit more breathing
   room now that min-width:0 lets it actually shrink to fit. */
@media (max-width: 400px) {
    .avail-tab-bar {
        gap: 0.15rem;
    }
    .avail-tab {
        padding: 0.3rem 0.05rem;
        font-size: 0.6rem;
    }
}

/* Compact button set, scoped to this panel -- admin-panels.css's own
   .btn-cfg/.btn-small are sized for tools with far less repeated
   content per screen than 7 days x multiple ranges each. */
.avail-btn-tiny {
    border-radius: 2px;
    padding: 0.15rem 0.5rem;
    font-size: 0.6rem;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--aether);
    color: var(--aether);
    transition: all 0.2s ease;
}
.avail-btn-tiny:hover {
    background: color-mix(in srgb, var(--aether) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}
.avail-btn-tiny:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.avail-btn-tiny.avail-btn-remove-tiny {
    border-color: var(--ember);
    color: var(--ember);
}
.avail-btn-tiny.avail-btn-remove-tiny:hover {
    background: color-mix(in srgb, var(--ember) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}
.avail-btn-tiny.avail-btn-gold-tiny {
    border-color: var(--crystal-gold);
    color: var(--crystal-gold);
}
.avail-btn-tiny.avail-btn-gold-tiny:hover {
    background: color-mix(in srgb, var(--crystal-gold) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}

/* ---- Leave of Absence popup (js/availability.js's LOA panel) ---- */
.loa-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: var(--parchment);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.loa-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 0.5rem;
}
.loa-cal-weekday {
    text-align: center;
    font-size: 0.6rem;
    color: var(--parchment-dim);
    text-transform: uppercase;
    padding-bottom: 0.15rem;
}
.loa-cal-day {
    text-align: center;
    font-size: 0.72rem;
    color: var(--parchment);
    padding: 0.35rem 0;
    border-radius: 3px;
    cursor: pointer;
    background: var(--void-soft);
    user-select: none;
}
.loa-cal-day:hover {
    background: color-mix(in srgb, var(--aether-dim) calc(var(--surface-alpha) * 100%), transparent);
}
.loa-cal-day.loa-cal-blank {
    background: transparent;
    cursor: default;
}
.loa-cal-day.loa-cal-past {
    color: var(--parchment-dim);
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}
.loa-cal-day.loa-cal-today {
    border: 1px solid var(--crystal-gold);
}
.loa-cal-day.loa-cal-selected {
    background: var(--ember);
    color: var(--void-deep);
    font-weight: 600;
}
.loa-cal-day.loa-cal-preview {
    background: var(--aether);
    color: var(--void-deep);
}

.loa-notes-textarea {
    width: 100%;
    min-height: 3.2rem;
    resize: vertical;
    background: var(--void-soft);
    border: 1px solid var(--aether-dim);
    color: var(--parchment);
    border-radius: 4px;
    padding: 0.4rem;
    font-family: 'Spectral', serif;
    font-size: 0.72rem;
}

.loa-entry-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--aether-dim);
    border-radius: 4px;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    color: var(--parchment);
}