/* =============================================================================
   Scheduler CSS - Global Stylesheet
   Migrated from Blazor CSS isolation to use prefixed class names (mw-sc-*)
   ============================================================================= */

/* =============================================================================
   Section 1: Scheduler Base Styles
   ============================================================================= */

/* Root container */
.mw-sc-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* =============================================================================
   Section 2: Scheduler Component Styles
   (Grid, events, headers, cells, etc.)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   2.1 Current Time Indicator (MWSchedulerCurrentTimeIndicator)
   ----------------------------------------------------------------------------- */

.mw-sc-current-time-indicator {
    position: relative;
    pointer-events: none;
    z-index: 200;
}

/* Vertical mode - horizontal line */
.mw-sc-current-time-indicator.mw-sc-vertical {
    border-top: 2px solid var(--mud-palette-error, #f44336);
    height: 0;
}

/* Horizontal mode - vertical line */
.mw-sc-current-time-indicator.mw-sc-horizontal {
    border-left: 2px solid var(--mud-palette-error, #f44336);
    width: 0;
}

/* Time label */
.mw-sc-time-label {
    position: absolute;
    background: var(--mud-palette-error, #f44336);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: auto;
}

/* Time label positioning - vertical mode */
.mw-sc-current-time-indicator.mw-sc-vertical .mw-sc-time-label {
    top: -12px;
    left: 8px;
}

/* Time label positioning - horizontal mode */
.mw-sc-current-time-indicator.mw-sc-horizontal .mw-sc-time-label {
    top: 8px;
    left: -30px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* -----------------------------------------------------------------------------
   2.2 Resource Column (MWSchedulerResourceColumn) - Vertical Mode
   ----------------------------------------------------------------------------- */

/* Resource Header */
/* NOTE: CSS custom properties set by MWSchedulerComposer in composed mode:
   --composition-header-height: sticky top offset (standalone: 0)
   --resource-header-height: explicit height (standalone: falls back to --slot-height)
   --resource-header-z-index: z-index (standalone: 200, composed: 200) */
.mw-sc-resource-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--resource-header-height, var(--slot-height, 60px));
    background: var(--mud-palette-primary, #4a90e2);
    color: var(--mud-palette-primary-text, white);
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    top: var(--composition-header-height, 0px);
    z-index: var(--resource-header-z-index, 200);
    text-align: center;
}

/* Vertical mode: constrain resource header height to grid row height */
.mw-sc-grid.mw-sc-vertical .mw-sc-resource-header {
    height: var(--resource-header-row-height, 48px);
    overflow: hidden;
}

/* Resource header state modifiers */
.mw-sc-resource-header.mw-sc-drag-target {
    /* Styles for when resource is a valid drag target */
}

.mw-sc-resource-header.mw-sc-selected {
    /* Styles for selected resource */
}

.mw-sc-resource-header.mw-sc-hovered {
    /* Styles for hovered resource */
}

/* -----------------------------------------------------------------------------
   2.3 Resource Row (MWSchedulerResourceRow) - Horizontal Mode
   ----------------------------------------------------------------------------- */

/* Resource Row Header */
/* NOTE: 'left' offset is set via inline style to account for group header columns */
/* NOTE: 'background' is set via inline style using GetResolvedColor() */
.mw-sc-resource-row-header {
    --group-border-color: rgba(0, 0, 0, 0.5);
    color: var(--mud-palette-primary-text, white);
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-left: 2px solid var(--group-border-color);
    position: sticky;
    /* left: set via inline style based on column position */
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* First leaf in group: top border + top-left border radius */
.mw-sc-resource-row-header.mw-sc-first-in-group {
    border-top: 2px solid var(--group-border-color);
    border-top-left-radius: 4px;
}

/* Last leaf in group: bottom border + bottom-left border radius */
.mw-sc-resource-row-header.mw-sc-last-in-group {
    border-bottom: 2px solid var(--group-border-color);
    border-bottom-left-radius: 4px;
}

/* Resource row header state modifiers */
.mw-sc-resource-row-header.mw-sc-drag-target {
    /* Styles for when resource is a valid drag target */
}

.mw-sc-resource-row-header.mw-sc-selected {
    /* Styles for selected resource */
}

.mw-sc-resource-row-header.mw-sc-hovered {
    /* Styles for hovered resource */
}

/* -----------------------------------------------------------------------------
   2.4 Date Column (MWSchedulerDateColumn) - Vertical Mode
   ----------------------------------------------------------------------------- */

/* Date Header */
.mw-sc-date-header {
    background: var(--mud-palette-primary, #4a90e2);
    color: var(--mud-palette-primary-text, white);
    padding: 4px;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 210;
    min-width: var(--date-column-width, 24px);
}

/* Date Cells - Spanning multiple time slots */
/* NOTE: Day boundary is marked by a thicker bottom border (end of each day) */
.mw-sc-date-cell {
    background: var(--mud-palette-surface, #fafafa);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-bottom: 2px solid var(--mud-palette-text-secondary, #888);
    position: sticky;
    left: 0;
    z-index: 201;
    overflow: visible;
    min-width: var(--date-column-width, 24px);
}

/* NOTE: position:absolute with top controlled by JS for sticky behavior */
.mw-sc-date-cell-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
}

/* NOTE: Weekday name (e.g., "Saturday") - matches horizontal styling */
.mw-sc-date-weekday {
    font-weight: 700;
    color: var(--mud-palette-text-secondary, #666);
    font-size: 15px;
    text-transform: none;
}

/* NOTE: Day number (e.g., "24.07.2025") - matches horizontal styling */
.mw-sc-date-day {
    font-weight: 700;
    color: var(--mud-palette-text-secondary, #666);
    font-size: 15px;
}

/* -----------------------------------------------------------------------------
   2.5 Time Column (MWSchedulerTimeColumn) - Vertical Mode
   ----------------------------------------------------------------------------- */

/* Time Header */
.mw-sc-time-header {
    background: var(--mud-palette-primary, #4a90e2);
    color: var(--mud-palette-primary-text, white);
    padding: 8px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 205;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Time Slots - matches horizontal styling */
.mw-sc-time-slot {
    padding: 4px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--mud-palette-text-secondary, #666);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    background: var(--mud-palette-surface, #fafafa);
    position: sticky;
    left: var(--date-column-width, 24px);
    z-index: 201;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   2.6 Date Row (MWSchedulerDateRow) - Horizontal Mode
   ----------------------------------------------------------------------------- */

/* Corner Header */
.mw-sc-corner-header {
    background: var(--mud-palette-surface, #424242);
    color: var(--mud-palette-text-primary, white);
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 220;
}

/* Date Cells - Horizontal spanning */
/* NOTE: Each date cell spans all time slots for that day */
/* NOTE: Day boundary is marked by a thicker right border (end of each day) */
.mw-sc-date-cell-horizontal {
    background: var(--mud-palette-surface, #fafafa);
    padding: 4px 12px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 2px solid var(--mud-palette-text-secondary, #888);
    position: sticky;
    top: 0;
    z-index: 205;
    overflow: visible;
}

/* NOTE: Content container for horizontal date display */
/* NOTE: position:absolute with left controlled by JS for sticky behavior */
.mw-sc-date-cell-content-horizontal {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    background: var(--mud-palette-surface, #fafafa);
    padding: 2px 6px;
}

/* -----------------------------------------------------------------------------
   2.6.1 Day Boundary Borders
   ----------------------------------------------------------------------------- */

/* NOTE: Day boundary marks the END of each day (transition to next day).
   Applied as a thicker border on the last slot of each day.
   Applied via .mw-sc-day-boundary class based on MidnightIndicatorSpan setting. */

/* Vertical mode - thicker bottom border on last slot of day */
.mw-sc-day-boundary {
    border-bottom: 2px solid var(--mud-palette-text-secondary, #888) !important;
}

/* Horizontal mode - thicker right border on last slot of day */
.mw-sc-day-boundary-horizontal {
    border-right: 2px solid var(--mud-palette-text-secondary, #888) !important;
}

/* -----------------------------------------------------------------------------
   2.7 Time Row (MWSchedulerTimeRow) - Horizontal Mode
   ----------------------------------------------------------------------------- */

/* Resource Column Header */
.mw-sc-resource-column-header {
    background: var(--mud-palette-primary, #4a90e2);
    color: var(--mud-palette-primary-text, white);
    padding: 8px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    left: 0;
    z-index: 205;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Time Slots - Horizontal */
/* NOTE: --time-slot-sticky-top is set per-element via inline style based on whether date row is visible */
.mw-sc-time-slot-horizontal {
    padding: 4px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--mud-palette-text-secondary, #666);
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    background: var(--mud-palette-surface, #fafafa);
    position: sticky;
    top: var(--time-slot-sticky-top, 0px);
    z-index: 201;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--slot-width, 60px);
}

/* -----------------------------------------------------------------------------
   2.8 Group Header (MWSchedulerGroupHeader) - Vertical Mode
   ----------------------------------------------------------------------------- */

.mw-sc-group-header {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-primary-text, white);
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 200;
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
    overflow: hidden;
}

.mw-sc-group-header.mw-sc-default-template {
    padding: 8px 12px;
}

.mw-sc-group-header:hover {
    filter: brightness(1.1);
}

.mw-sc-group-header.mw-sc-collapsed {
    opacity: 0.8;
}

.mw-sc-group-header.mw-sc-collapsed:hover {
    filter: brightness(1.1);
}

/* Orphan warning styling */
.mw-sc-group-header.mw-sc-orphan {
    background: var(--mud-palette-warning-lighten, #fff8e1) !important;
    color: var(--mud-palette-text-primary, #212121);
    border-left: 3px solid var(--mud-palette-warning, #ff9800);
}

.mw-sc-group-collapse-button {
    flex-shrink: 0;
}

.mw-sc-group-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-sc-group-count {
    flex-shrink: 0;
    font-size: 0.85em;
    opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   2.9 Group Row (MWSchedulerGroupRow) - Horizontal Mode
   ----------------------------------------------------------------------------- */

/* Group Event Row Header - full height row for groups with events */
/* NOTE: Background color is set via inline style using GetResolvedColor() */
.mw-sc-group-event-row-header {
    color: var(--mud-palette-primary-text, white);
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-left: 4px solid var(--group-color, var(--mud-palette-primary));
    position: sticky;
    left: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mw-sc-group-event-row-header.mw-sc-default-template {
    padding: 8px 12px;
}

.mw-sc-group-event-row-header:hover {
    filter: brightness(1.1);
}

.mw-sc-group-event-row-header.mw-sc-collapsed {
    opacity: 0.8;
}

.mw-sc-group-event-row-header.mw-sc-orphan {
    background: var(--mud-palette-warning-lighten, #fff8e1) !important;
    color: var(--mud-palette-text-primary, #212121);
    border-left-color: var(--mud-palette-warning, #ff9800);
}

.mw-sc-group-event-row-header .mw-sc-group-collapse-button {
    flex-shrink: 0;
}

.mw-sc-group-event-row-header .mw-sc-group-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-sc-group-event-row-header .mw-sc-group-count {
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Group Resource Separator - thin colored bar separating groups from children */
/* Height is controlled by HorizontalModeGroupSeparatorHeightPixels via grid-template-rows */
/* NOTE: overflow must be visible (not hidden) for sticky children to work */
.mw-sc-group-resource-separator {
    margin-top: 2px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    cursor: pointer;
    /* Background color is set via inline style using GetResolvedColor() */
}

.mw-sc-group-resource-separator:hover {
    filter: brightness(1.1);
}

/* Sticky content wrapper for separator - sticks to left when scrolling */
.mw-sc-group-resource-separator .mw-sc-separator-content {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 4px;
    height: 100%;
    width: fit-content;
    background: var(--group-color);
}

/* Chevron icon in separator - hidden by default, shown on hover or when collapsed */
.mw-sc-group-resource-separator .mw-sc-separator-chevron {
    flex-shrink: 0;
    color: var(--mud-palette-primary-text, white);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mw-sc-group-resource-separator:hover .mw-sc-separator-chevron {
    opacity: 0.7;
}

/* Collapsed state - always show chevron */
.mw-sc-group-resource-separator.mw-sc-collapsed .mw-sc-separator-chevron {
    opacity: 1;
}

/* Group name in separator - only visible when collapsed */
.mw-sc-group-resource-separator .mw-sc-separator-group-name {
    color: var(--mud-palette-primary-text, white);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 2px;
    min-width: 0;
    max-width: 150px;
}

/* Orphan separator styling */
.mw-sc-group-resource-separator.mw-sc-orphan {
    background: var(--mud-palette-warning, #ff9800) !important;
}

.mw-sc-group-resource-separator.mw-sc-orphan .mw-sc-separator-content {
    background: var(--mud-palette-warning, #ff9800);
}

.mw-sc-group-resource-separator.mw-sc-orphan .mw-sc-separator-group-name,
.mw-sc-group-resource-separator.mw-sc-orphan .mw-sc-separator-chevron {
    color: var(--mud-palette-text-primary, #212121);
}

/* Vertical mode separator overrides (column-based) */
.mw-sc-group-resource-separator.mw-sc-vertical {
    margin-top: 0;
    border-bottom: none;
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    overflow: visible;
}

/* Vertical separator content - sticky at top when scrolling (mirrors horizontal left: 0 pattern) */
.mw-sc-group-resource-separator.mw-sc-vertical .mw-sc-separator-content {
    position: sticky;
    top: 0;
    left: auto;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    width: 100%;
    height: fit-content;
    background: var(--group-color);
}

/* Vertical chevron - constrain to column width */
.mw-sc-group-resource-separator.mw-sc-vertical .mw-sc-separator-chevron {
    font-size: 16px !important;
    width: 100%;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Vertical collapsed separator - group name with rotated text */
.mw-sc-group-resource-separator.mw-sc-vertical .mw-sc-separator-group-name {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin-left: 0;
    margin-top: 4px;
    max-width: none;
    font-size: 11px;
}

/* Group Event Area cells */
.mw-sc-group-event-area {
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    background: var(--mud-palette-surface, #fafafa);
}

.mw-sc-group-event-area.mw-sc-drag-active {
    background: rgba(74, 144, 226, 0.08);
    border: 1px dashed var(--mud-palette-primary, #4a90e2);
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   2.10 Vertical View (MWSchedulerVerticalView)
   ----------------------------------------------------------------------------- */

/* Calendar Grid Layout - Vertical Mode */
/* NOTE: grid-template-columns is set via inline style by MWSchedulerVerticalView.GridStyle
   to support separator columns between groups (explicit column list with thin separator widths). */
.mw-sc-grid.mw-sc-vertical {
    display: grid;
    /* Header rows (1 for flat, 2+ for hierarchical) + slot rows */
    grid-template-rows: repeat(var(--header-row-count, 1), var(--resource-header-row-height, auto)) repeat(var(--slot-count), var(--slot-height));
    gap: 0;
    border: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: relative;
    /* Prevent text selection while dragging */
    user-select: none;
    -webkit-user-select: none;
}

/* Events header (when no resources) */
.mw-sc-events-header {
    background: var(--mud-palette-primary, #4a90e2);
    color: var(--mud-palette-primary-text, white);
    padding: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 200;
}

/* Vertical Resize Handles */
.mw-sc-resize-handle.mw-sc-top {
    top: 4px;
}

.mw-sc-resize-handle.mw-sc-bottom {
    bottom: 4px;
}

/* -----------------------------------------------------------------------------
   2.11 Horizontal View (MWSchedulerHorizontalView)
   ----------------------------------------------------------------------------- */

/* Calendar Grid Layout - Horizontal Mode */
.mw-sc-grid.mw-sc-horizontal {
    display: grid;
    /* date column + header columns (group columns with group width + leaf column with leaf width) + time slot columns */
    /* NOTE: --header-columns-template is computed by BuildHeaderColumnsTemplate() to support
       different widths for group columns vs leaf column. Falls back to uniform if not provided. */
    grid-template-columns:
        var(--date-column-width, 24px)
        var(--header-columns-template, repeat(var(--header-column-count, 1), var(--resource-header-column-width, 120px)))
        repeat(var(--slot-count), var(--slot-width, 60px));
    /* date row + time row + resource rows (variable heights for minimal group rows) */
    /* NOTE: --grid-template-rows is computed by BuildGridTemplateRows() to support
       variable row heights (10px for minimal group rows, standard for others).
       Falls back to uniform heights if variable not provided. */
    grid-template-rows: var(--grid-template-rows,
        var(--date-row-height, auto)
        var(--time-row-height, auto)
        repeat(var(--resource-count), var(--resource-row-height, 60px)));
    gap: 0;
    border: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: relative;
    /* Prevent text selection while dragging */
    user-select: none;
    -webkit-user-select: none;
}

/* Event Area (Background cells) */
.mw-sc-event-area {
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    background: var(--mud-palette-surface, #fafafa);
}

/* Event Area (Horizontal mode) */
.mw-sc-grid.mw-sc-horizontal .mw-sc-event-area {
    min-width: var(--slot-width, 60px);
}

/* Events in horizontal mode */
.mw-sc-grid.mw-sc-horizontal .mw-sc-event {
    flex-direction: row;
    align-items: center;
    padding: 4px 8px;
    min-height: 40px;
}

.mw-sc-grid.mw-sc-horizontal .mw-sc-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

.mw-sc-grid.mw-sc-horizontal .mw-sc-event-time {
    white-space: nowrap;
    font-size: 10px;
    opacity: 0.8;
}

/* Events with templates in horizontal mode need to stretch children to fill height */
.mw-sc-grid.mw-sc-horizontal .mw-sc-event.mw-sc-has-template {
    padding: 0;
    align-items: stretch;
}

/* Group Headers - Horizontal Mode (row-spanning) */
/* NOTE: 'left' offset is set via inline style to support nested groups at different columns */
/* NOTE: 'margin-top' is set via inline style (separator height + 2px) */
/* NOTE: Background color is set via inline style using GetResolvedColor() */
/* NOTE: No writing-mode applied - templates control their own text orientation */
.mw-sc-group-header-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-primary-text, white);
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    /* left: set via inline style based on column position */
    z-index: 200;
    overflow: hidden;
}

.mw-sc-group-header-horizontal.mw-sc-collapsed {
    opacity: 0.8;
}

.mw-sc-group-header-horizontal.mw-sc-orphan {
    background: var(--mud-palette-warning-lighten, #fff8e1);
    border-left: 3px solid var(--mud-palette-warning, #ff9800);
}

/* Default template styles - only apply to default template elements */
.mw-sc-group-header-horizontal .mw-sc-group-collapse-button {
    flex-shrink: 0;
}

.mw-sc-group-header-horizontal .mw-sc-group-name {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-sc-group-header-horizontal .mw-sc-group-count {
    font-size: 11px;
    opacity: 0.7;
    writing-mode: vertical-rl;
    flex-shrink: 0;
}

/* =============================================================================
   Section 3: Scheduler State Modifiers
   (selected, dragging, collapsed, etc.)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   3.1 Resource State Classes
   ----------------------------------------------------------------------------- */

/* Highlight when resource is drag target */
.mw-sc-resource-header.mw-sc-drag-target,
.mw-sc-resource-row-header.mw-sc-drag-target {
    background: var(--mud-palette-primary-darken, #3a7bc8);
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary-lighten, #e3f2fd);
}

/* Selected resource */
.mw-sc-resource-header.mw-sc-selected,
.mw-sc-resource-row-header.mw-sc-selected {
    background: var(--mud-palette-secondary, #9c27b0);
}

/* Hovered resource */
.mw-sc-resource-header.mw-sc-hovered,
.mw-sc-resource-row-header.mw-sc-hovered {
    background: var(--mud-palette-primary-lighten, #5fa8f5);
}

/* -----------------------------------------------------------------------------
   3.2 Event Area States
   ----------------------------------------------------------------------------- */

/* Visual indicator for allowed drop zones */
.mw-sc-event-area.mw-sc-drag-active {
    background: rgba(74, 144, 226, 0.08);
    border: 1px dashed var(--mud-palette-primary, #4a90e2);
    box-sizing: border-box;
}

.mw-sc-event-area.mw-sc-drag-disabled {
    background: rgba(0, 0, 0, 0.03);
    opacity: 0.5;
}

/* Hour boundary marker */
.mw-sc-event-area.mw-sc-hour-boundary {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Cross-scheduler drag: incompatible resource type */
.mw-sc-event-area.mw-sc-cross-drag-incompatible {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(244, 67, 54, 0.06) 10px,
        rgba(244, 67, 54, 0.06) 20px
    );
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   3.3 Event Styles
   ----------------------------------------------------------------------------- */

.mw-sc-event {
    position: relative;
    background: var(--mud-palette-primary, #4a90e2);
    color: var(--mud-palette-primary-text, white);
    border-radius: 4px;
    margin: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1;
    cursor: pointer;
    overflow: hidden;
    /* Prevent text selection during drag */
    user-select: none;
    -webkit-user-select: none;
    /* Touch action for better touch handling */
    touch-action: none;
}

/* NOTE: When EventTemplate is used, it handles its own background and padding */
.mw-sc-event.mw-sc-has-template {
    background: transparent;
    padding: 0;
}

/* Hover overlay effect */
.mw-sc-event::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    border-radius: 4px;
    pointer-events: none;
    transition: background 0.2s ease;
    z-index: 1;
}

.mw-sc-event:hover::before {
    background: rgba(255, 255, 255, 0.15);
}

.mw-sc-event:hover {
    z-index: 2;
}

.mw-sc-event.mw-sc-readonly {
    background: var(--mud-palette-grey-lighter, #ccc);
    color: var(--mud-palette-text-disabled, #999);
    cursor: not-allowed;
}

.mw-sc-event.mw-sc-readonly:hover::before {
    background: transparent;
}

/* Drag States */
.mw-sc-event.mw-sc-can-move {
    cursor: grab;
}

.mw-sc-event.mw-sc-dragging {
    cursor: grabbing;
    z-index: 100;
}

.mw-sc-event.mw-sc-drag-source {
    opacity: 0.4;
    z-index: 99;
}

.mw-sc-event.mw-sc-resizing {
    z-index: 100;
}

/* Suppress hover effects and resize handles on other events during drag/resize.
   Uses :has() to detect when any event in the grid is being dragged or resized. */
.mw-sc-grid:has(.mw-sc-dragging) .mw-sc-event:not(.mw-sc-drag-source):hover::before,
.mw-sc-grid:has(.mw-sc-resizing) .mw-sc-event:not(.mw-sc-resizing):hover::before {
    background: transparent;
}

.mw-sc-grid:has(.mw-sc-dragging) .mw-sc-event:not(.mw-sc-drag-source):hover,
.mw-sc-grid:has(.mw-sc-resizing) .mw-sc-event:not(.mw-sc-resizing):hover {
    z-index: 1;
}

.mw-sc-grid:has(.mw-sc-dragging) .mw-sc-event:not(.mw-sc-drag-source) .mw-sc-resize-handle,
.mw-sc-grid:has(.mw-sc-resizing) .mw-sc-event:not(.mw-sc-resizing) .mw-sc-resize-handle {
    display: none !important;
}

/* Event Content */
.mw-sc-event-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
}

.mw-sc-event-time {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 4px;
}

/* NOTE: Focus outline removed - was causing unpredictable blue highlights on click */
.mw-sc-event:focus {
    outline: none;
}

/* Selected State - used for keyboard navigation focus */
.mw-sc-event.mw-sc-selected {
    outline: 3px solid var(--mud-palette-primary-darken, #3a7bc8);
    outline-offset: 2px;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.mw-sc-event.mw-sc-selected::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    pointer-events: none;
}

/* Highlighted State - used for intentional highlighting via menu */
.mw-sc-event.mw-sc-highlighted {
    outline: 3px solid var(--mud-palette-warning, #ff9800);
    outline-offset: 2px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
    animation: mw-sc-highlight-pulse 1.5s ease-in-out infinite;
}

.mw-sc-event.mw-sc-highlighted::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 152, 0, 0.1);
    border-radius: 4px;
    pointer-events: none;
}

@keyframes mw-sc-highlight-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(255, 152, 0, 0.7); }
}

/* Dark Overlay - dims shifts that are not available (occupied by others) */
.mw-sc-event:has(.mw-shift-dark-overlay)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    pointer-events: none;
    border-radius: 4px;
}

/* Event Color Variants */
.mw-sc-event.mw-sc-blue { background: #4a90e2; }
.mw-sc-event.mw-sc-green { background: var(--mud-palette-success, #52c41a); }
.mw-sc-event.mw-sc-orange { background: var(--mud-palette-warning, #fa8c16); }
.mw-sc-event.mw-sc-purple { background: #722ed1; }
.mw-sc-event.mw-sc-red { background: var(--mud-palette-error, #f5222d); }

/* -----------------------------------------------------------------------------
   3.4 Resize Handles
   ----------------------------------------------------------------------------- */

.mw-sc-resize-handle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
    touch-action: none;
}

.mw-sc-event:hover .mw-sc-resize-handle,
.mw-sc-event.mw-sc-resizing .mw-sc-resize-handle {
    opacity: 1;
}

/* NOTE: Add padding to shift template content when resize handles are visible (on hover) */
.mw-sc-event:hover .mw-shift-template-horizontal.has-resize-handles,
.mw-sc-event.mw-sc-resizing .mw-shift-template-horizontal.has-resize-handles {
    padding: 0 24px;
}

.mw-sc-event:hover .mw-shift-template-vertical.has-resize-handles,
.mw-sc-event.mw-sc-resizing .mw-shift-template-vertical.has-resize-handles {
    padding: 24px 0;
}

/* Font Awesome icon for resize handle */
.mw-sc-resize-handle::after {
    content: "\f090";
    font-family: "Font Awesome 5 Free", serif;
    font-weight: 900;
    position: absolute;
    left: 50%;
    top: 50%;
    color: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    pointer-events: none;
}

/* Vertical mode resize handles (top/bottom) */
.mw-sc-resize-handle.mw-sc-top,
.mw-sc-resize-handle.mw-sc-bottom {
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 16px;
    cursor: ns-resize;
}

.mw-sc-resize-handle.mw-sc-top {
    top: 4px;
}

.mw-sc-resize-handle.mw-sc-bottom {
    bottom: 4px;
}

.mw-sc-resize-handle.mw-sc-top::after {
    transform: translate(-50%, -50%) rotate(-90deg);
}

.mw-sc-resize-handle.mw-sc-bottom::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Horizontal mode resize handles (left/right) */
.mw-sc-resize-handle.mw-sc-left,
.mw-sc-resize-handle.mw-sc-right {
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 40px;
    cursor: ew-resize;
}

.mw-sc-resize-handle.mw-sc-left {
    left: 4px;
}

.mw-sc-resize-handle.mw-sc-right {
    right: 4px;
}

.mw-sc-resize-handle.mw-sc-left::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.mw-sc-resize-handle.mw-sc-right::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* -----------------------------------------------------------------------------
   3.5 Preview Elements
   ----------------------------------------------------------------------------- */

/* Drop Preview */
.mw-sc-drop-preview {
    background: var(--mud-palette-primary, #4a90e2);
    opacity: 0.7;
    border: 2px dashed var(--mud-palette-primary-darken, #3a7bc8);
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;
    z-index: 150;
}

.mw-sc-drop-preview.mw-sc-invalid {
    background: var(--mud-palette-error, #f5222d);
    border-color: var(--mud-palette-error-darken, #d91e1e);
}

.mw-sc-drop-preview.mw-sc-forbidden {
    background: var(--mud-palette-error-lighten, #ffccc7);
    border-color: var(--mud-palette-error, #f5222d);
    opacity: 0.5;
}

/* Resize Preview */
.mw-sc-resize-preview {
    background: var(--mud-palette-primary, #4a90e2);
    opacity: 0.8;
    border: 2px solid var(--mud-palette-primary-darken, #3a7bc8);
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;
    z-index: 150;
}

.mw-sc-resize-preview.mw-sc-invalid {
    background: var(--mud-palette-error, #f5222d);
    border-color: var(--mud-palette-error-darken, #d91e1e);
}

/* Create Preview */
.mw-sc-create-preview {
    background: var(--mud-palette-success, #52c41a);
    opacity: 0.7;
    border: 2px dashed var(--mud-palette-success-darken, #3fa00e);
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mw-sc-create-preview.mw-sc-invalid {
    background: var(--mud-palette-error, #f5222d);
    border-color: var(--mud-palette-error-darken, #d91e1e);
}

.mw-sc-create-preview-content {
    color: white;
    font-weight: 600;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mw-sc-create-preview-time {
    opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   3.6 Mode Indicator & Container Styles
   ----------------------------------------------------------------------------- */

/* Container */
.mw-sc-container {
    flex: 1;
    min-height: 0;
    background: white;
    border-radius: 8px;
    /* NOTE: Use dvh (dynamic viewport height) for mobile browsers where 100vh
       doesn't account for address bar. Fallback to vh for older browsers.
       48px = MudAppBar dense height. When Height parameter is provided,
       inline max-height: 100% overrides this. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    /* NOTE: Prevent macOS touchpad gestures from triggering browser back/forward
       navigation when scrolling horizontally at the boundaries */
    overscroll-behavior: contain;
}

.mw-sc-root.mw-sc-mode-active {
    position: relative;
}

.mw-sc-mode-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 12px;
    background: var(--mud-palette-surface, #1f1f1f);
    border: 2px solid var(--mode-color, var(--mud-palette-primary));
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mw-sc-mode-text {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mode-color, var(--mud-palette-primary));
    white-space: nowrap;
}

.mw-sc-mode-close {
    color: var(--mode-color, var(--mud-palette-primary)) !important;
    padding: 4px !important;
}

.mw-sc-mode-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Mode border on container */
.mw-sc-container.mw-sc-mode-border {
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

/* Navigation mode (reduced visual feedback) */
.mw-sc-root.mw-sc-mode-navigation .mw-sc-event {
    cursor: default;
}

.mw-sc-root.mw-sc-mode-navigation .mw-sc-event::before {
    display: none;
}

.mw-sc-root.mw-sc-mode-navigation .mw-sc-event:hover {
    transform: none;
    box-shadow: none;
}

.mw-sc-root.mw-sc-mode-navigation .mw-sc-event .mw-sc-resize-handle,
.mw-sc-root.mw-sc-mode-navigation .mw-sc-event:hover .mw-sc-resize-handle {
    display: none;
}

.mw-sc-root.mw-sc-mode-navigation .mw-sc-event-area:hover {
    background: transparent;
}

/* Delete mode (visual feedback) */
.mw-sc-root.mw-sc-mode-deleteclick .mw-sc-event {
    cursor: pointer;
}

.mw-sc-root.mw-sc-mode-deleteclick .mw-sc-event:hover {
    background: var(--mud-palette-error-lighten, rgba(244, 67, 54, 0.3)) !important;
    border-color: var(--mud-palette-error, #f44336);
    transform: scale(1.02);
}

/* Create click mode (visual feedback) */
.mw-sc-root.mw-sc-mode-createclick .mw-sc-event-area {
    cursor: crosshair;
}

/* Create drag mode (visual feedback) */
.mw-sc-root.mw-sc-mode-createdrag .mw-sc-event-area {
    cursor: crosshair;
}

/* -----------------------------------------------------------------------------
   3.7 Virtualization Styles
   ----------------------------------------------------------------------------- */

.mw-sc-scroll-container {
    overflow: auto;
    position: relative;
    /* NOTE: flex: 1 works better than height: 100% in flex column layout */
    flex: 1;
    min-height: 200px;
    width: 100%;
    /* NOTE: Use dvh (dynamic viewport height) for mobile browsers where 100vh
       doesn't account for address bar. Fallback to vh for older browsers.
       48px = MudAppBar dense height. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    /* Optimize scroll performance */
    will-change: scroll-position;
    /* NOTE: Prevent macOS touchpad gestures from triggering browser back/forward
       navigation when scrolling horizontally at the boundaries */
    overscroll-behavior: contain;
    /* NOTE: Background matches event area cells to prevent white flash during scroll */
    background: var(--mud-palette-surface, #fafafa);
}

.mw-sc-virtual-spacer {
    position: relative;
    /* Width/height set via inline style based on total content size */
    /* NOTE: Background ensures unrendered areas match the grid appearance */
    background: var(--mud-palette-surface, #fafafa);
}

.mw-sc-viewport {
    position: sticky;
    top: 0;
    left: 0;
    /* Contains the actual CSS grid */
}

/* =============================================================================
   Section 4: Composer Base Styles (mw-sc-cp-*)
   ============================================================================= */

.mw-sc-cp-root {
    display: grid;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: var(--mud-palette-background);
    border-radius: 4px;
}

/* Vertical mode (Resources as Columns) */
.mw-sc-cp-root.mw-sc-vertical {
    grid-template-columns: var(--date-column-width, 36px) var(--time-column-width, 50px) repeat(var(--resource-count, 1), auto);
    grid-template-rows: auto auto repeat(var(--slot-count, 20), var(--slot-height, 60px));
}

/* Horizontal mode (Resources as Rows) */
.mw-sc-cp-root.mw-sc-horizontal {
    /* NOTE: Column 1 is a 0px date column for compatibility with MWSchedulerDateRow/TimeRow
       which calculate grid offsets assuming: date column + HeaderColumnCount header columns + time slots */
    grid-template-columns:
        0px
        var(--composition-header-column-width, 40px)
        var(--resource-header-column-width, 120px)
        repeat(var(--slot-count), var(--slot-width, 60px));
    /* NOTE: Using fixed height instead of minmax(..., 1fr) for consistent virtualization */
    grid-template-rows:
        var(--date-row-height, auto)
        var(--time-row-height, auto)
        repeat(var(--resource-count), var(--resource-row-height, 60px));
}

/* Corner Header (intersection of date/time and composition/resource headers) */
.mw-sc-cp-corner-header {
    background: var(--mud-palette-surface, #424242);
    color: var(--mud-palette-text-primary, white);
    border-right: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Composition Headers (Row 1, grid items) */
.mw-sc-cp-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--composition-header-height);
    font-weight: 600;
    font-size: 0.8rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 200;
}

.mw-sc-cp-name {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Composition separator - vertical line between compositions */
.mw-sc-cp-separator {
    width: 2px;
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--mud-palette-primary) var(--composition-header-height, 36px),
        var(--mud-palette-primary) calc(100% - 8px),
        transparent 100%);
    z-index: 15;
    pointer-events: none;
    justify-self: start;
}

/* Horizontal mode: composition header (row-spanning, left column) */
.mw-sc-cp-header-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-weight: 600;
    font-size: 0.75rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: sticky;
    left: 0;
    z-index: 200;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Horizontal mode: resource header (column 2, one per resource row) */
.mw-sc-cp-resource-header-horizontal {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    left: var(--composition-header-column-width, 40px);
    z-index: 195;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    min-height: var(--resource-row-height, 60px);
}

/* Horizontal mode: composition separator (horizontal line between compositions) */
.mw-sc-cp-separator-horizontal {
    height: 2px;
    background: linear-gradient(to right,
        var(--mud-palette-primary) 0%,
        var(--mud-palette-primary) calc(100% - 8px),
        transparent 100%);
    z-index: 15;
    pointer-events: none;
}

/* =============================================================================
   Section 5: Composer Overrides (.mw-sc-cp-root .mw-sc-*)
   ============================================================================= */

/* Hide date/time headers from CHILD SCHEDULERS in composed mode (composer provides them).
   NOTE: Using .mw-sc-composed selector to target only child scheduler elements,
   NOT the composer's own date/time columns which are direct children of .mw-sc-cp-root. */
.mw-sc-cp-root .mw-sc-composed .mw-sc-date-header,
.mw-sc-cp-root .mw-sc-composed .mw-sc-time-header,
.mw-sc-cp-root .mw-sc-composed .mw-sc-events-header {
    display: none !important;
}

/* Hide date/time cells from CHILD SCHEDULERS in composed mode.
   NOTE: Uses .mw-sc-composed to ensure only child scheduler cells are hidden,
   while the composer's own MWSchedulerDateColumn/TimeColumn remain visible. */
.mw-sc-cp-root .mw-sc-composed .mw-sc-date-cell,
.mw-sc-cp-root .mw-sc-composed .mw-sc-time-slot {
    display: none !important;
}

/* Event area styling in composer context */
.mw-sc-cp-root .mw-sc-event-area {
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
}

.mw-sc-cp-root .mw-sc-event-area.mw-sc-hour-boundary {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Events styling in composer context */
.mw-sc-cp-root .mw-sc-event {
    margin: 1px 2px;
}

/* Horizontal mode: hide vertical-mode elements from child schedulers */
.mw-sc-cp-root.mw-sc-horizontal .mw-sc-composed .mw-sc-date-header,
.mw-sc-cp-root.mw-sc-horizontal .mw-sc-composed .mw-sc-time-header,
.mw-sc-cp-root.mw-sc-horizontal .mw-sc-composed .mw-sc-events-header {
    display: none !important;
}

/* Horizontal mode: event area styling */
.mw-sc-cp-root.mw-sc-horizontal .mw-sc-event-area {
    background: var(--mud-palette-background);
    border-right: 1px dashed var(--mud-palette-lines-inputs);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-sc-cp-root.mw-sc-horizontal .mw-sc-event-area.mw-sc-hour-boundary {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* =============================================================================
   Section 6: Stage Planner Page Styles (mw-stage-*)
   ============================================================================= */

/* NOTE: Main container fills available viewport height (minus app bar) */
/* Prevents page-level scrolling - scheduler handles its own scrolling */
.mw-stage-container {
    height: calc(100dvh - 48px);
    overflow: hidden;
}

/* NOTE: MudDrawerContainer must fill the container */
.mw-stage-container > .mud-drawer-container {
    height: 100%;
}

/* NOTE: Drawer content should stack at top, not stretch, no horizontal scroll */
.mw-stage-drawer .mud-drawer-content {
    justify-content: flex-start;
    overflow-x: hidden;
}

/* NOTE: Acts list in drawer - scrollable when many acts */
.mw-stage-acts-list {
    max-height: calc(100dvh - 450px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* NOTE: Act card styling for drag and click interactions */
.mw-stage-act-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.mw-stage-act-card:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.mw-stage-act-card.selected {
    background-color: var(--mud-palette-primary-lighten);
    border-color: var(--mud-palette-primary);
}

/* NOTE: Stages list in drawer - scrollable, limited height */
.mw-stage-drawer-list {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 8px;
}

/* NOTE: Stage card styling in drawer */
.mw-stage-drawer-card {
    transition: all 0.2s ease;
    cursor: context-menu;
}

.mw-stage-drawer-card:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.mw-stage-drawer-card.no-resources {
    border-color: var(--mud-palette-warning);
}

/* NOTE: Hover effect for corner header */
.mw-activator-hover {
    display: flex;
    width: 100%;
    height: 100%;
}

.mw-activator-hover:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* NOTE: Override scheduler composition header padding to allow MudMenu to fill entire cell */
.composition-header:has(.mw-stage-header-menu),
.composition-header-horizontal:has(.mw-stage-header-menu) {
    padding: 0;
}