/* ==========================================================================
   KAI Golf — Button system (single source of truth)

   Linked FIRST on every page, before dashboard.css / admin_forms.css / etc.,
   so a page can still override layout deliberately.
   Do NOT redefine .btn or its variants in page <style> blocks: if a page
   needs something different, add a modifier here instead.

   Usage:
     <button class="btn btn-primary">Save</button>
     <a class="btn btn-secondary btn-sm">Cancel</a>
     <button class="btn btn-danger btn-sm">Remove</button>

   Colour policy:
     red   (btn-primary) — every normal action: save, create, add, edit, confirm
     amber (btn-danger)  — destructive only: delete, remove, reject
     grey  (btn-secondary / btn-ghost) — cancel, back, and other neutral affordances

   Variants : btn-primary | btn-secondary | btn-danger | btn-ghost
   Sizes    : btn-sm (alias btn-small) | (default) | btn-lg
   Modifiers: btn-block (full width) | btn-icon (square, icon only) |
              section-save (compact fixed-ish width save button)
   ========================================================================== */

:root {
  --btn-radius: 6px;
  --btn-font-size: 14px;
  --btn-font-weight: 600;
  --btn-padding-y: 9px;
  --btn-padding-x: 18px;
  --btn-height: 38px;
  --btn-gap: 8px;
  --btn-transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;

  /* Variant colours — derived from the portal palette in dashboard.css */
  --btn-primary-bg: #cb1533;
  --btn-primary-bg-hover: #a00d29;
  --btn-primary-bg-active: #870a22;
  --btn-primary-fg: #ffffff;

  --btn-secondary-bg: #2f2f2f;
  --btn-secondary-bg-hover: #3a3a3a;
  --btn-secondary-bg-active: #262626;
  --btn-secondary-fg: #f5f5f5;
  --btn-secondary-border: #404040;

  /* Destructive actions (delete / remove / reject) are amber, NOT red —
     red is the normal action colour here, so danger needs to stand apart. */
  --btn-danger-bg: #e0a106;
  --btn-danger-bg-hover: #c78e00;
  --btn-danger-bg-active: #ad7c00;
  --btn-danger-fg: #1a1a1a;

  --btn-focus-ring: 0 0 0 3px rgba(203, 21, 51, 0.45);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);

  min-height: var(--btn-height);
  padding: var(--btn-padding-y) var(--btn-padding-x);

  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background-color: transparent;
  color: inherit;

  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: var(--btn-transition);
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--btn-focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icons inside buttons keep the label's optical size */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

.btn-primary:active {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: #4d4d4d;
  color: var(--btn-secondary-fg);
}

.btn-secondary:active {
  background-color: var(--btn-secondary-bg-active);
}

/* Destructive only: delete, remove, reject. Nothing else. */
.btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  border-color: var(--btn-danger-bg);
}

.btn-danger:hover {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-fg);
}

.btn-danger:active {
  background-color: var(--btn-danger-bg-active);
  border-color: var(--btn-danger-bg-active);
}

.btn-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(224, 161, 6, 0.45);
}

.btn-ghost {
  background-color: transparent;
  color: #a0a0a0;
  border-color: #3a3a3a;
}

.btn-ghost:hover {
  background-color: #252525;
  color: #f0f0f0;
  border-color: #4d4d4d;
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */

.btn-sm,
.btn-small {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  gap: 6px;
}

.btn-sm svg,
.btn-small svg {
  width: 14px;
  height: 14px;
}

.btn-lg {
  min-height: 46px;
  padding: 12px 24px;
  font-size: 15px;
}

.btn-lg svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Modifiers
   -------------------------------------------------------------------------- */

.btn-block {
  display: flex;
  width: 100%;
  /* Or the 100% is the *content* box and the padding is added to it, so a
     full-width button is its container plus 36px and hangs over the edge.
     Every page that loads dashboard.css inherits a global border-box and never
     showed this; the public pages, which do not, showed it on every btn-block
     they have. */
  box-sizing: border-box;
}

/* Square, icon-only button (row actions with no label) */
.btn-icon {
  padding: 0;
  width: var(--btn-height);
  min-width: var(--btn-height);
}

.btn-icon.btn-sm,
.btn-icon.btn-small {
  width: 32px;
  min-width: 32px;
}

.btn-icon.btn-lg {
  width: 46px;
  min-width: 46px;
}

/* Compact "SAVE" button sitting in a section header.
   min-width (not width) so longer translations never overflow. */
.section-save {
  min-width: 80px;
  min-height: 32px;
  padding: 6px 12px;
  font-size: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Button groups
   -------------------------------------------------------------------------- */

.action-buttons,
.form-actions,
.filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.form-actions {
  justify-content: flex-end;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Stacked action rows get full-width buttons so targets stay tappable */
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }

  .btn {
    min-height: 42px;
  }

  .btn-sm,
  .btn-small,
  .section-save {
    min-height: 34px;
  }
}

/* The order button on the pay page. Full width and unmissable: this is the
   button that concludes the contract (§ 312j Abs. 3 BGB), not one option
   among several. */
.btn-order { width: 100%; margin-top: 14px; padding: 13px 16px;
             font-size: 16px; font-weight: 600; }

/* The acceptance block that stands in for the card while terms are outstanding. */
.agb-gate { margin-top: 14px; }
.agb-gate-notice { margin: 0 0 10px; font-size: 15px; }
.agb-gate .checkbox-item { display: flex; gap: 8px; align-items: flex-start;
                           font-size: 14px; margin-bottom: 10px; }
.agb-version { opacity: .6; font-size: 12px; margin-left: 4px; white-space: nowrap; }

.verify-note { margin: 12px 0 0; font-size: 14px; opacity: .8; }