/* ========================================
   Shift Scheduler – CSS
   Follows ScheduleStudio patterns with
   CSS custom properties, grid layout, and
   dark-mode support.
   ======================================== */

/* ── Theme Variables ── */
:root {
    --sh-bg: #ffffff;
    --sh-surface: #f8f9fa;
    --sh-border: #e0e0e0;
    --sh-text: #202124;
    --sh-text-secondary: #5f6368;
    --sh-text-muted: #80868b;
    --sh-primary: #1a73e8;
    --sh-primary-hover: #1765cc;
    --sh-primary-light: rgba(26, 115, 232, 0.08);
    --sh-danger: #d93025;
    --sh-success: #1e8e3e;
    --sh-warning: #f9ab00;
    --sh-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --sh-shadow-md: 0 2px 8px rgba(0,0,0,0.12);
    --sh-shadow-lg: 0 4px 16px rgba(0,0,0,0.16);
    --sh-topbar-bg: #ffffff;
    --sh-topbar-border: #e0e0e0;
    --sh-palette-bg: #ffffff;
    --sh-inspector-bg: #ffffff;
    --sh-grid-bg: #ffffff;
    --sh-grid-line: #e8eaed;
    --sh-grid-half-line: #f1f3f4;
    --sh-today-bg: rgba(26, 115, 232, 0.04);
    --sh-today-header-bg: rgba(26, 115, 232, 0.06);
    --sh-drop-valid-bg: rgba(30, 142, 62, 0.08);
    --sh-drop-invalid-bg: rgba(217, 48, 37, 0.08);
    --sh-selection-border: rgba(26, 115, 232, 0.5);
    --sh-time-label-width: 60px;
    --sh-employee-row-height: 48px;
    --sh-card-radius: 6px;
    --sh-topbar-height: 52px;
}

[data-theme="dark"] {
    --sh-bg: #1e1e1e;
    --sh-surface: #2d2d2d;
    --sh-border: #3e3e3e;
    --sh-text: #e8eaed;
    --sh-text-secondary: #9aa0a6;
    --sh-text-muted: #80868b;
    --sh-primary-light: rgba(138, 180, 248, 0.12);
    --sh-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --sh-shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --sh-shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
    --sh-topbar-bg: #292929;
    --sh-topbar-border: #3e3e3e;
    --sh-palette-bg: #252525;
    --sh-inspector-bg: #252525;
    --sh-grid-bg: #1e1e1e;
    --sh-grid-line: #3e3e3e;
    --sh-grid-half-line: #2d2d2d;
    --sh-today-bg: rgba(138, 180, 248, 0.06);
    --sh-today-header-bg: rgba(138, 180, 248, 0.08);
    --sh-drop-valid-bg: rgba(129, 201, 149, 0.1);
    --sh-drop-invalid-bg: rgba(242, 139, 130, 0.1);
}

/* ── Root Layout ── */
.shift-scheduler {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
    background: var(--sh-bg);
    color: var(--sh-text);
    font-family: 'Google Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ── Tabs ── */
.shift-scheduler-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--sh-border, #e5e5e5);
    padding: 0 16px;
    background: var(--sh-bg-primary, #fff);
}

.sh-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--sh-text-secondary, #666);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
}

.sh-tab:hover {
    color: var(--sh-text-primary, #222);
}

.sh-tab.active {
    color: var(--sh-primary, #007bff);
    border-bottom-color: var(--sh-primary, #007bff);
}

.shift-scheduler.maximized {
    position: fixed;
    inset: 0;
    z-index: 9999;
    height: 100vh;
}

/* ── Top Bar ── */
.shift-scheduler-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--sh-topbar-bg);
    border-bottom: 1px solid var(--sh-topbar-border);
    min-height: var(--sh-topbar-height);
    flex-shrink: 0;
    z-index: 10;
    /* Wrap onto a second row when the controls don't fit. Previously this used
       overflow-x: auto + overflow-y: visible to keep one scrolling row, but the
       CSS spec forces overflow-y to `auto` whenever overflow-x is `auto`, which
       turned the toolbar into a vertical clip box — the "More" and Publish
       dropdown menus opened *inside* it and were invisible. overflow: visible
       lets the menus escape; wrapping keeps every control reachable. */
    flex-wrap: wrap;
    overflow: visible;
}

.shift-scheduler-topbar .topbar-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.shift-scheduler-topbar .topbar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 0 auto;
    flex-wrap: nowrap;
}

.shift-scheduler-topbar .topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Compact, consistent toolbar buttons (less chunky). */
.shift-scheduler-topbar .btn-sm,
.shift-scheduler-topbar .view-toggle .btn {
    padding: 3px 8px;
    font-size: 12px;
    white-space: nowrap;
}

/* View Toggle */
.shift-scheduler-topbar .view-toggle {
    display: flex;
    gap: 2px;
    background: var(--sh-surface);
    border-radius: 6px;
    padding: 2px;
}

.shift-scheduler-topbar .view-toggle .btn {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 4px;
}

/* Nav Arrows */
.shift-scheduler-topbar .nav-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shift-scheduler-topbar .nav-period-label {
    font-size: 13px;
    font-weight: 500;
    min-width: 140px;
    text-align: center;
    white-space: nowrap;
}

/* Zoom Controls */
.shift-scheduler-topbar .zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shift-scheduler-topbar .zoom-level {
    font-size: 11px;
    color: var(--sh-text-muted);
    min-width: 32px;
    text-align: center;
}

/* Draft indicator */
.draft-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(249, 171, 0, 0.1);
    border: 1px solid rgba(249, 171, 0, 0.3);
    border-radius: 20px;
    font-size: 12px;
    color: var(--sh-warning);
    font-weight: 500;
}

.draft-indicator .badge {
    background: var(--sh-warning);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

/* ── Main Layout (three-column) ── */
.shift-scheduler-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Collapsible Palette (Left) */
.sh-palette-wrapper {
    width: 240px;
    min-width: 240px;
    border-right: 1px solid var(--sh-border);
    background: var(--sh-palette-bg);
    transition: width 0.25s ease, min-width 0.25s ease;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.sh-palette-wrapper.collapsed {
    width: 36px;
    min-width: 36px;
}

.sh-palette-toggle {
    position: absolute;
    top: 8px;
    right: 4px;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--sh-text-secondary);
}

.sh-palette-wrapper.collapsed .sh-palette-toggle {
    right: 6px;
}

/* Collapsible Inspector (Right) */
.sh-inspector-wrapper {
    width: 300px;
    min-width: 300px;
    border-left: 1px solid var(--sh-border);
    background: var(--sh-inspector-bg);
    transition: width 0.25s ease, min-width 0.25s ease;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.sh-inspector-wrapper.collapsed {
    width: 36px;
    min-width: 36px;
}

.sh-inspector-toggle {
    position: absolute;
    top: 8px;
    left: 4px;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--sh-text-secondary);
}

.sh-inspector-wrapper.collapsed .sh-inspector-toggle {
    left: 6px;
}

/* Timeline Canvas Wrapper (Center) */
.sh-timeline-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ── Employee Palette ── */
.employee-palette {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 36px;
}

.employee-palette-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sh-text-muted);
    border-bottom: 1px solid var(--sh-border);
}

.employee-palette-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--sh-border);
}

.employee-palette-search input {
    width: 100%;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--sh-border);
    border-radius: 6px;
    background: var(--sh-surface);
    color: var(--sh-text);
}

.employee-palette-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.palette-employee-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: grab;
    user-select: none;
    transition: background 0.15s;
    border-bottom: 1px solid transparent;
}

.palette-employee-card:hover {
    background: var(--sh-primary-light);
}

.palette-employee-card:active {
    cursor: grabbing;
}

.palette-employee-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.palette-employee-info {
    flex: 1;
    min-width: 0;
}

.palette-employee-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sh-text);
}

.palette-employee-role {
    font-size: 11px;
    color: var(--sh-text-muted);
}

.palette-employee-hours {
    font-size: 11px;
    color: var(--sh-text-secondary);
    white-space: nowrap;
}

/* ── Timeline View (Week/Day) ── */
.sh-week-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Day Headers */
.sh-week-header {
    display: grid;
    grid-template-columns: var(--sh-time-label-width) repeat(var(--sh-day-count, 7), 1fr);
    border-bottom: 2px solid var(--sh-border);
    background: var(--sh-surface);
    flex-shrink: 0;
    z-index: 5;
}

.sh-week-header-corner {
    border-right: 1px solid var(--sh-border);
}

.sh-week-header-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-right: 1px solid var(--sh-border);
    font-size: 12px;
}

.sh-week-header-day.today {
    background: var(--sh-today-header-bg);
}

.sh-week-header-day .day-name {
    font-weight: 500;
    color: var(--sh-text-secondary);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.sh-week-header-day.clickable {
    cursor: pointer;
    transition: background 0.15s;
}

.sh-week-header-day.clickable:hover {
    background: var(--sh-primary-light);
}

.sh-week-header-day .day-number {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
}

.sh-week-header-day .day-number.today-circle {
    background: var(--sh-primary);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scrollable Body */
.sh-week-body {
    flex: 1;
    overflow: auto;
    position: relative;
}

.sh-resource-grid {
    display: grid;
    grid-template-columns: var(--sh-time-label-width) repeat(var(--sh-day-count, 7), 1fr);
    position: relative;
    min-height: calc(var(--sh-hour-count, 14) * var(--sh-pixels-per-hour, 60px));
}

/* Time Labels */
.sh-time-labels {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--sh-bg);
    border-right: 1px solid var(--sh-border);
}

.sh-time-label {
    position: absolute;
    right: 8px;
    font-size: 11px;
    color: var(--sh-text-muted);
    transform: translateY(-50%);
    white-space: nowrap;
}

/* Day Columns */
.sh-day-column {
    position: relative;
    border-right: 1px solid var(--sh-border);
    min-height: 100%;
}

.sh-day-column.today {
    background: var(--sh-today-bg);
}

.sh-day-column.drop-valid {
    background: var(--sh-drop-valid-bg);
}

.sh-day-column.drop-invalid {
    background: var(--sh-drop-invalid-bg);
}

/* Hour Grid Lines */
.sh-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sh-grid-line);
}

.sh-half-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sh-grid-half-line);
}

/* ── Shift Card ── */
.shift-card {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: var(--sh-card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
    display: flex;
    z-index: 1;
    box-shadow: var(--sh-shadow-sm);
    min-height: 20px;
}

.shift-card:hover {
    box-shadow: var(--sh-shadow-md);
    z-index: 3;
}

.shift-card.selected {
    outline: 2px solid var(--sh-primary);
    outline-offset: -1px;
    box-shadow: var(--sh-shadow-md);
    z-index: 4;
}

.shift-card.draft {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,0.03) 4px,
        rgba(0,0,0,0.03) 8px
    );
}

/* Color stripe on left */
.shift-card-stripe {
    width: 4px;
    flex-shrink: 0;
}

/* Card content */
.shift-card-body {
    flex: 1;
    padding: 3px 6px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 11px;
}

.shift-card-employee {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shift-card-time {
    font-size: 10px;
    opacity: 0.8;
    white-space: nowrap;
}

.shift-card-badges {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 1px;
}

.shift-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
    line-height: 1.3;
}

.shift-badge.badge-draft {
    background: rgba(249, 171, 0, 0.15);
    color: #b57d00;
}

.shift-badge.badge-oncall {
    background: rgba(103, 58, 183, 0.12);
    color: #673ab7;
}

.shift-badge.badge-training {
    background: rgba(0, 150, 136, 0.12);
    color: #009688;
}

.shift-badge.badge-confirmed {
    background: rgba(30, 142, 62, 0.12);
    color: var(--sh-success);
}

.shift-badge.badge-event {
    background: rgba(26, 115, 232, 0.12);
    color: var(--sh-primary);
}

.shift-badge.badge-warning {
    background: rgba(220, 53, 69, 0.15);
    color: #c62828;
    cursor: help;
}

/* Resize handles */
.shift-card .resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 5;
}

.shift-card .resize-handle.top {
    top: 0;
}

.shift-card .resize-handle.bottom {
    bottom: 0;
}

.shift-card:hover .resize-handle {
    background: rgba(26, 115, 232, 0.2);
}

/* ── Staff Event Card ── */
.staff-event-card {
    border-radius: var(--sh-card-radius);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    background: rgba(155, 89, 182, 0.08);
    border: 1px solid rgba(155, 89, 182, 0.2);
    transition: box-shadow 0.15s;
    min-height: 20px;
}

.staff-event-card:hover {
    box-shadow: var(--sh-shadow-sm);
    background: rgba(155, 89, 182, 0.14);
}

.staff-event-card.selected {
    outline: 2px solid #9b59b6;
    outline-offset: -1px;
}

.staff-event-stripe {
    width: 3px;
    flex-shrink: 0;
}

.staff-event-body {
    flex: 1;
    padding: 2px 6px;
    min-width: 0;
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

.staff-event-icon {
    font-size: 10px;
    line-height: 1.4;
    flex-shrink: 0;
}

.staff-event-content {
    flex: 1;
    min-width: 0;
}

.staff-event-title {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #7b2d8e;
}

[data-theme="dark"] .staff-event-title {
    color: #c49bd4;
}

.staff-event-time {
    font-size: 9px;
    opacity: 0.7;
    white-space: nowrap;
}

.staff-event-attendees {
    font-size: 9px;
    color: var(--sh-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Inspector Panel ── */
.shift-inspector {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 36px;
}

.shift-inspector-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sh-border);
    font-size: 14px;
    font-weight: 600;
}

.shift-inspector-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.shift-inspector-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--sh-text-muted);
    text-align: center;
    padding: 24px;
    gap: 12px;
}

.shift-inspector-empty i {
    font-size: 32px;
    opacity: 0.4;
}

.shift-inspector-empty .hint {
    font-size: 12px;
    line-height: 1.4;
}

.shift-inspector .form-group {
    margin-bottom: 12px;
}

.shift-inspector .form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--sh-text-secondary);
    margin-bottom: 4px;
    display: block;
}

.shift-inspector .form-group input,
.shift-inspector .form-group select,
.shift-inspector .form-group textarea {
    width: 100%;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--sh-border);
    border-radius: 6px;
    background: var(--sh-surface);
    color: var(--sh-text);
}

.shift-inspector-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--sh-border);
    display: flex;
    gap: 8px;
}

/* ── Month Calendar View ── */
.sh-month-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sh-month-header {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare fr track has an implicit auto minimum, so a
       long employee name / role widens its column and knocks the day columns out
       of alignment with the rows below. minmax(0, …) pins every column equal. */
    grid-template-columns: 26px repeat(7, minmax(0, 1fr));
    background: var(--sh-surface);
    border-bottom: 1px solid var(--sh-border);
    flex-shrink: 0;
}

/* Week-navigation rail down the left of the month grid */
.sh-month-weekrail-head {
    border-right: 1px solid var(--sh-border);
}

.sh-month-weekrail {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--sh-border);
    border-bottom: 1px solid var(--sh-border);
    color: var(--sh-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sh-month-weekrail:hover {
    background: var(--sh-primary-light);
    color: var(--sh-primary);
}

.sh-month-cell-day.clickable {
    cursor: pointer;
    border-radius: 4px;
}

.sh-month-cell-day.clickable:hover {
    color: var(--sh-primary);
    text-decoration: underline;
}

.sh-month-header-day {
    text-align: center;
    padding: 10px 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sh-text-secondary);
    border-right: 1px solid var(--sh-border);
}

.sh-month-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sh-month-week {
    display: grid;
    /* minmax(0, 1fr) keeps all 7 day columns equal regardless of cell content —
       see .sh-month-header. A bare 1fr lets a busy day's content widen its track
       and shift the row out of alignment with the others as shifts populate. */
    grid-template-columns: 26px repeat(7, minmax(0, 1fr));
    /* BD-55: taller rows so a day's shifts are visible without inner scroll.
       flex-shrink must stay 0 — a plain `flex: 1` (shrink: 1, basis: 0) lets a
       busy week be squeezed below its content height, so the last shift card and
       the "+N more" link spill out of the cell and overlap the week below.
       `1 0 auto` grows to fill spare space but never compresses past content. */
    flex: 1 0 auto;
    min-height: 160px;
}

.sh-month-cell {
    border-right: 1px solid var(--sh-border);
    border-bottom: 1px solid var(--sh-border);
    padding: 6px;
    /* BD-55: cells grow downward to fit every card stacked, with no inner scrollbar.
       The "+N more" link (capped in ScheduleCalendar) keeps the tallest row bounded,
       and the whole grid row grows together so days stay aligned. */
    min-height: 130px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.15s;
}

.sh-month-cell-content {
    flex: 1;
    min-height: 0;
}

.sh-month-cell:hover {
    background: var(--sh-primary-light);
}

/* Paste mode: every day reads as a drop target. */
.sh-month-cell.paste-target {
    cursor: copy;
}

.sh-month-cell.paste-target:hover {
    background: var(--sh-primary-light);
    box-shadow: inset 0 0 0 2px var(--sh-primary);
}

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

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

.sh-month-cell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.sh-month-cell-day {
    font-size: 15px;
    font-weight: 600;
}

.sh-month-cell.today .sh-month-cell-day {
    background: var(--sh-primary);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.sh-month-cell-count {
    font-size: 11px;
    color: var(--sh-text-muted);
    font-weight: 500;
}

/* Shift bars in month view — content stacks vertically (Name / Role / Hours /
   Assignment) and wraps, so the card grows only as tall as its populated lines. */
.sh-month-shift-bar {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 3px;
    line-height: 1.3;
    background: var(--sh-surface);
    /* BD-55: each shift is individually clickable to open its inspector. */
    cursor: pointer;
}

.sh-month-shift-bar:hover {
    background: var(--sh-primary-light);
}

/* BD-55: position/role label on each month-view shift. */
.sh-month-shift-role {
    color: var(--sh-text-muted);
    font-size: 11px;
    font-style: italic;
    overflow-wrap: anywhere;
}

/* Per-shift assignment chip (e.g. "Room Group A"). */
.sh-month-shift-assign {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    align-self: flex-start;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    overflow-wrap: anywhere;
    background: var(--sh-primary-light);
    color: var(--sh-primary);
}

.sh-month-shift-assign .bi {
    font-size: 9px;
}

/* BD-55: small dot marking an unpublished (draft) shift in the month view. */
.sh-month-shift-bar.draft {
    border: 1px dashed var(--sh-warning, #e0a800);
}

.sh-month-shift-draft {
    flex-shrink: 0;
    color: var(--sh-warning, #e0a800);
    font-size: 14px;
    line-height: 1;
}

.sh-month-shift-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Name row: colour dot + (wrapping) name + optional draft marker. */
.sh-month-shift-name {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-weight: 500;
}

.sh-month-shift-name-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sh-month-shift-time {
    color: var(--sh-text-muted);
    font-size: 11px;
}

.sh-month-overflow {
    font-size: 11px;
    color: var(--sh-primary);
    padding: 2px 6px;
    font-weight: 600;
    cursor: pointer;
}

.sh-month-overflow:hover {
    text-decoration: underline;
}

/* Staff Events in calendar */
.sh-month-event-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 3px;
    background: rgba(155, 89, 182, 0.1);
    border-left: 3px solid #9b59b6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* ── Time-off overlay (toggle) ── */
.sh-month-timeoff-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.sh-month-timeoff-bar.approved {
    background: rgba(231, 76, 60, 0.12);
    border-left: 3px solid #e74c3c;
    color: #c0392b;
}

.sh-month-timeoff-bar.pending {
    background: rgba(243, 156, 18, 0.10);
    border-left: 3px dashed #f39c12;
    color: #b9770e;
}

.sh-month-timeoff-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-month-timeoff-req {
    margin-left: auto;
    font-style: italic;
    opacity: 0.8;
}

.sh-week-timeoff-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.sh-week-timeoff-badge.approved {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

.sh-week-timeoff-badge.pending {
    background: rgba(243, 156, 18, 0.15);
    color: #b9770e;
}

/* ── Day Detail Modal ── */
.sh-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.sh-day-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: var(--sh-bg);
    border: 1px solid var(--sh-border);
    border-radius: 12px;
    box-shadow: var(--sh-shadow-lg);
    width: 560px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Shift inspector as a centered modal (replaces the old right-hand side panel) */
.sh-shift-inspector-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: var(--sh-inspector-bg, var(--sh-bg));
    border: 1px solid var(--sh-border);
    border-radius: 12px;
    box-shadow: var(--sh-shadow-lg);
    width: 380px;
    max-width: 94vw;
    max-height: 86vh;
    overflow-y: auto;
}

.sh-shift-inspector-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    line-height: 1;
    padding: 2px 7px;
}

/* When the inspector is hosted in a modal-body (not the old full-height side
   panel), let it size to its content instead of trying to fill 100% height —
   otherwise the flex:1 body collapses to nothing and the modal looks empty. */
.modal-body .shift-inspector {
    height: auto;
}

.modal-body .shift-inspector-body {
    flex: 0 1 auto;
    overflow-y: visible;
}

/* Keep Save/Publish/Delete pinned to the bottom of the scrolling modal so the
   operator never has to scroll the form to reach them (BD-55 ergonomics). */
.modal-body .shift-inspector-actions {
    position: sticky;
    bottom: 0;
    background: var(--sh-surface, #fff);
    z-index: 2;
}

.sh-day-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sh-border);
    flex-shrink: 0;
}

.sh-day-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.sh-day-detail-section {
    margin-bottom: 20px;
}

.sh-day-detail-section:last-child {
    margin-bottom: 0;
}

.sh-day-detail-event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(155, 89, 182, 0.06);
    border-left: 3px solid #9b59b6;
    margin-bottom: 6px;
}

.sh-day-detail-event-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.sh-day-detail-shift {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.sh-day-detail-shift:hover {
    background: var(--sh-primary-light);
}

.sh-day-detail-shift.selected {
    background: var(--sh-primary-light);
    border-color: var(--sh-primary);
}

.sh-day-detail-shift-stripe {
    width: 4px;
    min-height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Month View Context Menu (legacy, kept for compat) ── */
/* BD-55: right-click menu on a month-view shift card (Edit / Copy / Remove / Cancel).
   Fixed at the cursor with a full-screen backdrop so it isn't clipped by the cell. */
.sh-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.sh-shift-ctx-menu {
    position: fixed;
    z-index: 1091;
    background: var(--sh-bg);
    border: 1px solid var(--sh-border);
    border-radius: 8px;
    box-shadow: var(--sh-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
    min-width: 168px;
    padding: 4px 0;
}

.sh-ctx-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sh-text-secondary);
    border-bottom: 1px solid var(--sh-border);
    margin-bottom: 4px;
}

.sh-ctx-title-time {
    margin-left: auto;
    font-weight: 500;
    color: var(--sh-text-muted);
}

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

.sh-context-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
}

.sh-context-item:hover {
    background: var(--sh-primary-light);
}

.sh-context-item.sh-ctx-danger {
    color: var(--sh-danger, #dc3545);
}

.sh-context-item.sh-ctx-danger:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* BD-55: paste-mode banner shown above the month grid after a shift is copied. */
.sh-paste-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--sh-primary-light);
    border-bottom: 1px solid var(--sh-primary);
    color: var(--sh-text);
    font-size: 13px;
}

.sh-paste-banner-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-paste-banner-text .bi {
    color: var(--sh-primary);
}

.sh-paste-banner-cancel {
    flex-shrink: 0;
    border: 1px solid var(--sh-border);
    background: var(--sh-bg);
    color: var(--sh-text-secondary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sh-paste-banner-cancel:hover {
    background: var(--sh-surface);
    color: var(--sh-text);
}

/* ── Add Shift Popup ── */
.sh-add-shift-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.sh-add-shift-popup {
    position: fixed;
    z-index: 100;
    background: var(--sh-bg);
    border: 1px solid var(--sh-border);
    border-radius: 8px;
    box-shadow: var(--sh-shadow-lg);
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
}

.sh-add-shift-header {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--sh-border);
    color: var(--sh-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sh-add-shift-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
}

.sh-add-shift-item:hover {
    background: var(--sh-primary-light);
}

/* ── Drag Ghost ── */
.sh-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.85;
    transform: translate(-50%, -50%);
    border-radius: var(--sh-card-radius);
    box-shadow: var(--sh-shadow-lg);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: white;
}

/* ── Filter Chips ── */
.sh-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--sh-surface);
    border-bottom: 1px solid var(--sh-border);
    flex-shrink: 0;
}

.sh-filter-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--sh-border);
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.sh-filter-chip:hover {
    background: var(--sh-primary-light);
}

.sh-filter-chip.active {
    background: var(--sh-primary);
    color: white;
    border-color: var(--sh-primary);
}

.sh-filter-chip .chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ── Coverage Summary Bar ── */
.sh-coverage-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    background: var(--sh-surface);
    border-bottom: 1px solid var(--sh-border);
    font-size: 12px;
    flex-shrink: 0;
}

.sh-coverage-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--sh-text-secondary);
}

.sh-coverage-stat strong {
    color: var(--sh-text);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sh-palette-wrapper {
        display: none;
    }
    .sh-inspector-wrapper {
        display: none;
    }
    .shift-scheduler-topbar .topbar-controls {
        overflow-x: auto;
    }
}

/* ═══════════════════════════════════════════════
   TIME KIOSK
   ═══════════════════════════════════════════════ */
.time-kiosk {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--sh-bg, #f5f6fa);
    padding: 24px;
}

.kiosk-panel {
    background: var(--sh-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.kiosk-logo {
    margin-bottom: 32px;
}
.kiosk-logo h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 12px 0 4px;
    color: var(--sh-text, #1a1d23);
}
.kiosk-logo p {
    font-size: 14px;
    margin: 0;
}

/* PIN display */
.kiosk-pin-display {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 24px 0;
}
.kiosk-pin-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--sh-border, #ddd);
    background: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.kiosk-pin-dot.filled {
    background: var(--sh-primary, #2563eb);
    border-color: var(--sh-primary, #2563eb);
}

/* Numpad */
.kiosk-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}
.kiosk-key {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    font-size: 24px;
    font-weight: 600;
    border: 1px solid var(--sh-border, #ddd);
    border-radius: 12px;
    background: var(--sh-card-bg, #fff);
    color: var(--sh-text, #1a1d23);
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
    user-select: none;
}
.kiosk-key:hover:not(:disabled) {
    background: var(--sh-bg-secondary, #f0f1f5);
}
.kiosk-key:active:not(:disabled) {
    transform: scale(0.95);
}
.kiosk-key:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.kiosk-key-clear {
    color: var(--sh-danger, #dc3545);
    font-size: 20px;
}
.kiosk-key-enter {
    background: var(--sh-primary, #2563eb);
    color: #fff;
    border-color: var(--sh-primary, #2563eb);
    font-size: 28px;
}
.kiosk-key-enter:hover:not(:disabled) {
    background: var(--sh-primary-hover, #1d4ed8);
}

/* Clocked-in status panel */
.kiosk-employee-badge {
    margin-bottom: 24px;
}
.kiosk-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 auto 12px;
}
.kiosk-employee-badge h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--sh-text, #1a1d23);
}

.kiosk-clock-info {
    background: var(--sh-bg-secondary, #f0f1f5);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    font-size: 15px;
}
.kiosk-clock-time,
.kiosk-shift-info {
    padding: 4px 0;
    color: var(--sh-text-muted, #6b7280);
}
.kiosk-clock-time i,
.kiosk-shift-info i {
    margin-right: 8px;
    color: var(--sh-primary, #2563eb);
}

.kiosk-action-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 12px;
    margin-top: 16px;
}

/* Broadcasts */
.kiosk-broadcasts {
    text-align: left;
    margin: 20px 0;
}
.kiosk-broadcasts h5 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--sh-text, #1a1d23);
}
.kiosk-broadcasts h5 i {
    color: var(--sh-warning, #f59e0b);
    margin-right: 6px;
}
.kiosk-broadcast-card {
    background: var(--sh-bg-secondary, #f0f1f5);
    border-left: 4px solid var(--sh-primary, #2563eb);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.kiosk-broadcast-content {
    font-size: 14px;
    color: var(--sh-text, #1a1d23);
    margin-bottom: 4px;
}
.kiosk-broadcast-meta {
    font-size: 11px;
    color: var(--sh-text-muted, #6b7280);
}

/* Shift Report */
.kiosk-shift-report {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    background: var(--sh-bg-secondary, #f0f1f5);
    border-radius: 12px;
}
.kiosk-shift-report h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════
   SHIFT NOTES PANEL
   ═══════════════════════════════════════════════ */
.shift-notes-panel {
    padding: 8px 0;
}
.shift-note-item {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--sh-bg-secondary, #f0f1f5);
    border-left: 3px solid var(--sh-border, #ddd);
}
.shift-note-item.broadcast {
    border-left-color: var(--sh-primary, #2563eb);
}
.shift-note-item.report {
    border-left-color: var(--sh-success, #10b981);
}
.shift-note-item.handoff {
    border-left-color: var(--sh-info, #06b6d4);
}
.shift-note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.shift-note-content {
    font-size: 13px;
    color: var(--sh-text, #1a1d23);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════
   KIOSK RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 520px) {
    .kiosk-panel {
        padding: 24px 16px;
    }
    .kiosk-key {
        height: 56px;
        font-size: 20px;
    }
    .kiosk-numpad {
        gap: 8px;
    }
}