/* =========================================
   FORMULARE – Stand 2 Design / Neutral Grau
   ========================================= */


.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.stats-table th,
.stats-table td {
  padding: 2px 4px;
  border-bottom: 1px solid #eee;
}

.stats-table td.align-right {
  text-align: right;
}

.stats-table th {
  text-align: left;
  color: #333;
}

/* ---------- Grundstruktur ---------- */
.feedback-form,
.login-form {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.feedback-form label,
.login-form label {
  font-size:12px;
  font-weight:bold;
  color:#333;
}

.topuser-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.topuser-table td {
  padding: 3px 4px;
  border-bottom: 1px solid #eee;
}

.topuser-table td.align-right {
  text-align: right;
  color: #333;
  font-weight: bold;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.status-dot.online { background-color: #00c200; }  /* grün */
.status-dot.offline { background-color: #cc0000; } /* rot */

/* ---------- Eingabefelder ---------- */
.feedback-form input,
.feedback-form select,
.feedback-form textarea,
.login-form input[type="text"],
.login-form input[type="password"],
.login-form select,
.login-form textarea {
  padding:8px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  font-size:12px;
  font-family:Verdana,Arial,sans-serif;
  color:#333;
  box-sizing:border-box;
}

/* ---------- Textarea ---------- */
.feedback-form textarea,
.login-form textarea {
  resize:vertical;
  min-height:80px;
}

/* ---------- Buttons ---------- */
.feedback-form .btn,
.login-form input[type="submit"],
button.btn {
  background:#f2f2f2;
  color:#333;
  border:1px solid #ccc;
  border-radius:6px;
  padding:8px 15px;
  font-weight:bold;
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
  font-family:Verdana,Arial,sans-serif;
  font-size:12px;
}

.feedback-form .btn:hover,
.login-form input[type="submit"]:hover,
button.btn:hover {
  background:#e4e4e4;
  border-color:#bbb;
}

/* ---------- Captcha ---------- */
.captcha-row {
  display:flex;
  align-items:center;
  gap:8px;
}

.captcha-img {
  border:1px solid #ccc;
  border-radius:6px;
  height:38px;
}

/* ---------- Meldungen ---------- */
.alert.success,
.alert.error {
  padding:8px 10px;
  border-radius:6px;
  font-size:12px;
  margin-bottom:10px;
  line-height:1.4;
}

.alert.success {
  background:#f8f8f8;
  border:1px solid #ccc;
  color:#333;
}

.alert.error {
  background:#fff0f0;
  border:1px solid #cc9999;
  color:#333;
}

/* ---------- Benutzerwarnungen (im User-Menü) ---------- */
.user-alert {
  background:#c00;
  color:#fff;
  padding:6px 10px;
  border-radius:5px;
  margin:8px 0;
  font-size:12px;
}
.user-alert a {
  color:#fff;
  text-decoration:none;
  display:block;
}
.user-alert a:hover {
  text-decoration:underline;
}

/* ---------- Links unter Formularen ---------- */
.form-links {
  margin-top:6px;
  text-align:left;
  font-size:10px;
}
.form-links a {
  color:#333;
  text-decoration:none;
}
.form-links a:hover {
  text-decoration:underline;
}

/* =====================================================
   ============  Admin-Tabellen / Updates  ==============
   ===================================================== */
.admin-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.admin-table th {
  background:#f6f6f6;
  border-bottom:2px solid #ccc;
  padding:6px 8px;
  text-align:left;
  font-weight:bold;
}

.admin-table td {
  border-bottom:1px solid #ddd;
  padding:6px 8px;
  vertical-align:top;
}

.admin-table tr.row1 {background:#fff;}
.admin-table tr.row2 {background:#fafafa;}

.admin-table select,
.admin-table textarea {
  width:100%;
  border:1px solid #ccc;
  border-radius:5px;
  padding:4px;
  font-size:11px;
  font-family:Verdana,Arial,sans-serif;
  box-sizing:border-box;
}

.admin-table textarea {
  resize:vertical;
  min-height:40px;
}

.admin-table .btn {
  background:#f2f2f2;
  border:1px solid #ccc;
  border-radius:6px;
  padding:4px 10px;
  font-weight:bold;
  cursor:pointer;
  font-size:11px;
  transition:background 0.2s,border-color 0.2s;
}

.admin-table .btn:hover {
  background:#e4e4e4;
  border-color:#bbb;
}

/* =====================================================
   ====== Status-Tags für Fehler & Updates ============
   ===================================================== */
.status-tag {
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:bold;
  color:#fff;
  text-transform:capitalize;
}

.status-tag.open {
  background:#777;
}

.status-tag.progress {
  background:#d0a200;
}

.status-tag.done {
  background:#4caf50;
}

.status-tag.rejected {
  background:#c00;
}
.msg-table th, .msg-table td {
  text-align: left;
  vertical-align: top;
}
.success { background:#e0ffe0; border:1px solid #0a0; padding:6px; margin:5px 0; }
.error   { background:#ffe0e0; border:1px solid #a00; padding:6px; margin:5px 0; }

.settings-nav {
  margin-bottom:15px;
  font-size:13px;
}
.settings-nav a {
  color:#333;
  text-decoration:none;
  padding:3px 6px;
}
.settings-nav a.active {
  font-weight:bold;
  text-decoration:underline;
}

.msg {
  padding:8px 10px;
  margin-bottom:10px;
  border-radius:6px;
  font-size:13px;
}
.msg.success {
  background:#e1f0e1;
  border:1px solid #6c6;
}
.msg.error {
  background:#f6e2e2;
  border:1px solid #c66;
}

.settings-form label {
  display:block;
  margin-top:8px;
  font-weight:600;
}
.settings-form input[type=text],
.settings-form input[type=password],
.settings-form input[type=date],
.settings-form select,
.settings-form textarea {
  width:100%;
  box-sizing:border-box;
  padding:7px;
  border:1px solid #aaa;
  border-radius:6px;
  box-shadow:2px 2px 8px rgba(0,0,0,0.1);
  font-family:Verdana,Arial,sans-serif;
  font-size:13px;
}

.btn-save {
  background:#eee;
  color:#333;
  border:1px solid #ccc;
  padding:8px 20px;
  border-radius:6px;
  cursor:pointer;
  margin-top:12px;
  font-weight:600;
}
.btn-save:hover {
  background:#ddd;
}

/* =====================================================
   ===============  Mitgliederliste (modern) ============
   ===================================================== */
.userlist-table-modern {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  color:#333;
  margin-top:6px;
  table-layout:fixed;
}

.userlist-table-modern th,
.userlist-table-modern td {
  padding:8px 10px;
  border-bottom:1px solid #eee;
  text-align:left;
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- Fein abgestimmte Spaltenbreite ---------- */
/* Gesamt = 100 % */
.userlist-table-modern th:nth-child(1),
.userlist-table-modern td:nth-child(1) { width:9%; }   /* ID (#) breiter ? */
.userlist-table-modern th:nth-child(2),
.userlist-table-modern td:nth-child(2) { width:27%; }  /* Benutzername */
.userlist-table-modern th:nth-child(3),
.userlist-table-modern td:nth-child(3) { width:10%; }  /* Status */
.userlist-table-modern th:nth-child(4),
.userlist-table-modern td:nth-child(4) { width:17%; }  /* Geschlecht */
.userlist-table-modern th:nth-child(5),
.userlist-table-modern td:nth-child(5) { width:17%; }  /* Punkte */
.userlist-table-modern th:nth-child(6),
.userlist-table-modern td:nth-child(6) { width:20%; }  /* Profil Views */

/* ---------- Kopfzeile ---------- */
.userlist-table-modern th {
  background:#f8f8f8;
  font-weight:bold;
  font-size:12px;
  white-space:nowrap;
}

.userlist-table-modern th a {
  color:#333;
  text-decoration:none;
}

.userlist-table-modern th a:hover {
  text-decoration:underline;
}

/* ---------- Zeilenfarben ---------- */
.userlist-table-modern tr.row1 { background:#fff; }
.userlist-table-modern tr.row2 { background:#fafafa; }

/* ---------- Online / Offline Punkt ---------- */
.status-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  vertical-align:middle;
  margin-right:4px;
}
.status-dot.online  { background:#00c000; }
.status-dot.offline { background:#cc0000; }