/* ============================================================
   Tent occupation planner (MwTentOccupationPlanner) — mw-to-*
   Embedded vertical scheduler for tent occupancy on the Artist
   Office dashboard. Loaded via Assets["tent-occupation.css"].
   ============================================================ */

.mw-to-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ── Standalone full-page host (TentOccupationPage) — the same component the Artist Office
   dashboard embeds sized by its panel. dvh accounts for mobile browser chrome; 48px = app bar. ── */
.mw-to-page {
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
}

/* ── Corner header (2×2 control grid: drawer toggle + interaction modes) ── */

.mw-to-corner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    width: 100%;
    height: 100%;
    padding: 2px;
    box-sizing: border-box;
}

.mw-to-corner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.mw-to-corner-btn:hover { background: var(--mud-palette-action-default-hover); }

.mw-to-corner-btn .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.mw-to-corner-btn--active-primary   { color: var(--mud-palette-primary); background: var(--mud-palette-action-default-hover); }
.mw-to-corner-btn--active-success   { color: var(--mud-palette-success); background: var(--mud-palette-action-default-hover); }
.mw-to-corner-btn--active-tertiary  { color: var(--mud-palette-tertiary); background: var(--mud-palette-action-default-hover); }
.mw-to-corner-btn--active-error     { color: var(--mud-palette-error); background: var(--mud-palette-action-default-hover); }
.mw-to-corner-btn--active-secondary { color: var(--mud-palette-secondary); background: var(--mud-palette-action-default-hover); }
.mw-to-corner-btn--active-info      { color: var(--mud-palette-info); background: var(--mud-palette-action-default-hover); }

/* ── Scheduler host ── */

.mw-to-scheduler {
    flex: 1;
    min-height: 0;
    /* NOTE: Own stacking context — the scheduler's sticky headers reach z-index 220 internally;
       capping them here keeps the overlay drawer (z-index 20, a sibling) above everything. */
    position: relative;
    z-index: 0;
}

/* Fill chain: scheduler event cell → MWMenu root → activator → occupation block */
.mw-to-scheduler .mw-sc-event > .mw-menu,
.mw-to-scheduler .mw-sc-event .mud-menu-activator {
    width: 100%;
    height: 100%;
}

/* ── Occupation event block ── */

.mw-to-event {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 5px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    background: var(--mw-to-event-bg, var(--mud-palette-primary));
    border-radius: 4px;
    color: var(--mud-palette-primary-text);
    font-size: 0.72rem;
    line-height: 1.25;
}

.mw-to-event-title {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Blocked (reserved) occupation — locked for everyone below Booking.Administrate ── */

.mw-to-event--blocked {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.10) 0 5px,
        transparent 5px 10px
    );
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
    filter: saturate(0.75);
}

.mw-to-event-lock {
    flex: 0 0 auto;
}

.mw-to-event-lock.mud-icon-root {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.mw-to-event-time {
    opacity: 0.85;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.mw-to-event-people {
    font-size: 0.66rem;
    opacity: 0.9;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ── Tent column headers ── */

.mw-to-tent-header {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: pointer;
    border-top: 3px solid var(--mw-to-tent-color, transparent);
}

.mw-to-tent-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── Empty state ── */

.mw-to-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
}

/* ── Person picker (occupation context menu + drawer) ── */

.mw-to-person-picker {
    padding: 6px 8px;
}

/* Fixed width only inside the popover menu — in the drawer it spans the full body. */
.mud-menu-list .mw-to-person-picker { width: 300px; }

.mw-to-person-search { margin-bottom: 4px; }

.mw-to-person-list {
    max-height: 260px;
    overflow-y: auto;
}

/* The drawer body is the scroll container — let the list grow. */
.mw-to-drawer .mw-to-person-list { max-height: none; }

.mw-to-person-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.mw-to-person-row:hover { background: var(--mud-palette-action-default-hover); }

.mw-to-person-row--assigned .mw-to-person-name { font-weight: 600; }

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

.mw-to-artist-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-warning);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 50%, transparent);
    flex: 0 0 auto;
}

.mw-to-artist-badge .mud-icon-root {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

/* ── Person cards (slot stats + expandable slot list, mirroring the shift planner's cards) ── */

.mw-to-person-card {
    border-radius: 4px;
    overflow: hidden;
}

.mw-to-person-stats {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px 1px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.mw-to-person-stats:hover {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

.mw-to-person-slots {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 4px 4px 26px;
}

.mw-to-person-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.mw-to-person-slot:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.mw-to-person-slot-tent {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-to-person-slot-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

/* ── Display settings (drawer "Anzeige" section) ── */

.mw-to-setting-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Overlay drawer (slides in from the left, fully covers the scheduler) ── */

.mw-to-drawer {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
}

.mw-to-drawer--open { transform: none; }

.mw-to-drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.mw-to-drawer-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
}

.mw-to-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
}

.mw-to-drawer-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
}

.mw-to-tent-create {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mw-to-tent-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-to-tent-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8rem;
}

.mw-to-tent-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mw-to-tent-color, var(--mud-palette-primary));
    flex: 0 0 auto;
}

.mw-to-tent-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-to-tent-row-count {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* Drawer person list scrolls with the drawer body (Virtualize uses that ancestor). */
.mw-to-person-list--drawer { max-height: none; }