/**
 * Admin Panel Design Tokens
 * Extends ITS App Design System for admin-specific components
 * Version 2.0.0 - Complete Redesign (2025)
 *
 * Design Philosophy:
 * - Modern glass-morphism effects
 * - Consistent spacing hierarchy (4px, 8px, 12px, 16px, 24px, 32px, 48px)
 * - Elevation system (4 levels of shadows)
 * - Smooth transitions (150ms, 200ms, 300ms)
 * - Professional polish with TailAdmin inspiration
 */

/* ===== SPACING SCALE ===== */
:root {
  --admin-space-1: 0.25rem; /* 4px */
  --admin-space-2: 0.5rem;  /* 8px */
  --admin-space-3: 0.75rem; /* 12px */
  --admin-space-4: 1rem;    /* 16px */
  --admin-space-5: 1.25rem; /* 20px */
  --admin-space-6: 1.5rem;  /* 24px */
  --admin-space-8: 2rem;    /* 32px */
  --admin-space-12: 3rem;   /* 48px */
  --admin-space-16: 4rem;   /* 64px */
}

/* ===== BORDER RADIUS SCALE ===== */
:root {
  --admin-radius-sm: 0.5rem;   /* 8px */
  --admin-radius-md: 0.75rem;  /* 12px */
  --admin-radius-lg: 1rem;     /* 16px */
  --admin-radius-xl: 1.25rem;  /* 20px */
  --admin-radius-2xl: 1.5rem;  /* 24px */
  --admin-radius-full: 9999px; /* Full circle */
}

/* ===== ELEVATION SYSTEM (SHADOWS) ===== */
:root {
  --admin-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --admin-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  --admin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
  --admin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --admin-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
  --admin-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --admin-shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.2), 0 0 40px rgba(139, 92, 246, 0.1);
}

/* ===== TRANSITION TOKENS ===== */
:root {
  --admin-transition-fast: 150ms ease-out;
  --admin-transition-normal: 200ms ease-out;
  --admin-transition-slow: 300ms ease-out;
  --admin-transition-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== COMPONENT SIZES ===== */
:root {
  --admin-input-height: 2.75rem; /* 44px */
  --admin-button-height-lg: 2.75rem; /* 44px */
  --admin-button-height-md: 2.5rem; /* 40px */
  --admin-button-height-sm: 2.25rem; /* 36px */
}

/* ===== ADMIN CARD GRADIENTS ===== */

/* Base admin card with modern gradient background */
.admin-card {
  background: linear-gradient(135deg, rgba(28, 28, 30, 0.95) 0%, rgba(20, 20, 22, 0.98) 100%);
  border: 1px solid rgba(58, 58, 60, 0.6);
  border-radius: var(--admin-radius-xl);
  padding: var(--admin-space-6);
  transition: all var(--admin-transition-normal);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.admin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
  opacity: 0;
  transition: opacity var(--admin-transition-normal);
}

.admin-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: var(--admin-shadow-lg), var(--admin-shadow-glow-purple);
  transform: translateY(-2px);
}

.admin-card:hover::before {
  opacity: 1;
}

/* Stat card with modern gradient and glass effect */
.admin-stat-card {
  background: linear-gradient(135deg, rgba(28, 28, 30, 0.95) 0%, rgba(20, 20, 22, 0.98) 100%);
  border: 1px solid rgba(58, 58, 60, 0.6);
  border-radius: var(--admin-radius-xl);
  padding: var(--admin-space-6);
  transition: all var(--admin-transition-normal);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.admin-stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: all var(--admin-transition-slow);
}

.admin-stat-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: var(--admin-shadow-lg), var(--admin-shadow-glow-purple);
  transform: translateY(-4px);
}

.admin-stat-card:hover::before {
  opacity: 1.5;
  transform: scale(1.1);
}

/* Icon container within cards - larger and more polished */
.admin-card-icon {
  width: 3rem; /* 48px */
  height: 3rem; /* 48px */
  border-radius: var(--admin-radius-lg);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--admin-transition-normal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-stat-card:hover .admin-card-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.12));
  transform: scale(1.08) rotate(5deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 20px rgba(139, 92, 246, 0.3);
}

/* ===== PIPELINE HEALTH CARDS ===== */

/* Pipeline health cards with status accent */
.admin-pipeline-card {
  position: relative;
  background: rgba(28, 28, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 1.25rem;
  transition: all 0.2s ease-out;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.admin-pipeline-card:hover {
  background: rgba(28, 28, 30, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.admin-pipeline-status-accent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  transition: width 0.2s ease-out;
  border-radius: 1rem 0 0 1rem;
}

.admin-pipeline-card:hover .admin-pipeline-status-accent {
  width: 4px;
}

.admin-pipeline-card.status-ok .admin-pipeline-status-accent {
  background: linear-gradient(to bottom, #10b981, #059669);
}

.admin-pipeline-card.status-warning .admin-pipeline-status-accent {
  background: linear-gradient(to bottom, #f59e0b, #d97706);
}

.admin-pipeline-card.status-stale .admin-pipeline-status-accent {
  background: linear-gradient(to bottom, #ef4444, #dc2626);
}

/* ===== ADMIN INPUT FIELDS ===== */

.admin-input,
.admin-input-field {
  width: 100%;
  height: var(--admin-input-height);
  padding: 0.75rem var(--admin-space-4);
  background-color: rgba(28, 28, 30, 0.6);
  border: 1.5px solid rgba(58, 58, 60, 0.8);
  border-radius: var(--admin-radius-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 400;
  transition: all var(--admin-transition-normal);
  backdrop-filter: blur(5px);
}

.admin-input::placeholder,
.admin-input-field::placeholder {
  color: rgba(156, 163, 175, 0.6);
  font-weight: 400;
}

.admin-input:hover:not(:disabled):not(:focus),
.admin-input-field:hover:not(:disabled):not(:focus) {
  border-color: rgba(139, 92, 246, 0.5);
  background-color: rgba(28, 28, 30, 0.8);
}

.admin-input:focus,
.admin-input-field:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
  background-color: rgba(28, 28, 30, 0.9);
}

.admin-input:disabled,
.admin-input-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: rgba(20, 20, 22, 0.5);
}

/* Select fields */
select.admin-input,
select.admin-input-field {
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  appearance: none;
}

/* Textarea */
textarea.admin-input,
textarea.admin-input-field {
  height: auto;
  min-height: 6rem;
  resize: vertical;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  line-height: 1.5;
}

/* Input with icon support */
.admin-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-input-group .admin-input-icon {
  position: absolute;
  left: 1rem;
  color: rgba(156, 163, 175, 0.6);
  pointer-events: none;
  font-size: 1rem;
}

.admin-input-group .admin-input {
  padding-left: 2.75rem;
}

/* Error state */
.admin-input.error,
.admin-input-field.error {
  border-color: rgba(239, 68, 68, 0.8);
}

.admin-input.error:focus,
.admin-input-field.error:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

/* Success state */
.admin-input.success,
.admin-input-field.success {
  border-color: rgba(16, 185, 129, 0.8);
}

.admin-input.success:focus,
.admin-input-field.success:focus {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

/* ===== ADMIN LOGO ===== */

.admin-logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
}

.admin-logo {
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

/* ===== ADMIN SIDEBAR ===== */

.admin-sidebar-item {
  transition: all var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-md);
}

.admin-sidebar-item:hover:not(.active) {
  background-color: rgba(139, 92, 246, 0.1);
}

.admin-sidebar-item.active {
  background-color: var(--primary-600);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.admin-sidebar-item i {
  transition: transform var(--duration-fast) var(--ease-out);
}

.admin-sidebar-item:hover i {
  transform: scale(1.1);
}

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

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2);
  padding: 0.75rem var(--admin-space-6);
  height: var(--admin-button-height-lg);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--admin-radius-md);
  transition: all var(--admin-transition-normal);
  cursor: pointer;
  border: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

.admin-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity var(--admin-transition-fast);
}

.admin-btn:hover::before {
  opacity: 1;
}

.admin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* Primary Button */
.admin-btn-primary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 1) 0%, rgba(124, 77, 255, 1) 100%);
  color: #ffffff;
  box-shadow: var(--admin-shadow-sm), 0 0 0 rgba(139, 92, 246, 0.4);
}

.admin-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--admin-shadow-lg), 0 0 20px rgba(139, 92, 246, 0.4);
}

/* Secondary Button */
.admin-btn-secondary {
  background-color: rgba(28, 28, 30, 0.8);
  border: 1.5px solid rgba(58, 58, 60, 0.8);
  color: var(--text-primary);
  backdrop-filter: blur(5px);
}

.admin-btn-secondary:hover:not(:disabled) {
  background-color: rgba(28, 28, 30, 1);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
  box-shadow: var(--admin-shadow-sm);
}

/* Danger Button */
.admin-btn-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 1) 100%);
  color: #ffffff;
  box-shadow: var(--admin-shadow-sm);
}

.admin-btn-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--admin-shadow-lg), 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Ghost Button */
.admin-btn-ghost {
  background-color: transparent;
  color: rgba(156, 163, 175, 0.9);
}

.admin-btn-ghost:hover:not(:disabled) {
  background-color: rgba(28, 28, 30, 0.6);
  color: var(--text-primary);
}

/* Button Sizes */
.admin-btn-sm {
  padding: 0.5rem var(--admin-space-4);
  height: var(--admin-button-height-sm);
  font-size: 0.8125rem;
}

.admin-btn-md {
  padding: 0.625rem var(--admin-space-5);
  height: var(--admin-button-height-md);
  font-size: 0.875rem;
}

/* Icon-only Button */
.admin-btn-icon {
  padding: 0;
  width: var(--admin-button-height-lg);
  height: var(--admin-button-height-lg);
}

.admin-btn-icon.admin-btn-sm {
  width: var(--admin-button-height-sm);
  height: var(--admin-button-height-sm);
}

/* Loading State */
.admin-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.admin-btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: admin-btn-spin 0.6s linear infinite;
}

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

/* ===== ADMIN TABLE ENHANCEMENTS ===== */

.admin-table-wrapper {
  background: linear-gradient(to bottom right, var(--surface-raised), var(--surface-base));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.admin-table-header {
  background: linear-gradient(to right, var(--surface-hover), var(--surface-base));
  border-bottom: 2px solid var(--border-emphasis);
}

/* ===== ADMIN EMPTY STATES ===== */

.admin-empty-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: linear-gradient(to bottom, transparent, rgba(139, 92, 246, 0.02));
  border-radius: var(--radius-lg);
}

.admin-empty-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--space-4);
  opacity: 0.3;
  color: var(--text-tertiary);
}

.admin-empty-state h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.admin-empty-state p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ===== ADMIN BADGES ===== */

.admin-badge-with-dot {
  position: relative;
  padding-left: 1.5rem;
}

.admin-badge-with-dot::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

/* ===== ADMIN DRAWER ENHANCEMENTS ===== */

.admin-drawer-overlay {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.5);
}

.admin-drawer-content {
  background: linear-gradient(to bottom, var(--surface-raised), var(--surface-base));
  box-shadow:
    -4px 0 20px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 0, 0, 0.2);
}

/* ===== RESPONSIVE UTILITIES ===== */

@media (max-width: 768px) {
  .admin-stat-card {
    padding: var(--space-4);
  }

  .admin-card-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .admin-logo {
    max-height: 32px;
  }
}

/* ===== LOADING STATES ===== */

.admin-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-raised) 0%,
    var(--surface-overlay) 50%,
    var(--surface-raised) 100%
  );
  background-size: 200% 100%;
  animation: admin-skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes admin-skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== UTILITY CLASSES ===== */

.admin-hover-lift {
  transition: transform var(--admin-transition-normal);
}

.admin-hover-lift:hover {
  transform: translateY(-2px);
}

.admin-shadow-glow-purple {
  box-shadow: var(--admin-shadow-glow-purple);
}

.admin-border-gradient {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    linear-gradient(to right, var(--primary-500), var(--primary-300)) border-box;
}

/* Glass-morphism utilities */
.admin-glass {
  background: rgba(28, 28, 30, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-glass-strong {
  background: rgba(28, 28, 30, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== CUSTOM CHECKBOX SYSTEM ===== */

.admin-checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--admin-radius-md);
  border: 1.5px solid rgba(58, 58, 60, 0.8);
  background: rgba(28, 28, 30, 0.6);
  transition: all var(--admin-transition-normal);
  cursor: pointer;
}

.admin-checkbox-container:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(28, 28, 30, 0.8);
}

.admin-checkbox-container.checked {
  border-color: rgba(139, 92, 246, 0.8);
  background: rgba(139, 92, 246, 0.05);
}

.admin-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
  border: 2px solid rgba(139, 92, 246, 0.6);
  background: rgba(28, 28, 30, 0.8);
  cursor: pointer;
  position: relative;
  transition: all var(--admin-transition-fast);
  flex-shrink: 0;
}

.admin-checkbox:hover {
  border-color: rgba(139, 92, 246, 0.8);
  background: rgba(139, 92, 246, 0.1);
}

.admin-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.admin-checkbox:checked {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: #8b5cf6;
}

.admin-checkbox:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== MODERN BADGE SYSTEM ===== */

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--admin-radius-full);
  line-height: 1;
  transition: all var(--admin-transition-fast);
}

/* Badge with dot indicator */
.admin-badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* Badge Variants */
.admin-badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: rgba(52, 211, 153, 1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.admin-badge-success.admin-badge-dot::before {
  background-color: rgba(52, 211, 153, 1);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

.admin-badge-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: rgba(248, 113, 113, 1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.admin-badge-danger.admin-badge-dot::before {
  background-color: rgba(248, 113, 113, 1);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.admin-badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: rgba(251, 191, 36, 1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.admin-badge-warning.admin-badge-dot::before {
  background-color: rgba(251, 191, 36, 1);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.admin-badge-info {
  background-color: rgba(59, 130, 246, 0.15);
  color: rgba(96, 165, 250, 1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.admin-badge-info.admin-badge-dot::before {
  background-color: rgba(96, 165, 250, 1);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.admin-badge-neutral {
  background-color: rgba(156, 163, 175, 0.15);
  color: rgba(209, 213, 219, 1);
  border: 1px solid rgba(156, 163, 175, 0.3);
}

.admin-badge-neutral.admin-badge-dot::before {
  background-color: rgba(209, 213, 219, 1);
}

.admin-badge-primary {
  background-color: rgba(139, 92, 246, 0.15);
  color: rgba(167, 139, 250, 1);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.admin-badge-primary.admin-badge-dot::before {
  background-color: rgba(167, 139, 250, 1);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

/* Badge hover effect */
.admin-badge:hover {
  transform: scale(1.05);
}

/* ===== PAGE TRANSITIONS ===== */

.admin-page-enter-active,
.admin-page-leave-active {
  transition: opacity var(--admin-transition-slow), transform var(--admin-transition-slow);
}

.admin-page-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.admin-page-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* ===== RESPONSIVE SPACING ===== */

@media (max-width: 768px) {
  :root {
    --admin-space-6: 1rem; /* 16px on mobile */
    --admin-space-8: 1.5rem; /* 24px on mobile */
  }
}

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

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

.animate-fade-in {
  animation: fade-in var(--admin-transition-slow) ease-out;
}

/* ===== DRAWER TRANSITIONS ===== */

/* Drawer transition - smooth slide from right with backdrop fade */
.drawer-enter-active,
.drawer-leave-active {
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-enter-from,
.drawer-leave-to {
  opacity: 0;
}

.drawer-enter-active .drawer-panel,
.drawer-leave-active .drawer-panel {
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
}

.drawer-enter-from .drawer-panel {
  transform: translateX(100%);
}

.drawer-leave-to .drawer-panel {
  transform: translateX(100%);
}

/* Backdrop fade transition */
.drawer-enter-active .fixed.inset-0.bg-black\/60,
.drawer-leave-active .fixed.inset-0.bg-black\/60 {
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-enter-from .fixed.inset-0.bg-black\/60,
.drawer-leave-to .fixed.inset-0.bg-black\/60 {
  opacity: 0;
}

/* ===== MODAL TRANSITIONS ===== */

/* Modal transition - smooth scale and fade */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-active .bg-surface-raised,
.modal-leave-active .bg-surface-raised {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-enter-from .bg-surface-raised {
  transform: scale(0.95);
  opacity: 0;
}

.modal-leave-to .bg-surface-raised {
  transform: scale(0.95);
  opacity: 0;
}

/* Scale-in animation for modal content */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scale-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== DRAWER PANEL SHADOW ENHANCEMENT ===== */

.drawer-panel {
  box-shadow:
    -10px 0 40px -10px rgba(0, 0, 0, 0.4),
    -20px 0 80px -20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ===== SIDEBAR EXPAND/COLLAPSE TRANSITIONS ===== */

/* Smooth height transition for collapsible groups */
.expand-enter-active,
.expand-leave-active {
  transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  height: 0;
  opacity: 0;
}

.expand-enter-to,
.expand-leave-from {
  height: auto;
  opacity: 1;
}

/* Rotate chevron icon */
.rotate-90 {
  transform: rotate(90deg);
}