/* core/ui — Einstiegspunkt (MAR-776). base.html lädt diese Datei ZUERST
 * (ersetzt den bisherigen direkten Link auf core/theme.css), gefolgt von
 * einer ZWEITEN, dynamisch gewählten <link> auf genau eine Skin-Datei
 * (core/ui/skins/{{ ui_skin }}.css, Setting UI_SKIN aus Env
 * PROCUREMENT_UI_SKIN — "nichts hardcoden"). Ein <link>-Tag kann kein
 * layer(); deshalb steht hier nur die STATEMENT-Form (ohne Inhalt), die die
 * Layer-Reihenfolge fürs ganze Dokument festlegt, bevor die zweite <link>
 * geparst wird — die Skin-Datei wrappt ihren Inhalt selbst in
 * "@layer skin { … }" und schlägt sich damit korrekt in diese Reihenfolge ein
 * (CSS-Spec: Layer-Reihenfolge = erste Erwähnung des Namens im Dokument,
 * unabhängig davon, welches Stylesheet die eigentlichen Regeln liefert).
 *
 * Cascade-Layer-Reihenfolge (niedrig -> hoch Priorität): legacy < tokens <
 * skin < app. Damit gewinnt die neue .ui-*-Skin IMMER gegen altes
 * theme.css-Markup, unabhängig von Selektor-Spezifität — kein CSS-
 * Wettrüsten während des modulweisen Rollouts.
 *
 * RE-SKIN STUFE 2 ("ganze CSS ersetzen", Marks Kernwunsch): PROCUREMENT_UI_SKIN
 * auf einen anderen Dateinamen unter skins/ setzen (z. B. "probe") — kein
 * Template ändert sich, weil Templates nur .ui-*-Klassen ausgeben.
 */
@layer legacy, tokens, skin, app;

@import url("legacy-compat.090f9b347ffc.css");
@import url("tokens.14b375bd71e9.css");

/* @layer app — für seitenweite Layout-Regeln, die keiner einzelnen
   Komponente gehören (App-Shell/Sidebar/Topbar bleiben im Pilot bewusst in
   der "legacy"-Schicht, s. docs/UI-LEITFADEN.md "Scope-Grenze"). */
@layer app {
  main.ui-main { max-width: 1180px; width: 100%; margin: 0 auto; padding: 28px 32px 80px; }

  /* Nur vom Stilkatalog (core/ui_vorschau.html) genutzt — kein core/ui-Baustein. */
  .ui-token-swatch { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
  .ui-token-swatch--accent  { background: var(--accent); }
  .ui-token-swatch--success { background: var(--success-ink); }
  .ui-token-swatch--danger  { background: var(--danger-ink); }
  .ui-token-swatch--warning { background: var(--warning-ink); }

  /* Tabs (MAR-1717, core/ui/_tabs.html) — die Unternavigation eines Moduls im Kit-Stil.
     Nur Token-Werte, keine Rohfarben (Guard G3). */
  .ui-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
  .ui-tabs__tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    color: var(--muted2); text-decoration: none; border: 1px solid transparent; border-bottom: 0;
    border-radius: var(--radius-input) var(--radius-input) 0 0; margin-bottom: -1px;
  }
  .ui-tabs__tab:hover { color: var(--ink); background: var(--surface2); }
  .ui-tabs__tab--active { color: var(--accent-ink); background: var(--card); border-color: var(--line); }
  .ui-tabs__badge {
    min-width: 18px; padding: 0 6px; font-size: 11px; line-height: 18px; text-align: center;
    color: var(--accent-ink); background: var(--accent-light); border-radius: var(--radius-pill);
  }

  /* Gesendet-Zustand (MAR-1717, data-submit-once in ui-behaviors.js): das Formular wartet auf die
     Antwort, die gesperrten Knöpfe zeigen es an. */
  .ui-busy { cursor: progress; }
  .ui-busy .ui-btn:disabled { cursor: progress; opacity: .6; }

  /* Kleine Bausteine der Partials in core/ui/ (MAR-1717). */
  .ui-inline-form { display: inline; margin: 0; }
  .ui-list-limit-hint { margin: .75rem 0 0; font-size: .85rem; color: var(--muted2); }
}