/* CSS für die Meeting-Hinweise */

#meetings-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(138,106,161,0.08), 0 1.5px 4px rgba(0,0,0,0.04);
  font-family: inherit;
}

.meeting-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.meeting-card, .modern-meeting-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(138,106,161,0.07), 0 1.5px 4px rgba(0,0,0,0.04);
  border: 1.5px solid #e6e0f0;
  margin-bottom: 32px;
  padding: 24px 28px 18px 28px;
  transition: box-shadow 0.2s;
  font-family: inherit;
}
.meeting-card:hover, .modern-meeting-card:hover {
  box-shadow: 0 6px 24px rgba(138,106,161,0.13), 0 2px 8px rgba(0,0,0,0.07);
}

.meeting-header, .modern-meeting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: inherit;
}
.meeting-header h3, .modern-meeting-title {
  color: #4a3f5a;
  font-size: 1.25em;
  margin: 0;
  font-weight: 700;
  font-family: inherit;
}

.meeting-status {
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.95em;
  text-transform: uppercase;
  background: #f3eaff;
  color: #8A6AA1;
  border: 1px solid #e6e0f0;
  font-family: inherit;
}
.meeting-status.running {
  background: #eafff3;
  color: #1fa97c;
  border-color: #b6f5d6;
}
.meeting-status.ended {
  background: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.meeting-body, .modern-meeting-body {
  margin-bottom: 14px;
  color: #4a3f5a;
  font-size: 1.08em;
  font-family: inherit;
}

.guthaben-hinweis, .coach-info {
  background: rgba(249, 247, 253, var(--mc-hint-alpha, 0.40));
  border-left: 4px solid #8A6AA1;
  padding: 12px 16px;
  border-radius: 7px;
  margin: 10px 0 0 0;
  color: #4a3f5a;
  font-size: 1em;
  font-family: inherit;
}
.coach-info {
  background: rgba(234, 247, 255, var(--mc-hint-alpha, 0.40));
  border-left-color: #1fa9e1;
}

.meeting-actions, .modern-meeting-actions {
  margin-top: 18px;
  display: flex;
  gap: 16px;
  font-family: inherit;
}

.meeting-button,
.button,
.start-meeting-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--mc-button-padding, 10px 30px 10px 30px);
  border-radius: var(--mc-button-radius, 70px);
  background-color: var(--mc-button-bg, #f9f6a9);
  border: 1px solid var(--mc-button-border-color, rgba(116,112,82,.45));
  color: var(--mc-button-color, #323232);
  font-weight: 600;
  font-size: 1.05em;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
  box-shadow: var(--mc-button-shadow, none);
  outline: none;
  font-family: inherit;
}
.meeting-button:hover,
.button:hover,
.start-meeting-btn:hover {
  background: var(--mc-button-hover-gradient, linear-gradient(120deg, #3fb2ff 0%, #8f5cfe 100%));
  color: var(--mc-button-text-hover, #ffffff);
  border-color: transparent;
  box-shadow: var(--mc-button-shadow-hover, none);
  text-decoration: none;
  transform: translateY(-1px);
}
.meeting-button:focus-visible,
.button:focus-visible,
.start-meeting-btn:focus-visible {
  outline: var(--mc-focus-outline, 2px solid #0d6efd);
  outline-offset: 2px;
  box-shadow:
    var(--mc-button-shadow-hover, none),
    var(--mc-focus-ring, 0 0 0 3px rgba(13,110,253,.35));
}
.meeting-button.disabled,
.button.disabled,
.start-meeting-btn.disabled {
  background-color: rgba(0,0,0,.08);
  color: rgba(50,50,50,.45);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
  transform: none;
}

/* Responsive */
@media (max-width: 700px) {
  #meetings-container {
    padding: 10px 2vw;
  }
  .meeting-card, .modern-meeting-card {
    padding: 14px 8px 10px 8px;
  }
  .meeting-header, .modern-meeting-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .meeting-actions, .modern-meeting-actions {
    flex-direction: column;
    gap: 10px;
  }
}

.meeting-room-field {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  max-width: 500px;
  margin: 20px auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.meeting-room-field .form-group {
  margin-bottom: 15px;
}

.meeting-room-field label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.meeting-room-field input[type="text"],
.meeting-room-field input[type="number"] {
  width: 100%;
  padding: 8px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.start-meeting-btn {
  display: inline-block;
  background-color: #28a745;
  color: white;
  font-weight: bold;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.start-meeting-btn:hover {
  background-color: #218838;
}

.input-error {
  border: 2px solid #d9534f;
  background-color: #ffe6e6;
}

.error-message {
  color: #d9534f;
  font-size: 0.9em;
  margin-top: 2px;
  display: block;
}

/* Balance warning styles */
.balance-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 0.9em;
}

.balance-warning strong {
  color: #856404;
}

/* Coach Meetings Styles */
.coach-meetings-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.meeting-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.meeting-item h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.meeting-item p {
  margin: 5px 0;
  color: #666;
}

.meeting-item .button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  margin-top: 10px;
  transition: background-color 0.2s;
}

.meeting-item .button:hover {
  background-color: #0056b3;
}

.meeting-item .button.disabled {
  background-color: #6c757d;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.65;
}

.meeting-item .balance-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 0.9em;
}

.meeting-item .balance-warning strong {
  color: #856404;
}

/* Modernes Meeting-Karten-Design */
.modern-meeting-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(138,106,161,0.07), 0 1.5px 4px rgba(0,0,0,0.04);
  border: 1.5px solid #e6e0f0;
  margin-bottom: 28px;
  padding: 18px 20px 12px 20px;
  transition: box-shadow 0.2s;
}
.modern-meeting-card:hover {
  box-shadow: 0 4px 16px rgba(138,106,161,0.13), 0 2px 8px rgba(0,0,0,0.07);
}
.modern-meeting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.modern-meeting-title {
  color: #4a3f5a;
  font-size: 1.18em;
  margin: 0;
}
.modern-meeting-body {
  margin-bottom: 10px;
}
.meeting-main-info {
  display: flex;
  gap: 18px;
  font-size: 1em;
  color: #6d5a7a;
  margin-bottom: 4px;
}
.minute-price {
  color: #8A6AA1;
  font-weight: 600;
}
.kennlernzeit {
  color: #4a3f5a;
}
.guthaben-hinweis {
  font-size: 1em;
  color: #4a3f5a;
}
.modern-meeting-actions {
  margin-top: 12px;
}
.dev-info {
  background: #faf8fd;
  border-radius: 4px;
  border: 1px dashed #d1c3e6;
  padding: 6px 10px;
  margin-top: 10px;
  color: #888;
  font-size: 0.92em;
}

/* Coach-Karten-Status-Label */
.coach-status-label {
  display: block;
  margin-bottom: 0.5em;
  font-size: 1.05em;
  font-weight: 500;
  color: gray; /* Standard: offline */
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  letter-spacing: 0.5px;
}
.coach-status-label.online {
  color: #28a745; /* schönes Grün */
}
.coach-status-label.offline {
  color: gray;
}

/* Karten-Layout für Coaches (optional, falls du es noch optimieren willst) */
.card.m-1.rounded.bg-body.shadow-sm {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  background: #fff;
  padding: 0;
  margin-bottom: 2rem;
}

/* Spinner für Ladeanzeige */
.bbb-loader .spinner {
  width: 48px;
  height: 48px;
  border: 6px solid #e6e0f0;
  border-top: 6px solid #8A6AA1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* --------------------------------------------------
 * Hinweis-Boxen & Loader (aus meeting_status.js)
 * -------------------------------------------------- */
.intro-warning,
.meeting-ready {
  background: rgba(255, 244, 229, var(--mc-hint-alpha, 0.40));
  border-left: 4px solid #f0ad4e;
  padding: 10px 12px;
  border-radius: 5px;
  color: #4a3f5a;
  font-size: 1em;
}
.intro-warning { margin-bottom: 1em; }
.meeting-ready { margin: 10px 0 0 0; }

.coach-next-booking {
  margin: 8px 0 12px 0;
  font-size: 0.9em;
  color: #555;
}

.duration-hint {
  display: block;
  margin-top: 4px;
  color: #555;
  font-size: 0.85em;
}

/* Varianten für guthaben-hinweis */
.guthaben-hinweis.info {
  background: rgba(243, 234, 255, var(--mc-hint-alpha, 0.40));
  border-left-color: #8A6AA1;
}
.guthaben-hinweis.success {
  background: rgba(234, 255, 243, var(--mc-hint-alpha, 0.40));
  border-left-color: #1fa97c;
}

/* Loader zentriert */
.bbb-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
}