/* DocSuite – Stylesheet nach dem Penpot-Entwurf (Seitenleiste, Kopfleiste, Karten, Formulare) */
/* Ersetzt static/css/docsuite.css; am HTML muss nichts geändert werden */

/* Inter, selbst ausgeliefert (SIL OFL, fonts/Inter-OFL.txt). Kein @import und keine fremde
   Adresse: die Anwendung laedt zur Laufzeit nichts aus dem Netz (N-01). Ein variabler
   Schnitt deckt alle Staerken ab, die das Design verwendet. */
@font-face {
  font-family: Inter;
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans Arabic, selbst ausgeliefert (SIL OFL, fonts/NotoSansArabic-OFL.txt).
   Nur fuer Arabisch; Lateinisch bleibt bei Inter. Ein variabler Schnitt deckt die
   Staerken ab. */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/NotoSansArabic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben und Maße ---------- */
:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-muted: #fafbfc;
  --canvas: #e9ecf0;
  --border: #e2e5ea;
  --border-strong: #cdd2da;
  --text: #1b1f27;
  --text-2: #3a414d;
  --text-muted: #626b79;
  --text-faint: #8a93a1;
  --primary: #2f5bea;
  --primary-dark: #2449c4;
  --primary-soft: #ebf0fe;
  --primary-soft-2: #dce4fd;
  --focus-ring: #c9d6fb;
  --info-bg: #f3f6fe;
  --info-border: #dce4fb;
  --warning: #8a5a00;
  --warning-bg: #fef6e7;
  --warning-border: #f3e2b3;
  --danger: #c2352b;
  --danger-bg: #fdecea;
  --danger-border: #f3c3be;
  --success: #1e7f4a;
  --success-bg: #eaf7ee;
  --success-border: #bfe5cc;
  --track: #e3e7ee;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.04);
  --radius-card: 12px;
  --radius: 8px;
  --radius-sm: 6px;
  --sidebar-width: 248px;
  --topbar-height: 64px;
  --content-padding: 32px;
  --font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dunkles Design: per Auswahl oder automatisch nach Systemeinstellung */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14171d;
  --surface: #1c2027;
  --surface-muted: #181c23;
  --canvas: #22262e;
  --border: #2b313b;
  --border-strong: #3a4250;
  --text: #e6e8ec;
  --text-2: #c3c8d1;
  --text-muted: #9aa3b0;
  --text-faint: #6f7886;
  --primary: #5b82f0;
  --primary-dark: #8fabf5;
  --primary-soft: #1f2b4d;
  --primary-soft-2: #26355e;
  --focus-ring: #2d4484;
  --info-bg: #1b2338;
  --info-border: #2b3a5e;
  --warning: #e8b84b;
  --warning-bg: #332a14;
  --warning-border: #5a4a22;
  --danger: #ef6b61;
  --danger-bg: #3a1f1d;
  --danger-border: #5c2d29;
  --success: #5fcf8a;
  --success-bg: #17301f;
  --success-border: #24502f;
  --track: #2b313b;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --bg: #14171d;
    --surface: #1c2027;
    --surface-muted: #181c23;
    --canvas: #22262e;
    --border: #2b313b;
    --border-strong: #3a4250;
    --text: #e6e8ec;
    --text-2: #c3c8d1;
    --text-muted: #9aa3b0;
    --text-faint: #6f7886;
    --primary: #5b82f0;
    --primary-dark: #8fabf5;
    --primary-soft: #1f2b4d;
    --primary-soft-2: #26355e;
    --focus-ring: #2d4484;
    --info-bg: #1b2338;
    --info-border: #2b3a5e;
    --warning: #e8b84b;
    --warning-bg: #332a14;
    --warning-border: #5a4a22;
    --danger: #ef6b61;
    --danger-bg: #3a1f1d;
    --danger-border: #5c2d29;
    --success: #5fcf8a;
    --success-bg: #17301f;
    --success-border: #24502f;
    --track: #2b313b;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.4;
}
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }

p {
  margin: 0 0 12px;
}
p:last-child {
  margin-bottom: 0;
}

.muted,
small,
.hint,
.help-text {
  color: var(--text-muted);
}
small,
.hint,
.help-text {
  font-size: 12px;
  line-height: 1.45;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

code, pre, kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 13px;
}
pre {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  overflow-x: auto;
}
code {
  background: var(--surface-muted);
  border-radius: 4px;
  padding: 1px 5px;
}
pre code {
  background: none;
  padding: 0;
}

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

/* Sprunglink nur bei Tastaturfokus sichtbar */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus {
  inset-inline-start: 8px;
  text-decoration: none;
}

/* ---------- Seitenleiste (aus dem Header) ---------- */
.app-header {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  bottom: 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 18px 12px 24px;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  overflow-y: auto;
  z-index: 20;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 30px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.app-brand:hover {
  text-decoration: none;
}
/* Logo-Kachel mit Dokument-Symbol */
.app-brand::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.app-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav li {
  margin: 0;
}
.app-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 16px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.4;
}
.app-nav a:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}
.app-nav a[aria-current],
.app-nav a.active,
.app-nav a.is-active,
.app-nav li.active > a {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 600;
}
/* Aktiv-Marke am linken Rand */
.app-nav a[aria-current]::before,
.app-nav a.active::before,
.app-nav a.is-active::before,
.app-nav li.active > a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
}
/* Hilfe mit etwas Abstand am Ende */
.app-nav a[href="/help"] {
  margin-top: 6px;
}
/* Zähler neben einem Menüpunkt (falls vorhanden) */
.app-nav .badge,
.app-nav .count {
  margin-inline-start: auto;
}

/* ---------- Kopfleiste (Werkzeuge aus dem Header) ---------- */
.app-header-tools {
  position: fixed;
  top: 0;
  inset-inline-start: var(--sidebar-width);
  inset-inline-end: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-block: 0 0;
  padding-inline: var(--content-padding) 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 19;
}

.theme-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-inline-end: 16px;
  border-inline-end: 1px solid var(--border);
}
.theme-select > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.theme-select select {
  height: 36px;
  min-width: 138px;
}

/* Benutzer mit Avatar-Kreis */
.app-header-tools > a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 500;
}
.app-header-tools > a:hover {
  text-decoration: none;
  color: var(--primary-dark);
}
.app-header-tools > a::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary-soft-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232449c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.inline-form {
  display: inline;
  margin: 0;
}
/* Abmelden bleibt weiß, obwohl es ein Absenden-Knopf ist */
.app-header-tools button,
.app-header-tools button[type="submit"],
.app-header-tools .button {
  height: 36px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.app-header-tools button:hover,
.app-header-tools button[type="submit"]:hover {
  background: var(--bg);
  border-color: var(--border-strong);
}

/* ---------- Inhalt ---------- */
.app-main {
  margin-inline-start: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 28px) var(--content-padding) 48px;
  max-width: calc(1160px + var(--sidebar-width));
}
.app-main.full-width {
  max-width: none;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 24px;
}
.page-header h1 {
  margin: 0;
}
.page-header p,
.page-header .subtitle,
.page-header .lead {
  margin: 4px 0 0;
  color: var(--text-muted);
  flex-basis: 100%;
}
.page-header .actions {
  margin: 0;
}

/* Hilfe zur Seite: Link oben rechts, aufgeklappt als Infokasten */
.page-help {
  float: inline-end;
  max-width: 480px;
  margin-block: 2px 16px;
  margin-inline: 24px 0;
}
.page-help summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  color: var(--primary);
  font-weight: 500;
  user-select: none;
}
.page-help summary::-webkit-details-marker {
  display: none;
}
.page-help summary:hover {
  text-decoration: underline;
}
.page-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.page-help[open] {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
}
.page-help[open] summary {
  margin-bottom: 10px;
}
.page-help p {
  color: var(--text-2);
  line-height: 1.55;
}
.page-help dl {
  margin: 12px 0 0;
}
.page-help dt {
  font-weight: 600;
  margin-top: 10px;
}
.page-help dd {
  margin: 4px 0 0;
  color: var(--text-2);
  line-height: 1.5;
}

/* Karten */
.card {
  clear: both;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 24px 28px;
  margin-bottom: 24px;
}
.card > h2,
.card > h3 {
  margin-bottom: 16px;
}
.card > h2 + p.muted,
.card > h3 + p.muted {
  margin-top: -10px;
  margin-bottom: 16px;
  font-size: 13px;
}
.card .card {
  box-shadow: none;
}

/* Infokasten */
.info,
.note,
.alert,
.flash,
.message {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 20px;
  color: var(--text-2);
  line-height: 1.55;
}
.alert.error,
.alert-error,
.flash.error,
.flash-error,
.message.error,
.errors {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
.alert.warning,
.alert-warning,
.flash.warning,
.flash-warning,
.message.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}
.alert.success,
.alert-success,
.flash.success,
.flash-success,
.message.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

/* Aktionszeilen */
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}
.actions:last-child {
  margin-bottom: 0;
}
.actions > strong {
  font-size: 15px;
  padding: 0 4px;
}

/* ---------- Schaltflächen ---------- */
button,
.button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--bg);
  text-decoration: none;
}

/* Hauptaktion: nur Knöpfe mit Klasse primary sind blau */
.button.primary,
.button-primary,
button.primary,
input[type="submit"].primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.button.primary:hover,
.button-primary:hover,
button.primary:hover,
input[type="submit"].primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Nebenaktionen bleiben weiß */
button.secondary,
.button.secondary,
.button-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
button.secondary:hover,
.button.secondary:hover,
.button-secondary:hover {
  background: var(--bg);
}

/* Gefährliche Aktion: roter Text ohne Rahmen */
button.danger,
.button.danger,
.button-danger,
button.delete,
.button.delete {
  background: transparent;
  border-color: transparent;
  color: var(--danger);
}
button.danger:hover,
.button.danger:hover,
.button-danger:hover,
button.delete:hover,
.button.delete:hover {
  background: var(--danger-bg);
}

/* Link-Schaltfläche */
button.link,
.button.link,
.button-link {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
  font-weight: 500;
  padding: 0 4px;
}
button.link:hover,
.button.link:hover,
.button-link:hover {
  text-decoration: underline;
  background: transparent;
}

button.small,
.button.small,
.button-small {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

button:disabled,
.button[aria-disabled="true"],
input[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Formulare ---------- */
form {
  margin: 0;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
label > span:first-child {
  font-size: 13px;
  font-weight: 500;
}
label + label,
.field + .field,
.form-row + .form-row {
  margin-top: 18px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  transition: border-color 0.12s, box-shadow 0.12s;
}
textarea {
  min-height: 76px;
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg);
  color: var(--text-muted);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.invalid input,
.invalid select,
.invalid textarea {
  border-color: var(--danger);
}

/* Auswahlfeld mit eigenem Pfeil */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626b79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
select[multiple] {
  background-image: none;
  padding-inline-end: 12px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
/* Ankreuzfelder: Text neben dem Kästchen */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
label.checkbox,
label.radio {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

input[type="file"] {
  font: inherit;
  font-size: 14px;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin: 0 0 20px;
}
legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 15px;
}

/* Hinweiszeile unter einem Feld */
label small,
label .hint,
.field small,
.field .hint {
  font-weight: 400;
}

/* Suchzeile und Filter: Felder nebeneinander */
.search-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.search-form label {
  flex: 1 1 200px;
  max-width: 320px;
}
.search-form label + label {
  margin-top: 0;
}
.search-form button,
.search-form .button {
  flex: none;
}

/* Zweispaltige Formularzeilen, falls genutzt */
.form-row,
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.form-row > label,
.fields > label {
  flex: 1 1 220px;
  margin-top: 0;
}

/* Fußzeile einer Formular-Karte */
.card > .form-actions,
.card > form > .form-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin: 24px -28px -24px;
  padding: 20px 28px;
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* ---------- Tabellen ---------- */
.table-wrap {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th,
td {
  padding: 10px 12px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
tbody tr:hover {
  background: var(--surface-muted);
}
tbody tr:last-child td {
  border-bottom: 0;
}
td.muted,
td .muted {
  color: var(--text-faint);
}
td.actions,
th.actions {
  text-align: end;
  white-space: nowrap;
}
td.actions {
  display: table-cell;
  margin: 0;
}

/* Kalender: ein Feld je Tag */
.table.calendar th {
  text-align: center;
  padding: 8px 4px;
}
.table.calendar td {
  width: 14.2857%;
  height: 96px;
  padding: 8px;
  border: 1px solid var(--border);
  vertical-align: top;
  background: var(--surface);
}
.table.calendar tbody tr:hover {
  background: transparent;
}
.table.calendar td.muted {
  background: var(--surface-muted);
}
.table.calendar td.muted .day-number {
  color: var(--text-faint);
}
.table.calendar td.today {
  background: var(--info-bg);
  box-shadow: inset 0 0 0 1px var(--primary-soft-2);
}
.day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.table.calendar td.today .day-number {
  background: var(--primary);
  color: #fff;
}
/* Einträge in einem Kalendertag */
.table.calendar td a,
.table.calendar td .entry,
.table.calendar td .frist {
  display: block;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table.calendar td a:hover {
  background: var(--primary-soft-2);
  text-decoration: none;
}
.table.calendar td ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Kleinteile ---------- */
.badge,
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.tag,
.chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-block: 0 0;
  padding-inline: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

/* Status-Markierungen */
.status,
.state {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.status.offen,
.status.open {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.status.erledigt,
.status.done {
  background: var(--success-bg);
  color: var(--success);
}
.status.entfallen,
.status.cancelled {
  background: var(--bg);
  color: var(--text-faint);
  text-decoration: line-through;
}
.status.ueberfaellig,
.status.overdue {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Fortschrittsbalken */
progress,
.progress {
  display: block;
  width: 160px;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
progress::-webkit-progress-bar {
  background: var(--track);
  border-radius: 3px;
}
progress::-webkit-progress-value,
.progress > span,
.progress > .bar {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
}
progress::-moz-progress-bar {
  background: var(--primary);
  border-radius: 3px;
}

/* Seitenweise Navigation */
.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.pagination .current,
.pagination [aria-current] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Definitionslisten als Datenblatt */
dl.details,
.card > dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 0;
}
dl.details dt,
.card > dl dt {
  color: var(--text-muted);
  font-weight: 500;
}
dl.details dd,
.card > dl dd {
  margin: 0;
}

/* Dokumentvorschau: grauer Hintergrund wie im Entwurf */
.document-view,
.viewer,
.preview {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.document-view iframe,
.viewer iframe,
.preview iframe,
.document-view img,
.viewer img,
.preview img {
  display: block;
  max-width: 100%;
  background: #fff;
  box-shadow: var(--shadow);
}

/* htmx: Ladezustand dezent anzeigen */
.htmx-request {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Dokument prüfen ---------- */
[hidden] {
  display: none !important;
}

/* Fortschritt rechts neben der Überschrift */
.page-header .progress-note {
  flex-basis: auto;
  margin-block: 0 6px;
  margin-inline: auto 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Zwei Karten nebeneinander: Dokument links, Formular rechts */
.split-view {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(360px, 1fr);
  gap: 20px;
  align-items: start;
}
.split-view > .card {
  margin-bottom: 0;
  min-width: 0;
}

/* Große Ansicht: Dokument über volle Breite */
.split-view.wide,
.split-view.wide-preview,
body.wide-preview .split-view,
.split-view:has(#wide-preview:checked) {
  grid-template-columns: 1fr;
}
.split-view:has(#wide-preview:checked) .document-preview iframe {
  height: 85vh;
}

/* Dokumentkarte: Kopfzeile, Anzeige, Fußzeile */
/* Kein overflow hidden: sonst friert Firefox die PDF-Anzeige ein */
.document-preview {
  padding: 0;
}
.document-preview > h2 {
  margin: 0;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-preview iframe {
  display: block;
  width: 100%;
  height: 836px;
  border: 0;
  background: var(--canvas);
}
/* Hinweis nur zeigen, wenn das Dokument im eigenen Fenster ist */
.document-preview .in-window {
  display: none;
  margin: 0;
  padding: 12px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.document-preview:has(iframe[hidden]) .in-window,
.document-preview:not(:has(iframe)) .in-window,
.document-preview.in-window-open .in-window {
  display: block;
}
.document-preview .in-window button.link {
  height: auto;
  font-size: 13px;
}
.preview-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.preview-actions > label + a {
  margin-inline-start: auto;
}
.preview-actions > a {
  font-weight: 500;
}
.preview-actions .info {
  flex-basis: 100%;
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
}

/* Suchfeld mit Lupe */
input[type="search"] {
  padding-inline-start: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.search-form .search-field {
  flex: 1 1 240px;
  max-width: none;
}
.search-form .search-field > span {
  position: absolute;
  inset-inline-start: -9999px;
}

/* Aktenwahl: Abschnitt mit Trennlinie, Akten als Chips */
fieldset {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0 0 12px;
  margin: 0 0 4px;
  min-width: 0;
}
legend {
  padding: 0;
  margin-bottom: 4px;
}
fieldset > p.muted {
  font-size: 13px;
  margin-bottom: 10px;
}
fieldset > p.muted + p.muted {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 500;
}
fieldset > label.checkbox {
  display: inline-flex;
  width: auto;
  height: 36px;
  padding-block: 0 0;
  padding-inline: 12px 16px;
  margin-block: 0 8px;
  margin-inline: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface);
  font-weight: 500;
}
fieldset > label.checkbox + label.checkbox {
  margin-top: 0;
}
fieldset > label.checkbox:hover {
  background: var(--bg);
}
fieldset > label.checkbox:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

/* Prüfformular: zwei Spalten, lange Felder über beide */
form.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
form.form > label + label,
form.form > label {
  margin-top: 0;
}
form.form > fieldset,
form.form > .actions,
form.form > label:has(textarea),
form.form > label:has([name="title"]),
form.form > label:has([name="subject"]) {
  grid-column: 1 / -1;
}
label > span.muted,
label > .hint {
  font-size: 12px;
  font-weight: 400;
}

/* Aktionsleiste unter dem Formular: zwei Zeilen, ein grauer Block */
.card > form.form > .actions,
.card > form.form + .actions {
  margin: 0 -28px 0;
  padding: 16px 20px;
  background: var(--surface-muted);
}
.card > form.form > .actions {
  margin-top: 6px;
  padding-bottom: 8px;
  border-top: 1px solid var(--border);
}
.card > form.form + .actions {
  margin-bottom: -24px;
  padding-top: 0;
  gap: 8px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.card > form.form > .actions .primary {
  flex: 1 1 auto;
  height: 44px;
}
.actions > .inline-form {
  display: inline-flex;
}
.card > form.form + .actions button {
  height: 36px;
  padding: 0 12px;
}
/* Papierkorb: roter Text, ganz rechts */
form[action*="/trash"] {
  margin-inline-start: auto;
}
form[action*="/trash"] button,
form[action*="/delete"] button {
  background: transparent;
  border-color: transparent;
  color: var(--danger);
}
form[action*="/trash"] button:hover,
form[action*="/delete"] button:hover {
  background: var(--danger-bg);
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 960px) {
  :root {
    --content-padding: 16px;
  }
  .app-header {
    position: static;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .app-brand {
    margin: 0;
    order: 1;
  }
  .app-header-tools {
    position: static;
    height: auto;
    order: 2;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    gap: 8px;
  }
  .theme-select > span {
    display: none;
  }
  .theme-select select {
    min-width: 0;
  }
  .app-header-tools > a::before {
    display: none;
  }
  .app-nav {
    order: 3;
    flex-basis: 100%;
  }
  .app-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .app-nav a {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 13px;
  }
  .app-nav a[href="/help"] {
    margin-top: 0;
  }
  .app-nav a[aria-current]::before,
  .app-nav a.active::before,
  .app-nav a.is-active::before,
  .app-nav li.active > a::before {
    display: none;
  }
  .app-main {
    margin-inline-start: 0;
    padding: 20px var(--content-padding) 40px;
    max-width: none;
  }
  .page-help {
    float: none;
    max-width: none;
    margin: 0 0 16px;
  }
  .card {
    padding: 18px 16px;
  }
  .form-actions {
    margin: 20px -16px -18px;
    padding: 16px;
  }
  .search-form label {
    max-width: none;
  }
  .table.calendar td {
    height: 64px;
    padding: 4px;
  }
  .page-header h1 {
    font-size: 22px;
  }
  .split-view {
    grid-template-columns: 1fr;
  }
  .document-preview iframe {
    height: 60vh;
  }
  form.form {
    grid-template-columns: 1fr;
  }
  .card > form.form > .actions,
  .card > form.form + .actions {
    margin-inline-start: -16px;
    margin-inline-end: -16px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
  .card > form.form + .actions {
    margin-bottom: -18px;
  }
}

@media (max-width: 560px) {
  .app-header-tools {
    flex-basis: 100%;
    margin-inline-start: 0;
    justify-content: space-between;
  }
  .table.calendar td {
    height: 48px;
  }
  .table.calendar td a {
    font-size: 0;
    height: 6px;
    padding: 0;
    border-radius: 3px;
  }
}

/* ---------- Druck ---------- */
@media print {
  .app-header,
  .app-header-tools,
  .page-help,
  .skip-link,
  .actions,
  .form-actions {
    display: none !important;
  }
  .app-main {
    margin: 0;
    padding: 0;
    max-width: none;
  }
  .card {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* ============================================================
   SANEXTA-Ergänzungen zu Monas Grundlage
   (Anmeldung, Logo/Dachmarke, aufklappbare Dokumentgruppen)
   ============================================================ */

/* Anmeldung: eine Spalte, schmale Karte in der Mitte.
   Markup: <section class="card auth"> mit einem gewoehnlichen <form> darin - die Klasse
   "form" waere Monas zweispaltiges Pruefformular. Ohne die Begrenzung laufen drei kurze
   Felder ueber die ganze Fensterbreite. Logische Eigenschaften, damit Arabisch gespiegelt
   stimmt. */
.card.auth {
  max-inline-size: 26rem;
  margin-inline: auto;
}
.card.auth form > button {
  inline-size: 100%;
  margin-block-start: 24px;
}

/* Marke: echtes Sanexta-Logo + Dachmarke "SANEXTA" vor dem Produktnamen.
   Markup:  <a class="app-brand"><img class="brand-logo" src="/static/logo.svg"
            alt="Sanexta"> <span class="brand-house">SANEXTA</span> DocSuite</a> */
.app-brand::before { display: none !important; }   /* Platzhalter-Icon aus */
.app-brand .brand-logo { width: 26px; height: 26px; flex: none; }
.app-brand .brand-house { letter-spacing: .06em; }

/* Dokument-Liste: gleiche Einträge als aufklappbare Gruppe mit Anzahl.
   Markup: eine Kopfzeile <tr class="group" aria-expanded="false"> mit
   <button class="group-toggle"><span class="tri"></span> Titel</button>
   <span class="badge">3</span> <span class="muted">gleiche</span>,
   darunter die Kopien als <tr class="dupe" hidden>. Toggle per <details>
   oder kleinem JS (aria-expanded umschalten, dupe-Zeilen .hidden). */
.group-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: auto; padding: 0; background: none; border: 0;
  color: var(--text); font: inherit; font-weight: 400; cursor: pointer;
}
.group-toggle:hover { background: none; }
.group-toggle .tri {
  display: inline-block; width: 0; height: 0;
  border-inline-start: 6px solid var(--text-muted);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .15s;
}
tr.group[aria-expanded="true"] .group-toggle .tri { transform: rotate(90deg); }
tr.dupe td { background: var(--surface-muted); }
tr.dupe td:first-child { padding-inline-start: 34px; }

/* ============================================================
   Modul Schleuse (Pseudonymisierung)
   Gehört langfristig ins Modul-Stylesheet; hier zur Vollständigkeit
   beigelegt. Markierungsfarben als halbtransparente Tönungen, damit
   sie in Hell und Dunkel lesbar bleiben (Text erbt die Theme-Farbe).
   ============================================================ */
.mark { border-radius: 4px; padding: 0 3px; color: var(--text); }
.mark sup { font-size: 9px; font-weight: 600; margin-inline-start: 2px; opacity: .75; }
.mark.person  { background: rgba(59,130,246,.22); }   /* Personennamen */
.mark.firma   { background: rgba(34,197,94,.26); }    /* Firmennamen  */
.mark.adresse { background: rgba(234,179,8,.30); }    /* Adressen     */
.mark.kennnummer { background: rgba(139,92,246,.24); }   /* Kennnummern   */
.mark.betrag     { background: rgba(20,184,166,.26); }   /* Geldbeträge   */
.mark.datum      { background: rgba(244,63,94,.20); }    /* Datumsangaben */

/* "Was ersetzt wird" — nach Wert/Kategorie gruppiert */
.repl { display: flex; flex-direction: column; gap: 2px; }
.repl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--border);
}
.repl-row:last-child { border-bottom: 0; }
.repl-row .val { font-weight: 600; }
.repl-row .meta { color: var(--text-muted); font-size: 13px; margin-inline-start: auto; white-space: nowrap; }

/* ============================================================
   Mehrsprachigkeit: Rechts-nach-links und Textdehnung
   (Ergänzung zu Monas Grundlage, 18.10.2026)

   Die Datei verwendet durchgängig logische Eigenschaften
   (margin-inline, inset-inline, text-align: start/end …); damit
   spiegelt das Layout bei dir="rtl" von selbst. Nur wofür CSS
   keine logische Form kennt, steht hier.
   ============================================================ */

/* Hintergrundbilder kennen keine logische Position. */
[dir="rtl"] select {
  background-position: left 12px center;
}
[dir="rtl"] .search-field input,
[dir="rtl"] input[type="search"] {
  background-position: right 12px center;
}
/* Das Dreieck zeigt bei RTL nach links; aufgeklappt muss es nach unten zeigen. */
[dir="rtl"] tr.group[aria-expanded="true"] .group-toggle .tri {
  transform: rotate(-90deg);
}

/* Textdehnung: Deutsch ist rund 30 % länger als Englisch, andere Sprachen mehr.
   Beschriftungen brechen um, statt abgeschnitten zu werden; die Höhe wächst mit. */
.button,
button,
input[type="submit"],
.app-nav a {
  white-space: normal;
  height: auto;
  min-height: 40px;
}
.app-nav a {
  min-height: 34px;
}
th {
  white-space: normal;
}
/* Ausnahme: eine Kalenderzelle kann nicht wachsen, dort bleibt es bei einer Zeile
   mit Auslassungszeichen (der volle Text steht im title-Attribut). */
.table.calendar td a {
  white-space: nowrap;
}

/* ============================================================
   Was die Anwendung zusätzlich braucht (18.10.2026)

   Keine Gestaltung, sondern Funktion: ohne diese Regeln wäre
   Text für Vorlesesoftware sichtbar, gespeicherte Zeilenumbrüche
   verschwänden und die Dokumentvorschau der Pseudonymisierung
   wäre unlesbar. Übernommen aus dem abgelösten Stylesheet,
   auf die Farben dieser Grundlage umgestellt.
   Gehören in die gemeinsame Grundlage, sobald Mona sie einarbeitet.
   ============================================================ */

/* Nur für Vorlesesoftware: sichtbar wäre es ein Fehler. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Gespeicherter Text behält seine Zeilenumbrüche. */
.pre-line {
  white-space: pre-line;
}

/* Listen ohne Aufzählungszeichen (Treffer, Kapitel, Zuordnungen). */
.plain-list,
.manual-toc,
.manual-hits,
.search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ablagefläche für Dateien; die Klasse "dragging" setzt das Skript. */
.dropzone {
  padding: 16px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
}
.dropzone.dragging {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
}

/* Dokumentvorschau der Pseudonymisierung: der Text steht, wie er im Dokument steht. */
.schleuse-text {
  max-height: 32rem;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
/* Die kleine Beschriftung an einer Markierung. */
.mark-label {
  margin-inline-start: 0.2em;
  color: var(--text-muted);
  font-size: 0.75em;
  vertical-align: super;
  white-space: nowrap;
}

/* Handbuch: der gerenderte Text braucht etwas Luft und lesbare Tabellen. */
.manual {
  line-height: 1.6;
}
.manual h1 {
  margin-block-start: 0;
}
.manual table {
  width: 100%;
  border-collapse: collapse;
}
.manual th,
.manual td {
  padding: 6px 12px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.manual code {
  padding-inline: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.manual-toc {
  display: grid;
  gap: 8px;
}

/* Treffer der Suche: die Fundstelle ist im Textausschnitt hervorgehoben. */
.snippet mark {
  padding-inline: 2px;
  border-radius: 2px;
}

/* Reiter innerhalb eines Eintrags oder Dokuments: eine Zeile Verweise, der aktuelle
   hervorgehoben. Jeder Reiter hat eine eigene Adresse, also sind es Verweise und keine
   Schaltflächen. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.tabs a {
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.tabs a:hover {
  color: var(--text);
  background: var(--surface-muted);
}
.tabs a[aria-current] {
  border-bottom-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 600;
}

/* Startseite: Kacheln, zwei Spalten und die Liste der letzten Arbeit.
   Uebernommen aus dem Vorschau-Entwurf (startseite.html, 18.10.2026). */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tile .num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tile .lbl {
  color: var(--text-muted);
  font-size: 13px;
}
.tile a {
  font-size: 13px;
  margin-block-start: 6px;
}
.tile.alert-overdue {
  border-color: var(--danger-border);
}
.tile.alert-overdue .num {
  color: var(--danger);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.two-col > .card {
  margin-bottom: 0;
}
.recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.recent li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
}
.recent li:last-child {
  border-bottom: 0;
}
.recent .meta {
  color: var(--text-muted);
  font-size: 13px;
}
@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* Arabisch: die arabische Schrift zuerst, Inter traegt weiterhin Ziffern und
   lateinische Woerter (Aktennummern, Dateinamen). */
:root[lang="ar"] {
  --font: "Noto Sans Arabic", Inter, "Segoe UI", system-ui, sans-serif;
}