/* =============================================================================
   workweek-board.css — F1 Work-Week resource board (ConnectWise/ServiceNow dispatch
   pattern). People are lanes, days are columns, each cell is a chronological event
   stack. Additive; scoped to .wwb. Extends the existing sticky-grid pattern used by
   .desktop-month-grid — no new grid engine. Themed via the spx tokens.
   ============================================================================= */

.wwb {
    --wwb-border: var(--smkk-spx-border, rgba(120, 130, 145, 0.22));
    --wwb-surface: var(--smkk-spx-surface, #fff);
    --wwb-sunken: var(--smkk-spx-surface-sunken, rgba(120, 130, 145, 0.06));
    --wwb-text: var(--smkk-spx-text, #1f2933);
    --wwb-muted: var(--smkk-spx-text-muted, #5b6b7a);
    --wwb-accent: var(--smkk-spx-accent, var(--smkk-accent, #2f6d5a));
    border: 1px solid var(--wwb-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--wwb-surface);
}

/* horizontal scroll on narrow screens; sticky person column stays put */
.wwb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.wwb-grid {
    display: grid;
    grid-template-columns: var(--wwb-cols, minmax(140px, 200px) repeat(5, minmax(150px, 1fr)));
    min-width: max-content;
}
.wwb-row, .wwb-head, .wwb-lane { display: contents; }

/* sticky first column (person / corner / group label) */
.wwb-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--wwb-surface);
}

/* header row */
.wwb-corner, .wwb-dayhead {
    padding: 8px 10px;
    border-bottom: 1px solid var(--wwb-border);
    background: var(--wwb-sunken);
    font-weight: 700;
    font-size: 12px;
    color: var(--wwb-muted);
}
.wwb-corner { z-index: 3; }
.wwb-dayhead { display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--wwb-border); }
.wwb-dayhead .wwb-dow { text-transform: uppercase; letter-spacing: .04em; }
.wwb-dayhead .wwb-dom { font-weight: 800; font-size: 13px; color: var(--wwb-text); }
.wwb-dayhead.is-today { background: color-mix(in srgb, var(--wwb-accent) 12%, var(--wwb-sunken)); }
.wwb-dayhead.is-today .wwb-dom { color: var(--wwb-accent); }

/* group divider row */
.wwb-grouprow { display: contents; }
.wwb-grouplabel {
    padding: 6px 10px;
    background: var(--wwb-sunken);
    border-bottom: 1px solid var(--wwb-border);
    border-top: 1px solid var(--wwb-border);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--wwb-muted);
}
.wwb-groupcount {
    display: inline-block; margin-left: 6px; padding: 0 6px;
    border-radius: 999px; background: var(--wwb-border); color: var(--wwb-text);
    font-size: 10px; font-weight: 800;
}

/* person lane header */
.wwb-person {
    padding: 8px 10px;
    border-bottom: 1px solid var(--wwb-border);
    display: flex; flex-direction: column; gap: 1px;
    min-height: 56px;
}
.wwb-person-name { font-weight: 700; font-size: 13px; color: var(--wwb-text); line-height: 1.2; }
.wwb-person-role { font-size: 11px; color: var(--wwb-muted); }
.wwb-person-count {
    position: absolute; /* anchored by lane relative */
    top: 8px; right: 8px;
    min-width: 18px; text-align: center; padding: 0 5px;
    border-radius: 999px; background: var(--wwb-accent); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 18px;
}
.wwb-person { position: relative; }

/* day cell */
.wwb-cell {
    border-left: 1px solid var(--wwb-border);
    border-bottom: 1px solid var(--wwb-border);
    padding: 5px;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 56px;
    background: var(--wwb-surface);
    vertical-align: top;
}
.wwb-cell.is-today { background: color-mix(in srgb, var(--wwb-accent) 5%, var(--wwb-surface)); }
.wwb-cell.is-empty { background: var(--wwb-sunken); }

/* event chip — dense, flat, color rail (Luke's no-bubbly mandate) */
.wwb-chip {
    display: flex; align-items: baseline; gap: 6px;
    padding: 4px 7px;
    border-radius: 5px;
    border-left: 3px solid var(--wwb-rail, var(--wwb-accent));
    background: var(--wwb-sunken);
    color: var(--wwb-text);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.25;
    min-height: 28px;
}
a.wwb-chip:hover { background: color-mix(in srgb, var(--wwb-rail, var(--wwb-accent)) 12%, var(--wwb-sunken)); }
a.wwb-chip:focus-visible { outline: 2px solid var(--wwb-accent); outline-offset: 1px; }
.wwb-chip-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wwb-muted); white-space: nowrap; }
.wwb-chip-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wwb-chip.is-done { opacity: .58; }
.wwb-chip.is-done .wwb-chip-title { text-decoration: line-through; }
.wwb-statusdot { margin-left: auto; }

/* kind accents (fallback rails when DisplayColor is blank) */
.wwb-chip--install { --wwb-rail: #b3261e; }
.wwb-chip--measure { --wwb-rail: #356ea3; }
.wwb-chip--task    { --wwb-rail: #6a4fb3; }
.wwb-chip--milestone { --wwb-rail: #9a661b; }

/* empty state */
.wwb-empty { padding: 22px 16px; text-align: center; }
.wwb-empty-title { font-weight: 700; color: var(--smkk-spx-text, #1f2933); margin-bottom: 4px; }
.wwb-empty-sub { font-size: 13px; color: var(--smkk-spx-text-muted, #5b6b7a); max-width: 44ch; margin: 0 auto; }

/* ---- phone: single-lane embed (ticket detail) & compact board ---- */
body.device-phone .wwb-grid { grid-template-columns: minmax(96px, 120px) repeat(5, minmax(120px, 1fr)); }
body.device-phone .wwb-person-name { font-size: 12px; }
body.device-phone .wwb-chip { font-size: 11px; }

/* collapsible section wrapper on the scheduling dashboard */
.wwb-section { margin: 0 0 14px; border: 1px solid var(--smkk-spx-border, rgba(120,130,145,.22)); border-radius: 10px; overflow: hidden; }
.wwb-section > .wwb-section-summary {
    list-style: none; cursor: pointer; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 1px;
    background: var(--smkk-spx-surface-sunken, rgba(120,130,145,.06));
}
.wwb-section > .wwb-section-summary::-webkit-details-marker { display: none; }
.wwb-section-title { font-weight: 800; font-size: 14px; color: var(--smkk-spx-text, #1f2933); }
.wwb-section-sub { font-size: 12px; color: var(--smkk-spx-text-muted, #5b6b7a); }
.wwb-section[open] > .wwb-section-summary { border-bottom: 1px solid var(--smkk-spx-border, rgba(120,130,145,.22)); }
.wwb-section .wwb { border: 0; border-radius: 0; }

/* single-person embed variant: hide the sticky person col, it's redundant */
.wwb--embed .wwb-person, .wwb--embed .wwb-corner, .wwb--embed .wwb-grouplabel { display: none; }
.wwb--embed .wwb-grid { grid-template-columns: repeat(5, minmax(120px, 1fr)); }