/*
 * Card Component Styles
 * Pop Art Design System - Bold, comic book-inspired cards
 */

@layer components {
  /* Reference: .card-comic { box-shadow: 6px 6px 0 var(--shadow-color); }
     .card-comic:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-color); }
     All cards have: border-4 border-black */
  .card {
    --card-bg: var(--color-surface);

    background-color: var(--card-bg);
    border: 4px solid var(--color-comic-border);
    box-shadow: 6px 6px 0 var(--comic-shadow-color);
    overflow: hidden;
    transition: all 0.2s ease;

    /* All cards lift up on hover by default */
    &:hover {
      transform: translate(-2px, -2px);
      box-shadow: 8px 8px 0 var(--comic-shadow-color);
    }

    &:active {
      transform: translate(0, 0);
      box-shadow: 4px 4px 0 var(--comic-shadow-color);
    }
  }

  /* Static card - no hover animation */
  .card-static {
    &:hover {
      transform: none;
      box-shadow: 6px 6px 0 var(--comic-shadow-color);
    }

    &:active {
      transform: none;
    }
  }

  /* Interactive card - alias for default card behavior (explicit intent) */
  .card-interactive {
    cursor: pointer;
  }

  /* ==========================================================================
     Card Sections
     ========================================================================== */

  .card-header {
    padding: var(--space-4);
    border-block-end: 4px solid var(--color-comic-border);
    font-weight: var(--font-bold);
  }

  .card-body {
    padding: var(--space-4);
  }

  .card-footer {
    padding: var(--space-4);
    border-block-start: 4px solid var(--color-comic-border);
    background-color: var(--color-canvas);
  }

  .card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-black);
    text-transform: uppercase;
    margin: 0;
    line-height: var(--leading-tight);
  }

  .card-subtitle {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-block-start: var(--space-1);
  }

  /* ==========================================================================
     Expandable Card (details/summary pattern)
     ========================================================================== */

  details.card {
    &:hover {
      transform: none;
      box-shadow: 6px 6px 0 var(--comic-shadow-color);
    }
  }

  .card-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "▸";
      font-size: var(--text-sm);
      color: var(--color-ink-muted);
      transition: transform 0.15s;
    }
  }

  details.card[open] .card-summary::before {
    transform: rotate(90deg);
  }

  .card-details {
    padding: var(--space-3);
    padding-block-start: 0;
    border-block-start: 1px solid var(--color-border);
    background: var(--color-canvas);
  }

  /* ==========================================================================
     Stat Card - Unified component for metrics display
     Used across dashboard, projects, billing, retainers, expenses
     ========================================================================== */

  /* Stats Row Container - Flex layout for stat cards */
  .stats-row {
    display: flex;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
    flex-wrap: wrap;
  }

  /* Stats Grid Container - Grid layout for stat cards */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-block-end: var(--space-6);
  }

  @media (max-width: 900px) {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 500px) {
    .stats-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Base Stat Card */
  .stat-card {
    flex: 1;
    min-width: 120px;
    padding: var(--space-4);
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      transform: translate(-2px, -2px);
      box-shadow: var(--comic-shadow-lg);
    }

    &:hover .stat-icon {
      transform: scale(1.15) rotate(8deg);
    }

    &:hover .stat-value {
      transform: scale(1.05);
    }
  }

  /* Static stat card - no hover animation */
  .stat-card-static {
    &:hover {
      transform: none;
      box-shadow: var(--comic-shadow-md);
    }

    &:hover .stat-icon,
    &:hover .stat-value {
      transform: none;
    }
  }

  /* Stat Card Icon */
  .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-2);
    border: var(--border-medium) solid var(--color-comic-border);
    color: white;
    transition: transform 0.2s ease;

    &.icon-yellow {
      background: var(--color-zap-yellow);
      color: var(--color-ink);
    }

    &.icon-blue {
      background: var(--color-wham-blue);
    }

    &.icon-green {
      background: var(--color-boom-green);
    }

    &.icon-pink {
      background: var(--color-kapow-pink);
    }

    &.icon-red {
      background: var(--color-pow-red);
    }

    &.icon-orange {
      background: var(--color-whoosh-orange);
    }
  }

  /* Stat Card Value (the big number) */
  .stat-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-ink);
    line-height: 1.1;
    transition: transform 0.2s ease;
  }

  .stat-value-success {
    color: var(--color-positive);
  }

  .stat-value-danger {
    color: var(--color-negative);
  }

  .stat-value-warning {
    color: var(--color-warning);
  }

  .stat-value-muted {
    color: var(--color-ink-muted);
  }

  /* Color variants for stat values (Pop Art colors) */
  .stat-value-yellow {
    color: var(--color-zap-yellow);
  }

  .stat-value-blue {
    color: var(--color-wham-blue);
  }

  .stat-value-green {
    color: var(--color-boom-green);
  }

  .stat-value-pink {
    color: var(--color-kapow-pink);
  }

  .stat-value-red {
    color: var(--color-pow-red);
  }

  /* Stat Card Label */
  .stat-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-block-start: var(--space-1);
  }

  /* Stat Card Note (smaller text below value) */
  .stat-note {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
    margin-block-start: var(--space-1);
  }

  /* Stat Card Variants - Warning/Danger states */
  .stat-card-warning {
    border-color: color-mix(in oklch, var(--color-warning) 60%, var(--color-comic-border));
    background: color-mix(in oklch, var(--color-warning) 10%, var(--color-surface));
  }

  .stat-card-danger {
    border-color: color-mix(in oklch, var(--color-negative) 60%, var(--color-comic-border));
    background: color-mix(in oklch, var(--color-negative) 10%, var(--color-surface));
  }

  .stat-card-success {
    border-color: color-mix(in oklch, var(--color-positive) 60%, var(--color-comic-border));
    background: color-mix(in oklch, var(--color-positive) 10%, var(--color-surface));
  }

  .stat-card-info,
  .stat-card-budget {
    border-color: color-mix(in oklch, var(--color-info) 60%, var(--color-comic-border));
    background: color-mix(in oklch, var(--color-info) 10%, var(--color-surface));
  }

  /* Legacy aliases for backward compatibility */
  .stat-warning {
    border-color: color-mix(in oklch, var(--color-warning) 60%, var(--color-comic-border));
    background: color-mix(in oklch, var(--color-warning) 10%, var(--color-surface));
  }

  .stat-danger {
    border-color: color-mix(in oklch, var(--color-negative) 60%, var(--color-comic-border));
    background: color-mix(in oklch, var(--color-negative) 10%, var(--color-surface));
  }

  /* Alias: stat-number -> stat-value for backward compatibility */
  .stat-number {
    display: block;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-ink);
    line-height: 1.1;
    transition: transform 0.2s ease;
  }

  /* ==========================================================================
     Pop Art Color Variants (Full Saturation)
     ========================================================================== */

  .card.card-pow {
    background-color: var(--color-pow-red);
    color: white;

    & .card-footer {
      background-color: var(--color-pow-red-hover);
    }
  }

  .card.card-wham {
    background-color: var(--color-wham-blue);
    color: white;

    & .card-footer {
      background-color: var(--color-wham-blue-hover);
    }
  }

  .card.card-zap {
    background-color: var(--color-zap-yellow);
    color: var(--color-ink);

    & .card-footer {
      background-color: var(--color-zap-yellow-hover);
    }
  }

  .card.card-kapow {
    background-color: var(--color-kapow-pink);
    color: white;

    & .card-footer {
      background-color: var(--color-kapow-pink-hover);
    }
  }

  .card.card-boom {
    background-color: var(--color-boom-green);
    color: white;

    & .card-footer {
      background-color: var(--color-boom-green-hover);
    }
  }

  .card.card-whoosh {
    background-color: var(--color-whoosh-orange);
    color: white;

    & .card-footer {
      background-color: var(--color-whoosh-orange-hover);
    }
  }

  /* ==========================================================================
     Pop Art Muted/Pastel Variants
     Light: pastel tint, Dark: dark tinted version
     Same approach as alerts - hardcoded light-dark() values
     ========================================================================== */

  .card.card-pow-muted {
    /* Light: red-100, Dark: red-900 tinted */
    background-color: light-dark(oklch(0.95 0.04 25), oklch(0.30 0.08 25));
  }

  .card.card-wham-muted {
    /* Light: blue-100, Dark: blue-900 tinted */
    background-color: light-dark(oklch(0.95 0.04 250), oklch(0.28 0.06 250));
  }

  .card.card-zap-muted {
    /* Light: yellow-100, Dark: yellow-900 tinted */
    background-color: light-dark(oklch(0.97 0.07 95), oklch(0.32 0.06 85));
  }

  .card.card-kapow-muted {
    /* Light: pink-100, Dark: pink-900 tinted */
    background-color: light-dark(oklch(0.95 0.04 350), oklch(0.30 0.08 350));
  }

  .card.card-boom-muted {
    /* Light: green-100, Dark: green-900 tinted */
    background-color: light-dark(oklch(0.96 0.05 145), oklch(0.28 0.05 145));
  }

  .card.card-whoosh-muted {
    /* Light: orange-100, Dark: orange-900 tinted */
    background-color: light-dark(oklch(0.96 0.05 45), oklch(0.30 0.06 45));
  }

  /* ==========================================================================
     Card with Halftone Pattern
     ========================================================================== */

  .card-halftone {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--halftone);
      background-size: var(--halftone-size);
      pointer-events: none;
      z-index: 1;
    }

    & > * {
      position: relative;
      z-index: 2;
    }
  }
}