/* Weekly Planning — the area-lane matrix of the H&P Planning module.
   Rows are activity types split AM and PM, columns are the days of the
   window, cells hold player-name chips. An Area Lead plans a lane, not a
   squad. wp- is the module prefix. */

.wp-container {
    padding: 0;
}

/* ── The lane matrix ──
   Its own table rather than .player-table: the rows are activities, not
   players, so the squad grid's name and position bands do not apply. */

/* The matrix fills the page: the day columns share the remaining width,
   each held above a minimum so a long window grows past the wrapper and
   scrolls instead of crushing its columns. */
.wp-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
}

.wp-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--table-header-band);
    padding: 6px 10px;
    background: var(--surface-raised);
    border-bottom: 2px solid var(--ink-line-strong);
    color: var(--text-primary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
}

.wp-matrix thead th.wp-lane-head {
    width: 214px;
    min-width: 214px;
    text-align: left;
}

.wp-matrix thead th.wp-slot-head {
    width: 48px;
    min-width: 48px;
}

.wp-matrix thead th.wp-day {
    min-width: 118px;
    border-left: 1px solid var(--ink-line);
}

.wp-day-code {
    display: block;
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 750;
}

.wp-day-match {
    color: var(--accent);
}

.wp-day-date {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.wp-day-fixture {
    display: block;
    color: var(--accent);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wp-matrix td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--ink-line);
    vertical-align: top;
}

.wp-matrix tbody tr:hover td {
    background: var(--ink-wash);
}

.wp-lane-label {
    width: 214px;
    background: var(--ink-zebra);
    vertical-align: middle;
}

.wp-lane-label strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 650;
}

.wp-lane-label span {
    display: block;
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wp-slot {
    width: 48px;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-align: center;
    vertical-align: middle;
}

.wp-cell {
    min-width: 118px;
    border-left: 1px solid var(--ink-line);
    text-align: left;
    cursor: pointer;
}

.wp-cell.is-editing {
    background: var(--ink-wash-strong);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.wp-matrix tfoot td {
    padding: 8px 10px;
    background: var(--surface-raised);
    border-top: 2px solid var(--ink-line-strong);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.wp-matrix tfoot td.wp-foot-label {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

/* ── The chips ── */

.wp-chip {
    display: inline-block;
    margin: 0 3px 3px 0;
    padding: 2px 8px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: var(--ink-wash);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.wp-chip:hover {
    border-color: var(--accent);
}

/* A draft is a plan under construction: present, and visibly not yet the
   plan of record. */
.wp-chip-draft {
    border-style: dashed;
    background: transparent;
    color: var(--text-secondary);
}

.wp-chip-done {
    border-color: transparent;
    background: var(--accent-soft);
}

/* Every cell reveals an add target on hover and on focus — including the
   cells that already hold chips, so a lane and a day can take a second
   player without leaving the grid. */
.wp-add {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: transparent;
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
}

.wp-cell:hover .wp-add,
.wp-add:focus-visible {
    border-color: var(--ink-line-strong);
    color: var(--text-tertiary);
}

.wp-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── The legend ── */

/* The shared legend-bar disclosure under the table, like the board's. */
.wp-legend-bar .wp-chip {
    cursor: default;
    margin: 0;
}

.wp-drafts {
    margin-right: 4px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.wp-drafts b {
    color: var(--text-primary);
    font-weight: 750;
}

/* ── Toolbar controls ──
   One button stating the resolved window; every choice lives in its
   popover, so the toolbar holds a single control. */

.wp-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wp-window {
    position: relative;
}

/* Placement, surface and plane come from the shared .hp-pop fixed layer;
   the module adds only its width and internal grid. */
.wp-window-panel {
    min-width: 360px;
    display: grid;
    gap: 12px;
}

.wp-window-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wp-window-label {
    min-width: 56px;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

/* Layout only — the controls keep their shared classes untouched. */
.wp-window-row select,
.wp-window-row .hub-date-trigger {
    flex: 1;
    min-width: 0;
}

.wp-window-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
    border-top: 1px solid var(--ink-line);
}


/* ── The cell editor ──
   A popover anchored beside its cell, not the shared modal: at twenty-three
   lane rows a modal covering the matrix loses the context being planned
   against. It is placed by placeEditor(), which keeps it clear of the cell
   it is editing and of the row's label band. */

.wp-pop {
    position: fixed;
    z-index: 200;
    width: 300px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.wp-pop-head {
    padding: 12px 14px 11px;
    border-bottom: 1px solid var(--ink-line);
}

.wp-pop-head strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.wp-pop-head span {
    display: block;
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wp-pop-body {
    padding: 12px 14px;
}

.wp-field {
    display: grid;
    min-width: 0;
    margin-bottom: 10px;
}

.wp-field:last-child {
    margin-bottom: 0;
}

/* Grid items default to min-width auto: a select with a long option would
   otherwise run past the 300px popover edge. The closed select ellipsizes;
   the open list still shows every option in full. */
.wp-field > * {
    min-width: 0;
}

.wp-field > span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wp-pop-hint {
    padding: 9px 14px;
    border-top: 1px solid var(--ink-line);
    background: var(--surface-raised);
    color: var(--text-tertiary);
    font-size: 0.69rem;
    line-height: 1.5;
}

.wp-pop-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--ink-line);
}

.wp-pop-spacer {
    flex: 1;
}

/* ── The review modal ── */

.wp-editor-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ink-line);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.wp-editor-body {
    padding: 14px 18px 18px;
    overflow-y: auto;
}

.wp-editor-head span {
    color: var(--text-tertiary);
}

.wp-editor-close {
    margin-left: auto;
}

.wp-empty {
    padding: 40px 0;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    text-align: center;
}



.wp-window-range {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The day count sits beside the range on weight and ink alone. */
.wp-window-range b {
    color: var(--text-primary);
    font-weight: 750;
}

/* ── Review and approval modal ── */

.wp-review-modal {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wp-review-section {
    margin-bottom: 14px;
}

.wp-review-section h4 {
    margin: 0 0 6px;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.wp-review-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wp-review-section li {
    padding: 3px 0;
    color: var(--text-primary);
    font-size: 0.78rem;
    border-bottom: 1px solid var(--ink-line);
}

.wp-review-none {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.wp-review-note {
    margin: 0 0 12px;
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.wp-review-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--ink-line);
}

/* A chip closed without work — cancelled or not executed — keeps its
   cell, struck through. */
.wp-chip-cancelled,
.wp-chip-not-executed {
    color: var(--text-tertiary);
    text-decoration: line-through;
    background: transparent;
}