/* ===== Base ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #0b1220;
  color: #e5e7eb;
}

/* ===== Layout ===== */
.wrap {
  max-width: 900px;          /* Dashboard braucht Breite */
  margin: 60px auto;
  padding: 20px;
}

.card {
  background: #111a2e;
  border: 1px solid #1f2a44;
  border-radius: 12px;
  padding: 18px;
}

/* ===== Typography ===== */
h1 {
  font-size: 20px;
  margin: 0 0 14px;
}

label {
  display: block;
  font-size: 13px;
  margin: 10px 0 6px;
  color: #cbd5e1;
}

.small {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 10px;
}

/* ===== Form ===== */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #273455;
  background: #0b1220;
  color: #e5e7eb;
  outline: none;
}

textarea { min-height: 90px; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
  border-color: #3b82f6;
}

/* ===== Row / Spacing ===== */
.row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.row-between { justify-content: space-between; }

.mt-14 { margin-top: 14px; }

/* ===== Button ===== */
.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}

.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.btn-secondary { background: #334155; }

/* Breitenhelfer für Dashboard Buttons */
.max-200 { max-width: 200px; width: 100%; }
.max-120 { max-width: 120px; width: 100%; }

/* ===== Error ===== */
.err {
  background: #3b1d1d;
  border: 1px solid #7f1d1d;
  color: #fecaca;
  padding: 10px;
  border-radius: 10px;
  margin: 12px 0;
}

/* ===== Table ===== */
.table {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid #1f2a44;
  border-radius: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px; /* verhindert kaputtes Stauchen */
}

th, td {
  border-bottom: 1px solid #1f2a44;
  padding: 10px 10px;
  text-align: left;
  color: #e5e7eb;
  white-space: nowrap;
}

th {
  color: #cbd5e1;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.35);
}

tbody tr:hover td {
  background: rgba(59, 130, 246, 0.08);
}

/* ===== Responsive ===== */
@media (max-width: 520px) {
  .wrap { margin: 24px auto; padding: 14px; }
  .card { padding: 14px; }
  .row-between { flex-direction: column; align-items: stretch; }
  .max-200, .max-120 { max-width: none; }
}

/* ==== kein Plan wo die hinkommen ==== */
.w-100 {width: 100%; }
.label-inline { margin: 0; }

/* ===== Dashboard Filter ===== */
.filters { margin-top: 12px; }
.filters-row { align-items: flex-end; flex-wrap: wrap; }
.filters-col { min-width: 180px; flex: 1; }
.filters-per { min-width: 120px; flex: 0 0 140px; }
.filters-actions { display: flex; gap: 10px; }

@media (max-width: 520px) {
  .filters-col, .filters-per { min-width: 100%; flex: 1 1 100%; }
  .filters-actions { width: 100%; }
  .filters-actions .btn { width: 100%; }
}


/* ==== logout InlineFrame ==== */
.inline-form { margin: 0; }
.inline-form button { width: 100%; }

/* ===== Small Button ===== */
.btn-sm {
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 10px;
  margin-top: 0;
}

.btn-danger {
  background: #b91c1c;
}

.table-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ===== Pagination ===== */
.pager {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pager-pages {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.pager-link,
.pager-current,
.pager-disabled {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid #1f2a44;
  background: #0b1220;
  color: #cbd5e1;
  font-size: 12px;
  text-decoration: none;
  user-select: none;
}

.pager-link:hover { filter: brightness(1.05); }

.pager-current {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
  font-weight: 700;
}

.pager-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pager-dots { color: #94a3b8; padding: 0 4px; }

.inline-form { margin: 0; }
.inline-form button { width: auto; }

/* ===== Admin Log Viewer (kompakt) ===== */
.log-pre {
  background: #0b1220;
  border: 1px solid #1f2a44;
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  line-height: 1.35;
  overflow-y: auto;
  max-height: 50vh;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Log-Zeilen etwas enger */
.log-pre br {
  line-height: 1.25;
}

/* ===== Log Filter Pills ===== */
.log-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #1f2a44;
  background: #0b1220;
  color: #cbd5e1;
  font-size: 12px;
  text-decoration: none;
}

.pill-active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

/* ===== Footer ===== */
.site-footer {
  max-width: 900px;
  margin: 18px auto 30px;
  padding: 12px 10px;
  border-top: 1px solid #1f2a44;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

/* ===== Buttons: überall gleich groß + gleiche Schrift ===== */
.btn,
a.btn,
button.btn,
input.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;              /* Einheitliche Höhe */
  padding: 0 14px;           /* Einheitliches Innenmaß */
  font-size: 14px;           /* Einheitliche Schriftgröße */
  font-weight: 600;          /* Einheitliche Stärke */
  line-height: 1;            /* Verhindert Höhen-Schwankungen */
  letter-spacing: 0;         /* Kein Drift */
  white-space: nowrap;

  border-radius: 10px;
  box-sizing: border-box;
}

/* Wenn du überall exakt gleiche Breite willst */
.btn {
  min-width: 120px;
}

/* Optional: kleinere Buttons, z.B. in Tabellen */
.btn.btn-sm,
.btn-sm {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  min-width: 90px;
}

/* Optional: große Buttons */
.btn.btn-lg,
.btn-lg {
  height: 46px;
  padding: 0 18px;
  font-size: 15px;
  min-width: 160px;
}

/* Falls einzelne alte Klassen noch reinfunken */
.btn.max-120 { min-width: 120px; max-width: none; }
.btn.max-200 { min-width: 200px; max-width: none; }