/* ============================================
   Button Enhancement Styles
   Modern UI/UX Design for Interface Buttons
   Matching the Course List Enhancement Design Language
   ============================================ */

/* ============================================
   Interface Buttons Container
   ============================================ */

.interface-buttons {
  padding: 20px 8px 20px 28px !important;
  background: white;
  border-top: 1px solid var(--gray-200, #E5E7EB);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================
   Generate Schedule & Toggle View Buttons
   ============================================ */

.generate-schedule,
.toggle-view {
  width: 100% !important;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Generate Schedule Button - Lighter Primary Style */
.generate-schedule {
  background: linear-gradient(135deg, #5BA0F2 0%, #7DB8F8 100%) !important;
  color: white !important;
}

.generate-schedule:hover:not(:disabled) {
  background: linear-gradient(135deg, #4A90E2 0%, #6BA6F5 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(91, 160, 242, 0.25) !important;
}

.generate-schedule:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(91, 160, 242, 0.2) !important;
}

/* Toggle View Button - Secondary Style */
.toggle-view {
  background: white !important;
  color: #5BA0F2 !important;
  border: 2px solid var(--gray-300, #D1D5DB) !important;
}

.toggle-view:hover:not(:disabled) {
  background: var(--gray-50, #F9FAFB) !important;
  border-color: #5BA0F2 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.toggle-view:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   Button States
   ============================================ */

/* Disabled State */
.generate-schedule:disabled,
.toggle-view:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.generate-schedule:disabled {
  background: linear-gradient(135deg, #94A3B8 0%, #CBD5E1 100%) !important;
}

/* Loading State for Generate Button */
.generate-schedule:disabled::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Active/Selected State Display Logic */
.generate-schedule,
.toggle-view {
  display: none !important;
}

.generate-schedule.active,
.toggle-view.active {
  display: block !important;
}

/* ============================================
   Button Ripple Effect
   ============================================ */

.generate-schedule::after,
.toggle-view::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.generate-schedule:active::after,
.toggle-view:active::after {
  width: 300px;
  height: 300px;
}

/* ============================================
   Button Text Enhancement
   ============================================ */

/* Removed emoji prefixes from buttons */

/* ============================================
   Success Animation (for after generation)
   ============================================ */

@keyframes successPulse {
  0% {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  }
  100% {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }
}

.generate-schedule.success {
  animation: successPulse 1s ease;
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
  .interface-buttons {
    padding: 15px !important;
  }
  
  .generate-schedule,
  .toggle-view {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  
  /* Responsive adjustments */
}

/* ============================================
   Hover Shine Effect
   ============================================ */

.generate-schedule::before,
.toggle-view::before {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
  content: '';
  pointer-events: none;
}

.generate-schedule:hover::before,
.toggle-view:hover::before {
  left: 100%;
}

/* ============================================
   Focus States for Accessibility
   ============================================ */

.generate-schedule:focus-visible,
.toggle-view:focus-visible {
  outline: 3px solid #7DB8F8;
  outline-offset: 2px;
}

/* ============================================
   Button Group Styling
   ============================================ */

.interface-buttons {
  position: relative;
}

.interface-buttons::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gray-300, #D1D5DB) 20%,
    var(--gray-300, #D1D5DB) 80%,
    transparent
  );
}