/**
 * design-system.css — Phase 0i
 * Platform-wide component primitives (.ds-* namespace).
 *
 * Depends on design-tokens.css being loaded first.
 * Load order: branding-css.ejs → design-tokens.css → design-system.css
 *
 * Components: ds-card, ds-btn, ds-modal, ds-input, ds-table,
 *             ds-alert, ds-badge, ds-tabs
 *
 * Do NOT use this file for chrome layout (rail/topbar) — see platform-chrome.css.
 * Module pages keep their existing CSS; adopt ds-* incrementally per module-migration.md.
 */

/* ============================================================
   ds-card
   Usage: <div class="ds-card ds-card--padded ds-card--elevated">
   ============================================================ */
.ds-card {
  background: var(--ds-bg-surface);
  border-radius: var(--ds-radius-card); /* 10px — floating content-card identity */
  box-shadow: var(--ds-shadow-card);    /* app floating shadow (no base border) */
  overflow: hidden;
}

/* 20px is deliberate: the spacing scale skips 20 (md=16, lg=24). 20 keeps
   Overview stat tiles roomy without bloating them. */
.ds-card--padded { padding: 20px; }

.ds-card--bordered {
  border: 1px solid var(--ds-border-strong); /* opt-in border; base border removed */
}

.ds-card--elevated {
  box-shadow: var(--ds-shadow-lg);
}

.ds-card--elevated:hover {
  box-shadow: var(--ds-shadow-xl);
}

/* List-row variant: pins stacked rows to their pre-change flat/bordered look
   so they don't become floating cards. */
.ds-card--flat {
  box-shadow: none;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-md); /* 8px */
}
.ds-card--flat.ds-card--padded { padding: var(--ds-spacing-md); } /* 16px */

/* Card heading — canonical of legacy `.card h2` (brand-red bottom border). */
.ds-card__title {
  display: block; /* inline spans drop vertical margins — force block so the divider's margin-bottom applies (balanced spacing + full-width line) */
  color: var(--ds-text-primary);
  font-size: var(--ds-text-xl); /* 20px — matches legacy .card h2 */
  margin-bottom: var(--ds-spacing-md);
  padding-bottom: var(--ds-spacing-sm);
  border-bottom: 2px solid var(--ds-brand-primary);
}

/* ============================================================
   ds-page-header — canonical page header (partials/chrome/page-header)
   A .ds-card row: optional back button + <h1> title (+ optional
   subtitle / right-aligned actions). Used by ~20 pages incl. every
   admin group page (which adds .admin-page-header via headerClass).
   ============================================================ */
.ds-page-header {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-sm);
  margin-bottom: var(--ds-spacing-md);
}

/* Title sits inline with the back button — drop ds-card__title's margin
   (its brand-red underline is retained deliberately). */
.ds-page-header .ds-card__title {
  margin: 0;
  font-size: var(--ds-text-xl);
}

.ds-page-header__subtitle {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}

.ds-page-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-sm);
  flex-wrap: wrap;
}

/* ============================================================
   ds-btn
   Usage: <button class="ds-btn ds-btn--primary ds-btn--md">
   Variants: --primary, --secondary, --ghost, --danger
   Sizes: --sm, --md (default), --lg
   ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-xs);
  font-family: inherit;
  font-weight: var(--ds-weight-medium);
  border-radius: var(--ds-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  padding: 7px 14px;
  font-size: var(--ds-text-sm);
}

.ds-btn:focus-visible {
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

.ds-btn--sm  { padding: 5px 10px; font-size: var(--ds-text-xs); }
.ds-btn--md  { padding: 7px 14px; font-size: var(--ds-text-sm); }
.ds-btn--lg  { padding: 10px 20px; font-size: var(--ds-text-base); }

.ds-btn--primary {
  background: var(--ds-brand-primary);
  color: #fff;
  border-color: var(--ds-brand-primary);
}
.ds-btn--primary:hover { background: var(--ds-brand-secondary); border-color: var(--ds-brand-secondary); }

.ds-btn--secondary {
  background: var(--ds-bg-surface);
  color: var(--ds-text-secondary);
  border-color: var(--ds-border-strong);
}
.ds-btn--secondary:hover { background: var(--ds-bg-surface-2); }

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-text-secondary);
  border-color: transparent;
}
.ds-btn--ghost:hover { background: var(--ds-bg-surface-2); }

.ds-btn--danger {
  background: var(--ds-danger);
  color: #fff;
  border-color: var(--ds-danger);
}
.ds-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Canonical of legacy `.btn-outline` — brand outline, brand-wash on hover. */
.ds-btn--outline {
  background: transparent;
  color: var(--ds-brand-primary);
  border-color: var(--ds-brand-primary);
}
.ds-btn--outline:hover { background: var(--ds-brand-accent); }

/* Canonical of legacy `.btn-success` — solid green, token-derived hover darken. */
.ds-btn--success {
  background: var(--ds-success);
  color: #fff;
  border-color: var(--ds-success);
}
.ds-btn--success:hover {
  background: color-mix(in srgb, var(--ds-success) 85%, #000);
  border-color: color-mix(in srgb, var(--ds-success) 85%, #000);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   ds-modal
   Usage:
     <div class="ds-modal__overlay ds-modal__overlay--open">
       <div class="ds-modal ds-modal--centered" role="dialog" aria-modal="true">
         <div class="ds-modal__header">...</div>
         <div class="ds-modal__body">...</div>
         <div class="ds-modal__footer">...</div>
       </div>
     </div>
   ============================================================ */
.ds-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--ds-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-md);
}
.ds-modal__overlay--open { display: flex; }

.ds-modal {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xl);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.ds-modal--full { max-width: 100%; height: 100vh; border-radius: 0; }

.ds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-md) var(--ds-spacing-md) 0;
  flex-shrink: 0;
}

.ds-modal__title {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-primary);
  margin: 0;
}

.ds-modal__body {
  padding: var(--ds-spacing-md);
  overflow-y: auto;
  flex: 1;
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-sm);
}

.ds-modal__footer {
  padding: var(--ds-spacing-sm) var(--ds-spacing-md) var(--ds-spacing-md);
  display: flex;
  gap: var(--ds-spacing-sm);
  justify-content: flex-end;
  flex-shrink: 0;
  border-top: 1px solid var(--ds-border-subtle);
}

/* ============================================================
   ds-input
   Usage:
     <div class="ds-input">
       <label class="ds-input__label">Email</label>
       <input class="ds-input__field" type="email">
       <span class="ds-input__hint">Optional hint</span>
       <span class="ds-input__error">Error message</span>
     </div>
   ============================================================ */
.ds-input { display: flex; flex-direction: column; gap: 4px; }

.ds-input__label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-secondary);
}

.ds-input__field {
  padding: 8px 10px;
  font-size: var(--ds-text-sm);
  font-family: inherit;
  color: var(--ds-text-primary);
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.ds-input__field:focus {
  outline: none;
  border-color: var(--ds-brand-primary);
  box-shadow: 0 0 0 3px var(--ds-focus-ring);
}

.ds-input--invalid .ds-input__field {
  border-color: var(--ds-danger);
}

.ds-input__hint {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

.ds-input__error {
  font-size: var(--ds-text-xs);
  color: var(--ds-danger-text);
  display: none;
}

.ds-input--invalid .ds-input__error { display: block; }

/* ============================================================
   ds-table
   Usage: <table class="ds-table ds-table--striped ds-table--hoverable">
   ============================================================ */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
}

.ds-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--ds-border-subtle);
  background: var(--ds-bg-page);
}

.ds-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-border-subtle);
  vertical-align: top;
}

.ds-table tbody tr:last-child td { border-bottom: none; }

.ds-table--striped tbody tr:nth-child(even) td { background: var(--ds-bg-page); }

.ds-table--hoverable tbody tr:hover td { background: var(--ds-bg-surface-2); }

/* ============================================================
   ds-alert
   Usage: <div class="ds-alert ds-alert--warning" role="alert">
   Variants: --info, --success, --warning, --danger
   ============================================================ */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-sm);
  padding: 12px var(--ds-spacing-md);
  border-radius: var(--ds-radius-md);
  border-left-width: 4px;
  border-left-style: solid;
  font-size: var(--ds-text-sm);
}

.ds-alert--info    { background: var(--ds-info-bg);    border-color: var(--ds-info);    color: var(--ds-text-secondary); }
.ds-alert--success { background: var(--ds-success-bg); border-color: var(--ds-success); color: var(--ds-text-secondary); }
.ds-alert--warning { background: var(--ds-warning-bg); border-color: var(--ds-warning); color: var(--ds-text-secondary); }
.ds-alert--danger  { background: var(--ds-danger-bg);  border-color: var(--ds-danger);  color: var(--ds-text-secondary); }

.ds-alert__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.ds-alert__title { font-weight: var(--ds-weight-semibold); margin-bottom: 2px; }

/* ============================================================
   ds-badge
   Usage: <span class="ds-badge ds-badge--success ds-badge--pill">Active</span>
   Variants: --primary, --neutral, --success, --warning, --danger, --info, --attention
   Shapes: --pill (default rounded), --square
   ============================================================ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  border-radius: var(--ds-radius-full);
  white-space: nowrap;
  line-height: 1.4;
}

.ds-badge--square { border-radius: var(--ds-radius-sm); }
.ds-badge--pill { border-radius: var(--ds-radius-full); }

.ds-badge--primary { background: var(--ds-brand-accent); color: var(--ds-brand-primary); }
.ds-badge--neutral { background: var(--ds-bg-surface-2); color: var(--ds-text-secondary); }
.ds-badge--success { background: var(--ds-success-bg);   color: var(--ds-success-text); }
.ds-badge--warning { background: var(--ds-warning-bg);   color: var(--ds-warning-text); }
.ds-badge--danger      { background: var(--ds-danger-bg);      color: var(--ds-danger-text); }
.ds-badge--info        { background: var(--ds-info-bg);        color: var(--ds-info-text); }
.ds-badge--attention   { background: var(--ds-attention-bg);   color: var(--ds-attention-text); }
.ds-badge--orange      { background: var(--ds-orange-bg);      color: var(--ds-orange-text); }

/* ============================================================
   ds-tabs
   Usage:
     <div class="ds-tabs">
       <div class="ds-tabs__list" role="tablist">
         <button class="ds-tabs__tab ds-tabs__tab--active" role="tab">Tab 1</button>
         <button class="ds-tabs__tab" role="tab">Tab 2</button>
       </div>
       <div class="ds-tabs__panel" role="tabpanel">Content</div>
     </div>
   ============================================================ */
.ds-tabs { display: flex; flex-direction: column; }

.ds-tabs__list {
  display: flex;
  gap: var(--ds-spacing-sm);
  background: var(--ds-bg-surface);
  border-radius: var(--ds-radius-card);
  padding: var(--ds-spacing-sm);
  margin-bottom: var(--ds-spacing-sm);
  box-shadow: var(--ds-shadow-card);
  flex-wrap: wrap;
}

.ds-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 6px;
  color: var(--ds-text-primary);
  font-weight: var(--ds-weight-medium);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s;
}

.ds-tabs__tab:hover:not(.ds-tabs__tab--active) { background: var(--ds-bg-surface-2); }

.ds-tabs__tab--active {
  background: var(--ds-brand-primary);
  color: #fff;
  font-weight: var(--ds-weight-semibold);
}

.ds-tabs__panel {
  padding: var(--ds-spacing-md) 0;
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-sm);
}

/* ============================================================
   ds-filter-chip
   Selectable button-style chip for dashboard filter bars.
   Provides default / hover / focus-visible / selected /
   selected-hover / disabled states so module pages don't
   redefine them.

   Variants: --stacked (vertical value + label layout)
   Selected: .ds-filter-chip--active OR [aria-pressed="true"]

   Usage (label-only):
     <button type="button" class="ds-filter-chip"
             data-filter="all" aria-pressed="false">All</button>

   Usage (stacked value over label):
     <button type="button" class="ds-filter-chip ds-filter-chip--stacked"
             data-filter="active" aria-pressed="false"
             aria-label="Filter active operations">
       <span class="ds-filter-chip__value" aria-live="polite">12</span>
       <span class="ds-filter-chip__label">Active</span>
     </button>

   Token note: uses --cc13-* neutrals (not --ds-*) because the
   --cc13-* tokens are overridden per-page-class in dark mode
   (e.g. body.home-page.dark-mode, body.operations-page.dark-mode)
   to red-tinted near-black, while --ds-* follows the global
   slate dark-mode. Using --cc13-* lets chips inherit the parent
   module's dark-mode chrome treatment automatically.
   ============================================================ */
.ds-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-xs);
  padding: 8px 14px;
  font-family: inherit;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--cc13-ink);
  background: var(--cc13-paper-2);
  border: 1px solid var(--cc13-border);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.ds-filter-chip:hover {
  background: var(--cc13-paper-3);
  border-color: var(--cc13-ink-3);
  transform: translateY(-1px);
}

.ds-filter-chip:focus { outline: none; }
.ds-filter-chip:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.ds-filter-chip--active,
.ds-filter-chip[aria-pressed="true"] {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.ds-filter-chip--active:hover,
.ds-filter-chip[aria-pressed="true"]:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  transform: translateY(-1px);
}

.ds-filter-chip:disabled,
.ds-filter-chip[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.ds-filter-chip--stacked {
  flex-direction: column;
  gap: 5px;
}

.ds-filter-chip__value {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  color: var(--primary-color);
  line-height: 1;
}

.ds-filter-chip__label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  color: var(--cc13-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ds-filter-chip--active .ds-filter-chip__value,
.ds-filter-chip--active .ds-filter-chip__label,
.ds-filter-chip[aria-pressed="true"] .ds-filter-chip__value,
.ds-filter-chip[aria-pressed="true"] .ds-filter-chip__label {
  color: #fff;
}

.ds-filter-chip-group {
  display: inline-flex;
  gap: var(--ds-spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   ds-stat — STATIC metric tile (canonical of legacy `.stat-card`).
   Composes with `.ds-card--flat`. Non-clickable — unlike the
   clickable `.ds-filter-chip--stacked` filter tile.
   Usage:
     <div class="ds-card ds-card--flat ds-card--padded ds-stat">
       <div class="ds-stat__value">12</div>
       <div class="ds-stat__label">Active</div>
     </div>
   ============================================================ */
.ds-stat {
  text-align: center;
  background: var(--ds-bg-surface-2);
}
.ds-stat__value {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text-primary);
}
.ds-stat__label {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin-top: var(--ds-spacing-xs);
}

/* ============================================================
   ds-toast
   Top-center stacked notification toasts.
   Container is fixed; multiple toasts stack downward.
   Token-driven: bg/text/border flip in dark mode automatically.

   Usage (via window.AppToast helper):
     window.AppToast.success('Operation updated')
     window.AppToast.error('Network error')
     window.AppToast.show('Custom', 'info', 5000)

   Manual markup (rarely needed; helper handles it):
     <div class="ds-toast-stack">
       <div class="ds-toast ds-toast--success">
         <svg class="ds-toast__icon" ...><use href="#i-check"/></svg>
         <span class="ds-toast__message">Saved</span>
       </div>
     </div>
   ============================================================ */
.ds-toast-stack {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Toasts must stay readable over an open modal. The dive-logs modals
     (operations-dive-logs.css .modal/.modal-content) hardcode z-index
     1000/1001 (not token-driven), and .ds-select__panel floors at
     ds-z-modal+700=1100 above (see that rule's comment) — 1200 clears both,
     same reasoning as that panel, just one layer higher. */
  z-index: 1200;
  max-width: 420px;
  width: max-content;
  pointer-events: none;
}

.ds-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cc13-paper);
  color: var(--cc13-ink);
  border: 1px solid var(--cc13-border);
  border-left: 4px solid var(--cc13-ink-3);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  min-width: 220px;
  max-width: 360px;
  word-wrap: break-word;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ds-toast--show {
  opacity: 1;
  transform: translateY(0);
}

.ds-toast--success { border-left-color: var(--ds-success); }
.ds-toast--error   { border-left-color: var(--ds-danger); }
.ds-toast--warning { border-left-color: var(--ds-warning); }
.ds-toast--info    { border-left-color: var(--ds-info); }

.ds-toast__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.ds-toast--success .ds-toast__icon { color: var(--ds-success); }
.ds-toast--error   .ds-toast__icon { color: var(--ds-danger); }
.ds-toast--warning .ds-toast__icon { color: var(--ds-warning); }
.ds-toast--info    .ds-toast__icon { color: var(--ds-info); }

.ds-toast__message {
  flex: 1;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .ds-toast-stack {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    max-width: none;
  }
  .ds-toast { max-width: none; }
}

/* ============================================================
   ds-modal-card
   Layered modal theme: subtle primary-tinted card section inside
   any modal. Token-driven tint flips with both modes (color-mix
   blends primary into the per-mode paper value).

   Pairs with:
   - Modal wrapper bg: var(--cc13-paper) [via shared/modal.css
     and operations-dive-logs.css existing rules]
   - Field bg inside cards: var(--cc13-paper-2) [via Decisions
     27 + 32 modal-scoped input rules, updated in this wave]

   Catch-all: also applies to existing modals that use the
   conventional class names .modal-section or .form-section
   directly inside .modal-content (dive-logs) or .modal-container
   (shared/modal.css) wrappers. New modals SHOULD use
   .ds-modal-card explicitly.
   ============================================================ */
.ds-modal-card,
.modal-content .modal-section,
.modal-content .form-section,
.modal-container .modal-section,
.modal-container .form-section {
  background: color-mix(in srgb, var(--primary-color) 8%, var(--cc13-paper));
  border: 1px solid var(--cc13-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-spacing-md);
  margin-bottom: var(--ds-spacing-md);
}

/* ============================================================
   Base select styling — I1 UAT fix (touch-friendly, theme-aware)
   Low specificity bare `select` selector so any select with its
   own styles is NOT overridden.  No !important.
   Keeps native OS picker behaviour (appearance:auto stays default).
   Tokens: --ds-bg-surface / --ds-text-primary / --ds-border-strong
           flip automatically in body.dark-mode — no dark-mode block
           needed here.
   ============================================================ */
select {
  min-height: 44px;
  padding: 8px 10px;
  font-size: var(--ds-text-base);    /* 16px — prevents iOS auto-zoom */
  font-family: inherit;
  color: var(--ds-text-primary);
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

select:focus {
  outline: none;
  border-color: var(--ds-brand-primary);
  box-shadow: 0 0 0 3px var(--ds-focus-ring);
}

select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   Google Maps InfoWindow theming
   Tokens flip the bubble bg/text in dark mode automatically.
   In light mode --cc13-paper resolves to white (Google default),
   so this is a no-op visually. Dark mode flips to red-tinted near-black.
   !important required to beat Google's inline-rendered styles.
   Applies platform-wide — sonar-scans page, operations detail Scene Map.
   ============================================================ */
.gm-style-iw,
.gm-style-iw-c,
.gm-style-iw-d {
  background: var(--cc13-paper) !important;
  color: var(--cc13-ink) !important;
}

.gm-style-iw-c {
  border: 1px solid var(--cc13-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.gm-style-iw-tc::after {
  background: var(--cc13-paper) !important;
}

.gm-style-iw-d a {
  color: var(--primary-color);
}

/* InfoWindow close-X icon is a grey image; invert in dark mode for contrast. */
body.dark-mode .gm-style-iw button img {
  filter: invert(1);
}

/* ============================================================
   ds-select — custom dropdown component (ADR-030 / UAT R6-4)
   Enhances a native <select> progressively; the native element
   stays in the DOM as the value source + form field.

   Structure (built by dsSelect.js):
     .ds-select__wrapper        — relative-positioned parent
       .ds-select__trigger      — visible button (ARIA: button + listbox)
         .ds-select__trigger-label — selected text
         .ds-select__chevron    — caret icon
     ul.ds-select__panel        — appended to <body> (escapes modal overflow)
       li.ds-select__option     — each option row
   ============================================================ */

/* Wrapper — relative position so the trigger fills the form group */
.ds-select__wrapper {
  position: relative;
  display: block;
}

/* Trigger — matches native select visual size + tokens */
.ds-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-xs);
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-size: var(--ds-text-base);
  font-family: inherit;
  color: var(--ds-text-primary);
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ds-select__trigger:focus-visible {
  outline: none;
  border-color: var(--ds-brand-primary);
  box-shadow: 0 0 0 3px var(--ds-focus-ring);
}

.ds-select__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Open state — border matches focus */
.ds-select--open .ds-select__trigger {
  border-color: var(--ds-brand-primary);
  box-shadow: 0 0 0 3px var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
}

/* Label — grows to fill available space, truncates */
.ds-select__trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-text-primary);
}

/* Chevron — rotates when open */
.ds-select__chevron {
  flex-shrink: 0;
  color: var(--ds-text-muted);
  transition: transform 0.15s;
  line-height: 0;
}

.ds-select--open .ds-select__chevron {
  transform: rotate(180deg);
}

/* Panel — fixed to body, above modal. dsSelect.js ALSO sets an inline
   z-index at open time (ancestorZ + 10, computed from the select's own
   ancestor chain — see positionPanel()/maxAncestorZIndex() in that file),
   which normally wins since inline style beats a stylesheet rule of equal
   specificity. This static value is the FLOOR for whenever that dynamic
   computation doesn't run (panel not yet opened) or under-counts (no
   positioned ancestor found). The dive-logs modals (operations-dive-logs.css
   .modal/.modal-content) hardcode z-index 1000/1001 — NOT design-token-
   driven — so this floor must clear that value outright, not just
   ds-z-modal (400), or the options list renders behind an open modal. */
.ds-select__panel {
  position: absolute;
  z-index: calc(var(--ds-z-modal, 400) + 700);
  list-style: none;
  margin: 0;
  padding: var(--ds-spacing-xs) 0;
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-brand-primary);
  border-top: none;
  border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-lg);
  max-height: 260px;
  overflow-y: auto;
  min-width: 160px;
  overscroll-behavior: contain;
}

/* Option row */
.ds-select__option {
  display: block;
  padding: 10px 12px;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.1s;
}

.ds-select__option:hover,
.ds-select__option--focused {
  background: var(--ds-bg-surface-2);
}

.ds-select__option--selected {
  background: var(--ds-brand-accent, #e7f3ff);
  color: var(--ds-brand-primary);
  font-weight: var(--ds-weight-medium);
}

.ds-select__option--selected:hover,
.ds-select__option--selected.ds-select__option--focused {
  background: color-mix(in srgb, var(--ds-brand-primary) 18%, var(--ds-bg-surface));
}

.ds-select__option--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Dark-mode token flips — surface/border already flip via design-tokens.css;
   accent needs an explicit override for dark contexts */
body.dark-mode .ds-select__option--selected {
  background: color-mix(in srgb, var(--primary-color, #1877f2) 28%, transparent);
  color: var(--ds-text-primary);
}

body.dark-mode .ds-select__panel {
  border-color: var(--ds-brand-primary);
}