/* Session Calendar Manager Styles */

:root {
    --session-beginner: #4A90D9;
    --session-intermediate: #2EBFA5;
    --session-expert: #E8833A;
    --session-private: #9B59B6;
    --session-wikkii: #2EBFA5;
    --session-malibu: #4A90D9;
    --session-challenging: #E8833A;
    --session-draft-opacity: 0.6;
    --calendar-border: #E5E7EB;
    --calendar-cell-hover: #F3F4F6;
    --calendar-today: #EFF6FF;
}

/* ============ Page Layout ============ */
.calendar-page {
    display: flex;
    flex-direction: column;
    /* iPad Safari fix (2026-05-10): use dvh so the calendar column tracks the
       actual visible viewport when Safari's chrome expands/collapses. */
    height: calc(100vh - 130px);
    height: calc(100svh - 130px);
    height: calc(100dvh - 130px);
    padding: 0 !important;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--calendar-border);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-left {
    flex-wrap: wrap;
}

.date-range-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    min-width: 180px;
    text-align: center;
}

.date-picker-input {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
}

/* ============ View Toggle ============ */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-btn {
    padding: 6px 16px;
    border: none;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.view-btn:hover {
    background: var(--background);
}

.view-btn.active {
    background: var(--primary-color);
    color: #fff;
}

/* ============ Calendar Body ============ */
.calendar-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ============ Pattern Panel ============ */
.pattern-panel {
    width: 250px;
    min-width: 250px;
    background: var(--surface);
    border-right: 1px solid var(--calendar-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width 0.3s, min-width 0.3s, opacity 0.3s;
}

.pattern-panel.collapsed {
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    border-right: none;
}

.pattern-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--calendar-border);
}

.pattern-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pattern-list {
    list-style: none;
    padding: 8px;
    flex: 1;
    overflow-y: auto;
}

.pattern-list-item {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
    font-size: 13px;
    color: var(--text-primary);
}

.pattern-list-item:hover {
    background: var(--background);
}

.pattern-list-item.selected {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 500;
}

.pattern-list-item .slot-count {
    font-size: 11px;
    color: var(--text-tertiary);
    background: var(--background);
    padding: 2px 8px;
    border-radius: 10px;
}

.pattern-list-item.selected .slot-count {
    background: rgba(0,102,204,0.1);
    color: var(--primary-color);
}

.pattern-list-item .pattern-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.pattern-list-item:hover .pattern-actions {
    opacity: 1;
}

.pattern-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--text-tertiary);
    font-size: 12px;
    border-radius: 3px;
}

.pattern-action-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

.pattern-empty-state {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ============ Calendar Grid ============ */
.calendar-grid {
    flex: 1;
    overflow: auto;
    position: relative;
    background: var(--surface);
}

/* ---- Week View ---- */
.week-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    min-height: 100%;
}

.week-grid .corner-cell {
    background: var(--surface);
    border-bottom: 1px solid var(--calendar-border);
    border-right: 1px solid var(--calendar-border);
    position: sticky;
    top: 0;
    z-index: 3;
}

.week-grid .day-header {
    text-align: center;
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface);
    border-bottom: 1px solid var(--calendar-border);
    border-right: 1px solid var(--calendar-border);
    position: sticky;
    top: 0;
    z-index: 2;
}

.week-grid .day-header.today {
    color: var(--primary-color);
    background: var(--calendar-today);
}

.week-grid .day-header .day-name {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-grid .day-header .day-number {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}

.week-grid .day-header.today .day-number {
    background: var(--primary-color);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.week-grid .time-label {
    padding: 4px 8px;
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
    border-right: 1px solid var(--calendar-border);
    border-bottom: 1px solid var(--calendar-border);
    background: var(--surface);
    position: sticky;
    left: 0;
    z-index: 1;
    /* Stretch to the grid row's full height so the label visually sits
       alongside its hour-cell. The previous fixed height: 60px left labels
       top-anchored in 120px+ rows, making the M.A.M. label appear next to
       the row above its data. align-self defaults to stretch for grid
       items; we explicitly center the text within. */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 60px;
}

.week-grid .day-column {
    border-right: 1px solid var(--calendar-border);
    position: relative;
}

/* admin-bay-020: each hour cell is an asymmetric grid:
   row 1 = Reef-Left | Reef-Right                  (2 segments)
   row 2 = Bay-Left  | Bay-Center | Bay-Right      (3 segments)
   row 3 = optional Event row (spans full width, collapses when empty)

   BOTH manager pages (reef + bay) render the full layout so the operator can
   see cross-class conflicts at a glance. The data-wave-class attribute on the
   page only scopes the *picker* (which types are bookable from this manager),
   not the *visualization*.

   Implementation: the OUTER columns are 6 (LCM of 2 and 3) so reef slots
   span 3 each and bay slots span 2 each, giving a clean visual split per row.
*/
.week-grid .hour-cell {
    height: 120px;
    border-bottom: 1px solid var(--calendar-border);
    transition: background 0.1s;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr auto;
    gap: 1px;
    padding: 1px;
    background: var(--calendar-border);
}
/* Row 1: reef slots — each spans 3 of the 6 columns. */
.week-grid .hour-cell .cell-slot.reef-left  { grid-column: 1 / span 3; grid-row: 1; }
.week-grid .hour-cell .cell-slot.reef-right { grid-column: 4 / span 3; grid-row: 1; }
/* Row 2: bay slots — each spans 2 of the 6 columns. */
.week-grid .hour-cell .cell-slot.bay-left   { grid-column: 1 / span 2; grid-row: 2; }
.week-grid .hour-cell .cell-slot.bay-center { grid-column: 3 / span 2; grid-row: 2; }
.week-grid .hour-cell .cell-slot.bay-right  { grid-column: 5 / span 2; grid-row: 2; }
/* Whole-bay session: spans all 3 bay segments. Block sets data-segment-span="3" */
.week-grid .hour-cell .cell-slot.bay-left[data-span="3"] { grid-column: 1 / span 6; }
/* Dual-zone block that spans 2 adjacent segments. */
.week-grid .hour-cell .cell-slot.bay-left[data-span="2"]   { grid-column: 1 / span 4; }
.week-grid .hour-cell .cell-slot.bay-center[data-span="2"] { grid-column: 3 / span 4; }

.week-grid .hour-cell.today {
    background: var(--calendar-today);
}

/* Cell slots — Reef row + Bay row split by direction */
.cell-slot {
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    transition: background 0.1s;
}
.cell-slot:empty::before {
    content: attr(data-slot-label);
    color: #d1d5db;
    font-size: 9px;
    text-align: center;
    align-self: center;
    margin: auto;
    padding: 2px 4px;
}
.cell-slot:empty:hover {
    background: #f9fafb;
}
.cell-slot:empty:hover::before {
    color: #6b7280;
    content: '+ ' attr(data-slot-label);
}
.cell-slot.bay-left,
.cell-slot.bay-center,
.cell-slot.bay-right {
    background: #fafdfd; /* subtle blue tint for bay row */
}
.week-grid .hour-cell.today .cell-slot {
    background: rgba(255, 255, 255, 0.95);
}

/* Event row spans both columns and is ALWAYS rendered so every hour-cell
   reserves the same vertical space — uniform cell heights across the grid
   regardless of which hours have events. The .cell-event-row-empty modifier
   strips the colored chip styling so empty rows render as a thin neutral
   band rather than a fake "event present" highlight. */
.cell-event-row {
    grid-column: 1 / -1;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #4338ca;
    /* Lock to a constant height so populated and empty event rows occupy
       identical vertical space across all hour cells (uniform cell heights). */
    height: 18px;
    min-height: 18px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}
.cell-event-row.cell-event-row-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    /* keeps height: 18px from .cell-event-row above — empty just hides the chip */
}
/* No hardcoded icon — event title carries its own meaning. If a per-type
   glyph is wanted later (e.g. competition→🏆, wellness→🧘), drive it from
   event.category/type, not a one-size-fits-all decoration. */

/* ---- Session Blocks (now slot-content, not absolute-positioned) ---- */
.session-block {
    flex: 1;
    border-radius: var(--radius-sm);
    padding: 3px 5px;
    font-size: 11px;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.05s;
    border: 1px solid transparent;
    line-height: 1.2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
}

.session-block:hover {
    z-index: 5;
    box-shadow: var(--shadow-md);
}

.session-block .session-type-name {
    font-weight: 600;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-block .session-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    margin: 1px 0;
}

.session-block .session-price {
    font-weight: 700;
    color: #047857;
}

.session-block .session-state {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.session-block .session-state.state-reserved {
    background: #fee2e2;
    color: #991b1b;
}
.session-block .session-state.state-request {
    background: #fef3c7;
    color: #92400e;
}
.session-block .session-state.state-private {
    background: #e0e7ff;
    color: #3730a3;
}

.session-block .session-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 10px;
}

.session-block .session-capacity {
    font-weight: 600;
    font-size: 10px;
}

/* Legacy abbr style — kept so any older render path doesn't visually break */
.session-block .session-type-abbr {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
}

.session-block .session-direction {
    font-weight: 500;
}

/* ──────────────────────────────────────────────────────────────────
   Session-type colors — canonical taxonomy per xlsx Sheet 2.
   Hue family = skill tier (Progressive=greens, Good=blues, Shredder=oranges/reds)
   Saturation = within-tier difficulty (lighter = easier; darker = harder)
   Bay sessions get a distinct purple/teal family to distinguish surface.
   ────────────────────────────────────────────────────────────────── */

/* ---- Reef · Progressive tier (greens) ---- */
.session-block.type-malibu {            /* M0.5/M1  — Malibu */
    background: rgba(110, 200, 130, 0.18);
    border-color: #6ec882;
    color: #2f7a3f;
}
.session-block.type-progressive-turns { /* M2/M3 */
    background: rgba(80, 178, 120, 0.20);
    border-color: #50b278;
    color: #266b3b;
}

/* ---- Reef · Good tier (blues) ---- */
.session-block.type-intermediate-turns { /* M3/M4 */
    background: rgba(120, 175, 220, 0.20);
    border-color: #78afdc;
    color: #2769a6;
}
.session-block.type-intermediate-turns-plus { /* T1/T2 */
    background: rgba(74, 144, 217, 0.22);
    border-color: #4a90d9;
    color: #1d5a93;
}
.session-block.type-intermediate-challenger { /* T2/B1 */
    background: rgba(40, 116, 200, 0.22);
    border-color: #2874c8;
    color: #144a82;
}

/* ---- Reef · Shredder tier (oranges → reds) ---- */
.session-block.type-advanced-turns {    /* T2/T3 */
    background: rgba(244, 162, 97, 0.22);
    border-color: #f4a261;
    color: #a05621;
}
.session-block.type-advanced-turns-plus { /* T3/T4 */
    background: rgba(232, 131, 58, 0.22);
    border-color: #e8833a;
    color: #8c4f1c;
}
.session-block.type-advanced-challenger { /* T3/B2 */
    background: rgba(220, 80, 60, 0.22);
    border-color: #dc503c;
    color: #8c2c1f;
}
.session-block.type-pro-challenger {    /* T4/B3 */
    background: rgba(190, 30, 45, 0.22);
    border-color: #be1e2d;
    color: #781a23;
}

/* ---- Bay (purple/teal family — distinct from reef) ---- */
.session-block.type-whitewater-bay {
    background: rgba(155, 130, 200, 0.20);
    border-color: #9b82c8;
    color: #5b3e93;
}
.session-block.type-dual-zone-surf {
    background: rgba(120, 100, 180, 0.20);
    border-color: #7864b4;
    color: #3f2f7a;
}
.session-block.type-open-boogie {
    background: rgba(94, 200, 220, 0.22);
    border-color: #5ec8dc;
    color: #1f6a7a;
}
.session-block.type-beginner-lesson {
    background: rgba(72, 199, 165, 0.22);
    border-color: #48c7a5;
    color: #1f6a55;
}

/* ---- Legacy fallbacks (kept so older sessions render colored, not bare) ---- */
.session-block.type-wikkii {
    background: rgba(46, 191, 165, 0.15);
    border-color: var(--session-wikkii);
    color: #1a7a66;
}
.session-block.type-beginner {
    background: rgba(46, 191, 165, 0.10);
    border-color: rgba(46, 191, 165, 0.5);
    color: #1a7a66;
}
.session-block.type-intermediate {
    background: rgba(74, 144, 217, 0.15);
    border-color: var(--session-malibu);
    color: #2a6cb0;
}
.session-block.type-challenging,
.session-block.type-expert {
    background: rgba(232, 131, 58, 0.15);
    border-color: var(--session-expert);
    color: #b0601a;
}
.session-block.type-private {
    background: rgba(155, 89, 182, 0.15);
    border-color: var(--session-private);
    color: #6c3483;
}

/* Capacity colors on badge */
.capacity-available { color: var(--success); }
.capacity-filling { color: var(--warning); }
.capacity-full { color: var(--error); }

/* Draft styling */
.session-block.draft {
    border-style: dashed;
    opacity: var(--session-draft-opacity);
}

.session-block.draft:hover {
    opacity: 0.85;
}

/* Cancelled styling — visually de-emphasised but still clickable so admins
   can re-open / edit / delete the ghost session. The previous version set
   pointer-events:none which made cancelled sessions unreachable. */
.session-block.cancelled {
    opacity: 0.45;
    text-decoration: line-through;
}
.session-block.cancelled:hover {
    opacity: 0.7;
}

/* ---- Event Overlays ---- */
.event-overlay {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(245, 158, 11, 0.12) 3px,
        rgba(245, 158, 11, 0.12) 6px
    );
    border-left: 3px solid var(--warning);
    z-index: 0;
    cursor: default;
    padding: 2px 6px;
    font-size: 10px;
    color: var(--warning);
    font-weight: 500;
}

/* ---- Month View ---- */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.month-grid .month-day-header {
    text-align: center;
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--surface);
    border-bottom: 1px solid var(--calendar-border);
}

.month-cell {
    min-height: 110px;
    border-right: 1px solid var(--calendar-border);
    border-bottom: 1px solid var(--calendar-border);
    padding: 4px;
    cursor: pointer;
    transition: background 0.1s;
    position: relative;
}

.month-cell:nth-child(7n) {
    border-right: none;
}

.month-cell:hover {
    background: var(--calendar-cell-hover);
}

.month-cell.today {
    background: var(--calendar-today);
}

.month-cell.other-month {
    opacity: 0.4;
}

.month-cell .month-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.month-cell.today .month-date {
    background: var(--primary-color);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.month-cell .session-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.session-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 500;
}

.session-badge.draft-badge {
    border: 1px dashed;
    background: transparent;
}

.session-badge.live-badge {
    color: #fff;
}

.month-cell .event-bar {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--warning-light);
    color: #92400e;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.month-cell .add-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-cell:hover .add-btn {
    opacity: 1;
}

/* ============ Mini Modal ============ */
.mini-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 500;
}

.mini-modal {
    position: fixed;
    z-index: 501;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    min-width: 320px;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.mini-modal h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.mini-modal .form-row {
    margin-bottom: 12px;
}

.mini-modal .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.mini-modal .form-row input,
.mini-modal .form-row select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.mini-modal .form-row input:focus,
.mini-modal .form-row select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.mini-modal .form-row-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mini-modal .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Session view modal */
.session-view-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.session-view-summary dt {
    color: var(--text-secondary);
    font-weight: 500;
}

.session-view-summary dd {
    color: var(--text-primary);
    margin: 0;
}

.session-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.draft {
    background: var(--warning-light);
    color: #92400e;
}

.status-badge.active,
.status-badge.live {
    background: var(--success-light);
    color: #065f46;
}

.status-badge.cancelled {
    background: var(--error-light);
    color: #991b1b;
}

/* ============ Context Menu ============ */
.context-menu {
    position: fixed;
    z-index: 600;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 4px 0;
    min-width: 180px;
}

.context-menu-item {
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    transition: background 0.1s;
}

.context-menu-item:hover {
    background: var(--background);
}

.context-menu-item.danger {
    color: var(--error);
}

.context-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ============ Apply Pattern Modal ============ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 260px;
    width: calc(100% - 260px);
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay .modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-overlay .modal-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: var(--text-primary);
}

.modal-overlay .form-group {
    margin-bottom: 16px;
}

.modal-overlay .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.modal-overlay .form-group input,
.modal-overlay .form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.modal-overlay .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.apply-preview {
    padding: 10px;
    background: var(--background);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ============ Full-Screen Pattern Editor ============ */
.modal-overlay.fullscreen {
    padding: 20px;
}

.modal-overlay.fullscreen .fullscreen-content {
    max-width: 95%;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-overlay .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.pattern-editor-body {
    flex: 1;
    overflow: auto;
    min-height: 400px;
}

.pattern-name-input {
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    width: 300px;
}

/* Pattern grid in editor */
/* Modal top-right close X — applied to .modal-content's first child so it
   floats in the corner regardless of modal width. Subtle by default; clear
   hover affordance. */
.modal-content { position: relative; }
.modal-close-x {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.modal-close-x:hover {
    background: #f1f5f9;
    color: #111827;
}
.modal-close-x:focus-visible {
    outline: 2px solid #1f4287;
    outline-offset: 1px;
}

/* Day-template badge in the Timeslot Patterns list — distinguishes day
   templates (one-day reusable) from weekly patterns at a glance. */
.pattern-badge-day-tpl {
    display: inline-block;
    background: #1f4287;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* Day-template apply-mode card buttons (Replace / Merge). Two-card grid;
   click toggles single-select with `active` class. Replaces stacked radio
   buttons for a clearer at-a-glance choice. */
.dt-mode-label {
    font-weight: 600;
    color: var(--text-primary, #111);
    margin-bottom: 6px;
    display: block;
}
.dt-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.dt-mode-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s, transform 0.05s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dt-mode-card:hover {
    border-color: #1f4287;
    background: #f8fafc;
}
.dt-mode-card.active {
    border-color: #1f4287;
    background: #eef2f9;
    box-shadow: 0 0 0 2px rgba(31, 66, 135, 0.15);
}
.dt-mode-card-icon {
    font-size: 18px;
    line-height: 1;
    color: #1f4287;
    font-weight: 700;
}
.dt-mode-card-title {
    font-weight: 700;
    color: #1f2937;
    font-size: 14px;
}
.dt-mode-card-sub {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.35;
}

/* Day-template link — clickable day-header in the pattern editor that
   opens the day-template picker (apply or save a day's slots as a named
   reusable template). Renders as a small "▾ template" hint next to the
   day name so the affordance is discoverable without dominating. */
.pe-day-header-clickable { padding: 0; }
.pe-day-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 4px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
}
.pe-day-link:hover { background: rgba(31, 66, 135, 0.08); }
.pe-day-link .day-name { font-weight: 700; }
.pe-day-link-hint {
    font-size: 9px;
    color: #1f4287;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.7;
}
.pe-day-link:hover .pe-day-link-hint { opacity: 1; }

/* AUTO-Admi-066 / 067 — pattern editor reuses the main calendar's
   .week-grid / .hour-cell / .cell-slot DOM. Read-only context (slots from
   patterns the operator isn't currently editing, plus event row entries
   projected from the events collection) gets a dimmed style + lock cue. */
.session-block.pe-context-readonly {
    opacity: 0.55;
    cursor: default;
    border-style: dashed !important;
}
.session-block.pe-context-readonly:hover {
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}
.cell-event-row.pe-context-readonly {
    opacity: 0.6;
    font-style: italic;
    cursor: default;
}

/* Off-side empty slot — visible (so the operator sees full structure) but
   neither hoverable nor clickable. Used in the pattern editor when the
   operator opens the modal from the reef sessions page (bay row read-only)
   or from the bay sessions page (reef row read-only). */
.cell-slot.pe-side-readonly {
    opacity: 0.5;
    cursor: default !important;
}
.cell-slot.pe-side-readonly:hover {
    background: inherit !important;
}
.cell-slot.pe-side-readonly:empty:hover::before {
    content: attr(data-slot-label);    /* don't add the "+" affordance */
    color: #d1d5db;
}

.pe-grid .pe-header {
    text-align: center;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--background);
    border-bottom: 1px solid var(--calendar-border);
    border-right: 1px solid var(--calendar-border);
}

.pe-grid .pe-time {
    padding: 4px 6px;
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
    border-right: 1px solid var(--calendar-border);
    border-bottom: 1px solid var(--calendar-border);
    height: 40px;
    background: var(--surface);
}

.pe-grid .pe-cell {
    height: 40px;
    border-right: 1px solid var(--calendar-border);
    border-bottom: 1px solid var(--calendar-border);
    cursor: pointer;
    position: relative;
}

.pe-grid .pe-cell:hover {
    background: var(--calendar-cell-hover);
}

.pe-grid .pe-slot {
    position: absolute;
    left: 1px;
    right: 1px;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 10px;
    cursor: pointer;
    z-index: 1;
    border: 1px solid;
}

/* AUTO-Admi-065 follow-up — pattern editor cells mirror the main calendar's
   2×3+1 layout EXACTLY: outer cell is a 6-column grid (LCM of 2 and 3) with
   3 row tracks. Reef segments span 3 cols each (row 1); bay segments span
   2 cols each (row 2); event row spans all 6 cols (row 3). The segment edges
   align across rows because the column tracks are shared. */
/* (.pe-cell-3row block removed — pattern editor now uses the main
   calendar's .hour-cell directly, no separate cell shape needed) */
/* (pattern editor segment styles removed — pattern editor now reuses the
   main calendar's .session-block / .cell-slot rules) */

.pe-cell-add {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
}

.pe-cell:hover .pe-cell-add {
    opacity: 1;
}

.pe-cell-add:hover {
    background: #004d99;
    transform: scale(1.15);
}

/* ============ Timeslot Modal ============ */
#timeslotModal {
    z-index: 750;
}

.ts-row {
    display: flex;
    gap: 12px;
}

/* Two-side timeslot/session form ─ Left and Right configured at once.
   Each side gets its own fieldset with type/start/duration/capacity/price;
   the legend hosts the per-side enable checkbox so admins can save a
   single side or both. Disabled-side fieldsets dim and ignore input. */
.ts-two-side-modal { max-width: 720px; width: 95%; }
.ts-sides-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 8px 0 12px;
}
@media (max-width: 700px) {
    .ts-sides-grid { grid-template-columns: 1fr; }
}
.ts-side {
    border: 1px solid #d4d9e0;
    border-radius: 6px;
    padding: 10px 12px 4px;
    margin: 0;
}
.ts-side legend {
    padding: 0 6px;
    font-weight: 600;
    font-size: 13px;
}
.ts-side legend label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.ts-side[aria-disabled="true"] {
    opacity: 0.45;
}
.ts-side[aria-disabled="true"] input,
.ts-side[aria-disabled="true"] select {
    pointer-events: none;
}

.ts-days-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.ts-days-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.btn-danger {
    background: #d32f2f;
    color: #fff;
    border: none;
}

.btn-danger:hover {
    background: #b71c1c;
}

/* ============ Help Drawer ============ */
.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    background: var(--surface);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 800;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.help-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.help-drawer-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.help-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.help-drawer-content section {
    margin-bottom: 24px;
}

.help-drawer-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.help-drawer-content p,
.help-drawer-content li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.help-drawer-content ul,
.help-drawer-content ol {
    padding-left: 18px;
    margin: 0;
}

.help-drawer-content li {
    margin-bottom: 4px;
}

/* (.sc-tip styles live inside /assets/js/tooltip.js — injected at runtime
   so the utility is fully self-contained. CSS-pseudo [data-tooltip] system
   below is a separate, older mechanism still used by toolbar buttons.) */

/* ============ Tooltips (CSS-pseudo, legacy) ============ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease 0.3s both;
}

[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease 0.3s both;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============ Onboarding Overlay ============ */
/* Onboarding banner is inline-styled in JS */

/* ============ Search Input ============ */
.search-input {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    width: 160px;
    transition: width 0.3s;
}

.search-input:focus {
    width: 220px;
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

/* ============ Loading State ============ */
.calendar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.calendar-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
    .pattern-panel {
        width: 200px;
        min-width: 200px;
    }
    .calendar-toolbar {
        padding: 10px 12px;
    }
    .date-range-label {
        min-width: 140px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .modal-overlay {
        left: 70px;
        width: calc(100% - 70px);
    }
    .pattern-panel {
        position: fixed;
        left: 70px;
        top: 0;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        z-index: 400;
        box-shadow: var(--shadow-lg);
    }
    .pattern-panel.collapsed {
        left: -250px;
    }
    .toolbar-right {
        flex-wrap: wrap;
    }
    .search-input {
        width: 120px;
    }
}

/* ============ AI Chat Sidebar ============ */
.pattern-editor-row { display: flex; gap: 16px; align-items: stretch; min-height: 400px; }
.pattern-editor-body { flex: 1 1 auto; }
.ai-chat-panel {
    flex: 0 0 380px; display: flex; flex-direction: column;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px; max-height: 70vh;
}
.ai-chat-panel[data-open="false"] { flex-basis: 44px; overflow: hidden; }
.ai-chat-panel[data-open="false"] .ai-chat-messages,
.ai-chat-panel[data-open="false"] .ai-chat-input-row,
.ai-chat-panel[data-open="false"] .ai-chat-proposal { display: none; }
.ai-chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ai-chat-messages { flex: 1; overflow-y: auto; font-size: 0.9rem; padding: 4px; }
.ai-chat-msg { margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; max-width: 92%; word-wrap: break-word; }
.ai-chat-msg.user { background: #dbeafe; margin-left: auto; }
.ai-chat-msg.assistant { background: #fff; border: 1px solid #e2e8f0; }
.ai-chat-msg.system { background: #fef3c7; font-style: italic; }
.ai-chat-input-row { display: flex; gap: 6px; margin-top: 8px; }
.ai-chat-input-row textarea { flex: 1; resize: vertical; font-family: inherit; font-size: 0.9rem; padding: 6px; border: 1px solid #cbd5e1; border-radius: 6px; }
.ai-chat-proposal { background: #f0fdf4; border: 1px dashed #10b981; padding: 8px; border-radius: 6px; margin-top: 8px; font-size: 0.85rem; }
.ai-chat-proposal .actions { display: flex; gap: 6px; margin-top: 6px; }