/* =========================================================================
   buttons.css — THE canonical pill-button language for the BACK-END.

   ONE source of truth for every authenticated surface: the calendar/schedule
   (loaded after app/styles/calendar.css) AND every staff form/admin page
   (loaded after styles/site.css, only on app pages — see includes/layout-head.htm).
   The public marketing site does NOT load this file and keeps its own button
   styling (full-width, square orange CTAs in styles/site.css) intentionally.

   DESIGN INTENT — calm by default, meaning still readable:
   Back-end actions are SUBTLY colored so a row of [Sheet] [Call] [Delete] looks
   uniform and the eye is NOT yanked to the destructive action. Color that
   carries meaning stays "usably vivid" but is toned down from heavy saturated
   blocks to soft tints that DEEPEN on hover/focus:
     - Primary (Sheet / Create estimate / Save / + Call / Restore): soft navy
       fill, navy text — clearly the main action, calm — turns solid navy on hover.
     - Danger (Delete / Remove / Purge): de-emphasized — light red tint with red
       text — becomes a vivid solid red ONLY on hover/focus. Delete is now a
       reversible archive, so it must not be the loudest thing in a row.
     - Secondary (Call / nav / filters): quiet neutral outline / ghost.

   Values are self-contained (--rh-btn-* tokens) so the rendering is identical
   regardless of which host palette (calendar.css's --color-* or site.css's
   --navy/--orange) is also present. De-dup note: the base .btn + variants +
   .btn--seg + .calls-switcher + .nav-cluster live ONLY here.
   ========================================================================= */
:root {
  --rh-btn-radius: 999px;
  --rh-btn-bg: #ffffff;
  --rh-btn-fg: #243140;           /* calm slate text for neutral buttons */
  --rh-btn-line: #d8dee8;         /* soft neutral border */
  --rh-btn-line-strong: #c3ccda;
  --rh-btn-hover-line: #9fb0c7;   /* calm hover border (no loud accent) */

  /* Primary — navy. Soft fill at rest; deepens to solid navy on hover. */
  --rh-btn-primary: #002347;
  --rh-btn-primary-fill: #e4ecf6;
  --rh-btn-primary-line: #a8bcd6;
  --rh-btn-primary-hover-fill: #d4e0ee;

  /* Danger — quiet red tint at rest; vivid solid red on hover/focus. */
  --rh-btn-danger: #b42318;
  --rh-btn-danger-fill: #fbeae8;
  --rh-btn-danger-line: #eebcb6;

  --rh-btn-muted: #5b6b85;
}

/* Base pill: full-radius corners, thin neutral outline, consistent sizing. */
.btn {
  font: inherit;
  cursor: pointer;
  border-radius: var(--rh-btn-radius);
  border: 1px solid var(--rh-btn-line);
  background: var(--rh-btn-bg);
  color: var(--rh-btn-fg);
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  line-height: 1.25;
  transition: background 0.15s, color 0.15s, border-color 0.15s, filter 0.15s;
}

.btn:hover {
  border-color: var(--rh-btn-hover-line);
}

.btn:focus-visible {
  outline: 3px solid rgba(0, 63, 125, 0.45);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary — soft navy fill, navy text; clearly the main action but calm.
   Deepens to a solid navy on hover so the affordance is obvious. */
.btn--primary {
  background: var(--rh-btn-primary-fill);
  border-color: var(--rh-btn-primary-line);
  color: var(--rh-btn-primary);
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--rh-btn-primary);
  border-color: var(--rh-btn-primary);
  color: #fff;
  filter: none;
}

/* Ghost — transparent; dark text so it is always legible on the light
   back-end / calendar surfaces (this is the white-on-white safeguard). */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rh-btn-fg);
}

.btn--ghost:hover {
  border-color: var(--rh-btn-hover-line);
}

/* Secondary outline — quiet; soft navy border + navy text on light backgrounds. */
.btn--outline {
  background: transparent;
  border-color: var(--rh-btn-primary-line);
  color: var(--rh-btn-primary);
}

.btn--outline:hover {
  background: rgba(0, 35, 71, 0.06);
  border-color: var(--rh-btn-primary);
}

/* Danger — DE-EMPHASIZED: light red tint + red text by default, so it does not
   dominate a row. Becomes a vivid solid red on hover/focus (confirm intent). */
.btn--danger {
  background: var(--rh-btn-danger-fill);
  border-color: var(--rh-btn-danger-line);
  color: var(--rh-btn-danger);
  font-weight: 600;
}

.btn--danger:hover,
.btn--danger:focus-visible {
  background: var(--rh-btn-danger);
  border-color: var(--rh-btn-danger);
  color: #fff;
  filter: none;
}

.btn--sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Segmented view buttons (Month / Week / Day): pill group; active = soft navy. */
.btn--seg {
  border-color: var(--rh-btn-line-strong);
}

.btn--seg.is-active {
  background: var(--rh-btn-primary-fill);
  border-color: var(--rh-btn-primary-line);
  color: var(--rh-btn-primary);
  font-weight: 600;
}

/* —— Calls: List | Schedule | Map switcher (schedule + call list) —— */
.calls-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.calls-switcher__group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.calls-switcher__btn {
  font: inherit;
  cursor: pointer;
  border-radius: var(--rh-btn-radius);
  border: 1px solid var(--rh-btn-line-strong);
  background: var(--rh-btn-bg);
  color: var(--rh-btn-muted);
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
}

.calls-switcher__btn:hover {
  border-color: var(--rh-btn-hover-line);
  color: var(--rh-btn-fg);
  opacity: 1;
}

.calls-switcher__btn.is-active {
  background: var(--rh-btn-primary-fill);
  border-color: var(--rh-btn-primary-line);
  color: var(--rh-btn-primary);
  opacity: 1;
}

/* Canonical upper-right nav cluster (includes/nav-cluster.htm): Calls switcher
   -> Help -> Dashboard, identical on every authenticated page. Right-alignment
   comes from the parent (.app-bar__actions / .admin-subnav__right). */
.nav-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow: visible;
}

.nav-cluster .admin-dashboard-link {
  flex-shrink: 0;
  white-space: nowrap;
}