/* Design wie BachOS (frontend/tailwind.config.js dort): Blau als einzige Markenfarbe, kein Gold/Orange. */
:root {
  --brand-050: #F2F7FB;
  --brand-50: #E3F0F9;
  --brand-500: #0D80C6;
  --brand-700: #0A5C9A;
  --neutral-50: #F2F7FB;
  --neutral-100: #E8EFF5;
  --neutral-200: #DDE6EE;
  --neutral-500: #5D6873;
  --neutral-700: #46525D;
  --neutral-950: #25303A;
  --success: #18794E;
  --warning: #9A5B00;
  --danger: #B42318;
  --radius-card: 14px;
  --radius-control: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: var(--neutral-950);
  background: var(--neutral-50);
  line-height: 1.45;
}
a { color: var(--brand-500); }
a:hover { color: var(--brand-700); }
::selection { background: var(--brand-50); }
:where(a, button, summary):focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

header {
  background: #fff;
  border-bottom: 1px solid var(--neutral-200);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
header .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
header .brand img { height: 32px; width: auto; }
header .brand .title { font-size: 18px; font-weight: 600; color: var(--brand-700); }
header .brand .sub { font-size: 14px; color: var(--neutral-700); }
header nav { margin-left: auto; display: flex; gap: 12px; align-items: center; }
header form { margin: 0; }
@media (max-width: 600px) {
  header { padding: 8px 16px; }
  header .brand img, header .brand .sub { display: none; }
}

main { max-width: 1600px; margin: 0 auto; padding: 24px; }
@media (max-width: 767px) { main { padding: 16px; } }
h1 { font-size: 22px; font-weight: 600; margin: 4px 0 16px; color: var(--neutral-950); }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; color: var(--neutral-950); }
.crumb { color: var(--neutral-500); font-size: 13px; margin: 0; }

.card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 16px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; color: var(--neutral-700); margin: 8px 0 4px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--neutral-950);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgb(13 128 198 / 0.18);
}
textarea { min-height: 120px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 160px; }
.row > .shrink { flex: 0 0 auto; }

/* Primär: blau gefüllt. ghost: weiß mit grauem Rand wie die Nebenknöpfe in BachOS. */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-control);
  background: var(--brand-500);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .btn:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
button.ghost, .btn.ghost { background: #fff; color: var(--neutral-700); border-color: var(--neutral-200); }
button.ghost:hover, .btn.ghost:hover { background: var(--brand-050); color: var(--brand-700); border-color: var(--neutral-200); }
button.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: #FEF3F2; color: var(--danger); }
button.small, .btn.small { padding: 4px 9px; font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
form.inline { display: inline; }

@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }   /* sonst zoomt Safari */
  input, select { min-height: 44px; }
  button, .btn { min-height: 44px; }
}

.flash {
  background: var(--brand-050);
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-card);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.error { color: var(--danger); }
.muted { color: var(--neutral-500); font-size: 13px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--neutral-200); vertical-align: top; }
th { font-size: 12px; font-weight: 500; color: var(--neutral-500); }
td.num, th.num { text-align: right; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-700);
}
.badge.ok, .badge.done { background: #E7F4EE; color: var(--success); }
.badge.warn, .badge.cancelled { background: #FDF3E3; color: var(--warning); }
.badge.fail, .badge.failed { background: #FEF3F2; color: var(--danger); }
.badge.running, .badge.queued { background: var(--brand-50); color: var(--brand-700); }

/* Handy: Status-Tabelle als Karten, eine pro Postfach. */
@media (max-width: 767px) {
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { border: 1px solid var(--neutral-200); border-radius: var(--radius-card); padding: 8px 12px; margin-bottom: 12px; }
  table.cards td { border: 0; padding: 4px 0; text-align: left; }
  table.cards td.num { text-align: left; }
  table.cards td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--neutral-500);
  }
  table.cards td[data-label="Postfach"] { font-weight: 500; }
}

progress { width: 140px; height: 8px; accent-color: var(--brand-500); vertical-align: middle; }

pre.log {
  background: var(--neutral-950);
  color: #E8EFF5;
  padding: 12px;
  border-radius: var(--radius-control);
  max-height: 70vh;
  overflow: auto;
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-all;
}

.login { max-width: 380px; margin: 48px auto; }
.login .logo { display: block; width: 180px; height: auto; margin: 0 auto 16px; }
details summary { cursor: pointer; color: var(--brand-500); }