/* ── captain-plan.css ──────────────────────────────────────────*/

  /* Live per-squad availability callout — same visual language as the
     app's .notice banner (shared.css), reused here to mark the block as
     informational context rather than an editable field. */
  .cp-avail-box {
    background: var(--navy-light);
    border: 0.5px solid rgba(139,26,26,0.25);
    border-radius: var(--radius);
    padding: 10px 12px;
  }

  /* Preset buttons */
  .cp-preset-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
  .cp-preset-btn {
    font-size: 11px; padding: 4px 10px; border-radius: 20px;
    border: 0.5px solid var(--border-strong); background: var(--bg);
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.12s;
  }
  .cp-preset-btn:hover { background: var(--navy-light); color: var(--navy-dark); border-color: var(--navy-mid); }

  /* ── COACH PRIORITY IN PANEL ───────────────────────────────────────────────── */
  .cp-coach-p-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .cp-coach-p-lbl {
    font-size: 11px; color: var(--text-secondary); font-weight: 500;
    min-width: 70px; flex-shrink: 0;
  }
  .cp-coach-p-rm {
    font-size: 13px; color: var(--text-tertiary); background: none;
    border: none; cursor: pointer; padding: 2px 5px;
    border-radius: 50%; transition: all 0.1s; flex-shrink: 0;
  }
  .cp-coach-p-rm:hover { background: #fee2e2; color: #dc2626; }
  [data-theme="dark"] .cp-coach-p-rm:hover { background: rgba(239,68,68,0.18); color: #fca5a5; }
  .cp-add-coach-btn {
    font-size: 11px; color: var(--navy-mid); background: none;
    border: 0.5px solid var(--border-strong); border-radius: 20px;
    padding: 3px 12px; cursor: pointer; font-family: inherit;
    transition: all 0.12s; margin-top: 2px; display: inline-block;
  }
  .cp-add-coach-btn:hover { background: var(--navy-light); border-color: var(--navy-mid); }
  /* Boat custom input (revealed when "Add new…" selected) */
  .cp-boat-custom-wrap { margin-top: 6px; display: none; }
  .cp-boat-custom-wrap.shown { display: block; }

  /* ── TIME PICKER COMPONENT ────────────────────────────────────────────────── */
  .cp-timepick { display: flex; flex-direction: column; gap: 4px; }
  .cp-timepick-row { display: flex; align-items: center; gap: 4px; }
  .cp-timepick-input { flex: 1; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
  .cp-timepick-arrow {
    width: 28px; height: 34px; border-radius: var(--radius-sm);
    border: 0.5px solid var(--border-strong); background: var(--bg);
    color: var(--text); cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; flex-shrink: 0; transition: background 0.12s;
  }
  .cp-timepick-arrow:hover { background: var(--navy-light); color: var(--navy-dark); border-color: var(--navy-mid); }
  @media (max-width: 640px) { .cp-timepick-arrow { display: none; } }
  /* Lighter-weight variant for fields rarely hand-adjusted, e.g. End time */
  .cp-timepick--compact .cp-timepick-arrow { width: 22px; height: 28px; font-size: 9px; opacity: 0.6; }
  .cp-timepick--compact .cp-timepick-input { font-size: 12px; padding: 6px 4px; color: var(--text-secondary); }

  /* ── BOAT MANAGEMENT ────────────────────────────────────────────────────────── */
  .cp-bm-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; border-bottom: 0.5px solid var(--border);
    font-size: 13px;
  }
  .cp-bm-row:last-child { border-bottom: none; }
  .cp-bm-name { flex: 1; font-weight: 500; }
  .cp-bm-type { font-size: 11px; color: var(--text-secondary); min-width: 30px; }
  .cp-bm-seats { font-size: 11px; color: var(--text-tertiary); min-width: 50px; }
  .cp-bm-del {
    font-size: 11px; color: var(--text-tertiary); background: none;
    border: none; cursor: pointer; padding: 2px 6px; border-radius: 50%;
    transition: all 0.1s;
  }
  .cp-bm-del:hover { background: #fee2e2; color: #dc2626; }
  [data-theme="dark"] .cp-bm-del:hover { background: rgba(239,68,68,0.18); color: #fca5a5; }

  /* ── COACH CHIPS ─────────────────────────────────────────────────────────────── */
  .cp-coach-chips {
    display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px;
  }
  .cp-coach-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--navy-light); color: var(--navy-dark);
    border: 0.5px solid var(--border-strong); border-radius: 20px;
    padding: 3px 6px 3px 10px; font-size: 12px; font-weight: 500;
  }
  .cp-coach-chip-rm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: none; border: none; cursor: pointer;
    color: var(--navy-dark); font-size: 11px; padding: 0; flex-shrink: 0;
    transition: background 0.1s;
  }
  .cp-coach-chip-rm:hover { background: rgba(220,38,38,0.15); color: #dc2626; }
  [data-theme="dark"] .cp-coach-chip-rm:hover { background: rgba(239,68,68,0.22); color: #fca5a5; }

  /* Set-crew section — collapsible read-only seat list */
  .cp-crew-list-toggle {
    display: inline-block; margin-top: 8px; padding: 0;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 500; color: var(--navy-mid); text-decoration: underline;
  }
  .cp-crew-list-toggle:hover { color: var(--navy-dark); }

  /* Captain page day sessions — no wrap (fix 1 for captain grid too) */
  .cp-day-sessions {
    flex: 1; display: flex; align-items: stretch;
    gap: 6px; padding: 6px 8px;
    overflow-x: auto; min-height: 72px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .cp-day-sessions::-webkit-scrollbar { height: 3px; }
  .cp-day-sessions::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
  .cp-fairness {
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  }
  .cp-fairness-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
  .cp-fair-item { display: flex; align-items: center; gap: 6px; }
  .cp-fair-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .cp-fair-text { font-size: 12px; color: var(--text-secondary); }
  .cp-fair-count { font-size: 13px; font-weight: 600; color: var(--text); font-family: 'DM Serif Display', serif; }

  /* Desktop squad filter, appended to the fairness/counts box (renderCpFairness) —
     same cpAgendaSquadFilter state and filtering as the mobile agenda's pill row,
     just styled to sit alongside the counts already in this box rather than the
     mobile pill row's look. Pills show above 1100px; below it a <select
     class="cp-select"> (same convention as the session popup's day/type/location
     dropdowns) takes over, since seven inline pills plus the existing counts stop
     fitting comfortably around the same width the kanban columns themselves
     (192px × 7 + gaps ≈ 1400px) start needing horizontal scroll. 1100px reuses
     the sidebar's own collapse point (#cp-preset-sidebar above) rather than
     introducing a third breakpoint for the same "narrow" tier. */
  .cp-fair-squad-filter { display: flex; gap: 5px; flex-wrap: wrap; }
  .cp-fair-pill {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
    border: 0.5px solid var(--border-strong); background: var(--bg);
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.12s;
  }
  .cp-fair-pill:hover { background: var(--navy-light); color: var(--navy-dark); }
  .cp-fair-pill.active { background: var(--nav-navy); color: #fff; border-color: var(--nav-navy); }
  .cp-fair-squad-select { display: none; width: auto; min-width: 130px; padding: 5px 8px; font-size: 12px; }
  @media (max-width: 1100px) {
    .cp-fair-squad-filter { display: none; }
    .cp-fair-squad-select { display: block; }
  }

  /* ── TWO-COLUMN PLAN LAYOUT ─────────────────────────────────────────────── */
  .cp-plan-body { display: flex; gap: 16px; align-items: flex-start; }
  #cp-preset-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 56px; max-height: calc(100vh - 72px); overflow-y: auto; display: none; }
  #cp-plan-main { flex: 1; min-width: 0; }
  @media (min-width: 1100px) { #cp-preset-sidebar { display: block; } .cp-plan-body { flex-direction: row; } }

  /* Preset sidebar */
  .cp-sidebar-inner { background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: var(--radius); padding: 12px; }
  .cp-sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-tertiary); margin-bottom: 6px; }
  .cp-preset-tile { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; border: 0.5px solid var(--border-strong); background: var(--bg); margin-bottom: 5px; cursor: grab; transition: box-shadow 0.15s; user-select: none; position: relative; overflow: hidden; }
  .cp-preset-tile:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  .cp-preset-tile:active { cursor: grabbing; }
  .cp-pt-accent { width: 3px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
  .cp-pt-body { flex: 1; min-width: 0; }
  .cp-pt-grp { font-size: 12px; font-weight: 700; display: block; }
  .cp-pt-time { font-size: 11px; color: var(--text-secondary); display: block; }
  .cp-pt-cap { font-size: 10px; color: var(--text-tertiary); display: block; }
  .cp-pt-pin { background: none; border: none; cursor: pointer; font-size: 13px; opacity: 0.4; padding: 2px; transition: opacity 0.15s; flex-shrink: 0; }
  .cp-pt-pin:hover, .cp-pt-pin.pinned { opacity: 1; }
  .cp-sidebar-hint { font-size: 11px; color: var(--text-tertiary); font-style: italic; padding: 4px 2px; }

  /* Week-actions overflow menu — mobile-only "⋯" trigger that replaces the
     desktop row of Publish week / Clear week / Copy last week / Save as
     template / Load template buttons (hidden here, shown inline on desktop).
     Styled after .club-switcher-dropdown (shared.css): a small floating
     panel of stacked text buttons. */
  .cp-week-menu-wrap { position: relative; display: none; }
  .cp-week-menu-btn { font-size: 20px; line-height: 1; padding: 6px 12px !important; min-height: 44px; }
  .cp-week-menu {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 190px; z-index: 200; overflow: hidden;
  }
  .cp-week-menu.open { display: block; }
  .cp-week-menu-item {
    display: block; width: 100%; box-sizing: border-box; min-height: 44px;
    padding: 11px 14px; background: none; border: none;
    cursor: pointer; font-family: inherit; font-size: 13px;
    color: var(--text); text-align: left; transition: background 0.12s;
  }
  .cp-week-menu-item:hover { background: var(--navy-light); }
  .cp-week-menu-item:disabled { opacity: 0.4; cursor: default; }
  .cp-week-menu-item:disabled:hover { background: none; }
  .cp-week-menu-item + .cp-week-menu-item { border-top: 0.5px solid var(--border); }

  /* Item card, day-header and empty-state styles used to live here
     (.cp-agenda-*) — moved to css/weekBoard.css alongside js/weekBoard.js,
     the shared component that now owns this markup. Class names unchanged. */

  /* Race-type session card badge (cpRenderPlanCardContent) — sits inline next
     to the squad chip on .cp-agenda-card-squad, which has room to spare
     since that row otherwise holds only the (short) squad label. Colour
     mirrors the club-accent red already used for .cp-avail-box's border
     rather than the amber of races.css's .race-badge, so it doesn't get
     confused with the "BR License Required" badge on the Races page. */
  .cp-race-badge {
    display: inline-block; margin-left: 6px; vertical-align: middle;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 8px;
    background: rgba(139,26,26,0.14); color: #8b1a1a;
    white-space: nowrap;
  }
  [data-theme="dark"] .cp-race-badge { background: rgba(220,38,38,0.22); color: #fca5a5; }
  @media (max-width: 768px) {
    .cp-week-action { display: none; }
    .cp-week-menu-wrap { display: inline-block; }
  }

  /* ── RESTRICTION CHECK MODAL (publish + draft save + Confirm tab send-gate) — one
     block per violating session ── */
  .cp-restr-session { margin-bottom: 12px; }
  .cp-restr-session:last-child { margin-bottom: 0; }
  .cp-restr-session-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
  .cp-restr-msg {
    font-size: 12px; padding: 7px 10px; border-radius: var(--radius-sm);
    margin-bottom: 5px; line-height: 1.5;
  }
  .cp-restr-msg:last-child { margin-bottom: 0; }
  .cp-restr-msg.warn  { background: #fef9c3; color: #713f12; border: 0.5px solid #d97706; }
  .cp-restr-msg.block { background: #fee2e2; color: #991b1b; border: 0.5px solid #fca5a5; }
  [data-theme="dark"] .cp-restr-msg.warn  { background: rgba(217,119,6,0.18); color: #fde047; border-color: rgba(217,119,6,0.45); }
  [data-theme="dark"] .cp-restr-msg.block { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.45); }

  /* Restriction-modal violation list can scroll (river closures + crew-count warnings on
     a busy week) — reuse the same themed scrollbar recipe as .cp-panel-body (captain.css)
     instead of the plain browser scrollbar, which renders with a light track on dark. */
  #cprm-list {
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
  #cprm-list::-webkit-scrollbar { width: 8px; }
  #cprm-list::-webkit-scrollbar-track { background: transparent; }
  #cprm-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }