/* ============================================================================
   icons.css — Icon-Library + Aktions-Bar (kompakte Pill-Buttons mit Icon)

   Lädt nach base.css (siehe base.html). Überschreibt absichtlich die ältere
   `.action-bar`-Regel aus base.css mit `gap:14px`, weil unser action_bar()-
   Macro stattdessen einen Inner-Wrapper mit gap:6px verwendet.

   Konvention:
     - Aktions-Zellen einer Tabelle nutzen `_macros/buttons.html::action_bar()`.
     - Icons sind 16×16 inline-SVG mit currentColor.
     - Bei Tablet/Mobile (≤960 px) fallen Labels weg, nur Icon bleibt.
   ============================================================================ */

/* ---------- Basis: SVG-Icon ---------- */

.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  vertical-align: -3px;
  color: currentColor;
  fill: none;
  stroke: currentColor;
}

/* ---------- Action-Bar (Wrapper für mehrere Buttons in einer Zelle) ---------- */

/* Outer ist nur Container — der Inner trägt das Flex-Layout. So überschreibt
   diese Regel die alte .action-bar-Definition in base.css *ohne* deren
   Flex-Verhalten zu zerstören (alte Konsumenten haben kein __inner). */
/* Action-Bar Container — Inner ist eine Row, deren Kinder GARANTIERT auf
   einer Linie sitzen. Holistisch: jede Form/Button-Combo wird auf gemeinsame
   Höhe (--ctrl-h-sm = 32px) und Baseline gezwungen, damit kein Konsument
   manuell nacharbeiten muss. */
:root { --ctrl-h-sm: 32px; }

.action-bar {
  display: flex;
  align-items: center;
}

.action-bar__inner {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  line-height: 1;
}

/* Alle direkten Kinder — egal ob <form>, <a>, <button> — werden auf
   identische Höhe gestreckt und mit baseline-aligned. */
.action-bar__inner > * {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--ctrl-h-sm) !important;
  min-height: var(--ctrl-h-sm) !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  box-sizing: border-box;
}
.action-bar__inner > form > .action-btn,
.action-bar__inner > a.action-btn,
.action-bar__inner > button.action-btn {
  height: var(--ctrl-h-sm) !important;
  min-height: var(--ctrl-h-sm) !important;
  max-height: var(--ctrl-h-sm) !important;
  margin: 0 !important;
}

/* ---------- Action-Button (Pill, kompakt) ---------- */

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: var(--ctrl-h-sm);
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background-image: none;            /* kill base.css a::background-image */
  box-sizing: border-box;
  transition: background 140ms ease,
              color 140ms ease,
              border-color 140ms ease;
}
.action-btn .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  vertical-align: 0;
}
.action-btn__label { line-height: 1; }

/* Hover-States: variable color per kind */
.action-btn:hover,
.action-btn:focus-visible {
  background: var(--cream-warm);
  color: var(--ink);
  border-color: var(--sage-soft);
  outline: none;
}
.action-btn:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

.action-btn--sage:hover,
.action-btn--sage:focus-visible {
  color: var(--sage-deep);
  border-color: var(--sage);
}

.action-btn--warn:hover,
.action-btn--warn:focus-visible {
  color: #8a6a26;
  border-color: var(--warn);
}

.action-btn--danger:hover,
.action-btn--danger:focus-visible {
  color: var(--danger);
  border-color: var(--danger);
}

.action-btn--ok:hover,
.action-btn--ok:focus-visible {
  color: var(--ok);
  border-color: var(--ok);
}

/* Form-Wrapper (POST-Forms) — kollabiert auf inline-flex, nullt default margin
   und matched die action-btn-Höhe so dass das Form selber kein Extra-Spacing
   reinbringt. Das ist der Schlüssel zur Linien-Alignment. */
.action-form {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  height: var(--ctrl-h-sm);
  line-height: 1;
}

/* Icon-Only-Variante */
.action-btn--iconly {
  min-width: 32px;
  width: 32px;
  padding: 0;
}
.action-btn--iconly .action-btn__label { display: none; }

/* ---------- Responsive: Labels ausblenden bei knappem Platz ---------- */

@media (max-width: 960px) {
  .action-btn__label { display: none; }
  .action-btn {
    min-width: 32px;
    width: 32px;
    padding: 0;
  }
}

/* ============================================================================
   Unified Toolbar Controls — single source of truth for *all* page-level
   button rows AND form-control rows (dg-filter selects, td-actions, etc.).
   Forces consistent height 38px, consistent typography, kills wrapper-form
   padding/border quirks that produce off-by-1px height drift.
   ============================================================================ */
:root {
  --ctrl-h: 38px;
  --ctrl-radius: 8px;
  --ctrl-pad-x: 14px;
}

/* Universal control row: button OR <select> OR <a class=*-btn> in same row
   share the same height + radius + border. */
.td-actions .td-action-btn,
.dg-filter-grid select,
.dg-filter-grid .dg-more,
.dg-search,
.toolbar-btn {
  box-sizing: border-box;
  height: var(--ctrl-h);
  min-height: var(--ctrl-h);
  max-height: var(--ctrl-h);
  line-height: 1.2;
  padding: 0 var(--ctrl-pad-x);
  border-radius: var(--ctrl-radius);
  font: inherit;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
  background-image: none;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
}

/* td-actions: jeder *direkte* child – ob button, form, oder div – wird
   auf exakt --ctrl-h gestreckt; das Form ist nur Inline-Container. */
.td-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 8px;
}
.td-actions > * {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--ctrl-h) !important;
  min-height: var(--ctrl-h) !important;
  max-height: var(--ctrl-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}
.td-actions > button.td-action-btn,
.td-actions > a.td-action-btn {
  padding: 0 var(--ctrl-pad-x) !important;
}
.td-actions > form > button.td-action-btn {
  height: var(--ctrl-h) !important;
  min-height: var(--ctrl-h) !important;
  max-height: var(--ctrl-h) !important;
  padding: 0 var(--ctrl-pad-x) !important;
  margin: 0 !important;
}

/* Reset the dg-filter select intrinsic height — drop its old vertical
   padding, keep the right caret arrows. */
.dg-filter-grid select {
  padding: 0 36px 0 var(--ctrl-pad-x);
}

/* Search input shares the same height. */
.dg-search { width: 100%; max-width: 420px; }

/* ---------- Universal-Safety-Fallback ---------------------------------------
   Wenn ein Template noch nicht migriert ist und nackte form/btn-Sequenzen
   in einer td/.row enthält: erzwinge minimalen Abstand. Das ist die letzte
   Verteidigungslinie — Migration zum action_bar()-Macro ist trotzdem Pflicht.
*/
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > form + form,
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > form + a,
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > a + form,
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > .btn + form,
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > form + .btn,
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > a + a,
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > .btn + a,
:where(td, th, .field, .form-actions, .row, .list-item, .col-actions)
  > a + .btn {
  margin-left: 8px;
}