/*
 * Expense Component Styles - Pop Art Edition
 * Expense tracking and billing with bold comic styling
 */

@layer components {
  /* ==========================================================================
     Expense Stats Grid
     ========================================================================== */

  .expense-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-block-end: var(--space-6);
  }

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

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

  /* Expense stat card - Pop Art style */
  .expense-stat-card {
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    text-align: left;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);

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

  .expense-stat-card-warning {
    background: color-mix(in oklch, var(--color-zap-yellow) 15%, var(--color-surface));
  }

  .expense-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-normal);
    color: var(--color-ink);
    line-height: 1.1;
    letter-spacing: 0.02em;
  }

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

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

  .expense-stat-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
    margin-block-start: var(--space-2);
  }

  .expense-stat-detail {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-ink-faint);
    margin-block-start: var(--space-1);
  }

  /* ==========================================================================
     Filter Bar
     ========================================================================== */

  .filter-bar {
    display: flex;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
    flex-wrap: wrap;
    align-items: center;
  }

  .filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .filter-group label {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-ink-muted);
    white-space: nowrap;
  }

  /* ==========================================================================
     Expense List - Pop Art Edition (matches work-items-list pattern)
     ========================================================================== */

  .expense-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Expense card - matches .work-item-card pattern */
  a.expense-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }

  /* Lift on hover - matches work-item-card */
  a.expense-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--comic-shadow-lg);
  }

  .expense-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .expense-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
  }

  .expense-date {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }

  .expense-title {
    font-weight: var(--font-semibold);
    color: var(--color-ink);
  }

  .expense-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    flex-wrap: wrap;
  }

  .expense-work-item {
    color: var(--color-ink-muted);
  }

  .expense-amounts {
    text-align: right;
    flex-shrink: 0;
  }

  .expense-cost {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    color: var(--color-ink);
    letter-spacing: 0.02em;
  }

  .expense-billed {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-boom-green);
  }

  .expense-non-billable {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-ink-muted);
  }

  .expense-status {
    flex-shrink: 0;
  }

  /* ==========================================================================
     Expense Billing Status Badges
     ========================================================================== */

  .badge-unbilled {
    background: var(--color-zap-yellow);
    color: black;
  }

  .badge-in_draft {
    background: var(--color-wham-blue);
    color: white;
  }

  .badge-invoiced {
    background: var(--color-boom-green);
    color: black;
  }

  /* ==========================================================================
     Detail Grid (for show view)
     ========================================================================== */

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-block-end: var(--space-6);
  }

  .detail-grid .detail-card {
    background: var(--color-surface);
    padding: var(--space-5);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
  }

  .detail-grid .detail-card h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--border-thin) solid var(--color-comic-border);
  }

  .detail-grid .detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3) var(--space-4);
    align-items: baseline;
  }

  .detail-grid .detail-list dt {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }

  .detail-grid .detail-list dd {
    font-size: var(--text-base);
    color: var(--color-ink);
  }

  .expense-billed-amount {
    font-family: var(--font-display);
    font-weight: var(--font-normal);
    font-size: var(--text-2xl);
    color: var(--color-boom-green);
  }

  .detail-footer {
    padding-block-start: var(--space-4);
    border-block-start: var(--border-thin) solid var(--color-comic-border);
  }

  .detail-footer p {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  /* ==========================================================================
     Form Specific
     ========================================================================== */

  .expense-form {
    max-inline-size: 640px;
  }

  .markup-field {
    margin-inline-start: var(--space-6);
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border-medium) solid var(--color-comic-border);
  }
}