/* core/ui — Skin "default" (MAR-776, Skin-Vertrag Stufe 2: "ganze CSS ersetzen").
 *
 * SKIN-VERTRAG: diese Datei ist die EINZIGE Stelle, die das Aussehen der
 * core/ui-Komponenten definiert. Sie stylt AUSSCHLIESSLICH die semantischen
 * ".ui-*"-Klassen, die core/templates/core/ui/*.html + templatetags/ui.py
 * ausgeben — nie Framework-Klassen (die gibt es hier gar nicht, B1-Entscheid
 * MAR-776: kein Bootstrap/Tabler vendored). Ein kompletter Re-Skin (Stufe 2)
 * bedeutet: eine ANDERE Datei hier einhängen (core/ui/app.css, eine Zeile),
 * kein Template ändert sich. Optik = 1:1 aus core/theme.css (Handoff,
 * MAR-480) übernommen, nur auf die .ui-*-Klassen umbenannt — MAR-776 ändert
 * die Optik bewusst NICHT, nur das Gerüst darunter.
 *
 * Rohwerte (Farbe/Radius/Schatten) kommen ausschließlich aus tokens.css
 * (var(--name)) — Guard-Test verbietet hartkodierte Farben hier.
 */
@layer skin {

/* ---- Seiten-Kopf ("ui_page_header") --------------------------------------- */
.ui-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.ui-page-header__text { min-width: 0; }
.ui-page-header__eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.ui-page-header__title { font-size: 24px; font-weight: 600; color: var(--ink); margin-top: 5px; letter-spacing: -.01em; line-height: 1.25; }
.ui-page-header__subtitle { color: var(--muted2); margin-top: 4px; font-size: 13.5px; }
.ui-page-header__back { font-size: 13px; color: var(--muted2); text-decoration: none; display: inline-block; margin-bottom: 8px; }
.ui-page-header__back:hover { color: var(--accent); }
.ui-page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Karte ("ui_card") ----------------------------------------------------- */
.ui-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.ui-card--flush { padding: 0; overflow: hidden; }
.ui-card__head {
  padding: 18px 24px; border-bottom: 1px solid var(--divider); margin: -1.25rem -1.5rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ui-card--flush .ui-card__head { margin: 0; }
.ui-card__title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.ui-card__subtitle { font-size: 12.5px; color: var(--muted2); margin-top: 3px; }
.ui-card__body { }
.ui-card--flush .ui-card__body { padding: 1.25rem 1.5rem; }

/* ---- KPI-Kacheln ("ui_kpi_card") ------------------------------------------- */
.ui-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.ui-kpi-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem;
}
.ui-kpi-card__head { display: flex; align-items: center; gap: .5rem; }
.ui-kpi-card__icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.ui-kpi-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.ui-kpi-card__metrics { display: flex; flex-wrap: wrap; gap: 1rem; }
.ui-kpi-card__metric { min-width: 78px; }
.ui-kpi-card__value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.ui-kpi-card__label { color: var(--muted2); font-size: .8rem; }
.ui-kpi-card__note { color: var(--muted2); margin: 0; font-size: .8rem; }
.ui-kpi-card__foot { margin-top: auto; }

/* ---- Buttons + Action-Bar --------------------------------------------------- */
.ui-btn {
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius-input);
  padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--transition-fast);
}
.ui-btn:hover { background: var(--accent-hover); }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-btn--secondary { background: #fff; color: #4A4E43; border: 1px solid var(--line-input); }
.ui-btn--secondary:hover { background: var(--surface2); }
.ui-btn--danger { background: #fff; color: var(--danger-ink); border: 1px solid var(--danger-border); }
.ui-btn--danger:hover { background: var(--danger-bg); }
.ui-action-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.ui-action-bar__spacer { flex: 1; }

/* ---- Status-Badges ("ui_status_badge") -------------------------------------- */
.ui-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ui-badge--neutral { background: var(--divider2); color: var(--muted2); }
.ui-badge--ok      { background: var(--success-bg); color: var(--success-ink); }
.ui-badge--warn    { background: var(--warning-bg); color: var(--warning-ink); }
.ui-badge--danger  { background: var(--danger-bg); color: var(--danger-ink); }
.ui-badge--admin   { background: var(--role-admin-bg); color: var(--role-admin-ink); }
.ui-badge--super   { background: var(--role-super-bg); color: var(--role-super-ink); }
.ui-badge--nutzer  { background: var(--role-nutzer-bg); color: var(--role-nutzer-ink); }

/* ---- Fortschritt ("ui_progress", "ui_workflow_progress") -------------------- */
.ui-progress { display: flex; flex-direction: column; gap: 4px; }
.ui-progress__label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted2); }
.ui-progress__track { height: 8px; border-radius: 999px; background: var(--divider2); overflow: hidden; }
.ui-progress__bar {
  height: 100%; border-radius: 999px; background: var(--accent);
  width: 0%; transition: width var(--transition-progress) ease;
}
.ui-progress__bar[data-value] { width: var(--ui-progress-value, 0%); }

.ui-workflow-progress { display: flex; align-items: center; gap: 0; }
.ui-workflow-progress__step { display: flex; align-items: center; gap: 8px; flex: 1; }
.ui-workflow-progress__dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--divider2); color: var(--muted3);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  flex: none; transition: background var(--transition-fast), color var(--transition-fast);
}
.ui-workflow-progress__label { font-size: 12.5px; color: var(--muted2); white-space: nowrap; }
.ui-workflow-progress__connector { flex: 1; height: 2px; background: var(--divider2); margin: 0 6px; }
.ui-workflow-progress__step--done .ui-workflow-progress__dot { background: var(--accent); color: #fff; }
.ui-workflow-progress__step--done .ui-workflow-progress__label { color: var(--ink); }
.ui-workflow-progress__step--done + .ui-workflow-progress__connector { background: var(--accent); }
.ui-workflow-progress__step--current .ui-workflow-progress__dot { background: var(--accent-light); color: var(--accent-ink); border: 2px solid var(--accent); }
.ui-workflow-progress__step--current .ui-workflow-progress__label { color: var(--ink); font-weight: 600; }

/* ---- Stepper (Formular-Mehrschritt, "ui_stepper") --------------------------- */
.ui-stepper { display: flex; gap: 2px; margin-bottom: 1rem; background: var(--divider2); border-radius: var(--radius-input); padding: 3px; width: fit-content; }
.ui-stepper__item { background: transparent; color: #7E8175; font-weight: 500; border-radius: var(--radius-input); padding: 6px 14px; font-size: 12.5px; border: 0; cursor: pointer; }
.ui-stepper__item--active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(30,35,25,.12); }

/* ---- Leerer Zustand ("ui_empty_state") -------------------------------------- */
.ui-empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted2); }
.ui-empty-state__title { color: var(--ink); font-weight: 600; margin-bottom: .3rem; }
.ui-empty-state__hint { font-size: 13px; }
.ui-empty-state__action { margin-top: 1rem; }

/* ---- Formulare (crispy template pack "crispy_ui") -------------------------- */
.ui-form { display: flex; flex-direction: column; gap: 2px; }
.ui-field { margin-bottom: 1rem; }
.ui-field__label { display: block; font-size: .85rem; margin: 0 0 .3rem; color: var(--muted2); }
.ui-field__required { color: var(--danger-ink); }
.ui-field__control,
.ui-input, .ui-select, .ui-textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-input);
  font: inherit; font-size: 13.5px; color: var(--ink2); background: #fff;
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: 2px solid var(--accent-border); outline-offset: 1px; }
.ui-field--checkbox { display: flex; align-items: center; gap: .5rem; }
.ui-field--checkbox .ui-field__label { margin: 0; }
.ui-checkbox { width: 17px; height: 17px; accent-color: var(--accent); }
.ui-field__help { font-size: 11.5px; color: var(--muted3); margin-top: 4px; }
.ui-field__errors { color: var(--danger-ink); font-size: .82rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.ui-form__errors { color: var(--danger-ink); background: var(--danger-bg); border-radius: var(--radius-input); padding: .6rem .8rem; margin-bottom: 1rem; font-size: .85rem; }
.ui-form__actions { display: flex; gap: 8px; margin-top: 1.25rem; }

/* ---- Tabellen + Listen ("ui_table_panel", django-tables2/-filter) ---------- */
.ui-table-panel__table-wrap { overflow-x: auto; }
.ui-table-panel__toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.ui-table-panel__toolbar .ui-field { margin-bottom: 0; flex: 1; min-width: 160px; }
.ui-table-panel__toolbar .ui-field--q { flex: 2; min-width: 200px; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--divider); font-size: .92rem; }
.ui-table thead th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #83867A; }
.ui-table tbody tr:hover { background: var(--surface2); }
.ui-table a { color: var(--accent); text-decoration: none; }
.ui-table a:hover { text-decoration: underline; }
.ui-table-panel__pagination { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; font-size: .85rem; color: var(--muted2); }
.ui-table-panel__pagination a { color: var(--accent); text-decoration: none; }
.ui-table-panel__cards { display: none; flex-direction: column; gap: .6rem; }
.ui-table-card { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: .8rem .9rem; background: #fff; }
.ui-table-card__row { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; font-size: .85rem; }
.ui-table-card__row + .ui-table-card__row { border-top: 1px solid var(--divider2); }
.ui-table-card__label { color: var(--muted3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ui-table-card__value { text-align: right; color: var(--ink2); }

/* ---- Nachrichten ("ui_messages") + Modal ("ui_modal") ----------------------- */
.ui-messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.ui-messages__item { padding: .6rem .8rem; border-radius: 6px; margin-bottom: .5rem; }
.ui-messages__item--success { background: var(--success-bg); color: var(--success-ink); }
.ui-messages__item--error   { background: var(--danger-bg); color: var(--danger-ink); }
.ui-messages__item--warning { background: var(--warning-bg); color: var(--warning-ink); }

.ui-modal-overlay { position: fixed; inset: 0; background: rgba(20,22,17,.45); z-index: 40;
                    display: flex; align-items: center; justify-content: center; padding: 20px; }
.ui-modal-overlay[hidden] { display: none; }
.ui-modal { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-modal);
            max-width: 520px; width: 100%; max-height: 86vh; overflow-y: auto; }
.ui-modal__head { padding: 18px 24px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; }
.ui-modal__title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.ui-modal__close { background: none; border: none; cursor: pointer; color: var(--muted3); }
.ui-modal__body { padding: 20px 24px; }
.ui-modal__foot { padding: 16px 24px; border-top: 1px solid var(--divider); display: flex; justify-content: flex-end; gap: 10px; }

/* ---- Responsive (Mobile-Kriterien je Komponente, MAR-776 UX-PLAN) ---------- */
@media (max-width: 700px) {
  .ui-page-header { flex-direction: column; align-items: stretch; }
  .ui-page-header__actions { justify-content: stretch; }
  .ui-page-header__actions .ui-btn { flex: 1; justify-content: center; }
  .ui-kpi-grid { grid-template-columns: 1fr; }
  .ui-table-panel__table-wrap { display: none; }
  .ui-table-panel__cards { display: flex; }
  .ui-form__actions { position: sticky; bottom: 0; background: var(--bg); padding: .75rem 0; margin-top: 0; }
  .ui-form__actions .ui-btn { flex: 1; justify-content: center; }
  .ui-modal { max-height: 100vh; height: 100%; border-radius: 0; }
}

}