/* Class pipeline, instructors & partners, compliance, timeline, stakeholder page, delivery pace and bulk task actions.
   Colours come from the theme variables in styles.css, so every theme (and high contrast) carries over. */

/* ---- Boards (classes, instructors, partners) */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);gap:12px;overflow-x:auto;padding-bottom:14px;margin-bottom:22px;align-items:start}
.boardcol{background:color-mix(in srgb,var(--surface) 65%,var(--bg));border:1px solid var(--line);border-radius:var(--radius);padding:10px;min-height:120px}
.boardcol header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
.boardcol h3{font-size:12px;margin:0;line-height:1.35}
.boardcol header .count{background:var(--lime);color:var(--dark);font-size:11px;line-height:18px;min-width:18px;text-align:center;padding:0 6px;border-radius:99px}
.classcard{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:8px}
.classcard[draggable="true"]{cursor:grab}
.classcard.late{border-left:3px solid #c0583e}
.classcard .linkbutton{text-align:left;color:var(--ink)}
.cardmeta{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:11px}
.cardmove{display:flex;justify-content:space-between;margin-top:2px}
.boardcol.drag-over{outline:2px dashed var(--green)}

/* ---- Compliance traffic lights, chips */
.light{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;background:#9aa391}
.light.green{background:#4f8a5b}.light.amber{background:#d9a130}.light.red{background:#c0583e}.light.grey{background:#9aa391}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12px;background:var(--surface)}
.chip.zero{opacity:.55}

/* ---- Small bars (delivery pace, stakeholder progress) */
.minibar{flex:1;max-width:260px;height:8px;border-radius:5px;background:var(--line);overflow:hidden;align-self:center;margin:0 14px}
.minibar i{display:block;height:100%;background:var(--green);border-radius:5px}

/* ---- Timeline */
.gantt{display:grid;grid-template-columns:minmax(170px,230px) repeat(var(--days),minmax(13px,1fr));min-width:920px;position:relative;font-size:12px;row-gap:3px;align-items:center}
.ganttweek{grid-row:1;border-left:1px solid var(--line);padding:4px 0 6px 6px;color:var(--muted);font-size:11px}
.ganttgroup{grid-column:1 / -1;font-weight:600;padding:10px 0 4px;margin-top:6px;border-top:1px solid var(--line)}
.ganttlabel{grid-column:1;display:flex;flex-direction:column;min-width:0;padding-right:10px}
.ganttlabel .linkbutton{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ganttbar,.ganttmile{border:0;font:inherit;font-size:11px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:24px;padding:3px 8px;cursor:pointer}
.ganttbar{border-radius:5px;background:color-mix(in srgb,var(--green) 35%,var(--surface));color:var(--ink);z-index:2}
.ganttbar.in_progress{background:var(--green);color:#fff}
.ganttbar.in_review{background:var(--amber);color:#2c2c20}
.ganttbar.cut-left{border-top-left-radius:0;border-bottom-left-radius:0}
.ganttbar.cut-right{border-top-right-radius:0;border-bottom-right-radius:0}
.ganttbar.critical{outline:2px solid #c0583e;outline-offset:1px}
.ganttbar.clash{background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(192,88,62,.4) 6px 12px)}
.ganttmile{background:transparent;color:var(--ink);font-weight:600;z-index:2}
.ganttnow{align-self:stretch;border-left:2px solid #c0583e;opacity:.6;pointer-events:none;z-index:1}
.gantt-legend{margin-top:14px}
.panelhead .btn{white-space:nowrap}
.key{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin:0 4px 0 10px;background:color-mix(in srgb,var(--green) 35%,var(--surface))}
.key.in_progress{background:var(--green)}.key.in_review{background:var(--amber)}
.key.critical{background:transparent;outline:2px solid #c0583e}.key.clash{background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(192,88,62,.5) 3px 6px)}

/* ---- Bulk task actions */
.bulkbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);position:sticky;top:8px;z-index:5;font-size:12px}
.bulkbar[hidden]{display:none}
.bulkpick{width:16px;height:16px;flex:none}
.bulkall{padding:12px 22px 4px;margin:0}

/* ---- Shared small helpers */
label.inline{display:inline-flex;align-items:center;gap:6px;font-size:12px;margin:0}
.num{text-align:right;white-space:nowrap}
.stat-line{font-weight:600;margin:6px 0 0}
.portal-page{max-width:820px;margin:0 auto;padding:24px 16px 48px}
@media (max-width:650px){.board{grid-auto-columns:minmax(80vw,1fr)}}

/* Live strip: who is online now, at the top of every page. A green ring marks each person who is there. */
.live-strip{display:flex;align-items:center;gap:6px}
.live{border:0;background:transparent;padding:0;border-radius:50%;display:inline-flex}
.live .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--green)}
.live:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.live.more{width:29px;height:29px;align-items:center;justify-content:center;border:1px dashed var(--line);font-size:11px;color:var(--muted)}
@media (max-width:900px){.live-strip .live:nth-child(n+4){display:none}}