/**
 * 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. */
.pos-left { min-height: 0; }
.pos-left .category-tabs { flex-shrink: 0; }
.pos-left .lagoon-selector { flex-shrink: 0; }
.pos-left .pos-sessions-view-toggle { flex-shrink: 0; }
#posSessionsPicker,
#posSessionCalendar {
    min-height: 0;
    min-width: 0;          /* prevent grid content from blowing the panel wider than .pos-left */
    flex: 1 1 auto;
    overflow: auto;        /* both axes — long wave names can't push horizontally past the panel */
}

/* 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; }

    /* Lagoon picker */
    .lagoon-selector { padding: 8px 12px; }
    .lagoon-selector h3 { font-size: 13px; margin: 0 0 6px 0; }
    .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 grid (inventory tiles) */
    .quick-keys-container { padding: 8px; }
    .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;
}

/* 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: 12px;
    margin-top: 12px;
}

.pos-cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px 12px;
    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 dimmer when step-1 lagoon filter is set. */
#posCalGrid .cell-slot.pos-cell-dimmed {
    opacity: 0.35;
    pointer-events: none;
}
#posCalGrid .cell-slot.pos-cell-dimmed .session-block {
    cursor: not-allowed;
}

/* 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%; }
}