/**
 * POS-specific overrides on top of the shared session-calendar.css.
 * Tunes the calendar for POS dark theme + makes wave-blocks read as
 * "click to add to cart" (cursor + subtle hover lift).
 *
 * Row tints per AUTO-Admi-044:
 *   Reef row  → seafoam green (existing default — leave as-is)
 *   Bay row   → light red       (so the bay/reef separation is obvious)
 *   Event row → light orange    (signals "not a normal session")
 *
 * The tint goes on the .cell-slot wrapper so the row structure shows
 * even on closed hours (empty slots still carry color).
 */

/* Layout fix — the calendar grid is tall enough that without flex-shrink:0
   on the top toolbars, the parent .pos-left's flex sizing picks the children's
   content size as min-height and pushes the category-tabs above the viewport.
   Lock the top strips so they always stay visible; let the picker/calendar
   bodies absorb the remaining scrollable space below.
   Debug-pass fix: .pos-left is the PRE-reskin center-column class — the
   POSRedesign-001 shell (shell.css) renamed this container's class to
   .pos-left-host (`<section class="rs-center pos-left-host">`), so every
   rule below silently stopped matching anything the moment that reskin
   shipped. #lagoonSelector/#posSessionsViewToggle lost their flex-shrink:0
   pin as a result — with the calendar's own row heights now much taller
   (Etap 2's enlarged-calendar pass), the flex column had more reason to
   actually need that pin, which is what surfaced this as a visible bug now
   rather than being a harmless no-op indefinitely. */
.pos-left, .pos-left-host { min-height: 0; }
.pos-left .category-tabs, .pos-left-host .category-tabs { flex-shrink: 0; }
.pos-left .lagoon-selector, .pos-left-host .lagoon-selector { flex-shrink: 0; }
.pos-left .pos-sessions-view-toggle, .pos-left-host .pos-sessions-view-toggle { flex-shrink: 0; }
/* Calendar view fills remaining vertical space in .pos-left. The Picker
   side is now three sibling .pos-acc-panel children (Lagoon, Time,
   Session Type) — each is a normal block, no wrapper, so they flow
   naturally and any collapsed step hugs to header height without leaving
   a phantom gap. The 2026-05-24 hoist of #sessionSelector out of
   #posSessionsPicker removed the wrapper that needed its own flex
   override; this block now only governs Calendar mode. */
#posSessionCalendar {
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    flex: 1 1 auto;
    overflow: auto;
}

/* Right panel layout — cart section flex, action buttons in 2-col grid. */
.pos-right {
    height: 100%;
    min-height: 0;
}
.pos-right .cart-section {
    flex: 1 1 0 !important;
    min-height: 0;
}
.pos-right .cart-items {
    flex: 1 1 0;
    min-height: 120px;
    overflow-y: auto;
}
.pos-right .action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ============================================================
   COMPACT DENSITY — target 10" tablet (≤1280px wide)
   Scales paddings, fonts, and gaps down ~30% across the whole
   POS so a typical sale fits on screen without page-level scroll.
   ============================================================ */
@media (max-width: 1280px) {
    /* Header */
    .pos-header { padding: 6px 12px; }
    .header-left h1 { font-size: 16px; }
    .header-left .current-time,
    .cashier-name { font-size: 12px; }

    /* Category tabs (top of left panel) */
    .category-tabs { padding: 6px; gap: 4px; }
    .tab-btn { padding: 6px 12px; font-size: 12px; }

    /* Defect 3 fix — all three picker accordion panels share one
       padding rule at narrow viewports. Previously three per-section
       selectors (.lagoon-selector 12px L/R, .session-selector NO
       override stuck at 15px, .quick-keys-container 8px L/R) drifted
       at <1280px, producing a 3px–7px x-misalignment between Steps
       1 / 2 / 3 headers. One rule keeps them in lock-step. */
    .pos-acc-panel { padding: 8px 12px; }
    .lagoon-selector h3 { font-size: 13px; }
    .lagoon-btn { padding: 8px 12px; font-size: 12px; }

    /* Picker view toggle (Picker | Calendar) */
    .pos-sessions-view-toggle { padding: 4px; }
    .pos-sessions-view-toggle .pos-view-btn { padding: 6px 10px; font-size: 12px; }

    /* Quick-keys tile sizing (the grid itself, not the panel) */
    .quick-key {
        padding: 8px;
        font-size: 12px;
    }
    .quick-key-name { font-size: 12px; }
    .quick-key-price, .quick-key-info { font-size: 11px; }

    /* Right panel — cart, totals, actions. Narrows from 400 → 320 at this
       breakpoint to give the left pane more room for the session calendar. */
    .pos-right { width: 320px; }
    .customer-section { padding: 8px 10px; }
    .customer-search input { padding: 6px 10px; font-size: 13px; }
    .btn-small { padding: 6px 10px; font-size: 12px; }

    .cart-header { padding: 6px 10px; }
    .cart-header span { font-size: 13px; }
    .btn-text { font-size: 11px; padding: 4px 6px; }

    .cart-item {
        padding: 6px 8px;
        font-size: 12px;
        gap: 6px;
    }
    .cart-item-name { font-size: 12px; }
    .cart-item-details { font-size: 11px; }
    .cart-item-qty { gap: 4px; }
    .cart-item-qty span { font-size: 12px; min-width: 20px; }
    .qty-btn { padding: 2px 6px; font-size: 12px; }
    .cart-item-price { font-size: 12px; }
    .cart-item-remove { font-size: 14px; padding: 2px 6px; }

    .empty-cart { padding: 20px; font-size: 12px; }

    .totals-section { padding: 8px 12px; }
    .total-row { padding: 3px 0; font-size: 12px; }
    .total-grand { font-size: 16px; padding-top: 6px; margin-top: 4px; }

    .action-buttons { padding: 8px 10px; gap: 6px; }
    .secondary-actions {
        /* base is already 2 cols; just tighten gap + margin at this density */
        gap: 4px;
        margin-bottom: 0;
    }
    .btn-secondary {
        padding: 7px 6px;
        font-size: 10.5px;
    }
    .primary-actions { gap: 6px; }
    .btn-pay {
        padding: 8px 6px;
        font-size: 12px;
    }
    .btn-pay .pay-icon { font-size: 14px; }

    /* Calendar density (Sessions tab) */
    #posSessionCalendar { padding: 8px; margin-top: 8px; }
    .pos-cal-toolbar { padding: 4px 2px 8px; gap: 6px; }
    .pos-cal-toolbar .pos-cal-nav,
    .pos-cal-toolbar .pos-cal-today { padding: 5px 9px; font-size: 12px; }
    .pos-cal-density-btn { padding: 5px 9px; font-size: 11px; }
    .pos-cal-date-label { font-size: 12px; }
    .pos-cal-lesson-toggle { font-size: 11px; }
    /* Calendar week-grid cells already use their own internal sizing — leave
       the wave-block fonts alone so the tier names stay legible. */
}

/* Below 900px wide — even tighter (genuine portrait tablet / split screen) */
@media (max-width: 900px) {
    .pos-right { width: 280px; }
    .secondary-actions { grid-template-columns: 1fr; }
    .btn-secondary { padding: 6px; font-size: 10px; }
    .btn-pay { padding: 7px 4px; font-size: 11px; }
    .btn-pay .pay-icon { font-size: 12px; }
}

/* Rental sub-tab pills (Rentals tab only). Same dark-pill aesthetic as the
   category tabs above; flex-shrink: 0 so they don't get squished by the
   .pos-left flex column. */
.pos-rental-subtabs {
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    background: #0e1a2e;
    border-bottom: 1px solid #1f4287;
    flex-shrink: 0;
    overflow-x: auto;
}
.pos-rental-subtab {
    background: transparent;
    color: #aaa;
    border: 1px solid #1f4287;
    padding: 5px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pos-rental-subtab:hover { color: #fff; background: rgba(31, 66, 135, 0.4); }
.pos-rental-subtab.active { background: #1f4287; color: #fff; border-color: #2a5db0; }
.pos-rental-subtab-count {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
}
.pos-rental-subtab.active .pos-rental-subtab-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Surfboard context filter strip — secondary level under the rental subtabs.
   One row of (label, pill, pill, …) per filter group. Smaller / lower-key
   styling than the main subtabs since these are refinements, not categories. */
.pos-rental-context-filters {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    background: #0a1428;
    border-bottom: 1px solid #1f4287;
    flex-shrink: 0;
}
.pos-rental-ctx-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.pos-rental-ctx-label {
    color: #8aa6c4;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    min-width: 76px;
}
.pos-rental-ctx-pill {
    background: transparent;
    color: #aaa;
    border: 1px solid #1f4287;
    padding: 3px 9px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.pos-rental-ctx-pill:hover {
    color: #fff;
    background: rgba(31, 66, 135, 0.4);
}
.pos-rental-ctx-pill.active {
    background: #1f4287;
    color: #fff;
    border-color: #2a5db0;
}
/* Issues-POSRentalFilters-001: search box in the rental filter strip. */
.pos-rental-ctx-input {
    background: #0f1d3a;
    color: #fff;
    border: 1px solid #1f4287;
    border-radius: 11px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: inherit;
    min-width: 240px;
}
.pos-rental-ctx-input::placeholder { color: #6b86a8; }
html.rs-light .pos-rental-ctx-input { background: #fff; color: #0f172a; border-color: #cbd5e1; }
html.rs-light .pos-rental-ctx-input::placeholder { color: #94a3b8; }

/* Cart hold-timer — countdown badge in the cart header. Mirrors the customer
   site's hold-timer pill so cashiers see the same 10-minute clock. */
.pos-cart-hold-timer {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 10.5px;
    font-weight: 700;
    margin-left: 8px;
    background: rgba(31, 66, 135, 0.6);
    color: #fff;
    letter-spacing: 0.3px;
    transition: background 0.2s, color 0.2s;
}
.pos-cart-hold-timer.warning { background: #b45309; color: #fef3c7; }
.pos-cart-hold-timer.expired { background: #991b1b; color: #fee2e2; }

/* Picker / Calendar view toggle */
.pos-sessions-view-toggle {
    display: none;  /* shown only when Sessions tab is active (set by JS) */
    gap: 4px;
    padding: 8px 4px;
    background: #0e1a2e;
    border-radius: 6px;
    margin-bottom: 8px;
}
.pos-sessions-view-toggle .pos-view-btn {
    flex: 1;
    background: transparent;
    color: #aaa;
    border: 1px solid #1f4287;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.pos-sessions-view-toggle .pos-view-btn:hover {
    color: #fff;
    background: rgba(31, 66, 135, 0.4);
}
.pos-sessions-view-toggle .pos-view-btn.active {
    background: #1f4287;
    color: #fff;
    border-color: #2a5db0;
}

#posSessionCalendar {
    background: #16213e;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 6px;
}

.pos-cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 8px;
    flex-wrap: wrap;
}
.pos-cal-toolbar .pos-cal-nav,
.pos-cal-toolbar .pos-cal-today {
    background: #0f3460;
    color: #fff;
    border: 1px solid #1f4287;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.pos-cal-toolbar .pos-cal-nav:hover,
.pos-cal-toolbar .pos-cal-today:hover { background: #1f4287; }
.pos-cal-date-label {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin-left: 4px;
    margin-right: auto;
}
.pos-cal-lesson-toggle {
    color: #ddd;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.pos-cal-lesson-toggle input { cursor: pointer; }

/* Density toggle (Week / 3-Day / Day) — segmented control. */
.pos-cal-density-group {
    display: inline-flex;
    gap: 0;
    border: 1px solid #1f4287;
    border-radius: 4px;
    overflow: hidden;
}
.pos-cal-density-btn {
    background: transparent;
    color: #aaa;
    border: none;
    border-right: 1px solid #1f4287;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.pos-cal-density-btn:last-child { border-right: none; }
.pos-cal-density-btn:hover { color: #fff; background: rgba(31, 66, 135, 0.4); }
.pos-cal-density-btn.active { background: #1f4287; color: #fff; }

/* Per-density cell tweaks. The shared .week-grid CSS sizes everything for
   7 columns; for 3-day and 1-day we have more horizontal room per cell, so
   surface extra detail (price + state pill on a single row, full event
   description in the event row). */
#posCalGrid .pos-density-3day .session-block,
#posCalGrid .pos-density-day  .session-block {
    padding: 6px 8px;
    font-size: 12px;
}
#posCalGrid .pos-density-3day .session-type-name,
#posCalGrid .pos-density-day  .session-type-name {
    font-size: 13px;
    /* Allow full wave-type names to fit instead of truncating. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
#posCalGrid .pos-density-day .session-meta,
#posCalGrid .pos-density-day .session-info {
    margin-top: 4px;
}
#posCalGrid .pos-density-day .cell-event-row {
    /* Day view has room for the full event title + sub-line. */
    white-space: normal;
    padding: 6px 10px;
    font-size: 13px;
}

/* The .week-grid no longer needs its own scroll — the parent #posSessionCalendar
   has overflow-y: auto, so the calendar scrolls within the remaining space
   below the locked top strips. Keeping the grid itself at content height
   means sticky day-headers anchor to the calendar's scroll container, not
   the page viewport (which would have made them overlap the tabs). */
#posCalGrid .week-grid {
    /* intentionally no max-height — parent panel provides scroll */
}

/* Compact font scale on the POS calendar — tablets have less screen real
   estate than the admin desktop monitors. Scoped to #posCalGrid so the admin
   session-calendar shared CSS stays untouched. */
#posCalGrid .session-block { padding: 2px 4px; }
#posCalGrid .session-block .session-type-name { font-size: 9.5px; }
#posCalGrid .session-block .session-meta      { font-size: 9px;   gap: 3px; margin: 0; }
#posCalGrid .session-block .session-state     { font-size: 8px;   padding: 0 3px; }
#posCalGrid .session-block .session-info      { font-size: 9px; }
#posCalGrid .session-block .session-capacity  { font-size: 9px; }

#posCalGrid .week-grid .day-header              { padding: 6px 2px; }
#posCalGrid .week-grid .day-header .day-name    { font-size: 10px; }
#posCalGrid .week-grid .day-header .day-number  { font-size: 14px; }
#posCalGrid .week-grid .time-label              { font-size: 9.5px; padding: 2px 6px; min-height: 50px; }
#posCalGrid .cell-event-row                     { font-size: 9px;  padding: 1px 5px; }

/* Slot placeholder text ("+ Bay · Center" hint when empty) — also shrink. */
#posCalGrid .cell-slot:empty::before { font-size: 8px; padding: 1px 3px; }

/* Header/cell alignment guards: every direct grid child gets min-width: 0
   and box-sizing: border-box so content min-content never forces a track
   wider than its 1fr share — that was the cause of header/cell misalignment
   when a long wave-type name pushed an hour-cell past the day-header above.
   The grid template itself stays whatever the JS sets inline (per density). */
#posCalGrid .week-grid {
    width: 100%;
    max-width: 100%;
}
#posCalGrid .week-grid > * {
    min-width: 0;
    box-sizing: border-box;
}

/* Sticky header readability — admin's CSS uses var(--surface) (white) with
   var(--text-secondary) (gray). When scrolled in the POS calendar, the
   day-header row floats over the (also white-ish) session block backgrounds,
   producing low-contrast white-on-white. Override to a solid dark-navy
   chip with bright text so the headers stay readable regardless of what's
   beneath them as the user scrolls. */
#posCalGrid .week-grid .corner-cell,
#posCalGrid .week-grid .day-header {
    background: #0f3460 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #1f4287;
    z-index: 4;            /* above .session-block hover (z-index: 5 → bumped below) */
}
#posCalGrid .week-grid .day-header .day-name {
    color: #cfdbef;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
#posCalGrid .week-grid .day-header .day-number {
    color: #ffffff;
    font-weight: 700;
}
/* Today highlight remains visible against the navy. */
#posCalGrid .week-grid .day-header.today {
    background: #2a5db0 !important;
}
#posCalGrid .week-grid .day-header.today .day-number {
    background: #ffffff;
    color: #0f3460;
}
/* Subtle box-shadow as the header strip leaves the top so it visibly
   "floats" over the session rows — visual cue that it's sticking. */
#posCalGrid .week-grid .day-header,
#posCalGrid .week-grid .corner-cell {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
/* Time labels on the left also get the dark sticky treatment so the row-axis
   sticky column matches the column-axis sticky row. */
#posCalGrid .week-grid .time-label {
    background: #0f3460 !important;
    color: #cfdbef !important;
    border-right: 2px solid #1f4287;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.18);
    z-index: 3;
}

/* POS hour-cell uses an EXPLICIT 3-row DOM structure (reef-row, bay-row,
   event-row) instead of relying on CSS grid-row placement, because the grid
   approach was rendering the bay slots in row 1 alongside reef on some
   browsers. Override the inherited grid layout with a flex column. */
#posCalGrid .week-grid .hour-cell.pos-hour-cell-3row {
    display: flex !important;
    flex-direction: column;
    height: 160px;
    padding: 1px;
    gap: 1px;
    background: var(--calendar-border);
}

/* Inner row containers — each is itself a flex row that lays out its slots
   horizontally. Reef row gets 2 equal slots; bay row gets 3 equal slots. */
#posCalGrid .pos-reef-row,
#posCalGrid .pos-bay-row {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    min-height: 0;
    gap: 1px;
}
#posCalGrid .pos-reef-row > .cell-slot { flex: 1 1 0; }
#posCalGrid .pos-bay-row  > .cell-slot { flex: 1 1 0; }
/* Whole-bay session takes all 3 segments (data-span="3" on bay-left) */
#posCalGrid .pos-bay-row  > .cell-slot.bay-left[data-span="3"] { flex: 3 1 0; }
#posCalGrid .pos-bay-row  > .cell-slot.bay-left[data-span="3"] ~ .bay-center,
#posCalGrid .pos-bay-row  > .cell-slot.bay-left[data-span="3"] ~ .bay-right { display: none; }
/* Dual-zone bundled span 2 segments (data-span="2") */
#posCalGrid .pos-bay-row  > .cell-slot.bay-left[data-span="2"]   { flex: 2 1 0; }
#posCalGrid .pos-bay-row  > .cell-slot.bay-center[data-span="2"] { flex: 2 1 0; }

#posCalGrid .pos-hour-cell-3row > .cell-event-row {
    flex: 0 0 auto;
    /* min-height handled by shared CSS so admin and POS reserve identical
       vertical space when the event row is empty. */
}

#posCalGrid .week-grid .time-label { min-height: 80px; }

/* Click affordance on wave-blocks. The shared CSS gives them their tier color;
   we only add the "this is bookable" hint. */
#posCalGrid .session-block.pos-clickable {
    transition: transform 0.08s, box-shadow 0.08s;
}
#posCalGrid .session-block.pos-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    outline: 2px solid rgba(255, 255, 255, 0.6);
}
#posCalGrid .session-block.pos-not-clickable {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Off-lagoon collapse when a SPECIFIC lagoon filter is set (not "All
   Lagoons"). Both the row-container and the individual non-matching
   slot(s) already carry flex: 1 1 0 (see the pos-reef-row/pos-bay-row
   rules below) — hiding everything but the one matching slot means that
   slot automatically absorbs the newly-freed flex space and fills the
   whole cell, with no extra sizing math needed here. */
#posCalGrid .pos-reef-row.pos-row-hidden,
#posCalGrid .pos-bay-row.pos-row-hidden {
    display: none;
}
#posCalGrid .cell-slot.pos-cell-hidden {
    display: none;
}

/* AUTO-Admi-044 row tints. Applied to .cell-slot so empty slots also show
   the row color and the structure is visible on closed hours. The populated
   .session-block uses its own per-tier color and layers cleanly on top.

   AUTO-Admi-068 — left→right gradient overlay: each segment fades the base
   row tint slightly darker toward the right edge so the operator's eye picks
   up Left (lighter) vs Right (darker) without reading the slot label. Bay
   center sits between the two. The tint stays dominant; the gradient is a
   subtle secondary cue. */
#posCalGrid .cell-slot.reef-left {
    background: linear-gradient(90deg, #e8f7ef 0%, #c8e8d6 100%);
}
#posCalGrid .cell-slot.reef-right {
    background: linear-gradient(90deg, #c8e8d6 0%, #a8d8be 100%);
}
#posCalGrid .cell-slot.bay-left {
    background: linear-gradient(90deg, #ffeef0 0%, #f7d8d8 100%);
}
#posCalGrid .cell-slot.bay-center {
    background: linear-gradient(90deg, #f7d8d8 0%, #f2c8c8 100%);
}
#posCalGrid .cell-slot.bay-right {
    background: linear-gradient(90deg, #f2c8c8 0%, #e8b0b0 100%);
}
/* Whole-bay span (data-span="3" on bay-left) spans all three columns — give it
   the full left→right gradient instead of bay-left's narrower range. */
#posCalGrid .cell-slot.bay-left[data-span="3"] {
    background: linear-gradient(90deg, #ffeef0 0%, #e8b0b0 100%);
}
#posCalGrid .cell-event-row {
    background: #ffedd5;  /* light orange — events are special / ticketed */
}
/* Empty event row: no orange tint, just the reserved structural band so
   cell heights stay uniform. The .cell-event-row-empty class is set in JS
   when no event populates the row. */
#posCalGrid .cell-event-row.cell-event-row-empty {
    background: transparent;
}

/* Toolbar row spacing on small POS terminals */
@media (max-width: 1100px) {
    .pos-cal-lesson-toggle { width: 100%; }
}

/* ============================================================
   Issues-POSSessionCalendarDnD-001: search + Level/Time/Availability
   filter row, legend, and enlarged/enriched session cards — the Figma
   "enlarged calendar" pass. Everything below is additive to the existing
   AUTO-Admi-044 calendar; the grid structure/classes above are unchanged.
   ============================================================ */

.pos-cal-filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px;
    flex-wrap: wrap;
}
.pos-cal-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #0f3460;
    border: 1px solid #1f4287;
    border-radius: 4px;
    padding: 6px 10px;
    flex: 1 1 220px;
    min-width: 160px;
    color: #8aa6c4;
}
.pos-cal-search input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    flex: 1;
    min-width: 0;
}
.pos-cal-search input::placeholder { color: #6d84a3; }
.pos-cal-filter-select {
    background: #0f3460;
    color: #ddd;
    border: 1px solid #1f4287;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12.5px;
    cursor: pointer;
}
.pos-cal-clear-filters {
    background: transparent;
    color: #8aa6c4;
    border: 1px solid #1f4287;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}
.pos-cal-clear-filters:hover { color: #fff; background: rgba(31, 66, 135, 0.4); }

/* Filtered-out (search/level/time/availability mismatch) — same dim
   treatment as the existing off-lagoon dimmer, applied to the block itself
   since these filters cut across lagoon/side rather than one slot. */
#posCalGrid .session-block.pos-filtered-out {
    opacity: 0.25;
    pointer-events: none;
}

/* Legend */
.pos-cal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 10px 4px 4px;
    border-top: 1px solid #1f4287;
    margin-top: 8px;
}
.pos-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b7c6dd;
    font-size: 12px;
}
.pos-cal-legend-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}
.pos-cal-legend-swatch.swatch-beginner     { background: #2ebfa5; }
.pos-cal-legend-swatch.swatch-intermediate { background: #4a90d9; }
.pos-cal-legend-swatch.swatch-advanced     { background: #e8833a; }
.pos-cal-legend-swatch.swatch-private      { background: #9b59b6; }
.pos-cal-legend-swatch.swatch-soldout      { background: #6b7280; }

/* Enlarged calendar — the task's primary visual ask. Bigger hour rows and
   card text than the original ultra-compact tablet density, still within
   the existing 2x2+1 sub-grid. Supersedes the earlier, tighter overrides
   further up this file for the base (week) density; 3-day/day already had
   their own larger per-density rules above and are left as-is.
   Debug-pass fix (round 2): the previous pass (210px -> 130px + 8-8.5px
   text) went too far the other way — text that small read as illegible
   "lost in the block" rather than a card that actually fills its slot.
   Settled on a size between the two: row height back up a bit, and card
   text/padding bumped to something genuinely readable at a glance,
   closer to (but still a little tighter than) the original "enlarged"
   pass. */
#posCalGrid .week-grid .hour-cell.pos-hour-cell-3row { height: 150px; }
#posCalGrid .week-grid .time-label { min-height: 75px; font-size: 10.5px; }
#posCalGrid .week-grid .day-header { padding: 7px 4px; }
#posCalGrid .week-grid .day-header .day-name { font-size: 11px; }
#posCalGrid .week-grid .day-header .day-number { font-size: 15px; }

#posCalGrid .session-block { padding: 5px 7px; }
#posCalGrid .session-block .session-type-name { font-size: 12px; font-weight: 700; }
#posCalGrid .session-block .session-time-range { font-size: 10px; opacity: 0.85; margin-top: 2px; }
#posCalGrid .session-block .session-meta      { font-size: 10.5px; gap: 4px; margin-top: 2px; }
#posCalGrid .session-block .session-state     { font-size: 9px; padding: 0 4px; }
/* Debug-pass fix: the shared session-info rule (session-calendar.css) has
   no gap between its two children — .session-capacity ("1/30") sits
   directly against .session-spots-left ("29 spots left") with zero space,
   reading as one merged number ("1/3029 spots left"). Always been true,
   just easy to miss at the old tiny font size; the bigger POS text made it
   obvious. Fixed here rather than in the shared file since admin's own
   density wasn't reported as having this problem. */
#posCalGrid .session-block .session-info      { font-size: 10px; margin-top: 2px; gap: 5px; }
#posCalGrid .session-block .session-capacity  { font-size: 10px; }
#posCalGrid .session-block .session-side-label { font-size: 9.5px; opacity: 0.8; }
#posCalGrid .session-block .session-spots-left { font-size: 9.5px; font-weight: 600; }
#posCalGrid .session-block .session-sold-out-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    background: #6b7280;
    border-radius: 3px;
    padding: 1px 5px;
    display: inline-block;
    margin-top: 2px;
}

/* ============================================================
   Issues-POSSessionCalendarDnD-001: drag-and-drop — Add Sessions button,
   pattern drawer, drop-target highlighting, and the add-session confirm
   panel. Highlight class names/colors deliberately match
   admin/assets/css/session-calendar.css's scheduler-drop-* classes so the
   org has one consistent visual language for "can I drop this here."
   ============================================================ */

.pos-cal-add-sessions-btn {
    background: #1f4287;
    color: #fff;
    border: 1px solid #2a5db0;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
}
.pos-cal-add-sessions-btn:hover { background: #2a5db0; }

/* Remove-by-drag target — only shown while an existing-session drag is in
   flight (see PosSessionSchedulerDnD._onBlockDragStart/_onDragEnd). Its own
   red palette (distinct from scheduler-drop-conflict's red) since "drop here
   to delete" is a different affordance than "this slot conflicts." */
.pos-cal-remove-zone {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 6px 14px;
    border: 2px dashed #ef4444;
    border-radius: 4px;
    color: #ef4444;
    font-size: 12.5px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.08);
}
.pos-cal-remove-zone.pos-remove-zone-hover {
    background: rgba(239, 68, 68, 0.28);
    outline: 2px solid #ef4444;
    outline-offset: -2px;
}

/* Booked-session cancellation preview — list of affected paid orders shown
   inside #posCancelBookedModal before the manager-approval step. */
.pos-cancel-booked-orders {
    margin-top: 10px;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.pos-cancel-booked-order-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    border-bottom: 1px solid #f1f5f9;
}
.pos-cancel-booked-order-row:last-child { border-bottom: none; }
.pos-cancel-booked-order-row .review-flag { color: #b45309; font-weight: 600; }

/* Non-drag pick-mode banner (Etap 5) — tap-to-place / tap-to-move, the
   keyboard/touch-friendly equivalent of a drag gesture. Fixed so it stays
   visible regardless of calendar scroll position. */
.pos-pick-mode-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1f4287;
    color: #fff;
    border: 1px solid #2a5db0;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.pos-pick-mode-banner button {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}
.pos-pick-mode-banner button:hover { background: rgba(255, 255, 255, 0.28); }

/* Per-card action menu (Etap 5 non-drag equivalent for Move/Duplicate/Remove).
   Supervisor+ only — same population condition as draggable="true". */
#posCalGrid .session-block { position: relative; }
.session-block-menu-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}
.session-block-menu-btn:hover { background: rgba(0, 0, 0, 0.45); }
.pos-block-menu {
    position: fixed;
    z-index: 1200;
    background: #16213e;
    color: #fff;
    border: 1px solid #2a5db0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    min-width: 140px;
    padding: 4px;
}
.pos-block-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #fff;
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 4px;
    cursor: pointer;
}
.pos-block-menu button:hover { background: rgba(255, 255, 255, 0.12); }
.pos-block-menu button.danger { color: #f87171; }

/* Draggable existing session — grab cursor, dim while dragging (native DnD
   never actually reparents the node, so this is the only "it's picked up"
   visual cue). */
#posCalGrid .session-block[draggable="true"] { cursor: grab; }
#posCalGrid .session-block[draggable="true"]:active { cursor: grabbing; }
#posCalGrid .session-block.dragging { opacity: 0.5; }

/* Selected-session highlight — brief flash on click/tap (see placeBlock's
   click handler in pos-session-calendar.js). Add-to-cart stays instant;
   this is only the visual "yes, this is the card you just picked" cue. */
#posCalGrid .session-block.session-block-selected-flash {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.35);
    transition: outline-color 0.4s ease, box-shadow 0.4s ease;
}

/* Drop-target states on .cell-slot during a drag. */
#posCalGrid .cell-slot.scheduler-drop-compatible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    background: rgba(59, 130, 246, 0.18) !important;
}
#posCalGrid .cell-slot.scheduler-drop-conflict {
    outline: 2px solid #ef4444;
    outline-offset: -2px;
    background: rgba(239, 68, 68, 0.18) !important;
}
#posCalGrid .cell-slot.scheduler-drop-occupied {
    outline: 2px solid #fb923c;
    outline-offset: -2px;
    background: rgba(251, 146, 60, 0.18) !important;
}
#posCalGrid .cell-slot.scheduler-drop-incompatible {
    outline: 2px dashed #9ca3af;
    outline-offset: -2px;
    background: rgba(156, 163, 175, 0.15) !important;
    cursor: not-allowed;
}

/* Pattern-library drawer — slide-in from the right. Debug-pass fix: unlike
   a real modal (.modal), this drawer is meant to be dragged FROM while the
   calendar underneath stays reachable — but position:fixed; inset:0 covers
   the ENTIRE viewport regardless of the semi-transparent background, so
   every pointer/drag event over the darkened area to the left of the
   340px panel was hitting THIS div, never #posCalGrid beneath it. That's
   exactly why dragging a pattern card toward the grid never highlighted
   anything: the drag never reached the grid's own dragover listener at
   all. pointer-events:none on the backdrop (re-enabled on the actual
   panel below) lets clicks/drags pass straight through to whatever's
   underneath, the same as it should have all along — there's no
   click-outside-to-close handler on this drawer to preserve, only the
   explicit × button, so nothing else depends on the backdrop being
   interactive. */
.pos-pattern-drawer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
.pos-pattern-drawer-panel {
    width: 340px;
    max-width: 90vw;
    height: 100%;
    background: #16213e;
    color: #fff;
    padding: 16px;
    overflow-y: auto;
    pointer-events: auto;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
}
.pos-pattern-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.pos-pattern-drawer-header h2 { margin: 0; font-size: 16px; }
.pos-pattern-drawer-hint {
    color: #8aa6c4;
    font-size: 11.5px;
    margin: 4px 0 12px;
}
.pos-pattern-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.pos-pattern-filters input,
.pos-pattern-filters select {
    background: #0f3460;
    border: 1px solid #1f4287;
    color: #fff;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12.5px;
}
.pos-pattern-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pos-pattern-card {
    background: #0f3460;
    border: 1px solid #1f4287;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: grab;
}
.pos-pattern-card:active { cursor: grabbing; }
.pos-pattern-card.dragging { opacity: 0.5; }
.pos-pattern-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.pos-pattern-skill-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 8px;
    color: #fff;
}
.pos-pattern-skill-badge.skill-beginner     { background: #2ebfa5; }
.pos-pattern-skill-badge.skill-intermediate { background: #4a90d9; }
.pos-pattern-skill-badge.skill-advanced     { background: #e8833a; }
.pos-pattern-skill-badge.skill-private      { background: #9b59b6; }
.pos-pattern-card-meta {
    color: #8aa6c4;
    font-size: 11px;
    margin-top: 3px;
}
.pos-pattern-empty {
    color: #8aa6c4;
    font-size: 12.5px;
    text-align: center;
    padding: 20px 0;
}

/* Add-session confirm panel body fields. */
.pos-sched-confirm-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pos-sched-confirm-body label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: #475569;
}
.pos-sched-confirm-body input {
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 13px;
}
.pos-sched-confirm-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12.5px;
    white-space: pre-line;
    margin-bottom: 10px;
}