/*
 * Progress Bar Component Styles - Pop Art Edition
 * Stacked progress bars with bold borders and optional shimmer animation
 *
 * TSX Reference (lines 378-393):
 * - h-6 bar with border-4 border-black
 * - bg-gray-200 (light) / bg-gray-700 (dark) track
 * - Segments stack horizontally
 * - Optional diagonal stripe pattern for "pending/planned" segments
 * - Shimmer animation: linear-gradient overlay moving left-to-right
 */

@layer components {
  /* ==========================================================================
     Progress Bar Container
     ========================================================================== */

  .progress-bar {
    position: relative;
    height: 32px;
    background: light-dark(#e5e7eb, #374151);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    overflow: hidden;
  }

  /* Stacked variant - segments side by side */
  .progress-bar-stacked {
    display: flex;
  }

  /* ==========================================================================
     Progress Segments
     ========================================================================== */

  .progress-segment {
    height: 100%;
    transition: width 0.3s ease;
  }

  /* Solid color segments */
  .progress-segment-green {
    background: var(--color-boom-green);
  }

  .progress-segment-blue {
    background: var(--color-wham-blue);
  }

  .progress-segment-yellow {
    background: var(--color-zap-yellow);
  }

  .progress-segment-pink {
    background: var(--color-kapow-pink);
  }

  .progress-segment-red {
    background: var(--color-pow-red);
  }

  .progress-segment-orange {
    background: var(--color-whoosh-orange);
  }

  /* Semantic color segments */
  .progress-segment-positive,
  .progress-segment-earned {
    background: var(--color-positive);
  }

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

  .progress-segment-negative,
  .progress-segment-danger {
    background: var(--color-negative);
  }

  /* ==========================================================================
     Striped Segments (for planned/pending/virtual amounts)
     Diagonal stripes indicate "not yet realized" value
     ========================================================================== */

  .progress-segment-striped {
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(0, 0, 0, 0.1) 4px,
      rgba(0, 0, 0, 0.1) 8px
    );
  }

  /* Striped variants with base colors */
  .progress-segment-green-striped {
    background-color: var(--color-boom-green);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(0, 0, 0, 0.15) 4px,
      rgba(0, 0, 0, 0.15) 8px
    );
  }

  .progress-segment-positive-striped,
  .progress-segment-pending,
  .progress-segment-planned {
    background-color: var(--color-positive);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255, 255, 255, 0.3) 4px,
      rgba(255, 255, 255, 0.3) 8px
    );
  }

  .progress-segment-blue-striped {
    background-color: var(--color-wham-blue);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255, 255, 255, 0.3) 4px,
      rgba(255, 255, 255, 0.3) 8px
    );
  }

  .progress-segment-pink-striped {
    background-color: var(--color-kapow-pink);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255, 255, 255, 0.3) 4px,
      rgba(255, 255, 255, 0.3) 8px
    );
  }

  .progress-segment-yellow-striped {
    background-color: var(--color-zap-yellow);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(0, 0, 0, 0.1) 4px,
      rgba(0, 0, 0, 0.1) 8px
    );
  }

  .progress-segment-orange-striped {
    background-color: var(--color-whoosh-orange);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255, 255, 255, 0.3) 4px,
      rgba(255, 255, 255, 0.3) 8px
    );
  }

  .progress-segment-red-striped,
  .progress-segment-negative-striped,
  .progress-segment-danger-striped {
    background-color: var(--color-negative);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255, 255, 255, 0.3) 4px,
      rgba(255, 255, 255, 0.3) 8px
    );
  }

  .progress-segment-expenses {
    background: var(--color-kapow-pink);
  }

  /* ==========================================================================
     Shimmer Animation (optional loading/active effect)
     ========================================================================== */

  .progress-bar-shimmer::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: progress-shimmer 2s infinite;
  }

  @keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* ==========================================================================
     Progress Bar Sizes
     ========================================================================== */

  .progress-bar-sm {
    height: 20px;
    border-width: var(--border-medium);
  }

  .progress-bar-lg {
    height: 40px;
  }

  /* ==========================================================================
     Progress Legend
     ========================================================================== */

  .progress-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-3);
  }

  .progress-legend-centered {
    justify-content: center;
  }

  .progress-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }

  .progress-legend-swatch {
    width: 12px;
    height: 12px;
    border: var(--border-thin) solid var(--color-comic-border);
    flex-shrink: 0;
  }

  .progress-legend-label {
    color: var(--color-ink-muted);
  }

  .progress-legend-value {
    font-weight: var(--font-bold);
    color: var(--color-ink);
  }

  /* ==========================================================================
     Progress Header (label + value display)
     ========================================================================== */

  .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-block-end: var(--space-1);
  }

  .progress-label {
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  .progress-value {
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  /* ==========================================================================
     Budget-specific Breakdown (grid layout for multiple values)
     ========================================================================== */

  .progress-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-block-start: var(--space-4);
  }

  .progress-breakdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }

  .progress-breakdown-swatch {
    width: 10px;
    height: 10px;
    border: var(--border-thin) solid var(--color-comic-border);
    flex-shrink: 0;
  }

  .progress-breakdown-label {
    color: var(--color-ink-muted);
    flex: 1;
  }

  .progress-breakdown-value {
    font-weight: var(--font-medium);
    color: var(--color-ink);
    text-align: right;
  }

  .progress-breakdown-total {
    grid-column: 1 / -1;
    padding-block-start: var(--space-3);
    border-block-start: var(--border-thin) solid var(--color-comic-border);
    font-weight: var(--font-semibold);
  }

  .progress-breakdown-total .progress-breakdown-label {
    color: var(--color-ink);
  }
}