/* =============================================================================
   scuba.css — consolidated styles for Scuba Calendar & Roster
   NOTE: This file is served from /assets/css/scuba.css
         Background/image paths are written relative to THIS file.
============================================================================= */

/* ---- Page background & basics ---- */
html, body { height: 100%; }

/* ---- Small utility classes ---- */
.main-left-200 { margin-left:var(--sidenav-width, 200px); }
.toolbar-btn { padding:8px 8px !important; }
.modal-close-btn { color:inherit !important; background:transparent !important; border:none !important; }
.hint-below { position:absolute; left:0; bottom:-40px; }
.res-inline { display:flex; gap:10px; flex-wrap:wrap; }
.res-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.res-actions .res-error { margin-right:auto; }
.input-state { max-width:90px; text-transform:uppercase; }
.input-zip { max-width:120px; }
.toolbar-img-32 { width:32px; height:32px; display:block; }

/* Modal z-index & widths */
#groupModal { z-index:20 !important; }
#xferModal  { z-index:25 !important; }
#dropConfirm{ z-index:30 !important; }
#posWaiverPaperConfirmModal { z-index:60 !important; }

#newResModal .w3-modal-content,
#groupModal  .w3-modal-content,
#xferModal   .w3-modal-content { max-width:760px; }

#dropConfirm .w3-modal-content { max-width:420px; }
#posWaiverPaperConfirmModal .waiver-paper-confirm-content {
  max-width: 420px !important;
  width: min(calc(100vw - 32px), 420px);
  padding: 0;
}

.waiver-paper-confirm-head {
  color: #fff;
  padding: 8px 12px;
}

.waiver-paper-confirm-head h5 {
  font-size: 16px;
  line-height: 1.2;
}

.waiver-paper-confirm-body {
  padding: 14px 16px 12px;
}

.waiver-paper-confirm-name {
  display: none;
  font-weight: 700;
  margin-bottom: 6px;
}

.waiver-paper-confirm-msg {
  margin: 0;
  color: #374151 !important;
}

.waiver-paper-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
}

/* ---- Toast ---- */
.drop-toast{
  position:fixed; right:20px; bottom:20px;
  background:#333; color:#fff; padding:10px 14px; border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:9999; pointer-events:none; font-size:.9rem;
}
.drop-toast.show{ opacity:1; transform:translateY(0); }
.drop-toast.is-error{
  left:50%;
  right:auto;
  top:28%;
  bottom:auto;
  min-width:320px;
  max-width:min(90vw, 560px);
  text-align:center;
  background:#c62828;
  box-shadow:0 10px 28px rgba(127,29,29,.35);
  transform:translate(-50%, 10px);
}
.drop-toast.show.is-error{
  transform:translate(-50%, 0);
}

/* ---- Theme ---- */
/* Let global theme control the accent via --focus-color, with DR blue as fallback */
.mycolor{
  background-color: var(--focus-color, #1767a7);
  color: #fff;
}

/* ===== Scuba modal theming (Travel / Activities) ===== */
.scuba-modal .w3-modal-content {
  background: #ffffff !important;
  color: #111827 !important;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--focus-color, #1767a7) !important;
}

.trip-log-summary {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  padding: 10px;
  background: rgba(248, 250, 252, 0.86);
  min-height: 90px;
  color: #1f2937;
}

.trip-log-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trip-log-summary-section {
  min-width: 0;
}

.trip-log-summary-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.trip-log-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 12px;
}

.trip-log-summary-row:first-of-type {
  border-top: 0;
}

.trip-log-summary-row span:first-child {
  color: #64748b;
}

.trip-log-summary-row span:last-child {
  text-align: right;
  font-weight: 700;
}

.trip-log-summary-empty {
  color: #64748b;
  font-size: 13px;
}

body.theme-dark .trip-log-summary {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.32);
  color: #e5e7eb;
}

body.theme-dark .trip-log-summary-title,
body.theme-dark .trip-log-summary-row span:first-child,
body.theme-dark .trip-log-summary-empty {
  color: #94a3b8;
}

@media (max-width: 640px) {
  .trip-log-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.boat-modal-head {
  position: relative;
  padding: 6px 12px;
}
.boat-modal-head h5 {
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.1;
}
.boat-modal-close {
  position: absolute;
  top: 2px;
  right: 6px;
  line-height: 1;
  padding: 2px 8px;
}

body.theme-dark .scuba-modal .w3-modal-content {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: var(--focus-color, #1767a7) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

body.theme-grays .scuba-modal .w3-modal-content {
  background: #f9fafb !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
}

body.theme-dark .waiver-paper-confirm-msg {
  color: #e5e7eb !important;
}

body.theme-grays .waiver-paper-confirm-msg {
  color: #111827 !important;
}

body.theme-dark .scuba-modal .w3-text-grey {
  color: #cbd5e1 !important;
}

.scuba-modal footer {
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

body.theme-dark .scuba-modal footer {
  border-top-color: rgba(15, 23, 42, 0.9);
}

.owe-autobill-modal-content {
  max-width: 640px !important;
  width: min(calc(100vw - 32px), 640px);
}

.autobill-card-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.autobill-card-row #autobillCardSelect {
  flex: 0 1 58%;
  min-width: 0;
}

.autobill-card-row #autobillAddCardBtn {
  flex: 0 0 auto;
  min-width: 188px;
  padding-left: 18px !important;
  padding-right: 18px !important;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .autobill-card-row {
    flex-wrap: wrap;
  }

  .autobill-card-row #autobillCardSelect,
  .autobill-card-row #autobillAddCardBtn {
    width: 100%;
  }
}

.scuba-modal .w3-input,
.scuba-modal .w3-select,
.scuba-modal .w3-textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
}

body.theme-dark .scuba-modal .w3-input,
body.theme-dark .scuba-modal .w3-select,
body.theme-dark .scuba-modal .w3-textarea {
  background: #0f172a !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}

body.theme-dark .scuba-modal .w3-input::placeholder,
body.theme-dark .scuba-modal .w3-textarea::placeholder {
  color: #9ca3af;
}

body.theme-grays .scuba-modal .w3-input,
body.theme-grays .scuba-modal .w3-select,
body.theme-grays .scuba-modal .w3-textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
}

.scuba-modal .w3-light-grey {
  background: #f1f5f9 !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
}
body.theme-dark .scuba-modal .w3-light-grey {
  background: rgba(15, 23, 42, 0.65) !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
body.theme-grays .scuba-modal .w3-light-grey {
  background: #eef2f7 !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}

.scuba-modal .w3-white {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
}
body.theme-dark .scuba-modal .w3-white {
  background: #0f172a !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}
body.theme-grays .scuba-modal .w3-white {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

.scuba-activity-email-modal {
  z-index: 2500 !important;
  padding-top: 5vh !important;
}
.scuba-activity-email-content {
  width: min(680px, calc(100vw - 24px));
  max-width: 680px;
  border-radius: 14px !important;
  box-shadow: 0 22px 54px rgba(15,23,42,.34);
}
.scuba-activity-email-head {
  position: relative;
  padding: 13px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--focus-color, #1767a7) 78%, #0f172a), var(--focus-color, #1767a7));
  color: #fff;
}
.scuba-activity-email-modal.is-cancellation .scuba-activity-email-head {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);
}
.scuba-activity-email-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding-right: 38px;
  font-size: 17px;
  line-height: 1.2;
}
.scuba-activity-email-body { padding: 16px 18px 10px; }
.scuba-activity-email-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 10px;
  background: #f8fafc;
}
.scuba-activity-email-name { color: #0f172a; font-size: 15px; font-weight: 700; }
.scuba-activity-email-schedule,
.scuba-activity-email-recipient-count,
.scuba-activity-email-help { color: #64748b; font-size: 12px; }
.scuba-activity-email-schedule { margin-top: 2px; }
.scuba-activity-email-recipient-count { text-align: right; }
.scuba-activity-email-field { margin-bottom: 12px; }
.scuba-activity-email-field label {
  display: block;
  margin-bottom: 4px;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.scuba-activity-email-saved-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
}
.scuba-activity-email-saved-row[hidden] { display: none !important; }
.scuba-activity-email-saved-row select {
  flex: 1 1 auto;
  min-width: 0;
}
.scuba-activity-email-save-message {
  flex: 0 0 auto;
  white-space: nowrap;
}
.scuba-activity-email-field textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.45;
}
.scuba-activity-email-status { min-height: 20px; margin-top: 8px; font-size: 12px; }
.scuba-activity-email-status.is-error { color: #b91c1c; }
.scuba-activity-email-status.is-success { color: #15803d; }
.scuba-activity-email-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 11px 18px 14px;
  background: #f8fafc;
}
.scuba-activity-email-modal.is-cancellation .scuba-activity-email-send {
  background: #b91c1c !important;
  color: #fff !important;
}
body.theme-dark .scuba-activity-email-context,
body.theme-dark .scuba-activity-email-actions {
  background: #111827;
  border-color: rgba(148,163,184,.25);
}
body.theme-dark .scuba-activity-email-name { color: #f8fafc; }
body.theme-dark .scuba-activity-email-schedule,
body.theme-dark .scuba-activity-email-recipient-count,
body.theme-dark .scuba-activity-email-help,
body.theme-dark .scuba-activity-email-field label { color: #cbd5e1; }
@media (max-width: 540px) {
  .scuba-activity-email-context { align-items: flex-start; flex-direction: column; }
  .scuba-activity-email-recipient-count { text-align: left; }
  .scuba-activity-email-saved-row { align-items: stretch; flex-direction: column; }
  .scuba-activity-email-save-message { width: 100%; }
  .scuba-activity-email-field textarea { min-height: 150px; }
}

/* ===== SCUBA toolbar (top icon row) ===== */

.scuba-toolbar-wrap {
  max-width: 1500px;
  margin: 14px auto 14px;
  padding: 0 12px;
}

.scuba-toolbar {
  background-color: rgba(0, 0, 0, .1);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* make buttons compact like PO */
.scuba-toolbar .w3-button {
  padding: 8px 8px !important;
}

/* Taller tabs with underline for active */
.scuba-toolbar .w3-button.scuba-tab {
  position: relative;
  padding-top: 6px !important;
  padding-bottom: 16px !important;
}

.scuba-toolbar .scuba-tab.scuba-tab-active {
  color: #0A6FC2 !important;
}

.scuba-toolbar .scuba-tab.scuba-tab-active::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2px;
  height: 3px;
  border-radius: 999px;
  background: #0A6FC2;
  pointer-events: none;
}

.scuba-pagebar .pagebar-tabs {
  width: 100%;
}

@media (max-width: 980px) {
  .scuba-pagebar {
    padding: 6px 8px;
  }
  .scuba-pagebar .pagebar-tabs {
    flex-wrap: wrap;
    gap: 6px 2px;
    align-items: center;
  }
  .scuba-pagebar .pagebar-tab {
    flex: 0 0 auto;
  }
  .scuba-pagebar .scuba-pagebar-separator {
    display: none;
  }
}

@media (max-width: 640px) {
  .scuba-pagebar-wrap {
    padding: 0 8px;
  }
  .scuba-pagebar .pagebar-tabs {
    justify-content: flex-start;
  }
  .scuba-pagebar .pagebar-tab {
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Segmented toggle pills (used on Classes Active/Closed) */
.scuba-pill-toggle{
  display:inline-flex;
  border-radius:999px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--focus-color, #1767a7) 35%, rgba(0,0,0,.2));
  background: color-mix(in srgb, var(--focus-color, #1767a7) 10%, #ffffff);
}
body.theme-dark .scuba-pill-toggle{
  background: color-mix(in srgb, var(--focus-color, #1767a7) 18%, #0b1626);
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 40%, rgba(255,255,255,.15));
}
.scuba-pill{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}
.scuba-pill span{
  display:inline-block;
  padding:5px 12px;
  font-size:12px;
  line-height:1;
  color: var(--focus-color, #1767a7);
  background: transparent;
}
.scuba-pill.is-active span{
  background: var(--focus-color, #1767a7);
  color:#ffffff;
}
.scuba-pill span:hover{
  background: color-mix(in srgb, var(--focus-color, #1767a7) 18%, transparent);
}

/* ===== Calendar base & header ===== */

.cal-wrap { margin:12px; }

.manifest-day-link{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.manifest-day-link:hover,
.manifest-day-link:focus-visible{
  color: var(--focus-color, #1767a7);
  text-decoration: underline;
}
.range-date-row,
.book-day-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.range-date-row{
  flex-direction:column;
}
.range-manifest-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--focus-color, #1767a7);
  text-decoration:none;
}
.range-manifest-link:hover,
.range-manifest-link:focus-visible{
  color: color-mix(in srgb, var(--focus-color, #1767a7) 78%, #000000);
}

/* Outer calendar header container */
.cal-bar {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Action bar (bookings/back-forward row) */
.pagebar.actionbar {
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
body.theme-dark .pagebar.actionbar {
  box-shadow: 0 1px 8px rgba(255,255,255,0.08);
}

/* Row 1: arrows + date */
.cal-bar-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-bar-main #calPrev,
.cal-bar-main #calNext {
  flex: 0 0 auto;
}

.cal-title {
  font-size: 18px;
  font-weight: 600;
}

.cal-bar-main .cal-title {
  flex: 1 1 auto;
  text-align: center;
  cursor: pointer;
  position: relative;
}

/* Row 2: view-mode buttons (Month / 7 Day / 3 Day / Today) */
.cal-viewbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* Base calendar nav + view buttons
   (we'll theme per body.theme-* below) */
.cal-nav-btn,
.cal-viewbtn,
#calToday {
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(148,163,184,0.6);
  cursor: pointer;
}

/* LIGHT THEME: use same bg as .day */
body.theme-light .cal-nav-btn,
body.theme-light .cal-viewbtn,
body.theme-light #calToday {
  background: #ffffff;
  color: #111827;
}

/* DARK THEME: match day cell background (#3f4e5a) */
body.theme-dark .cal-nav-btn,
body.theme-dark .cal-viewbtn,
body.theme-dark #calToday {
  background: #3f4e5a;
  color: #e5e7eb;
  border-color: rgba(15,23,42,0.9);
}

/* GRAYS THEME: match gray day cells */
body.theme-grays .cal-nav-btn,
body.theme-grays .cal-viewbtn,
body.theme-grays #calToday {
  background: #f3f4f6;
  color: #111827;
}

/* Today button should use focus color + contrast */
#calToday {
  background: var(--focus-color, #1767a7) !important;
  color: var(--focus-contrast, #fff) !important;
  border-color: var(--focus-color, #1767a7) !important;
}

/* Hover: subtle brighten */
.cal-nav-btn:hover,
.cal-viewbtn:hover,
#calToday:hover {
  filter: brightness(1.06);
}

/* View buttons: theme-aware hover with contrast-safe text */
.cal-viewbtn:hover {
  filter: none !important;
  color: var(--focus-contrast, #fff) !important;
}
body.theme-light .cal-viewbtn:hover,
body.theme-grays .cal-viewbtn:hover {
  background-color: color-mix(in srgb, var(--focus-color, #1767a7) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 85%, #000) !important;
}
body.theme-dark .cal-viewbtn:hover {
  background-color: color-mix(in srgb, var(--focus-color, #1767a7) 70%, #fff) !important;
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 70%, #fff) !important;
}

/* Active view button (Month / 7 / 3) */
.cal-viewbtn.cal-view-active {
  background: var(--focus-color, #1767a7) !important;
  color: var(--focus-contrast, #fff) !important;
  border-color: var(--focus-color, #1767a7) !important;
}

/* Pill-style view toggle (Month / 7 Day / 3 Day) */
.cal-viewbar .scuba-pill-toggle {
  margin: 0;
}
.cal-viewbar .scuba-pill-toggle .cal-viewbtn {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.cal-viewbar .scuba-pill-toggle .cal-viewbtn:hover {
  filter: none !important;
  color: var(--focus-color, #1767a7) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.cal-viewbar .scuba-pill-toggle .cal-viewbtn span:hover {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 18%, transparent);
}
.cal-viewbar .scuba-pill-toggle .cal-viewbtn.cal-view-active span {
  background: var(--focus-color, #1767a7);
  color: var(--focus-contrast, #fff);
}
.cal-range-detail-separator {
  display: none;
  width: 1px;
  height: 24px;
  border-left: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 35%, transparent);
}
.cal-range-detail-toggle {
  display: none;
}
.cal-range-detail-toggle .cal-range-detail-btn span {
  min-width: 82px;
  padding: 5px 12px;
  text-align: center;
}


/* Smaller screens: tweak header sizing */
@media (max-width: 640px) {
  .cal-bar-main .cal-title {
    font-size: 0.95rem;
  }

  .cal-viewbar {
    justify-content: center;
  }
}

/* === Month / day grid === */

.cal-head, .cal-grid {
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:4px;
}

.cal-head div {
  text-align:center;
  font-size:12px;
  color:#666;
  padding:6px 0;
}

.day {
  min-height:110px;
  border:1px solid #e0e0e0;
  border-radius:6px;
  background:#fff;
  padding:6px;
  display:flex;
  flex-direction:column;
}
.day.empty { background:#fafafa; border-style:dashed; }
.day .date { font-size:12px; color:#555; margin-bottom:4px; display:flex; align-items:baseline; gap:6px; justify-content:space-between; }
.day .date-num { font-weight:600; }
.day .date-dow { font-size:11px; color:#666; }
body.theme-dark .day .date { color:#f1f5f9; }
body.theme-dark .day .date-num { color:#f8fafc; }
body.theme-dark .day .date-dow { color:#e2e8f0; }
.day.today { box-shadow: inset 0 0 0 2px var(--focus-color, #1767a7); }

/* Theme-specific day cell backgrounds */
body.theme-light .day {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 4%, #ffffff);
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 35%, rgba(148,163,184,0.6));
}
body.theme-light .day.empty {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 2%, #ffffff);
}

body.theme-dark .day {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 12%, #0f172a);
  border-color: rgba(15,23,42,0.9);
}
body.theme-dark .day.empty {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 8%, #111827);
  border-style: dashed;
}

body.theme-grays .day {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 4%, rgba(249,250,251,0.95));
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 30%, rgba(148,163,184,0.6));
}
body.theme-grays .day.empty {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 2%, rgba(148,163,184,0.25));
  border-style: dashed;
}


/* Calendar nav + view buttons themed per body theme */
.cal-bar-main #calPrev,
.cal-bar-main #calNext,
.cal-viewbar .cal-viewbtn,
.cal-viewbar #calToday {
  border-width: 1px;
  border-style: solid;
}

/* Light theme: match light day cell look */
body.theme-light .cal-bar-main #calPrev,
body.theme-light .cal-bar-main #calNext,
body.theme-light .cal-viewbar .cal-viewbtn,
body.theme-light .cal-viewbar #calToday {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 10%, #ffffff);
  border-color: rgba(148,163,184,0.6);
  color: #111827;
}

/* Dark theme: match #3f4e5a day cells */
body.theme-dark .cal-bar-main #calPrev,
body.theme-dark .cal-bar-main #calNext,
body.theme-dark .cal-viewbar .cal-viewbtn,
body.theme-dark .cal-viewbar #calToday {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 22%, #0f172a);
  border-color: rgba(15,23,42,0.9);
  color: #f9fafb;
}

/* Grays theme: use gray day look */
body.theme-grays .cal-bar-main #calPrev,
body.theme-grays .cal-bar-main #calNext,
body.theme-grays .cal-viewbar .cal-viewbtn,
body.theme-grays .cal-viewbar #calToday {
  background: rgba(249,250,251,0.95);
  border-color: rgba(148,163,184,0.65);
  color: #111827;
}



.activitybars{ display:flex; flex-direction:column; gap:4px; }
.activitybars-divider{
  height:0;
  margin:6px 2px 5px;
  border-top:1px solid rgba(255,255,255,0.18);
}
body.theme-light .activitybars-divider,
body.theme-grays .activitybars-divider{
  border-top-color:rgba(15,23,42,0.12);
}
.pill{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; padding:4px 6px; border-radius:8px;
  font-size:12px; line-height:1.2; text-decoration:none;
}
.pill .left{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.pill .right{ flex:0 0 auto; font-variant-numeric: tabular-nums; }

/* Month grid responsive behaviour */
@media (max-width:1100px){
  .cal-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width:900px){
  .cal-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width:700px){
  .cal-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  .cal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cal-head { display:none; }
  .cal-grid .day.empty { display:none; }
}

/* ===== Hover card ===== */
.cal-hover{
  position:fixed; z-index:3000; display:none; pointer-events:none;
  background:rgba(0,0,0,.92); color:#fff; padding:8px 10px; border-radius:8px;
  font-size:12px; line-height:1.35; max-width:340px; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.cal-hover .h{ font-weight:600; margin-bottom:4px; }
.cal-hover .row{ display:flex; gap:6px; }
.cal-hover .k{ opacity:.8; min-width:116px; }
.cal-hover .v{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Excursion modal ===== */
.exc-modal{ padding-top:2vh !important; }
.exc-modal .w3-modal-content{
  max-width:680px;
  max-height: calc(100vh - 6vh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#excHeader{
  position:relative;  /* or just remove position entirely */
  top:auto;
  z-index:auto;
}

.exc-headgrid{
  display:grid; grid-template-columns: 1fr auto; align-items:stretch;
  column-gap:12px; margin-right:44px; min-height:56px; padding:8px 0;
}
.exc-head-left{ display:flex; flex-direction:column; justify-content:center; padding-right:8px; }
.exc-title-row{ display:flex; align-items:center; gap:8px; }
.exc-edit-btn{
  min-width:40px;
  height:40px;
  padding:0 !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.16);
  color:inherit;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}
.exc-edit-btn:hover{
  background:rgba(255,255,255,.24);
}
.exc-edit-btn i{ font-size:19px; line-height:1; }
#excTitle{ margin:0; }
#excSub{ font-size:13px; opacity:.92; margin-top:2px; }
.exc-meta{ font-size:12px; opacity:.9; margin-top:4px; }
.cap-badge{
  align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 14px 8px; font-size:22px; font-weight:700; line-height:1; border-radius:10px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:inherit; min-width:84px;
}
.cap-count{ margin-top:-2px; }
.cap-sub{ font-size:12px; font-weight:500; line-height:1.1; margin-top:4px; opacity:.9; }

#excBody{ flex:1 1 auto; min-height:0; overflow:auto; }

/* ===== Buttons in roster ===== */
.icon-btn{
  height:32px; width:32px; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; box-sizing:border-box;
}
.icon-btn i{ font-size:16px; line-height:1; margin:0 !important; }
.act-options{ background:#f3f4f6; border-color:#e5e7eb; color:#374151; }

/* ===== Roster table ===== */
#excRosterTbl,
.book-roster-table{
  border-collapse:collapse; border-spacing:0;
  --solo-pill-w: 16px; --solo-pill-h: 38px;
}
#excRosterTbl thead th,
.book-roster-table thead th{
  font-weight:400; font-size:11px; color:#666; padding:4px 6px;
}
#excRosterTbl thead th,
.book-roster-table thead th{ color:#666; }
body.theme-dark #excRosterTbl thead th,
body.theme-dark .book-roster-table thead th{ color:#f8fafc; }
body.theme-grays #excRosterTbl thead th,
body.theme-grays .book-roster-table thead th{ color:#1f2937; }
#excRosterTbl tbody tr,
.book-roster-table tbody tr{ position:relative; }
#excRosterTbl tbody td,
.book-roster-table tbody td{ vertical-align:middle; padding:6px 6px; }
#excRosterTbl tbody td.namecell,
.book-roster-table tbody td.namecell{ position:relative; padding-left:24px; }
body.theme-dark #excRosterTbl tbody tr:nth-child(even),
body.theme-dark .book-roster-table tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--focus-color, #1767a7) 28%, #0b1220) !important;
}

/* group band */
#excRosterTbl tbody tr.r-group td.namecell::before,
.book-roster-table tbody tr.r-group td.namecell::before{
  content:""; position:absolute; z-index:0; left:2px; top:0; bottom:0; width:12px;
  background:#FFD54F; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
#excRosterTbl tbody tr.r-group.group-leader td.namecell::before,
.book-roster-table tbody tr.r-group.group-leader td.namecell::before{
  background:linear-gradient(180deg,#1767A7 0%,#90CAF9 100%);
}
#excRosterTbl tbody tr.r-group.group-start td.namecell::before,
.book-roster-table tbody tr.r-group.group-start td.namecell::before{
  top:3px;
  border-top-left-radius:8px; border-top-right-radius:8px;
}
#excRosterTbl tbody tr.r-group.group-end td.namecell::before,
.book-roster-table tbody tr.r-group.group-end td.namecell::before{
  border-bottom-left-radius:8px; border-bottom-right-radius:8px;
}

/* Guest rows: show the name in an info/blue color */
#excRosterTbl tbody tr.r-group.group-guest td.namecell .nm,
.book-roster-table tbody tr.r-group.group-guest td.namecell .nm { color:#2196F3; }
#excRosterTbl tbody td.namecell .roster-customer-link,
.book-roster-table tbody td.namecell .roster-customer-link{
  cursor:pointer;
}
#excRosterTbl tbody td.namecell .roster-customer-link{
  text-decoration:underline;
  text-underline-offset:2px;
}
.book-roster-table tbody td.namecell .roster-customer-link{
  text-decoration:none;
}
#excRosterTbl tbody td.namecell .roster-customer-link:focus,
.book-roster-table tbody td.namecell .roster-customer-link:focus{
  outline:2px solid rgba(23,103,167,.55);
  outline-offset:2px;
  border-radius:4px;
}
.book-roster-table tbody td.namecell .book-roster-name-link{
  display:inline-flex;
  align-items:center;
  max-width:100%;
}
.book-roster-table tbody td.namecell .book-roster-name-link:hover{
  text-decoration:none;
  filter:brightness(0.92);
}
.book-roster-name-menu{
  position:absolute;
  z-index:100000;
  min-width:190px;
  display:none;
  flex-direction:column;
  border:1px solid rgba(23,103,167,0.35);
  border-radius:8px;
  background:#ffffff;
  box-shadow:0 8px 20px rgba(15,23,42,0.24);
  overflow:hidden;
}
.book-roster-name-menu.is-open{
  display:flex;
}
.book-roster-name-menu.is-open.is-smart-columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  width:min(360px, calc(100vw - 16px));
}
.book-roster-name-menu.is-smart-columns::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(15,23,42,0.10);
  pointer-events:none;
}
.book-roster-name-menu-item{
  appearance:none;
  border:0;
  background:transparent;
  color:#111827;
  text-align:left;
  font-size:12px;
  line-height:1.2;
  padding:8px 10px;
  cursor:pointer;
}
.waiver-roster-menu-status{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 10px;
  border-bottom:1px solid rgba(15,23,42,0.10);
  background:#f8fafc;
  color:#334155;
}
.waiver-roster-menu.is-signed .waiver-roster-menu-status{
  background:rgba(22,163,74,0.08);
  color:#166534;
}
.waiver-roster-menu-status-label{
  font-size:12px;
  line-height:1.2;
}
.waiver-roster-menu-status-detail{
  max-width:260px;
  color:#475569;
  font-size:11px;
  line-height:1.3;
}
.book-roster-name-menu-item + .book-roster-name-menu-item{
  border-top:1px solid rgba(15,23,42,0.08);
}
.book-roster-name-menu.is-smart-columns .book-roster-name-menu-item,
.book-roster-name-menu.is-smart-columns .book-roster-name-menu-item + .book-roster-name-menu-item{
  min-width:0;
  border-top:0;
  box-shadow:inset 0 -1px rgba(15,23,42,0.08);
}
.book-roster-name-menu-item:hover,
.book-roster-name-menu-item:focus{
  background:rgba(23,103,167,0.10);
  outline:none;
}
.book-roster-name-menu-item.is-disabled,
.book-roster-name-menu-item:disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}
body.theme-dark .book-roster-name-menu{
  background:#0f172a;
  border-color:rgba(148,163,184,0.45);
  box-shadow:0 8px 20px rgba(0,0,0,0.5);
}
body.theme-dark .book-roster-name-menu-item{
  color:#e5e7eb;
}
body.theme-dark .waiver-roster-menu-status{
  border-bottom-color:rgba(148,163,184,0.22);
  background:rgba(148,163,184,0.08);
  color:#e2e8f0;
}
body.theme-dark .waiver-roster-menu.is-signed .waiver-roster-menu-status{
  background:rgba(34,197,94,0.12);
  color:#bbf7d0;
}
body.theme-dark .waiver-roster-menu-status-detail{
  color:#cbd5e1;
}
body.theme-dark .book-roster-name-menu-item + .book-roster-name-menu-item{
  border-top-color:rgba(148,163,184,0.22);
}
body.theme-dark .book-roster-name-menu.is-smart-columns::after{
  background:rgba(148,163,184,0.25);
}
body.theme-dark .book-roster-name-menu.is-smart-columns .book-roster-name-menu-item,
body.theme-dark .book-roster-name-menu.is-smart-columns .book-roster-name-menu-item + .book-roster-name-menu-item{
  box-shadow:inset 0 -1px rgba(148,163,184,0.22);
}
body.theme-dark .book-roster-name-menu-item:hover,
body.theme-dark .book-roster-name-menu-item:focus{
  background:rgba(148,163,184,0.16);
}

/* Guest rows when the group leader is diving */
#excRosterTbl tbody tr.r-group.group-guest.leader-diving td.namecell::before,
.book-roster-table tbody tr.r-group.group-guest.leader-diving td.namecell::before{
  background:#90CAF9;
}

/* solo flag */
#excRosterTbl tbody tr.r-solo .solo-pill,
.book-roster-table tbody tr.r-solo .solo-pill{
  position:absolute; left:2px; top:50%; transform:translateY(-50%);
  width:var(--solo-pill-w); height:min(var(--solo-pill-h), calc(100% - 6px));
  border-radius:8px; background:#E3F2FD; border:1px solid #90CAF9; color:#1565C0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.1); user-select:none;
}
#excRosterTbl tbody tr.r-solo .solo-pill .solo-txt,
.book-roster-table tbody tr.r-solo .solo-pill .solo-txt{
  font-size:9px; font-weight:700; letter-spacing:.2px; line-height:1; white-space:nowrap; transform:rotate(-90deg);
}

#excRosterTbl tbody tr.r-group.leader td.namecell .nm,
.book-roster-table tbody tr.r-group.leader td.namecell .nm{ font-weight:700; }

#excRosterTbl td:nth-child(3),
#excRosterTbl td:nth-child(4),
#excRosterTbl td:nth-child(5),
#excRosterTbl td:nth-child(6),
#excRosterTbl td:nth-child(7),
.book-roster-table td:nth-child(3),
.book-roster-table td:nth-child(4),
.book-roster-table td:nth-child(5),
.book-roster-table td:nth-child(6),
.book-roster-table td:nth-child(7){ text-align:center; }

/* contact lines */
#excRosterTbl tbody td.namecell .nm,
.book-roster-table tbody td.namecell .nm{ display:block; margin-bottom:2px; }
#excRosterTbl tbody td.namecell .nm-row,
.book-roster-table tbody td.namecell .nm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:2px;
}
#excRosterTbl tbody td.namecell .nm-row .nm,
.book-roster-table tbody td.namecell .nm-row .nm{
  margin-bottom:0;
  flex:1 1 auto;
  min-width:0;
}
.scuba-cal-shell.scuba-cal-shell-range-7 #calGrid.book-grid.days-7 .book-roster-table tbody td.namecell .nm-row .nm{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#excRosterTbl tbody td.namecell .nm-row .name-balance,
.book-roster-table tbody td.namecell .nm-row .name-balance{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:10px;
  padding:1px 6px;
}
.balance-slot-spacer{
  display:inline-block;
  min-width:56px;
  padding:1px 6px;
  visibility:hidden;
  pointer-events:none;
}
.book-roster-table tbody td.namecell .nm-row .waiver-status-link{
  width:24px;
  min-width:24px;
  max-width:24px;
  flex:0 0 24px;
  box-sizing:border-box;
  padding-left:0;
  padding-right:0;
}
.book-roster-table tbody td.namecell .nm-row > .name-balance:not(.waiver-status-link){
  width:68px;
  min-width:68px;
  max-width:68px;
  flex:0 0 68px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  overflow:hidden;
  text-align:right;
  padding-left:4px;
  padding-right:4px;
}
.book-roster-table tbody td.namecell .nm-row > .balance-slot-spacer{
  width:68px;
  min-width:68px;
  max-width:68px;
  flex-basis:68px;
  padding-left:4px;
  padding-right:4px;
}
#excRosterTbl tbody td.namecell .nm-row .waiver-status-link,
.book-roster-table tbody td.namecell .nm-row .waiver-status-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  padding:1px 7px;
  border:0;
  cursor:pointer;
  line-height:1.2;
  font-size:10px;
  font-weight:700;
}
.waiver-status-pill-text{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.waiver-status-link.waiver-status-green{
  background:#16a34a;
  color:#fff;
}
.waiver-status-link.waiver-status-red{
  background:#dc2626;
  color:#fff;
}
.waiver-status-link.waiver-status-slate{
  background:#64748b;
  color:#fff;
}
.waiver-status-link:hover{
  filter:brightness(.96);
}
.waiver-status-link:focus{
  outline:2px solid color-mix(in srgb, var(--focus-color, #1767a7) 70%, #ffffff);
  outline-offset:1px;
}
#excRosterTbl tbody td.namecell .contact,
.book-roster-table tbody td.namecell .contact{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:#555; line-height:1.2;
  margin-top:2px; word-break:break-word;
}
#excRosterTbl tbody td.namecell .contact,
.book-roster-table tbody td.namecell .contact{ color:#555; }
body.theme-dark #excRosterTbl tbody td.namecell .contact,
body.theme-dark .book-roster-table tbody td.namecell .contact{ color:#f8fafc; }
body.theme-dark #excRosterTbl tbody td.namecell .contact a,
body.theme-dark .book-roster-table tbody td.namecell .contact a{ color:#f8fafc; }
body.theme-grays #excRosterTbl tbody td.namecell .contact,
body.theme-grays .book-roster-table tbody td.namecell .contact{ color:#1f2937; }
#excRosterTbl tbody td.namecell .contact i,
.book-roster-table tbody td.namecell .contact i{
  font-size:12px; opacity:.75; width:14px; text-align:center; flex:0 0 14px;
}
#excRosterTbl tbody td.namecell .contact a,
.book-roster-table tbody td.namecell .contact a{
  color:inherit; text-decoration:none;
}
#excRosterTbl tbody td.namecell .contact a:hover,
.book-roster-table tbody td.namecell .contact a:hover{ text-decoration:underline; }
#excRosterTbl tbody td.namecell .book-roster-option-list,
.book-roster-table tbody td.namecell .book-roster-option-list{
  margin-top:4px;
  margin-left:18px;
}
#excRosterTbl tbody td.namecell .book-roster-option-item,
.book-roster-table tbody td.namecell .book-roster-option-item{
  font-size:11px;
  line-height:1.3;
  color:#555;
}
body.theme-dark #excRosterTbl tbody td.namecell .book-roster-option-item,
body.theme-dark .book-roster-table tbody td.namecell .book-roster-option-item{
  color:#f8fafc;
}
body.theme-grays #excRosterTbl tbody td.namecell .book-roster-option-item,
body.theme-grays .book-roster-table tbody td.namecell .book-roster-option-item{
  color:#1f2937;
}

/* owe chips */
#excRosterTbl td.owe-cell,
.book-roster-table td.owe-cell { white-space:nowrap; }
.bal-chip{ display:inline-block; padding:2px 8px; }
.bal-ok{ display:inline-block; padding:2px 8px; }
.bal-autopay{
  background:#798EA4 !important;
  color:#fff !important;
}
.owe-pay-link{
  border:0;
  cursor:pointer;
  line-height:1.2;
  font:inherit;
}
.owe-history-link{
  border:0;
  cursor:pointer;
  line-height:1.2;
  font:inherit;
}
.owe-ticket-link{
  border:0;
  cursor:default;
  line-height:1.2;
  font:inherit;
  white-space:nowrap;
}
.owe-pay-link:hover{
  filter:brightness(0.96);
}
.owe-history-link:hover{
  filter:brightness(0.96);
}
.owe-pay-link:focus{
  outline:2px solid color-mix(in srgb, var(--focus-color, #1767a7) 70%, #ffffff);
  outline-offset:1px;
}
.owe-history-link:focus{
  outline:2px solid color-mix(in srgb, var(--focus-color, #1767a7) 70%, #ffffff);
  outline-offset:1px;
}

#owePayModal .owe-pay-participant{
  font-weight:600;
}
#owePayModal .owe-pay-breakdown{
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--focus-color, #1767a7) 30%, rgba(148,163,184,0.45));
  background:color-mix(in srgb, var(--focus-color, #1767a7) 10%, rgba(255,255,255,0.88));
}
#owePayModal .owe-pay-breakdown-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
}
#owePayModal .owe-pay-breakdown-row + .owe-pay-breakdown-row{
  margin-top:4px;
}
#owePayModal .owe-pay-breakdown-row strong{
  font-size:12px;
}
#owePayModal .owe-pay-amount{
  font-weight:700;
}
#owePayModal .owe-pay-autopay-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, #798EA4 45%, rgba(148,163,184,0.4));
  background:color-mix(in srgb, #798EA4 16%, rgba(255,255,255,0.92));
  color:#334155;
}
#owePayModal .owe-pay-deposit-input{
  max-width:180px;
}
#owePayModal .owe-pay-deposit-help{
  margin-top:4px;
}
#owePayModal .owe-pay-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
#owePayModal .owe-pay-option{
  min-width:120px;
}
#owePayModal .owe-pay-option[disabled]{
  opacity:.5;
  cursor:not-allowed;
}
#owePayModal .owe-pay-footer-cancel{
  margin-top:8px;
}
body.theme-dark #owePayModal .owe-pay-autopay-note{
  color:#e2e8f0;
  border-color:rgba(148,163,184,0.45);
  background:rgba(121,142,164,0.24);
}
#autobillSetupModal .autobill-current-plan{
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--focus-color, #1767a7) 26%, rgba(148,163,184,0.45));
  background:color-mix(in srgb, var(--focus-color, #1767a7) 8%, rgba(255,255,255,0.88));
}
#autobillSetupModal .autobill-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
#autobillSetupModal .autobill-card-alert{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
}
#autobillSetupModal .autobill-new-schedule{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,0.26);
}
#autobillSetupModal .autobill-dates-input{
  min-height:96px;
  resize:vertical;
}

/* Non-diving leader tint */
#excRosterTbl tbody tr.r-group.group-leader.leader-nd td.namecell::before,
.book-roster-table tbody tr.r-group.group-leader.leader-nd td.namecell::before{
  background: linear-gradient(180deg, #ff9800 0%, #ffd54f 100%);
}
#excRosterTbl tbody tr.r-group.group-leader.leader-nd td.namecell .nm,
.book-roster-table tbody tr.r-group.group-leader.leader-nd td.namecell .nm{ color:#444; }

/* ===== Add Reservation modal (single) ===== */
#newResModal{ padding-top:3vh !important; }
#newResModal .w3-modal-content{
  max-height:calc(100vh - 6vh);
  display:flex; flex-direction:column; overflow:hidden;
}
#newResModal .w3-container.w3-padding{
  flex:1 1 auto; min-height:0; overflow:auto;
}

.res-toolbar{
  display:flex; align-items:center; gap:12px;
  padding: 6px 0 10px 0;
}
.res-toolbar .res-btn{
  background:#fff; border:1px solid #ddd; border-radius:8px;
  padding:4px 8px; display:inline-flex; align-items:center; gap:8px;
}
.res-toolbar img{ width:32px; height:32px; display:block; }
.res-toolbar .res-btn i{
  font-size:22px;
  line-height:1;
  color: var(--focus-color, #1767a7);
}

.w3-tooltip{ position:relative; display:inline-block; }

.res-search-wrap{
  display:flex; gap:8px; align-items:center; margin-bottom:10px;
}
.res-search-btn{
  background: var(--focus-color, #1767a7) !important;
  color: var(--focus-contrast, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 70%, #000) !important;
}
.res-search-btn:hover,
.res-search-btn:active{
  background: color-mix(in srgb, var(--focus-color, #1767a7) 82%, #000) !important;
  color: var(--focus-contrast, #fff) !important;
}
.res-results{
  max-height:220px; overflow:auto;
  border:1px solid #eee; border-radius:8px;
}
.res-results table{ width:100%; }
.res-results tbody tr{ cursor:pointer; }
.res-results tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--focus-color, #1767a7) 16%, #ffffff) !important;
  color: inherit;
}
.res-results tbody tr:nth-child(even) td{ color: inherit; }
.res-results tbody tr:nth-child(even) a{ color: inherit; }
body.theme-dark .res-results tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--focus-color, #1767a7) 24%, #0f172a) !important;
  color: #e5e7eb;
}
body.theme-grays .res-results tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--focus-color, #1767a7) 22%, #f3f4f6) !important;
  color: #111827;
}
.res-results tr.is-selected{
  background: color-mix(in srgb, var(--focus-color, #1767a7) 86%, #0b1220) !important;
  color: var(--focus-contrast, #fff) !important;
}
.res-results tr.is-selected td,
.res-results tr.is-selected a{ color: inherit !important; }

/* Non-diver dot */
.nd-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:#ff9800; border:1px solid #c06200;
  vertical-align:middle; margin-right:6px;
}
.nd-dot[data-tip]{ position:relative; z-index:1; }
.nd-dot[data-tip]::after{
  content: attr(data-tip);
  position:absolute; left:10%; bottom:140%;
  white-space:nowrap; background:rgba(0,0,0,.9); color:#fff;
  font-size:11px; padding:4px 6px; border-radius:6px;
  pointer-events:none; opacity:0; transition:opacity .12s ease;
}
.nd-dot[data-tip]::before{
  content:""; position:absolute; left:10%; bottom:120%;
  border:6px solid transparent; border-top-color:rgba(0,0,0,.9);
  opacity:0; transition:opacity .12s ease;
}
.nd-dot[data-tip]:hover::after,
.nd-dot[data-tip]:hover::before{ opacity:1; }

/* ===== Group Leader results table ===== */
.gr-results {
  border:1px solid #ddd; border-radius:6px;
  max-height:220px; overflow-y:auto;
}
.gr-results table {
  margin:0; width:100%; border-collapse:collapse;
}
.gr-results thead th {
  position:sticky; top:0; background:#f9f9f9; z-index:1;
}

/* “Force ~6 rows” technique for leader table */
#grLeaderTbl { width:100%; border-collapse:collapse; }
#grLeaderTbl thead { display:table; width:100%; table-layout:fixed; }
#grLeaderTbl tbody {
  display:block; max-height:168px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#grLeaderTbl tbody tr { display:table; width:100%; table-layout:fixed; }
#grLeaderTbl td, #grLeaderTbl th {
  padding-top:6px; padding-bottom:6px;
}

/* Generic guest/leader search tables */
.gr-table { width:100%; border-collapse:collapse; }
.gr-table thead { display:table; width:100%; table-layout:fixed; }
.gr-table tbody {
  display:block; max-height:168px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.gr-table tbody tr { display:table; width:100%; table-layout:fixed; }
.gr-table td, .gr-table th { padding-top:6px; padding-bottom:6px; }
.gr-table tbody tr.is-selected { background:#eaf2ff !important; }
.gr-load-more { text-align:center; cursor:pointer; padding:6px 10px; color:#1767a7; }
.gr-guest-count-select{
  width:50% !important;
  max-width:130px;
  min-width:96px;
}
.typeahead{
  position:relative;
}
.typeahead .ta-menu{
  margin-top:4px;
  border:1px solid #d1d5db;
  border-radius:6px;
  background:#fff;
  max-height:170px;
  overflow-y:auto;
}
.typeahead .ta-item{
  display:grid;
  grid-template-columns:1.4fr 1.6fr 1fr;
  gap:8px;
  padding:6px 8px;
  cursor:pointer;
  font-size:12px;
  font-weight:400;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.typeahead .ta-item:last-child{
  border-bottom:0;
}
.typeahead .ta-item:hover{
  background:#eef6ff;
}
.typeahead .ta-col{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ta-picked-name{
  font-weight:400;
}
.ta-picked-meta{
  color:#6b7280;
}
.gr-picked-pill{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--focus-color, #1767a7) 55%, #d1d5db);
  background:color-mix(in srgb, var(--focus-color, #1767a7) 15%, #fff);
}
.gr-picked-pill-name{
  font-size:15px;
  font-weight:700;
  color:var(--focus-color, #1767a7);
}
.gr-picked-pill-meta{
  font-size:12px;
  color:#374151;
}

/* ===== Group modal sizing / footer pin ===== */
#groupModal{ padding-top:3vh !important; }
#groupModal .w3-modal-content{
  max-height: calc(100vh - 6vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#groupModal .w3-container.w3-padding{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
#groupModal footer{
  flex: 0 0 auto;
  background: #fff;
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 0;
  z-index: 4;
}

/* Disabled Apply clarity */
#groupModal .w3-button[disabled]{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}
/* Keep Apply blue */
#groupModal #gr_submit.w3-button{
  background-color:#1767a7 !important;
  color:#fff !important;
  border:1px solid #0f4f84;
}
#groupModal #gr_submit.w3-button[disabled]{
  background-color:#1767a7 !important;
  color:#fff !important;
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.2);
}
#groupModal #gr_submit.w3-button:not([disabled]):hover{
  background-color:#12578d !important;
  color:#fff !important;
}

/* === Copy/Move modal tweaks === */
.cm-apply { opacity:1 !important; visibility:visible !important; }
.cm-apply[disabled] { opacity:0.6 !important; cursor:not-allowed; }

#xferModal .w3-modal-content{
  position:relative;
}
#xferModal .xfer-action-rail{
  position:fixed;
  top:72px;
  right:max(18px, calc((100vw - 760px) / 2 + 12px));
  z-index:100005;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:7px;
  border-radius:999px;
  background:rgba(255,255,255,0.94);
  border:1px solid rgba(15,23,42,0.14);
  box-shadow:0 10px 24px rgba(15,23,42,0.24);
}
#xferModal .xfer-rail-btn{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(15,23,42,0.14);
}
#xferModal .xfer-rail-back{
  background:#fff;
  color:#334155;
}
#xferModal .xfer-rail-apply{
  background:#1767a7;
  color:#fff;
  border-color:#0f4f84;
}
#xferModal .xfer-rail-btn:hover:not([disabled]),
#xferModal .xfer-rail-btn:focus-visible:not([disabled]){
  filter:brightness(1.06);
  outline:2px solid rgba(23,103,167,.35);
  outline-offset:2px;
}
#xferModal .xfer-rail-btn[disabled]{
  opacity:.48 !important;
  cursor:not-allowed;
  filter:grayscale(.2);
}
body.theme-dark #xferModal .xfer-action-rail{
  background:rgba(15,23,42,0.94);
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 12px 28px rgba(0,0,0,0.48);
}
body.theme-dark #xferModal .xfer-rail-back{
  background:#111827;
  color:#e5e7eb;
  border-color:rgba(255,255,255,0.18);
}
@media (max-width: 820px){
  #xferModal .xfer-action-rail{
    top:64px;
    right:12px;
  }
}

#xferModal #xferApply.w3-button {
  background-color:#1767a7 !important;
  color:#fff !important;
  border:1px solid #0f4f84;
}
#xferModal #xferApply.w3-button[disabled]{
  background-color:#1767a7 !important;
  color:#fff !important;
  opacity:.55; cursor:not-allowed; filter:grayscale(.2);
}
#xferModal #xferApply.w3-button:not([disabled]):hover{
  background-color:#12578d !important;
  color:#fff !important;
}

/* Selection highlight for the future excursions list */
#xferListTbl tbody tr.is-selected { background:#dfefff !important; }
#xferListTbl tbody tr:hover { background:#eef6ff; }
#xferListTbl td { cursor:pointer; }

/* Travel page background override */
body.scuba-bg-travel {
  /* relative to /assets/css/scuba.css */
  background: url('../../img/travel_back.jpg') center center / cover no-repeat fixed;
  background-color: #0b3a5a;
}
/* Diver page background override */
body.scuba-bg-diver {
  /* relative to /assets/css/scuba.css */
  background: url('../../img/diver_back.jpg') center center / cover no-repeat fixed;
  background-color: #0b3a5a;
}

/* ===== SCUBA LIST TABLES (Activities / Travel etc.) ===== */

.scuba-table-shell {
  max-width: 1500px;
  margin: 10px auto 24px;
  padding: 0 12px;
}

.scuba-table-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  border: 1px solid rgba(15,23,42,0.6);
}

/* card background per theme */
body.theme-light .scuba-table-card {
  background: #ffffff;
}

body.theme-dark .scuba-table-card {
  /* matches dark pagebar / inventory card */
  background: #111827;
}

body.theme-grays .scuba-table-card {
  background: #f9fafb;
}

.scuba-table-wrap {
  padding-bottom: 6px;
}

/* Theme-aware form inputs inside scuba table cards */
.scuba-table-card .w3-input,
.scuba-table-card .w3-select,
.scuba-table-card .w3-textarea {
  background: #ffffff;
  color: #111827;
  border-color: rgba(148, 163, 184, 0.6);
}
body.theme-dark .scuba-table-card .w3-input,
body.theme-dark .scuba-table-card .w3-select,
body.theme-dark .scuba-table-card .w3-textarea {
  background: #0f172a;
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.45);
}
body.theme-dark .scuba-table-card .w3-input::placeholder,
body.theme-dark .scuba-table-card .w3-textarea::placeholder {
  color: #9ca3af;
}
body.theme-grays .scuba-table-card .w3-input,
body.theme-grays .scuba-table-card .w3-select,
body.theme-grays .scuba-table-card .w3-textarea {
  background: #ffffff;
  color: #111827;
  border-color: rgba(148, 163, 184, 0.6);
}
body.theme-dark .scuba-table-card .w3-text-grey {
  color: #cbd5e1 !important;
}

/* base table look */
.scuba-list-table {
  border-collapse: collapse;
  width: 100%;
}

/* Selection indicator column */
.scuba-list-table th.scuba-indicator,
.scuba-list-table td.scuba-indicator {
  width: 28px;
  text-align: center;
}
.scuba-row-indicator {
  display: inline-block;
  line-height: 1;
  opacity: 0;
  color: var(--focus-color, #1767a7);
  transform: scale(1.2);
  transform-origin: center;
}
body.theme-dark .scuba-row-indicator {
  color: color-mix(in srgb, var(--focus-color, #1767a7) 70%, #ffffff);
}
.scuba-list-table tbody tr.row-selected .scuba-row-indicator {
  opacity: 1;
}

/* header cells */
.scuba-list-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--focus-color, #1767a7);
}

body.theme-light .scuba-list-table thead th {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 14%, #ffffff);
  color: #111827;
}

body.theme-dark .scuba-list-table thead th {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 28%, #0f172a);
  color: #e5e7eb;
}

body.theme-grays .scuba-list-table thead th {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 10%, #f1f5f9);
  color: #111827;
}

/* body cells */
.scuba-list-table tbody td {
  padding: 4px 8px;
  font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 20%, rgba(15,23,42,0.45));
}

/* row striping + hover, tuned for themes */
body.theme-light .scuba-list-table tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 4%, #ffffff);
}
body.theme-light .scuba-list-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 10%, #ffffff);
}
body.theme-light .scuba-list-table tbody tr:hover {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 18%, #ffffff);
}

body.theme-dark .scuba-list-table tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 12%, #0b1220);
}
body.theme-dark .scuba-list-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 22%, #0b1220);
}
body.theme-dark .scuba-list-table tbody tr:hover {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 30%, #0b1220);
}

body.theme-grays .scuba-list-table tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 6%, #f8fafc);
}
body.theme-grays .scuba-list-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 12%, #f1f5f9);
}
body.theme-grays .scuba-list-table tbody tr:hover {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 18%, #e5e7eb);
}

/* clickable destination link */
.scuba-list-table .act-edit-link {
  color: var(--focus-color);
  text-decoration: none;
}
.scuba-list-table .act-edit-link:hover {
  text-decoration: underline;
}

/* "no results" row */
.scuba-list-table tbody tr td.w3-text-grey {
  padding: 10px 8px;
}
/* ===== SCUBA CALENDAR CARD (wider + translucent) ===== */

/* Wider than the toolbar/list shell, more like the original 1900px spread */
.scuba-cal-shell {
  width: 100%;
  max-width: calc(2500px + 24px);
  margin: 10px auto 24px;
  padding: 0 12px;
  box-sizing: border-box;
}
.scuba-cal-shell.scuba-cal-shell-range-7 {
  max-width: calc(2500px + 24px);
}

/* Base card, similar to scuba-table-card but we’ll use translucent backgrounds */
.scuba-cal-card {
  width: 100%;
  max-width: 2500px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  border: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 65%, rgba(15,23,42,0.35));
}

/* Per-theme translucent backgrounds so the page/image theme still shows through */
body.theme-light .scuba-cal-card {
  background: rgba(255, 255, 255, 0.88);
}

body.theme-dark .scuba-cal-card {
  /* dark but still lets the underlying theme/background peek through */
  background: rgba(17, 24, 39, 0.90);
}

body.theme-grays .scuba-cal-card {
  background: rgba(249, 250, 251, 0.90);
}

/* ===== Bookings 3-day grid ===== */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.book-viewbar { width: 100%; }
.book-roster-btn {
  background: var(--focus-color, #1767a7) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  color: var(--focus-contrast, #fff) !important;
}
body.theme-dark .book-roster-btn {
  background: var(--focus-color, #1767a7) !important;
  border-color: rgba(0,0,0,0.25) !important;
  color: var(--focus-contrast, #fff) !important;
}
body.theme-grays .book-roster-btn {
  background: var(--focus-color, #1767a7) !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: var(--focus-contrast, #fff) !important;
}
.book-roster-btn:hover,
.book-roster-btn:focus,
.book-roster-btn:active {
  background-color: var(--focus-color, #1767a7) !important;
  color: var(--focus-contrast, #fff) !important;
  border-color: rgba(0,0,0,0.18) !important;
  filter: brightness(1.05);
}
.book-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.book-day {
  font-weight: 600;
  color: var(--focus-color, #1767a7);
  text-align: center;
}
.book-day-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.book-day-divider{
  height:0;
  margin:2px 4px;
  border-top:1px solid rgba(255,255,255,0.18);
}
body.theme-light .book-day-divider,
body.theme-grays .book-day-divider{
  border-top-color:rgba(15,23,42,0.12);
}
.book-day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 8px;
}
#calGrid.book-grid.days-3.three-day-two-columns .book-day-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .book-day-grid,
  #calGrid.book-grid.days-3.three-day-two-columns .book-day-grid {
    grid-template-columns: 1fr;
  }
}
.book-card {
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.book-pill {
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  position: relative;
  padding-right: 34px;
}
.book-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.book-pill-subline{
  margin-top:2px;
  font-size:11px;
  line-height:1.2;
  opacity:0.92;
}
.book-pill-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
.book-pill-activity-notes {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.book-pill-activity-notes strong {
  font-weight: 700;
}
.book-pill-edit{
  cursor:pointer;
}
.book-pill-edit:hover{
  text-decoration:underline;
}
.book-pill-cap {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  color: inherit;
  border: 1px solid rgba(0,0,0,0.12);
}
.book-pill-boat {
  font-size: 11px;
  opacity: 0.9;
}
.book-pill-type-icons{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:2px;
}
.book-pill-type-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.book-pill-type-icon i{
  font-size:18px;
  line-height:1;
}
.book-pill-roster-toggle {
  position: absolute;
  right: 8px;
  bottom: 6px;
  border: 0;
  border-radius: 999px;
  min-width: 20px;
  min-height: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.18);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.book-pill-roster-toggle i {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.book-pill-roster-toggle.is-open i {
  transform: rotate(180deg);
}
body.theme-light .book-card {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 18%, transparent);
}
body.theme-dark .book-card {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 22%, #0f172a);
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 30%, transparent);
}
body.theme-grays .book-card {
  background: #f5f7fb;
  border-color: rgba(0,0,0,0.08);
}
.book-card.empty {
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
}

/* Public 3/7-day Show More layout, adapted from the activity column embed. */
#calGrid.public-range-compact,
#calGrid.public-range-outlook {
  --public-range-ink: #172033;
  --public-range-muted: #64748b;
  --public-range-line: #d9e2ec;
  --public-range-surface: rgba(255, 255, 255, 0.94);
  --public-range-soft: rgba(244, 247, 251, 0.92);
}
#calGrid.public-range-compact {
  align-items: start;
}
#calGrid.public-range-compact .range-day {
  min-width: 0;
  overflow: hidden;
  padding: 0 6px 6px;
  border-color: color-mix(in srgb, var(--focus-color, #1767a7) 19%, var(--public-range-line));
  border-radius: 14px;
  background: var(--public-range-surface);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}
#calGrid.public-range-compact .public-range-outlook-day-header {
  margin: 0 -6px 6px;
}
#calGrid.public-range-compact .range-day.today {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--focus-color, #1767a7) 17%, transparent);
}
#calGrid.public-range-outlook {
  align-items: start;
  gap: 14px;
  padding: 14px !important;
}
#calGrid.public-range-outlook.public-range-outlook-days-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#calGrid.public-range-outlook.public-range-outlook-days-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
body.theme-dark #calGrid.public-range-compact,
body.theme-dark #calGrid.public-range-outlook {
  --public-range-ink: #eef4ff;
  --public-range-muted: #aebcd0;
  --public-range-line: #3b4a61;
  --public-range-surface: rgba(23, 32, 51, 0.95);
  --public-range-soft: rgba(32, 44, 66, 0.92);
}
.public-range-outlook-day {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 19%, var(--public-range-line));
  border-radius: 16px;
  background: var(--public-range-surface);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}
.public-range-outlook-day::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--focus-color, #1767a7), color-mix(in srgb, var(--focus-color, #1767a7) 35%, transparent));
  content: "";
}
.public-range-outlook-day.is-today {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--focus-color, #1767a7) 17%, transparent);
}
.public-range-outlook-day-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 11px;
  padding: 12px 13px 11px;
  border-bottom: 1px solid var(--public-range-line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--focus-color, #1767a7) 11%, var(--public-range-surface)), var(--public-range-surface) 78%);
}
.public-range-outlook-date {
  display: flex;
  width: 48px;
  height: 50px;
  flex: 0 0 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 30%, var(--public-range-line));
  border-radius: 12px;
  background: var(--public-range-surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--focus-color, #1767a7) 12%, transparent);
}
.public-range-outlook-date span {
  color: var(--focus-color, #1767a7);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
}
.public-range-outlook-date strong {
  margin-top: 3px;
  color: var(--public-range-ink);
  font-size: 21px;
  line-height: 1;
}
.public-range-outlook-heading {
  min-width: 0;
}
.public-range-outlook-heading h2 {
  margin: 0;
  overflow: hidden;
  color: var(--public-range-ink);
  font-size: 17px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-range-outlook-heading span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--public-range-muted);
  font-size: 10.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-range-outlook-events {
  display: grid;
  gap: 10px;
  padding: 11px;
}
.public-range-outlook-activity.pill {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 12px 12px 0 15px;
  border: 1px solid var(--public-range-line);
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--activity-color, var(--focus-color, #1767a7)) 5%, var(--public-range-surface)), var(--public-range-surface) 64%);
  color: var(--public-range-ink);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.055);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.public-range-outlook-activity.pill:hover,
.public-range-outlook-activity.pill:focus-visible {
  border-color: color-mix(in srgb, var(--activity-color, var(--focus-color, #1767a7)) 54%, var(--public-range-line));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--activity-color, var(--focus-color, #1767a7)) 14%, transparent);
  outline: none;
  transform: translateY(-1px);
}
.public-range-outlook-activity.has-historical-log {
  border-color: #cbd5e1;
  background: linear-gradient(145deg, rgba(226, 232, 240, 0.88), rgba(248, 250, 252, 0.94) 68%);
  color: #64748b;
  box-shadow: 0 3px 9px rgba(71, 85, 105, 0.09);
}
.public-range-outlook-activity.has-historical-log:hover,
.public-range-outlook-activity.has-historical-log:focus-visible {
  border-color: #94a3b8;
  box-shadow: 0 6px 15px rgba(71, 85, 105, 0.14);
}
.public-range-outlook-activity.has-historical-log::before {
  background: #94a3b8;
}
.public-range-outlook-activity.has-historical-log .public-range-outlook-time strong,
.public-range-outlook-activity.has-historical-log h3,
.public-range-outlook-activity.has-historical-log .public-range-outlook-meta strong,
.public-range-outlook-activity.has-historical-log .public-range-outlook-duration {
  color: #64748b;
}
.public-range-outlook-activity.has-historical-log .public-range-outlook-kind {
  background: #e2e8f0;
  color: #64748b;
}
body.theme-dark .public-range-outlook-activity.has-historical-log {
  border-color: #475569;
  background: linear-gradient(145deg, rgba(51, 65, 85, 0.94), rgba(30, 41, 59, 0.96) 68%);
  color: #94a3b8;
}
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-time strong,
body.theme-dark .public-range-outlook-activity.has-historical-log h3,
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-meta strong,
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-duration {
  color: #cbd5e1;
}
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-kind {
  background: #475569;
  color: #e2e8f0;
}
.public-range-outlook-activity::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--activity-color, var(--focus-color, #1767a7));
  content: "";
}
.public-range-outlook-activity-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.public-range-outlook-time span,
.public-range-outlook-meta span,
.public-range-outlook-footer span {
  display: block;
  color: var(--public-range-muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-transform: uppercase;
}
.public-range-outlook-time strong {
  display: block;
  margin-top: 2px;
  color: var(--focus-color, #1767a7);
  font-size: 14px;
  line-height: 1.15;
}
.public-range-outlook-kind {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--activity-color, var(--focus-color, #1767a7)) 13%, var(--public-range-soft));
  color: color-mix(in srgb, var(--activity-color, var(--focus-color, #1767a7)) 82%, var(--public-range-ink));
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.public-range-outlook-activity h3 {
  margin: 10px 0 0;
  color: var(--public-range-ink);
  font-size: 15px;
  line-height: 1.25;
}
.public-range-outlook-duration {
  margin-top: 3px;
  color: var(--public-range-muted);
  font-size: 10.5px;
  line-height: 1.2;
}
.public-range-outlook-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
.public-range-outlook-meta > div {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--focus-color, #1767a7) 6%, var(--public-range-soft));
}
.public-range-outlook-meta > div:only-child {
  grid-column: 1 / -1;
}
.public-range-outlook-meta strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--public-range-ink);
  font-size: 11.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-range-outlook-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 11px -12px 0 -15px;
  padding: 9px 12px 9px 15px;
  border-top: 1px solid var(--public-range-line);
  background: color-mix(in srgb, var(--focus-color, #1767a7) 4%, var(--public-range-soft));
}
.public-range-outlook-footer strong {
  color: var(--focus-color, #1767a7);
  font-size: 14px;
  line-height: 1;
}
.public-range-outlook-log-footer {
  background: rgba(226, 232, 240, 0.72);
}
body.theme-dark .public-range-outlook-log-footer {
  background: rgba(15, 23, 42, 0.45);
}
.public-range-outlook-log-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--focus-color, #1767a7) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1 !important;
  text-decoration: underline;
}

/* Detailed public range cards use the same legend colors as compact mode. */
.public-range-outlook-activity.pill,
.public-range-outlook-activity.has-historical-log,
body.theme-dark .public-range-outlook-activity.has-historical-log {
  border-color: color-mix(in srgb, var(--activity-text, #fff) 30%, var(--activity-color, var(--focus-color, #1767a7)));
  background: var(--activity-color, var(--focus-color, #1767a7));
  color: var(--activity-text, #fff);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--activity-color, var(--focus-color, #1767a7)) 26%, transparent);
}
.public-range-outlook-activity.pill:hover,
.public-range-outlook-activity.pill:focus-visible,
.public-range-outlook-activity.has-historical-log:hover,
.public-range-outlook-activity.has-historical-log:focus-visible {
  border-color: color-mix(in srgb, var(--activity-text, #fff) 58%, var(--activity-color, var(--focus-color, #1767a7)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--activity-color, var(--focus-color, #1767a7)) 38%, transparent);
}
.public-range-outlook-activity::before,
.public-range-outlook-activity.has-historical-log::before {
  background: color-mix(in srgb, var(--activity-text, #fff) 72%, transparent);
}
.public-range-outlook-activity .public-range-outlook-time span,
.public-range-outlook-activity .public-range-outlook-meta span,
.public-range-outlook-activity .public-range-outlook-footer span {
  color: var(--activity-text, #fff);
  opacity: 0.76;
}
.public-range-outlook-activity .public-range-outlook-time strong,
.public-range-outlook-activity h3,
.public-range-outlook-activity .public-range-outlook-duration,
.public-range-outlook-activity .public-range-outlook-meta strong,
.public-range-outlook-activity .public-range-outlook-footer strong,
.public-range-outlook-activity.has-historical-log .public-range-outlook-time strong,
.public-range-outlook-activity.has-historical-log h3,
.public-range-outlook-activity.has-historical-log .public-range-outlook-meta strong,
.public-range-outlook-activity.has-historical-log .public-range-outlook-duration,
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-time strong,
body.theme-dark .public-range-outlook-activity.has-historical-log h3,
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-meta strong,
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-duration {
  color: var(--activity-text, #fff);
}
.public-range-outlook-activity .public-range-outlook-duration {
  opacity: 0.82;
}
.public-range-outlook-activity .public-range-outlook-kind,
.public-range-outlook-activity.has-historical-log .public-range-outlook-kind,
body.theme-dark .public-range-outlook-activity.has-historical-log .public-range-outlook-kind {
  background: color-mix(in srgb, var(--activity-text, #fff) 16%, transparent);
  color: var(--activity-text, #fff);
}
.public-range-outlook-activity .public-range-outlook-meta > div {
  background: color-mix(in srgb, var(--activity-text, #fff) 12%, transparent);
}
.public-range-outlook-activity .public-range-outlook-footer,
.public-range-outlook-activity .public-range-outlook-log-footer,
body.theme-dark .public-range-outlook-activity .public-range-outlook-log-footer {
  border-top-color: color-mix(in srgb, var(--activity-text, #fff) 22%, transparent);
  background: color-mix(in srgb, var(--activity-text, #fff) 10%, transparent);
}
.public-range-outlook-activity .public-range-outlook-log-link {
  color: var(--activity-text, #fff) !important;
}
.public-range-outlook-divider {
  height: 0;
  margin: 1px 3px;
  border-top: 1px solid var(--public-range-line);
}
.public-range-outlook-empty {
  display: flex;
  min-height: 155px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px dashed var(--public-range-line);
  border-radius: 13px;
  background: var(--public-range-soft);
  color: var(--public-range-muted);
  text-align: center;
}
.public-range-outlook-empty > span {
  color: color-mix(in srgb, var(--focus-color, #1767a7) 68%, var(--public-range-muted));
  font-size: 26px;
  line-height: 1;
}
.public-range-outlook-empty strong {
  margin-top: 8px;
  color: var(--public-range-ink);
  font-size: 12px;
}
.public-range-outlook-empty small {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
}
@media (max-width: 1650px) {
  #calGrid.public-range-outlook.public-range-outlook-days-7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  #calGrid.public-range-outlook.public-range-outlook-days-7,
  #calGrid.public-range-outlook.public-range-outlook-days-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .cal-range-detail-separator {
    flex-basis: 100%;
    width: 34px;
    height: 1px;
    border-top: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 35%, transparent);
    border-left: 0;
  }
  #calGrid.public-range-outlook.public-range-outlook-days-7,
  #calGrid.public-range-outlook.public-range-outlook-days-3 {
    grid-template-columns: 1fr;
  }
  #calGrid.public-range-outlook {
    gap: 10px;
    padding: 9px !important;
  }
  .public-range-outlook-day-header {
    min-height: 66px;
    padding: 9px 11px;
  }
  .public-range-outlook-date {
    width: 44px;
    height: 46px;
    flex-basis: 44px;
  }
  .public-range-outlook-date strong {
    font-size: 19px;
  }
}
.book-meta { font-size: 12px; color: #9ca3af; margin-bottom: 6px; margin-top: 6px; text-align: center; }
.book-roster summary {
  cursor: pointer;
  font-weight: 600;
}
.book-roster-summary {
  display: none;
  list-style: none;
}
.book-roster-summary::-webkit-details-marker {
  display: none;
}
.book-roster .roster-body {
  padding-top: 6px;
  font-size: 12px;
}
.book-nav i {
  --fa-primary-color: var(--focus-color, #1767a7);
  --fa-secondary-color: var(--focus-color, #1767a7);
}
.pagebar-tooltip.actionbar-tip {
  background: var(--focus-color, #1767a7) !important;
  color: var(--focus-contrast, #fff) !important;
}

.scuba-calendar-filter-card {
  margin: 0 14px 12px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 30%, #cbd5e1);
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-shade-panel, #ffffff) 90%, transparent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.scuba-calendar-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text, #1f2937);
  cursor: pointer;
  text-align: left;
}
.scuba-calendar-filter-toggle:hover,
.scuba-calendar-filter-toggle:focus-visible {
  background: color-mix(in srgb, var(--focus-color, #1767a7) 9%, transparent);
  outline: none;
}
.scuba-calendar-filter-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--focus-color, #1767a7);
  font-size: 13px;
  font-weight: 700;
}
.scuba-calendar-filter-arrow {
  color: var(--focus-color, #1767a7);
  font-size: 13px;
  transition: transform 0.18s ease;
}
.scuba-calendar-filter-card.is-open .scuba-calendar-filter-arrow {
  transform: rotate(90deg);
}
.scuba-calendar-filter-card.is-open .scuba-calendar-filter-toggle {
  border-radius: 8px 8px 0 0;
}
.scuba-calendar-filter-content {
  padding: 12px 12px 10px;
  border-top: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 18%, #cbd5e1);
}
.scuba-calendar-filter-content[hidden] {
  display: none !important;
}
.scuba-filter-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 185px));
  justify-content: center;
  gap: 11px;
  margin: 9px 22px 18px;
}
.scuba-filter-image-wrap {
  position: relative;
  min-width: 0;
}
.scuba-filter-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.scuba-filter-image:hover,
.scuba-filter-image:focus-visible {
  transform: translateY(-2px);
  border-color: var(--focus-color, #1767a7);
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.17);
  outline: none;
}
.scuba-filter-image.is-active {
  border-color: var(--focus-color, #1767a7);
  box-shadow: 0 0 0 2px var(--focus-color, #1767a7), 0 7px 16px rgba(15, 23, 42, 0.18);
}
.scuba-filter-image-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 8;
  background-color: color-mix(in srgb, var(--focus-color, #1767a7) 10%, #e2e8f0);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--focus-color, #1767a7);
  font-size: 24px;
}
.scuba-filter-image-all .scuba-filter-image-media {
  flex-direction: column;
  gap: 5px;
}
.scuba-filter-image-all-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.scuba-filter-image-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--focus-color, #1767a7) 92%, #0f172a);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.scuba-filter-image-count {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.66);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
  pointer-events: none;
  transform: translate(-50%, -66.667%);
}
.scuba-calendar-filter-groups {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin: 2px 0 0;
}
.scuba-calendar-filter-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 7px 14px;
}
.scuba-calendar-filter-group + .scuba-calendar-filter-group {
  border-left: 3px solid color-mix(in srgb, var(--focus-color, #1767a7) 38%, transparent);
}
.scuba-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 42%, #cbd5e1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--focus-color, #1767a7);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.scuba-filter-pill:not(.is-active) {
  color: var(--focus-color, #1767a7) !important;
}
.scuba-filter-pill:hover,
.scuba-filter-pill:focus-visible {
  border-color: var(--focus-color, #1767a7);
  background: color-mix(in srgb, var(--focus-color, #1767a7) 10%, #ffffff);
  outline: none;
}
.scuba-filter-pill.is-active {
  border-color: var(--focus-color, #1767a7);
  background: var(--focus-color, #1767a7);
  color: var(--focus-contrast, #ffffff) !important;
}
.scuba-filter-tank-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.scuba-filter-tank-icon {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.scuba-filter-tank-icon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 1px;
  width: 3px;
  height: 3px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}
body.theme-dark .scuba-calendar-filter-card {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.58);
}
body.theme-dark .scuba-calendar-filter-toggle {
  color: #e2e8f0;
}
body.theme-dark .scuba-calendar-filter-title,
body.theme-dark .scuba-calendar-filter-arrow {
  color: #ffffff;
}
body.theme-dark .scuba-calendar-filter-content {
  border-top-color: rgba(255, 255, 255, 0.14);
}
body.theme-dark .scuba-filter-image {
  border-color: rgba(255, 255, 255, 0.16);
  background: #111827;
  color: #f8fafc;
}
body.theme-dark .scuba-filter-pill {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(15, 23, 42, 0.86);
  color: #e2e8f0;
}
body.theme-dark .scuba-filter-pill:not(.is-active) {
  color: #e2e8f0 !important;
}
body.theme-dark .scuba-filter-pill.is-active {
  border-color: var(--focus-color, #1767a7);
  background: var(--focus-color, #1767a7);
  color: var(--focus-contrast, #ffffff) !important;
}
@media (max-width: 760px) {
  .scuba-calendar-filter-card {
    margin-right: 8px;
    margin-left: 8px;
  }
  .scuba-filter-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-right: 8px;
    margin-left: 8px;
  }
  .scuba-calendar-filter-groups {
    align-items: stretch;
    flex-direction: column;
  }
  .scuba-calendar-filter-group + .scuba-calendar-filter-group {
    border-top: 3px solid color-mix(in srgb, var(--focus-color, #1767a7) 38%, transparent);
    border-left: 0;
  }
}

.cal-color-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 2px 12px 12px;
  padding: 10px 12px 4px;
  border-top: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 22%, transparent);
  color: var(--theme-text, #334155);
}
.cal-color-legend-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.cal-color-legend-control > i {
  color: var(--focus-color, #1767a7);
  font-size: 16px;
}
.cal-color-legend-select {
  min-width: 180px;
  height: 34px;
  padding: 4px 30px 4px 10px;
  border: 1px solid color-mix(in srgb, var(--focus-color, #1767a7) 38%, #cbd5e1);
  border-radius: 5px;
  background: var(--theme-surface, #fff);
  color: var(--theme-text, #1f2937);
  font: inherit;
  font-size: 13px;
}
.cal-color-legend-items {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 20px;
  min-height: 28px;
}
.cal-color-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 13px;
  font-weight: 400;
}
.cal-color-legend-empty {
  color: color-mix(in srgb, var(--theme-text, #334155) 62%, transparent);
  font-size: 12px;
}
.cal-color-legend-swatch {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid rgba(15, 23, 42, 0.28);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}
body.theme-dark .cal-color-legend {
  color: #e2e8f0;
  border-top-color: rgba(255, 255, 255, 0.16);
}
body.theme-dark .cal-color-legend-select {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.24);
  color: #f8fafc;
}
body.theme-dark .cal-color-legend-swatch {
  border-color: rgba(255, 255, 255, 0.42);
}
@media (max-width: 720px) {
  .cal-color-legend {
    align-items: stretch;
  }
  .cal-color-legend-control,
  .cal-color-legend-select {
    width: 100%;
  }
  .cal-color-legend-items {
    justify-content: flex-start;
  }
}