/* ============================================================
   Tresor — Design-Tokens
   ============================================================ */
:root {
  --ink: #10131a;
  --ink-soft: #171b24;
  --ink-elevated: #1e232f;
  --line: #2a3040;
  --paper: #edeff3;
  --muted: #8891a3;
  --amber: #e8a33d;
  --amber-strong: #f3b85c;
  --teal: #3fa796;
  --red: #e5484d;

  --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 10px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow-x: hidden; /* Sicherheitsnetz: verhindert seitliches Scrollen
                          der gesamten Seite, falls einzelne Elemente
                          doch mal breiter werden als der Bildschirm */
}

body {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Hintergrundbild als eigenes, fixiertes Element: dadurch orientiert sich
   die Größe immer am sichtbaren Bildschirm (Viewport) statt an der
   tatsächlichen Höhe der jeweiligen Seite. Auf langen Seiten (z.B. das
   Dashboard nach dem Login) verhindert das ein verzerrtes/zu stark
   herangezoomtes Bild. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('hintergrund.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}


a { color: var(--amber-strong); }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.mono { font-family: var(--font-mono); }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--amber-strong); }
.brand-mark { display: inline-flex; color: var(--amber-strong); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 1rem;
}

/* ============================================================
   Zentrierte Karten (Login / Download)
   ============================================================ */
.page-center {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.2rem 2rem;
  text-align: center;
}

.seal { display: flex; justify-content: center; margin-bottom: 0.8rem; color: var(--teal); }

.auth-card h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.4rem 0 0.2rem;
  word-break: break-word;
}

.auth-card > p.muted { margin-top: 0; margin-bottom: 1.4rem; }

.footnote {
  margin-top: 1.6rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* ============================================================
   Formulare
   ============================================================ */
form { text-align: left; }

label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1rem 0 0.35rem;
}

input[type="text"],
input[type="password"],
select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--paper);
  font-size: 0.95rem;
  font-family: var(--font-mono);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, button:focus-visible, .dropzone:focus-visible {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(232,163,61,0.25);
}

input:disabled, select:disabled { opacity: 0.5; }

.pw-row { display: flex; gap: 0.5rem; }
.pw-row input { flex: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  width: 100%;
  margin-top: 1.4rem;
  background: var(--amber);
  color: #1a1400;
}
.btn-primary:hover:not(:disabled) { background: var(--amber-strong); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-strong); }

.btn-danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
}
.btn-danger:hover { background: rgba(229,72,77,0.12); }

.btn-sm { padding: 0.42rem 0.7rem; font-size: 0.8rem; }

.link-inline { color: var(--amber-strong); text-decoration: underline; cursor: pointer; }

/* ---------- Alerts ---------- */
.alert {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.88rem;
  text-align: left;
}
.alert-danger { background: rgba(229,72,77,0.12); border: 1px solid rgba(229,72,77,0.4); color: #ffb3b5; }
.alert-success { background: rgba(63,167,150,0.14); border: 1px solid rgba(63,167,150,0.4); color: #a9e8dd; }

/* ============================================================
   Splitflap-Countdown (Signatur-Element)
   ============================================================ */
.countdown-block { margin: 1.2rem 0; }
.flap-row { display: flex; justify-content: center; gap: 0.7rem; }
.flap-group { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }

.flap-digits {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  min-width: 3ch;
  text-align: center;
  color: var(--amber-strong);
  transition: color 0.2s ease;
}
.flap-digits.tick { animation: flap 0.35s ease; }
@keyframes flap {
  0% { opacity: 0.35; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.flap-digits.urgent { color: var(--red); }

.flap-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .flap-digits.tick { animation: none; }
}

/* Kompakte Variante in Tabellen */
td.countdown { font-weight: 600; }
td.countdown.urgent { color: var(--red); }

/* ============================================================
   Dashboard-Layout
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--ink-soft);
  flex-wrap: wrap;
  gap: 0.6rem;
}
.topbar-right { display: flex; align-items: center; gap: 0.9rem; min-width: 0; flex-wrap: wrap; }

.dashboard {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.6rem;
  display: grid;
  /* minmax(0, 1fr) statt 1fr: Grid-Spalten dürfen ohne das kleiner werden
     als ihr breitester Inhalt (implizites min-width: auto bei Grid-Items).
     Ohne dieses "0" zwingt z.B. die breite, nicht umbrechende
     Freigaben-Tabelle die ganze Seite zu horizontalem Scrollen auf
     schmalen/mobilen Bildschirmen. */
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .dashboard { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-width: 0; /* siehe Kommentar oben bei .dashboard */
}

.panel h1 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}

/* ---------- Dropzone ---------- */
.dropzone {
  margin-top: 1rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1rem;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone svg { color: var(--amber-strong); }
.dropzone:hover, .dropzone.dragover {
  border-color: var(--amber);
  background: rgba(232,163,61,0.06);
}
.dz-text { margin: 0.6rem 0 0.2rem; color: var(--paper); }

.progress {
  margin-top: 0.9rem;
  height: 6px;
  border-radius: 4px;
  background: var(--ink);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--amber);
  transition: width 0.15s ease;
}

/* ---------- Tabelle ---------- */
.table-wrap { overflow-x: auto; margin-top: 1rem; }

.manifest {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.manifest th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.manifest td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}
.manifest td.fname {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manifest tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .auth-card { padding: 1.6rem 1.3rem; }
  .flap-digits { font-size: 1.5rem; padding: 0.25rem 0.4rem; }
  .flap-row { gap: 0.4rem; }
}