/* ── captain-confirm.css ───────────────────────────────────────*/

  .confirm-gender-pill {
    font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px;
    border: 0.5px solid var(--border-strong); background: var(--surface);
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.12s; white-space: nowrap;
  }
  .confirm-gender-pill:hover:not(.active) { background: var(--navy-light); color: var(--navy-dark); border-color: var(--navy-mid); }
  .confirm-gender-pill.active { background: var(--nav-navy); color: white; border-color: var(--nav-navy); }

/* ── CONFIRM TAB ─────────────────────────────────────────────────────────── */

/* Guest/external crew reminder badge (js/captain-confirm.js' _confirmGuestReminders) —
   sits next to .restriction-badge (css/sessions.css) in the card header but styled
   distinctly (blue, not amber) since it's an informational reminder, not a warning;
   tap reveals the same popover mechanism (showWarningsPopover, js/utils.js) with an
   'info'-severity entry. */
.guest-reminder-badge {
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 8px;
  background: #dbeafe; color: #1e40af;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.guest-reminder-badge:hover { background: #bfdbfe; }
[data-theme="dark"] .guest-reminder-badge { background: rgba(59,130,246,0.2); color: #93c5fd; }
[data-theme="dark"] .guest-reminder-badge:hover { background: rgba(59,130,246,0.3); }
.confirm-card {
  border: 0.5px solid var(--border-strong);
  border-left: 4px solid #6b7280;
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--surface);
}
.confirm-card.dimmed { opacity: 0.6; }
.confirm-card-hdr {
  display: flex;
  cursor: pointer;
  padding: 14px 16px;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.confirm-card-hdr:hover { background: var(--bg); }
.confirm-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.confirm-card.open .confirm-card-body { max-height: 2400px; }
.confirm-status-pill {
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}
.confirm-crew-summary {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.confirm-signoff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
}
.confirm-signoff-row:last-child { border-bottom: none; }
.confirm-signoff-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  border: 0.5px solid var(--border-strong);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.confirm-signoff-btn:hover { background: var(--bg); }
.confirm-crew-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 0.5px solid var(--border);
  min-width: 0;
}
.confirm-crew-row:last-child { border-bottom: none; }
.ccr-selectable { cursor: pointer; user-select: none; border-radius: 5px; transition: background 0.1s; }
.ccr-selectable:hover { background: var(--bg); }
.ccr-selected { background: #eff6ff !important; outline: 1.5px solid #93c5fd; border-radius: 5px; }
.ccr-seat {
  font-size: 11px; color: var(--text-tertiary);
  min-width: 22px; text-align: right; flex-shrink: 0; font-weight: 500;
}
.ccr-name { flex: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccr-rower-note { display: block; font-size: 11px; color: var(--text-tertiary); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccr-side { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
.ccr-side-bow { background: #dbeafe; color: #1e40af; }
.ccr-side-str { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .ccr-side-bow { background: rgba(59,130,246,0.2); color: #93c5fd; }
[data-theme="dark"] .ccr-side-str { background: rgba(239,68,68,0.2); color: #fca5a5; }
.ccr-status {
  font-size: 11px; font-weight: 600; padding: 2px 6px;
  border-radius: 10px; flex-shrink: 0; white-space: nowrap;
}
.ccr-status-confirmed { background: #dcfce7; color: #166534; }
.ccr-status-unsure    { background: #fef9c3; color: #854d0e; }
.ccr-status-unavail   { background: #fee2e2; color: #991b1b; }
.ccr-status-none      { background: #f3f4f6; color: #6b7280; }
[data-theme="dark"] .ccr-status-confirmed { background: rgba(22,163,74,0.18); color: #86efac; }
[data-theme="dark"] .ccr-status-unsure    { background: rgba(202,138,4,0.18); color: #fde047; }
[data-theme="dark"] .ccr-status-unavail   { background: rgba(239,68,68,0.2); color: #fca5a5; }
[data-theme="dark"] .ccr-status-none      { background: rgba(255,255,255,0.08); color: #8a8479; }
.ccr-replace-btn {
  flex-shrink: 0; width: 26px; height: 26px;
  background: var(--surface); border: 0.5px solid var(--border-strong);
  border-radius: 6px; font-size: 15px; cursor: pointer;
  font-family: inherit; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.ccr-replace-btn:hover { background: var(--bg); }
.ccr-empty { font-size: 13px; color: var(--text-tertiary); font-style: italic; padding: 6px 0; }
.confirm-side-pill {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg); color: var(--text-tertiary);
  border: 0.5px solid var(--border);
}
.csm-swap-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.csm-swap-btn:hover { background: var(--bg); }
.csm-swap-cancel { color: var(--text-tertiary); }
.csm-swap-search {
  font-size: 12px;
  padding: 3px 6px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  background: var(--surface);
  color: var(--text);
}
.csm-swap-search:focus { border-color: var(--navy-mid); }
.csm-swap-sel {
  font-size: 12px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 100%;
  font-family: inherit;
  outline: none;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.csm-swap-sel:focus { border-color: var(--navy-mid); }
.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.confirm-actions .cp-btn { width: 100%; text-align: center; }

/* Responsive confirm card grid layout */
.confirm-card-layout {
  display: grid;
  grid-template-areas:
    "crew  details  plan"
    "crew  notes    plan";
  grid-template-columns: minmax(230px, 1.3fr) 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0 16px;
  padding: 16px;
  align-items: start;
}
.ccol-crew    { grid-area: crew; }
.ccol-details {
  grid-area: details;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}
.ccol-plan  { grid-area: plan;  display: flex; flex-direction: column; gap: 8px; }
.ccol-notes { grid-area: notes; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }

/* 4-quadrant: 700px–1200px */
@media (max-width: 1200px) {
  .confirm-card-layout {
    grid-template-areas:
      "crew    details"
      "plan    notes";
    grid-template-columns: 1fr 1fr;
  }
  .ccol-details { padding-bottom: 0; border-bottom: none; }
  .ccol-notes   { padding-top: 0; }
  .ccol-plan    { border-top: 0.5px solid var(--border); padding-top: 16px; margin-top: 4px; }
}

/* Single column: below 700px */
@media (max-width: 700px) {
  .confirm-card-layout {
    grid-template-areas: "crew" "details" "plan" "notes";
    grid-template-columns: 1fr;
    gap: 12px 0;
  }
  .ccol-details { padding-bottom: 0; }
  .ccol-plan    { border-top: 0.5px solid var(--border); padding-top: 16px; }
}

/* Swap bar + replace picker */
.confirm-crew-list { display: flex; flex-direction: column; }
.confirm-swap-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  flex-wrap: wrap;
}
.confirm-swap-bar.csb-visible { display: flex; }
.csb-text { font-size: 12px; flex: 1; min-width: 100px; }
.confirm-replace-picker {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  margin: 2px 0 4px 22px;
}
.confirm-replace-picker.crp-open { display: flex; }
.crp-sub-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 0.5px solid var(--border);
}
.crp-sub-row:last-of-type { border-bottom: none; }
.crp-sub-name { flex: 1; font-size: 13px; min-width: 0; }
.crp-wrong-side { font-size: 11px; color: #d97706; margin-left: 3px; }
.crp-swap-btn { padding: 3px 10px !important; font-size: 12px !important; flex-shrink: 0; }
.crp-empty { font-size: 12px; color: var(--text-tertiary); font-style: italic; margin: 0; }
.crp-guest-row {
  display: flex; gap: 6px; align-items: center;
  padding-top: 6px; border-top: 0.5px solid var(--border);
}
.crp-guest-input { flex: 1; font-size: 12px !important; }
.crp-close { font-size: 12px; color: var(--text-secondary); text-decoration: none; padding-top: 2px; }
.crp-close:hover { color: var(--text); }

/* Column labels, textareas, and badges */
.ccol-section-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 6px; }
.ccol-section-sublabel { font-size: 11px; font-weight: 400; color: var(--text-tertiary); margin-left: 4px; }
.ccol-textarea { width: 100%; resize: vertical; }
.ccol-badge { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; }
.ccol-badge-warn { background: #fef9c3; color: #854d0e; }
.ccol-badge-ok   { background: #dcfce7; color: #166534; }
.ccol-cancelled  { font-size: 13px; color: #991b1b; }
.ccol-complete   { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #166534; font-weight: 500; flex-wrap: wrap; }
.ccol-complete a { font-size: 12px; color: var(--navy-mid); }

/* Session info rows */
.confirm-info-row { display: flex; gap: 6px; align-items: center; font-size: 13px; padding: 3px 0; }
.confirm-info-label { font-weight: 500; color: var(--text-secondary); flex-shrink: 0; }