/* =========================================================================
   Boat Tour Reservations — stylesheet
   Self-contained, no external dependencies
   ========================================================================= */

:root {
  --c-bg:       #f6f7f9;
  --c-surface:  #ffffff;
  --c-border:   #dde1e7;
  --c-text:     #1d2430;
  --c-muted:    #6b7280;
  --c-primary:  #0b5394;   /* navy blue — nautical */
  --c-primary-d:#073d70;
  --c-ok:       #2f7d3b;
  --c-ok-bg:    #e6f3e8;
  --c-err:      #9b2c2c;
  --c-err-bg:   #fbe7e7;
  --c-warn:     #a3670a;
  --c-warn-bg:  #fff5e0;
  --c-focus:    #2563eb;
  --radius:     8px;
  --shadow:     0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.08);
  --max-w:      1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
         "Helvetica Neue", Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

/* ---- Layout ------------------------------------------------------------ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 1.25rem; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.site-header .brand {
  font-weight: 700; font-size: 1.1rem; color: var(--c-primary);
  text-decoration: none;
}
.site-header nav {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.site-header nav a { color: var(--c-text); text-decoration: none; }
.site-header nav a:hover { color: var(--c-primary); }

.site-footer {
  margin-top: 3rem; padding: 1rem 0; border-top: 1px solid var(--c-border);
  background: #fff; text-align: center;
}

/* ---- Typography -------------------------------------------------------- */
h1, h2, h3 { color: var(--c-text); }
h1 { font-size: 1.75rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
.muted { color: var(--c-muted); }
code {
  background: #eef1f5; padding: .1rem .4rem; border-radius: 4px;
  font: .95em ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
details.card { padding-top: 1rem; padding-bottom: 1rem; }
details.card > summary { cursor: pointer; padding: .25rem 0; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block; padding: .55rem .95rem; border-radius: 6px;
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text);
  text-decoration: none; font: inherit; cursor: pointer; line-height: 1.2;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover  { background: #f2f4f7; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.btn-primary {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.btn.btn-primary:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); }
.btn.btn-danger {
  background: #fff; color: var(--c-err); border-color: var(--c-err);
}
.btn.btn-danger:hover { background: var(--c-err-bg); }
.btn.btn-small { padding: .3rem .6rem; font-size: .88rem; }

/* ---- Forms ------------------------------------------------------------- */
.form label {
  display: block; margin-bottom: .85rem; font-size: .9rem; color: #374151;
}
.form input[type=text], .form input[type=tel], .form input[type=email],
.form input[type=password], .form input[type=number],
.form input[type=date], .form input[type=time], .form input[type=search],
.form input:not([type]), .form textarea, .form select {
  display: block; width: 100%; margin-top: .25rem;
  padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: #fff; color: var(--c-text);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus);
}

.form-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem 1rem;
}
.form-grid .form-grid-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- Alerts ------------------------------------------------------------ */
.alert {
  padding: .75rem 1rem; border-radius: 6px; margin: 1rem 0;
  border: 1px solid transparent;
}
.alert-ok  { background: var(--c-ok-bg);   border-color: #bfe3c4; color: var(--c-ok); }
.alert-err { background: var(--c-err-bg);  border-color: #f1c2c2; color: var(--c-err); }
.alert-warn{ background: var(--c-warn-bg); border-color: #f0d9a6; color: var(--c-warn); }

/* ---- Guest cruise grid ------------------------------------------------- */
.cruise-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.cruise-card h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.cruise-card .cruise-when { margin: .25rem 0 .5rem; font-size: 1rem; }
.cruise-card .seats { margin: .75rem 0; }
.seats-full  { color: var(--c-err); }
.seats-low   { color: var(--c-warn); }
.cruise-card.is-full { opacity: .6; }

.hero-confirm { border-top: 4px solid var(--c-ok); }
.hero-confirm .conf-code {
  font-size: 1.3rem; background: var(--c-ok-bg);
  padding: .5rem .75rem; border-radius: 6px; display: inline-block;
}

/* Kiosk-mode confirmation: larger, centered, friendlier for self-service */
.kiosk-confirm {
  text-align: center;
  padding: 2.5rem 2rem;
  max-width: 640px;
  margin: 2rem auto;
  border-top: 6px solid var(--c-ok);
}
.kiosk-confirm h2 { color: var(--c-ok, #2e7d32); }
.kiosk-confirm .btn-lg { padding: .75rem 1.5rem; font-size: 1.1rem; }

/* ---- Tables ------------------------------------------------------------ */
.data-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); margin: .5rem 0 1.5rem;
}
.data-table th, .data-table td {
  padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.data-table thead th {
  background: #f1f4f8; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .03em; color: #374151;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.row-muted td { color: var(--c-muted); text-decoration: line-through; }

/* ---- POS specific ------------------------------------------------------ */
.pos-table tr { cursor: default; }
.pos-table .seat-count { font-weight: 600; }

/* ---- Tabs -------------------------------------------------------------- */
.tabs {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--c-border);
  margin-bottom: 1rem; flex-wrap: wrap;
}
.tabs a {
  padding: .6rem .95rem; text-decoration: none; color: var(--c-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--c-text); }
.tabs a.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }

/* ---- Modal ------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem;
  z-index: 100; overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal .modal-body { position: relative; max-width: 480px; width: 100%; }
.modal .modal-close {
  position: absolute; top: .5rem; right: .75rem; background: none; border: 0;
  font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--c-muted);
}
.modal .modal-close:hover { color: var(--c-text); }

/* ---- Manifest layout --------------------------------------------------- */
.manifest-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.manifest-crew { margin-bottom: 1rem; }
.manifest-crew table th { width: 9rem; }
.manifest-table td code { font-size: .9em; }
.user-actions { white-space: nowrap; }
.user-actions form { margin-right: .25rem; }

/* ---- Calendar (guest view) -------------------------------------------- */
.calendar-wrap { margin: 1rem 0 2rem; }
.calendar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.calendar-head h2 { margin: 0; font-size: 1.75rem; }
.calendar-head .btn { font-size: 1rem; padding: .6rem 1rem; }

.calendar {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 2px solid #2d3748;
  border-radius: var(--radius); overflow: hidden; table-layout: fixed;
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
}
.calendar thead th {
  background: #2d3748; color: #fff; font-size: 1rem; padding: .85rem .5rem;
  text-align: center; letter-spacing: .05em; font-weight: 600;
  border-bottom: 2px solid #1a202c;
}
.calendar tbody td {
  vertical-align: top; min-height: 140px; padding: .6rem .5rem;
  border-right: 1px solid #cbd5e0;
  border-bottom: 1px solid #cbd5e0; position: relative;
  background: #fff;
}
.calendar tbody tr td:last-child { border-right: 0; }
.calendar tbody tr:last-child td { border-bottom: 0; }
.cal-date {
  font-size: 1.1rem; font-weight: 700; color: #1a202c;
  margin-bottom: .35rem;
}
.cal-other-month { background: #f7fafc; }
.cal-other-month .cal-date { color: #cbd5e0; }
.cal-past        { background: #f7fafc; }
.cal-past .cal-date { color: #cbd5e0; }
.cal-today { background: #fffdf0; }
.cal-today .cal-date {
  display: inline-block; background: var(--c-primary); color: #fff;
  border-radius: 999px; padding: .2rem .7rem; min-width: 1.8rem; text-align: center;
  font-size: 1rem;
}

/* Only dates with sailings get the hover/click affordance */
.cal-has-slots {
  cursor: pointer;
  transition: box-shadow .12s, transform .12s;
}
.cal-has-slots:hover {
  box-shadow: inset 0 0 0 3px var(--c-primary);
  z-index: 1;
}
.cal-has-slots:focus { outline: 3px solid var(--c-primary); outline-offset: -3px; }

/* Per-sailing chips inside each calendar cell */
.cal-sailings {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .3rem;
}
.cal-sailings li {
  font-size: .85rem; line-height: 1.3;
  padding: .35rem .5rem; border-radius: 5px;
  border: 2px solid;
  display: flex; flex-direction: column;
  gap: .1rem;
}
.cal-sailings .sail-time {
  font-weight: 700; font-size: .95rem;
}
.cal-sailings .sail-seats {
  font-size: .78rem; font-weight: 500;
}

/* Vivid color coding — high contrast against white cells */
.cal-sailings .sail-ok {
  background: #c6f6d5; border-color: #38a169; color: #22543d;
}
.cal-sailings .sail-low {
  background: #fefcbf; border-color: #d69e2e; color: #744210;
}
.cal-sailings .sail-full {
  background: #fed7d7; border-color: #e53e3e; color: #742a2a;
}
.cal-sailings .sail-full .sail-time { text-decoration: line-through; }

.cal-legend {
  margin-top: 1rem; font-size: .95rem;
  display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center;
}
.cal-legend-item {
  display: inline-flex; align-items: center; gap: .4rem;
}
.chip-swatch {
  display: inline-block; width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid;
}
.chip-swatch.chip-ok   { background: #c6f6d5; border-color: #38a169; }
.chip-swatch.chip-low  { background: #fefcbf; border-color: #d69e2e; }
.chip-swatch.chip-full { background: #fed7d7; border-color: #e53e3e; }

@media (max-width: 780px) {
  .calendar tbody td { min-height: 90px; padding: .35rem .3rem; }
  .cal-date { font-size: .9rem; }
  .cal-sailings li { font-size: .7rem; padding: .2rem .3rem; }
  .cal-sailings .sail-time { font-size: .8rem; }
  .cal-sailings .sail-seats { font-size: .65rem; }
  .calendar-head h2 { font-size: 1.25rem; }
}

/* ---- Terms & conditions ---------------------------------------------- */
.terms-panel {
  background: #fafbfc; border: 1px solid var(--c-border); border-radius: 6px;
  padding: .5rem .75rem; margin: .5rem 0 1rem;
}
.terms-panel summary {
  cursor: pointer; color: var(--c-primary); padding: .3rem 0;
  font-size: .9rem;
}
.terms-text {
  max-height: 320px; overflow-y: auto; padding: .75rem 0;
  border-top: 1px solid var(--c-border); margin-top: .5rem;
  font-size: .88rem; line-height: 1.55;
}
.terms-accept {
  display: flex; gap: .65rem; align-items: flex-start;
  background: #fff5e0; border: 1px solid #f0d9a6; border-radius: 6px;
  padding: .75rem 1rem; margin: .5rem 0 1rem; cursor: pointer;
}
.terms-accept input { margin-top: .15rem; width: 1.25rem; height: 1.25rem; }
.terms-accept span { font-size: .95rem; }
.terms-editor {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; line-height: 1.5;
}

/* ---- Cruise booking-status color coding (manager dashboard) ----------- */
tr.row-status-empty { background: #fff; }
tr.row-status-some  { background: #e6f3e8; } /* green tint */
tr.row-status-most  { background: #fff5e0; } /* amber tint */
tr.row-status-full  { background: #fbe7e7; } /* red tint */
tr.row-status-some td:first-child,
tr.row-status-most td:first-child,
tr.row-status-full td:first-child {
  border-left: 4px solid transparent;
}
tr.row-status-some td:first-child { border-left-color: #8dca97; }
tr.row-status-most td:first-child { border-left-color: #d9b87a; }
tr.row-status-full td:first-child { border-left-color: var(--c-err); }

.cruise-status-swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; vertical-align: middle;
  margin: 0 .25rem 0 .6rem; border: 1px solid;
}
.cruise-status-swatch.status-empty { background: #fff;    border-color: #dde1e7; }
.cruise-status-swatch.status-some  { background: #e6f3e8; border-color: #8dca97; }
.cruise-status-swatch.status-most  { background: #fff5e0; border-color: #d9b87a; }
.cruise-status-swatch.status-full  { background: #fbe7e7; border-color: var(--c-err); }

/* ---- Booking panel (slide-down beneath calendar) ---------------------- */
.booking-panel {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem; margin: 1rem 0 2rem;
  max-width: 720px;
}
.booking-step-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.booking-step-head h2 { margin: 0; font-size: 1.25rem; }
.booking-step-actions {
  margin-top: 1rem; display: flex; gap: .5rem; justify-content: flex-end;
  flex-wrap: wrap;
}
.btn.btn-lg { font-size: 1.05rem; padding: .8rem 1.5rem; }

.time-list { display: grid; gap: .75rem; }
.time-slot {
  display: block; width: 100%; text-align: left; background: #fff;
  border: 2px solid var(--c-border); border-radius: var(--radius);
  padding: 1rem; font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.time-slot:hover:not(:disabled) {
  border-color: var(--c-primary); background: #f0f6fb;
}
.time-slot:disabled { opacity: .55; cursor: not-allowed; }
.time-slot.is-full { background: #fafbfc; }
.ts-time { font-size: 1.2rem; font-weight: 700; color: var(--c-primary); }
.ts-tour { font-weight: 600; margin: .15rem 0; }
.ts-avail { font-size: .9rem; color: var(--c-muted); }
.ts-desc { font-size: .85rem; margin-top: .35rem; }

.party-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; margin: 1.5rem 0 .5rem;
}
.party-btn {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  font-size: 1.6rem; font-weight: 700; padding: 0;
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.party-btn:hover:not(:disabled) { background: var(--c-primary-d); }
.party-count {
  font-size: 3rem; font-weight: 700; min-width: 4rem; text-align: center;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.party-max { text-align: center; font-size: .9rem; }

.passenger-name-fields {
  display: grid; gap: .75rem; margin-bottom: 1rem;
}
.passenger-field {
  display: block; margin: 0 0 .85rem;
  padding: .65rem .75rem;
  background: #f8f9fb;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.passenger-field .pf-label {
  display: block; font-size: .9rem; color: #374151; margin-bottom: .25rem;
}
.passenger-field input { margin-top: 0; }
.passenger-field .pf-child {
  color: #6b5d2a;
  cursor: pointer;
  user-select: none;
}
.passenger-field .pf-child input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem;
  accent-color: #b8860b;
  cursor: pointer;
}

/* ---- Boarding interface ----------------------------------------------- */
.boarding-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  margin-bottom: 1.25rem;
}
.bstat {
  background: #f1f4f8; border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: .75rem; text-align: center;
}
.bstat-num { font-size: 1.6rem; font-weight: 700; color: var(--c-primary); line-height: 1; }
.bstat-label { font-size: .8rem; color: var(--c-muted); margin-top: .25rem; }
@media (max-width: 560px) { .boarding-stats { grid-template-columns: 1fr; } }

.manifest-filter {
  width: 100%; padding: .75rem 1rem; font-size: 1rem;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: #fff; margin-bottom: .75rem;
}
.manifest-filter:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); }

/* ============================================================
   Boarding manifest — grouped party cards, mobile-first
   ============================================================ */

.boarding-groups {
  display: grid; gap: 1rem; margin: 0;
}
.boarding-groups.readonly button { display: none; }

.party-card {
  background: #fff; border: 2px solid var(--c-border);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: border-color .15s, opacity .15s;
}
.party-card.hide { display: none; }

/* Card header — color-coded by party state */
.party-head {
  display: flex; gap: 1rem; padding: .9rem 1rem;
  border-bottom: 1px solid var(--c-border);
}
.party-head-main { flex: 1; min-width: 0; }
.party-booker {
  font-size: 1.2rem; font-weight: 700; line-height: 1.2;
  color: #1a202c;
}
.party-size {
  display: inline-block; margin-left: .5rem;
  background: var(--c-primary); color: #fff;
  border-radius: 999px; padding: .15rem .65rem;
  font-size: .8rem; font-weight: 600; vertical-align: middle;
}
.party-meta {
  margin-top: .35rem; display: flex; gap: 1rem;
  flex-wrap: wrap; align-items: center;
  font-size: .95rem;
}
.party-phone {
  color: var(--c-primary); text-decoration: none;
  font-weight: 600; padding: .3rem 0;
}
.party-phone:active { opacity: .6; }
.party-code code {
  background: #eef1f5; padding: .15rem .5rem; border-radius: 4px;
  font-size: .85rem;
}
.party-notes {
  margin-top: .45rem; padding: .4rem .6rem;
  background: #fff5e0; border-left: 3px solid var(--c-warn);
  border-radius: 3px; font-size: .9rem; color: #744210;
}

.party-head-status {
  flex-shrink: 0; text-align: center;
  padding: .25rem .5rem; min-width: 4.5rem;
  align-self: center;
}
.party-progress {
  font-size: 1.6rem; font-weight: 700; line-height: 1;
  color: var(--c-muted);
}
.party-progress-label {
  font-size: .7rem; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: .15rem;
}

/* Card state: waiting / partial / complete */
.party-state-waiting  { border-color: #d9dde3; }
.party-state-waiting  .party-head { background: #f7fafc; }
.party-state-partial  { border-color: var(--c-warn); }
.party-state-partial  .party-head { background: #fff5e0; }
.party-state-partial  .party-progress { color: #744210; }
.party-state-complete { border-color: #8dca97; }
.party-state-complete .party-head { background: #e6f3e8; }
.party-state-complete .party-progress { color: #1d5a26; }

/* Bulk action row */
.party-bulk-actions {
  padding: .65rem 1rem; background: #f7fafc;
  border-bottom: 1px solid var(--c-border);
}
.btn.btn-bulk {
  width: 100%; font-size: 1rem; padding: .8rem;
  font-weight: 600;
}

/* Per-passenger rows */
.party-passengers { list-style: none; margin: 0; padding: 0; }
.boarding-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--c-border);
  transition: background .12s;
}
.boarding-item:last-child { border-bottom: 0; }
.boarding-item.is-boarded { background: #f0f8f1; }
.boarding-item.is-boarded .bi-name { text-decoration: line-through; color: var(--c-muted); }
.boarding-item.is-noshow  { background: #fbe7e7; }
.boarding-item.is-noshow  .bi-name { color: var(--c-err); text-decoration: line-through; }

.bi-main { flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
.bi-name {
  font-weight: 600; font-size: 1.05rem;
  word-break: break-word;
}
.bi-status-label {
  font-size: .8rem; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .03em;
  flex-shrink: 0;
}
.boarding-item.is-boarded .bi-status-label { color: var(--c-ok); font-weight: 700; }
.boarding-item.is-noshow  .bi-status-label { color: var(--c-err); font-weight: 700; }

/* Action buttons — large tap targets */
.bi-actions {
  display: flex; gap: .5rem; align-items: center; flex-shrink: 0;
}
.btn.btn-board {
  background: var(--c-ok); color: #fff; border-color: var(--c-ok);
  padding: .7rem 1.1rem; font-weight: 600; font-size: 1rem;
  min-width: 5rem;
}
.btn.btn-board:active { transform: scale(.97); }
.btn.btn-noshow {
  background: #fff; color: var(--c-err); border-color: var(--c-err);
  padding: .7rem 1.1rem; font-weight: 600; font-size: 1rem;
}
.btn.btn-undo {
  background: #fff; color: var(--c-muted); border-color: var(--c-border);
  padding: .7rem 1.1rem; font-size: .95rem;
}

/* Show/hide action buttons based on row status */
.boarding-item:not(.is-boarded):not(.is-noshow) .btn-undo { display: none; }
.boarding-item.is-boarded .btn-board,
.boarding-item.is-boarded .btn-noshow,
.boarding-item.is-noshow  .btn-board,
.boarding-item.is-noshow  .btn-noshow { display: none; }

/* Patch 20: child indicator badge on boarding screen */
.bi-child-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .5rem;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe69c;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  vertical-align: middle;
  white-space: nowrap;
}
.boarding-item.is-child { background: linear-gradient(to right, #fffaf0, transparent 40%); }
.boarding-item.is-child.is-boarded { background: #f0f8f1; }
.boarding-item.is-child.is-noshow  { background: #fbe7e7; }

/* ===== MOBILE (cellphone) — 640px and down ===== */
@media (max-width: 640px) {
  .party-head { padding: .75rem .85rem; }
  .party-booker { font-size: 1.1rem; }
  .party-meta { gap: .65rem; font-size: 1rem; }
  .party-phone { font-size: 1.05rem; }   /* Easier to tap */
  .party-progress { font-size: 1.4rem; }

  /* Stack passenger row vertically: name on top, buttons below */
  .boarding-item {
    flex-wrap: wrap; gap: .6rem; padding: .85rem;
  }
  .bi-main { width: 100%; }
  .bi-name { font-size: 1.15rem; }    /* Patch 20: bigger names for smartphone use */
  .bi-actions {
    width: 100%; gap: .5rem;
    display: grid; grid-template-columns: 1fr 1fr;
  }
  /* Make individual buttons fill the grid column for big tap targets */
  .bi-actions .btn { width: 100%; padding: 1rem .5rem; font-size: 1.05rem; }
  .boarding-item.is-boarded .bi-actions,
  .boarding-item.is-noshow  .bi-actions {
    grid-template-columns: 1fr;
  }

  /* Bulk button on phones */
  .btn.btn-bulk { padding: 1rem; font-size: 1.05rem; }

  /* Patch 20: top stats panel — single column on narrow phones */
  .boarding-stats { font-size: .95rem; }

  /* Hide noisy column headers and search box less prominently on phones */
  .boarding-page h1 { font-size: 1.35rem; }
  .boarding-page h2 { font-size: 1.1rem; }
}

/* Extra-narrow phones (under 400px) — make taps even friendlier */
@media (max-width: 400px) {
  .bi-actions .btn { padding: 1.1rem .25rem; font-size: 1rem; min-width: 0; }
  .party-head { padding: .6rem .75rem; }
  .boarding-item { padding: .75rem; }
}

/* Print: collapse everything to traditional list */
@media print {
  .party-card { box-shadow: none; border: 1px solid #999; }
  .party-bulk-actions, .bi-actions, .bi-status-label { display: none; }
}

/* Print-only visibility helpers */
.print-only { display: none; }
@media print {
  .print-only { display: table; }
  .no-print { display: none !important; }
  .boarding-item.is-boarded { background: transparent; }
}

/* ---- Cruises toolbar (sort + legend above Upcoming Cruises) ------------ */
.cruises-toolbar {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin: .5rem 0 .75rem;
}
.cruises-toolbar .sort-form {
  display: flex; align-items: center; gap: .5rem;
}
.cruises-toolbar .sort-form label {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  font-size: .9rem; color: #374151;
}
.cruises-toolbar .sort-form select {
  padding: .35rem .5rem; font: inherit;
  border: 1px solid var(--c-border); border-radius: 4px;
}
.cruises-toolbar .status-legend {
  font-size: .88rem; color: var(--c-muted);
  margin-left: auto;
}

/* ---- Staff assignment selects ----------------------------------------- */
.staff-select {
  margin-top: .25rem;
  padding: .5rem .7rem; font: inherit;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: #fff; color: var(--c-text); width: 100%;
}
.staff-select:focus {
  outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus);
}

/* ---- "Apply to sailings" callout on tour edit form -------------------- */
.apply-to-sailings {
  display: flex; gap: .6rem; align-items: flex-start;
  background: #fff5e0; border: 1px solid #f0d9a6; border-radius: 6px;
  padding: .6rem .85rem; margin: .5rem 0; cursor: pointer;
}
.apply-to-sailings input { margin-top: .25rem; }
.apply-to-sailings strong { display: block; }
.apply-to-sailings small { display: block; margin-top: .1rem; }

/* ---- Show/hide password toggle ---------------------------------------- */
.password-field .password-input-wrap {
  display: flex; gap: .35rem; align-items: center; margin-top: .25rem;
}
.password-field .password-input-wrap input { flex: 1; margin: 0; }
.password-field .password-input-wrap .js-toggle-pw {
  padding: .45rem .7rem; min-width: 3.5rem;
}

.pw-reset-form .js-toggle-pw {
  padding: .3rem .55rem; min-width: 3rem;
}

/* ---- Small role / status tag ------------------------------------------ */
.tag {
  display: inline-block; padding: .05rem .45rem;
  font-size: .7rem; font-weight: 600;
  border-radius: 3px; letter-spacing: .02em; text-transform: uppercase;
  margin-left: .4rem; vertical-align: middle;
}
.tag-muted { background: #eef1f5; color: var(--c-muted); border: 1px solid var(--c-border); }

/* ---- Login page ------------------------------------------------------- */
.login-page {
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 2rem; min-height: 50vh;
}
.login-card { max-width: 420px; width: 100%; }

/* ---- Staff-scope radios (cruise edit form) ---------------------------- */
.staff-scope {
  margin: .75rem 0 .5rem;
  border: 1px solid var(--c-border); border-radius: 6px;
  padding: .75rem 1rem; background: #fafbfc;
}
.staff-scope legend {
  padding: 0 .4rem; font-weight: 600; font-size: .95rem;
}
.scope-option {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .25rem; margin: 0; cursor: pointer;
  border-radius: 4px;
}
.scope-option:hover { background: #fff; }
.scope-option input { margin-top: .2rem; flex-shrink: 0; }
.scope-option strong { display: inline; }
.scope-option small { display: inline; margin-left: .3rem; }

/* ---- Permissions editor ----------------------------------------------- */
tr.row-editing {
  background: #fff5e0 !important;
  box-shadow: inset 4px 0 0 var(--c-warn);
}
tr.row-editing code { background: rgba(255,255,255,.6); }

.perm-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .4rem; margin: .5rem 0 .75rem;
}
@media (max-width: 720px) { .perm-grid { grid-template-columns: 1fr; } }
.perm-chip {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; background: #fff; border: 1px solid var(--c-border);
  border-radius: 6px; font-size: .9rem; cursor: pointer; user-select: none;
  margin: 0;
}
.perm-chip:has(input:checked) {
  background: #e6f3e8; border-color: #8dca97;
}
.perm-chip input { margin: 0; }
.perm-count {
  display: inline-block; padding: .1rem .5rem;
  background: var(--c-primary); color: #fff; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
}

/* ---- Day-of-week chip picker ------------------------------------------ */
.dow-picker {
  border: 1px solid var(--c-border); border-radius: 6px;
  padding: .6rem .75rem; margin-bottom: .85rem;
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.dow-picker legend {
  padding: 0 .35rem; color: #374151; font-size: .85rem;
}
.dow-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border: 1px solid var(--c-border);
  border-radius: 999px; background: #fff; font-size: .9rem;
  cursor: pointer; user-select: none;
  margin: 0; /* override .form label default */
}
.dow-chip input { margin: 0; }
.dow-chip:has(input:checked) {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

/* ---- Print ------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .no-print, .modal { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .card, .data-table { box-shadow: none; border-color: #888; page-break-inside: avoid; }
}