/* Allix Corporate Identity (Konzept § 4.6, Quelle: Corporate Identity/allix/MARKENGUIDE.md)
   Light-Theme-only gemäss CI. Ampel-/Alarmfarben sind SEMANTISCH und bewusst vom Marken-Akzent getrennt. */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+20AC, U+2026;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA;
}

:root {
  /* Kernpalette (MARKENGUIDE § 1.1) */
  --ax-red: #A22E43;
  --ax-red-dark: #8C283C;
  --ax-red-light: #B64558;
  --ax-red-tint: #F7ECEF;
  --ax-slate: #344149;
  --ax-slate-deep: #232C32;
  --ax-slate-muted: #5C6B74;
  --ax-gray: #F1F1F1;
  --ax-border: #E3E6E8;
  --ax-white: #FFFFFF;
  /* Semantische Zustandsfarben (getrennt von ax-red, § 4.6) */
  --st-ok: #2F7D4F;
  --st-ok-bg: #E7F2EB;
  --st-warn: #9A6A00;
  --st-warn-bg: #F7EFDB;
  --st-crit: #C0392B;
  --st-crit-bg: #F9E9E6;
  --st-neutral: #5C6B74;
  --st-neutral-bg: #EAEEF1;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color: var(--ax-slate);
  background: var(--ax-gray);
  font-size: 1rem;
  line-height: 1.55;
}

/* Lade-Platzhalter: bewusst eine eigene Klasse INNERHALB von #app — ein Flex-Center-Style
   direkt auf #app würde nach dem Start das ganze App-Layout zentrieren und die Breite an den
   Seiteninhalt koppeln (Seiten "hüpfen" beim Navigieren). */
.app-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; color: var(--ax-slate-muted);
}

#app { display: block; }
.layout { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--ax-slate-deep); color: var(--ax-white);
  display: flex; flex-direction: column;
}
.sidebar .brand { padding: 1.1rem 1rem .9rem; border-bottom: 1px solid rgb(255 255 255 / .12); }
.sidebar .brand img { height: 42px; display: block; }
.sidebar .module-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(255 255 255 / .55); padding: 1.1rem 1rem .3rem; font-weight: 600;
}
.sidebar a {
  display: block; padding: .5rem 1rem; color: rgb(255 255 255 / .85);
  text-decoration: none; font-size: .95rem; border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgb(255 255 255 / .06); }
.sidebar a.active { border-left-color: var(--ax-red-light); background: rgb(255 255 255 / .08); color: #fff; }
.sidebar .footer { margin-top: auto; padding: 1rem; font-size: .78rem; color: rgb(255 255 255 / .45); }

/* Konstante Inhaltsbreite: links an der Navigation ausgerichtet, unabhängig vom Seiteninhalt. */
.main { flex: 1 1 auto; min-width: 0; width: 100%; max-width: var(--container-page); padding: 1.5rem 2rem 3rem; }
:root { --container-page: 1240px; }
h1 { font-weight: 600; font-size: 1.6rem; letter-spacing: -0.01em; margin: 0 0 1rem; }
h2 { font-weight: 600; font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.eyebrow {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ax-slate-muted); font-weight: 600; margin: 0 0 .25rem;
}

.card {
  background: var(--ax-white); border: 1px solid var(--ax-border);
  border-radius: 16px; padding: 1.1rem 1.3rem; box-shadow: var(--shadow-card); margin-bottom: 1rem;
}

table.data { width: 100%; table-layout: auto; border-collapse: collapse; background: var(--ax-white); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
table.data th {
  text-align: left; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ax-slate-muted); padding: .7rem .9rem; border-bottom: 1px solid var(--ax-border); background: var(--ax-white);
}
table.data td { padding: .6rem .9rem; border-bottom: 1px solid var(--ax-border); font-size: .95rem; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--ax-red-tint); cursor: pointer; }
table.data tr.no-hover:hover td { background: inherit; cursor: default; }

.btn {
  display: inline-block; border-radius: 10px; padding: .45rem 1rem; font-size: .92rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--ax-red); color: #fff; }
.btn-primary:hover { background: var(--ax-red-dark); }
.btn-ghost { background: transparent; border-color: var(--ax-border); color: var(--ax-slate); }
.btn-ghost:hover { background: var(--ax-gray); }
.btn-danger { background: transparent; border-color: var(--st-crit); color: var(--st-crit); }
.btn-danger:hover { background: var(--st-crit-bg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.chip {
  display: inline-block; border-radius: 999px; padding: .1em .7em;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
}
.chip.gruen { color: var(--st-ok); background: var(--st-ok-bg); }
.chip.gelb { color: var(--st-warn); background: var(--st-warn-bg); }
.chip.rot { color: var(--st-crit); background: var(--st-crit-bg); }
.chip.grau { color: var(--st-neutral); background: var(--st-neutral-bg); }
.chip.accent { color: var(--ax-red); background: var(--ax-red-tint); }

.dot { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: .45em; }
.dot.gruen { background: var(--st-ok); }
.dot.gelb { background: var(--st-warn); }
.dot.rot { background: var(--st-crit); }
.dot.grau { background: var(--st-neutral); }

input[type=text], textarea, select {
  font-family: inherit; font-size: .95rem; color: var(--ax-slate);
  border: 1px solid var(--ax-border); border-radius: 10px; padding: .45rem .7rem; width: 100%;
  background: var(--ax-white);
}
label { font-size: .85rem; font-weight: 600; color: var(--ax-slate-muted); display: block; margin: .6rem 0 .2rem; }

.code-box {
  font-family: ui-monospace, Consolas, monospace; background: var(--ax-slate-deep); color: #fff;
  padding: .8rem 1rem; border-radius: 10px; word-break: break-all; font-size: .95rem;
}
.hint { color: var(--ax-slate-muted); font-size: .88rem; }
.error-box { background: var(--st-crit-bg); color: var(--st-crit); border-radius: 10px; padding: .7rem 1rem; margin: .6rem 0; }