/**
 * Toggle Button Visual Feedback Styles
 * Ensures clear visual distinction between on/off states
 */

/* Base toggle button styles */
.feature-toggle-button,
.theme-toggle-button,
.toggle-button {
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Active state - Clear visual feedback */
.feature-toggle-button.active,
.theme-toggle-button[aria-pressed='true'],
.toggle-button.active,
button[aria-pressed='true'] {
  background: var(--futuristic-background-success) !important;
  color: var(--futuristic-text-success) !important;
  border-color: var(--futuristic-border-success) !important;
  box-shadow:
    var(--futuristic-shadow-inset),
    0 0 10px rgba(var(--futuristic-success-rgb), 0.3) !important;
}

/* Dark mode active state */
body.dark-mode .feature-toggle-button.active,
body.dark-mode .theme-toggle-button[aria-pressed='true'],
body.dark-mode .toggle-button.active,
body.dark-mode button[aria-pressed='true'] {
  background: var(--futuristic-background-success) !important;
  color: var(--futuristic-text-success) !important;
  border-color: var(--futuristic-border-success) !important;
  box-shadow:
    var(--futuristic-shadow-inset),
    0 0 15px rgba(var(--futuristic-success-rgb), 0.5) !important;
}

/* Inactive state - Default appearance */
.feature-toggle-button:not(.active),
.theme-toggle-button[aria-pressed='false'],
.toggle-button:not(.active),
button[aria-pressed='false'] {
  background: var(--futuristic-background-secondary);
  color: var(--futuristic-text-secondary);
  border-color: var(--futuristic-border-primary);
  box-shadow: var(--futuristic-shadow-soft);
}

/* Hover states */
.feature-toggle-button:hover,
.theme-toggle-button:hover,
.toggle-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--futuristic-shadow-medium);
}

/* Active hover state */
.feature-toggle-button.active:hover,
.theme-toggle-button[aria-pressed='true']:hover,
.toggle-button.active:hover,
button[aria-pressed='true']:hover {
  box-shadow:
    var(--futuristic-shadow-inset),
    0 0 15px rgba(var(--futuristic-success-rgb), 0.5) !important;
}

/* Focus states for accessibility */
.feature-toggle-button:focus,
.theme-toggle-button:focus,
.toggle-button:focus {
  outline: 2px solid var(--futuristic-accent-primary);
  outline-offset: 2px;
}

/* Icon adjustments for active state */
.feature-toggle-button.active i,
.theme-toggle-button[aria-pressed='true'] i,
.toggle-button.active i,
button[aria-pressed='true'] i {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Specific toggle button enhancements */
#toggle-checklist.active::after,
#toggle-progress-bar.active::after,
#toggle-quick-add.active::after,
#toggle-dates.active::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.7em;
  color: var(--futuristic-text-success);
  font-weight: bold;
}

/* Compact view toggle special styling */
#toggle-compact-view {
  transition: all 0.3s ease;
}

/* Greyed out when in compact mode (the default) - aria-pressed is false when compact */
#toggle-compact-view[aria-pressed='false'] {
  background: rgba(128, 128, 128, 0.2) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(128, 128, 128, 0.3) !important;
  opacity: 0.7;
}

/* Highlighted when switching to expanded mode - aria-pressed is true when expanded */
#toggle-compact-view[aria-pressed='true'],
#toggle-compact-view.active:not([aria-pressed='false']) {
  background: linear-gradient(
    135deg,
    var(--futuristic-background-success),
    var(--futuristic-background-accent)
  ) !important;
  color: var(--futuristic-text-success) !important;
  opacity: 1;
}

/* Dark mode toggle special styling */
#dark-mode-toggle[aria-pressed='true'] {
  background: var(--futuristic-background-tertiary) !important;
  color: var(--futuristic-accent-warning) !important;
}

#dark-mode-toggle[aria-pressed='false'] {
  background: var(--futuristic-background-secondary) !important;
  color: var(--futuristic-text-secondary) !important;
}

/* Progress bar specific styling */
#checklist-progress-section {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

#checklist-progress-section.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Ensure toggle button text doesn't change */
.feature-toggle-button span,
.theme-toggle-button span,
.toggle-button span {
  transition: none !important;
}

/* Visual indicator for keyboard shortcuts toggle */
#toggle-keyboard-shortcuts {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#toggle-keyboard-shortcuts.active {
  position: relative;
  overflow: visible;
}

#toggle-keyboard-shortcuts.active::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    var(--futuristic-accent-primary),
    var(--futuristic-accent-secondary)
  );
  border-radius: inherit;
  opacity: 0.3;
  animation: pulse 2s infinite;
  z-index: -1;
}

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

/* Sidebar toggle group consistency */
.sidebar-toggle-group button {
  margin: 0.25rem;
  min-width: 120px;
}

.sidebar-toggle-group button.active {
  font-weight: 600;
}

/* Ensure consistent sizing */
.feature-toggle-button,
.theme-toggle-button:not(#toggle-compact-view):not(#dark-mode-toggle) {
  min-height: 36px;
  padding: 0.5rem 1rem;
}

/* Specific sizing for circular toggle buttons */
#toggle-compact-view,
#dark-mode-toggle {
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
}

/* Icon-only toggle buttons */
.icon-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Disabled state */
.feature-toggle-button:disabled,
.theme-toggle-button:disabled,
.toggle-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--futuristic-background-disabled) !important;
  color: var(--futuristic-text-disabled) !important;
}

/* Loading state */
.feature-toggle-button.loading,
.theme-toggle-button.loading,
.toggle-button.loading {
  pointer-events: none;
  opacity: 0.7;
}

.feature-toggle-button.loading::after,
.theme-toggle-button.loading::after,
.toggle-button.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}