/* =========================================================================
   Tirugo CRM — main.css
   Brand: Tirugo Industrial × Apple-Glass.
   Light is default (per product owner). Dark via [data-theme="dark"] or
   prefers-color-scheme when no explicit theme is set.
   Acid green #c6f135. Bebas Neue (display) + Space Mono (body).
   Hairline borders, frosted-glass surfaces, sharp corners (industrial).
   ========================================================================= */


/* -------------------------------------------------------------------------
   Fonts (self-hosted, see app/static/fonts/README.md)
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Bebas Neue";
  src: url("/static/fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -------------------------------------------------------------------------
   Theme tokens — Light is the default cascade.
   ------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand accent (identical in both modes) */
  --color-acid:          #c6f135;
  --color-acid-dim:      #a3c92a;

  /* Light mode — default */
  --color-bg-1:          #f7f7f5;
  --color-bg-2:          #ececea;
  --color-bg-glow:       rgba(198, 241, 53, 0.18);

  --color-surface:       rgba(255, 255, 255, 0.62);
  --color-surface-2:     rgba(255, 255, 255, 0.85);
  --color-surface-solid: #ffffff;
  --color-input-bg:      #ffffff;

  --color-border:        rgba(15, 17, 21, 0.08);
  --color-border-strong: rgba(15, 17, 21, 0.16);

  --color-text:          #0f1115;
  --color-muted:         #4b5563;
  --color-faint:         #8b8f96;

  --color-success:       #4d7c0f;
  --color-warning:       #b45309;
  --color-error:         #b91c1c;
  --color-info:          #0369a1;

  /* On-acid text — kept dark in both modes for contrast */
  --color-on-acid:       #0a0a0a;

  /* Glass shadow (very subtle — Apple HIG, not SaaS-flashy) */
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 28px -12px rgba(15, 17, 21, 0.18),
    0 1px 2px rgba(15, 17, 21, 0.04);

  --glass-blur:          saturate(180%) blur(22px);

  /* Backdrop on top-most overlays */
  --modal-backdrop:      rgba(15, 17, 21, 0.32);

  /* Typography */
  --font-display:        "Bebas Neue", "Helvetica Neue", sans-serif;
  --font-mono:           "Space Mono", ui-monospace, monospace;

  /* Layout */
  --page-max-width:      1280px;
  --page-px:             1.5rem;
  --page-py:             2rem;
  --radius-glass:        14px;
  --radius-control:      10px;
  --radius-pill:         999px;

  /* Dichte-Tokens (Sprint THEME-3) — Defaults entsprechen exakt dem
     bisherigen Glass-Look. Struktur-Styles (compact/soft) ueberschreiben
     sie in /static/themes/themes.css via [data-style="..."]. */
  --card-pad:            1.5rem;    /* .card padding */
  --table-pad-y:         0.75rem;   /* .table__td vertical */
  --table-pad-x:         1rem;      /* Tabellen-Zellen horizontal */
  --table-th-pad-y:      0.625rem;  /* .table__th vertical */
  --control-pad-y:       0.625rem;  /* .btn-* vertical */
  --control-pad-x:       1.5rem;    /* .btn-* horizontal */
  --font-size-table:     0.875rem;  /* Tabellen-Zellen-Schrift */
  --gap-base:            1rem;      /* Basis-Gap fuer Listen/Grids */
}

/* Dark mode — explicit toggle. */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-1:          #0a0a0a;
  --color-bg-2:          #141414;
  --color-bg-glow:       rgba(198, 241, 53, 0.10);

  --color-surface:       rgba(26, 26, 26, 0.62);
  --color-surface-2:     rgba(38, 38, 38, 0.78);
  --color-surface-solid: #1a1a1a;
  --color-input-bg:      #161616;

  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text:          #e5e5e5;
  --color-muted:         #a3a3a3;
  --color-faint:         #6b6b6b;

  --color-success:       #84cc16;
  --color-warning:       #ff6b35;
  --color-error:         #ef4444;
  --color-info:          #38bdf8;

  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 28px -12px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.35);

  --modal-backdrop:      rgba(0, 0, 0, 0.55);
}

/* Auto dark when user has a system preference and no explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --color-bg-1:          #0a0a0a;
    --color-bg-2:          #141414;
    --color-bg-glow:       rgba(198, 241, 53, 0.10);

    --color-surface:       rgba(26, 26, 26, 0.62);
    --color-surface-2:     rgba(38, 38, 38, 0.78);
    --color-surface-solid: #1a1a1a;
    --color-input-bg:      #161616;

    --color-border:        rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    --color-text:          #e5e5e5;
    --color-muted:         #a3a3a3;
    --color-faint:         #6b6b6b;

    --color-success:       #84cc16;
    --color-warning:       #ff6b35;
    --color-error:         #ef4444;
    --color-info:          #38bdf8;

    --glass-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 8px 28px -12px rgba(0, 0, 0, 0.55),
      0 1px 2px rgba(0, 0, 0, 0.35);

    --modal-backdrop:      rgba(0, 0, 0, 0.55);
  }
}


/* -------------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  min-height: 100vh;
  background-color: var(--color-bg-1);
  /* Apple-style atmospheric backdrop: linear gradient + soft acid glow.
     Stays in place on scroll (fixed) so glass surfaces always have
     something to refract. */
  background-image:
    radial-gradient(60rem 40rem at 90% -10%, var(--color-bg-glow), transparent 70%),
    radial-gradient(50rem 35rem at -10% 110%, var(--color-bg-glow), transparent 65%),
    linear-gradient(180deg, var(--color-bg-1) 0%, var(--color-bg-2) 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[x-cloak] { display: none !important; }
body.overflow-hidden { overflow: hidden; }


/* -------------------------------------------------------------------------
   Typography utilities
   ------------------------------------------------------------------------- */

.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.uppercase    { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.08em; }
.tabular-nums  { font-variant-numeric: tabular-nums; }

.text-acid  { color: var(--color-acid); }
.text-muted { color: var(--color-muted); }
.text-faint { color: var(--color-faint); }
.text-error { color: var(--color-error); }

.text-xs  { font-size: 0.75rem;  line-height: 1.4; }
.text-sm  { font-size: 0.875rem; line-height: 1.5; }
.text-lg  { font-size: 1.125rem; line-height: 1.4; }
.text-2xl { font-size: 1.5rem;   line-height: 1.2; }
.text-5xl { font-size: 3rem;     line-height: 1.0; }

.font-bold { font-weight: 700; }


/* -------------------------------------------------------------------------
   Layout utilities
   ------------------------------------------------------------------------- */

.flex            { display: flex; }
.grid            { display: grid; }
.block           { display: block; }
.hidden          { display: none; }
.items-baseline  { align-items: baseline; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1          { flex: 1; }
.gap-3           { gap: 0.75rem; }
.gap-4           { gap: 1rem; }
.gap-6           { gap: 1.5rem; }
.grid-cols-2     { grid-template-columns: repeat(2, 1fr); }
.max-w-7xl       { max-width: var(--page-max-width); }
.mx-auto         { margin-left: auto; margin-right: auto; }
.w-full          { width: 100%; }

.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

.p-6     { padding: 1.5rem; }
.px-6    { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.pb-4    { padding-bottom: 1rem; }
.mt-1    { margin-top: 0.25rem; }


/* -------------------------------------------------------------------------
   Glass primitive — the underlying material for cards, modals, topnav.
   Falls back to opaque surface when backdrop-filter is unsupported.
   ------------------------------------------------------------------------- */

.glass {
  background-color: var(--color-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  box-shadow: var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background-color: var(--color-surface-solid); }
}


/* -------------------------------------------------------------------------
   Topnav — translucent sticky bar
   ------------------------------------------------------------------------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--color-border);
}

.topnav__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-px);
  height: 3.75rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.topnav__logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}

.topnav__logo img {
  height: 1.75rem;
  width: auto;
  display: block;
}

.topnav__links {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  height: 100%;
}

.topnav__link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding: 0 0.875rem;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
}

.topnav__link:hover { color: var(--color-text); }

.topnav__link--active {
  color: var(--color-text);
  border-bottom-color: var(--color-acid);
}

/* Right-aligned user menu */
.topnav__user {
  margin-left: auto;
  position: relative;
}

.topnav__user-trigger {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  transition: border-color 150ms, color 150ms;
  background-color: var(--color-surface-2);
}

.topnav__user-trigger:hover { border-color: var(--color-acid); }

.topnav__user-role {
  color: var(--color-muted);
  margin-left: 0.25rem;
}

.topnav__user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 12rem;
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-glass);
  padding: 0.5rem;
  z-index: 45;
}

.topnav__user-menu-item {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text);
  padding: 0.5rem 0.75rem;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-control);
  transition: background-color 150ms;
  display: block;
}

.topnav__user-menu-item:hover {
  background-color: var(--color-bg-glow);
  color: var(--color-text);
}


/* -------------------------------------------------------------------------
   Main content
   ------------------------------------------------------------------------- */

.main-content {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--page-py) var(--page-px);
}


/* -------------------------------------------------------------------------
   Page layout helpers
   ------------------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-header__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

.page-title {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.page-title__accent {
  color: var(--color-acid);
}

.page-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.detail-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb__link {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 150ms;
}

.breadcrumb__link:hover { color: var(--color-text); }

.detail-footer {
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}


/* -------------------------------------------------------------------------
   Toolbar
   ------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar__search {
  position: relative;
  flex: 1;
  min-width: 16rem;
}

.toolbar__input {
  padding-right: 2.5rem;
}


/* -------------------------------------------------------------------------
   Buttons — industrial flat with subtle Apple-style hover feedback
   ------------------------------------------------------------------------- */

.btn-primary,
.btn-ghost,
.btn-danger {
  font-family: var(--font-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--control-pad-y) var(--control-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  min-height: 2.75rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  transition: background-color 180ms, border-color 180ms, color 180ms, transform 80ms;
}

.btn-primary:active,
.btn-ghost:active,
.btn-danger:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--color-acid);
  color: var(--color-on-acid);
  border-color: var(--color-acid);
}

.btn-primary:hover {
  background-color: var(--color-acid-dim);
  border-color: var(--color-acid-dim);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-acid);
  outline-offset: 2px;
}

.btn-ghost {
  background-color: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-ghost:hover {
  border-color: var(--color-acid);
  color: var(--color-text);
}

.btn-ghost:focus-visible {
  outline: 2px solid var(--color-acid);
  outline-offset: 2px;
}

.btn-danger {
  background-color: transparent;
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn-danger:hover {
  background-color: var(--color-error);
  color: #ffffff;
}

.btn-danger:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

.btn--sm {
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  min-height: 2rem;
}

.btn--full { width: 100%; }


/* -------------------------------------------------------------------------
   Inputs
   ------------------------------------------------------------------------- */

.input {
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
  display: block;
  border-radius: var(--radius-control);
  transition: border-color 180ms, box-shadow 180ms, background-color 180ms;
  min-height: 2.75rem;
}

.input::placeholder { color: var(--color-faint); }

.input:focus {
  outline: none;
  border-color: var(--color-acid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acid) 28%, transparent);
}

.input[aria-invalid="true"] { border-color: var(--color-error); }

.input--full { width: 100%; }

select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%234b5563' d='M6 8L1 3h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}

[data-theme="dark"] select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23a3a3a3' d='M6 8L1 3h10z'/></svg>");
}

textarea.input {
  resize: vertical;
  min-height: 6rem;
}


/* -------------------------------------------------------------------------
   Form field
   ------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.field__required { color: var(--color-warning); margin-left: 0.125rem; }

.field__error { font-size: 0.75rem; color: var(--color-error); }

.field__help { font-size: 0.75rem; color: var(--color-faint); }

.field--error .input { border-color: var(--color-error); }


/* -------------------------------------------------------------------------
   Card — frosted glass
   ------------------------------------------------------------------------- */

.card {
  background-color: var(--color-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-glass);
  padding: var(--card-pad);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background-color: var(--color-surface-solid); }
}

.card__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 1rem;
}


/* -------------------------------------------------------------------------
   Detail grid
   ------------------------------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-base);
}

.card--full,
.card--meta { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .detail-grid { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
   Data list
   ------------------------------------------------------------------------- */

.data-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-base) * 0.75);
}

.data-list__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-base);
  padding-bottom: calc(var(--gap-base) * 0.75);
  border-bottom: 1px solid var(--color-border);
}

.data-list__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.data-list__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  flex-shrink: 0;
}

.data-list__value {
  font-size: 0.875rem;
  color: var(--color-text);
  text-align: right;
}

.data-list__value--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.notes-text {
  font-size: 0.875rem;
  color: var(--color-text);
  white-space: pre-wrap;
  line-height: 1.7;
}


/* -------------------------------------------------------------------------
   Table
   ------------------------------------------------------------------------- */

.table-wrapper { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; }

.table__th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  text-align: left;
  padding: var(--table-th-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}

.table__th--actions { text-align: right; }

.table__row {
  transition: background-color 150ms;
}

.table__row:hover {
  background-color: color-mix(in srgb, var(--color-acid) 10%, transparent);
}

.table__td {
  font-family: var(--font-mono);
  font-size: var(--font-size-table);
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table__td--muted { color: var(--color-muted); }
.table__td--actions { text-align: right; white-space: nowrap; }

.table__td--empty {
  text-align: center;
  color: var(--color-faint);
  padding: 3rem 1rem;
}

.table__link {
  color: var(--color-text);
  transition: color 150ms;
}

.table__link:hover { color: var(--color-acid); }

@media (max-width: 640px) {
  .table__th--hide-sm,
  .table__td--hide-sm { display: none; }
}


/* -------------------------------------------------------------------------
   Action buttons (table-row actions)
   ------------------------------------------------------------------------- */

.action-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: color 150ms, border-color 150ms, background-color 150ms;
  min-height: 2rem;
}

.action-btn--edit {
  color: var(--color-muted);
  border-color: var(--color-border-strong);
  margin-right: 0.5rem;
}

.action-btn--edit:hover {
  color: var(--color-text);
  border-color: var(--color-acid);
}

.action-btn--delete {
  color: var(--color-faint);
  border-color: var(--color-border);
}

.action-btn--delete:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}


/* -------------------------------------------------------------------------
   Customer number / language tag
   ------------------------------------------------------------------------- */

.customer-number {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.lang-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-faint);
}


/* -------------------------------------------------------------------------
   Status badge
   ------------------------------------------------------------------------- */

.badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  display: inline-block;
  white-space: nowrap;
}

.badge--active {
  background-color: var(--color-acid);
  color: var(--color-on-acid);
}

.badge--pending {
  background-color: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.badge--rejected {
  background-color: color-mix(in srgb, var(--color-error) 18%, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
}

.badge--draft {
  background-color: var(--color-surface-2);
  color: var(--color-muted);
  border: 1px solid var(--color-border-strong);
}


/* -------------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------------- */

.empty-state {
  padding: 4rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-glass);
}

.empty-state__text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.empty-state__hint {
  font-size: 0.8125rem;
  color: var(--color-faint);
  margin-top: 0.5rem;
}


/* -------------------------------------------------------------------------
   HTMX loading indicator
   ------------------------------------------------------------------------- */

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-acid);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  vertical-align: middle;
}

.toolbar__search .spinner {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  animation-play-state: paused;
}

.htmx-request .toolbar__search .spinner,
.htmx-request.toolbar__search .spinner { animation-play-state: running; }

@keyframes spin { to { transform: rotate(360deg); } }


/* -------------------------------------------------------------------------
   Modal — translucent backdrop + heavier glass dialog
   ------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--modal-backdrop);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: backdrop-in 180ms ease-out;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 32px 64px -24px rgba(15, 17, 21, 0.35),
    0 8px 24px -12px rgba(15, 17, 21, 0.18);
  border-radius: var(--radius-glass);
  width: 100%;
  max-width: 42rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-in 220ms cubic-bezier(0.32, 0.72, 0.24, 1);
}

[data-theme="dark"] .modal-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 32px 64px -24px rgba(0, 0, 0, 0.7),
    0 8px 24px -12px rgba(0, 0, 0, 0.45);
}

@keyframes modal-in {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--card-pad);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.modal-close {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-muted);
  padding: 0.25rem 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  transition: color 150ms, background-color 150ms;
}

.modal-close:hover {
  color: var(--color-text);
  background-color: var(--color-bg-glow);
}

.modal-form {
  overflow-y: auto;
  flex: 1;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem var(--card-pad);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}


/* -------------------------------------------------------------------------
   Form section (modal)
   ------------------------------------------------------------------------- */

.form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-section__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-faint);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}


/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pagination__info {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.pagination__controls {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.pagination__page {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-muted);
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  min-height: 2rem;
  transition: color 150ms, border-color 150ms, background-color 150ms;
}

.pagination__page:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.pagination__page--active {
  color: var(--color-on-acid);
  border-color: var(--color-acid);
  background-color: var(--color-acid);
}


/* -------------------------------------------------------------------------
   Toast
   ------------------------------------------------------------------------- */

#toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
}

.toast-msg {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid;
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-control);
  box-shadow: var(--glass-shadow);
  animation: toast-in 220ms ease-out;
}

.toast-msg--success { border-left-color: var(--color-acid); color: var(--color-text); }
.toast-msg--error   { border-left-color: var(--color-error); color: var(--color-text); }

@keyframes toast-in {
  from { transform: translateY(0.5rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


/* -------------------------------------------------------------------------
   Form rows (multi-column)
   ------------------------------------------------------------------------- */

.form-row { display: grid; gap: 1rem; }
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 640px) {
  .form-row--2,
  .form-row--3 { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
   Checkbox
   ------------------------------------------------------------------------- */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-acid);
  cursor: pointer;
}

.checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}


/* -------------------------------------------------------------------------
   Address sub-cards (customer detail)
   ------------------------------------------------------------------------- */

.addresses__header,
.contacts__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.addresses__empty,
.contacts__empty { padding: 1rem 0; }

.addresses__grid,
.contacts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.address-card,
.contact-card {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.address-card--default,
.contact-card--primary {
  border-color: var(--color-acid);
  box-shadow: 0 0 0 1px var(--color-acid) inset;
}

.contact-card--inactive { opacity: 0.6; }

.address-card__header,
.contact-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.address-card__type {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.address-card__body,
.contact-card__body {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}

.address-card__line { display: block; }

.address-card__canton,
.address-card__country {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.address-card__country {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.address-card__actions,
.contact-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
}

.contact-card__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.contact-card__badges {
  display: flex;
  gap: 0.375rem;
}

.contact-card__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.contact-card__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.contact-card__value { color: var(--color-text); }

.contact-card__notes {
  font-size: 0.8125rem;
  color: var(--color-muted);
  border-top: 1px dashed var(--color-border);
  padding-top: 0.5rem;
  white-space: pre-wrap;
}


/* -------------------------------------------------------------------------
   Auth (login) page
   ------------------------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-glass);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.auth-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.auth-card__logo {
  height: 2.75rem;
  width: auto;
}

.auth-card__title {
  font-family: var(--font-display);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  line-height: 1;
}

.auth-card__subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.auth-card__alert {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
  border-radius: var(--radius-control);
  padding: 0.75rem 1rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-form__actions { margin-top: 0.5rem; }


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

@media (max-width: 640px) {
  .page-title { font-size: 2.25rem; }
  .detail-title { font-size: 1.75rem; }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__search { min-width: 0; }

  .modal-card { max-height: 95vh; }
  .modal-header,
  .modal-form,
  .modal-footer { padding: 1rem; }

  .btn-primary,
  .btn-ghost,
  .btn-danger {
    width: 100%;
    justify-content: center;
  }

  .topnav__user-trigger { padding: 0.375rem 0.625rem; }
  .topnav__user-role { display: none; }
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Status-Pills (Filter-Leiste)
   ------------------------------------------------------------------------- */

.status-pills {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  align-items: center;
}

.status-pill {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-2);
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.status-pill:hover {
  color: var(--color-text);
  border-color: var(--color-acid);
}

.status-pill--active {
  background-color: var(--color-acid);
  color: var(--color-on-acid);
  border-color: var(--color-acid);
}

.status-pill--active:hover {
  background-color: var(--color-acid-dim);
  border-color: var(--color-acid-dim);
  color: var(--color-on-acid);
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Karten-Liste (Mobile)
   ------------------------------------------------------------------------- */

.report-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.report-card {
  display: block;
  background-color: var(--color-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-glass);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 150ms, box-shadow 150ms;
}

.report-card:hover {
  border-color: var(--color-acid);
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px var(--color-acid) inset;
}

.report-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.report-card__number {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  line-height: 1;
}

.report-card__body {
  margin-bottom: 0.75rem;
}

.report-card__customer {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

.report-card__subject {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-top: 0.125rem;
}

.report-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  padding-top: 0.625rem;
  gap: 0.5rem;
}

.report-card__date,
.report-card__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-faint);
}

/* md breakpoint helper (ab 768px Tabelle, darunter Cards) */
@media (min-width: 768px) {
  .report-cards { display: none; }
}

@media (max-width: 767px) {
  .hidden.md\:block { display: none !important; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none !important; }
  .hidden.md\:block { display: block !important; }
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Foto-Galerie
   ------------------------------------------------------------------------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px)  { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

.photo-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.photo-item__link {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-control);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: border-color 150ms;
}

.photo-item__link:hover { border-color: var(--color-acid); }

.photo-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-item__caption {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-align: center;
}

.photo-item__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.photo-item__confirm {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Foto-Upload-Zone
   ------------------------------------------------------------------------- */

.photo-upload {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.photo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-glass);
  background-color: var(--color-surface-2);
  cursor: pointer;
  transition: border-color 180ms, background-color 180ms;
  text-align: center;
  min-height: 8rem;
  position: relative;
}

.photo-dropzone:hover,
.photo-dropzone--active {
  border-color: var(--color-acid);
  background-color: color-mix(in srgb, var(--color-acid) 8%, transparent);
}

.photo-dropzone--uploading {
  border-color: var(--color-acid);
  opacity: 0.75;
  pointer-events: none;
}

.photo-dropzone__icon {
  font-size: 2rem;
  line-height: 1;
}

.photo-dropzone__text {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.photo-dropzone__hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-faint);
}

.photo-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  /* Sichtbar gross für Touch-Targets auf Mobile */
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Signatur-Anzeige (bereits unterschrieben)
   ------------------------------------------------------------------------- */

.signature-display {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.signature-display__image-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: #ffffff; /* Signatur immer auf weissem Hintergrund */
  padding: 1rem;
  max-width: 32rem;
}

.signature-display__image {
  display: block;
  max-width: 100%;
  height: auto;
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Signatur-Pad (zum Unterschreiben)
   ------------------------------------------------------------------------- */

.signature-pad {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.signature-pad__canvas-wrap {
  position: relative;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  background-color: #ffffff; /* Immer weiss, damit die Unterschrift lesbar ist */
  max-width: 100%;
}

.signature-pad__canvas {
  display: block;
  width: 100%;
  height: 200px;
  touch-action: none; /* Kein Scrollen beim Zeichnen */
  cursor: crosshair;
}

.signature-pad__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-faint);
  pointer-events: none;
  user-select: none;
}

.signature-pad__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .signature-pad__actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Positions-Zusammenfassung
   ------------------------------------------------------------------------- */

.items-summary {
  border-top: 1px solid var(--color-border-strong);
  padding-top: 1rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.items-summary__list {
  min-width: 22rem;
}

@media (max-width: 640px) {
  .items-summary { justify-content: stretch; }
  .items-summary__list { min-width: 0; width: 100%; }
}


/* -------------------------------------------------------------------------
   Arbeitsrapport — Drag-and-Drop Zeilen-Highlight
   ------------------------------------------------------------------------- */

.table__row--dragging {
  opacity: 0.5;
  background-color: color-mix(in srgb, var(--color-acid) 15%, transparent);
}


/* -------------------------------------------------------------------------
   Modal — breite Variante (Rapport-Formular)
   ------------------------------------------------------------------------- */

.modal-card--wide {
  max-width: 52rem;
}


/* =========================================================================
   Phase 2 — Modul Buchhaltung + Apple-Liquid-Glass Refinements
   Ergänzt fehlende Klassen aus Sprints B5–B10 und schärft den
   Apple-HIG Glass-Look (subtilere Gradients, smoothere Transitions).
   ========================================================================= */


/* -------------------------------------------------------------------------
   Refined Glass Tokens — closer to Apple "Liquid Glass" 2026
   ------------------------------------------------------------------------- */

:root {
  /* Acid green soft tints used in tables/states */
  --color-acid-soft:    color-mix(in srgb, var(--color-acid) 14%, transparent);
  --color-acid-softer:  color-mix(in srgb, var(--color-acid) 8%, transparent);

  /* Layering scale */
  --elev-0: 0 0 0 transparent;
  --elev-1:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(15, 17, 21, 0.04),
    0 4px 14px -8px rgba(15, 17, 21, 0.10);
  --elev-2: var(--glass-shadow);
  --elev-3:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 16px 36px -16px rgba(15, 17, 21, 0.22),
    0 4px 12px -6px rgba(15, 17, 21, 0.08);

  /* Smoother easings */
  --ease-glass: cubic-bezier(0.32, 0.72, 0.24, 1);

  /* Width tokens */
  --form-grid-min: 220px;
}

[data-theme="dark"] {
  --color-acid-soft:    color-mix(in srgb, var(--color-acid) 16%, transparent);
  --color-acid-softer:  color-mix(in srgb, var(--color-acid) 10%, transparent);

  --elev-1:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 14px -8px rgba(0, 0, 0, 0.5);
  --elev-3:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 36px -16px rgba(0, 0, 0, 0.65),
    0 4px 12px -6px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-acid-soft:    color-mix(in srgb, var(--color-acid) 16%, transparent);
    --color-acid-softer:  color-mix(in srgb, var(--color-acid) 10%, transparent);
    --elev-1:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 4px 14px -8px rgba(0, 0, 0, 0.5);
    --elev-3:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 16px 36px -16px rgba(0, 0, 0, 0.65),
      0 4px 12px -6px rgba(0, 0, 0, 0.45);
  }
}


/* -------------------------------------------------------------------------
   Theme toggle button (topnav)
   ------------------------------------------------------------------------- */

.topnav__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-right: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-muted);
  background: var(--color-surface-2);
  transition: color 150ms, border-color 150ms, background-color 150ms;
}

.topnav__theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-acid);
}

.topnav__theme-toggle svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

[data-theme="light"] .topnav__theme-toggle .icon-moon { display: block; }
[data-theme="light"] .topnav__theme-toggle .icon-sun  { display: none; }
[data-theme="dark"]  .topnav__theme-toggle .icon-moon { display: none; }
[data-theme="dark"]  .topnav__theme-toggle .icon-sun  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .topnav__theme-toggle .icon-moon { display: none; }
  :root:not([data-theme]) .topnav__theme-toggle .icon-sun  { display: block; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .topnav__theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme]) .topnav__theme-toggle .icon-moon { display: block; }
}

/* Settings (Zahnrad) Topnav-Icon */
.topnav__settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-right: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-muted);
  background: var(--color-surface-2);
  text-decoration: none;
  transition: color 150ms, border-color 150ms, background-color 150ms, transform 200ms;
}
.topnav__settings:hover {
  color: var(--color-text);
  border-color: var(--color-acid);
  transform: rotate(30deg);
}
.topnav__settings--active {
  color: var(--color-acid-strong, var(--color-text));
  border-color: var(--color-acid);
}
.topnav__settings svg { display: block; }


/* -------------------------------------------------------------------------
   Spacing utilities (used across templates)
   ------------------------------------------------------------------------- */

.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.p-0   { padding: 0; }
.p-4   { padding: 1rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }


/* -------------------------------------------------------------------------
   Text utilities (Phase 2 additions)
   ------------------------------------------------------------------------- */

.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error   { color: var(--color-error); }
.text-info    { color: var(--color-info); }
.text-center  { text-align: center; }
.text-left    { text-align: left; }


/* -------------------------------------------------------------------------
   Alerts — Apple-style translucent, subtle border
   ------------------------------------------------------------------------- */

.alert {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.alert strong { font-weight: 700; margin-right: 0.25rem; }

.alert--success {
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  background-color: color-mix(in srgb, var(--color-success) 8%, var(--color-surface-2));
  color: var(--color-success);
}

.alert--warning {
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  background-color: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface-2));
  color: var(--color-warning);
}

.alert--error {
  border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
  background-color: color-mix(in srgb, var(--color-error) 8%, var(--color-surface-2));
  color: var(--color-error);
}

.alert--info {
  border-color: color-mix(in srgb, var(--color-info) 35%, transparent);
  background-color: color-mix(in srgb, var(--color-info) 8%, var(--color-surface-2));
  color: var(--color-info);
}


/* -------------------------------------------------------------------------
   Form layouts (B-Sprints)
   ------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--form-grid-min), 1fr));
  gap: 1rem 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
  background-color: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  min-height: 2.75rem;
  width: 100%;
  transition: border-color 180ms, box-shadow 180ms;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-acid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acid) 28%, transparent);
}

.form-field textarea { resize: vertical; min-height: 6rem; }

.form-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-faint);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .form-actions > * { width: 100%; }
}


/* -------------------------------------------------------------------------
   Select & Textarea (alternate naming used in templates)
   ------------------------------------------------------------------------- */

.select,
select.select {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
  background-color: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  min-height: 2.75rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%234b5563' d='M6 8L1 3h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  cursor: pointer;
  transition: border-color 180ms, box-shadow 180ms;
}

.select:focus {
  outline: none;
  border-color: var(--color-acid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acid) 28%, transparent);
}

[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23a3a3a3' d='M6 8L1 3h10z'/></svg>");
}

.select--narrow { padding-right: 1.75rem; min-width: 9rem; }
.select--sm     { min-height: 2rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.8125rem; }

.textarea {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.625rem 0.875rem;
  background-color: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  width: 100%;
  min-height: 6rem;
  resize: vertical;
}

.textarea:focus {
  outline: none;
  border-color: var(--color-acid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acid) 28%, transparent);
}


/* -------------------------------------------------------------------------
   Card variants (Phase 2)
   ------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.card-grid--2col { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card__body.p-0 { padding: 0; }

.card__desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.card--detail { padding: 2rem; }
.card--nav    { padding: 1rem 1.25rem; }


/* -------------------------------------------------------------------------
   KPI cards — Apple-style dashboard tiles
   ------------------------------------------------------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.875rem;
}

.kpi-card {
  background-color: var(--color-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  box-shadow: var(--elev-1);
  border-radius: var(--radius-glass);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  transition: box-shadow 180ms, border-color 180ms, transform 180ms var(--ease-glass);
}

.kpi-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}

.kpi-card__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.kpi-card__value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-card--accent {
  border-color: var(--color-acid);
  background-color: color-mix(in srgb, var(--color-acid) 18%, var(--color-surface));
  box-shadow:
    0 0 0 1px var(--color-acid) inset,
    0 8px 24px -10px color-mix(in srgb, var(--color-acid) 35%, transparent);
}

.kpi-card--accent .kpi-card__value { color: var(--color-text); }

.kpi-card--accent .kpi-card__label {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.kpi-card small {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* -------------------------------------------------------------------------
   Tabs (used in /buchhaltung/offene-posten, /buchhaltung/mwst, suppliers)
   ------------------------------------------------------------------------- */

.tabs,
.tabs__nav {
  display: flex;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--color-border-strong);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tab,
.tabs__tab {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  padding: 0.625rem 1.125rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms, border-color 150ms;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}

.tab:hover,
.tabs__tab:hover {
  color: var(--color-text);
}

.tab--active,
.tabs__tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-acid);
}


/* -------------------------------------------------------------------------
   Audit trail list
   ------------------------------------------------------------------------- */

.audit-trail {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0;
  margin: 0;
}

.audit-trail li {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text);
  line-height: 1.5;
  padding: 0.625rem 0.75rem;
  border-left: 2px solid var(--color-acid);
  background-color: var(--color-acid-softer);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

.audit-trail li strong {
  color: var(--color-acid-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  margin-right: 0.5rem;
}

[data-theme="dark"] .audit-trail li strong {
  color: var(--color-acid);
}


/* -------------------------------------------------------------------------
   Definition list (dl) — used on expense/document detail
   ------------------------------------------------------------------------- */

.dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.dl dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  align-self: baseline;
}

.dl dd {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
  word-break: break-word;
}


/* -------------------------------------------------------------------------
   Bulk toolbar (offene-posten Bulk-Pay)
   ------------------------------------------------------------------------- */

.bulk-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  margin-bottom: 0.75rem;
}

.bulk-toolbar input[type="date"],
.bulk-toolbar select {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background-color: var(--color-input-bg);
  color: var(--color-text);
}


/* -------------------------------------------------------------------------
   Modal (alternate naming: .modal / .modal__content / .modal__title)
   used by payment_modal partial
   ------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--modal-backdrop);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.modal--open { display: flex; animation: backdrop-in 180ms ease-out; }

.modal__content {
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--elev-3);
  border-radius: var(--radius-glass);
  width: 100%;
  max-width: 32rem;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: modal-in 220ms var(--ease-glass);
}

.modal__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  line-height: 1.1;
}


/* -------------------------------------------------------------------------
   Table additions (Phase 2)
   ------------------------------------------------------------------------- */

.table-container {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-glass);
  background-color: var(--color-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-1);
}

.table-container > .table {
  margin: 0;
}

.table thead th,
.table th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  text-align: left;
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--color-border-strong);
  background-color: color-mix(in srgb, var(--color-bg-1) 50%, var(--color-surface-2));
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody td,
.table td {
  font-family: var(--font-mono);
  font-size: var(--font-size-table);
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr {
  transition: background-color 150ms;
}

.table tbody tr:hover {
  background-color: var(--color-acid-soft);
}

.table--compact th,
.table--compact td,
.table--sm th,
.table--sm td {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.table-row--clickable {
  cursor: pointer;
}

.table__row--total {
  font-weight: 700;
  background-color: var(--color-surface-2);
}

.table__row--muted   { opacity: 0.5; }
.table__row--inactive { opacity: 0.5; }
.table__row--collective { background-color: var(--color-acid-softer); }

.table__td--center,
.table__th--center { text-align: center; }

.table__td--right,
.table__th--right  { text-align: right; }

.table__td--mono,
.table__th--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.table__td--bold { font-weight: 700; }

.table__empty,
.table__td--empty {
  text-align: center;
  color: var(--color-faint);
  padding: 3rem 1rem;
  font-style: italic;
}

.table__muted { color: var(--color-muted); }

.table__group-cell {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-acid-dim);
  background-color: var(--color-acid-softer);
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
}

.table__group-header {
  background-color: var(--color-surface-2);
}

.table__group-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.row--overdue {
  background-color: color-mix(in srgb, var(--color-error) 8%, transparent);
}


/* -------------------------------------------------------------------------
   Buttons — Phase 2 alternate naming + new variants
   ------------------------------------------------------------------------- */

.btn-secondary {
  font-family: var(--font-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--control-pad-y) var(--control-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  min-height: 2.75rem;
  border-radius: var(--radius-control);
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  transition: border-color 180ms, color 180ms, background-color 180ms, transform 80ms;
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--color-acid);
  background-color: color-mix(in srgb, var(--color-acid) 12%, var(--color-surface-2));
}

.btn-secondary:active { transform: translateY(1px); }

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-acid);
  outline-offset: 2px;
}

/* Alias btn-sm == btn--sm so both naming conventions work */
.btn-sm,
.btn-primary.btn-sm,
.btn-ghost.btn-sm,
.btn-secondary.btn-sm,
.btn-danger.btn-sm {
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  min-height: 2rem;
}

.btn--add-line {
  width: auto;
  align-self: flex-start;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background-color 150ms;
}

.btn-icon:hover {
  color: var(--color-text);
  border-color: var(--color-acid);
}

.btn-icon--danger:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn-ghost--active {
  background-color: var(--color-acid);
  color: var(--color-on-acid);
  border-color: var(--color-acid);
}

.btn-ghost--active:hover {
  background-color: var(--color-acid-dim);
  border-color: var(--color-acid-dim);
  color: var(--color-on-acid);
}


/* -------------------------------------------------------------------------
   Badges — Phase-2 status semantics
   ------------------------------------------------------------------------- */

/* Incoming aliases */
.badge--green,
.badge--ok,
.badge--posted,
.badge--paid,
.badge--approved,
.badge--reconciled,
.badge--matched,
.badge--paid_separately,
.badge--paid_with_salary {
  background-color: var(--color-acid);
  color: var(--color-on-acid);
}

.badge--blue,
.badge--info,
.badge--submitted,
.badge--pending_review {
  background-color: color-mix(in srgb, var(--color-info) 18%, transparent);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info) 35%, transparent);
}

.badge--yellow,
.badge--warning,
.badge--partially_paid,
.badge--open {
  background-color: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.badge--red,
.badge--rejected,
.badge--cancelled,
.badge--unmatched {
  background-color: color-mix(in srgb, var(--color-error) 18%, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
}

.badge--gray,
.badge--locked,
.badge--archived,
.badge--ignored,
.badge--private {
  background-color: var(--color-surface-2);
  color: var(--color-muted);
  border: 1px solid var(--color-border-strong);
}


/* -------------------------------------------------------------------------
   Source badges (journal-source markers)
   ------------------------------------------------------------------------- */

.source-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-2);
  color: var(--color-muted);
}

.source-badge--manual    { color: var(--color-muted); }
.source-badge--invoice   { color: var(--color-info);  border-color: color-mix(in srgb, var(--color-info) 35%, transparent); }
.source-badge--payment   { color: var(--color-acid-dim); border-color: var(--color-acid); }
.source-badge--expense   { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }
.source-badge--work_report { color: var(--color-info); }
.source-badge--opening   { color: var(--color-faint); }
.source-badge--closing   { color: var(--color-faint); }
.source-badge--depreciation { color: var(--color-faint); }
.source-badge--salary    { color: var(--color-faint); }


/* -------------------------------------------------------------------------
   Validation badge (B3 journal Soll=Haben Live-Indikator)
   ------------------------------------------------------------------------- */

.validation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.validation-badge--ok {
  border-color: var(--color-acid);
  background-color: var(--color-acid-soft);
  color: var(--color-text);
}

.validation-badge--error {
  border-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 12%, var(--color-surface-2));
  color: var(--color-error);
}

.validation-badge__status {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.validation-badge__status--ok    { color: var(--color-acid-dim); }
.validation-badge__status--error { color: var(--color-error); }

.validation-badge__detail {
  font-family: var(--font-mono);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .validation-badge__status--ok { color: var(--color-acid); }


/* -------------------------------------------------------------------------
   Suggestion hint (B4 Live-Kontierungs-Vorschlag)
   ------------------------------------------------------------------------- */

.suggestion-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-2);
}

.suggestion-hint--high {
  border-color: var(--color-acid);
  background-color: var(--color-acid-soft);
}

.suggestion-hint--medium {
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  background-color: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface-2));
}

.suggestion-hint--low,
.suggestion-hint--none {
  opacity: 0.7;
}

.suggestion-hint__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-size: 0.6875rem;
}

.suggestion-hint__value {
  color: var(--color-text);
  font-weight: 700;
}


/* -------------------------------------------------------------------------
   Status actions (Document detail action group)
   ------------------------------------------------------------------------- */

.status-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}


/* -------------------------------------------------------------------------
   Account indent (Kontenplan-Hierarchie)
   ------------------------------------------------------------------------- */

.account-indent {
  display: inline-block;
  width: 1.25rem;
}


/* -------------------------------------------------------------------------
   Callout (informative inline-Block)
   ------------------------------------------------------------------------- */

.callout {
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-control);
  border-left: 3px solid var(--color-info);
  background-color: color-mix(in srgb, var(--color-info) 8%, var(--color-surface));
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text);
}

.callout--info { border-left-color: var(--color-info); }


/* -------------------------------------------------------------------------
   Chip (small inline tag)
   ------------------------------------------------------------------------- */

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}


/* -------------------------------------------------------------------------
   Empty state — alternate naming used in B-templates
   ------------------------------------------------------------------------- */

.empty-state__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}


/* -------------------------------------------------------------------------
   Combobox / Picker (customer_picker macro)
   ------------------------------------------------------------------------- */

.picker {
  position: relative;
}

.picker__display {
  width: 100%;
}

.picker-results-wrap {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: 18rem;
  overflow-y: auto;
  background-color: var(--color-surface-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--elev-3);
}

.picker-results--open { display: block; }

.picker-results {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.picker-result {
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  transition: background-color 100ms;
  border-bottom: 1px solid var(--color-border);
}

.picker-result:last-child { border-bottom: none; }

.picker-result:hover,
.picker-result:focus-visible {
  outline: none;
  background-color: var(--color-acid-soft);
}

.picker-result__name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text);
  font-weight: 700;
}

.picker-result__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.picker-result__sub {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.picker-empty {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-faint);
  padding: 1rem 0.875rem;
  text-align: center;
}


/* -------------------------------------------------------------------------
   Reduced motion — respect Apple HIG / accessibility
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}