/* ── weekBoard.css ─────────────────────────────────────────────*
   Styles for js/weekBoard.js's kanban/agenda/one-day-expand rendering —
   shared by the Plan Week tab and (upcoming) the Erg tab. Kept as its own
   file rather than folded into shared.css or a tab-specific stylesheet,
   mirroring how pickers.css sits alongside coachPicker.js/coxPicker.js/
   crewPicker.js: a shared component gets a shared, dedicated stylesheet.
   Class names are unchanged from the pre-extraction captain-plan.css
   (.cp-kanban-/.cp-agenda-/.cp-expand-) — only the file they live in
   moved, not the names themselves. */

  /* ── DESKTOP KANBAN (≥768px) — collapsed columns, one per day ────────────────── */
  .cp-kanban {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 16px;
  }
  .cp-kanban-col {
    flex: 1 1 192px;
    min-width: 192px;
    background: var(--surface);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cp-kanban-day-hdr {
    background: #f9f9f7;
    padding: 8px 6px;
    text-align: center;
    border-bottom: 0.5px solid var(--border);
    cursor: pointer; user-select: none;
    transition: background 0.12s;
  }
  .cp-kanban-day-hdr:hover { background: #f0f0ec; }
  .cp-kanban-day-hdr.today { background: #fef2f2; }
  .cp-kanban-day-hdr.today:hover { background: #fde3e3; }
  [data-theme="dark"] .cp-kanban-day-hdr { background: var(--bg); }
  [data-theme="dark"] .cp-kanban-day-hdr:hover { background: rgba(255,255,255,0.06); }
  [data-theme="dark"] .cp-kanban-day-hdr.today { background: rgba(220,38,38,0.16); }
  [data-theme="dark"] .cp-kanban-day-hdr.today:hover { background: rgba(220,38,38,0.24); }
  .cp-kanban-day-hdr.expanded { background: var(--navy-light); }
  .cp-kanban-day-hdr.expanded:hover { background: var(--navy-light); }
  .cp-kanban-day-name {
    display: block;
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .cp-kanban-day-hdr.today .cp-kanban-day-name { color: var(--navy-dark); }
  .cp-kanban-day-date {
    display: block;
    font-size: 12px; font-family: 'DM Serif Display', serif;
    color: var(--text); margin-top: 2px;
  }
  .cp-kanban-col-body {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 80px;
    /* Slightly off-white against the cards' white surface so cards read as
       distinct raised objects (paired with their box-shadow) rather than
       blending into the column. */
    background: var(--bg);
  }

  /* Column highlight while something is dragged over it (weekBoard.js's
     optional onDayDrop) */
  .cp-kanban-col.cp-kanban-highlight { background: #eff6ff; }
  .cp-kanban-col.cp-kanban-highlight .cp-kanban-day-hdr { background: #dbeafe; }
  [data-theme="dark"] .cp-kanban-col.cp-kanban-highlight { background: rgba(59,130,246,0.12); }
  [data-theme="dark"] .cp-kanban-col.cp-kanban-highlight .cp-kanban-day-hdr { background: rgba(59,130,246,0.22); }

  /* Plain boundary line between collapsed cards that don't overlap in time —
     deliberately just a rule with no label, unlike .cp-expand-divider's
     "Xh Xm gap" divider in the expanded timeline, so the two aren't mistaken
     for each other. Cards sitting together with no divider between them
     share overlapping time. */
  .cp-kanban-card-divider {
    height: 0;
    border-top: 2px dashed rgba(0,0,0,0.22);
    margin: 2px 0;
  }

  /* ── EXPANDED SINGLE-DAY TIMELINE ─────────────────────────────────────────────
     Replaces one day's compact card-stack (wbRenderExpandedDayTimeline()) with a
     true time-accurate view: a slim hour-label gutter next to a track where
     cards are absolutely positioned by real duration, with overlap lanes and
     collapsed-gap dividers. */
  .cp-kanban-col--expanded {
    /* Actual width is set inline per-render (wbExpandedColWidth in weekBoard.js)
       based on how many overlap lanes the day needs; this is just a floor for the
       brief instant before that inline style is applied. */
    flex: 0 0 240px;
    min-width: 240px;
  }
  .cp-kanban-col-body--expanded {
    padding: 8px 8px 8px 4px;
    overflow-x: auto;
    display: block;
  }
  .cp-expand-timeline {
    display: flex;
    position: relative;
    width: 100%;
  }
  .cp-expand-axis {
    position: relative;
    width: 32px;
    flex-shrink: 0;
  }
  .cp-expand-time-label {
    position: absolute;
    left: 0; right: 4px;
    transform: translateY(-50%);
    text-align: right;
    font-size: 9px; font-weight: 500; color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .cp-expand-track {
    position: relative;
    flex: 1;
    min-width: 140px;
    border-left: 0.5px solid var(--border);
  }
  .cp-expand-gridline {
    position: absolute; left: 0; right: 0; height: 0.5px;
    background: var(--border);
    pointer-events: none;
  }
  .cp-expand-gridline.hour { background: var(--border-strong); }
  .cp-expand-divider {
    position: absolute; left: 4px; right: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--text-tertiary); font-style: italic;
  }
  .cp-expand-divider::before, .cp-expand-divider::after {
    content: ''; flex: 1; height: 0.5px; background: var(--border); margin: 0 8px;
  }
  .cp-expand-card.cp-agenda-card {
    position: absolute;
    margin-bottom: 0;
    box-sizing: border-box;
  }

  /* ── ITEM CARD — shared by the mobile agenda list and the desktop kanban
     columns above; identical markup (weekBoard.js's wbMakeCard()), just
     arranged differently by their respective containers. ─────────────────────── */
  .cp-agenda-empty {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
    background: var(--surface); border: 0.5px dashed var(--border-strong);
    border-radius: var(--radius); padding: 12px 14px; margin-bottom: 6px;
  }
  .cp-agenda-empty-msg { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
  .cp-agenda-add-btn {
    flex-shrink: 0; margin-left: auto; font-size: 12px; font-weight: 500; font-family: inherit;
    background: none; color: var(--navy-mid); border: 0.5px solid var(--border-strong);
    border-radius: 20px; padding: 5px 12px; cursor: pointer; transition: all 0.12s;
    min-height: 30px;
  }
  .cp-agenda-add-btn:hover { background: var(--navy-light); border-color: var(--navy-mid); }

  .cp-agenda-card {
    display: block; width: 100%; box-sizing: border-box;
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-left: 3px solid transparent; border-radius: var(--radius-sm);
    padding: 9px 12px; margin-bottom: 6px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
  }
  .cp-agenda-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .cp-agenda-card.draft { border-left-style: dashed; }
  /* Same row order on every card regardless of what caller's renderItemContent
     puts in it: time+status, then squad badge on its own row, then type/
     location, then any trailing status line — each row shares the same top
     spacing. */
  .cp-agenda-card-top {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; row-gap: 2px;
  }
  .cp-agenda-time {
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--text); flex-shrink: 0; white-space: nowrap;
  }
  .cp-agenda-status {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0; white-space: nowrap; margin-left: auto;
  }
  .cp-agenda-status.draft { color: var(--text-tertiary); }
  .cp-agenda-status.pub   { color: #16a34a; }
  .cp-agenda-card-squad { margin-top: 6px; }
  .cp-agenda-squad {
    font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px;
    white-space: nowrap; display: inline-block;
  }
  .cp-agenda-card-body {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    font-size: 12px; color: var(--text-secondary);
  }
  .cp-agenda-type::after { content: '·'; margin-left: 8px; color: var(--text-tertiary); }
  /* Erg card: capacity readout + "I'm signed up" highlight — border-left
     mirrors .sv-chip-me's green outline convention (css/sessions.css) so the
     "this includes me" signal reads the same across both card styles. */
  .cp-agenda-card--erg-joined { border-left-color: #16a34a; }
  .cp-agenda-erg-cap { font-weight: 600; }
  .cp-agenda-crew-tag { font-size: 10px; font-weight: 600; margin-top: 6px; }
  .cp-agenda-crew-tag.draft { color: #9ca3af; }
  .cp-agenda-crew-tag.pub   { color: #16a34a; }

  /* ── MOBILE AGENDA (≤768px) — vertical stacked list, one section per day ────── */
  @media (max-width: 768px) {
    .cp-agenda { display: flex; flex-direction: column; gap: 4px; }

    .cp-agenda-filter-row {
      display: flex; gap: 6px; flex-wrap: wrap;
      padding: 2px 4px 10px;
    }

    .cp-agenda-day-hdr {
      display: flex; align-items: baseline; gap: 8px;
      padding: 10px 4px 6px;
    }
    .cp-agenda-day-hdr.today .cp-agenda-day-name { color: var(--navy-dark); }
    .cp-agenda-day-name {
      font-size: 13px; font-weight: 700; color: var(--text);
    }
    .cp-agenda-day-date {
      font-size: 12px; color: var(--text-secondary);
    }
  }