/* Element Plus Custom Styling */

/* Override Element Plus CSS variables to match your design */
:root {
  --el-color-primary: #20b2aa;
  --el-color-primary-light-3: rgba(32, 178, 170, 0.3);
  --el-color-primary-light-5: rgba(32, 178, 170, 0.5);
  --el-color-primary-light-7: rgba(32, 178, 170, 0.7);
  --el-color-primary-dark-2: #1a9b94;
  
  --el-color-success: #28a745;
  --el-color-warning: #ffc107;
  --el-color-danger: #dc3545;
  --el-color-info: #4a90c2;
  
  --el-border-radius-base: 6px;
  --el-border-radius-small: 4px;
  --el-border-radius-round: 20px;
  
  --el-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  
  --el-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --el-box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Header Menu Styling */
.header-menu {
  border-bottom: none !important;
  background: transparent !important;
}

.header-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  color: var(--color-primary) !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-menu .el-menu-item:hover {
  background-color: rgba(74, 144, 194, 0.1) !important;
  color: var(--color-primary) !important;
}

.header-menu .el-menu-item.is-active {
  background-color: var(--color-accent-purple) !important;
  color: white !important;
  border-bottom-color: var(--color-accent-purple) !important;
}

.header-menu .el-menu-item.is-active .el-badge__content {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: var(--color-accent-purple) !important;
}

/* Navigation Badge Positioning */
.nav-badge {
  margin-left: 8px;
}

.nav-badge .el-badge__content {
  background-color: var(--color-accent-teal) !important;
  border: none !important;
  font-weight: 600;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
}

/* Card Styling */
.url-form.el-card {
  max-width: 500px;
  box-shadow: var(--box-shadow) !important;
  border: 1px solid var(--color-border-light) !important;
}

.el-card__body {
  padding: var(--spacing-xl) !important;
}

/* Form Items */
.el-form-item__label {
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  font-size: 0.875rem !important;
}

.el-input__wrapper {
  border-radius: var(--border-radius) !important;
  box-shadow: none !important;
  border: 2px solid var(--color-border-light) !important;
  transition: all 0.2s ease !important;
}

.el-input__wrapper:hover {
  border-color: var(--color-primary) !important;
}

.el-input__wrapper.is-focus {
  border-color: var(--color-accent-teal) !important;
  box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.1) !important;
}

.el-input__inner {
  font-family: inherit !important;
  font-size: 0.875rem !important;
}

/* Buttons */
.el-button {
  border-radius: var(--border-radius) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
}

.el-button--primary {
  background-color: var(--color-accent-teal) !important;
  border-color: var(--color-accent-teal) !important;
}

.el-button--primary:hover {
  background-color: #1a9b94 !important;
  border-color: #1a9b94 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.25) !important;
}

.el-button--primary:active {
  transform: translateY(0);
}

/* Alerts */
.el-alert {
  border-radius: var(--border-radius) !important;
  border: none !important;
}

.el-alert--success {
  background-color: #d4edda !important;
  color: #155724 !important;
}

/* Form validation messages */
.error-message {
  color: #dc3545;
  font-size: 0.75rem;
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.success-message {
  color: #28a745;
  font-size: 0.75rem;
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.form-hint {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  margin-top: var(--spacing-xs);
  font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-menu {
    flex-wrap: wrap;
  }
  
  .header-menu .el-menu-item {
    padding: 0 12px !important;
    font-size: 0.875rem;
  }
  
  .nav-badge .el-badge__content {
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
  }
}

/* Hide scrollbars on menu */
.el-menu--horizontal > .el-menu-item:last-child {
  margin-right: 0;
}

/* Menu item icon alignment */
.el-menu-item .el-icon {
  margin-right: 4px;
}

/* Article action buttons */
.article-actions .el-button {
  margin-right: 8px;
}

.article-actions .el-button--small {
  padding: 6px 12px;
  font-size: 12px;
}

/* Section action buttons */
.section-actions .el-button {
  margin-left: 8px;
}

/* Button hover effects */
.el-button:hover {
  transform: translateY(-1px);
}

.el-button:active {
  transform: translateY(0);
}

/* Danger button styling */
.el-button--danger.is-plain:hover {
  background-color: var(--el-color-danger);
  border-color: var(--el-color-danger);
  color: white;
}

/* Loading state improvements */
.el-button.is-loading {
  pointer-events: none;
}

/* Icon spacing in buttons */
.el-button .el-icon + span {
  margin-left: 4px;
}