/**
 * Adobe-Style Function Panel
 * Left sidebar with collapsible behavior and professional styling
 */

/* ========================================
   FUNCTION PANEL CONTAINER
   ======================================== */

.sidebar {
  width: var(--layout-function-panel-width);
  background: var(--color-bg-panel);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-lg);
  transition: width var(--transition-fast) var(--transition-easing),
              padding var(--transition-fast) var(--transition-easing);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sidebar.collapsed {
  width: var(--layout-function-panel-collapsed);
  padding: var(--spacing-md) var(--spacing-sm);
}

/* Hide text content when collapsed */
.sidebar.collapsed .page-title span:not(.page-icon),
.sidebar.collapsed .page-desc,
.sidebar.collapsed .info-box,
.sidebar.collapsed .module-title span:not(.module-icon),
.sidebar.collapsed .module-content,
.sidebar.collapsed .form-label,
.sidebar.collapsed .form-select,
.sidebar.collapsed .tag-cloud,
.sidebar.collapsed .checkbox-group,
.sidebar.collapsed .slider-group,
.sidebar.collapsed .upload-text,
.sidebar.collapsed .btn span:not(.btn-icon) {
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* ========================================
   COLLAPSE TOGGLE BUTTON
   ======================================== */

.panel-collapse-toggle {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: var(--layout-min-clickable);
  height: var(--layout-min-clickable);
  min-width: var(--layout-min-clickable);
  min-height: var(--layout-min-clickable);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-control);
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast) var(--transition-easing);
  z-index: 100;
  color: var(--color-text-secondary);
  font-size: 20px;
}

.panel-collapse-toggle:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary-500);
  transform: scale(1.05);
}

.panel-collapse-toggle:active {
  transform: scale(0.95);
}

.sidebar.collapsed .panel-collapse-toggle {
  right: 50%;
  transform: translateX(50%);
}

.sidebar.collapsed .panel-collapse-toggle:hover {
  transform: translateX(50%) scale(1.05);
}

/* Rotate icon when collapsed */
.panel-collapse-toggle .toggle-icon {
  transition: transform var(--transition-fast) var(--transition-easing);
}

.sidebar.collapsed .panel-collapse-toggle .toggle-icon {
  transform: rotate(180deg);
}

/* ========================================
   PAGE HEADER
   ======================================== */

.page-title {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--transition-fast) var(--transition-easing);
}

.sidebar.collapsed .page-title {
  justify-content: center;
  font-size: var(--font-size-lg);
}

.page-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.page-desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-lg);
  transition: opacity var(--transition-fast) var(--transition-easing);
}

/* ========================================
   FUNCTION MODULE CARDS
   ======================================== */

.module-card {
  background: var(--color-bg-control);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transition: all var(--transition-fast) var(--transition-easing);
}

.module-card:hover {
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.sidebar.collapsed .module-card {
  background: transparent;
  margin-bottom: var(--spacing-sm);
}

.sidebar.collapsed .module-card:hover {
  background: var(--color-bg-control);
  transform: translateY(0);
}

/* Module Header - 56px height as per spec */
.module-header {
  height: var(--layout-function-card-height);
  min-height: var(--layout-function-card-height);
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--color-bg-control) 0%, var(--color-bg-hover) 100%);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: all var(--transition-fast) var(--transition-easing);
}

.module-header:hover {
  background: linear-gradient(135deg, var(--color-bg-hover) 0%, var(--color-primary-900) 100%);
}

.module-header:active {
  transform: scale(0.98);
}

.sidebar.collapsed .module-header {
  justify-content: center;
  padding: var(--spacing-sm);
  background: transparent;
}

.module-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: color var(--transition-fast) var(--transition-easing);
  white-space: nowrap;
  overflow: hidden;
}

.module-card:hover .module-title {
  color: var(--color-primary-400);
}

.module-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.module-arrow {
  color: var(--color-primary-500);
  transition: transform var(--transition-fast) var(--transition-easing),
              color var(--transition-fast) var(--transition-easing);
  font-size: 14px;
  flex-shrink: 0;
}

.module-card:hover .module-arrow {
  color: var(--color-primary-400);
}

.module-card.collapsed .module-arrow {
  transform: rotate(-90deg);
}

/* Module Content */
.module-content {
  padding: var(--spacing-lg);
  overflow: hidden;
  transition: max-height 0.4s var(--transition-easing),
              opacity var(--transition-fast) ease-out,
              padding var(--transition-fast) ease-out;
  opacity: 1;
}

.module-card.collapsed .module-content {
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* ========================================
   FORM CONTROLS - 36px height as per spec
   ======================================== */

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-normal);
}

.form-select,
.form-input,
textarea.form-select {
  width: 100%;
  height: var(--layout-form-control-height);
  min-height: var(--layout-form-control-height);
  padding: 0 14px;
  background: var(--color-bg-main);
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all var(--transition-fast) var(--transition-easing);
  outline: none;
}

textarea.form-select {
  height: auto;
  min-height: 80px;
  padding: var(--spacing-sm) 14px;
  resize: vertical;
  cursor: text;
}

.form-select:hover,
.form-input:hover {
  border-color: var(--color-primary-500);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.form-select:focus,
.form-input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

/* ========================================
   TAG CLOUD
   ======================================== */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.tag {
  padding: var(--spacing-sm) 14px;
  background: var(--color-bg-main);
  border: 1px solid transparent;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast) var(--transition-easing);
  user-select: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.tag::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.tag:hover::before {
  width: 200px;
  height: 200px;
}

.tag:hover {
  color: var(--color-primary-400);
  border-color: var(--color-primary-500);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.tag:active {
  transform: translateY(0) scale(0.95);
}

.tag.active {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-500) 100%);
  color: white;
  border-color: var(--color-primary-500);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
}

.tag.multi-select.active {
  animation: tagPulse 0.3s ease-out;
}

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

/* ========================================
   UPLOAD AREA
   ======================================== */

.upload-area {
  border: 2px dashed var(--color-primary-500);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast) var(--transition-easing);
  background: var(--color-bg-main);
  position: relative;
  overflow: hidden;
}

.upload-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s;
}

.upload-area:hover::before {
  left: 100%;
}

.upload-area:hover {
  border-color: var(--color-primary-400);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.upload-area.dragover {
  border-color: var(--color-primary-400);
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.02);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-sm);
  transition: transform var(--transition-fast) var(--transition-easing);
}

.upload-area:hover .upload-icon {
  transform: scale(1.1) rotate(5deg);
}

.upload-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* ========================================
   SLIDERS
   ======================================== */

.slider-group {
  margin-top: var(--spacing-md);
}

.slider {
  width: 100%;
  height: 6px;
  background: var(--color-bg-control);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-primary-500);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  transition: all var(--transition-fast) var(--transition-easing);
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
}

.slider::-webkit-slider-thumb:active {
  transform: scale(1.1);
}

.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-primary-500);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  transition: all var(--transition-fast) var(--transition-easing);
}

.slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ========================================
   CHECKBOXES
   ======================================== */

.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(59, 130, 246, 0.05);
  border-radius: var(--border-radius-md);
  margin-top: var(--spacing-sm);
  transition: all var(--transition-fast) var(--transition-easing);
}

.checkbox-group:hover {
  background: rgba(59, 130, 246, 0.1);
}

.checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary-500);
}

.checkbox-group label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  flex: 1;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
  padding: 12px var(--spacing-lg);
  border: none;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast) var(--transition-easing);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  position: relative;
  overflow: hidden;
  min-height: var(--layout-min-clickable);
}

.btn::before {
  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;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-500) 100%);
  color: white;
  width: 100%;
  height: var(--layout-primary-button-height);
  min-width: var(--layout-primary-button-min-width);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

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

.sidebar.collapsed .btn-primary {
  width: var(--layout-min-clickable);
  min-width: var(--layout-min-clickable);
  padding: var(--spacing-sm);
}

/* ========================================
   INFO BOX
   ======================================== */

.info-box {
  background: rgba(59, 130, 246, 0.08);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-primary-500);
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: var(--color-bg-main);
  border-radius: var(--border-radius-sm);
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-bg-control);
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast) var(--transition-easing);
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-500);
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

@media (max-width: 768px) {
  .sidebar {
    width: var(--layout-function-panel-collapsed);
    padding: var(--spacing-md) var(--spacing-sm);
  }
  
  .sidebar .page-title span:not(.page-icon),
  .sidebar .page-desc,
  .sidebar .info-box,
  .sidebar .module-title span:not(.module-icon),
  .sidebar .module-content,
  .sidebar .form-label,
  .sidebar .form-select,
  .sidebar .tag-cloud,
  .sidebar .checkbox-group,
  .sidebar .slider-group,
  .sidebar .upload-text,
  .sidebar .btn span:not(.btn-icon) {
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */

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

.sidebar {
  animation: fadeInUp 0.5s ease-out;
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   PARAMETER PANEL STYLES
   ======================================== */

.parameter-panel {
  /* Inherits sidebar styles */
}

.parameter-panel-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-bg-control);
  color: var(--color-text-primary);
}

.parameter-panel-icon {
  font-size: var(--font-size-xl);
}

.parameter-panel-title {
  flex: 1;
}

.parameter-panel-content {
  transition: opacity var(--transition-fast) var(--transition-easing);
}

.parameter-empty-state {
  text-align: center;
  padding: var(--spacing-xxl) var(--spacing-lg);
  color: var(--color-text-secondary);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.parameter-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ========================================
   FUNCTION CARD SELECTION STYLES
   ======================================== */

.function-card {
  background: var(--color-bg-control);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--transition-fast) var(--transition-easing);
  border: 2px solid transparent;
  position: relative;
}

.function-card:hover {
  background: var(--color-bg-hover);
  transform: translateX(4px);
}

.function-card:active {
  transform: translateX(2px) scale(0.98);
}

.function-card.selected {
  border-color: var(--color-primary-500);
  background: rgba(59, 130, 246, 0.1);
}

.function-card.selected::before {
  content: '✓';
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  width: 20px;
  height: 20px;
  background: var(--color-primary-500);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.function-card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-primary);
}

.function-card-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
  line-height: var(--line-height-normal);
}

/* ========================================
   UPLOAD AREA DRAG AND DROP
   ======================================== */

.upload-area.drag-over {
  border-color: var(--color-primary-500);
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.02);
}

/* ========================================
   SLIDER VALUE DISPLAY
   ======================================== */

.slider-value {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-500);
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: rgba(59, 130, 246, 0.1);
  border-radius: var(--border-radius-sm);
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

@media (max-width: 768px) {
  .sidebar:not(.parameter-panel) {
    width: var(--layout-function-panel-collapsed);
    padding: var(--spacing-md) var(--spacing-sm);
  }
  
  .sidebar:not(.parameter-panel) .page-title span:not(.page-icon),
  .sidebar:not(.parameter-panel) .page-desc,
  .sidebar:not(.parameter-panel) .info-box,
  .sidebar:not(.parameter-panel) .module-title span:not(.module-icon),
  .sidebar:not(.parameter-panel) .module-content {
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

.function-card:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.parameter-panel-content:focus-within {
  /* Ensure focus is visible within parameter panel */
}

/* ========================================
   ANIMATION KEYFRAMES
   ======================================== */

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

.parameter-form > * {
  animation: fadeIn var(--transition-fast) var(--transition-easing);
}