/* ============================================================
 * NextGen MIS — Buttons
 * ------------------------------------------------------------
 * One consistent button system, mapped onto the legacy Metronic
 * variant classes (no template edits). Two action styles:
 *
 *   PRIMARY   = solid brand-green, for the main action (often
 *               carries an icon). Maps: .green .themed .btn-themed
 *               .btn-submit .button-submit .btn-primary
 *   SECONDARY = quiet outline, no fill, for everything else.
 *               Maps: .btn-default .default .grey .white .blue
 *               .yellow .purple .dark + a bare .btn
 *   DANGER    = red, kept distinct for destructive actions.
 *               Maps: .red .btn-danger
 *
 * Every action button shares one size (40px tall). Tiny in-row
 * action buttons (.btn-xs) keep their compact footprint but are
 * recoloured into the same palette.
 *
 * Loaded after _chrome so it beats the Metronic theme colours;
 * uses !important where Metronic declares colours !important.
 * ============================================================ */

/* ---------- SHARED SHAPE + SIZE ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.1;
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
/* Same size for the common size variants (the "different sizes" complaint) */
.btn.btn-sm { min-height: 40px; padding: 0 var(--space-4); }
.btn.btn-lg { min-height: 46px; padding: 0 var(--space-5); font-size: var(--font-size-md) !important; }
/* In-row icon actions stay compact, just adopt the palette + shape */
.btn.btn-xs {
  min-height: 28px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm) !important;
  gap: var(--space-1);
}
/* Icon-only square button: pair .ng-btn-icon with an intent class
   (.btn-default, .btn-primary, …) and a lone <i> inside — the button
   collapses to a square matching its height. Icon-only actions MUST
   carry an aria-label + data-ng-tooltip (see docs/design.md →
   "Icon-only actions carry a tooltip"). */
.btn.ng-btn-icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}
.btn.ng-btn-icon.btn-xs {
  width: 28px;
  min-width: 28px;
  padding: 0;
}
.btn.ng-btn-icon > i[class*="fa"] {
  font-size: var(--font-size-md);
}
.btn[disabled],
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none !important;
}
/* Icon glyphs inside buttons sit inline with the label and never add their
   own margins (Metronic added right margins). */
.btn > i[class*="fa"],
.btn > i[class*="icon"],
.btn > .fa {
  margin: 0 !important;
  font-size: 1em;
  line-height: 1;
}

/* ---------- PRIMARY (solid blue) ----------
   The main/create action (Add, Save, Submit) is brand-primary navy. Search is
   the only GREEN action (see .ng-search below) so the two read distinctly. */
.btn.green,
.btn.themed,
.btn-themed,
.btn.btn-themed,
.btn-submit,
.btn.btn-submit,
.button-submit,
.btn.button-submit,
.btn-primary,
.btn.btn-primary {
  background-color: var(--color-brand-primary) !important;   /* navy-600 (white text ~8:1 → AA) */
  border-color: var(--color-brand-primary) !important;
  color: #fff !important;
}
.btn.green:hover, .btn.green:focus,
.btn.themed:hover, .btn.themed:focus,
.btn-themed:hover, .btn-themed:focus,
.btn.btn-themed:hover, .btn.btn-themed:focus,
.btn-submit:hover, .btn-submit:focus,
.btn.btn-submit:hover, .btn.btn-submit:focus,
.button-submit:hover, .button-submit:focus,
.btn.button-submit:hover, .btn.button-submit:focus,
.btn-primary:hover, .btn-primary:focus,
.btn.btn-primary:hover, .btn.btn-primary:focus {
  background-color: var(--color-brand-primary-hover) !important;   /* navy-700 */
  border-color: var(--color-brand-primary-hover) !important;
  color: #fff !important;
}
.btn.green:active,
.btn.themed:active,
.btn-themed:active,
.btn-submit:active,
.button-submit:active,
.btn-primary:active {
  background-color: var(--color-brand-primary-active) !important;  /* navy-800 */
  border-color: var(--color-brand-primary-active) !important;
}

/* ---------- SEARCH (solid green + magnifying-glass) ----------
   Reusable: add .ng-search to any filter "Search" button to get the green
   treatment with an icon (matches the Beneficiary Registry #filter-submit).
   Mirror #filter-submit's full layout — inline-flex with a gap, fixed 40px
   height, comfortable padding, pill radius — and free the legacy inline
   `width:80px` (the report pages hard-code it, which cramped the icon + label)
   so the green search button reads identically on every list/report page. */
.btn.ng-search {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto !important;            /* beat the report pages' inline width:80px */
  min-height: 40px;
  padding: 0 var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--color-brand-secondary-hover) !important;  /* sage-700, AA */
  border-color: var(--color-brand-secondary-hover) !important;
  color: #fff !important;
}
/* Icon only when the button doesn't already carry its own <i> (avoid doubles
   when .ng-search is applied to buttons that already have a fa-search glyph). */
.btn.ng-search:not(:has(i)):not(:has(svg))::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url(/img/icons/phosphor/magnifying-glass.svg) center / contain no-repeat;
          mask: url(/img/icons/phosphor/magnifying-glass.svg) center / contain no-repeat;
}
.btn.ng-search:hover, .btn.ng-search:focus {
  background-color: var(--color-brand-secondary-active) !important; /* sage-800 → darker hover, white text ~9:1 (AA) */
  border-color: var(--color-brand-secondary-active) !important;
  color: #fff !important;
}

/* ---------- DANGER (red, destructive only) ---------- */
.btn.red,
.btn-danger,
.btn.btn-danger {
  background-color: var(--color-danger-500) !important;
  border-color: var(--color-danger-500) !important;
  color: #fff !important;
}
.btn.red:hover, .btn.red:focus,
.btn-danger:hover, .btn-danger:focus,
.btn.btn-danger:hover, .btn.btn-danger:focus {
  background-color: var(--color-danger-700) !important;
  border-color: var(--color-danger-700) !important;
  color: #fff !important;
}

/* ---------- SECONDARY (quiet outline) ---------- */
/* The default + every other loud Metronic colour collapses to one quiet
   outline so the green primary is the only emphasised action. */
.btn.btn-default,
.btn.default,
.btn.grey, .btn.grey-steel, .btn.grey-cararra, .btn.grey-mint,
.btn.white,
.btn.blue, .btn.btn-info,
.btn.yellow, .btn.btn-warning,
.btn.purple,
.btn.dark {
  background-color: transparent !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-default) !important;
}
.btn.btn-default:hover, .btn.btn-default:focus,
.btn.default:hover, .btn.default:focus,
.btn.grey:hover, .btn.grey:focus,
.btn.white:hover, .btn.white:focus,
.btn.blue:hover, .btn.blue:focus,
.btn.btn-info:hover, .btn.btn-info:focus,
.btn.yellow:hover, .btn.yellow:focus,
.btn.btn-warning:hover, .btn.btn-warning:focus,
.btn.purple:hover, .btn.purple:focus,
.btn.dark:hover, .btn.dark:focus {
  background-color: var(--color-bg-sunken) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-strong) !important;
}