/* Trainer Dashboard Styles - Matching Redoublet.com main site */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
  color: #0808D9;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Header Styles */
header {
  background-color: #0808D9;
  padding: 15px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  box-shadow: none;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-text {
  font-size: 24px;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  display: flex;
}

.logo-redoublet {
  color: #fff;
}

.logo-com {
  color: #F89554;
}

.trainer-badge {
  background: #F89554;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 10px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.trainer-email {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.logout-btn {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.logout-btn:hover {
  background: #fff;
  color: #0808D9;
}

/* Main Content */
main {
  margin-top: 80px;
  padding: 20px;
}

/* Section Bands - full-width background shading */
.section-band {
  padding: 40px 20px;
}

.section-band--shaded {
  background-color: #f4f5fa;
}

/* Page Title */
.page-title {
  font-family: 'Merriweather', serif;
  font-size: 32px;
  color: #0808D9;
  margin-bottom: 30px;
}

/* Language Dropdown */
.lang-dropdown {
  position: relative;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: all 0.2s ease;
}

.lang-trigger:hover {
  border-color: #fff;
}

.lang-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
}

.lang-trigger .chevron {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.lang-dropdown.open .lang-trigger .chevron {
  transform: rotate(180deg);
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  overflow: hidden;
  min-width: 140px;
  z-index: 100;
}

.lang-dropdown.open .lang-menu {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #333;
  transition: background 0.15s ease;
}

.lang-option:hover {
  background: #f5f5f5;
}

.lang-option.active {
  color: #0808D9;
  font-weight: 600;
}

.lang-option .lang-check {
  width: 16px;
  text-align: center;
  font-size: 12px;
}

/* Login Page Styles */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  gap: 60px;
}

.login-side {
  flex: 0 1 450px;
}

.video-side {
  flex: 0 1 560px;
}

.login-box {
  background: #fff;
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  width: 100%;
}

/* Request Access Button */
.btn-request-access {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 18px 30px;
  background: #F89554;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-request-access:hover {
  background: #e07a3a;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(248, 149, 84, 0.4);
}

/* Hero Section */
.hero-side {
  flex: 0 1 560px;
}

.hero-title {
  font-family: 'Merriweather', serif;
  font-size: 32px;
  color: #0808D9;
  margin-bottom: 15px;
}

.hero-intro {
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}

.hero-points li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.hero-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4caf50;
  font-weight: 700;
  font-size: 16px;
}

.hero-quote {
  background: #f8f9fa;
  border-left: 4px solid #0808D9;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0;
}

.hero-quote p {
  color: #333;
  font-size: 14px;
  font-style: italic;
  line-height: 1.7;
  margin: 0 0 10px 0;
}

.hero-quote cite {
  color: #666;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

/* How it works section */
.how-it-works {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.how-title {
  font-family: 'Merriweather', serif;
  font-size: 32px;
  color: #0808D9;
  text-align: center;
  margin-bottom: 30px;
}

.how-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
  align-items: flex-start;
}

.how-video-card {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 820px;
}

.how-video-card--vertical {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  .how-videos {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .how-video-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 640px;
  }
}

.how-video-card h3 {
  font-size: 20px;
  color: #0808D9;
  margin-bottom: 12px;
  text-align: center;
}

.how-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #0808D9;
}

/* Portrait (phone) video: keep a true 9:16 shape and size it relative to the
   viewport so it never overflows narrow screens. On the desktop row layout the
   inline height set by syncVideoHeights() takes over to align it with the
   landscape video; aspect-ratio then derives the matching width. */
.how-video-embed--vertical {
  width: min(320px, 72vw);
  max-width: 100%;
  aspect-ratio: 9 / 16;
}

.how-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Transparent tap target that opens the video in a full-screen lightbox. */
.how-video-fs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  z-index: 2;
}

/* Full-screen video lightbox. A CSS overlay (rather than the Fullscreen API)
   so it works everywhere, including iOS Safari where embedded iframes cannot
   be put into native full screen. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.92);
}

.video-lightbox[hidden] {
  display: none;
}

.video-lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(96vw, calc(88vh * 16 / 9));
  max-width: 96vw;
  max-height: 88vh;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-lightbox__frame--vertical {
  aspect-ratio: 9 / 16;
  width: min(96vw, calc(88vh * 9 / 16));
}

.video-lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-lightbox__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* Full-screen image lightbox (system cards). Landscape cards are centred and
   fit the viewport; portrait cards fill the width and scroll if taller than
   the screen. */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.92);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.img-lightbox[hidden] {
  display: none;
}

.img-lightbox.is-portrait {
  align-items: flex-start;
}

.img-lightbox__img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
}

.img-lightbox.is-portrait .img-lightbox__img {
  max-width: min(100%, 560px);
  max-height: none;
  height: auto;
}

.img-lightbox__close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* FAQ Section */
.faq-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.faq-title {
  font-family: 'Merriweather', serif;
  font-size: 32px;
  color: #0808D9;
  text-align: center;
  margin-bottom: 30px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid #e0e0e8;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 8px rgba(8, 8, 217, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0808D9;
  text-align: left;
}

.faq-icon {
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 500px;
}

.faq-answer p {
  padding: 0 24px 20px;
  color: #333;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* Video Section (hidden) */
.video-side {
  flex: 0 1 560px;
}

.video-title {
  font-family: 'Merriweather', serif;
  font-size: 24px;
  color: #0808D9;
  margin-bottom: 20px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-description {
  margin-top: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.7;
}

.login-title {
  font-family: 'Merriweather', serif;
  font-size: 32px;
  color: #0808D9;
  margin-bottom: 10px;
  text-align: center;
}

.login-subtitle {
  color: #666;
  text-align: center;
  margin-bottom: 30px;
  font-size: 14px;
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0808D9;
  font-weight: 600;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #0808D9;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

/* Explanatory note shown under a field label/input */
.form-help {
  display: block;
  margin-top: 6px;
  color: #777;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 400;
}

/* Playing-system dropdown sits next to a "view system card" button */
.system-select-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.system-select-row select {
  flex: 1;
  min-width: 0;
}

.system-select-row .btn-small {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Full-screen preview of the selected system card image */
.system-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.system-card-preview {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
}

.system-card-preview img {
  display: block;
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.system-card-preview-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #333;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.system-card-preview-close:hover {
  background: #f0f0f0;
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 10px;
  display: none;
}

.error-message.show {
  display: block;
}

.success-message {
  color: #4caf50;
  font-size: 14px;
  margin-top: 10px;
  display: none;
}

.success-message.show {
  display: block;
}

/* Floating button to download the student introduction slide */
.download-intro-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1500;
  background: #0808D9;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(8, 8, 217, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-intro-btn::before {
  content: '\2B07';
  margin-right: 8px;
}

.download-intro-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(8, 8, 217, 0.45);
}

.download-intro-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Floating button to download the competition games overview (Speloverzicht).
   Sits above the intro button so both are visible when a competition is open. */
.download-games-btn {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 1500;
  background: #F89554;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(248, 149, 84, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-games-btn::before {
  content: '\2B07';
  margin-right: 8px;
}

.download-games-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(248, 149, 84, 0.5);
}

.download-games-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* The generic .hidden rule is scoped to .kanban-column, so hide this button explicitly. */
.download-games-btn.hidden {
  display: none;
}

/* Action row shown after a student is added (Add another / Done) */
.success-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.success-actions .btn {
  flex: 1;
}

/* Faded fields (before email check) */
.fields-faded {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.fields-faded.active {
  opacity: 1;
  pointer-events: auto;
}
.fields-faded.active input:disabled {
  opacity: 0.4;
}

/* Buttons */
.btn {
  padding: 14px 30px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.btn-primary {
  background: #0808D9;
  color: white;
  width: 100%;
}

.btn-primary:hover {
  background: #0606b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(8, 8, 217, 0.3);
}

.btn-primary:disabled {
  background: #999;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-small {
  padding: 10px 20px;
  font-size: 14px;
}

.btn-secondary {
  background: #f0f4f8;
  color: #0808D9;
  border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
  background: #e0e5ea;
  border-color: #0808D9;
}

.btn-success {
  background: #4caf50;
  color: white;
}

.btn-success:hover {
  background: #388e3c;
}

.btn-warning {
  background: #ff9800;
  color: white;
}

.btn-warning:hover {
  background: #f57c00;
}

.btn-danger {
  background: #f44336;
  color: white;
}

.btn-danger:hover {
  background: #d32f2f;
}

.btn-danger-outline {
  background: transparent;
  color: #f44336;
  border: 2px solid #f44336;
}

.btn-danger-outline:hover {
  background: #f44336;
  color: white;
}

/* Dashboard Cards Grid (legacy) */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.dashboard-card {
  background: #fff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.dashboard-card h2 {
  font-family: 'Merriweather', serif;
  font-size: 20px;
  color: #0808D9;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Kanban Board */
.kanban-board {
  display: flex;
  gap: 20px;
  min-height: 500px;
  margin-bottom: 30px;
}

.kanban-column {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-width: 0;
}

.kanban-column.wide {
  flex: 1.5;
}

.kanban-column.hidden {
  display: none;
}

.kanban-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.kanban-header h2 {
  font-family: 'Merriweather', serif;
  font-size: 18px;
  color: #0808D9;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-subtitle {
  font-size: 12px;
  color: #666;
  font-weight: 400;
}

.kanban-column > .groups-list,
.kanban-column > .members-list,
.kanban-column > .competitions-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

#progressContent {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.kanban-footer {
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

/* Selected items */
.group-item.selected {
  background: #f0f4ff;
  border-left: 3px solid #0808D9;
}

.competition-item.selected {
  background: #f0f4ff;
  border-left: 3px solid #0808D9;
}

/* Student Progress Styles */
.student-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.student-row:hover {
  background: #f8f9fa;
}

.student-row:last-child {
  border-bottom: none;
}

.student-row.header {
  font-weight: 600;
  color: #0808D9;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
}

.student-name {
  font-weight: 500;
}

.score-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.score-badge.excellent {
  background: #e8f5e9;
  color: #388e3c;
}

.score-badge.good {
  background: #e3f2fd;
  color: #1976d2;
}

.score-badge.average {
  background: #fff3e0;
  color: #f57c00;
}

.score-badge.poor {
  background: #ffebee;
  color: #d32f2f;
}

.mini-progress {
  background: #e0e0e0;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 2px;
}

.mini-progress .fill {
  background: #0808D9;
  height: 100%;
  border-radius: 6px;
}

/* Groups List */
.groups-list {
  list-style: none;
}

.group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.group-item:last-child {
  border-bottom: none;
}

.group-item:hover {
  background: #f8f9fa;
}

.group-info h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.group-info p {
  font-size: 13px;
  color: #666;
}

.group-actions {
  display: flex;
  gap: 8px;
}

/* Competitions List */
.competitions-list {
  list-style: none;
}

.competition-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.competition-item:last-child {
  border-bottom: none;
}

.competition-item:hover {
  background: #f8f9fa;
}

.competition-info h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.competition-info p {
  font-size: 13px;
  color: #666;
}

.competition-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-draft {
  background: #f5f5f5;
  color: #666;
}

.status-active {
  background: #e8f5e9;
  color: #388e3c;
}

.status-completed {
  background: #e3f2fd;
  color: #1976d2;
}

.status-scheduled {
  background: #fff3e0;
  color: #f57c00;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.empty-state p {
  margin-bottom: 15px;
}

/* Table Styles */
.table-container {
  background: #fff;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: #f8f9fa;
  color: #0808D9;
  font-weight: 600;
  padding: 16px 20px;
  text-align: left;
  border-bottom: 2px solid #e0e0e0;
  font-size: 14px;
}

.data-table td {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #333;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover {
  background: #f8f9fa;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.modal-content.wide {
  max-width: 800px;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-header {
  padding: 25px 30px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
}

.modal-header h2 {
  font-family: 'Merriweather', serif;
  color: #0808D9;
  font-size: 24px;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 30px;
}

.modal-footer {
  padding: 20px 30px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Students/Members List in Modal */
.members-list {
  list-style: none;
}

.modal .members-list {
  max-height: 300px;
  overflow-y: auto;
}

.member-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.member-item:last-child {
  border-bottom: none;
}

.member-info {
  display: flex;
  flex-direction: column;
}

.member-name {
  font-weight: 500;
  color: #333;
}

.member-email {
  font-size: 12px;
  color: #666;
}

.member-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
}

.member-status.pending {
  background: #fff3e0;
  color: #f57c00;
}

.member-status.accepted {
  background: #e8f5e9;
  color: #388e3c;
}

.member-item.clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.member-item.clickable:hover {
  background: #f5f7fa;
}

/* Compact buttons when 4 columns visible */
.kanban-board.four-columns .kanban-header .btn-small {
  padding: 8px 12px;
  font-size: 13px;
  min-width: 0;
}

.kanban-board.four-columns .kanban-header .btn-small.btn-success {
  background: #4caf50;
  color: white;
}

.kanban-board.four-columns .kanban-header .btn-small.btn-secondary,
.kanban-board.four-columns .kanban-header .btn-small.btn-danger-outline {
  background: #4caf50;
  color: white;
  border-color: #4caf50;
}

.kanban-board.four-columns .kanban-header .btn-small.btn-secondary:hover,
.kanban-board.four-columns .kanban-header .btn-small.btn-danger-outline:hover {
  background: #388e3c;
  border-color: #388e3c;
}

.kanban-board.four-columns .kanban-column {
  flex: 1;
}

.kanban-board.four-columns .kanban-column.wide {
  flex: 1.5;
}

/* PBN Upload Area */
.pbn-upload-area {
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pbn-upload-area:hover,
.pbn-upload-area.dragover {
  border-color: #0808D9;
  background: #f8f9ff;
}

.pbn-upload-area input[type="file"] {
  display: none;
}

.pbn-upload-area p {
  color: #666;
  margin-bottom: 10px;
}

.pbn-upload-area .upload-icon {
  font-size: 48px;
  color: #ccc;
  margin-bottom: 10px;
}

/* PBN Deals List */
.deals-list {
  list-style: none;
  margin-top: 20px;
}

.deal-item {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

.deal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.deal-header h4 {
  font-size: 14px;
  color: #0808D9;
}

.deal-notes textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  resize: vertical;
}

.deal-notes textarea:focus {
  outline: none;
  border-color: #0808D9;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0808D9;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Stats Cards */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.stat-card h3 {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #0808D9;
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  font-weight: 500;
}

.info-value {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

/* Date/Time Inputs */
input[type="datetime-local"] {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
}

input[type="datetime-local"]:focus {
  outline: none;
  border-color: #0808D9;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .kanban-board {
    flex-wrap: wrap;
  }

  .kanban-column {
    flex: 1 1 calc(50% - 10px);
    min-width: calc(50% - 10px);
    max-height: none;
  }

  .kanban-column.wide {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 10px;
    padding: 10px 15px;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .trainer-email {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
  }

  .stats-row {
    display: none;
  }

  main {
    margin-top: 110px;
    padding: 15px;
  }

  .page-title {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .kanban-board {
    flex-direction: column;
    gap: 15px;
  }

  .kanban-column {
    flex: 1 1 100%;
    min-width: 0;
    max-height: none;
  }

  .kanban-column.wide {
    flex: 1 1 100%;
  }

  .kanban-header {
    padding: 15px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .kanban-header h2 {
    font-size: 16px;
  }

  .student-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .student-row.header {
    font-size: 11px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .login-container {
    flex-direction: column;
    gap: 40px;
    padding: 30px 15px;
  }

  .login-side,
  .video-side,
  .hero-side {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .login-box {
    padding: 30px 25px;
  }

  .video-title {
    font-size: 20px;
  }

  .modal-content {
    width: 95%;
    margin: 10px;
    max-height: 85vh;
  }

  .modal-header {
    padding: 15px 20px;
  }

  .modal-header h2 {
    font-size: 18px;
  }

  .modal-body {
    padding: 20px;
  }

  .modal-footer {
    padding: 15px 20px;
  }

  .group-item {
    padding: 12px;
  }

  .group-info h3 {
    font-size: 14px;
  }

  .competition-item {
    padding: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .competition-info h3 {
    font-size: 14px;
  }

  .member-item {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: 18px;
  }

  .trainer-badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  .trainer-email {
    font-size: 11px;
    max-width: 40vw;
  }

  .logout-btn {
    padding: 6px 14px;
    font-size: 12px;
  }

  .btn-small {
    padding: 8px 12px;
    font-size: 12px;
  }

  main {
    padding: 10px;
  }

  .page-title {
    font-size: 20px;
  }

  .kanban-header {
    padding: 12px;
  }

  .student-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}