/* ── captain-river.css ─────────────────────────────────────────*/

  /* ── RIVER & RESTRICTIONS ─────────────────────────────────────────────────── */
  .river-flag-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
  }
  .river-flag-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
  .flag-btn {
    padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
    border: 2px solid transparent; cursor: pointer; font-family: inherit;
    transition: all 0.15s; display: flex; align-items: center; gap: 6px;
  }
  .flag-btn.green    { background: #dcfce7; color: #14532d; border-color: #86efac; }
  .flag-btn.lightblue{ background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
  .flag-btn.darkblue { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
  .flag-btn.amber    { background: #fef9c3; color: #713f12; border-color: #fde047; }
  .flag-btn.red      { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
  .flag-btn.grey     { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
  .flag-btn.black    { background: #e5e7eb; color: #111827; border-color: #9ca3af; }
  .flag-btn.active.green    { background: #16a34a; color: white; border-color: #15803d; }
  .flag-btn.active.lightblue{ background: #0ea5e9; color: white; border-color: #0284c7; }
  .flag-btn.active.darkblue { background: #1e3a8a; color: white; border-color: #1e40af; }
  .flag-btn.active.amber    { background: #d97706; color: white; border-color: #b45309; }
  .flag-btn.active.red      { background: #dc2626; color: white; border-color: #b91c1c; }
  .flag-btn.active.grey     { background: #6b7280; color: white; border-color: #4b5563; }
  .flag-btn.active.black    { background: #111827; color: white; border-color: #000000; }
  .flag-btn:not(.active):hover { opacity: 0.8; }
  .flag-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .flag-btn:disabled:hover { opacity: 0.45; }

  /* Marks the swatch matching the live OURC auto-detected flag while in Auto mode
     (js/captain-river.js' _highlightAutoFlagButton) — kept visible above the
     disabled-opacity dimming above so it still stands out when every button is
     otherwise unclickable and washed out. */
  .flag-btn.flag-auto-live:disabled { opacity: 0.9; }
  .flag-btn.flag-auto-live { outline: 2px solid currentColor; outline-offset: 2px; }

  /* Dark mode — same wash-background/light-text recipe used for status chips elsewhere
     (see css/captain-roster.css .r-chip, css/captain-confirm.css .ccr-status-*): a low-opacity
     tint of the flag colour behind light, legible text, rather than the light-mode pastel fills
     dropped as-is onto the dark surface. Grey and black get an explicit light border/text since
     a low-opacity neutral wash alone would blend into the dark background. */
  [data-theme="dark"] .flag-btn.green     { background: rgba(22,163,74,0.18);  color: #86efac; border-color: rgba(22,163,74,0.45); }
  [data-theme="dark"] .flag-btn.lightblue { background: rgba(14,165,233,0.18); color: #7dd3fc; border-color: rgba(14,165,233,0.45); }
  [data-theme="dark"] .flag-btn.darkblue  { background: rgba(59,130,246,0.16); color: #93c5fd; border-color: rgba(59,130,246,0.4); }
  [data-theme="dark"] .flag-btn.amber     { background: rgba(217,119,6,0.18);  color: #fde047; border-color: rgba(217,119,6,0.45); }
  [data-theme="dark"] .flag-btn.red       { background: rgba(220,38,38,0.18);  color: #fca5a5; border-color: rgba(220,38,38,0.45); }
  [data-theme="dark"] .flag-btn.grey      { background: rgba(156,163,175,0.18); color: #d1d5db; border-color: rgba(156,163,175,0.45); }
  [data-theme="dark"] .flag-btn.black     { background: rgba(255,255,255,0.07); color: #e5e7eb; border-color: rgba(255,255,255,0.3); }

  [data-theme="dark"] .flag-btn.active.green     { background: #16a34a; color: #0b1f13; border-color: #86efac; }
  [data-theme="dark"] .flag-btn.active.lightblue { background: #0ea5e9; color: #06202e; border-color: #7dd3fc; }
  [data-theme="dark"] .flag-btn.active.darkblue  { background: #3b5bdb; color: white;   border-color: #93c5fd; }
  [data-theme="dark"] .flag-btn.active.amber     { background: #d97706; color: #2b1400; border-color: #fde047; }
  [data-theme="dark"] .flag-btn.active.red       { background: #dc2626; color: white;   border-color: #fca5a5; }
  [data-theme="dark"] .flag-btn.active.grey      { background: #9ca3af; color: #1f1e1d; border-color: #e5e7eb; }
  [data-theme="dark"] .flag-btn.active.black     { background: #111827; color: white;   border-color: rgba(255,255,255,0.5); }
  .river-flag-rules {
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
  }
  .river-rules-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
  /* Auto-detected (OURC) flag status + explicit Auto/Manual toggle — three visually distinct
     states (see renderRiverAutoStatus in js/captain-river.js): synced/following automatic
     (neutral info), manually overridden (deliberate-departure styling), not yet synced
     (neutral waiting state, not styled as an error). */
  .river-auto-status {
    display: flex; flex-direction: column; gap: 6px;
    border-radius: var(--radius-sm); padding: 8px 14px; margin-bottom: 16px;
    font-size: 12px; border: 0.5px solid var(--border-strong);
  }
  .river-auto-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .river-auto-status-icon { font-size: 12px; line-height: 1; }
  .river-auto-status-label { font-weight: 600; color: var(--text-tertiary); }
  .river-auto-status-text { }
  .river-auto-status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .river-auto-status-synced { color: var(--text-tertiary); }
  .river-auto-status-mismatch { font-size: 11px; opacity: 0.85; }

  /* Explicit Auto/Manual toggle — single source of truth for manual_override (setRiverMode
     in js/captain-river.js). Sits at the front of the status row in all three states. */
  .river-mode-toggle {
    display: inline-flex; border: 0.5px solid var(--border-strong); border-radius: 20px;
    overflow: hidden; flex-shrink: 0;
  }
  .river-mode-btn {
    padding: 3px 12px; font-size: 11px; font-weight: 600; border: none;
    background: var(--surface); color: var(--text-tertiary); cursor: pointer;
    font-family: inherit; transition: all 0.15s;
  }
  .river-mode-btn:not(.active):hover { background: var(--navy-light); }
  .river-mode-btn.active { background: var(--nav-navy); color: white; }

  /* State: following auto-detection, synced — neutral informational */
  .river-auto-status--synced {
    background: var(--navy-light); border-color: var(--border-strong);
  }

  /* State: manually overridden — deliberate-departure styling (amber accent, not an error) */
  .river-auto-status--overridden {
    background: #fef9c3; border: 1px solid #fde047; color: #713f12;
  }
  .river-auto-status--overridden .river-auto-status-label { color: inherit; }
  .river-auto-status--overridden .river-mode-btn { background: transparent; color: inherit; }
  .river-auto-status--overridden .river-mode-btn.active { background: #b45309; color: white; }
  [data-theme="dark"] .river-auto-status--overridden {
    background: rgba(202,138,4,0.14); border-color: rgba(202,138,4,0.5); color: #fde047;
  }
  [data-theme="dark"] .river-auto-status--overridden .river-mode-btn.active { background: #ca8a04; color: #1f1e1d; }

  /* State: not yet synced — neutral waiting state, deliberately not error-styled */
  .river-auto-status--pending {
    background: transparent; border-style: dashed; color: var(--text-tertiary);
  }
  .river-rule-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; font-size: 13px; }
  .river-rule-icon { font-size: 14px; flex-shrink: 0; }
  .river-rule-text { flex: 1; color: var(--text); }
  .river-rule-text strong { font-weight: 600; }
  .river-slots-card {
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
  }
  .river-slots-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
  .slot-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
  .slot-day { font-size: 12px; font-weight: 600; color: var(--text); width: 32px; flex-shrink: 0; }
  .slot-input {
    width: 78px; padding: 5px 8px; border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 12px; font-family: inherit;
    color: var(--text); background: var(--surface); outline: none; text-align: center;
  }
  .slot-input:focus { border-color: var(--navy-mid); }
  .slot-sep { font-size: 11px; color: var(--text-tertiary); }
  .slot-save-btn {
    padding: 5px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;
    background: var(--nav-navy); color: white; border: none; cursor: pointer;
    font-family: inherit; transition: background 0.15s;
  }
  .slot-save-btn:hover { background: var(--navy-mid); }
  .river-check-card {
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
  }
  .river-check-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
  /* Closure rules list */
  .river-closure-row { display:flex; align-items:flex-start; gap:10px; padding:7px 0; border-bottom:0.5px solid var(--border); font-size:13px; }
  .river-closure-row:last-child { border-bottom:none; }
  .river-closure-row-disabled { opacity:0.5; }
  .river-closure-meta { flex:1; min-width:0; }
  .river-closure-time { font-weight:500; color:var(--text); }
  .river-closure-reason { font-size:11px; color:var(--text-secondary); margin-top:2px; }
  .river-closure-standing { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-tertiary); background:var(--border); border-radius:4px; padding:2px 6px; white-space:nowrap; flex-shrink:0; margin-top:1px; }
  .river-closure-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .river-closure-edit-btn { font-size:11px; color:var(--navy-mid); background:none; border:0.5px solid var(--border-strong); border-radius:4px; padding:2px 8px; cursor:pointer; font-family:inherit; }
  .river-closure-edit-btn:hover { background:var(--navy-light); }
  .river-closure-del-btn  { font-size:11px; color:#dc2626; background:none; border:0.5px solid #fca5a5; border-radius:4px; padding:2px 8px; cursor:pointer; font-family:inherit; }
  .river-closure-del-btn:hover { background:#fee2e2; }
  .river-closure-form { background:var(--bg); border:0.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:14px 16px; margin-top:12px; }
  .river-closure-form-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
  .river-closure-form-label { font-size:11px; font-weight:600; color:var(--text-secondary); width:58px; flex-shrink:0; }
  .river-closure-form-input { padding:5px 8px; border:0.5px solid var(--border-strong); border-radius:var(--radius-sm); font-size:12px; font-family:inherit; color:var(--text); background:var(--surface); outline:none; }
  .river-closure-form-input:focus { border-color:var(--navy-mid); }
  .river-closure-add-btn { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; color:var(--navy-dark); background:none; border:0.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:5px 14px; cursor:pointer; font-family:inherit; margin-top:10px; }
  .river-closure-add-btn:hover { background:var(--navy-light); }
  .river-closure-time-select { width:52px; padding:5px 4px; text-align:center; }
  .river-closure-time-sep { font-size:12px; color:var(--text-tertiary); }
  .river-closure-dow-group { display:flex; flex-wrap:wrap; gap:6px; }
  .river-closure-dow-chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--text); border:0.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:4px 8px; cursor:pointer; user-select:none; }
  .river-closure-dow-chip:has(input:checked) { background:var(--navy-light); border-color:var(--navy-mid); color:var(--navy-dark); font-weight:500; }
  .river-closure-dow-chip input { margin:0; cursor:pointer; }
  /* Title as primary label, raw date/time as a secondary line underneath once a title exists */
  .river-closure-time-secondary { font-weight:400; font-size:11px; color:var(--text-tertiary); margin-top:1px; }
  /* Collapsed note, expand/show-more via native <details> */
  .river-closure-note { margin-top:4px; }
  .river-closure-note summary { font-size:11px; color:var(--navy-mid); cursor:pointer; user-select:none; list-style:none; }
  .river-closure-note summary::-webkit-details-marker { display:none; }
  .river-closure-note summary::before { content:"Show note"; }
  .river-closure-note[open] summary::before { content:"Hide note"; }
  .river-closure-note-body { font-size:11px; color:var(--text-secondary); margin-top:3px; white-space:pre-wrap; }
  /* extra_slots number input, system crew_count_limit rows only */
  .river-closure-extra-slots { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--text-tertiary); }
  .river-closure-extra-slots input { width:40px; padding:2px 4px; border:0.5px solid var(--border-strong); border-radius:4px; font-size:11px; font-family:inherit; color:var(--text); background:var(--surface); outline:none; }
  .river-closure-extra-slots input:focus { border-color:var(--navy-mid); }
  /* Informational reminders (closure_type='reminder') — styled distinctly from
     closures/warnings so they don't read as a problem, matching the blue
     'info' severity used elsewhere (js/utils.js' showWarningsPopover). */
  .river-reminder-row { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; margin-bottom:10px; background:#eff6ff; border:0.5px solid #bfdbfe; border-radius:var(--radius-sm); font-size:12px; }
  .river-reminder-icon { flex-shrink:0; line-height:1.3; }
  .river-reminder-title { font-weight:500; color:var(--text); }
  .river-reminder-row .river-closure-note summary { color:#1d4ed8; }
  [data-theme="dark"] .river-reminder-row { background:rgba(59,130,246,0.12); border-color:rgba(59,130,246,0.35); }
  [data-theme="dark"] .river-reminder-row .river-closure-note summary { color:#93c5fd; }