/* ── Belegsammler DMS · Apple-inspired Design ─────────────────── */

:root {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --ok: #34c759;
  --warn: #ff9f0a;
  --err: #ff3b30;
  --border: rgba(0, 0, 0, .08);
  --hairline: rgba(0, 0, 0, .06);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --panel: #1c1c1e;
    --text: #f5f5f7;
    --muted: #98989d;
    --accent: #2997ff;
    --accent-hover: #40a9ff;
    --ok: #30d158;
    --warn: #ffd60a;
    --err: #ff453a;
    --border: rgba(255, 255, 255, .12);
    --hairline: rgba(255, 255, 255, .08);
  }
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.47;
}

h1, h2 { letter-spacing: -.02em; }

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

/* ── Header ───────────────────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px max(24px, calc(50vw - 550px));
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

header h1 { margin: 0; font-size: 17px; font-weight: 600; }
header h1 .muted { color: var(--muted); font-weight: 400; }

.header-right { display: flex; gap: 8px; align-items: center; }

.logout-btn {
  color: var(--text); text-decoration: none; font-size: 13px;
  padding: 6px 14px; border-radius: 980px;
  border: 1px solid var(--border);
  transition: background .15s ease;
}
.logout-btn:hover { background: var(--bg); }

/* ── Badges ───────────────────────────────────────────────────── */

.badge {
  padding: 4px 11px; border-radius: 980px;
  font-size: 12px; font-weight: 500;
}
.badge.idle   { background: rgba(0,113,227,.10); color: var(--accent); }
.badge.running{ background: rgba(255,159,10,.14); color: #b25000; animation: pulse 1.2s infinite; }
.badge.ok     { background: rgba(52,199,89,.12); color: #1d8a41; }
.badge.err    { background: rgba(255,59,48,.12); color: var(--err); }
.badge.warn   { background: rgba(255,159,10,.14); color: #b25000; }

@keyframes pulse { 50% { opacity: .5; } }

/* ── Layout ───────────────────────────────────────────────────── */

main {
  max-width: 1100px;
  margin: 26px auto;
  padding: 0 20px;
  display: grid;
  gap: 20px;
}

.panel {
  background: var(--panel);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04), 0 0 1px rgba(0, 0, 0, .06);
}

.panel h2 { margin: 0 0 16px; font-size: 19px; font-weight: 600; }
.panel h2 .muted { font-weight: 400; font-size: 15px; }

/* ── Controls ─────────────────────────────────────────────────── */

.controls {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 18px;
}
.controls label {
  display: flex; gap: 7px; align-items: center;
  font-size: 13.5px; color: var(--text);
}
.controls input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 34px; height: 21px; border-radius: 980px;
  background: rgba(120,120,128,.32); position: relative; cursor: pointer;
  transition: background .2s ease; flex-shrink: 0; margin: 0;
}
.controls input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease;
}
.controls input[type="checkbox"]:checked { background: var(--ok); }
.controls input[type="checkbox"]:checked::after { transform: translateX(13px); }

button, .button {
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: 980px;
  border: 1px solid transparent; background: var(--bg);
  color: var(--text); cursor: pointer; text-decoration: none;
  display: inline-block; transition: all .15s ease;
}
button.primary {
  background: var(--accent); color: #fff; padding: 10px 22px; font-weight: 600;
}
button.primary:hover { background: var(--accent-hover); }
button:hover:not(:disabled):not(.primary) { filter: brightness(.97); }
button:disabled { opacity: .4; cursor: default; }

/* ── Log-Konsole ──────────────────────────────────────────────── */

#log {
  margin-top: 16px; max-height: 280px; overflow-y: auto;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}

/* ── Suche & Tabelle ──────────────────────────────────────────── */

#search {
  width: 100%; max-width: 340px; padding: 9px 14px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 12px;
  font: inherit; background: var(--bg); color: var(--text);
}
#search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 8px 12px; color: var(--muted);
  font-weight: 500; font-size: 12px; text-transform: none;
  border-bottom: 1px solid var(--hairline);
}
td { padding: 12px; border-bottom: 1px solid var(--hairline); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--bg); }
td.actions { white-space: nowrap; }
td.actions a, td.actions button {
  padding: 5px 13px; font-size: 13px; margin-right: 6px;
}

.btn-danger { color: var(--err); }
.btn-danger:hover { background: rgba(255,59,48,.09); }

/* ── PDF-Viewer ───────────────────────────────────────────────── */

#viewer-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
#viewer-overlay[hidden] { display: none; }

#viewer {
  width: min(980px, 94vw); height: min(90vh, 920px);
  background: var(--panel); border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
#viewer-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline);
}
#viewer-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewer-frame { flex: 1; border: 0; width: 100%; }

/* ── Auth-Seiten ──────────────────────────────────────────────── */

body.auth-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: 20px;
}
.auth-card {
  background: var(--panel); border-radius: 20px;
  padding: 38px 42px; width: min(420px, 94vw);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .1);
}
.auth-card .logo { font-size: 34px; margin-bottom: 10px; }
.auth-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.auth-card p.sub { margin: 0 0 26px; color: var(--muted); font-size: 14px; }
.auth-card label {
  display: block; font-size: 13px; font-weight: 500; margin: 16px 0 6px;
}
.auth-card input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 12px; font: inherit; background: var(--panel); color: var(--text);
}
.auth-card input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.auth-card button {
  width: 100%; margin-top: 24px; padding: 12px;
  background: var(--accent); color: #fff; border: 0; border-radius: 12px;
  cursor: pointer; font-size: 15px; font-weight: 600;
}
.auth-card button:hover { background: var(--accent-hover); }
.error {
  background: rgba(255,59,48,.10); color: var(--err);
  padding: 10px 13px; border-radius: 10px; font-size: 13px; margin-top: 16px;
}
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

altcha-widget { --altcha-max-width: 100%; margin-top: 16px; }