/* Schedule view + drag-target tray. Extracted from app.css so this self-
   contained block (~210 lines, scoped to .schedule-* / .sched-*) can be
   loaded independently. The remaining feature-area splits are deferred —
   each one carries its own ordering / specificity risk that needs case-by-
   case review.
*/

/* Schedule drag-target tray — only visible while a task is being dragged.
   The visible "Schedule" button now sits in the create-strip below "+". */
.schedule-tab {
    position: fixed;
    right: 12px;
    top: 200px;
    z-index: 8;
    display: flex;
    align-items: flex-start;
}
.schedule-tab[hidden] { display: none; }
.schedule-tab-toggle.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.schedule-tab-body {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    padding: 8px;
    width: 200px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}
.schedule-tab .day-target {
    padding: 8px 10px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    font-size: 13px;
    cursor: pointer;
}
.schedule-tab .day-target.today { background: #ecfeff; border-color: #a5f3fc; font-weight: 600; }
.schedule-tab .day-target.drop-over { background: #fef3c7; border-style: solid; }
.schedule-tab .day-target .check { display:inline-block; margin-left:6px; color:#065f46; }

/* Schedule */
.schedule-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.seg-btn {
    background: var(--color-surface);
    border: 0;
    padding: 5px 12px;
    font: inherit;
    cursor: pointer;
    color: var(--color-muted);
    border-right: 1px solid var(--color-border);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn[aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-text); }

.sched-range {
    margin-left: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.sched-week-grid {
    display: grid;
    grid-template-columns: 160px repeat(7, minmax(110px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.sched-week-grid .cell {
    background: var(--color-surface);
    padding: 6px;
    min-height: 60px;
    font-size: 12px;
}
.sched-week-grid .cell.head {
    background: #fafaf9;
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
}
.sched-week-grid .cell.row-head {
    background: #fafaf9;
    font-weight: 600;
}

/* New row-wrapped week table (vendors + team members combined) */
.sched-week-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.sched-row {
    display: grid;
    /* Assignee column shrunk now that it shows just the abbreviation. */
    grid-template-columns: 96px repeat(7, minmax(110px, 1fr));
    gap: 1px;
    background: var(--color-border);
}
.sched-row .cell {
    background: var(--color-surface);
    padding: 6px;
    min-height: 60px;
    font-size: 12px;
    cursor: pointer;
}
.sched-row .cell.head {
    background: #fafaf9;
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
    cursor: default;
}
.sched-row .cell.row-head {
    background: #fafaf9;
    font-weight: 600;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sched-row .cell.row-head:active { cursor: grabbing; }
.sched-row .row-handle { color: var(--color-muted); font-weight: bold; letter-spacing: -1px; user-select: none; }
.sched-row .row-icon   { font-size: 14px; line-height: 1; }
.sched-row .row-label  { font-weight: 600; }
.sched-row .row-sub    { color: var(--color-muted); font-size: 11px; font-weight: 400; }
.sched-row.row-dragging { opacity: 0.4; }
.sched-row.row-drop-above { box-shadow: inset 0 3px 0 var(--color-accent); }
.sched-row.row-drop-below { box-shadow: inset 0 -3px 0 var(--color-accent); }
.sched-row-unassigned .cell.row-head { color: var(--color-muted); cursor: default; }
.sched-week-head .cell.row-head, .sched-week-head .cell.head { cursor: default; }
.sched-row-expander {
    background: var(--color-surface);
    padding: 8px;
    text-align: center;
}
.sched-row-expander .btn-secondary { font-size: 12px; padding: 5px 12px; }
.sched-card {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 4px;
    /* Extra right-padding keeps the absolute-positioned status badge
       from overlapping the task-name abbreviation on narrow cells. */
    padding: 4px 22px 4px 6px;
    font-size: 11px;
    margin-bottom: 4px;
    cursor: grab;
    position: relative;
}
.sched-card.has-task-forms {
    padding-left: 28px;
    padding-bottom: 6px;
}
.sched-card:active { cursor: grabbing; }
.sched-card-form-indicator {
    left: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
}
.sched-card-form-indicator .task-form-mini-icon {
    transform: scale(0.84);
}
.sched-card-form-indicator.is-complete::after {
    left: 7px;
    top: 4px;
    width: 4px;
    height: 8px;
}
/* Tiny status pill anchored top-right of the card. Reuses the
   .status-<Name> color classes shipped for the row pill, but
   shrunk to a one-letter chip so it fits the cramped cell. */
.sched-card-status {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0;
    pointer-events: none;
}
.sched-card.is-selected-marker {
    outline: 2px solid var(--color-accent);
    background: #fff;
}
/* Short-description line inside the card. Cell widths are tight, so
   clamp to 2 lines and ellipsize — the full text is in the card's
   title attribute (hover tooltip) and the expanded row below. */
.sched-card-desc {
    color: var(--color-muted);
    font-size: 10px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* Expanded full-width row that appears below a sched-row when its card is selected. */
.sched-row-expanded {
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
    margin: 4px 0 8px;
    padding: 6px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
.sched-row-expanded .task-row {
    margin-bottom: 0;
    box-shadow: none;
    border: 0;
    padding: 6px 8px;
}
.sched-cell-drop.drop-over { background: #fef3c7; }
/* Anchor for the actual-hours badge that sits in the cell's bottom-
   right corner. The badge is appended after the task cards so block
   flow happens normally; pinning it absolute keeps it tucked into
   the corner regardless of card height. */
.sched-cell-drop { position: relative; padding-bottom: 18px; }
.sched-cell-hours {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    line-height: 1.1;
    padding: 1px 5px;
    border-radius: 3px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-weight: 600;
    pointer-events: none;
}

/* Wide dialog (used by the schedule's task-detail modal) */
.dialog.dialog-wide { width: min(95vw, 720px); max-height: 90vh; overflow-y: auto; }

@media (max-width: 390px) {
    .schedule-tab {
        right: 4px;
        max-width: calc(100vw - 8px);
    }
    .schedule-tab-body {
        width: min(172px, calc(100vw - 16px));
        padding: 6px;
    }
    .schedule-tab .day-target {
        padding: 7px 8px;
        font-size: 12px;
        margin-bottom: 5px;
    }
    .sched-week-table,
    .sched-week-grid {
        max-width: 100%;
        overflow-x: auto;
    }
    .sched-row {
        grid-template-columns: 74px repeat(7, minmax(72px, 1fr));
    }
    .sched-row .cell {
        padding: 4px;
        min-height: 52px;
        font-size: 11px;
    }
    .sched-row .row-label,
    .sched-row .row-sub {
        overflow-wrap: anywhere;
    }
    .sched-card {
        padding: 3px 18px 3px 5px;
        font-size: 10px;
    }
}

.sched-day-list { display: flex; flex-direction: column; gap: 6px; }
.sched-day-list .day-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
}
.sched-day-list .day-head { font-weight: 600; margin-bottom: 4px; }

.sched-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.sched-month-grid .cell {
    background: var(--color-surface);
    padding: 6px;
    min-height: 80px;
    font-size: 12px;
}
.sched-month-grid .cell.dim { background: #fafaf9; color: var(--color-muted); }
.sched-month-grid .cell.head { background: #fafaf9; text-align: center; font-weight: 600; min-height: 0; }
.sched-month-grid .day-num { font-weight: 600; font-size: 11px; color: var(--color-muted); margin-bottom: 4px; }
.sched-month-grid .month-task { font-size: 11px; padding: 2px 4px; background: #ecfeff; border-radius: 3px; margin-bottom: 2px; cursor: pointer; }