/* ============================================================
   Planning Grid — css/grid.css
   PHASE 1 — 2026-03-26
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────── */
.pl-grid-page {
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 13px;
}

/* ── Machine pill bar ───────────────────────────────────── */
.pl-ws-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}
.pl-ws-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(0,0,0,.06);
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.pl-ws-pill:hover {
    background: rgba(0,0,0,.1);
    text-decoration: none;
    color: inherit;
}
.pl-ws-pill-active {
    background: #1e6fa8;
    color: #fff;
    border-color: #1e6fa8;
}
.pl-ws-pill-active:hover {
    background: #175d8e;
    color: #fff;
}
.pl-ws-pill-sub {
    font-weight: 400;
    opacity: .75;
    font-size: 0.9em;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.pl-grid-toolbar {
    margin-bottom: 12px;
}
.pl-grid-toolbar form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pl-grid-toolbar label {
    font-weight: bold;
    font-size: 12px;
    margin-right: 2px;
}
.pl-grid-toolbar select {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #999;
    border-radius: 3px;
}
.pl-grid-badge {
    background: #1f3864;
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

/* ── Outer scroll wrapper ────────────────────────────────── */
.pl-grid-wrap {
    overflow-x: auto;
    max-width: 100%;
    border-left: 1px solid #bbb;
}
/* RMB drag pan */
.pl-grid-wrap.pl-panning,
.pl-grid-wrap.pl-panning * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* ── Col group widths (defined in CSS so @media can override) ── */
.pl-col-info { width: 174px; }

/* ── Table base ──────────────────────────────────────────── */
.pl-grid-table {
    border-collapse: collapse;
    table-layout: auto; /* Job column auto-sizes to content */
    font-size: 12px;
}
.pl-grid-table th,
.pl-grid-table td {
    border: 1px solid #d0d0d0;
    padding: 3px 5px;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Sticky row-header columns ───────────────────────────── */
/* Only Job (left col) is sticky — everything else scrolls with the table */
.pl-grid-row-hdr-job,
.pl-footer-lbl-job,
.pl-grid-row-hdr {
    position: -webkit-sticky; /* iOS Safari */
    position: sticky;
    left: 0;
    background: #f5f5f5;
    z-index: 2;
    /* NOTE: will-change:transform intentionally omitted — it creates a new
       stacking context that breaks border-collapse shared borders */
}
.pl-grid-row-hdr-blank {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f5f5f5;
}
/* Info counterpart of blank — not sticky, scrolls with table */
.pl-grid-row-hdr-blank-info {
    background: #f5f5f5;
}
/* Shadow on right side of Job column — separates sticky zone from scrolling */
.pl-grid-row-hdr-job,
.pl-footer-lbl-job,
.pl-grid-row-hdr-blank,
.pl-grid-mo-ref {
    box-shadow: 3px 0 4px -1px rgba(0,0,0,0.10);
}
.pl-grid-row-hdr-job {
    white-space: nowrap;
}
.pl-grid-row-hdr-info {
    position: static; /* NOT sticky — scrolls with table */
    background: #f5f5f5;
    width: 174px;
    min-width: 174px;
    max-width: 174px;
    white-space: normal;
}
.pl-grid-mo-ref {
    left: 0;
}
.pl-grid-mo-info {
    position: static; /* NOT sticky — scrolls with table */
    background: #f5f5f5;
    width: 174px;
    min-width: 174px;
    max-width: 174px;
}
/* Footer label cells — job portion sticky, info portion scrolls */
.pl-footer-lbl-job {
    white-space: nowrap;
}
.pl-footer-lbl-info {
    background: #f5f5f5; /* inherits per-row color via .pl-footer-* th */
    width: 174px;
    min-width: 174px;
    max-width: 174px;
}

/* ── Week-group header row ───────────────────────────────── */
.pl-grid-week-hdr {
    background: #1f3864;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    padding: 5px 4px;
    border-color: #4472c4;
    transition: opacity 0.05s ease;
}
.pl-grid-week-hdr.pl-updating {
    opacity: 0;
}

/* ── Day header row ──────────────────────────────────────── */
.pl-grid-day-hdr {
    background: #4472c4;
    color: #fff;
    text-align: center;
    font-size: 11px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    padding: 3px 4px;
    border-color: #2e5b9e;
}
.pl-grid-day-hdr small {
    font-size: 10px;
    opacity: 0.85;
}

/* ── Customer group header ───────────────────────────────── */
.pl-grid-cust-hdr td {
    background: #2c3e6b;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 5px 10px;
    letter-spacing: 0.3px;
}
.pl-grid-cust-hdr td small {
    opacity: 0.75;
    margin-left: 6px;
    font-weight: normal;
}

/* ── MO data row ─────────────────────────────────────────── */
.pl-grid-mo-row:hover td,
.pl-grid-mo-row:hover th {
    background-color: #eef4ff;
}
.pl-grid-mo-row.pl-row-late td,
.pl-grid-mo-row.pl-row-late th {
    background-color: #fff8f0;
}
.pl-grid-mo-row.pl-row-late:hover td,
.pl-grid-mo-row.pl-row-late:hover th {
    background-color: #fde9d9;
}
.pl-grid-mo-row.pl-row-late td.pl-cell-filled,
.pl-grid-mo-row.pl-row-late:hover td.pl-cell-filled {
    background: #fde9d9 !important;
    color: #922b21 !important;
}

/* MO ref cell */
.pl-mo-ref {
    color: #1f3864;
    font-weight: bold;
    font-size: 12px;
}
.pl-pn {
    color: #555;
    font-size: 10px;
}

/* Stats badges */
.pl-mo-alias {
    font-weight: bold;
    color: #2c3e6b;
    margin-left: 4px;
}
.pl-mo-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 3px;
}
.pl-mo-stats span {
    background: #e8e8e8;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 10px;
    color: #333;
}
.pl-stat-late {
    background: #fce4d6 !important;
    color: #922b21 !important;
    font-weight: bold;
}
.pl-tool {
    background: #ffd966 !important;
    color: #7d5a00 !important;
    font-weight: bold;
}

/* Progress bar */
.pl-progress {
    position: relative;
    background: #ddd;
    border-radius: 3px;
    height: 11px;
    overflow: hidden;
    min-width: 80px;
}
.pl-progress-bar {
    background: #4caf50;
    height: 100%;
}
.pl-progress-label {
    position: absolute;
    inset: 0;
    font-size: 8px;
    line-height: 11px;
    text-align: center;
    color: #222;
    pointer-events: none;
}

/* ── Day data cells ──────────────────────────────────────── */
.pl-cell {
    text-align: center;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    color: #888;
    font-size: 12px;
    position: relative;
}
.pl-dt-badge {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #880e4f;
    background: #fce4ec;
    border: 1px solid #f06292;
    border-radius: 3px;
    padding: 1px 3px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}
.pl-orig-badge {
    display: none; /* hidden by default; shown when .pl-delta-on is active */
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 3px;
    padding: 1px 3px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    cursor: default;
}
.pl-delta-on .pl-orig-badge {
    display: inline-block;
}
.pl-orig-badge.pl-orig-faster {
    color: #1b5e20;
    background: #e8f5e9;
    border: 1px solid #66bb6a;
}
.pl-orig-badge.pl-orig-slower {
    color: #b71c1c;
    background: #ffebee;
    border: 1px solid #ef9a9a;
}
/* ── Delta gear button ───────────────────────────────────── */
.pl-delta-gear-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    padding: 1px 4px;
    line-height: 1;
    vertical-align: middle;
}
.pl-delta-gear-btn:hover {
    background: #f0f0f0;
    border-color: #ccc;
    color: #333;
}
/* ── Delta visibility modal ──────────────────────────────── */
.pl-delta-modal {
    position: absolute;
    z-index: 9900;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    padding: 0;
    min-width: 210px;
}
.pl-delta-modal-inner {
    padding: 12px 16px 14px;
}
.pl-delta-modal-title {
    font-size: 12px;
    font-weight: 700;
    color: #444;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}
.pl-delta-modal-opt {
    display: block;
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    cursor: pointer;
}
.pl-delta-modal-opt input {
    margin-right: 6px;
    cursor: pointer;
}
.pl-delta-modal-actions {
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 8px;
    display: flex;
    align-items: center;
}
.pl-cell-filled {
    background: #c6efce;
    color: #1e6b2e;
    font-weight: bold;
}

/* ── Footer rows ─────────────────────────────────────────── */
.pl-grid-footer th,
.pl-grid-footer td {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    border-top: 2px solid #aaa;
}

.pl-footer-downtime th,
.pl-footer-downtime td {
    background: #fce4ec;
    color: #880e4f;
    border-top-color: #f06292;
}
.pl-footer-avail th,
.pl-footer-avail td {
    background: #dce6f1;
    color: #1f3864;
}
.pl-footer-planned th,
.pl-footer-planned td {
    background: #e2efda;
    color: #276221;
}
.pl-footer-planned td.pl-has-changeover {
    background: #c6e0b4;
    color: #1e4d0f;
}
.pl-footer-unplanned th,
.pl-footer-unplanned td {
    background: #fff2cc;
    color: #7d5a00;
}
.pl-overloaded {
    background: #ffc7ce !important;
    color: #9c0006 !important;
}
.pl-full {
    background: #c6efce !important;
    color: #276221 !important;
}

/* ── Cell overload (day is over capacity) ────────────────── */
/* Yellow/orange — day total exceeds available hours (warning, not critical) */
/* Red (pl-overloaded) is reserved for the footer row and truly critical states */
.pl-cell-over {
    background: #ffe699 !important;
    color: #7d5a00 !important;
    font-weight: bold;
}

/* ── Cell saving (pending AJAX) ──────────────────────────── */
.pl-cell-saving {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Inline edit input ───────────────────────────────────── */
.pl-cell-input {
    width: 100%;
    max-width: 38px;
    font-size: 12px;
    padding: 1px 2px;
    text-align: center;
    border: 2px solid #4472c4;
    border-radius: 2px;
    box-sizing: border-box;
    background: #fff;
    outline: none;
}

/* ── Weekend toggle buttons ──────────────────────────────── */
.pl-toggle-group {
    display: inline-flex;
    gap: 4px;
    margin: 0 8px;
    vertical-align: middle;
}
.pl-day-toggle {
    padding: 3px 10px;
    font-size: 12px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    color: #555;
}
.pl-day-toggle.active {
    background: #4472c4;
    border-color: #2f5496;
    color: #fff;
    font-weight: bold;
}
.pl-dt-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 12px;
    color: #880e4f;
    cursor: pointer;
    border: 1px solid #f06292;
    border-radius: 3px;
    background: #fce4ec;
    user-select: none;
}
.pl-dt-toggle-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.pl-setup-link {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #fff;
    color: #555;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 6px;
}
.pl-setup-link:hover {
    background: #f0f0f0;
    color: #333;
}

/* ── Weekend column toggle ───────────────────────────────── */
.pl-col-sat,
.pl-col-sun {
    background-color: #dde5f5;
}
.pl-grid-day-hdr.pl-col-sat,
.pl-grid-day-hdr.pl-col-sun {
    background: #6e8dc2;
    border-color: #4f6fa0;
}
.pl-grid-day-hdr.pl-today,
.pl-grid-day-hdr.pl-col-sat.pl-today,
.pl-grid-day-hdr.pl-col-sun.pl-today {
    background: #c0392b;
    border-color: #922b21;
}
.pl-col-sat.pl-hidden,
.pl-col-sun.pl-hidden {
    display: none;
}
/* Server-side initial state — hides columns before JS runs (no FOUC) */
#plGridPage.pl-hide-sat .pl-col-sat:not(col),
#plGridPage.pl-hide-sun .pl-col-sun:not(col) {
    display: none;
}

/* ── Empty state ─────────────────────────────────────────── */
.pl-grid-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-style: italic;
    font-size: 14px;
}

/* ── Drag-and-drop reorder ───────────────────────────────── */
.pl-drag-handle {
    display: inline-block;
    cursor: grab;
    color: #aaa;
    font-size: 16px;
    margin-right: 4px;
    vertical-align: middle;
    user-select: none;
    line-height: 1;
}
.pl-drag-handle:hover {
    color: #555;
}
.pl-drag-handle:active {
    cursor: grabbing;
}
.pl-row-placeholder td {
    background: #eaf4fb;
    border: 2px dashed #3498db;
    height: 36px;
}
.ui-sortable-helper {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0.95;
}

/* ── Completed (locked) MO rows ─────────────────────────────── */
.pl-row-completed {
    opacity: 0.72;
}
.pl-row-completed td.pl-grid-row-hdr {
    background: #f0f7f0;
}
.pl-row-completed .pl-progress-bar {
    background: #27ae60;
}

/* ── Excel-style cell selection ──────────────────────────── */
.pl-cell.pl-cell-selected {
    background: #b3d9ff !important;
    color: #003366 !important;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
}
.pl-cell-filled.pl-cell-selected {
    background: #7bc8f5 !important;
}

/* ── Selection status bar ────────────────────────────────── */
#pl-selection-bar {
    display: none;
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: #1f3864;
    color: #fff;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: bold;
    gap: 24px;
    align-items: center;
    border-top: 2px solid #0078d4;
    user-select: none;
}
#pl-selection-bar.pl-selection-active {
    display: flex;
}
#pl-selection-bar span {
    opacity: 0.85;
}
#pl-selection-bar .pl-sel-value {
    opacity: 1;
    font-size: 14px;
    margin-left: 4px;
}

/* Nav tab colours — base shape (.pl-tab-sm) and all colours defined in board.css */

/* ── Mobile responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    /* Narrow page padding */
    .pl-grid-page {
        padding: 6px 8px;
    }
    /* Force scroll container to viewport width so sticky works */
    .pl-grid-wrap {
        max-width: calc(100vw - 16px);
        overflow-x: auto;
    }
    /* Smaller font + tighter cell padding */
    .pl-grid-table {
        font-size: 11px;
    }
    .pl-grid-table th,
    .pl-grid-table td {
        padding: 2px 3px;
    }
    /* Override col width for Info column only — Job is auto-sized */
    .pl-col-info { width: 110px; }
    /* Narrow Info column (scrolls — not sticky) */
    .pl-grid-row-hdr-info,
    .pl-footer-lbl-info,
    .pl-grid-row-hdr-blank-info,
    .pl-grid-mo-info {
        width:     110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
    }
    /* Narrower day columns (was 48px) */
    .pl-grid-day-hdr,
    .pl-cell {
        width:     36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
    }
    .pl-grid-day-hdr {
        font-size: 10px;
        padding:   2px 2px;
    }
    /* Progress bar — allow narrower */
    .pl-progress {
        min-width: 50px;
    }
    /* Cell inline input */
    .pl-cell-input {
        max-width: 28px;
        font-size: 11px;
    }
}

/* ── Show Changeovers toggle ─────────────────────────────────────────────── */
/* Cells that mark the last day of a MO get a C/O indicator bar at the bottom.
   Only visible when the .pl-show-changeover class is on the table. */
.pl-show-changeover .pl-cell-filled[data-co-mins]::after {
    content:     attr(data-co-mins) 'm';
    display:     block;
    margin-top:  2px;
    padding:     1px 3px;
    background:  #f4b942;
    color:       #4a2e00;
    font-size:   9px;
    font-weight: bold;
    border-radius: 2px;
    text-align:  center;
    white-space: nowrap;
    overflow:    hidden;
    line-height: 1.2;
}
/* If C/O bar overlaps: give the cell a subtle bottom stripe */
.pl-show-changeover .pl-cell-filled[data-co-mins] {
    border-bottom: 3px solid #f4b942;
}