/* Buttons - extracted from layout.css. Loaded after layout.css, before components.css. */
/* ##########################################################################
   BUTTONS - variants & states
   ########################################################################## */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease; /* base fade; colour variants extend this with their own transitions */
}

/* Shared button elevation: every .btn lifts on hover/focus and presses on
   active. Defined once here; the colour variants only set their own colours.
   (Standalone icon classes without .btn - e.g. .btn-close-icon - carry their own.) */
.btn:hover,
.btn:focus {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
}
.btn:active {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; /* Pressed effect */
}

/* Link-style buttons are styled as links/icons (transparent, borderless), not
   raised surfaces - opt them out of the shared elevation. */
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    box-shadow: none;
}

/* Icons inside buttons follow the button's text colour (currentColor). Check
   icons need this explicitly because layout.css colours .bi-check* black with
   !important globally; without this they'd ignore the button colour. */
.btn .bi-check,
.btn .bi-check-square,
.btn .bi-check-square-fill,
.btn .bi-check-circle,
.btn .bi-check-circle-fill {
    color: inherit !important;
}

/* Icons inherit the button's `color` via currentColor — no separate i/.bi rules. */
.btn-primary {
    background-color: var(--strawberry) !important;
    border-color: var(--strawberry) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--white) !important;
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--white) !important;
    background-color: var(--strawberry-strong) !important;
    border-color: var(--strawberry-strong) !important;
}

.btn-primary:active {
    background-color: var(--strawberry-strong) !important;
    border-color: var(--strawberry-strong) !important;
}

.btn-outline-primary {
    background-color: rgba(183, 13, 24, 0.06) !important; /* Subtle transparent strawberry hint */
    border-color: rgba(183, 13, 24, 0.10) !important; /* Very light border at 10% opacity */
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    /* color: var(--strawberry) !important; */ /* Commented out - using black for peaceful look */
    color: var(--black) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgba(183, 13, 24, 0.20) !important; /* Heavier strawberry hint on hover */
    border-color: var(--strawberry-strong) !important;
    color: var(--strawberry-strong) !important;
}

.btn-outline-primary:active {
    background-color: rgba(183, 13, 24, 0.20) !important;
    border-color: var(--strawberry-strong) !important;
    color: var(--strawberry-strong) !important;
}

/* Single definition (was duplicated); icons inherit colour via currentColor. */
.btn-secondary {
    background-color: transparent !important;
    border-color: var(--strawberry) !important;
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    color: var(--strawberry) !important;
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--strawberry) !important;
    border-color: var(--strawberry) !important;
    color: var(--white) !important;
}

.btn-secondary:active {
    background-color: var(--strawberry) !important;
    border-color: var(--strawberry) !important;
    color: var(--white) !important;
}

/* Inactive button state - for buttons that are disabled due to form state */
/* Uses opacity instead of disabled attribute so click events can still be captured */
.btn-inactive {
    opacity: 0.5;
    cursor: default;
}

/* Icons inherit colour via currentColor — no separate i/.bi rules. */
.btn-danger {
    background-color: var(--signal-red) !important;
    border-color: var(--signal-red) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--signal-yellow) !important;
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-danger:hover,
.btn-danger:focus {
    color: var(--signal-yellow) !important;
    background-color: var(--signal-red-strong) !important; /* Darker neon red */
    border-color: var(--signal-red-strong) !important;
}

.btn-danger:active {
    color: var(--signal-yellow) !important;
    background-color: var(--signal-red-strong) !important;
    border-color: var(--signal-red-strong) !important;
}

.btn-outline-danger {
    background-color: rgba(255, 23, 68, 0.06) !important; /* Subtle transparent red hint */
    border-color: rgba(255, 23, 68, 0.10) !important; /* Very light border at 10% opacity */
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    color: var(--signal-red-strong) !important; /* deep red: legible as text on the pale fill (AA) */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: rgba(255, 23, 68, 0.20) !important; /* Heavier red hint on hover */
    border-color: var(--signal-red-strong) !important;
    color: var(--signal-red-strong) !important;
}

.btn-outline-danger:active {
    background-color: rgba(255, 23, 68, 0.20) !important;
    border-color: var(--signal-red-strong) !important;
    color: var(--signal-red-strong) !important;
}

.btn-success {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--white) !important;
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-success:hover,
.btn-success:focus {
    color: var(--white) !important;
    background-color: var(--green-strong) !important; /* Darker green */
    border-color: var(--green-strong) !important;
}

.btn-success:active {
    background-color: var(--green-strong) !important;
    border-color: var(--green-strong) !important;
}

.btn-outline-success {
    background-color: rgba(0, 113, 46, 0.06) !important; /* Subtle transparent green hint */
    border-color: rgba(0, 113, 46, 0.10) !important; /* Very light border at 10% opacity */
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    /* color: var(--green) !important; */ /* Commented out - using black for peaceful look */
    color: var(--black) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: rgba(0, 113, 46, 0.20) !important; /* Heavier green hint on hover */
    border-color: var(--green-strong) !important;
    color: var(--green-strong) !important;
}

.btn-outline-success:active {
    background-color: rgba(0, 113, 46, 0.20) !important;
    border-color: var(--green-strong) !important;
    color: var(--green-strong) !important;
}

.btn-info {
    background-color: var(--chamois-deep) !important;
    border-color: var(--chamois-deep) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--white) !important;
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-info:hover,
.btn-info:focus {
    color: var(--white) !important;
    background-color: var(--brown-light) !important; /* Darker */
    border-color: var(--brown-light) !important;
}

.btn-info:active {
    background-color: var(--brown-light) !important;
    border-color: var(--brown-light) !important;
}

.btn-outline-info {
    background-color: rgba(156, 131, 92, 0.06) !important; /* Subtle transparent chamois-deep hint */
    border-color: rgba(156, 131, 92, 0.10) !important; /* Very light border at 10% opacity */
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    /* color: var(--chamois-deep) !important; */ /* Commented out - using black for peaceful look */
    color: var(--black) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: rgba(156, 131, 92, 0.20) !important; /* Heavier chamois-deep hint on hover */
    border-color: var(--brown-medium) !important;
    color: var(--brown-medium) !important; /* brown-light failed AA (3.7:1) on this composited fill; brown-medium clears it (5.1:1) */
}

.btn-outline-info:active {
    background-color: rgba(156, 131, 92, 0.20) !important;
    border-color: var(--brown-medium) !important;
    color: var(--brown-medium) !important;
}

/* Neutral semantic button (warm grey). The text colour is the SINGLE SOURCE OF
   TRUTH here: deepest warm grey, readable on the medium-grey fill (4.56:1, WCAG
   AA). Both interactive buttons/triggers and static (.pe-none) value displays
   inherit it; icons follow via currentColor. Do not re-declare colour elsewhere. */
.btn-light {
    background-color: var(--warm-grey-medium) !important; /* Warm grey bg - distinct from chamois palette */
    border-color: var(--warm-grey-dark) !important; /* Darker warm grey border */
    border-radius: var(--border-radius-sm) !important;
    color: var(--warm-grey-deepest) !important;
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover/focus/active lighten the fill (not darken) so the dark Neutral text
   stays legible (~5.8:1). Colour is inherited from the single source above. */
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: var(--warm-grey-light) !important;
    border-color: var(--warm-grey-dark) !important;
}

/* Neutral outline button. Text colour is the SINGLE SOURCE OF TRUTH here:
   muted warm grey that keeps the "greyed-out" feel but still clears 4.5:1 (WCAG
   AA) on the pale fills. Hover/active only change fill/border; colour inherits. */
.btn-outline-light {
    background-color: rgba(184, 179, 173, 0.06) !important; /* Subtle warm grey hint */
    border-color: rgba(184, 179, 173, 0.10) !important; /* Very light border at 10% opacity */
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    color: var(--warm-grey-muted) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: rgba(184, 179, 173, 0.20) !important; /* Heavier warm grey hint on hover */
    border-color: var(--warm-grey-full) !important;
}

.btn-warning {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--black) !important; /* amber fill is light → dark text (white would fail contrast) */
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Amber is light: keep the fill on hover/active (the shared .btn shadow gives the
   lift) so the dark text stays legible; only the border deepens. */
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--orange) !important;
    border-color: var(--orange-strong) !important;
}

.btn-outline-warning {
    background-color: rgba(219, 147, 56, 0.06) !important; /* Subtle transparent amber hint */
    border-color: rgba(219, 147, 56, 0.10) !important; /* Very light border at 10% opacity */
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    color: var(--orange-strong) !important; /* dark amber: legible as text on the pale fill (AA) */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: rgba(219, 147, 56, 0.20) !important; /* Heavier amber hint on hover */
    border-color: var(--orange-strong) !important;
    color: var(--orange-strong) !important;
}

.btn-dark {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--white) !important;
    font-weight: bold; /* Bold for action buttons, overridden by .btn-select for select buttons */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-dark:hover,
.btn-dark:focus {
    color: var(--white) !important;
    background-color: #3B6599 !important; /* Darker blue */
    border-color: #3B6599 !important;
}

.btn-dark:active {
    background-color: #3B6599 !important;
    border-color: #3B6599 !important;
}

.btn-outline-dark {
    background-color: rgba(85, 137, 201, 0.06) !important; /* Subtle transparent blue hint */
    border-color: rgba(85, 137, 201, 0.10) !important; /* Very light border at 10% opacity */
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--border-radius-sm) !important;
    /* color: var(--blue) !important; */ /* Commented out - using black for peaceful look */
    color: var(--black) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: rgba(85, 137, 201, 0.20) !important; /* Heavier blue hint on hover */
    border-color: #3B6599 !important;
    color: #3B6599 !important;
}

.btn-outline-dark:active {
    background-color: rgba(85, 137, 201, 0.20) !important;
    border-color: #3B6599 !important;
    color: #3B6599 !important;
}

.btn-sm {
    font-weight: bold !important;
}

/* Utility for button text labels that should match base font size */
.btn-label {
    font-size: 1rem;
}

/* Select buttons: explicitly sized for enum selection buttons */
.btn-select {
    padding: 0.08rem 0.65rem;
    font-size: 1.06rem;
    font-weight: 400;  /* Normal weight by default, can be overridden by specific button classes */
    line-height: 1.2;
}

/* Prevent select buttons from staying in focus/hover state after click */
.btn-select:focus {
    outline: none;
}

/* Visually dim disabled buttons while preserving semantic color hint */
/* Disabled buttons fade but keep their hue (no grayscale, which would desaturate
   strawberry to brown). Same opacity as .btn-inactive so both disabled mechanisms
   look identical. */
.btn:disabled,
.btn.disabled,
.btn-select:disabled,
.btn-select.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Disabled dimming, DERIVED from the affordance axes (VisualTone × LabelPresence ×
   Actionability) via `semanticElementAffordance`/`dimLevelClass` in
   Application/Helper/View/Select.hs — NOT keyed to a colour class. The
   `.btn.disabled` rule above is the default 0.5 (labeled/filled keep their
   text-on-fill pair or foreground label legible). Icon-only disabled action
   buttons carry the derived `is-disabled-icon-only` class and fade deeper — only a
   glyph must stay recognizable, no text label to protect. Labeled dim levels
   coincide with the 0.5 default, so they need no rule. Placed after `.btn.disabled`
   so the equal-specificity icon-only rule wins by source order. Tune this one value
   (~0.3–0.45); do NOT drop to the non-selected filter-button lightness. */
.btn.is-disabled-icon-only {
    opacity: 0.3;
}

/* ##########################################################################
   ICON-ONLY & CLOSE BUTTONS
   ########################################################################## */
.btn-icon-only > i,
.btn-icon-only > .bi {
    font-size: 0.9rem;
    line-height: 1;
}

/* Constrain button to square dimensions - ensures buttons are square even when
   icons have strokes or other effects that increase their visual width */
.btn-icon-only {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Close button: borderless, larger icon, no button styling
   Visually distinct from remove buttons to reflect semantic difference
   Icon is larger (~1.25rem) to match visual size of buttoned icons (~32px square) */
.btn-close-icon {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--strawberry) !important;
    transition: color 0.2s ease, filter 0.2s ease;
}

.btn-close-icon > i,
.btn-close-icon > .bi {
    font-size: 1.65rem;
    line-height: 1;
    -webkit-text-stroke: 0.75px;
    paint-order: stroke fill;
}

.btn-close-icon:hover,
.btn-close-icon:focus {
    color: var(--strawberry-strong) !important;
    background: none !important;
    border: none !important;
    /* drop-shadow follows the cross glyph's shape, not the square container box */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}

.btn-close-icon:active {
    color: var(--strawberry-strong) !important;
    background: none !important;
    border: none !important;
}

/* ##########################################################################
   DROPDOWN TRIGGER (select)
   Kept in buttons.css (after .btn-sm) so `.select-dropdown-btn` font-weight
   wins over `.btn-sm { font-weight: bold !important }` for small triggers.
   The matching `.select-dropdown-menu` (popover container) stays in layout.css.
   ########################################################################## */
.select-dropdown-btn {
    font-weight: 400 !important;
}

/* Compact trigger sizing for in-cell dropdowns (menu options unaffected) */
.select-dropdown-btn.dropdown-toggle {
    /* Keep same vertical rhythm as .btn-select; only tighten horizontally */
    padding: 0.08rem 0.45rem !important;
    font-size: 1.06rem !important;
    display: inline-flex;
    align-items: center;
}

/* Make the dropdown caret smaller and match button text color */
.select-dropdown-btn.dropdown-toggle::after {
    border-top-width: 0.2em;
    border-right-width: 0.2em;
    border-left-width: 0.2em;
    margin-left: 0.35em;
    border-top-color: currentColor;
}