/**
 * 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 */
    .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 {
        grid-template-columns: 1fr 1fr;
        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. */
#posCalGrid .cell-slot.reef-left,
#posCalGrid .cell-slot.reef-right {
    background: #d6f0e3;  /* light seafoam green */
}
#posCalGrid .cell-slot.bay-left,
#posCalGrid .cell-slot.bay-center,
#posCalGrid .cell-slot.bay-right {
    background: #fde8e8;  /* light red — visually distinct from reef */
}
#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%; }
}