/* ─────────────────────────────────────────────────────────────────────
   Shared component layer — button primitives.

   Consolidates the primary-action button that was previously repeated as an
   identical inline utility string across seven index/header views:

     inline-flex items-center gap-1.5 h-9 px-3.5 text-sm font-medium
     text-white bg-accent rounded-btn hover:bg-accent-strong
     transition-colors no-underline

   (New Trip · Trip · Add diver · Add · Add vessel · New booking).

   PARITY NOTE — these values are matched BYTE-FOR-BYTE to the Tailwind output
   of the inline string above, NOT to WL's `.dv-btn` spec. WL's `.dv-btn` uses
   16px horizontal padding + 13px font; DM's shipped buttons use px-3.5 (14px) +
   text-sm (14px). To guarantee ZERO visual change we keep DM's exact metrics
   under the WL class name. If/when the two are unified, change here once.

   Tailwind → CSS mapping used:
     inline-flex      → display:inline-flex
     items-center     → align-items:center
     gap-1.5          → gap:0.375rem (6px)
     h-9              → height:2.25rem (36px)
     px-3.5           → padding-left/right:0.875rem (14px)
     text-sm          → font-size:0.875rem; line-height:1.25rem
     font-medium      → font-weight:500
     rounded-btn      → border-radius:6px (var(--radius-btn) / borderRadius.btn)
     transition-colors→ transition: color/bg/border 150ms cubic-bezier(.4,0,.2,1)
     no-underline     → text-decoration-line:none

   Token-driven; consumes the semantic aliases from tokens.css. @imported from
   application.css right after components/header_band.css.
   ───────────────────────────────────────────────────────────────────── */

/* ── Base button ──────────────────────────────────────────────────────
   Layout + typography shared by every variant. Color/background come from
   the modifier so the base alone is never used directly. */
.dv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 6px;
  text-decoration-line: none;
  cursor: pointer;
  white-space: nowrap;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* Keyboard focus ring — focus-visible only, so mouse clicks don't ring. */
.dv-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Pressed feedback — shared across every variant. */
.dv-btn:active {
  transform: translateY(1px);
}
.dv-btn:disabled,
.dv-btn[disabled] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
/* aria-disabled twin — same dimmed look, but the button stays focusable so
   assistive tech can reach it and hear why it's inert (turnaround bulk bars
   disable until a selection exists; the Stimulus guard blocks the submit). */
.dv-btn[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

/* ── Primary (accent fill) ────────────────────────────────────────────
   Replaces: bg-accent text-white hover:bg-accent-strong. */
/* An <a class="dv-btn"> must not inherit link-hover styling (underline +
   link color) from global `a:hover` rules — those out-specify the variant's
   base `color` on hover. Lock decoration off on every interactive state, and
   re-assert each variant's text color on :hover below. */
.dv-btn:hover,
.dv-btn:focus,
.dv-btn:focus-visible,
.dv-btn:active { text-decoration-line: none; }

.dv-btn--primary {
  color: #fff;
  background-color: var(--accent);
}
.dv-btn--primary:hover {
  color: #fff;
  background-color: var(--accent-strong);
}

/* ── Large size ───────────────────────────────────────────────────────
   Taller, heavier weight. For prominent full-width CTAs (e.g. the sidebar
   "New Dive Plan"). Pair with a layout class for width/block behaviour. */
.dv-btn--lg {
  height: 2.625rem;        /* 42px */
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;     /* 14px */
  font-weight: 600;
}

/* ── Field-height size ────────────────────────────────────────────────
   46px tall — the canonical form-control height (matches .dv-field /
   .diveos-input on a filter row). Use for submit/clear buttons that sit
   inline with selects + date pickers so every control aligns on one
   baseline. Height-only; weight + 14px font stay the base size. */
.dv-btn--field {
  height: 46px;
}

/* ── Secondary (surface + hairline outline) ───────────────────────────
   Outline button: surface fill, hairline border, ink text, hover warms to
   canvas. WL `.dv-btn--secondary`. Used for "View public" / "Copy" on the
   booking-detail page.

   NOTE: the booking-detail "View public" button previously carried its own
   inline string (text-[13px], rounded-md). It is now unified to the canonical
   `.dv-btn` metrics (14px font, 6px radius). The radius is identical (rounded-md
   and rounded-btn both compute to 6px); only the font shifts 13px → 14px. This
   1px change is accepted in favour of a single shared button size (consistency
   over preserving a one-off). */
.dv-btn--secondary {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.dv-btn--secondary:hover {
  color: var(--ink);
  background-color: var(--canvas);
}

/* ── Ghost (chromeless) ───────────────────────────────────────────────
   No fill, no border — an accent-text action that reads as a button but sits
   flat in a tinted container (callout trailing action, wizard "Back"). Hover
   tints with the accent-soft wash. Was referenced (callout, wizard footer)
   before it existed, so those rendered as bare links — now a real variant. */
.dv-btn--ghost {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--accent);
}
.dv-btn--ghost:hover {
  color: var(--accent-strong);
  background-color: var(--accent-soft);
}

/* ── View toggle (segmented control) ──────────────────────────────────
   A small inset segmented control for switching a surface between views
   (Bookings: Kanban / Table / Calendar). Options are <a> links, so they reset
   BT's global a:hover underline. Active = raised surface chip + accent text.
   Replaces the per-page utility-soup version (raw text-[12px], hover underline,
   no shared identity). */
.dv-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.dv-view-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.dv-view-toggle__opt:hover { color: var(--ink); background: var(--surface-alt); text-decoration: none; }
.dv-view-toggle__opt--active,
.dv-view-toggle__opt--active:hover {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* ── Danger (outlined cancelled) ──────────────────────────────────────
   Transparent fill, cancelled-tinted border + text, hover fills with the
   cancelled-bg wash. WL `.dv-btn--danger`. Used for "Cancel booking".

   NOTE: the inline original used bg-surface (opaque) rather than transparent.
   Over the page's surface background these render identically; transparent is
   the WL-canonical token treatment and is adopted here. */
.dv-btn--danger {
  background-color: transparent;
  border: 1px solid var(--cancelled-border);
  color: var(--cancelled);
}
.dv-btn--danger:hover {
  color: var(--cancelled);
  background-color: var(--cancelled-bg);
}

/* ── Icon-only (square) ───────────────────────────────────────────────
   Square button, no horizontal padding, centred glyph. WL `.dv-btn--icon`.
   Used for the Ledger date-navigation arrows.

   NOTE: the Ledger arrows were previously `.ledger-nav-arrow` — a 32px square
   with a hairline border and muted-ink glyph. The shared `.dv-btn--icon` is a
   36px square (matching the canonical `.dv-btn` height) with a muted glyph.
   To preserve the Ledger's 32px sizing AND its hairline outline, the arrows
   use `.dv-btn dv-btn--secondary dv-btn--icon dv-btn--sm` (secondary supplies
   the surface + hairline + ink, sm drops it to 32px). This keeps the existing
   look while consuming only shared classes. */
.dv-btn--icon {
  width: 2.25rem;       /* 36px — square, matches base height */
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  color: var(--muted);
}
.dv-btn--icon:hover {
  background-color: var(--state-hover);
}

/* ── Small size modifier (h-8) ────────────────────────────────────────
   Denser button for inline/contextual actions. WL `.dv-btn--sm`:
   height 32px, padding 0 12px, font 12px. Used for the booking-detail
   "Assign" (primary sm) and "Copy" (secondary sm) buttons, and — combined
   with `--icon` — the Ledger nav arrows (32px square). */
.dv-btn--sm {
  height: 2rem;         /* 32px / h-8 */
  padding-left: 0.75rem;  /* 12px / px-3 */
  padding-right: 0.75rem;
  font-size: var(--text-xs);
}
.dv-btn--sm.dv-btn--icon {
  width: 2rem;          /* 32px square */
  padding-left: 0;
  padding-right: 0;
}
/* Mini button — for an inline action that sits BESIDE a status badge and must
   align to its height, not the 32px --sm (e.g. waiver roster "Send link" next
   to the "Not signed" pill). 22px tall ≈ the .dv-badge--square height. */
.dv-btn--xs {
  height: 1.375rem;       /* 22px */
  padding-left: 0.5rem;   /* 8px */
  padding-right: 0.5rem;
  font-size: var(--text-2xs);
  gap: 4px;
}
.dv-btn--xs.dv-btn--icon { width: 1.375rem; padding-left: 0; padding-right: 0; }