/* ==========================================================================
   Bootstrap button variants restyled to fh-* tokens.
   Owning feature: shared / components
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   Bootstrap bakes each variant's colors into literal `--bs-btn-*` hex values
   rather than reading `--bs-primary`, so the brand/semantic variants need an
   explicit repoint. Structural bits (radius, focus ring, transitions) are
   shared across all variants. */
.btn {
  border-radius: var(--fh-radius);
  font-weight: var(--fh-weight-medium);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.btn-sm { border-radius: var(--fh-radius-sm); }
.btn-lg { border-radius: var(--fh-radius); }
.btn:disabled, .btn.disabled { opacity: 0.55; box-shadow: none; }

.btn-primary {
  --bs-btn-bg: var(--fh-primary);
  --bs-btn-border-color: var(--fh-primary);
  --bs-btn-hover-bg: var(--fh-primary-dark);
  --bs-btn-hover-border-color: var(--fh-primary-dark);
  --bs-btn-active-bg: var(--fh-primary-dark);
  --bs-btn-active-border-color: var(--fh-primary-dark);
  --bs-btn-disabled-bg: var(--fh-primary);
  --bs-btn-disabled-border-color: var(--fh-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--fh-primary);
  --bs-btn-border-color: var(--fh-primary);
  --bs-btn-hover-bg: var(--fh-primary);
  --bs-btn-hover-border-color: var(--fh-primary);
  --bs-btn-active-bg: var(--fh-primary);
  --bs-btn-active-border-color: var(--fh-primary);
  --bs-btn-disabled-color: var(--fh-primary);
  --bs-btn-disabled-border-color: var(--fh-primary);
}
.btn-secondary {
  --bs-btn-bg: var(--fh-secondary);
  --bs-btn-border-color: var(--fh-secondary);
  --bs-btn-hover-bg: #4b5b73;
  --bs-btn-hover-border-color: #4b5b73;
  --bs-btn-active-bg: #4b5b73;
  --bs-btn-active-border-color: #4b5b73;
}
.btn-outline-secondary {
  --bs-btn-color: var(--fh-secondary);
  --bs-btn-border-color: var(--fh-border);
  --bs-btn-hover-bg: var(--fh-soft);
  --bs-btn-hover-border-color: var(--fh-border);
  --bs-btn-hover-color: var(--fh-text);
  --bs-btn-active-bg: var(--fh-soft);
  --bs-btn-active-border-color: var(--fh-border);
  --bs-btn-active-color: var(--fh-text);
}
/* Solid and outline variants must NOT share `--bs-btn-bg`/`--bs-btn-color`:
   a shared selector left `--bs-btn-bg` set to the brand color on the
   outline button too, so its (also brand-colored) text/icon sat on a
   same-color fill — invisible until `:hover` swapped the text to white.
   Each variant gets its own block instead, mirroring the already-correct
   `.btn-outline-primary`/`.btn-outline-secondary` pattern above. */
.btn-success {
  --bs-btn-bg: var(--fh-success);
  --bs-btn-border-color: var(--fh-success);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
  --bs-btn-active-bg: #15803d;
  --bs-btn-active-border-color: #15803d;
}
.btn-outline-success {
  --bs-btn-color: var(--fh-success);
  --bs-btn-border-color: var(--fh-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fh-success);
  --bs-btn-hover-border-color: var(--fh-success);
  --bs-btn-active-bg: var(--fh-success);
  --bs-btn-active-border-color: var(--fh-success);
  --bs-btn-disabled-color: var(--fh-success);
  --bs-btn-disabled-border-color: var(--fh-success);
}
.btn-danger {
  --bs-btn-bg: var(--fh-danger);
  --bs-btn-border-color: var(--fh-danger);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
}
.btn-outline-danger {
  --bs-btn-color: var(--fh-danger);
  --bs-btn-border-color: var(--fh-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fh-danger);
  --bs-btn-hover-border-color: var(--fh-danger);
  --bs-btn-active-bg: var(--fh-danger);
  --bs-btn-active-border-color: var(--fh-danger);
  --bs-btn-disabled-color: var(--fh-danger);
  --bs-btn-disabled-border-color: var(--fh-danger);
}
.btn-warning {
  --bs-btn-bg: var(--fh-warning);
  --bs-btn-border-color: var(--fh-warning);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b45309;
  --bs-btn-hover-border-color: #b45309;
  --bs-btn-active-bg: #b45309;
  --bs-btn-active-border-color: #b45309;
}
.btn-outline-warning {
  --bs-btn-color: var(--fh-warning);
  --bs-btn-border-color: var(--fh-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fh-warning);
  --bs-btn-hover-border-color: var(--fh-warning);
  --bs-btn-active-bg: var(--fh-warning);
  --bs-btn-active-border-color: var(--fh-warning);
  --bs-btn-disabled-color: var(--fh-warning);
  --bs-btn-disabled-border-color: var(--fh-warning);
}
.btn-info {
  --bs-btn-bg: var(--fh-info);
  --bs-btn-border-color: var(--fh-info);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0e7490;
  --bs-btn-hover-border-color: #0e7490;
  --bs-btn-active-bg: #0e7490;
  --bs-btn-active-border-color: #0e7490;
}
.btn-outline-info {
  --bs-btn-color: var(--fh-info);
  --bs-btn-border-color: var(--fh-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fh-info);
  --bs-btn-hover-border-color: var(--fh-info);
  --bs-btn-active-bg: var(--fh-info);
  --bs-btn-active-border-color: var(--fh-info);
  --bs-btn-disabled-color: var(--fh-info);
  --bs-btn-disabled-border-color: var(--fh-info);
}

.btn-group > .btn, .btn-group-sm > .btn { box-shadow: none; }

.fh-btn-primary {
  background: var(--fh-primary); border-color: var(--fh-primary); color: #fff;
  border-radius: 0.5rem; padding: 0.45rem 0.9rem; font-size: var(--fh-text-base); font-weight: var(--fh-weight-medium);
}
.fh-btn-primary:hover { background: var(--fh-primary-dark); border-color: var(--fh-primary-dark); color: #fff; }

.fh-icon-btn {
  width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--fh-muted);
  border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; position: relative;
}
.fh-icon-btn:hover { background: var(--fh-primary-soft, #eff6ff); color: var(--fh-primary); }
.fh-icon-btn:active { background: var(--fh-primary-soft, #eff6ff); color: var(--fh-primary-dark); }
.fh-icon-btn.text-danger:hover,
.fh-icon-btn.text-danger:active {
  background: rgba(220, 38, 38, 0.08);
  color: var(--fh-danger);
}
.fh-dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: #ef4444; border: 2px solid #fff;
}