/* Button styles based on CSS variables */
.custom-button {
  /* Base button properties */
  text-direction: var(--btn-text-direction, ltr);
  text-align: var(--btn-text-align, center);
  text-decoration: var(--btn-text-decoration, none);
  font-weight: var(--btn-text-font-weight, 400);
  font-family: var(--btn-text-font-family, Roboto, "Roboto Fallback");
  color: var(--btn-text-color, rgb(83, 86, 90));
  background-color: var(--btn-bg-color, rgb(239, 194, 52));
  
  /* FS-037 — THE BUTTON STATES ITS OWN HEIGHT, and this is the fix for two
     heights on one page. Until now .custom-button set no line-height and no
     height, so a button was as tall as whatever box it landed in happened to
     inherit: manage/css/user.css:202 sets `line-height: 1.1` on .field-group
     for the details grid's label rows, so the Security box's buttons measured
     29.6px while every other button on that page measured 36px. Pete, on the
     two: "a slimmer / shorter height (preferred)". The height he preferred was
     an accident, and this is it, on purpose, everywhere — 30px.

     `display: inline-flex` is the second half. .custom-button set no display,
     so a <button> was inline-block and an <a class="custom-button"> was inline,
     where padding does not grow the line box — the anchor only ever looked
     right where some other rule happened to make it a flex item.

     `gap` is the icon's spacing, so markup does not need a literal space
     between the <i> and the label. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: var(--text-base, 0.9375rem);   /* FS-037 — the one base size */
  line-height: 1.2;
  min-height: 30px;
  padding: 0.125rem 1.25rem;

  /* Border properties */
  border-width: var(--btn-border-width, 2px);
  border-style: solid;
  border-color: var(--btn-border-color, rgb(239, 194, 52));
  border-radius: var(--btn-border-radius, 30px);
  
  /* Individual border properties */
  border-top-width: var(--btn-border-t-width, var(--btn-border-width, 2px));
  border-right-width: var(--btn-border-r-width, var(--btn-border-width, 2px));
  border-bottom-width: var(--btn-border-b-width, var(--btn-border-width, 2px));
  border-left-width: var(--btn-border-l-width, var(--btn-border-width, 2px));
  
  border-top-color: var(--btn-border-t-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-right-color: var(--btn-border-r-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-bottom-color: var(--btn-border-b-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-left-color: var(--btn-border-l-color, var(--btn-border-color, rgb(239, 194, 52)));
  
  border-top-left-radius: var(--btn-border-tl-radius, var(--btn-border-radius, 30px));
  border-top-right-radius: var(--btn-border-tr-radius, var(--btn-border-radius, 30px));
  border-bottom-right-radius: var(--btn-border-br-radius, var(--btn-border-radius, 30px));
  border-bottom-left-radius: var(--btn-border-bl-radius, var(--btn-border-radius, 30px));
  
  /* Icon properties */
  --btn-icon-color: rgb(247, 247, 247);
  --btn-icon-fill: rgb(247, 247, 247);
  --btn-icon-wrpr-display: none;
  
  /* Hover state */
  transition: all 0.3s ease;
}

.custom-button:hover {
  background-color: var(--btn-hover-bg, rgb(247, 209, 89));
  color: var(--btn-hover-text-color, var(--btn-text-color, rgb(83, 86, 90)));
  font-weight: var(--btn-hover-text-font-weight, var(--btn-text-font-weight, 400));
  text-decoration: var(--btn-hover-text-decoration, var(--btn-text-decoration, none));
  font-style: var(--btn-hover-text-font-style, var(--btn-text-font-style, normal));
  
  border-color: var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52)));
  border-top-color: var(--btn-hover-border-t-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
  border-right-color: var(--btn-hover-border-r-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
  border-bottom-color: var(--btn-hover-border-b-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
  border-left-color: var(--btn-hover-border-l-color, var(--btn-hover-border-color, var(--btn-border-color, rgb(239, 194, 52))));
}

/* ===========================================================================
   THE SECONDARY BUTTON — FS-037, and it is no longer grey.
   ===========================================================================
   Tracey, through Pete, 2026-09-17: the grey button "has to be changed, because
   it looks disabled". She was right, and it was not a matter of taste: grey text
   on a grey outline IS the disabled signal — `.custom-button:disabled` says the
   same thing with nothing but 50% opacity, so the two were a shade apart. On the
   group page somebody had already noticed and patched around it locally, which
   is how "Open your full report" ended up the one near-black button in the
   portal.

   So the secondary button is the primary one INVERTED: the same gold outline,
   the SAME text colour, no fill, and a slight gold tint when you hover it — the
   closest possible counterpart to the gold button, which is the same control
   with the fill taken out. Pete chose this over three alternatives (FS-037 §3.7).

   ⚠ ONE THING IT CANNOT FIX: #EFC234 on white is 1.69:1, well under the 3:1 WCAG
   asks of a control's boundary. A filled gold button does not care — its fill
   carries the shape — but an outlined one leans on a ring you can barely see. So
   the TEXT and the shape do the work: #53565A is 7.5:1, and this is the same pill
   the primary button is. The only variant whose OUTLINE passes 3:1 needs a
   #B5820C ring, which reads brown — the shade Pete rejected for the Power Style
   rail, for that reason. Recorded, not overlooked.

   ✅ THE NAME IS NOW HONEST. It was .gray-button until 2026-09-17, across ninety
   call sites; a class named for a colour it no longer has is the next thing to
   mislead somebody. The three HISTORICAL records that still say gray-button
   (FS-023, REL-008, the FS-010 prototype) keep it on purpose — they describe what
   was true when they were written. */
.secondary-button {
  --btn-bg-color: transparent;
  --btn-border-color: #EFC234;
  --btn-text-color: #53565A;
  --btn-hover-bg: #FDF3D5;
}

/* Save / Cancel, as modifiers rather than four inline --btn-* variables per
   button (FS-010). new-assessment, modify-assessment and the template editor
   each carried their own copy of exactly these values; the copies are what
   made them drift. */
.green-button {
  --btn-bg-color: #4C8D2B;
  --btn-border-color: #4C8D2B;
  --btn-text-color: #fff;
  --btn-hover-bg: #3c7422;
  --btn-hover-border-color: #3c7422;
  --btn-hover-text-color: #fff;
}

.red-button {
  --btn-bg-color: #dc3545;
  --btn-border-color: #dc3545;
  --btn-text-color: #fff;
  --btn-hover-bg: #c82333;
  --btn-hover-border-color: #c82333;
  --btn-hover-text-color: #fff;
}

/* Destructive, but a step below .danger-button / .red-button.
   Three weights are deliberate, and they say how much is at stake:
     secondary-button        — neutral, non-destructive (Cancel)
     red-outline-button — destructive but recoverable in practice
     danger-button      — destructive and irreversible (deleting an assessment
                          takes its responses with it)
   Template delete sits in the middle: since FS-010 a template is only ever a
   starting point, so removing one cannot reach any assessment's data. */
.red-outline-button {
  --btn-bg-color: transparent;
  --btn-border-color: #dc3545;
  --btn-text-color: #dc3545;
  --btn-hover-bg: rgba(220, 53, 69, 0.08);
  --btn-hover-border-color: #c82333;
  --btn-hover-text-color: #c82333;
}

/* Example usage in HTML:
<button class="custom-button">Button Text</button>
<button class="custom-button secondary-button">Secondary Button</button>
*/

/* The third weight: destructive and irreversible. Moved here from components.css (REL-024) so that a page loading
   the buttons alone — a Power Range survey page, for its unfinished-survey pop-up — has all three. */
.danger-button {
  background-color: #c0392b !important;
  color: #fff !important;
  border-color: #c0392b !important;
}

.danger-button:hover {
  background-color: #a93226 !important;
  border-color: #a93226 !important;
}