/* =========================================================================
   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;

  /* Hover = same quiet wash on every non-action pill (not the selected look). */
  --rh-btn-hover-bg: #e4ecf6;
  --rh-btn-hover-fg: #002347;
  --rh-btn-hover-line: #9fb0c7;
  /* Active / is-on / is-active — the only “this is selected” fill. */
  --rh-btn-on-bg: #002347;
  --rh-btn-on-fg: #ffffff;
  --rh-btn-on-line: #002347;
}

/* 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;
}

/* Staff pages also load site.css, whose `a:hover { color: orange }` would
   otherwise paint <a class="btn"> orange and look like a dead marketing link. */
a.btn {
  color: var(--rh-btn-fg);
  text-decoration: none;
}

.btn:hover:not(:disabled):not(.btn--help):not(.btn--danger):not(.btn--primary):not(.btn--new-icon):not(.btn--new-wo-icon):not(.btn--new-record-icon),
.btn:focus-visible:not(:disabled):not(.btn--help):not(.btn--danger):not(.btn--primary):not(.btn--new-icon):not(.btn--new-wo-icon):not(.btn--new-record-icon),
a.btn:hover:not(.btn--help):not(.btn--danger):not(.btn--primary):not(.btn--new-icon):not(.btn--new-wo-icon):not(.btn--new-record-icon),
a.btn:focus-visible:not(.btn--help):not(.btn--danger):not(.btn--primary):not(.btn--new-icon):not(.btn--new-wo-icon):not(.btn--new-record-icon) {
  background: var(--rh-btn-hover-bg);
  border-color: var(--rh-btn-hover-line);
  color: var(--rh-btn-hover-fg);
  filter: none;
}

.btn--primary:hover,
.btn--primary:focus-visible,
a.btn.btn--primary:hover,
a.btn.btn--primary:focus-visible {
  background: var(--rh-btn-on-bg);
  border-color: var(--rh-btn-on-line);
  color: var(--rh-btn-on-fg);
  filter: none;
}

.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,
a.btn.btn--primary {
  background: var(--rh-btn-primary-fill);
  border-color: var(--rh-btn-primary-line);
  color: var(--rh-btn-primary);
  font-weight: 600;
}

/* Icon-only “New …” pills (work order / estimate / customer / time-off / staff).
   ONE source of truth for size + primary colors on calendar and slim app-bar.
   Alias classes kept so older markup still matches. */
.btn.btn--new-icon,
.btn.btn--new-wo-icon,
.btn.btn--new-record-icon {
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--rh-btn-primary-fill);
  border-color: var(--rh-btn-primary-line);
  color: var(--rh-btn-primary);
  font-weight: 600;
}

.btn.btn--new-icon:hover,
.btn.btn--new-wo-icon:hover,
.btn.btn--new-record-icon:hover,
.btn.btn--new-icon:focus-visible,
.btn.btn--new-wo-icon:focus-visible,
.btn.btn--new-record-icon:focus-visible {
  background: var(--rh-btn-on-bg);
  border-color: var(--rh-btn-on-line);
  color: var(--rh-btn-on-fg);
  filter: none;
}

.btn--new-icon__glyph,
.btn--new-wo-icon__glyph,
.btn--new-record-icon__glyph {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Ghost — same pill chrome as outline (visible border); hover is the shared
   highlight above. Dark text so it stays legible on light staff surfaces. */
.btn--ghost,
a.btn.btn--ghost {
  background: transparent;
  border-color: var(--rh-btn-line);
  color: var(--rh-btn-fg);
}

/* Secondary outline — quiet; same hover highlight as every other staff pill. */
.btn--outline,
a.btn.btn--outline {
  background: transparent;
  border-color: var(--rh-btn-primary-line);
  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,
a.btn.btn--danger:hover,
a.btn.btn--danger:focus-visible {
  background: var(--rh-btn-danger);
  border-color: var(--rh-btn-danger);
  color: #fff;
  filter: none;
}

/* ibox “?” stays a quiet control — not the solid primary hover. */
.btn--help,
a.btn.btn--help {
  border-color: transparent;
  color: var(--rh-btn-muted);
  background: transparent;
}
.btn--help:hover,
.btn--help:focus-visible,
a.btn.btn--help:hover,
a.btn.btn--help:focus-visible {
  color: var(--rh-btn-fg);
  background: var(--rh-btn-primary-fill);
  border-color: var(--rh-btn-line);
}

.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-on-bg);
  border-color: var(--rh-btn-on-line);
  color: var(--rh-btn-on-fg);
  font-weight: 600;
}

.btn--seg.is-active:hover,
.btn--seg.is-active:focus-visible {
  background: var(--rh-btn-on-bg);
  border-color: var(--rh-btn-on-line);
  color: var(--rh-btn-on-fg);
}

/* —— 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 {
  background: var(--rh-btn-hover-bg);
  border-color: var(--rh-btn-hover-line);
  color: var(--rh-btn-hover-fg);
  opacity: 1;
}

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

.calls-switcher__btn.is-active:hover {
  background: var(--rh-btn-on-bg);
  border-color: var(--rh-btn-on-line);
  color: var(--rh-btn-on-fg);
}

/* 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;
}