/* RoleManager Component Styles */

.role-management-container {
  width: 100%;
  border-radius: 8px;
}

.role-management-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

/* Form container spacing */
.role-management-container .add-participants-data-container {
  margin-bottom: 1rem !important;
  border-radius: 6px;
  padding: 0; /* Desktop default - no padding */
}

/* Button layout */
.role-management-container .add-participants-button-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* Desktop: 50/50 width for buttons */
@media (min-width: 769px) {
  .role-management-container .add-participants-button-row button {
    flex: 1;
    width: 50%;
  }
}

/* Reusing existing participant styles */
.role-management-container .adddata-participants-data-container {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
}

.role-management-container .adddata-participants-data-box {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Additional styles for different display modes */
.role-management-container.card-mode .adddata-participants-data-box-row {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 16px 8px;
  padding-right: 0 !important;
  margin-bottom: 15px;
}

.role-management-container.compact-mode .adddata-participants-data-box-row {
  padding: 16px 8px;
  padding-right: 0 !important;
  margin-bottom: 5px;
}

.role-management-container.compact-mode .adddata-participants-title h3 {
  font-size: 16px;
}

/* Mobile styles */
@media (max-width: 767px) {
  .role-management-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .role-management-header button {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .role-management-header button:last-child {
    margin-bottom: 0;
  }
}

/* Mobile: stacked full width buttons */
@media (max-width: 768px) {
  .role-management-container .add-participants-button-row {
    flex-direction: column;
  }
  
  .role-management-container .add-participants-button-row button {
    width: 100%;
  }

  /* Mobile: add padding to form container */
  .role-management-container .add-participants-data-container {
    padding: 0.5rem !important;
  }

  /* Fix for add participant dropdown fields on mobile */
  .role-management-container .add-participants-fields-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  /* Name and email take full width on first row */
  .role-management-container .add-participants-name-col,
  .role-management-container .add-participants-email-col {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }
  
  /* Dropdown fields distribute evenly on second row */
  .role-management-container .add-participants-btn-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  
  /* When only one dropdown is shown, take full width */
  .role-management-container .add-participants-btn-col:only-of-type {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  
  /* When two dropdowns, split 50/50 */
  .role-management-container .add-participants-btn-col:first-of-type:nth-last-of-type(2),
  .role-management-container .add-participants-btn-col:last-of-type:nth-of-type(2) {
    flex: 1 1 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
  }
  
  /* When three dropdowns, split evenly */
  .role-management-container .add-participants-btn-col:first-of-type:nth-last-of-type(3),
  .role-management-container .add-participants-btn-col:nth-of-type(2):nth-last-of-type(2),
  .role-management-container .add-participants-btn-col:last-of-type:nth-of-type(3) {
    flex: 1 1 calc(33.33% - 0.33rem) !important;
    max-width: calc(33.33% - 0.33rem) !important;
  }
  
  /* Ensure dropdowns fill their containers */
  .role-management-container .add-participants-btn-col .form-select,
  .role-management-container .add-participants-btn-col select {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Override global width restrictions */
  .role-management-container .adddata-participants-icons-container,
  .adddata-participants-data-box-row.new .adddata-participants-icons-container.w-100,
  .adddata-participants-data-box-row.new .adddata-participants-icons-container.align-items-center,
  .adddata-participants-data-box-row.new .adddata-participants-icons-container.align-items-center.w-100 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Reduce padding on mobile for participant rows */
  .adddata-participants-data-box-row.new {
    padding: 0.5rem !important;
  }

  /* Mobile: add padding to data box */
  .role-management-container .adddata-participants-data-box {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Mobile: buttons stay in title row */
  .role-management-container .participant-actions {
    position: static !important;
    margin-left: auto !important;
  }

  .role-management-container .adddata-participants-icons-container {
    padding-right: 0 !important;
  }
}

/* Dark mode styles */
.dark-mode-active .role-management-container.card-mode .adddata-participants-data-box-row {
  background: rgba(255, 255, 255, 0.05);
}

/* Payment badges */
.role-management-container .badge {
  font-size: 12px;
  padding: 4px 8px;
}

/* Add participant button style */
.role-management-container .add-participants-save-btn {
  color: #f3f3f3;
  font-size: 19px;
  font-family: "DINBold";
  background-color: #f5484d;
  border: 0;
  padding: 10px 15px;
  border-radius: 5px;
}

.role-management-container .add-participants-save-btn:hover {
  background-color: #e03e43;
}

/* Import from stage button style */
.role-management-container .select-pt-from-stage-btn {
  color: #333333;
  font-size: 19px;
  font-family: "DINBold";
  background-color: transparent;
  border: 1px solid #333333;
  padding: 10px 15px;
  border-radius: 5px;
}

.role-management-container .select-pt-from-stage-btn:hover {
  background-color: #f0f0f0;
}

/* Dark mode styles for import from stage button */
.dark-mode-active .role-management-container .select-pt-from-stage-btn {
  color: #f3f3f3;
  border-color: #f3f3f3;
  background-color: transparent;
}

.dark-mode-active .role-management-container .select-pt-from-stage-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Export CSV button */
.role-management-container .btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
  background-color: transparent;
}

.role-management-container .btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* Action buttons hover effects */
.role-management-container .adddata-participants-data-box-setting-icon:hover {
  color: #f5484d;
  transform: scale(1.1);
}

.role-management-container .adddata-participants-data-box-close-icon:hover {
  color: #dc3545;
  transform: scale(1.1);
}

/* Stage filter dropdown */
.stage-filter-container {
  margin-bottom: 1.5rem;
}

.stage-filter-container .stage-filter-dropdown {
  font-size: 14px;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background-color: #f8f9fa;
  font-family: 'DINLight', sans-serif;
  width: 100%;
  max-width: 300px;
  height: 44px;
  transition: all 0.2s ease;
}

.stage-filter-container .stage-filter-dropdown:hover {
  border-color: #aaa;
  background-color: #fff;
}

.stage-filter-container .stage-filter-dropdown:focus {
  outline: none;
  border-color: #f5484d;
  box-shadow: 0 0 0 2px rgba(245, 72, 77, 0.1);
}

/* Dark mode - Stage filter */
.dark-mode-active .stage-filter-dropdown {
  background-color: #272735;
  color: #f3f3f3;
  border-color: #6b6b94;
}

.dark-mode-active .stage-filter-dropdown option {
  background-color: #272735;
  color: #f3f3f3;
}

/* Global edit mode - removed visual feedback */
.role-manager-container.global-edit-active {
  /* No border or background changes */
  /* Keep original container styling */
}

/* Edit mode active state for rows - no visual shift */
.adddata-participants-data-box-row.editing {
  /* No background change */
  /* No border */
  /* No padding change */
  /* Keep original row layout */
  align-items: baseline; /* Align items to baseline when in editing mode */
}

/* Focus states for editable fields - Rumble green */
.adddata-participants-data-box-row.editing input:focus,
.adddata-participants-data-box-row.editing select:focus,
.adddata-participants-data-box-row.editing textarea:focus {
  outline: none !important;
  border: 1px solid rgb(185, 255, 102) !important;
  box-shadow: 0 0 0 2px rgba(185, 255, 102, 0.1) !important;
}

/* Also apply to custom select dropdowns if any */
.adddata-participants-data-box-row.editing .custom-select:focus-within {
  border: 1px solid rgb(185, 255, 102) !important;
}

/* Base button icon style */
.btn-icon {
  background: none;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.btn-icon:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-icon svg {
  pointer-events: none;
}

/* Button borders - force visibility with !important */
.btn-icon.btn-edit,
.btn-icon.btn-cancel,
.btn-icon.btn-save {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Edit button - Neutral white style */
.btn-icon.btn-edit {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgb(248, 249, 250);
}

.btn-icon.btn-edit:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Save button - Green with border */
.btn-icon.btn-save {
  background: rgba(40, 167, 69, 0.1);
  border-color: rgba(40, 167, 69, 0.3) !important;
  color: #28a745;
  font-weight: 500;
}

.btn-icon.btn-save:hover {
  border-color: rgba(34, 197, 94, 0.5) !important;
  background: rgba(34, 197, 94, 0.1) !important;
}

/* Delete button - Red with border */
.btn-icon.btn-cancel {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: #dc3545;
}

.btn-icon.btn-cancel:hover {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Delete button icon size */
.btn-icon.btn-cancel svg,
.btn-icon-danger svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1 !important;
}

/* Ensure consistent button sizing */
.adddata-participants-icons-container .btn-icon {
  min-width: 38px;
  height: 38px;
}

/* Dark mode button adjustments */
.dark-mode-active .btn-icon:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode-active .btn-save:hover {
  background: rgba(76, 175, 80, 0.15);
}

.dark-mode-active .btn-cancel:hover {
  background: rgba(220, 53, 69, 0.15);
}

/* Participant Badge Base Style */
.participant-badge {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  color: #a1a1a1;
}

/* Team Badge */
.participant-badge.team-badge {
  background-color: rgba(100, 100, 100, 0.15);
  color: #a1a1a1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 100px;
}

/* Level Badge */
.participant-badge.level-badge {
  background-color: rgba(33, 150, 243, 0.15);
  color: #a1a1a1;
  border: 1px solid rgba(33, 150, 243, 0.3);
  min-width: 100px;
}

/* Gender Badge - Same styling as team badge */
.participant-badge.gender-badge {
  background-color: rgba(100, 100, 100, 0.15);
  color: #a1a1a1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 60px;
}

/* Age Badge - Same styling as team badge */
.participant-badge.age-badge {
  background-color: rgba(100, 100, 100, 0.15);
  color: #a1a1a1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 80px;
}

/* Badge container alignment */
.role-management-container .adddata-participants-icons-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping in even numbers */
  gap: 0.5rem;
}

/* Ensure badges align left and don't shrink */
.role-management-container .adddata-participants-icons-container > .participant-badge {
  flex-shrink: 0; /* Prevent badges from shrinking */
  white-space: nowrap;
}

/* Desktop: Try to keep on single row */
@media (min-width: 769px) {
  .role-management-container .adddata-participants-icons-container {
    display: flex;
    justify-content: flex-end; /* Align badges to RIGHT */
    align-items: center;
    gap: 0.5rem;
  }

  /* Desktop: hide mobile buttons, show desktop buttons */
  .role-management-container .mobile-only {
    display: none !important;
  }

  .role-management-container .desktop-only {
    display: flex !important;
  }

  /* Buttons at extreme right after badges */
  .role-management-container .participant-actions.desktop-only {
    margin-left: 0.5rem; /* Small gap after badges */
  }
}

/* Mobile: Wrap badges evenly if needed */
@media (max-width: 768px) {
  .role-management-container .adddata-participants-icons-container {
    flex-wrap: wrap;
    justify-content: flex-start; /* Fill space from left */
  }

  .role-management-container .participant-badge {
    flex: 0 1 auto; /* Allow flexible sizing */
    min-width: fit-content;
  }

  /* Mobile: show mobile buttons, hide desktop buttons */
  .role-management-container .mobile-only {
    display: flex !important;
  }

  .role-management-container .desktop-only {
    display: none !important;
  }

  .role-management-container .participant-actions.mobile-only {
    margin-left: auto;
  }

  /* FORCE buttons to extreme right on mobile */
  .adddata-participants-title-row {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  /* Ensure name doesn't push buttons */
  .adddata-participants-title {
    flex: 1 1 auto !important;
    max-width: calc(100% - 80px) !important;
    min-width: 0 !important;
  }
}

/* Participant name input in edit mode */
.participant-name-input {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 4px;
  width: 100%;
  max-width: 300px;
}

.participant-name-input:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.participant-name-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Title row layout - Name and buttons on same row */
.adddata-participants-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-right: 0;
}

/* Name takes available space */
.adddata-participants-title {
  flex: 1;
  min-width: 0; /* Allow text truncation if needed */
}

/* Buttons stay on right */
.participant-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0; /* Prevent buttons from shrinking */
  margin-left: auto; /* Push buttons to far right */
}

/* Payment Badge Styles */
.participant-badge.payment-badge {
  min-width: 60px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* PAID Badge - Green */
.participant-badge.payment-badge.paid {
  background-color: rgba(76, 175, 80, 0.15);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

/* FREE Badge - Gray */
.participant-badge.payment-badge.free {
  background-color: rgba(158, 158, 158, 0.15);
  color: #9e9e9e;
  border: 1px solid rgba(158, 158, 158, 0.3);
}

/* Dark mode adjustments for payment badges */
.dark-mode-active .participant-badge.payment-badge.paid {
  background-color: rgba(76, 175, 80, 0.2);
  color: #81c784;
  border-color: rgba(76, 175, 80, 0.4);
}

.dark-mode-active .participant-badge.payment-badge.free {
  background-color: rgba(189, 189, 189, 0.2);
  color: #bdbdbd;
  border-color: rgba(189, 189, 189, 0.4);
}