/* ── Scheduler shell styles ── */
/* Mobile-first; breakpoints promote layout at sm (576px) and md (768px). */

/* ── Page outer wrapper (keyboard handler, no visual impact) ── */

.sched-page-outer {
    outline: none; /* suppress focus ring on the wrapper */
}

/* ── Page layout ──────────────────────────────────────────── */

.sched-board-region {
    margin-top: 1rem;
    /* Allow this grid/flex item to shrink below its content's intrinsic width so the
       By-Employee board's own overflow-x container scrolls, instead of the wide column
       set forcing the 1fr track (and the whole page) to overflow horizontally. */
    min-width: 0;
}

.sched-unscheduled-rail {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .sched-page-layout {
        display: grid;
        grid-template-columns: 1fr 18rem;
        grid-template-rows: auto 1fr;
        gap: 1rem;
        /* Breathing room below the toolbar (the grid's children have their top margins
           zeroed in this layout, so the gap must live on the grid itself). */
        margin-top: 1rem;
    }

    .sched-page-layout .sched-board-region {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
    }

    .sched-page-layout .sched-unscheduled-rail {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
    }
}

/* ── Toolbar ─────────────────────────────────────────────── */

.sched-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

/* Segmented control group */
.sched-toolbar-segment {
    display: inline-flex;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    overflow: hidden;
    flex-shrink: 0;
}

.sched-seg-btn {
    appearance: none;
    background: var(--color-card-bg);
    border: none;
    border-right: 1px solid var(--color-border-input);
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 500;
    min-height: 2.75rem;
    min-width: 3.25rem;
    padding: 0.5rem 0.85rem;
    transition: background 0.12s ease, color 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
}

.sched-seg-btn:last-child {
    border-right: none;
}

.sched-seg-btn:hover:not(.active) {
    background: var(--color-bg);
}

.sched-seg-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}

.sched-seg-btn.active {
    background: var(--color-primary);
    color: #ffffff;
}

/* Period navigation */
.sched-toolbar-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.sched-nav-btn {
    appearance: none;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    color: var(--color-text);
    cursor: pointer;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease;
}

.sched-nav-btn:hover {
    background: var(--color-bg);
}

.sched-nav-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sched-period-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    min-width: 9rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-text);
}

/* Timezone badge */
.sched-tz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.sched-tz-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Violation badge */
.sched-violation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-danger, #dc3545);
    color: #ffffff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* On small screens, hide the text label on icon+label buttons */
@media (max-width: 400px) {
    .sched-btn-label {
        display: none;
    }

    .sched-period-label {
        min-width: 7rem;
        font-size: var(--font-size-xs);
    }
}

/* ── Breadcrumb ────────────────────────────────────────────── */

.sched-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.25rem;
    font-size: var(--font-size-sm);
}

.sched-breadcrumb-item {
    appearance: none;
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: inherit;
    padding: 0.2rem 0.3rem;
    border-radius: var(--radius-sm, 3px);
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sched-breadcrumb-item:hover {
    background: var(--color-bg);
}

.sched-breadcrumb-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sched-breadcrumb-sep {
    color: var(--color-muted);
    user-select: none;
}

.sched-breadcrumb-current {
    font-weight: 600;
    color: var(--color-text);
    padding: 0.2rem 0.3rem;
}

/* ── Schedule card ─────────────────────────────────────────── */

.sched-card {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.08));
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: box-shadow 0.12s ease, transform 0.08s ease;
    user-select: none;
}

.sched-card:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

.sched-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sched-card:last-child {
    margin-bottom: 0;
}

.sched-card-violation {
    border-color: var(--color-danger, #dc3545);
    background: #fff5f5;
}

.sched-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.sched-card-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sched-card-warning {
    color: var(--color-danger, #dc3545);
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}

.sched-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    margin-bottom: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sched-card-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sched-card-hours {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-muted);
    background: var(--color-bg, #f8f9fa);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sched-card-assignments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1;
}

.sched-card-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background: var(--color-primary-light, #e8f0fe);
    color: var(--color-primary, #0d6efd);
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Bucket cell ────────────────────────────────────────────── */

.sched-bucket-cell {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 6px);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sched-bucket-header {
    margin-bottom: 0.6rem;
}

.sched-bucket-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.sched-bucket-label {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.sched-capacity-bar {
    height: 6px;
    background: var(--color-border, #dee2e6);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.sched-capacity-fill {
    height: 100%;
    background: var(--color-success, #198754);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.sched-capacity-fill-over {
    background: var(--color-danger, #dc3545);
}

.sched-capacity-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sched-capacity-text {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}

.sched-overcapacity-badge {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-danger, #dc3545);
    background: #fff5f5;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sched-drill-btn {
    appearance: none;
    background: none;
    border: 1px solid var(--color-border-input, #ced4da);
    border-radius: var(--radius-btn, 4px);
    color: var(--color-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.2rem;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

.sched-drill-btn:hover {
    background: var(--color-bg, #f8f9fa);
    color: var(--color-primary);
}

.sched-drill-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sched-bucket-cards {
    flex: 1;
}

/* ── Board grid (BucketBoard) ─────────────────────────────── */

.sched-board-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .sched-board-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        overflow-x: auto;
    }
}

/* ── Employee board ─────────────────────────────────────────── */

.sched-employee-board {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sched-scroll-hint {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    text-align: right;
    margin: 0;
}

/* Single horizontal scroll container for the whole board: every row shares this one
   scrollbar, so the period columns stay aligned and scroll together. Scroll-snap makes
   columns land flush past the sticky name column instead of stopping mid-card. */
.sched-employee-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
    scroll-padding-left: 10rem;
}

.sched-employee-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    /* Size to full content width so all rows match and move under one scrollbar. */
    width: max-content;
}

.sched-employee-name {
    flex-shrink: 0;
    width: 150px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    padding: 0 0.6rem 0 0.25rem;
    word-break: break-word;
    /* Frozen first column: stays pinned while periods scroll, with a clean right edge so
       cards slide cleanly underneath rather than peeking out half-rendered. */
    position: sticky;
    left: 0;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.sched-employee-cols {
    display: flex;
    gap: 0.75rem;
}

.sched-employee-cols .sched-bucket-cell {
    min-width: 240px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* ── Unscheduled rail content ────────────────────────────── */

.sched-unscheduled-content {
    padding: 0.75rem;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 6px);
}

.sched-rail-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.sched-rail-subheading {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.sched-rail-count {
    margin-bottom: 0.5rem;
}

.sched-unscheduled-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.sched-unscheduled-list li {
    padding: 0.3rem 0;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
}

.sched-unscheduled-list li:last-child {
    border-bottom: none;
}

/* ── Placement interaction (Task 17) ── */
.sched-card-selected {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    background: var(--color-primary-light, #e8f0fe);
}

.sched-drop-armed {
    outline: 2px dashed var(--color-primary);
    outline-offset: 2px;
    background: rgba(59, 91, 219, 0.04);
}

/* Keyboard-accessible drop target inside an armed bucket */
.sched-drop-here-btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    min-height: 2.75rem;
    appearance: none;
    background: rgba(59, 91, 219, 0.06);
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background 0.12s;
}

.sched-drop-here-btn:hover,
.sched-drop-here-btn:focus-visible {
    background: rgba(59, 91, 219, 0.12);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Unscheduled rail (new component) ── */
.sched-rail-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sched-rail-accordion {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sched-rail-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    list-style: none;
    min-height: 2.75rem;
    user-select: none;
}

.sched-rail-summary::-webkit-details-marker {
    display: none;
}

.sched-rail-summary::before {
    content: "▶";
    font-size: 0.7rem;
    color: var(--color-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

details[open] .sched-rail-summary::before {
    transform: rotate(90deg);
}

.sched-rail-badge {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    color: var(--color-muted);
    margin-left: auto;
}

.sched-rail-body {
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--color-border);
}

.sched-rail-empty {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    padding: 0.3rem 0;
    margin: 0;
}

/* ── Placement banner ── */
.sched-placement-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.sched-placement-banner-cancel {
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-btn);
    color: #fff;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    min-height: 2.75rem;
    white-space: nowrap;
    margin-left: auto;
}

.sched-placement-banner-cancel:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sched-placement-banner-cancel:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Mobile: the unscheduled / this-period box is a FIXED bottom sheet so it
   stays on screen while the board scrolls. It scrolls internally if tall, and
   the board reserves bottom space so its last rows aren't hidden behind it. */
@media (max-width: 767px) {
    .sched-unscheduled-rail {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        max-height: 45vh;
        overflow-y: auto;
        margin-top: 0;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Reserve space so the fixed sheet never hides the bottom of the board. */
    .sched-board-region {
        padding-bottom: 47vh;
    }
}

/* ── Phase 3: pointer drag-and-drop ──────────────────────── */

/* Cards are draggable handles; suppress the browser's touch panning on them so a
   press-drag moves the card while a press elsewhere still scrolls the board. */
.sched-card[data-drag-stage] {
    touch-action: none;
}

/* The source card while a drag is in progress. */
.sched-card.dragging {
    opacity: 0.4;
}

/* The floating clone that follows the pointer. */
.sched-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.9;
    box-shadow: var(--shadow-modal);
    transform: translate(-9999px, -9999px);
}

/* The drop target currently under the pointer. */
.sched-drop-hover {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: var(--color-bg);
}