// ==========================================================================
// Utility Classes
// Professional Resume Builder - Helper Classes
// ==========================================================================

// Spacing utilities (extending Bootstrap)
.spacing-xs { margin: var(--spacing-xs); }
.spacing-sm { margin: var(--spacing-sm); }
.spacing-md { margin: var(--spacing-md); }
.spacing-lg { margin: var(--spacing-lg); }
.spacing-xl { margin: var(--spacing-xl); }
.spacing-2xl { margin: var(--spacing-2xl); }
.spacing-3xl { margin: var(--spacing-3xl); }
.spacing-4xl { margin: var(--spacing-4xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }
.p-4xl { padding: var(--spacing-4xl); }

// Margin utilities
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

// Text utilities
.text-primary-custom {
  color: var(--brand-primary) !important;
}

.text-success-custom {
  color: var(--brand-success) !important;
}

.text-warning-custom {
  color: var(--brand-warning) !important;
}

.text-danger-custom {
  color: var(--brand-danger) !important;
}

.text-info-custom {
  color: var(--brand-info) !important;
}

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-gradient-success {
  background: var(--brand-gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.text-shadow-lg {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

// Background utilities
.bg-gradient-primary {
  background: var(--brand-gradient) !important;
  color: var(--color-white);
}

.bg-gradient-success {
  background: var(--brand-gradient-success) !important;
  color: var(--color-white);
}

.bg-gradient-warning {
  background: var(--brand-gradient-warning) !important;
  color: var(--color-white);
}

.bg-gradient-danger {
  background: var(--brand-gradient-danger) !important;
  color: var(--color-white);
}

.bg-gradient-info {
  background: var(--brand-gradient-info) !important;
  color: var(--color-white);
}

.bg-primary-light {
  background-color: var(--brand-primary-light) !important;
  color: var(--brand-primary-dark);
}

.bg-success-light {
  background-color: var(--brand-success-light) !important;
  color: var(--brand-success-dark);
}

.bg-warning-light {
  background-color: var(--brand-warning-light) !important;
  color: var(--brand-warning-dark);
}

.bg-danger-light {
  background-color: var(--brand-danger-light) !important;
  color: var(--brand-danger-dark);
}

.bg-info-light {
  background-color: var(--brand-info-light) !important;
  color: var(--brand-info-dark);
}

// Border utilities
.border-primary-custom {
  border-color: var(--brand-primary) !important;
}

.border-success-custom {
  border-color: var(--brand-success) !important;
}

.border-warning-custom {
  border-color: var(--brand-warning) !important;
}

.border-danger-custom {
  border-color: var(--brand-danger) !important;
}

.border-info-custom {
  border-color: var(--brand-info) !important;
}

.border-radius-xs {
  border-radius: var(--border-radius-xs) !important;
}

.border-radius-sm {
  border-radius: var(--border-radius-sm) !important;
}

.border-radius-md {
  border-radius: var(--border-radius-md) !important;
}

.border-radius-lg {
  border-radius: var(--border-radius-lg) !important;
}

.border-radius-xl {
  border-radius: var(--border-radius-xl) !important;
}

.border-radius-full {
  border-radius: var(--border-radius-full) !important;
}

// Shadow utilities
.shadow-xs {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-sm {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

.shadow-none {
  box-shadow: none !important;
}

// Colored shadows
.shadow-primary {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
}

.shadow-success {
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15) !important;
}

.shadow-warning {
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15) !important;
}

.shadow-danger {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.shadow-info {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

// Display utilities
.d-grid {
  display: grid !important;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-gap-1 {
  gap: 0.25rem !important;
}

.grid-gap-2 {
  gap: 0.5rem !important;
}

.grid-gap-3 {
  gap: 1rem !important;
}

.grid-gap-4 {
  gap: 1.5rem !important;
}

.grid-gap-5 {
  gap: 2rem !important;
}

// Flexbox utilities
.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flex-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.flex-around {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.flex-column-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

// Position utilities
.position-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.position-center-x {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.position-center-y {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

// Visibility utilities
.invisible {
  visibility: hidden !important;
}

.visible {
  visibility: visible !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

// Cursor utilities
.cursor-pointer {
  cursor: pointer !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-help {
  cursor: help !important;
}

// Transform utilities
.transform-none {
  transform: none !important;
}

.scale-90 {
  transform: scale(0.9) !important;
}

.scale-95 {
  transform: scale(0.95) !important;
}

.scale-100 {
  transform: scale(1) !important;
}

.scale-105 {
  transform: scale(1.05) !important;
}

.scale-110 {
  transform: scale(1.1) !important;
}

.rotate-90 {
  transform: rotate(90deg) !important;
}

.rotate-180 {
  transform: rotate(180deg) !important;
}

.rotate-270 {
  transform: rotate(270deg) !important;
}

// Transition utilities
.transition-none {
  transition: none !important;
}

.transition-all {
  transition: all 0.15s ease-in-out !important;
}

.transition-slow {
  transition: all 0.3s ease-in-out !important;
}

.transition-fast {
  transition: all 0.1s ease-in-out !important;
}

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

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

// Hover utilities
.hover-lift {
  transition: transform 0.2s ease-in-out !important;
  
  &:hover {
    transform: translateY(-2px) !important;
  }
}

.hover-scale {
  transition: transform 0.2s ease-in-out !important;
  
  &:hover {
    transform: scale(1.05) !important;
  }
}

.hover-rotate {
  transition: transform 0.2s ease-in-out !important;
  
  &:hover {
    transform: rotate(5deg) !important;
  }
}

// Loading states
.loading-skeleton {
  background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--border-radius-sm);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

// Responsive utilities for custom breakpoints
@include media-breakpoint-up(xs) {
  .d-xs-block { display: block !important; }
  .d-xs-none { display: none !important; }
}

@include media-breakpoint-up(sm) {
  .d-sm-block { display: block !important; }
  .d-sm-none { display: none !important; }
}

@include media-breakpoint-up(md) {
  .d-md-block { display: block !important; }
  .d-md-none { display: none !important; }
}

@include media-breakpoint-up(lg) {
  .d-lg-block { display: block !important; }
  .d-lg-none { display: none !important; }
}

@include media-breakpoint-up(xl) {
  .d-xl-block { display: block !important; }
  .d-xl-none { display: none !important; }
}

// Print utilities
@media print {
  .print-hidden {
    display: none !important;
  }
  
  .print-visible {
    display: block !important;
  }
  
  .print-break-before {
    page-break-before: always !important;
  }
  
  .print-break-after {
    page-break-after: always !important;
  }
  
  .print-no-break {
    page-break-inside: avoid !important;
  }
}

// Accessibility utilities
.sr-only-focusable {
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

.focus-visible {
  &:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
  }
}

// High contrast mode support
@media (prefers-contrast: high) {
  .text-muted {
    color: var(--color-gray-800) !important;
  }
  
  .border {
    border-color: var(--color-gray-800) !important;
  }
  
  .shadow-sm,
  .shadow-md,
  .shadow-lg {
    box-shadow: none !important;
    border: 1px solid var(--color-gray-800) !important;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}