@import './calendar-modal.css';
@import './calendar-event-modal.css';
@import './calendar-base.css';
/* ===== ENHANCED GOOGLE CALENDAR STYLES ===== */



#calendar-section {
  margin-bottom: 32px;
  position: relative;
}

/* ===== ENHANCED AUTHENTICATION BUTTON ===== */
.auth-btn {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--calendar-primary), var(--calendar-secondary));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--calendar-transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--calendar-shadow-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-btn::before {
  content: '';
  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.6s ease;
}

.auth-btn:hover {
  background: linear-gradient(135deg, var(--calendar-primary-dark), var(--calendar-secondary-dark));
  transform: translateY(-2px);
  box-shadow: var(--calendar-shadow-lg), var(--calendar-shadow-glow);
}

.auth-btn:hover::before {
  left: 100%;
}

.auth-btn:active {
  transform: translateY(0);
  transition: var(--calendar-transition-fast);
}

.auth-btn i {
  font-size: 16px;
  transition: var(--calendar-transition-smooth);
}

.auth-btn:hover i {
  transform: scale(1.1) rotate(5deg);
}

/* ===== ENHANCED CONTROL BUTTONS ===== */
.control-btn {
  background: var(--calendar-surface);
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--calendar-transition-smooth);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.control-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--calendar-accent), transparent);
  transition: width 0.3s ease;
  z-index: -1;
}

.control-btn:hover {
  background: var(--calendar-surface-hover);
  border-color: var(--calendar-accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--calendar-shadow-sm);
}

.control-btn:hover::before {
  width: 100%;
}

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

.control-btn:disabled:hover {
  background: var(--calendar-surface);
  border-color: #333;
  color: #e0e0e0;
  box-shadow: none;
}


/* ===== CALENDAR POPUP BUTTON ENHANCEMENT ===== */
.calendar-popup-btn {
  width: 100% !important;
  margin-bottom: 15px !important;
  padding: 12px !important;
  background: linear-gradient(135deg, #4fc3f7, #00d4ff) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.3) !important;
}

.calendar-popup-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.6s ease !important;
}

.calendar-popup-btn:hover {
  background: linear-gradient(135deg, #00d4ff, #4fc3f7) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(79, 195, 247, 0.4) !important;
}

.calendar-popup-btn:hover::before {
  left: 100% !important;
}

.calendar-popup-btn:active {
  transform: translateY(0) !important;
  transition: all 0.1s ease !important;
}

.calendar-popup-btn i {
  font-size: 16px !important;
  transition: all 0.3s ease !important;
}

.calendar-popup-btn:hover i {
  transform: scale(1.1) rotate(10deg) !important;
}


/* ===== CALENDAR SECTION TITLE ===== */
#calendar-section h2 {
  color: #4fc3f7 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ===== CALENDAR UPCOMING EVENTS SECTION ===== */
#calendar-upcoming-events h3 {
  font-size: 14px !important;
  color: #4fc3f7 !important;
  margin: 15px 0 10px 0 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ===== ENHANCED DISCONNECT BUTTON ===== */
#disconnect-calendar-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #ff4757, #ff3742) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: 8px !important;
}

#disconnect-calendar-btn:hover {
  background: linear-gradient(135deg, #ff3742, #ff2f3a) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3) !important;
}

#disconnect-calendar-btn:active {
  transform: translateY(0) !important;
  transition: all 0.1s ease !important;
}

/* ===== CALENDAR LOADING STATES ===== */
/* Loading states removed for cleaner UI */

/* ===== CALENDAR ERROR STATES ===== */
.calendar-error-state {
  background: rgba(255, 82, 82, 0.1) !important;
  border: 1px solid rgba(255, 82, 82, 0.3) !important;
  color: #ff5252 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-size: 12px !important;
  margin: 10px 0 !important;
}

/* ===== CALENDAR SUCCESS STATES ===== */
.calendar-success-state {
  background: rgba(76, 175, 80, 0.1) !important;
  border: 1px solid rgba(76, 175, 80, 0.3) !important;
  color: #4caf50 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-size: 12px !important;
  margin: 10px 0 !important;
}

/* ===== CALENDAR SCOPE WARNING ===== */
#scope-warning {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
  color: white !important;
  padding: 12px !important;
  border-radius: 8px !important;
  margin: 10px 0 !important;
  font-size: 12px !important;
  text-align: center !important;
  animation: pulse 2s infinite !important;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
}

#scope-warning button {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  transition: all 0.3s ease !important;
}

#scope-warning button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px) !important;
}