/* ============================================
   Progress Bars
   ============================================
   רכיבי פסי התקדמות
   ============================================ */

@layer components {
  /* ===== Progress Container ===== */
  .progress {
    position: relative;
    width: 100%;
    height: 0.5rem;
    background-color: var(--bg-secondary, var(--surface-100));
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }

  /* ===== Progress Bar ===== */
  .progress-bar {
    height: 100%;
    background-color: var(--primary-500);
    border-radius: var(--radius-full, 9999px);
    transition: width var(--transition-normal, 0.3s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 0;
  }

  /* ===== Progress Bar Variants ===== */
  .progress-bar-success {
    background-color: var(--success-500);
  }

  .progress-bar-warning {
    background-color: var(--warning-500);
  }

  .progress-bar-danger,
  .progress-bar-error {
    background-color: var(--error-500, var(--danger-500));
  }

  .progress-bar-info {
    background-color: var(--info-500);
  }

  .progress-bar-primary {
    background-color: var(--primary-500);
  }

  .progress-bar-secondary {
    background-color: var(--secondary-500);
  }

  /* ===== Progress Bar with Background Colors ===== */
  .progress-bar.bg-white {
    background-color: var(--text-inverse, #ffffff);
    color: var(--text-primary);
  }

  .progress-bar.bg-primary {
    background-color: var(--primary-500);
    color: var(--text-inverse);
  }

  .progress-bar.bg-success {
    background-color: var(--success-500);
    color: var(--text-inverse);
  }

  .progress-bar.bg-danger {
    background-color: var(--error-500, var(--danger-500));
    color: var(--text-inverse);
  }

  .progress-bar.bg-warning {
    background-color: var(--warning-500);
    color: var(--text-inverse);
  }

  .progress-bar.bg-info {
    background-color: var(--info-500);
    color: var(--text-inverse);
  }

  .progress-bar.bg-secondary {
    background-color: var(--secondary-500);
    color: var(--text-inverse);
  }

  /* ===== Progress Bar Striped ===== */
  .progress-bar-striped {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 1rem 1rem;
  }

  /* ===== Progress Bar Animated ===== */
  .progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
  }

  @keyframes progress-bar-stripes {
    0% {
      background-position: 1rem 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  /* ===== Progress Sizes ===== */
  .progress-thin {
    height: 4px;
  }

  .progress-sm {
    height: 8px;
  }

  .progress-md {
    height: 10px;
  }

  .progress-lg {
    height: 20px;
  }

  /* ===== Progress Rounded ===== */
  .progress-rounded-0 {
    border-radius: 0;
  }

  .progress-rounded-hidden {
    border-radius: 0;
  }

  .progress-rounded {
    border-radius: var(--radius-md, 0.375rem);
  }

  /* ===== Progress with Custom Styles ===== */
  .progress.progress-thin .progress-bar {
    border-radius: 0;
  }

  .progress.progress-rounded-hidden .progress-bar {
    border-radius: 0;
  }

  /* ===== Progress Size Modifiers (support for progress progress-sm) ===== */
  .progress.progress-sm {
    height: 8px;
  }

  .progress.progress-md {
    height: 10px;
  }

  .progress.progress-lg {
    height: 20px;
  }

  /* ===== Premium Progress Bars - עיצוב פרימיום ===== */
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  
  @keyframes progressGlow {
    0%, 100% {
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    }
    50% {
      box-shadow: 0 2px 16px rgba(59, 130, 246, 0.6);
    }
  }
  
  /* Premium Progress Card */
  .premium-progress-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  
  .premium-progress-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.5s ease;
  }
  
  .premium-progress-card:hover::before {
    left: 100%;
  }
  
  .premium-progress-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  }
  
  /* Premium Progress Container */
  .premium-progress {
    position: relative;
    overflow: hidden;
    height: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  }
  
  /* Premium Progress Bar */
  .premium-progress-bar {
    position: relative;
    height: 100%;
    border-radius: 12px;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    animation: progressGlow 2s ease-in-out infinite;
    overflow: hidden;
  }
  
  .premium-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
  }
  
  /* Premium Progress Bar Variants */
  .premium-progress-bar.bg-primary,
  .premium-progress-bar[data-variant="primary"] {
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-600) 50%, var(--primary-700) 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  }
  
  .premium-progress-bar.bg-success,
  .premium-progress-bar[data-variant="success"] {
    background: linear-gradient(90deg, var(--success-500) 0%, var(--success-600) 50%, var(--success-700) 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  }
  
  .premium-progress-bar.bg-warning,
  .premium-progress-bar[data-variant="warning"] {
    background: linear-gradient(90deg, var(--warning-500) 0%, var(--warning-600) 50%, var(--warning-700) 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
  }
  
  .premium-progress-bar.bg-danger,
  .premium-progress-bar.bg-error,
  .premium-progress-bar[data-variant="danger"] {
    background: linear-gradient(90deg, var(--error-500) 0%, var(--error-600) 50%, var(--error-700) 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  }
  
  .premium-progress-bar.bg-info,
  .premium-progress-bar[data-variant="info"] {
    background: linear-gradient(90deg, var(--info-500) 0%, var(--info-600) 50%, var(--info-700) 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  }
}