/* Dashboard Container */
.bti-dashboard-header {
  text-align: center;
  margin-bottom: 2rem;
}
.bti-title {
  margin: 0;
  font-size: 2rem;
}
.bti-subtitle {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  color: #555;
}

/* Notification Form */
.bti-notify-form {
  text-align: center;
  margin-bottom: 1.5rem;
}
.bti-checkbox {
  font-size: 1rem;
  margin-right: 1rem;
}
.bti-button--primary {
  background: #007bff; /* Gebruik voor notify */
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}
.bti-button--primary:hover {
  background: #0069d9;
  transform: translateY(-2px);
}

/* Action Buttons Common */
.bti-action-form .bti-button {
  padding: 0.6rem 1.2rem;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
  margin-right: 0.5rem;
}

/* Inhalen = groen */
button.bti-button--success {
  background-color: #28a745 !important;
  color: #fff !important;
}
button.bti-button--success:hover {
  background-color: #218838 !important;
}

.bti-button--success:hover {
  background: #218838;
}

/* Afmelden = rood */
.bti-button--danger {
  background: #dc3545;
  color: #fff;
}
.bti-button--danger:hover {
  background: #c82333;
}

/* Herstellen/Annuleren = oranje */
.bti-button--warning {
  background: #ffc107;
  color: #212529;
}
.bti-button--warning:hover {
  background: #e0a800;
}

/* Cards Grid */
.bti-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.bti-card {
  background-color: #eafaea;
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.bti-card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 0.5rem;
}
.bti-card__title {
  font-size: 1.25rem;
  font-weight: bold;
}
.bti-card__subtitle {
  font-size: 0.9rem;
  color: #666;
}

/* Tables */
.widefat.striped {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.widefat.striped th,
.widefat.striped td {
  padding: 0.75rem;
  border: 1px solid #e1e1e1;
}
.widefat.striped tr:nth-child(even) {
  background: #f9f9f9;
}

/* Highlight for inhaal lessons - override table striped rows */
.widefat.striped tr.inhaal-les > td {
  background-color: #f7d697 !important;
}
/* Highlight for inhaal lessons - override table striped rows */
.widefat.striped tr.inhaal-les > td {
  background-color: #f7d697 !important;
}
/* FORCEER KLEUREN VOOR ONZE KNOPPEN */
button.bti-button--success {
  background-color: #28a745 !important;
  color: #fff !important;
}

button.bti-button--danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

button.bti-button--warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

/* geplande lessen = pastelgroen */
.widefat.striped tr.planned-les > td {
  background-color: #eafaea !important;
}
/* inhaallessen = oranje */
.widefat.striped tr.inhaal-les > td {
  background-color: #f7d697 !important;
}

/* Afgemelde lessen = lichtrood */
.widefat.striped tr.afgemeld-les > td {
  background-color: #fdecea !important;
}

/* Algemene styling voor status-labels */
.bti-status {
  font-weight: bold;
}

/* Groen voor gepland */
.bti-status-gepland {
  color: #28a745;
}

/* Rood voor afgemeld */
.bti-status-afgemeld {
  color: #dc3545;
}
/* ===========================================
   ✅ Responsive layout voor BASIC-tennis Dashboard (stabiele versie)
   =========================================== */

/* Container */
.bti-dashboard-wrapper {
  padding: 10px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Kaarten */
.bti-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
}
.bti-card {
  text-align: center;
  padding: 1.2rem;
  border-radius: 10px;
  background: #eafaea;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Tabelcontainer om horizontaal scrollen toe te staan */
.widefat-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Basisstijl widefat behouden */
.widefat.striped {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.widefat.striped th,
.widefat.striped td {
  border: 1px solid #e1e1e1;
  padding: 0.75rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.widefat.striped tr:nth-child(even) {
  background: #f9f9f9;
}

/* Statuskleuren behouden */
.widefat.striped tr.planned-les > td { background-color: #eafaea !important; }
.widefat.striped tr.inhaal-les > td { background-color: #f7d697 !important; }
.widefat.striped tr.afgemeld-les > td { background-color: #fdecea !important; }

/* Knoppen */
button.bti-button--success,
button.bti-button--danger,
button.bti-button--warning {
  display: inline-block;
  width: auto;
  min-width: 90px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
}

/* Responsief gedrag */
@media (max-width: 768px) {
  .bti-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .widefat-container { margin-bottom: 1rem; }
  .widefat.striped th, .widefat.striped td {
    padding: 6px 4px;
    font-size: 13px;
  }
  button.bti-button--success,
  button.bti-button--danger,
  button.bti-button--warning {
    width: 100%;
    margin-bottom: 4px;
  }
}

/* Hele kleine schermen */
@media (max-width: 480px) {
  .bti-cards { grid-template-columns: 1fr; }
  .widefat.striped th:nth-child(3),
  .widefat.striped td:nth-child(3) { display: none; } /* verberg 'Court' */
}