/**
 * Calendar Component Styles
 * Reusable styles for the Calendar Vue component
 *
 * Uses existing theme tokens from main.css and theme files:
 * - --color-surface-primary: Main background
 * - --color-surface-primary-variant: Alternate background
 * - --color-shell-surface: Header/chrome background
 * - --color-text-primary: Primary text
 * - --color-text-secondary: Secondary text
 * - --color-context-background: Accent/highlight color
 * - --color-context-foreground: Contrast text on accent
 * - --color-border: Border color
 *
 * Typography System
 * =================
 * Calendar typography integrates with the SPA global scale defined in main.css.
 * Rather than hard-coding pixel values, we use component-level tokens that
 * reference or derive from the global typography tokens.
 *
 * SPA Global Tokens (main.css :root):
 * - --font-family-system: System font stack
 * - --form-control-font-size: 16px (base control size)
 * - --form-label-font-size: 14px (labels, secondary text)
 *
 * Calendar Typography Tokens (defined below in .calendar):
 * - --calendar-font-size-base: Primary text (14px, matches form labels)
 * - --calendar-font-size-small: Secondary text (14px, gutter labels)
 * - --calendar-font-size-tiny: Tertiary text (12px, minute labels)
 * - Consistent across all viewport sizes (no mobile-specific scaling)
 *
 * Time Grid Sizing System
 * =======================
 * The calendar uses a token-based sizing system for the day/week time grid.
 * All sizing derives from a single source of truth to ensure gutter labels
 * and slot grid remain aligned when changing time scales.
 *
 * Design (Hanging Labels + Right-Aligned Layout):
 * - Grid lines are at the TOP of each slot
 * - Labels "hang" BELOW the line with a configurable offset
 * - This creates visual continuity between gutter and main grid
 * - Gutter is split into two zones: label zone (left) and line zone (right)
 * - Gutter lines extend from right edge leftward, stopping at label zone boundary
 *
 * Adaptive Label Rendering:
 * - Standard mode (≥60 min): Simple HH:mm format, right-aligned
 * - Rich mode (<60 min): Hour labels larger, minute labels smaller
 *   - Hour ticks (:00): Larger font (0.75rem), closer to line zone
 *   - Minute ticks (:15/:30/:45): Smaller font (0.625rem), standard gap from line
 * - Label cadence: At fine scales (1-10 min), only major ticks are labeled
 * - All labels right-aligned within the label zone (left side of gutter)
 *
 * Gutter Layout:
 * ┌─────────────────────────────────────────────────┐
 * │                                           08    │─────
 * │                                           15    │
 * │                     ← 0.25rem padding →│        │
 * └─────────────────────────────────────────────────┘
 *
 * Configuration tokens (CSS custom properties):
 * - --calendar-base-hour-height: Height per hour at 60-min scale (default: 3.5rem / 56px)
 * - --calendar-min-slot-height: Minimum slot height for readability (default: 1.75rem / 28px)
 * - --calendar-gutter-width: Width of time gutter column (default: 3rem / 48px)
 * - --calendar-label-line-offset: Gap between label and grid line (default: 0.375rem / 6px)
 *
 * Slot height calculation (handled by JS, see Calendar.js):
 * 1. Ideal slot height = base-hour-height / slots-per-hour
 * 2. If ideal < min-slot-height, use min-slot-height (grid expands, more scrolling)
 * 3. Set --calendar-slot-height for CSS to consume
 *
 * Industry best practices (research sources):
 * - FullCalendar: 30-min default slots, configurable slotDuration
 * - Google Calendar: 30-min visual blocks, proportional for <25min events
 * - Recommended minimum slot height: 16-24px for touch targets and readability
 * - Time gutter width: 48-64px to accommodate "HH:MM" labels across locales
 *
 * @see https://fullcalendar.io/docs/slotDuration
 * @see https://fullcalendar.io/docs/timegrid-view
 *
 * @version 2.6.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.calendar {
    /* Internal CSS variables for easy theming
     * Aligned with DataTable component for visual consistency.
     * Base values optimized for visibility across Light/Design themes:
     * - Hover state: 10% context background
     * - Selected state: 16% context background
     * - Selected+hover: 20% context background
     * Theme-specific overrides:
     * - Dark theme: 12%/20%/24% for better visibility on gray surfaces (see dark.css)
     * - Contrast theme: 15%/25%/30% for maximum accessibility (see contrast.css)
     */
    --calendar-header-bg: var(--color-shell-surface, var(--color-surface-primary-variant));
    --calendar-column-header-height: var(--toolbar-height, 48px);
    --calendar-cell-bg: var(--color-surface-primary);
    --calendar-cell-hover-bg: color-mix(in srgb, var(--color-context-background) 10%, var(--calendar-cell-bg));
    --calendar-cell-selected-bg: color-mix(in srgb, var(--color-context-background) 16%, var(--calendar-cell-bg));
    --calendar-cell-selected-hover-bg: color-mix(in srgb, var(--color-context-background) 20%, var(--calendar-cell-bg));
    /* Time-gutter hover accent strip - matches DataTable row hover pattern */
    --calendar-time-gutter-hover-accent: color-mix(in srgb, var(--color-context-background) 50%, transparent);
    /* Today indicator uses hover-style background to match DataTable row hover */
    --calendar-today-indicator-bg: var(--calendar-cell-hover-bg);
    /* Today cell background - same as normal cells (today is marked by bold text only) */
    --calendar-today-bg: var(--calendar-cell-bg);
    /* All-day section background - intermediate between header and cell (50% blend) */
    --calendar-all-day-bg: color-mix(in srgb, var(--calendar-header-bg) 50%, var(--calendar-cell-bg));
    --calendar-outside-opacity: 0.4;
    /* Border tokens - shell for outer frame, standard for internal grid lines */
    --calendar-border-shell: var(--color-border-shell, var(--color-border));
    --calendar-border: var(--color-border);

    /* Typography Tokens - Derived from SPA global scale (main.css)
     * These tokens ensure Calendar typography matches the SPA's visual language.
     * All sizes align with SPA standards (--form-label-font-size = 14px).
     */
    --calendar-font-size-base: var(--form-label-font-size, 0.875rem);   /* 14px - matches SPA labels */
    --calendar-font-size-small: var(--form-label-font-size, 0.875rem); /* 14px - gutter labels */
    --calendar-font-size-tiny: 0.75rem;      /* 12px - minute-only labels */
    --calendar-font-size-gutter-standard: 0.875rem;  /* 14px - unified gutter label size for 60/120 min and Cadence */
    --calendar-font-weight-normal: 400;
    --calendar-font-weight-medium: 500;
    --calendar-font-weight-bold: 700;

    /* Time Grid Sizing Tokens - Single source of truth for gutter/slot alignment */
    --calendar-base-hour-height: 56px;       /* Base height per hour (fallback when JS not loaded) */
    --calendar-min-slot-height: 28px;        /* Minimum slot height for 14px labels */
    --calendar-gutter-width: 3rem;           /* Time gutter width (48px) - compact fit for "HH:MM" labels */
    --calendar-label-line-offset: 0.375rem;  /* Gap between label and grid line (6px = 4px + 2px) */
    --calendar-hour-height: 56px;            /* Legacy alias, prefer base-hour-height */
    /* --calendar-slot-height is set dynamically by JS in PIXELS (not rem) for cross-browser
       consistency. Using px prevents sub-pixel rounding differences between Edge and Firefox.
       See useTimeGrid.js calendarStyles computed property for the calculation. */

    display: flex;
    flex-direction: column;
    /* 1px inset placement - matches DataTable pattern for consistent app container spacing */
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    margin: 1px;
    background-color: var(--color-surface-primary);
    /* Outer frame uses shell border (matches DataTable); internal lines use --calendar-border */
    border: 1px solid var(--calendar-border-shell);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-family: var(--font-family-system);
}

.calendar:focus {
    outline: none;
}

.calendar:focus-visible {
    outline: 2px solid var(--color-context-background);
    outline-offset: -2px;
}

/* ==========================================================================
   Month View
   ========================================================================== */

.calendar__month-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Day Headers (Column Header - matches toolbar height) */
.calendar__day-headers {
    display: flex;
    flex-shrink: 0;
    height: var(--calendar-column-header-height);
    align-items: center;
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__day-header {
    flex: 1 1 0%;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
    border-right: 1px solid var(--calendar-border);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar__day-header:last-child {
    border-right: none;
}

/* Current day column header - aligned with current week indicator styling */
.calendar__day-header--today {
    background-color: var(--calendar-today-indicator-bg);
    font-weight: var(--calendar-font-weight-bold);
}

/* Selected/focused day column header - darker than today indicator */
.calendar__day-header--selected {
    background-color: var(--calendar-cell-selected-bg);
}

.calendar__week-number-header {
    width: var(--calendar-gutter-width);
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    text-align: center;
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
    border-right: 1px solid var(--calendar-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Calendar Grid */
.calendar__grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.calendar__week {
    display: flex;
    flex: 1;
    min-height: 0;
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__week:last-child {
    border-bottom: none;
}

.calendar__week-number {
    width: var(--calendar-gutter-width);
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    font-size: var(--calendar-font-size-small);
    font-weight: var(--calendar-font-weight-medium);
    color: var(--color-text-secondary);
    background-color: var(--calendar-header-bg);
    border-right: 1px solid var(--calendar-border);
    /* No transition: instant selection feedback to match time slot line behavior */
}

/* Current week indicator - matches DataTable row hover (8% context) */
.calendar__week-number--current {
    background-color: var(--calendar-today-indicator-bg);
    font-weight: var(--calendar-font-weight-bold);
}

/* Selected week indicator - darker than current week */
.calendar__week-number--selected {
    background-color: var(--calendar-cell-selected-bg);
}

/* Day Cells
   Note: No transition on background-color to ensure instant hover and selection
   feedback, matching the time slot line pattern for consistent UX. */
.calendar__day-cell {
    flex: 1 1 0%;
    min-width: 0;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border-right: 1px solid var(--calendar-border);
    background-color: var(--calendar-cell-bg);
    overflow: hidden;
}

.calendar__day-cell:last-child {
    border-right: none;
}

/* Hover only when not in keyboard mode */
.calendar:not(.calendar--keyboard-mode) .calendar__day-cell:hover {
    background-color: var(--calendar-cell-hover-bg);
}

.calendar__day-cell--today {
    background-color: var(--calendar-today-bg);
}

.calendar__day-cell--selected {
    background-color: var(--calendar-cell-selected-bg);
}

/* Selected + hover state - matches DataTable row selected hover (15% context) */
.calendar:not(.calendar--keyboard-mode) .calendar__day-cell--selected:hover {
    background-color: var(--calendar-cell-selected-hover-bg);
}

/* Outside month days - dim content only, preserve cell background for uniform grid */
.calendar__day-cell--outside .calendar__day-number,
.calendar__day-cell--outside .calendar__day-events {
    opacity: var(--calendar-outside-opacity);
}

.calendar__day-cell--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.calendar__day-cell--focused {
    outline: 2px solid var(--color-context-background);
    outline-offset: -2px;
    z-index: 1;
}

/* Day Number - no transition for instant feedback */
.calendar__day-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0.125rem auto 0;
    font-size: var(--calendar-font-size-base);
    font-weight: var(--calendar-font-weight-medium);
    color: var(--color-text-primary);
    border-radius: 50%;
}

/* Current day number - bold text only, no background highlight */
.calendar__day-cell--today .calendar__day-number {
    font-weight: var(--calendar-font-weight-bold);
}

/* Day Events */
.calendar__day-events {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.calendar__more-events {
    font-size: var(--calendar-font-size-small);
    font-weight: var(--calendar-font-weight-medium);
    color: var(--color-text-secondary);
    padding: 0.125rem 0.25rem;
    text-align: center;
}

/* ==========================================================================
   Week View
   ========================================================================== */

.calendar__week-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Week Header (Column Header - matches toolbar height) */
.calendar__week-header {
    display: flex;
    flex-shrink: 0;
    height: var(--calendar-column-header-height);
    align-items: center;
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

/* Sticky header variant - positioned inside scroll container for perfect column alignment.
   Header and body columns are now in the same layout context, eliminating sub-pixel
   rounding mismatches that occur when they're in separate flex containers. */
.calendar__week-header--sticky {
    position: sticky;
    top: 0;
    z-index: 15;
}

.calendar__time-gutter-header {
    width: var(--calendar-gutter-width);
    flex-shrink: 0;
    align-self: stretch;
    border-right: 1px solid var(--calendar-border);
}

/* Week Day Header - Desktop: day number left, weekday centered
   Mobile: compact "Mo 12" format for all 7 columns
   No transition on base class for instant selection feedback. */
.calendar__week-day-header {
    flex: 1 1 0%;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0.5rem;
    border-right: 1px solid var(--calendar-border);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.calendar__week-day-header:last-child {
    border-right: none;
}

.calendar__week-day-header:hover {
    background-color: var(--calendar-cell-hover-bg);
    transition: background-color 80ms ease-out;
}

/* Current day header - matches DataTable row hover (8% context), bold text */
.calendar__week-day-header--today {
    background-color: var(--calendar-today-indicator-bg);
    font-weight: var(--calendar-font-weight-bold);
}

.calendar__week-day-header--today .calendar__week-day-name,
.calendar__week-day-header--today .calendar__week-day-number,
.calendar__week-day-header--today .calendar__week-day-mobile {
    font-weight: var(--calendar-font-weight-bold);
}

.calendar__week-day-header--selected {
    background-color: var(--calendar-cell-selected-bg);
}

/* Week View Desktop: Day number left-aligned */
.calendar__week-day-header .calendar__week-day-number {
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
    flex-shrink: 0;
    min-width: 1.5rem;
    text-align: left;
}

/* Week View Desktop: Weekday name centered - uses absolute positioning for true centering */
.calendar__week-day-header .calendar__week-day-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Mobile compact element hidden on desktop */
.calendar__week-day-mobile {
    display: none;
}

/* All-day Section - Height matches one time slot, intermediate background */
.calendar__all-day-section {
    display: flex;
    flex-shrink: 0;
    height: var(--calendar-slot-height, var(--calendar-base-hour-height));
    background-color: var(--calendar-all-day-bg);
    border-bottom: 1px solid var(--calendar-border);
}

/* Sticky all-day section - positioned below sticky header inside scroll container.
   Uses calc() to position just below the header height. */
.calendar__all-day-section--sticky {
    position: sticky;
    top: var(--calendar-column-header-height);
    z-index: 14;
}

/* All-day gutter uses same intermediate background */
.calendar__all-day-section > .calendar__time-gutter {
    background-color: var(--calendar-all-day-bg);
}

.calendar__all-day-cell {
    flex: 1 1 0%;
    min-width: 0;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border-right: 1px solid var(--calendar-border);
    overflow: hidden;
}

.calendar__all-day-cell:last-child {
    border-right: none;
}

/* Scrollbar spacer for all-day section - matches header spacer */
.calendar__all-day-scrollbar-spacer {
    flex-shrink: 0;
    width: var(--calendar-scrollbar-width, 0px);
    background-color: var(--calendar-all-day-bg);
}

.calendar__all-day-label {
    font-size: var(--calendar-font-size-small);
    font-weight: var(--calendar-font-weight-medium);
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Time Grid Container */
.calendar__time-grid-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Prevent scroll chaining and iOS rubber-band effect at scroll boundaries.
     * Uses 'none' instead of 'contain' to fully block overscroll propagation
     * on iOS Safari, which can otherwise trigger page reload via pull-to-refresh. */
    overscroll-behavior: none;
    /* Vertical-only panning - prevents horizontal swipe navigation interference */
    touch-action: pan-y pinch-zoom;
    /* Flex-column layout to stack sticky header, all-day section, and time grid.
       All elements share the same layout context, eliminating sub-pixel rounding
       mismatches between header and body columns at various zoom levels. */
    display: flex;
    flex-direction: column;
    /* Background matches cell background to fill any gap at bottom */
    background-color: var(--calendar-cell-bg);
}

/* Time Grid */
.calendar__time-grid {
    display: flex;
    min-height: 100%;
    position: relative;
    flex: 1 0 auto;
}

.calendar__time-grid--day {
    /* Height based on number of hours (7-21 = 15 hours), uses dynamic slot height */
    min-height: calc(var(--calendar-slot-height, var(--calendar-base-hour-height)) * var(--calendar-total-slots, 15));
}

/* Time Gutter - Left column showing time labels with grid lines */
.calendar__time-gutter {
    position: relative;  /* Positioning context for current time indicator */
    width: var(--calendar-gutter-width);
    flex-shrink: 0;
    background-color: var(--calendar-header-bg);
    border-right: 1px solid var(--calendar-border);
    overflow: visible;
    cursor: context-menu;
}

/**
 * Time Slot (Gutter)
 * ------------------
 * Each slot in the gutter contains a grid line at the TOP and a label
 * that "hangs" below the line. This creates visual continuity between
 * the gutter and main calendar grid.
 *
 * Layout (hanging design):
 * ┌────────────────┐
 * │ ────────────── │  ← Grid line at top
 * │  08⁰⁰          │  ← Label hangs below line
 * │                │
 * └────────────────┘
 */
.calendar__time-slot {
    position: relative;
    /* Height set by JS in pixels; fallback to base height if JS not loaded.
       Using px (not rem) ensures identical rendering in Edge, Firefox, Chrome, Safari.
       Cross-browser (v2.6.0): Removed contain property - causes inconsistent height
       calculation between Edge and Firefox due to different containment implementations. */
    height: var(--calendar-slot-height, var(--calendar-base-hour-height));
    box-sizing: border-box;
}

.calendar__time-slot--hour {
    /* Hour slots may have additional styling if needed */
}

.calendar__time-slot--sub {
    /* Sub-hour slots - typically smaller labels */
}

/**
 * Gutter Grid Line
 * ----------------
 * Horizontal line at the TOP of the slot, extending from the right edge
 * (where gutter meets main grid) leftward to the minute-label boundary.
 * The line does NOT cross behind the hour block, keeping typography clean.
 *
 * Layout:
 * ┌──────────────────────────┐
 * │   ─────────── 08  00     │  ← Hour line: full width (3px margins both sides)
 * │               15  ────   │  ← Sub-hour line: 20px, 3px from right
 * └──────────────────────────┘
 */
.calendar__gutter-line {
    position: absolute;
    right: 3px;   /* 3px margin from right edge */
    top: 0;       /* Line at TOP of slot (hanging design) */
    width: 20px;  /* Tick mark width */
    height: 1px;
    background-color: var(--calendar-border);
    z-index: 1;   /* Above hover pseudo-element background */
}

.calendar__gutter-line--hour {
    left: 3px;                          /* Extend to 3px from left edge */
    right: 3px;                         /* 3px from right edge */
    width: auto;                        /* Full width minus margins */
    background-color: var(--calendar-border);
}

.calendar__gutter-line--sub {
    /* Solid line, same as hour - slightly lighter */
    opacity: 0.5;
}

/* First slot has no line at top (grid starts at first boundary) */
.calendar__time-slot:first-child .calendar__gutter-line {
    display: none;
}

/* ==========================================================================
   Two-Column Time Labels (v1.8.0)
   ========================================================================== */

/**
 * Time Label (Base)
 * -----------------
 * Labels "hang" below the grid line with a configurable offset.
 * The label indicates the time slot that STARTS at that line.
 *
 * Two-column layout (v1.8.0):
 * - Left column: Hour numbers 2-digit (08, 09, 10...) - only at :00, larger, bold
 * - Right column: Minutes (00, 15, 30...) - uniform style, smaller, secondary
 *
 * ┌─────────────────────────────────┐
 * │       08 00              ──────│  ← Hour and 00 top-aligned
 * │          15                    │
 * │          30                    │
 * │          45                    │
 * │       09 00              ──────│
 * └─────────────────────────────────┘
 */
.calendar__time-label {
    position: absolute;
    top: var(--calendar-label-line-offset);  /* Hang below the line */
    left: 0;
    right: 0;
    z-index: 1;  /* Above hover pseudo-element background */
    display: flex;
    align-items: flex-start;  /* Top-align hour and minute */
    white-space: nowrap;
    line-height: 1;
    font-family: var(--font-family-system);
}

/**
 * Hour Column (Left)
 * ------------------
 * Shows 2-digit hour numbers (08, 09...) only at :00 marks.
 * Larger font, medium weight, primary color for strong visual hierarchy.
 * Right-aligned within the column.
 *
 * Visual Enhancement (v2.4.0):
 * - Medium font weight for better prominence at fine intervals
 * - Primary color for clear hour identification
 */
.calendar__time-label-hour {
    flex: 0 0 auto;
    width: 1.75rem;             /* Compact column for "HH" at 18px (28px) */
    text-align: right;
    padding-right: 0.125rem;    /* Small gap between hour and minute */
    font-size: 1.125rem;        /* 18px for prominent hour display */
    font-weight: var(--calendar-font-weight-medium);  /* Medium weight for visual prominence */
    color: var(--color-text-primary);
}

/**
 * Minute Column (Right)
 * ---------------------
 * Shows minutes (00, 15, 30, 45, etc.)
 * Positioned in the right portion of the gutter.
 */
.calendar__time-label-minute {
    flex: 1;
    text-align: right;
    padding-right: 0.25rem;     /* 4px from right edge of gutter */
    /* No transition: labels don't change background, hover is on parent slot */
}

/**
 * Minute Label Styling
 * --------------------
 * Minute labels at hour marks (:00) and sub-hour marks (:15, :30, :45)
 * have differentiated styling for improved visual hierarchy.
 *
 * Visual Enhancement (v2.4.0):
 * - Hour minutes (:00): Secondary color, normal weight
 * - Sub-hour minutes: Tertiary color, reduced opacity for subtlety
 */
.calendar__time-label-minute--hour {
    font-size: var(--calendar-font-size-tiny);
    font-weight: var(--calendar-font-weight-normal);
    color: var(--color-text-secondary);
}

.calendar__time-label-minute--sub {
    font-size: var(--calendar-font-size-tiny);
    font-weight: var(--calendar-font-weight-normal);
    color: var(--color-text-tertiary, var(--color-text-secondary));
    opacity: 0.7;  /* Subtle appearance for sub-hour labels */
}

/**
 * Standard Label Mode (≥60 min intervals)
 * ----------------------------------------
 * For 60+ min intervals, show full HH:mm in single format.
 * The hour column is used for full time display, right-aligned.
 */
.calendar__time-label--standard {
    justify-content: flex-end;  /* Right-align the label */
}

.calendar__time-label--standard .calendar__time-label-hour {
    width: auto;
    padding-right: 0.25rem;     /* Match gutter edge padding */
    font-size: var(--calendar-font-size-gutter-standard);  /* 14px - unified with Cadence view */
    font-weight: var(--calendar-font-weight-normal);  /* Normal weight for consistency */
}

.calendar__time-label--standard .calendar__time-label-minute {
    display: none;  /* Hide minute column in standard mode */
}

/* Legacy label classes (kept for backward compatibility) */
.calendar__time-slot-label {
    position: absolute;
    right: var(--calendar-gutter-padding);
    top: var(--calendar-label-line-offset);
    font-size: var(--calendar-font-size-small);
    font-weight: var(--calendar-font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    line-height: 1;
}

.calendar__time-slot-label--hour {
    font-size: 0.875rem;        /* 14px - fits in compact gutter */
    font-weight: var(--calendar-font-weight-normal);
    color: var(--color-text-primary);
}

.calendar__time-slot-label--sub {
    font-size: var(--calendar-font-size-tiny);
    font-weight: var(--calendar-font-weight-normal);
    color: var(--color-text-secondary);
    opacity: 0.8;
}

/* ==========================================================================
   Synchronized Hover States (v1.11.0)
   ========================================================================== */

/**
 * Time Slot Hover State
 * ---------------------
 * When a time slot line in the calendar grid is hovered, the corresponding
 * gutter cell receives a hover highlight covering the full gutter cell area
 * (both hour and minute columns).
 *
 * Synchronization Mechanism:
 * - JavaScript handles mouseenter/mouseleave on grid time slots
 * - Instantly applies/removes 'calendar__time-slot--hover' class on gutter via DOM
 * - Gutter highlight appears instantly (pseudo-element toggle)
 * - Grid slot uses 80ms transition on :hover only (v2.5.0)
 *
 * Design Decision (v2.5.0):
 * The 80ms transition on :hover provides smooth hover-in without delaying
 * hover-out or selection. Base class has no transition for instant feedback.
 *
 * Uses a pseudo-element to create a full-height, full-width highlight
 * without affecting label layout or positioning.
 */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot--hover::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;             /* Full width from left edge */
    right: 0;            /* To right edge of gutter */
    background-color: var(--calendar-cell-hover-bg);
    box-shadow: inset 2px 0 0 0 var(--calendar-time-gutter-hover-accent);
    pointer-events: none; /* Don't interfere with interactions */
    z-index: 0;          /* Behind label text */
    /* No transition: instant feedback for 100% sync with grid hover */
}

/* ==========================================================================
   Current Time Indicator
   ========================================================================== */

/**
 * Current Time Indicator
 * ----------------------
 * A small red triangle at the left edge of the time gutter, pointing right
 * into the calendar grid. Positioned vertically to indicate the current time
 * with minute accuracy.
 *
 * Layout:
 * ┌────────────────────────────────────┐
 * │ Time Gutter    │  Calendar Grid    │
 * │                │                   │
 * │     ▶──────────│───────────────    │  ← Current time indicator + line
 * │                │                   │
 * └────────────────────────────────────┘
 *
 * The triangle is positioned using `top` percentage calculated as:
 * ((currentHour + currentMinute/60) - gridStartHour) / totalGridHours * 100%
 */
.calendar__current-time-indicator {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
    /* Transform to center the indicator vertically on the exact time position */
    transform: translateY(-50%);
}

/**
 * Triangle Marker
 * ---------------
 * Right-pointing triangle using CSS borders technique.
 * Size: 8px wide × 10px tall (slightly taller than wide for visual balance)
 * Color: Red for high visibility as current time indicator
 * Position: Left edge of gutter, pointing right into calendar grid
 *
 * Visual Enhancement (v2.4.0):
 * - Subtle glow effect for improved visibility without being intrusive
 * - Drop shadow creates depth and draws attention to current time
 */
.calendar__current-time-marker {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    /* Triangle pointing right: 8px wide × 10px tall */
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #dc2626;  /* Red-600 for visibility */
    /* Subtle glow effect for enhanced visibility */
    filter: drop-shadow(0 0 3px rgba(220, 38, 38, 0.5));
}

/**
 * Time Line Extension
 * -------------------
 * Optional horizontal line extending from the triangle across the grid.
 * Provides visual continuity and makes current time easier to track.
 * Only shown if the gutter has the line modifier class.
 *
 * Visual Enhancement (v2.4.0):
 * - Increased thickness (2px) for better visibility
 * - Subtle glow effect matching the marker
 * - Higher opacity (0.6) for improved tracking
 */
.calendar__current-time-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #dc2626;  /* Red-600 matching the marker */
    transform: translateY(-50%);
    opacity: 0.6;
    box-shadow: 0 0 4px rgba(220, 38, 38, 0.4);
}

/* Day Columns */
.calendar__day-column {
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
    border-right: 1px solid var(--calendar-border);
    background-color: var(--calendar-cell-bg);
}

.calendar__day-column:last-child {
    border-right: none;
}

.calendar__day-column--single {
    flex: 1 1 0%;
}

.calendar__day-column--today {
    background-color: var(--calendar-today-bg);
}

.calendar__day-column--selected {
    background-color: var(--calendar-cell-selected-bg);
}

/* Hour Lines (legacy) */
.calendar__hour-line {
    height: var(--calendar-hour-height);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__hour-line:last-child {
    border-bottom: none;
}

/* Time Slot Lines - Grid lines in day columns (hanging design: line at TOP)
   Individual time slots are hoverable - matches DataTable row hover (8% context)

   Performance Optimization (v2.5.0):
   - NO transition on base class for instant selection feedback
   - Hover transitions applied only to hover pseudo-class
   - Selection states are immediate (<16ms) for responsive feel */
.calendar__time-slot-line {
    /* Height set by JS in pixels; fallback to base height if JS not loaded.
       Using px (not rem) ensures identical rendering in Edge, Firefox, Chrome, Safari.
       Cross-browser (v2.6.0): Removed contain property and changed from border-top to
       pseudo-element for grid line. This matches gutter approach and eliminates
       Edge vs Firefox height calculation differences caused by border + box-sizing
       + containment interaction. The visual line is now rendered via ::before
       pseudo-element, not affecting layout height. */
    position: relative;
    height: var(--calendar-slot-height, var(--calendar-base-hour-height));
    box-sizing: border-box;
    /* No transition here - applied only to hover states for instant selection */
}

/* Grid line rendered via pseudo-element (not border) for cross-browser consistency.
   Matches gutter approach where lines are absolutely positioned elements. */
.calendar__time-slot-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--calendar-border);
    pointer-events: none;
    z-index: 1;
}

/* Hover only when not in keyboard mode - matches DataTable row hover (8% context)
   Transition applied only here for smooth hover effect without delaying selection */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line:hover {
    background-color: var(--calendar-cell-hover-bg);
    transition: background-color 80ms ease-out;
}

/* Selected state - matches DataTable row selected (12% context)
   No transition for instant visual feedback on click/tap */
.calendar__time-slot-line--selected {
    background-color: var(--calendar-cell-selected-bg);
    transition: none;
}

/* Selected + hover state - matches DataTable row selected hover (15% context)
   Subtle transition only for hover effect on already-selected slots */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected:hover {
    background-color: var(--calendar-cell-selected-hover-bg);
    transition: background-color 80ms ease-out;
}

/* ==========================================================================
   Touch Device Feedback (v2.5.0)
   ==========================================================================
   On touch devices, :hover states behave differently (sticky after tap).
   Instead, we use :active for immediate, non-sticky visual feedback.

   Performance Optimization:
   - NO transition for instant touch feedback (<16ms, same frame)
   - Same visual treatment as hover for consistency
   - Only applies on devices without hover capability (touch-only)
   ========================================================================== */

@media (hover: none) {
    /* Touch feedback for unselected slots - instant */
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line:active {
        background-color: var(--calendar-cell-hover-bg);
        transition: none;
    }

    /* Touch feedback for selected slots - instant */
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected:active {
        background-color: var(--calendar-cell-selected-hover-bg);
        transition: none;
    }

    /* Touch feedback for drag range slots - instant */
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range:active {
        background-color: var(--calendar-cell-selected-hover-bg);
        transition: none;
    }
}

/* ==========================================================================
   Drag Selection Range (v1.12.0)
   ========================================================================== */

/**
 * Drag-to-Select Time Range
 * --------------------------
 * Allows users to click and drag to select multiple consecutive time slots.
 * The selected range is highlighted with a continuous background color.
 *
 * Usage:
 * - Mousedown on a slot starts the selection
 * - Dragging up/down extends the selection
 * - Mouseup finalizes and emits 'time-range-select' event
 *
 * Visual design:
 * - Uses selected background color for consistency with single-slot selection
 * - First and last slots in range get subtle rounded corners for visual polish
 * - Prevents text selection during drag via user-select: none
 */

/* Drag range state - matches selected state for visual consistency */
.calendar__time-slot-line--drag-range {
    background-color: var(--calendar-cell-selected-bg);
    transition: none; /* Instant visual feedback during drag */
}

/* First slot in drag range - rounded top corners */
.calendar__time-slot-line--drag-start {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

/* Last slot in drag range - rounded bottom corners */
.calendar__time-slot-line--drag-end {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* Single slot selection (both start and end) - full rounded corners */
.calendar__time-slot-line--drag-start.calendar__time-slot-line--drag-end {
    border-radius: 0.25rem;
}

/* Hover on drag range slots - slightly darker for feedback
   Subtle transition only for hover effect on already-selected drag range */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range:hover {
    background-color: var(--calendar-cell-selected-hover-bg);
    transition: background-color 80ms ease-out;
}

/* Prevent text selection during drag operations */
.calendar__time-slot-line {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    /* Allow vertical scrolling and pinch-zoom on touch devices.
       Touch-drag selection is disabled for smooth scrolling.
       Single-tap to select a slot still works. */
    touch-action: pan-y pinch-zoom;
}

/* Hour slot line - uses solid pseudo-element from base class */
.calendar__time-slot-line--hour {
    /* Inherits solid line ::before from base .calendar__time-slot-line */
}

/* Sub-hour slot line - replaces solid line with dashed gradient */
.calendar__time-slot-line--sub::before {
    /* Override solid line with dashed gradient pattern.
       Pattern: 3px dash + 2px gap, positioned at top of slot (hanging design).
       Short dashes with small gaps create a fine, delicate grid line.
       Uses theme token with 40% opacity for non-distracting appearance. */
    background: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--calendar-border) 40%, transparent) 0px,
        color-mix(in srgb, var(--calendar-border) 40%, transparent) 3px,
        transparent 3px,
        transparent 5px
    );
}

/* First slot has no line at top (grid starts at first time boundary) */
.calendar__time-slot-line:first-child::before {
    display: none;
}

/* ==========================================================================
   Day View
   ========================================================================== */

.calendar__day-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Day Header Section (Column Header - matches toolbar height) */
.calendar__day-header-section {
    flex-shrink: 0;
    height: var(--calendar-column-header-height);
    display: flex;
    align-items: stretch;
    padding: 0;  /* Padding moved to content container */
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

/* Sticky header variant - positioned inside scroll container for perfect column alignment. */
.calendar__day-header-section--sticky {
    position: sticky;
    top: 0;
    z-index: 15;
}

.calendar__day-header-section .calendar__time-gutter-header {
    width: var(--calendar-gutter-width);
    flex-shrink: 0;
    border-right: 1px solid var(--calendar-border);
    background-color: var(--calendar-header-bg);
}

/* Day Header Content - contains day title, receives today highlighting */
.calendar__day-header-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

/* Today indicator - only on content area, not gutter header */
.calendar__day-header-content--today {
    background-color: var(--calendar-today-indicator-bg);
}

/* Selected/focused day header - darker than today indicator */
.calendar__day-header-content--selected {
    background-color: var(--calendar-cell-selected-bg);
}

/* Day View Title - Desktop: day number left, weekday centered
   Mobile: weekday/date split layout for visual stability */
.calendar__day-title {
    display: flex;
    align-items: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

/* Desktop: Day number left-aligned */
.calendar__day-title-number {
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
    flex-shrink: 0;
    min-width: 2rem;
    text-align: left;
}

/* Desktop: Weekday centered - uses absolute positioning for true centering */
.calendar__day-title-weekday {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Mobile elements hidden on desktop */
.calendar__day-title-mobile-weekday,
.calendar__day-title-mobile-date {
    display: none;
}

/* Day View: Today indicator - bold text */
.calendar__day-title--today .calendar__day-title-number,
.calendar__day-title--today .calendar__day-title-weekday,
.calendar__day-title--today .calendar__day-title-mobile-weekday,
.calendar__day-title--today .calendar__day-title-mobile-date {
    font-weight: var(--calendar-font-weight-bold);
}

/* Day All-day Events - Height matches one time slot, intermediate background */
.calendar__day-all-day {
    display: flex;
    flex-shrink: 0;
    height: var(--calendar-slot-height, var(--calendar-base-hour-height));
    background-color: var(--calendar-all-day-bg);
    border-bottom: 1px solid var(--calendar-border);
}

/* Sticky all-day section - positioned below sticky header inside scroll container. */
.calendar__day-all-day--sticky {
    position: sticky;
    top: var(--calendar-column-header-height);
    z-index: 14;
}

/* Day all-day gutter uses same intermediate background */
.calendar__day-all-day > .calendar__time-gutter {
    background-color: var(--calendar-all-day-bg);
}

.calendar__day-all-day-events {
    flex: 1;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Scrollbar spacer for day header - fills the space where body's scrollbar appears */
.calendar__day-header-scrollbar-spacer {
    flex-shrink: 0;
    width: var(--calendar-scrollbar-width, 0px);
    background-color: var(--calendar-header-bg);
}

/* Scrollbar spacer for day all-day section */
.calendar__day-all-day-scrollbar-spacer {
    flex-shrink: 0;
    width: var(--calendar-scrollbar-width, 0px);
    background-color: var(--calendar-all-day-bg);
}

/* ==========================================================================
   Cadence View
   ========================================================================== */

/**
 * Cadence View - Time grid with user-defined cadence intervals
 * ============================================================
 * Variant of Day View that generates time slots based on a configurable
 * cadence (e.g., 35-minute intervals) and workday start time.
 *
 * Use case: Therapists with fixed appointment slots (30, 35, 40, 44, 75 min).
 * Time gutter labels show cadence-based times: 07:30, 08:05, 08:40, etc.
 */

.calendar__cadence-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Cadence Time Gutter */
.calendar__time-gutter--cadence {
    background-color: var(--calendar-header-bg);
}

.calendar__time-gutter-header--cadence {
    background-color: var(--calendar-header-bg);
}

/* Cadence gutter slot - mirrors Day View .calendar__time-slot styling
   for visual consistency at 60-minute reference setting. */
.calendar__time-gutter-slot--cadence {
    position: relative;
    height: var(--calendar-slot-height, var(--calendar-base-hour-height));
    box-sizing: border-box;
}

/* First cadence gutter slot has no line at top */
.calendar__time-gutter-slot--cadence:first-child .calendar__gutter-line--cadence {
    display: none;
}

/* Cadence gutter line - mirrors Day View .calendar__gutter-line styling */
.calendar__gutter-line--cadence {
    position: absolute;
    right: 3px;
    top: 0;
    width: 20px;
    height: 1px;
    background-color: var(--calendar-border);
    z-index: 1;
}

/* Cadence gutter hour line - full width like Day View */
.calendar__gutter-line--cadence-hour {
    left: 3px;
    right: 3px;
    width: auto;
    background-color: var(--calendar-border);
}

/* Cadence gutter sub-hour line - reduced opacity like Day View */
.calendar__gutter-line--cadence-sub {
    opacity: 0.5;
}

/* Cadence gutter label - mirrors Day View .calendar__time-label--standard styling */
.calendar__time-label--cadence {
    position: absolute;
    top: var(--calendar-label-line-offset, 0.375rem);
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    white-space: nowrap;
    line-height: 1;
    padding-right: 0.25rem;
    font-family: var(--font-family-system);
    font-size: var(--calendar-font-size-gutter-standard);  /* 14px - unified with Day/Week 60/120 min */
    font-weight: var(--calendar-font-weight-normal);
    color: var(--color-text-primary);
}

/* Cadence gutter hover state - mirrors Day View hover */
.calendar:not(.calendar--keyboard-mode) .calendar__time-gutter-slot--cadence-hover::before,
.calendar:not(.calendar--keyboard-mode) .calendar__time-gutter-slot--cadence:hover::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--calendar-cell-hover-bg);
    box-shadow: inset 2px 0 0 0 var(--calendar-time-gutter-hover-accent);
    pointer-events: none;
    z-index: 0;
}

/* Cadence Time Grid */
.calendar__time-grid--cadence {
    display: flex;
    min-height: 100%;
    position: relative;
    flex: 1 0 auto;
}

/* Cadence Day Column */
.calendar__day-column--cadence {
    flex: 1;
    position: relative;
    background-color: var(--calendar-cell-bg);
}

/* Cadence Time Slot Line - mirrors Day View .calendar__time-slot-line styling
   for visual consistency at 60-minute reference setting.
   Cross-browser (v2.6.0): Height in px for Edge/Firefox consistency.
   Removed contain property and changed from border to pseudo-element to
   eliminate Edge vs Firefox height calculation differences.
   Performance (v2.5.0 alignment): NO transition on base class for instant
   selection feedback. Hover transition applied only to :hover pseudo-class. */
.calendar__time-slot-line--cadence {
    /* Height set by JS in pixels for cross-browser consistency */
    height: var(--calendar-slot-height, var(--calendar-base-hour-height));
    position: relative;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    touch-action: pan-y pinch-zoom;
    /* No transition here - applied only to hover states for instant selection */
}

/* Cadence grid line rendered via pseudo-element (not border) for cross-browser consistency */
.calendar__time-slot-line--cadence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--calendar-border);
    pointer-events: none;
    z-index: 1;
}

/* Cadence hour slot line - uses solid pseudo-element from base class */
.calendar__time-slot-line--cadence-hour {
    /* Inherits solid line ::before from base .calendar__time-slot-line--cadence */
}

/* Cadence sub-hour slot line - replaces solid line with dashed gradient */
.calendar__time-slot-line--cadence-sub::before {
    /* Override solid line with dashed gradient pattern */
    background: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--calendar-border) 40%, transparent) 0px,
        color-mix(in srgb, var(--calendar-border) 40%, transparent) 3px,
        transparent 3px,
        transparent 5px
    );
}

/* First cadence slot line has no line at top */
.calendar__time-slot-line--cadence:first-child::before {
    display: none;
}

/* Cadence slot hover state - transition on :hover only for smooth-in, instant-out */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--cadence:hover {
    background-color: var(--calendar-cell-hover-bg);
    transition: background-color 80ms ease-out;
}

/* Cadence slot selected state - no transition for instant visual feedback */
.calendar__time-slot-line--cadence-selected {
    background-color: var(--calendar-cell-selected-bg);
    transition: none;
}

/* Cadence slot selected + hover state */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--cadence-selected:hover {
    background-color: var(--calendar-cell-selected-hover-bg);
    transition: background-color 80ms ease-out;
}

/* Cadence slot drag range state - no transition for instant visual feedback */
.calendar__time-slot-line--cadence-drag-range {
    background-color: var(--calendar-cell-selected-bg);
    transition: none;
}

/* Cadence slot drag range + hover state */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--cadence-drag-range:hover {
    background-color: var(--calendar-cell-selected-hover-bg);
    transition: background-color 80ms ease-out;
}

/* Cadence View Touch Feedback
   NO transition for instant touch feedback (<16ms, same frame).
   Matches standard time slot touch behavior. */
@media (hover: none) {
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--cadence:active {
        background-color: var(--calendar-cell-hover-bg);
        transition: none;
    }

    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--cadence-selected:active {
        background-color: var(--calendar-cell-selected-hover-bg);
        transition: none;
    }

    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--cadence-drag-range:active {
        background-color: var(--calendar-cell-selected-hover-bg);
        transition: none;
    }
}


/* ==========================================================================
   Events
   ========================================================================== */

.calendar__event {
    --event-color: var(--color-context-background);
    border-radius: 0.25rem;
    font-size: var(--calendar-font-size-base);
    line-height: 1.3;
    overflow: hidden;
}

.calendar__event:focus {
    outline: 2px solid var(--color-context-background);
    outline-offset: 1px;
}

/* Month View Events */
.calendar__event--month {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.25rem;
    background-color: color-mix(in srgb, var(--event-color) 15%, transparent);
    color: var(--color-text-primary);
}

.calendar__event-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--event-color);
    flex-shrink: 0;
}

.calendar__event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* All-day Events */
.calendar__event--all-day {
    padding: 0.25rem 0.5rem;
    background-color: var(--event-color);
    color: var(--color-context-foreground);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * Events Layer
 * -------------
 * Positioned absolutely to cover the slot grid content area,
 * providing correct positioning context for events.
 */
.calendar__events-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* Let clicks through to slot lines */
}

/* Timed Events */
.calendar__event--timed {
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    padding: 0.25rem 0.375rem;
    background-color: var(--event-color);
    color: var(--color-context-foreground);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
    z-index: 1;
    pointer-events: auto; /* Re-enable clicks on events */
}

.calendar__event-time {
    font-size: var(--calendar-font-size-small);
    font-weight: 600;
    opacity: 0.9;
}

.calendar__event--timed .calendar__event-title {
    font-weight: 500;
}

/* ==========================================================================
   Time Scale Context Menu
   ========================================================================== */

.calendar__time-scale-menu {
    position: fixed;
    z-index: 9999;
    min-width: 11rem;
    padding: 0.25rem 0;
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.calendar__time-scale-menu-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--form-label-font-size, 0.875rem);
    font-family: var(--font-family-system);
    color: var(--color-text-primary);
    background-color: transparent;
    border: none;
    text-align: left;
    white-space: nowrap;
    transition: background-color 150ms ease;
}

.calendar__time-scale-menu-item:hover {
    background-color: color-mix(in srgb, var(--color-context-background) 10%, var(--color-surface-primary));
}

.calendar__time-scale-menu-item:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--color-context-background) 10%, var(--color-surface-primary));
}

.calendar__time-scale-menu-item--selected {
    font-weight: 500;
}

.calendar__time-scale-menu-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-context-background);
}

.calendar__time-scale-menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar__time-scale-sheet-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 9998;
    touch-action: none;
}

@media (max-width: 1023px) {
    .calendar__time-scale-menu--sheet {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0.5rem 0 0.75rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.75rem);
        border-radius: 0.75rem 0.75rem 0 0;
        box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.2);
        max-height: 70vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .calendar__time-scale-menu--sheet .calendar__time-scale-menu-item {
        min-height: 3rem;
        padding: 0.85rem 1rem;
        font-size: 1rem;
    }

    .calendar__time-scale-menu--sheet .calendar__time-scale-menu-check {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ==========================================================================
   Calendar Context Menu
   Matches DataTable context menu styles for consistency
   ========================================================================== */

.calendar__context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 12rem;
    padding: 0.25rem 0;
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.calendar__context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-family-system);
    color: var(--color-text-primary);
    background-color: transparent;
    border: none;
    text-align: left;
    white-space: nowrap;
    transition: background-color 100ms ease;
}

.calendar__context-menu-item:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-context-background) 10%, var(--color-surface-primary));
}

.calendar__context-menu-item:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--color-context-background) 10%, var(--color-surface-primary));
}

.calendar__context-menu-item--disabled {
    color: var(--color-text-secondary);
    opacity: 0.5;
    cursor: not-allowed;
}

.calendar__context-menu-icon {
    flex-shrink: 0;
    width: 1rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.calendar__context-menu-item:hover:not(:disabled) .calendar__context-menu-icon {
    color: var(--color-context-background);
}

.calendar__context-menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar__context-menu-divider {
    height: 1px;
    margin: 0.25rem 0;
    background-color: var(--color-border);
}

.calendar__context-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 9998;
    touch-action: none;
}

/* Mobile: Bottom sheet style */
@media (max-width: 1023px) {
    .calendar__context-menu--sheet {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0.5rem 0 0.75rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.75rem);
        border-radius: 0.75rem 0.75rem 0 0;
        box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.2);
        max-height: 70vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .calendar__context-menu--sheet .calendar__context-menu-item {
        min-height: 3rem;
        padding: 0.85rem 1rem;
        font-size: 1rem;
    }

    .calendar__context-menu--sheet .calendar__context-menu-icon {
        width: 1.25rem;
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Dark Theme Adjustments
   ========================================================================== */

/* Dark Theme Color Swap - matches DataTable pattern:
   Header/gutter uses --color-surface-primary, cells use --color-surface-primary-variant.
   Outside days use content-only dimming to maintain uniform cell backgrounds. */
[data-theme="dark"] .calendar {
    --calendar-header-bg: var(--color-surface-primary);
    --calendar-cell-bg: var(--color-surface-primary-variant);
}

/* ==========================================================================
   Contrast Theme Adjustments
   ========================================================================== */

[data-theme="contrast"] .calendar__event--all-day,
[data-theme="contrast"] .calendar__event--timed {
    color: var(--color-context-foreground);
}

/* Contrast theme: increase sub-hour line opacity for better visibility */
[data-theme="contrast"] .calendar__time-slot-line--sub::before,
[data-theme="contrast"] .calendar__time-slot-line--cadence-sub::before {
    background: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--calendar-border) 60%, transparent) 0px,
        color-mix(in srgb, var(--calendar-border) 60%, transparent) 3px,
        transparent 3px,
        transparent 5px
    );
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 639px) {
    /* Time gutter: Fully inherits desktop styles (width, font-size, spacing)
     * for consistent appearance across all viewport sizes.
     * No token overrides - all values from base .calendar definition. */

    .calendar__day-header {
        padding: 0 0.25rem;
    }

    .calendar__day-number {
        width: 1.5rem;
        height: 1.5rem;
    }

    .calendar__event--month {
        padding: 0.0625rem 0.125rem;
    }

    .calendar__event-dot {
        width: 0.25rem;
        height: 0.25rem;
    }

    /* Hide event titles on very small screens in month view */
    .calendar__event--month .calendar__event-title {
        display: none;
    }

    .calendar__event--month {
        justify-content: center;
    }

    /* Day View Title - Mobile layout: weekday/date split for visual stability
       Format: "Thursday, 15. Sep. 2023" with fixed zones */
    .calendar__day-title {
        display: flex;
        justify-content: flex-start;
        gap: 0;
    }

    /* Hide desktop elements on mobile */
    .calendar__day-title-number,
    .calendar__day-title-weekday {
        display: none;
    }

    /* Mobile: Weekday zone - fixed width, right-aligned text for visual stability */
    .calendar__day-title-mobile-weekday {
        display: block;
        width: 6.5rem;          /* Fixed width accommodates longest weekday name */
        flex-shrink: 0;
        text-align: right;
        font-size: var(--form-label-font-size);
        font-weight: 500;
        color: var(--color-text-primary);
        padding-right: 0.25rem;
    }

    /* Mobile: Date zone - left-aligned for stability */
    .calendar__day-title-mobile-date {
        display: block;
        flex: 1;
        text-align: left;
        font-size: var(--form-label-font-size);
        font-weight: 400;
        color: var(--color-text-secondary);
        padding-left: 0.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Responsive - Week View Header Formatting (switch to compact sooner) */
@media (max-width: 1279px) {
    /* Week View Header - Compact "Mo 12" format
       Two-letter weekday abbreviation + zero-padded day number */
    .calendar__week-day-header {
        justify-content: center;
        padding: 0 0.125rem;
    }

    /* Hide desktop elements (Week View only - Staffweek keeps desktop format) */
    .calendar__week-day-header .calendar__week-day-number,
    .calendar__week-day-header .calendar__week-day-name {
        display: none;
    }

    /* Show compact format element */
    .calendar__week-day-mobile {
        display: block;
        font-size: var(--form-label-font-size);
        font-weight: 500;
        color: var(--color-text-primary);
        white-space: nowrap;
        letter-spacing: -0.01em;
    }
}

/* Desktop Responsive Overrides
   ========================================================================== */
@media (min-width: 768px) {
    /* Day number: top-left alignment on desktop (mobile stays centered) */
    .calendar__day-number {
        margin: 0.25rem 0 0 0.375rem;
    }
}

/* ==========================================================================
   Workweek View
   ========================================================================== */

.calendar__workweek-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ==========================================================================
   Staff/Employee Views - Shared Styles
   ========================================================================== */

.calendar__staff-view,
.calendar__staffweek-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Employee Header Row (Sub-header BELOW Column Header for employee names) */
.calendar__employee-header-row {
    display: flex;
    flex-shrink: 0;
    height: 36px;
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__employee-header-cell {
    flex: 1 1 0%;
    min-width: var(--min-col-width, 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-right: 1px solid var(--calendar-border);
    border-left: 3px solid var(--employee-color, var(--color-context-background));
    background-color: color-mix(in srgb, var(--employee-color, var(--color-context-background)) 10%, var(--calendar-header-bg));
    overflow: hidden;
}

.calendar__employee-header-cell:last-child {
    border-right: none;
}

/* Employee Name Text - Stable 14px typography with ellipsis truncation */
.calendar__employee-name {
    display: block;
    max-width: 100%;
    /* Fixed font size - must NOT change with viewport, responsive rules, or theme */
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day Header in Staff View (Column Header - matches toolbar height) */
.calendar__day-header-section--staff {
    display: flex;
    height: var(--calendar-column-header-height);
    padding: 0; /* Override base class padding - use gutter element instead */
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__day-header-section--staff .calendar__time-gutter-header {
    /* Ensure gutter header matches time gutter styling */
    background-color: var(--calendar-header-bg);
}

.calendar__staff-day-header {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

/* Current day header - matches Day View styling */
.calendar__staff-day-header--today {
    background-color: var(--calendar-today-indicator-bg);
}

/* Selected/focused day header - darker than today indicator */
.calendar__staff-day-header--selected {
    background-color: var(--calendar-cell-selected-bg);
}

/* Employee Column
   Column body uses neutral background (--calendar-cell-bg) to enable consistent
   status-based coloring (working time, vacation, etc.) across all employees.
   Employee-specific color identity is applied only to column headers.
   min-width ensures readability with many employees (horizontal scroll if needed). */
.calendar__employee-column {
    flex: 1 1 0%;
    min-width: var(--min-col-width, 140px);
    position: relative;
    border-right: 1px solid var(--calendar-border);
    background-color: var(--calendar-cell-bg);
}

.calendar__employee-column:last-child {
    border-right: none;
}

/* Time Grid for Staff Views */
.calendar__time-grid--staff {
    min-height: calc(var(--calendar-slot-height, var(--calendar-base-hour-height)) * var(--calendar-total-slots, 15));
}

/* ==========================================================================
   Staff View (Unified Scroll Container with Sticky Headers)
   ========================================================================== */

/* Unified scroll container - handles both vertical and horizontal scrolling.
   Headers use sticky positioning to stay at top while scrolling vertically
   but scroll horizontally with the content for perfect column alignment
   (eliminates sub-pixel rounding misalignment between separate containers). */
.calendar__staff-scroll-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent scroll chaining and iOS rubber-band effect.
     * Uses 'none' to fully block overscroll propagation on iOS Safari. */
    overscroll-behavior: none;
    /* Allow both scroll directions for staff view with multiple employee columns */
    touch-action: pan-x pan-y pinch-zoom;
}

/* Day Header Row - sticky at top */
.calendar__staff-day-header-row {
    display: flex;
    height: var(--calendar-column-header-height);
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__staff-day-header-row--sticky {
    position: sticky;
    top: 0;
    z-index: 12;
}

.calendar__staff-day-header-row--today {
    background-color: var(--calendar-today-indicator-bg);
}

.calendar__staff-day-header-row--selected {
    background-color: var(--calendar-cell-selected-bg);
}

.calendar__staff-day-header-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

/* Employee Name Header Row - sticky below day header */
.calendar__staff-employee-header-row {
    display: flex;
    height: 36px;
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__staff-employee-header-row--sticky {
    position: sticky;
    top: var(--calendar-column-header-height);
    z-index: 11;
}

.calendar__staff-employee-header-content {
    flex: 1;
    display: flex;
    min-width: max-content;
}

/* Time Gutter Header - sticky left for horizontal scrolling */
.calendar__time-gutter-header--sticky-left {
    position: sticky;
    left: 0;
    z-index: 13;
    width: var(--calendar-gutter-width);
    flex-shrink: 0;
    background-color: var(--calendar-header-bg);
    border-right: 1px solid var(--calendar-border);
}

/* Time Gutter - sticky left for horizontal scrolling */
.calendar__time-gutter--sticky-left {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--calendar-cell-bg);
}

/* Time Grid Row */
.calendar__staff-grid-row {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    min-height: calc(var(--calendar-slot-height, var(--calendar-base-hour-height)) * var(--calendar-total-slots, 15));
}

/* Employee Columns Container */
.calendar__staff-columns {
    flex: 1;
    display: flex;
    min-width: max-content;
}

/* Employee header cells in staff scroll structure */
.calendar__staff-employee-header-content .calendar__employee-header-cell {
    flex: 1 0 auto;
    width: var(--min-col-width, 140px);
    min-width: var(--min-col-width, 140px);
    height: 100%;
}

/* Employee columns in staff scroll structure */
.calendar__staff-columns .calendar__employee-column {
    flex: 1 0 auto;
    width: var(--min-col-width, 140px);
    min-width: var(--min-col-width, 140px);
}

/* ==========================================================================
   Work/Break Time Shading
   ========================================================================== */

/* Working time - transparent, shows employee background */
.calendar__time-slot-bg--working {
    background-color: transparent;
}

/* Break time - subtle stripe/shade */
.calendar__time-slot-bg--break {
    background-color: color-mix(in srgb, var(--color-text-secondary) 10%, transparent);
    background-image: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 4px,
        color-mix(in srgb, var(--color-text-secondary) 5%, transparent) 4px,
        color-mix(in srgb, var(--color-text-secondary) 5%, transparent) 8px
    );
}

/* Outside working hours */
.calendar__time-slot-bg--outside {
    background-color: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
}

/* Selected state override for Staff views - ensures selection is visible
   regardless of work/break/outside time shading */
.calendar__time-slot-line--selected.calendar__time-slot-bg--working,
.calendar__time-slot-line--selected.calendar__time-slot-bg--break,
.calendar__time-slot-line--selected.calendar__time-slot-bg--outside {
    background-color: var(--calendar-cell-selected-bg);
    background-image: none;
}

/* Selected + hover state for Staff views */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected.calendar__time-slot-bg--working:hover,
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected.calendar__time-slot-bg--break:hover,
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected.calendar__time-slot-bg--outside:hover {
    background-color: var(--calendar-cell-selected-hover-bg);
    background-image: none;
}

/* Drag range state override for Staff views - ensures drag selection is visible
   regardless of work/break/outside time shading */
.calendar__time-slot-line--drag-range.calendar__time-slot-bg--working,
.calendar__time-slot-line--drag-range.calendar__time-slot-bg--break,
.calendar__time-slot-line--drag-range.calendar__time-slot-bg--outside {
    background-color: var(--calendar-cell-selected-bg);
    background-image: none;
}

/* Drag range + hover state for Staff views */
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range.calendar__time-slot-bg--working:hover,
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range.calendar__time-slot-bg--break:hover,
.calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range.calendar__time-slot-bg--outside:hover {
    background-color: var(--calendar-cell-selected-hover-bg);
    background-image: none;
}

/* Staff View Touch Feedback (v2.4.0)
   Touch-specific :active states for staff view slots with background types */
@media (hover: none) {
    /* Touch feedback for working/break/outside slots */
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-bg--working:active,
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-bg--break:active,
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-bg--outside:active {
        background-color: var(--calendar-cell-hover-bg);
        background-image: none;
        transition: background-color 50ms ease;
    }

    /* Touch feedback for selected staff slots */
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected.calendar__time-slot-bg--working:active,
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected.calendar__time-slot-bg--break:active,
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--selected.calendar__time-slot-bg--outside:active {
        background-color: var(--calendar-cell-selected-hover-bg);
        background-image: none;
        transition: background-color 50ms ease;
    }

    /* Touch feedback for drag range staff slots */
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range.calendar__time-slot-bg--working:active,
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range.calendar__time-slot-bg--break:active,
    .calendar:not(.calendar--keyboard-mode) .calendar__time-slot-line--drag-range.calendar__time-slot-bg--outside:active {
        background-color: var(--calendar-cell-selected-hover-bg);
        background-image: none;
        transition: background-color 50ms ease;
    }
}

/* ==========================================================================
   Staff Week View (Horizontal Scroll)
   ========================================================================== */

/* Unified scroll container - handles both vertical and horizontal scrolling.
   Headers use sticky positioning to stay at top while scrolling vertically
   but scroll horizontally with the content for perfect column alignment
   (eliminates sub-pixel rounding misalignment between separate containers). */
.calendar__staffweek-scroll-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent scroll chaining and iOS rubber-band effect.
     * Uses 'none' to fully block overscroll propagation on iOS Safari. */
    overscroll-behavior: none;
    /* Allow both scroll directions for staffweek view with multiple employee columns */
    touch-action: pan-x pan-y pinch-zoom;
}

/* Day Header Row - sticky at top */
.calendar__staffweek-day-header-row {
    display: flex;
    /* min-width ensures border-bottom spans full scrollable width */
    min-width: max-content;
    height: var(--calendar-column-header-height);
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__staffweek-day-header-row--sticky {
    position: sticky;
    top: 0;
    z-index: 12;
}

.calendar__staffweek-day-header-content {
    flex: 1;
    display: flex;
    min-width: max-content;
}

/* Day header cell in unified structure - width matches employee group exactly */
.calendar__staffweek-day-header-cell {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* Width = number of employees * column width (content-box so border is extra, matching employee group) */
    width: calc(var(--day-employees, 1) * var(--min-col-width, 140px));
    box-sizing: content-box;
    /* No padding - must match employee group which has no padding */
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
    border-right: 2px solid var(--calendar-border);
    position: relative;
}

.calendar__staffweek-day-header-cell:last-child {
    border-right: none;
}

/* StaffWeek View Desktop: Day number left-aligned */
.calendar__staffweek-day-header-cell .calendar__week-day-number {
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
    flex-shrink: 0;
    min-width: 1.5rem;
    margin-left: 0.5rem;
    text-align: left;
}

/* StaffWeek View Desktop: Weekday name centered */
.calendar__staffweek-day-header-cell .calendar__week-day-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--form-label-font-size);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* StaffWeek View: Mobile compact element hidden */
.calendar__staffweek-day-header-cell .calendar__week-day-mobile {
    display: none;
}

/* Current day header - matches DataTable row hover (8% context), bold text */
.calendar__staffweek-day-header-cell--today {
    background-color: var(--calendar-today-indicator-bg);
    font-weight: var(--calendar-font-weight-bold);
}

.calendar__staffweek-day-header-cell--today .calendar__week-day-name,
.calendar__staffweek-day-header-cell--today .calendar__week-day-number,
.calendar__staffweek-day-header-cell--today .calendar__week-day-mobile {
    font-weight: var(--calendar-font-weight-bold);
}

.calendar__staffweek-day-header-cell--selected {
    background-color: var(--calendar-cell-selected-bg);
}

/* Employee Name Header Row - sticky below day header */
.calendar__staffweek-employee-header-row {
    display: flex;
    /* min-width ensures border-bottom spans full scrollable width */
    min-width: max-content;
    height: 36px;
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__staffweek-employee-header-row--sticky {
    position: sticky;
    top: var(--calendar-column-header-height);
    z-index: 11;
}

.calendar__staffweek-employee-header-content {
    flex: 1;
    display: flex;
    min-width: max-content;
}

/* Employee group within header row (one per day) - width matches day header cell */
.calendar__staffweek-employee-group {
    display: flex;
    flex: 0 0 auto;
    /* Width determined by children (n * min-col-width), border is extra */
    box-sizing: content-box;
    border-right: 2px solid var(--calendar-border);
}

.calendar__staffweek-employee-group:last-child {
    border-right: none;
}

.calendar__staffweek-employee-cell {
    flex: 0 0 auto;
    min-width: var(--min-col-width, 140px);
    width: var(--min-col-width, 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    border-right: 1px solid var(--calendar-border);
    border-left: 3px solid var(--employee-color, var(--color-context-background));
    background-color: color-mix(in srgb, var(--employee-color, var(--color-context-background)) 10%, var(--calendar-header-bg));
    overflow: hidden;
}

.calendar__staffweek-employee-cell:last-child {
    border-right: none;
}

/* Time Grid Row */
.calendar__staffweek-grid-row {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    min-height: calc(var(--calendar-slot-height, var(--calendar-base-hour-height)) * var(--calendar-total-slots, 15));
}

/* Day Groups with Employee Columns */
.calendar__staffweek-columns {
    flex: 1;
    display: flex;
    min-width: max-content;
}

/* Employee Column in Staffweek (fixed width) */
.calendar__employee-column--staffweek {
    flex: 0 0 auto;
    min-width: var(--min-col-width, 140px);
    width: var(--min-col-width, 140px);
}

/* Day group wrapper in body grid - mirrors header structure for alignment */
.calendar__staffweek-grid-day-group {
    display: flex;
    flex: 0 0 auto;
    /* Width determined by children, border is extra (matches day header cell and employee group) */
    box-sizing: content-box;
    border-right: 2px solid var(--calendar-border);
}

.calendar__staffweek-grid-day-group:last-child {
    border-right: none;
}

/* ==========================================================================
   Dark Theme Adjustments for Employee Views
   ========================================================================== */

[data-theme="dark"] .calendar__employee-header-cell,
[data-theme="dark"] .calendar__staffweek-employee-cell {
    background-color: color-mix(in srgb, var(--employee-color, var(--color-context-background)) 15%, var(--calendar-header-bg));
}

[data-theme="dark"] .calendar__time-slot-bg--break {
    background-color: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
}

[data-theme="dark"] .calendar__time-slot-bg--outside {
    background-color: color-mix(in srgb, var(--color-text-secondary) 25%, transparent);
}

/* Dark theme: Selected state override for Staff views */
[data-theme="dark"] .calendar__time-slot-line--selected.calendar__time-slot-bg--working,
[data-theme="dark"] .calendar__time-slot-line--selected.calendar__time-slot-bg--break,
[data-theme="dark"] .calendar__time-slot-line--selected.calendar__time-slot-bg--outside {
    background-color: var(--calendar-cell-selected-bg);
    background-image: none;
}

/* Dark theme: Drag range state override for Staff views */
[data-theme="dark"] .calendar__time-slot-line--drag-range.calendar__time-slot-bg--working,
[data-theme="dark"] .calendar__time-slot-line--drag-range.calendar__time-slot-bg--break,
[data-theme="dark"] .calendar__time-slot-line--drag-range.calendar__time-slot-bg--outside {
    background-color: var(--calendar-cell-selected-bg);
    background-image: none;
}

/* ==========================================================================
   Contrast Theme Adjustments for Employee Views
   ========================================================================== */

[data-theme="contrast"] .calendar__employee-header-cell,
[data-theme="contrast"] .calendar__staffweek-employee-cell {
    background-color: color-mix(in srgb, var(--employee-color, var(--color-context-background)) 25%, var(--calendar-header-bg));
    border-left-width: 4px;
}

[data-theme="contrast"] .calendar__time-slot-bg--break {
    background-color: color-mix(in srgb, var(--color-text-secondary) 25%, transparent);
}

[data-theme="contrast"] .calendar__time-slot-bg--outside {
    background-color: color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
}

/* Contrast theme: Selected state override for Staff views */
[data-theme="contrast"] .calendar__time-slot-line--selected.calendar__time-slot-bg--working,
[data-theme="contrast"] .calendar__time-slot-line--selected.calendar__time-slot-bg--break,
[data-theme="contrast"] .calendar__time-slot-line--selected.calendar__time-slot-bg--outside {
    background-color: var(--calendar-cell-selected-bg);
    background-image: none;
}

/* Contrast theme: Drag range state override for Staff views */
[data-theme="contrast"] .calendar__time-slot-line--drag-range.calendar__time-slot-bg--working,
[data-theme="contrast"] .calendar__time-slot-line--drag-range.calendar__time-slot-bg--break,
[data-theme="contrast"] .calendar__time-slot-line--drag-range.calendar__time-slot-bg--outside {
    background-color: var(--calendar-cell-selected-bg);
    background-image: none;
}

/* ==========================================================================
   Responsive - Mobile for Employee Views
   ========================================================================== */

/* Staffweek: Fixed column widths across all viewport sizes.
 * Columns maintain desktop width; container scrolls horizontally when needed.
 * No mobile-specific sizing - consistent layout behavior. */

/* Mobile: Hide scrollbars but keep touch swipe functionality.
 * Desktop: Normal scrollbar behavior.
 * Uses -webkit-scrollbar (Chrome/Safari/Edge) and scrollbar-width (Firefox). */
@media (max-width: 1023px) {
    .calendar__staff-scroll-container,
    .calendar__staffweek-scroll-container {
        /* Firefox */
        scrollbar-width: none;
        /* Allow both horizontal swipe and vertical scroll */
        -webkit-overflow-scrolling: touch;
    }

    /* Webkit-based browsers (Chrome, Safari, Edge) */
    .calendar__staff-scroll-container::-webkit-scrollbar,
    .calendar__staffweek-scroll-container::-webkit-scrollbar {
        display: none;
    }
}

/* ==========================================================================
   Mobile Date Stepper (Bottom Navigation Bar)
   ========================================================================== */

/**
 * Mobile-only pagination-style navigation bar
 * =============================================
 * Positioned at the bottom of the calendar (similar to DataTable footer).
 * Uses flat button styling: "< Today >"
 * Only visible on mobile/vertical layout (max-width: 1023px).
 *
 * Note: Named "date-stepper" to avoid conflict with existing "calendar-nav"
 * which is used in the toolbar.
 */

.calendar__date-stepper {
    display: none; /* Hidden on desktop */
}

@media (max-width: 1023px) {
    .calendar__date-stepper {
        display: flex;
        flex-shrink: 0;
        height: 3rem;
        align-items: center;
        padding: 0 1rem;
        background-color: var(--calendar-header-bg);
        border-top: 1px solid var(--calendar-border);
        gap: 0.5rem;
    }

    .calendar__date-stepper-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0 0.75rem;
        background-color: transparent;
        color: var(--color-text-primary);
        border: none;
        border-radius: 0.25rem;
        font-size: var(--form-label-font-size);
        font-family: var(--font-family-system);
        transition: background-color 150ms ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .calendar__date-stepper-btn:focus {
        outline: none;
    }

    .calendar__date-stepper-btn:focus-visible {
        outline: 2px solid var(--color-context-background);
        outline-offset: -2px;
    }

    .calendar__date-stepper-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

    .calendar__date-stepper-icon {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 1.25rem;
        color: inherit;
    }

    /* Today button - fixed width to prevent layout shift */
    .calendar__date-stepper-today {
        min-width: 6.5rem; /* Accommodates longest label (FR: "Aujourd'hui") */
        font-weight: 500;
    }

    /* Date label - left of nav group */
    .calendar__date-stepper-label {
        flex: 1;
        min-width: 0;
        font-size: var(--form-label-font-size);
        font-weight: 500;
        color: var(--color-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

    /* Nav group - keeps <, Today, > together as a unit */
    .calendar__date-stepper-nav {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 0.25rem;
    }
}

/* Date stepper: hover only on devices with mouse (prevents sticky hover on touch) */
@media (max-width: 1023px) and (hover: hover) {
    .calendar__date-stepper-btn:hover {
        background-color: var(--calendar-cell-hover-bg, color-mix(in srgb, var(--color-context-background) 10%, var(--calendar-cell-bg)));
    }
}

/* Date stepper: active state only on devices with mouse */
@media (max-width: 1023px) and (hover: hover) {
    .calendar__date-stepper-btn:active {
        background-color: color-mix(in srgb, var(--color-context-background) 16%, var(--calendar-cell-bg));
    }
}

/* Date stepper: touch feedback via active state (brief, doesn't stick) */
@media (max-width: 1023px) and (hover: none) {
    .calendar__date-stepper-btn:active {
        background-color: color-mix(in srgb, var(--color-context-background) 12%, var(--calendar-cell-bg));
    }
}

/* Extra small mobile: more compact stepper - DISABLED for consistency
@media (max-width: 600px) {
    .calendar__date-stepper {
        height: 3rem;
        padding: 0 1rem;
        gap: 0.25rem;
    }

    .calendar__date-stepper-btn {
        height: 2.25rem;
        min-width: 2.25rem;
        padding: 0 0.75rem;
    }

    .calendar__date-stepper-icon {
        width: 1.125rem;
        height: 1.125rem;
        font-size: 1.125rem;
    }

    .calendar__date-stepper-today {
        min-width: 6.5rem;
    }
}
*/

/* ==========================================================================
   Kompaktwoche View (3-day mobile swipe view)
   ========================================================================== */

/* Kompaktwoche inherits week-view layout via combined class in template.
   Additional positioning context for swipe indicators. */
.calendar__kompaktwoche-view {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Ensure the time grid container fills available space.
   Uses flex-column for sticky header/all-day/time-grid stacking. */
.calendar__kompaktwoche-view .calendar__time-grid-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Kompaktwoche time grid - 3 columns layout */
.calendar__kompaktwoche-view .calendar__time-grid {
    display: flex;
    min-height: 100%;
}

/* Day columns in Kompaktwoche - each takes 1/3 of available space */
.calendar__kompaktwoche-view .calendar__day-column {
    flex: 1 1 33.333%;
    min-width: 0;
}

/* Swipe indicator dots */
.calendar__kompakt-indicator {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, var(--calendar-cell-bg, var(--color-surface-primary)) 60%, transparent);
    pointer-events: none;
    z-index: 5;
}

/* Show indicator only on mobile */
@media (max-width: 1023px) {
    .calendar__kompakt-indicator {
        display: flex;
    }
}

.calendar__kompakt-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-border);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.calendar__kompakt-dot--active {
    background-color: var(--color-context-background);
    transform: scale(1.25);
}

/* Kompaktwoche header - 3 columns */
.calendar__week-header--kompakt {
    display: flex;
    flex-shrink: 0;
    height: var(--calendar-column-header-height);
    align-items: center;
    background-color: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__week-header--kompakt .calendar__week-day-header {
    flex: 1 1 33.333%;
    min-width: 0;
}

/* Kompaktwoche all-day section - 3 columns */
.calendar__kompaktwoche-view .calendar__all-day-section {
    display: flex;
    flex-shrink: 0;
    height: var(--calendar-slot-height, var(--calendar-base-hour-height));
    background-color: var(--calendar-all-day-bg);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__kompaktwoche-view .calendar__all-day-cell {
    flex: 1 1 33.333%;
    min-width: 0;
}

/* ==========================================================================
   iPad / Tablet Touch Devices - iOS Safari Overscroll Prevention
   ========================================================================== */

/* Additional iOS Safari fixes for larger touch devices (iPad Pro, etc.)
 * The pointer:coarse media query targets devices with touch as primary input.
 * These rules reinforce overscroll prevention on tablets where width > mobile breakpoint. */
@media (pointer: coarse) {
    /* Reinforce overscroll prevention on all calendar scroll containers for touch devices */
    .calendar__time-grid-container,
    .calendar__staff-scroll-container,
    .calendar__staffweek-scroll-container {
        /* Block all overscroll effects - prevents iOS rubber-band and pull-to-refresh */
        overscroll-behavior: none;
        /* Ensure iOS momentum scrolling is enabled */
        -webkit-overflow-scrolling: touch;
    }

    /* Main calendar container - prevent any scroll escape */
    .calendar {
        /* Ensure calendar is an isolated scroll boundary */
        overscroll-behavior: none;
        /* Prevent accidental back/forward swipe navigation on iOS Safari */
        touch-action: pan-y pinch-zoom;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .calendar {
        border: 1px solid #000;
    }

    .calendar__day-cell--today .calendar__day-number {
        font-weight: 700;
    }

    .calendar__event {
        border: 1px solid currentColor;
    }
}