/* ──────────────────────────────────────────────────────────────────────────
   scheduling.css — Plan tab styles
   Uses the app's existing CSS variables (--bg, --surface, --surface2,
   --border, --text, --muted, --accent) so the planner sits naturally in
   the dark theme. Earlier version hard-coded white backgrounds — fixed.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Tab container override — make sure flex works ─────────────────────── */
#scheduleTab {
    background: var(--bg);
}

#sch-main {
    background: var(--bg);
}

/* ── Toolbar ───────────────────────────────────────────────────────────── */
#sch-toolbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text);
}

    #sch-toolbar > div:first-child {
        color: var(--text) !important;
    }

    #sch-toolbar .btn-acc,
    #sch-toolbar .btn-ghost {
        font-size: 11px;
        padding: 3px 8px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex-shrink: 0;
    }

    #sch-toolbar > span[style*="background"] {
        background: var(--border) !important;
    }

#sch-status {
    color: var(--muted) !important;
}

/* ── Empty-state banner ────────────────────────────────────────────────── */
#sch-empty {
    background: var(--bg) !important;
    color: var(--muted) !important;
}

    #sch-empty > div:nth-child(2) {
        color: var(--text) !important;
    }

/* ── Grid (left side) ──────────────────────────────────────────────────── */
#sch-grid-wrap {
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    /* Patch 17: paint faint horizontal lines every 28px so empty rows
       still show a grid (MSP-style). The image is a 2-stop gradient
       cropped at 28px height: transparent 0→27, border-color at 27.5→28.
       Pushed below the sticky 36-px header via background-position-y. */
    background-image: linear-gradient( to bottom, transparent 0, transparent 27px, var(--border) 27px, var(--border) 28px );
    background-size: 100% 28px;
    background-position: 0 36px; /* skip past sticky header */
    background-repeat: repeat-y;
}

#sch-grid {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text);
    /* Fixed table layout: respect declared column widths and the explicit
       28-px row height. Without this, browsers auto-size cells based on
       content (especially bold summary rows), causing rows to drift out of
       sync with the fixed 28-px Gantt rows on the right. */
    table-layout: fixed;
}

/* Patch 17: vertical column separators painted as background lines on
   the grid <table>. These show below the empty tbody area as faint
   vertical lines aligned with the column boundaries. The column-width
   pattern (48/30/280/54/82/82/82/82/46/46/120) is hard-coded to match
   BUILT_IN_COLUMNS — adjust if column defaults change. We only paint
   the first 5 separators (covers what's visible in the default 580-px
   left pane); the rest get drawn by the cell borders when rows exist. */
#sch-grid {
    background-image: linear-gradient(to right, transparent 0, transparent 47px, var(--border) 47px, var(--border) 48px, transparent 48px), linear-gradient(to right, transparent 0, transparent 77px, var(--border) 77px, var(--border) 78px, transparent 78px), linear-gradient(to right, transparent 0, transparent 357px, var(--border) 357px, var(--border) 358px, transparent 358px), linear-gradient(to right, transparent 0, transparent 411px, var(--border) 411px, var(--border) 412px, transparent 412px), linear-gradient(to right, transparent 0, transparent 493px, var(--border) 493px, var(--border) 494px, transparent 494px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    /* Pin the column header row at the top of #sch-grid-wrap so it stays
   visible while you scroll the rows. We declare sticky on both the
   <thead> wrapper and each <th>, since browsers differ in which element
   you can stick on a table. */
    #sch-grid thead {
        position: sticky;
        top: 0;
        z-index: 3;
    }

        #sch-grid thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            height: 36px;
            box-sizing: border-box;
            background: var(--surface2);
            border-bottom: 1px solid var(--border);
            padding: 0 8px;
            text-align: left;
            font-size: 11px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
            vertical-align: middle;
        }

    /* Grid rows are constrained to exactly 28px so they vertically align with
   the Gantt rows (which use a fixed 28-px row height). Content is single-
   line, truncated with ellipsis when too wide. */
    #sch-grid tbody tr {
        height: 28px;
    }

    #sch-grid tbody td {
        height: 28px;
        box-sizing: border-box;
        padding: 0 8px;
        border-bottom: 1px solid var(--border);
        font-size: 12px;
        color: var(--text);
        background: var(--surface);
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 27px; /* (28 - 1px border) = available content area */
    }

    #sch-grid tbody tr:hover td {
        background: var(--surface2);
    }

    #sch-grid tbody tr.sch-selected td {
        background: rgba(79, 142, 247, .15);
    }

    #sch-grid tbody tr.sch-summary td {
        font-weight: 700;
        background: var(--surface2);
        color: var(--text);
    }

    #sch-grid tbody tr.sch-summary:hover td {
        background: rgba(79, 142, 247, .12);
    }

    /* Critical-path tasks: by user request, do NOT color the task name in red.
   The visible critical indicator stays on the right-side "!" column (a red
   bullet rendered in the cell). We add a subtle red left edge to the row so
   critical tasks remain distinguishable without yelling at the user. */
    #sch-grid tbody tr.sch-critical .sch-name-cell {
        /* color override removed */
        box-shadow: inset 2px 0 0 #ef4444;
    }

.sch-name-cell {
    padding-left: var(--sch-indent, 0) !important;
    cursor: pointer;
    user-select: none;
}

.sch-toggle {
    display: inline-block;
    width: 14px;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    font-size: 10px;
    margin-right: 2px;
}

.sch-milestone-icon {
    color: var(--accent);
    margin-right: 4px;
}

.sch-edit:hover {
    outline: 1px dashed var(--accent);
    outline-offset: -1px;
    cursor: text;
}

.sch-edit:focus {
    outline: 1px solid var(--accent);
    background: rgba(79, 142, 247, .10);
    color: var(--text);
}

/* ── Gantt timeline ────────────────────────────────────────────────────── */
#sch-gantt-wrap {
    background: var(--bg) !important;
    /* Patch 17: same 28-px horizontal stripes as the grid side, so the
       empty Gantt area looks like a continuation of the WBS grid. */
    background-image: linear-gradient( to bottom, transparent 0, transparent 27px, var(--border) 27px, var(--border) 28px );
    background-size: 100% 28px;
    background-position: 0 36px;
    background-repeat: repeat-y;
}

.sch-gantt-header {
    position: sticky;
    top: 0;
    height: 36px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    z-index: 3;
    font-variant-numeric: tabular-nums;
}

.sch-gantt-header-cell {
    flex: 0 0 auto;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: var(--muted);
    line-height: 1.2;
    padding: 2px 4px;
}

    .sch-gantt-header-cell.sch-month {
        border-bottom: 1px solid var(--border);
        height: 18px;
        font-weight: 600;
        color: var(--text);
        background: var(--surface);
    }

.sch-gantt-row {
    height: 28px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

    .sch-gantt-row.sch-summary {
        background: rgba(255, 255, 255, .02);
    }

    .sch-gantt-row.sch-selected {
        background: rgba(79, 142, 247, .10);
    }

    .sch-gantt-row .sch-weekend-mark {
        position: absolute;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .25);
        pointer-events: none;
    }

/* ── Task bar (leaf) ───────────────────────────────────────────────────── */
.sch-bar {
    position: absolute;
    top: 6px;
    height: 16px;
    background: linear-gradient(180deg, #5b8cf0 0%, #2563eb 100%);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

    .sch-bar.sch-critical {
        background: linear-gradient(180deg, #ef6b6b 0%, #dc2626 100%);
    }

    /* ── Summary bar — MS-Project-style black bracket with end caps ────────── */
    .sch-bar.sch-summary-bar {
        top: 9px;
        height: 8px;
        background: #111827;
        border: 1px solid #374151;
        border-radius: 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: visible;
        z-index: 2;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    }

        .sch-bar.sch-summary-bar::before,
        .sch-bar.sch-summary-bar::after {
            content: '';
            position: absolute;
            top: 100%;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 6px 5px 0 5px;
            border-color: #111827 transparent transparent transparent;
        }

        .sch-bar.sch-summary-bar::before {
            left: -5px;
        }

        .sch-bar.sch-summary-bar::after {
            right: -5px;
        }

.sch-bar-progress {
    height: 100%;
    background: rgba(0, 0, 0, .40);
}

.sch-bar-label {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6px;
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    pointer-events: none;
}

.sch-milestone {
    position: absolute;
    top: 5px;
    width: 14px;
    height: 14px;
    transform: translateX(-7px) rotate(45deg);
    background: #f59e0b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    cursor: pointer;
    z-index: 2;
}

    .sch-milestone.sch-critical {
        background: #ef4444;
    }

.sch-baseline-bar {
    position: absolute;
    top: 23px;
    height: 4px;
    background: repeating-linear-gradient(45deg, #6b7280, #6b7280 3px, transparent 3px, transparent 6px);
    border-radius: 2px;
    pointer-events: none;
}

.sch-dep-line {
    stroke: var(--muted);
    stroke-width: 1.2;
    fill: none;
    opacity: .8;
}

    .sch-dep-line.sch-critical {
        stroke: #ef4444;
        stroke-width: 1.6;
        opacity: 1;
    }

.sch-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ef4444;
    z-index: 1;
    pointer-events: none;
}

    .sch-today-line::before {
        content: 'Today';
        position: absolute;
        top: 2px;
        left: 3px;
        font-size: 9px;
        color: #ef4444;
        font-weight: 600;
        background: var(--surface);
        padding: 0 3px;
        border-radius: 2px;
    }

/* ── Detail panel (right) ──────────────────────────────────────────────── */
#sch-detail-wrap {
    background: var(--surface) !important;
    border-left: 1px solid var(--border) !important;
}

.sch-detail-section {
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}

    .sch-detail-section:last-child {
        border-bottom: none;
    }

.sch-detail-h {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
}

    .sch-detail-h .sch-mini-btn {
        float: right;
        font-size: 11px;
        text-transform: none;
        letter-spacing: 0;
    }

.sch-detail-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    align-items: center;
}

    .sch-detail-row label {
        flex: 0 0 110px;
        color: var(--muted);
        font-size: 11px;
    }

    .sch-detail-row input,
    .sch-detail-row select,
    .sch-detail-row textarea {
        flex: 1;
        font-size: 12px;
        padding: 5px 7px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface2);
        color: var(--text);
        min-width: 0;
        font-family: inherit;
    }

        .sch-detail-row input:focus,
        .sch-detail-row select:focus,
        .sch-detail-row textarea:focus {
            outline: 1px solid var(--accent);
            border-color: var(--accent);
        }

        .sch-detail-row input[readonly] {
            opacity: .65;
            cursor: default;
        }

.sch-link-row {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 11px;
    background: var(--surface2);
}

.sch-link-num {
    font-weight: 600;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sch-link-cat {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

    .sch-link-cat.sch-cat-i {
        background: #14532d;
        color: #86efac;
    }

    .sch-link-cat.sch-cat-ii {
        background: #14532d;
        color: #86efac;
    }

    .sch-link-cat.sch-cat-iii {
        background: #78350f;
        color: #fcd34d;
    }

    .sch-link-cat.sch-cat-iv {
        background: #7f1d1d;
        color: #fca5a5;
    }

    .sch-link-cat.sch-cat-pending {
        background: #374151;
        color: #d1d5db;
    }

.sch-link-remove {
    cursor: pointer;
    color: var(--muted);
    padding: 0 4px;
}

    .sch-link-remove:hover {
        color: #ef4444;
    }

/* ── Modal — drawing picker / predecessor picker ───────────────────────── */
.sch-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.sch-modal {
    width: 640px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
}

.sch-modal-h {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface2);
}

    .sch-modal-h > h3 {
        flex: 1;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }

    .sch-modal-h input {
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
    }

.sch-modal-body {
    flex: 1;
    overflow: auto;
    padding: 12px 18px;
}

.sch-modal-foot {
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.sch-drawing-pick {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
}

    .sch-drawing-pick:hover {
        background: var(--surface2);
    }

    .sch-drawing-pick input[type=checkbox] {
        flex: 0 0 16px;
    }

    .sch-drawing-pick .sch-drawing-num {
        flex: 0 0 160px;
        font-weight: 600;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sch-drawing-pick .sch-drawing-desc {
        flex: 1;
        color: var(--muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ──────────────────────────────────────────────────────────────────────────
   Plan SETTINGS pane (Settings → Plan)
   ─────────────────────────────────────────────────────────────────────── */
#settingsPlanPane {
    color: var(--text);
    padding: 18px 22px;
    overflow: auto !important;
}

.sch-set-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

    .sch-set-section h4 {
        margin: 0 0 4px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
    }

    .sch-set-section .sch-set-desc {
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 14px;
    }

.sch-set-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

    .sch-set-row label {
        flex: 0 0 180px;
        color: var(--muted);
        font-size: 12px;
    }

    .sch-set-row input,
    .sch-set-row select {
        background: var(--surface2);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 6px 8px;
        font-size: 12px;
        min-width: 200px;
    }

        .sch-set-row input:focus,
        .sch-set-row select:focus {
            outline: 1px solid var(--accent);
            border-color: var(--accent);
        }

.sch-workdays {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sch-workday-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 11px;
    color: var(--muted);
    user-select: none;
    min-width: 38px;
    justify-content: center;
}

    .sch-workday-chip.sch-on {
        background: rgba(79, 142, 247, .15);
        color: var(--text);
        border-color: var(--accent);
    }

.sch-holidays-list {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface2);
    min-height: 60px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

.sch-holiday-chip {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: 12px;
    padding: 3px 4px 3px 10px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .sch-holiday-chip .sch-holiday-x {
        cursor: pointer;
        opacity: .7;
        padding: 0 4px;
    }

        .sch-holiday-chip .sch-holiday-x:hover {
            opacity: 1;
            color: #fca5a5;
        }

.sch-set-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.sch-set-status {
    flex: 1;
    font-size: 11px;
    color: var(--muted);
    align-self: center;
}


/* ──────────────────────────────────────────────────────────────────────────
   PHASE 10b — Round-A/B/C additions
   Styles for: tabbed Task Information panel, column chooser & header menu,
   resource sheet, network diagram, assignment grid, custom fields editor.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Grid header — column menu chevron + "+ add column" cell ───────────── */
#sch-grid thead th .sch-col-title {
    display: inline-block;
    vertical-align: middle;
}

#sch-grid thead th .sch-col-menu {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    color: var(--muted);
    cursor: pointer;
    padding: 0 2px;
    opacity: 0;
    transition: opacity .15s ease;
}

#sch-grid thead th:hover .sch-col-menu {
    opacity: 1;
}

#sch-grid thead th.sch-col-add,
#sch-grid thead .sch-col-add {
    cursor: pointer;
    color: var(--muted);
    font-weight: 700;
}

    #sch-grid thead .sch-col-add:hover {
        color: var(--accent);
        background: var(--surface);
    }

/* Link badge next to task name */
.sch-link-badge {
    display: inline-block;
    background: rgba(14, 165, 233, .18);
    color: #7dd3fc;
    border-radius: 8px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 600;
    margin-left: 4px;
}

/* Resource chip in grid cell */
.sch-resource-chip {
    display: inline-block;
    background: rgba(79, 142, 247, .12);
    border: 1px solid rgba(79, 142, 247, .35);
    border-radius: 10px;
    padding: 0 7px;
    margin-right: 3px;
    font-size: 10px;
    color: var(--text);
    line-height: 16px;
}

/* ── Generic popup menu (right-click on column header) ─────────────────── */
.sch-popup-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    z-index: 5000;
    min-width: 180px;
    padding: 4px 0;
    font-size: 12px;
}

.sch-popup-item {
    padding: 7px 14px;
    cursor: pointer;
    color: var(--text);
    user-select: none;
}

    .sch-popup-item:hover {
        background: var(--surface2);
        color: var(--accent);
    }

.sch-popup-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Column chooser modal rows */
.sch-chooser-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

    .sch-chooser-row:hover {
        background: var(--surface2);
    }

    .sch-chooser-row input[type=checkbox] {
        flex: 0 0 14px;
    }

/* ── Tabbed Task Information panel ─────────────────────────────────────── */
.sch-info-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
}

.sch-info-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sch-info-close {
    cursor: pointer;
    color: var(--muted);
    font-size: 18px;
    padding: 0 6px;
}

    .sch-info-close:hover {
        color: #ef4444;
    }

.sch-info-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin: 0 -16px 12px;
    padding: 0 12px;
    overflow-x: auto;
}

.sch-info-tab {
    flex: 0 0 auto;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 11px;
    color: var(--muted);
    user-select: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

    .sch-info-tab:hover {
        color: var(--text);
    }

    .sch-info-tab.sch-active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }

.sch-info-body {
    flex: 1;
    overflow: auto;
}

.sch-info-foot {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border);
}

/* Resource assignment table inside info panel */
.sch-assign-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .sch-assign-table thead th {
        text-align: left;
        padding: 4px 6px;
        border-bottom: 1px solid var(--border);
        color: var(--muted);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: .04em;
    }

    .sch-assign-table tbody td {
        padding: 5px 6px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
    }

        .sch-assign-table tbody td input {
            background: var(--surface2);
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 2px 4px;
            font-size: 11px;
        }

/* ── View toggle buttons (Gantt / Resources / Network) ─────────────────── */
.sch-view-btn.sch-active {
    background: rgba(79, 142, 247, .18) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* ── RESOURCE SHEET view ───────────────────────────────────────────────── */
#sch-res-sheet {
    color: var(--text);
}

.sch-rs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    font-size: 12px;
}

    .sch-rs-table thead th {
        text-align: left;
        padding: 8px 10px;
        background: var(--surface2);
        color: var(--muted);
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: .04em;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
    }

    .sch-rs-table tbody td {
        padding: 6px 10px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
    }

    .sch-rs-table tbody tr:last-child td {
        border-bottom: none;
    }

    .sch-rs-table tbody tr:hover td {
        background: var(--surface2);
    }

    .sch-rs-table input,
    .sch-rs-table select {
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 3px;
        padding: 3px 6px;
        font-size: 11px;
        font-family: inherit;
    }

.sch-origin-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
}

    .sch-origin-badge.sch-tenant {
        background: rgba(139, 92, 246, .18);
        color: #c4b5fd;
    }

    .sch-origin-badge.sch-project {
        background: rgba(79, 142, 247, .18);
        color: #93c5fd;
    }

    .sch-origin-badge.sch-promoted {
        background: rgba(245, 158, 11, .18);
        color: #fcd34d;
    }

/* ── NETWORK DIAGRAM view ──────────────────────────────────────────────── */
#sch-network {
    color: var(--text);
}

.sch-net-svg {
    display: block;
}

.sch-net-box rect {
    fill: var(--surface);
    stroke: var(--border);
    stroke-width: 1;
}

.sch-net-box:hover rect {
    stroke: var(--accent);
    stroke-width: 1.5;
    cursor: pointer;
}

.sch-net-box.sch-critical rect {
    fill: rgba(127, 29, 29, .35);
    stroke: #ef4444;
    stroke-width: 1.5;
}

.sch-net-id {
    fill: var(--accent);
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
}

.sch-net-name {
    fill: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.sch-net-date {
    fill: var(--muted);
    font-size: 10px;
    font-family: monospace;
}

.sch-net-dur {
    fill: var(--text);
    font-size: 11px;
    font-weight: 600;
}

.sch-net-arrow {
    stroke: var(--muted);
    stroke-width: 1.2;
    fill: none;
    opacity: .75;
}

    .sch-net-arrow.sch-critical {
        stroke: #ef4444;
        stroke-width: 1.8;
        opacity: 1;
    }

/* ── CUSTOM FIELDS editor (in Plan Settings) ───────────────────────────── */
.sch-cf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    margin-top: 6px;
}

    .sch-cf-table thead th {
        text-align: left;
        padding: 6px 10px;
        color: var(--muted);
        font-size: 10px;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border);
        font-weight: 600;
    }

    .sch-cf-table tbody td {
        padding: 5px 10px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
    }

    .sch-cf-table tbody tr:last-child td {
        border-bottom: none;
    }

    .sch-cf-table input,
    .sch-cf-table select {
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 3px;
        padding: 3px 6px;
        font-size: 11px;
        font-family: inherit;
        width: 100%;
    }

    .sch-cf-table code {
        color: var(--accent);
        font-size: 11px;
    }

/* Plan Settings inputs — small */
#settingsPlanPane input,
#settingsPlanPane select {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   Round 4 additions — zoom, move, baseline select, %-complete drag handle
   ─────────────────────────────────────────────────────────────────────── */

/* Drag handle on the right edge of leaf Gantt bars (for setting %) */
.sch-bar:not(.sch-summary-bar) .sch-pct-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 100%);
    cursor: ew-resize;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    opacity: 0;
    transition: opacity .12s ease;
}

.sch-bar:not(.sch-summary-bar):hover .sch-pct-handle {
    opacity: 1;
}

/* Toolbar zoom buttons and label */
#sch-zoom-label {
    font-variant-numeric: tabular-nums;
    user-select: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   Round 5 — splitter, cursor-zoom hint, dock manager
   ─────────────────────────────────────────────────────────────────────── */

/* ── Splitter between grid and Gantt ───────────────────────────────────── */
#sch-splitter {
    flex: 0 0 8px;
    background: var(--border);
    cursor: col-resize;
    position: relative;
    transition: background .12s ease;
    z-index: 1;
}

    #sch-splitter:hover,
    body.sch-splitter-dragging #sch-splitter {
        background: var(--accent);
    }

.sch-splitter-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 40px;
    background: var(--text);
    border-radius: 2px;
    opacity: .5;
    pointer-events: none;
}

#sch-splitter:hover .sch-splitter-grip {
    opacity: 1;
    background: var(--bg);
}

body.sch-splitter-dragging {
    cursor: col-resize !important;
    user-select: none;
}

/* ── Detail panel dock bar (collapse + dock-right + dock-bottom buttons) ─ */
#sch-detail-bar {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 8px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.sch-dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
    user-select: none;
}

    .sch-dock-btn:hover {
        background: var(--surface);
        color: var(--text);
    }

    .sch-dock-btn.sch-active {
        background: rgba(79,142,247,.15);
        color: var(--accent);
    }

/* Bottom-dock layout — header bar runs across the top of the panel */
#sch-detail-wrap.sch-dock-bottom-mode {
    flex-direction: column;
}

    #sch-detail-wrap.sch-dock-bottom-mode #sch-detail-bar {
        border-bottom: 1px solid var(--border);
        border-top: none;
    }

/* ── Collapsed strip ───────────────────────────────────────────────────── */
#sch-detail-collapsed {
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
    user-select: none;
    background: var(--surface);
    flex: 1;
}

    #sch-detail-collapsed:hover {
        background: var(--surface2);
        color: var(--text);
    }
/* When docked right + collapsed → vertical strip, label rotated. */
#sch-detail-wrap.sch-dock-collapsed-right #sch-detail-bar {
    flex-direction: column;
    flex: 0 0 32px;
    height: 100%;
    border-bottom: none;
    border-left: 1px solid var(--border);
    padding: 8px 4px;
    justify-content: flex-start;
}

#sch-detail-wrap.sch-dock-collapsed-right #sch-detail-collapsed {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 12px 4px;
    letter-spacing: .02em;
}
/* When docked bottom + collapsed → 32px-tall strip, label horizontal. */
#sch-detail-wrap.sch-dock-collapsed-bottom #sch-detail-collapsed {
    height: 32px;
    padding: 0 12px;
}

/* When the detail panel is docked to the right (default), the bar sits at
   the TOP of the panel, content below. */
#sch-detail-wrap:not(.sch-dock-bottom-mode):not(.sch-dock-collapsed-right) {
    flex-direction: column;
}

/* Right-click context menu — danger variant (Delete) */
.sch-popup-item.sch-popup-danger {
    color: #ef4444;
}

    .sch-popup-item.sch-popup-danger:hover {
        background: rgba(239, 68, 68, .12);
        color: #fca5a5;
    }

/* Ensure context menu sits above the Gantt and detail panels */
.sch-popup-menu {
    z-index: 10000;
}

/* ──────────────────────────────────────────────────────────────────────────
   Round 9 — column resize handle + text wrap
   ─────────────────────────────────────────────────────────────────────── */

/* Resize handle on each column header — sits on the right edge.
   Always shows a subtle 1-px divider so users can find it; expands to a
   wider accent-color strip on hover so they know it's draggable.
   Note: we do NOT set position:relative here because the earlier rule
   sets position:sticky, which itself establishes a positioning context
   for the absolute resize handle. Overriding it would break the sticky
   header. */
/* Resize handle on each column header — sits on the right edge.
   Wider than the original 5-6 px so it's easy to grab. Shows an always-
   visible 1-px divider line on the right; the inner part is transparent
   so it doesn't visually crowd the column label. Hover turns the whole
   strip accent-color. */
.sch-col-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    background: linear-gradient(to right, transparent 0%, transparent 70%, var(--border) 70%, var(--border) 80%, transparent 80%, transparent 100%);
    transition: background .12s ease;
    z-index: 5;
}

    .sch-col-resize:hover,
    body.sch-splitter-dragging .sch-col-resize {
        background: var(--accent);
    }

/* Grid and Gantt are separate scroll containers, synced via JS so they
   scroll together vertically. To avoid showing two vertical scrollbars,
   we hide ALL scrollbars on the grid-wrap (both vertical and horizontal)
   via scrollbar-width:none + ::-webkit-scrollbar zero-size. The grid still
   scrolls programmatically (the JS scroll-sync mirrors the Gantt-side
   scrollTop into it) and via mouse wheel (which fires the scroll event
   that triggers our sync). For horizontal scrolling on the grid, users
   can Shift+Wheel or use a trackpad. Most setups have the grid fitting
   in view without horizontal scrolling. */
#sch-grid-wrap {
    scrollbar-width: none; /* Firefox — hides both axes */
    -ms-overflow-style: none; /* IE/legacy Edge */
}

    #sch-grid-wrap::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
        background: transparent;
    }

#sch-grid tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

    #sch-grid tbody td .sch-edit {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

/* Headers stay single-line and ellipsis when too narrow */
#sch-grid thead th .sch-col-title {
    display: inline-block;
    max-width: calc(100% - 26px); /* leave space for the menu chevron */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Hide grid's vertical scrollbar — Gantt-side scrollbar handles both via
   wireScrollSync. The grid container still scrolls programmatically and
   accepts wheel events, just without the visible scrollbar.
   Horizontal scrollbar remains visible on the grid (since horizontal scroll
   is independent per side).
   We achieve "hide V only" by giving the grid a wider scrollbar-gutter on
   the H axis and zero-width track on the V axis via the WebKit-pseudo. */
#sch-grid-wrap {
    /* Firefox */
    scrollbar-width: thin;
}

    #sch-grid-wrap::-webkit-scrollbar:vertical {
        width: 0;
        background: transparent;
    }

    #sch-grid-wrap::-webkit-scrollbar-thumb:vertical {
        background: transparent;
    }

/* ──────────────────────────────────────────────────────────────────────────
   Round 12 — drawing-link chips in the Drawings column
   ─────────────────────────────────────────────────────────────────────── */
.sch-dwg-chip {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 3px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    background: var(--surface2);
    color: var(--muted);
    border: 1px solid var(--border);
    line-height: 16px;
    vertical-align: middle;
    white-space: nowrap;
}

    .sch-dwg-chip.sch-dwg-ok {
        background: rgba(34,197,94,.18);
        color: #86efac;
        border-color: rgba(34,197,94,.4);
    }

    .sch-dwg-chip.sch-dwg-warn {
        background: rgba(245,158,11,.18);
        color: #fbbf24;
        border-color: rgba(245,158,11,.4);
    }

    .sch-dwg-chip.sch-dwg-pending {
        background: rgba(79,142,247,.18);
        color: #93c5fd;
        border-color: rgba(79,142,247,.4);
    }
/* ─────────────────────────────────────────────────────────────────────────
 * scheduling.css — Patch 26 additions (multi-select + bulk delete)
 *
 * Append to wwwroot/css/scheduling.css. New rules only — no existing rules
 * are modified or replaced. Provides styling for the multi-select checkbox
 * column and the toolbar bulk-delete button group.
 *
 * Colour values match the existing palette: --accent (rgba(79,142,247,*))
 * for selection blue, --muted for secondary text, --border for separators.
 * The existing #sch-grid tbody tr.sch-selected td rule (line 150) already
 * paints the selected-row background — these additions DON'T touch that.
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Leading checkbox column ──────────────────────────────────────────────
   Narrow, centered, low visual weight. The cell itself is the click target
   (input is tabindex=-1) so Tab doesn't land on every row's checkbox —
   keyboard nav stays on cell content, not checkboxes. */
#sch-grid thead th.sch-cb-head,
#sch-grid tbody td.sch-cb-cell {
    width: 28px !important;
    min-width: 28px;
    max-width: 28px;
    padding: 0 !important;
    text-align: center !important;
    cursor: pointer;
    user-select: none;
}

#sch-grid thead th.sch-cb-head {
    /* Match the existing th borders / background — don't fight the theme */
    background: inherit;
    border-right: 1px solid var(--border);
}

#sch-grid .sch-cb-cell input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
    /* Slightly larger hit area without changing layout */
    transform: scale(1.05);
}


/* ── Toolbar selection group ──────────────────────────────────────────────
   Injected next to #sch-status by ensureSelectionToolbar() in scheduling.js.
   Styling matches the existing toolbar buttons (btn-ghost) — same height,
   same border treatment — so it visually belongs in the toolbar row. */

#sch-sel-badge {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent) !important;
    font-size: 11px;
    padding: 0 4px;
}

/* Delete button — neutral by default, red accent on hover. We intentionally
   don't paint it red at rest because that turns the toolbar into a warning
   sign even when nothing's selected. */
#sch-sel-delete {
    color: var(--text);
}
#sch-sel-delete:not(:disabled):hover {
    background-color: rgba(220, 38, 38, .12) !important;
    border-color: rgba(220, 38, 38, .5) !important;
    color: #f87171 !important;  /* red-400 — readable on the dark surface */
}
#sch-sel-delete:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Wipe-all (reset) button — muted at rest, amber on hover. Less alarming
   than red (it has a two-step confirm), but still flags as a destructive op. */
#sch-sel-wipe {
    color: var(--muted) !important;
    margin-left: 4px;
}
#sch-sel-wipe:hover {
    background-color: rgba(245, 158, 11, .10) !important;
    color: #fbbf24 !important;  /* amber-400 */
    border-color: rgba(245, 158, 11, .4) !important;
}