/**
 * CYLCentral Member Portal - Main Styles
 * This file contains global variables and shared styles for the member portal
 */

:root {
  /* Primary Colors */
  --green-1: #21A179;
  --green-2: #00594D;
  --green-3: #F3F5F0;
  --brown: #6A2117;
  --white: #FFFFFF;
  
  /* Gradient Variables */
  --gradient-green-1: linear-gradient(45deg, #21A179, #00594D);
  --gradient-brown: linear-gradient(45deg, #6A2117, #A24E43);
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  
  /* Animation Timing */
  --transition-fast: 0.3s;
  --transition-medium: 0.5s;
  --transition-slow: 0.8s;
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --green1: #21A179;
}

/* Global Animation Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Global Utility Classes */
.text-gradient-green {
  background: var(--gradient-green-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-brown {
  background: var(--gradient-brown);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.animate-fade-in {
  animation: fadeIn var(--transition-medium) ease-out forwards;
}

.animate-slide-up {
  animation: slideUp var(--transition-medium) ease-out forwards;
}

.animate-slide-down {
  animation: slideDown var(--transition-medium) ease-out forwards;
}

.animate-slide-left {
  animation: slideInLeft var(--transition-medium) ease-out forwards;
}

.animate-slide-right {
  animation: slideInRight var(--transition-medium) ease-out forwards;
}

.animate-zoom-in {
  animation: zoomIn var(--transition-medium) ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-float {
  animation: floatUpDown 3s ease-in-out infinite;
}

/* Buttons */
.btn-primary-action {
  background: var(--gradient-green-1);
  color: white;
  padding: 10px 25px;
  border-radius: 50px;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  transition: all var(--transition-fast) ease;
  border: none;
  box-shadow: var(--shadow-sm);
  font-size: 16px;
}

.btn-primary-action:hover {
  background: var(--gradient-green-1-reverse);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary-action {
  background: transparent;
  color: var(--green-1);
  padding: 9px 22px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all var(--transition-fast) ease;
  border: 2px solid var(--green-1);
}

.btn-secondary-action:hover {
  background: rgba(33, 161, 121, 0.1);
  transform: translateY(-2px);
}

.btn-brown-action {
  background: var(--gradient-brown);
  color: white;
  padding: 10px 25px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all var(--transition-fast) ease;
  border: none;
  box-shadow: var(--shadow-sm);
}

.btn-brown-action:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Cards & Containers */
.card-hover {
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* Apply the white container style with opacity, no border, and no shadow to cards within participant-containers */
.participant-container .card {
  background-color: rgba(255, 255, 255, 0.6);
  border: none;
  box-shadow: none;
}

/* Images */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform var(--transition-medium) ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.1);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.toast {
  margin-bottom: 10px;
  min-width: 250px;
  max-width: 350px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: toastFadeIn 0.3s ease forwards;
}

@keyframes toastFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.toast-success {
  background-color: rgba(33, 161, 121, 0.9);
  color: white;
}

.toast-error {
  background-color: rgba(220, 53, 69, 0.9);
  color: white;
}

.toast-info {
  background-color: rgba(33, 150, 243, 0.9);
  color: white;
}

/* === CYLCentral Sidebar and Content Overrides === */
/* Sidebar headings, links, icons */
.sidebar,
.sidebar .sidebar-heading,
.sidebar .nav-link,
.sidebar .nav-link i,
.sidebar .nav-link.active,
.sidebar .nav-link.active i {
  color: var(--green-1) !important;
}

/* Active link background and text */
.sidebar .nav-link.active,
.sidebar .nav-link.active i {
  background: #fff !important;
  color: var(--green-1) !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(33, 161, 121, 0.08);
}

/* Sidebar section titles (like DASHBOARD, TOOLS) */
.sidebar .sidebar-heading {
  color: var(--green-1) !important;
}

/* Main content area background (adjust selectors as needed) */
.main-content,
.content-wrapper,
.dashboard-content,
.page-content,
#content,
#main-content {
  background: #fff !important;
}