/* ---------------------------------------------------------------- button
 * templates/ui/button.html, design system «Button» and «TextAction»
 * (WEB-KOM-03, WEB-GRU-05, WEB-LAY-09, WEB-KOM-04, WEB-ZUS-06, WEB-ZUS-07):
 *   .btn.btn--primary  filled web.button.primary.surface, the one main
 *                      action of a view (WEB-GRU-05)
 *   .btn.btn--secondary  frame web.button.secondary.border, text slate
 *   .text-action       web.action.text without a frame, --more adds «›»
 * One height with the fields (--ctl-h), the compact one only in a dense bar
 * or table (.btn--compact, or a bar that sets --ctl-h to --ctl-h-sm).
 * Light 300 like all text (WEB-TYP-02).
 *
 * Transition (docs/ui-inventar.md, 4): in the design system a bare .btn is
 * the secondary button. Here a bare .btn stays the primary until the pages
 * bound to the Monthly run (admin_approvals.html, news_detail.html,
 * monthly_job.html; worker/monthly_preview/rules.py) carry .btn--primary;
 * the macro writes both classes already. .btn--sm, .btn--text,
 * .btn--chevron and .link-arrow are the old names of .btn--compact,
 * .text-action and .text-action--more. */
@layer ui {
.btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); height: var(--ctl-h); margin: 0; padding: 0 var(--ctl-px);
  font: inherit; font-size: var(--t-small); font-weight: 300; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; border-radius: 0;
  background: var(--surface-accent); color: var(--text-inverse); border: 1px solid var(--surface-accent);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.btn:hover { background: var(--corum-dark); border-color: var(--corum-dark); color: var(--text-inverse); }
/* Focus: a 2 px corum ring, 1 px off a control (WEB-ZUS-06, K-27). */
.btn:focus-visible { outline: 2px solid var(--rule-brand); outline-offset: 1px; }

/* secondary: web.button.secondary.* (hover porcelain, steel, ink) */
.btn--secondary { background: transparent; color: var(--slate); border-color: var(--rule-control); }
.btn--secondary:hover { background: var(--surface-subtle); color: var(--text-primary); border-color: var(--steel); }

/* compact: dense tables and bars only */
.btn--compact, .btn--sm, .btn--small { height: var(--ctl-h-sm); }

/* Disabled (WEB-ZUS-07, ENT-346): text-disabled (silver), the frame in
   rule-fine, no fill, full opacity, the same width; not focusable (a
   disabled button never is, an aria-disabled link leaves the tab order
   through its tabindex in the markup). */
.btn[disabled], .btn[aria-disabled="true"], .btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  background: transparent; color: var(--text-disabled); border-color: var(--rule-fine); cursor: default;
  pointer-events: none; }

/* ----------------------------------------------------------- text action
 * web.action.text, hover web.action.text-hover, no frame; «›» only on a
 * text action that leads to more (WEB-MIK-05, WEB-MIK-08). The old
 * .btn.btn--text keeps the control height of the bars it stands in. */
.text-action, .link-arrow, .btn--text {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--s-1);
  margin: 0; padding: 0; font: inherit; font-size: var(--t-small); font-weight: 300;
  white-space: nowrap; text-decoration: none; cursor: pointer; color: var(--text-accent);
  background: transparent; border: 0; border-radius: 0;
}
/* The hit area of a text action (WEB-BAR-08, web.control.target-min); as a
   button (reset, sign out) it takes the control height like every button,
   so a view keeps its two heights (WEB-KOM-04). */
.text-action { min-height: 24px; }
button.text-action { height: var(--ctl-h); }
/* In a dense row (the masthead, a table cell) it takes the compact height
   like .btn--compact (WEB-KOM-04). */
button.text-action.btn--compact { height: var(--ctl-h-sm); }
.btn--text { height: var(--ctl-h); line-height: 1; border: 1px solid transparent; }
.btn--text.btn--sm, .btn--text.btn--small, .btn--text.btn--compact { height: var(--ctl-h-sm); }
.text-action:hover, .link-arrow:hover, .btn--text:hover {
  color: var(--corum-dark); background: transparent; border-color: transparent; }
.text-action:focus-visible { outline: 2px solid var(--rule-brand); outline-offset: 1px; }
.text-action--more::after, .btn--text.btn--chevron::after, .link-arrow::after { content: "›"; line-height: 1; }
.text-action[disabled], .text-action[aria-disabled="true"],
.btn--text[disabled], .btn--text[aria-disabled="true"] {
  color: var(--text-disabled); border-color: transparent; cursor: default; pointer-events: none; }

/* The action row of a form: the buttons in one line, the primary first. */
.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
/* The action bar at the foot of a form (ui/button.html actions(); WEB-LAY-08,
   WEB-LAY-09, K-38): the primary left, further actions to its right. */
.action-bar { margin-top: var(--s-5); }
}  /* @layer ui */