/*
 * Billing & Invoice Styles - Pop Art Edition
 * Only billing-specific styles. Uses generic components for:
 * - .stat-card, .stats-row (cards.css)
 * - .section, .section-header, .section-body (layout.css)
 * - .badge, .badge-* (badges.css)
 * - .data-table (tables.css)
 * - .empty-state (layout.css)
 */

@layer components {
  /* ==========================================================================
     Billing Grid Layout
     ========================================================================== */

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

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

  /* ==========================================================================
     Billing Item Cards (inside sections)
     ========================================================================== */

  .billing-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .billing-item-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: var(--border-medium) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }

  .billing-item-card-link {
    text-decoration: none;
    color: inherit;
  }

  .billing-item-card:hover,
  .billing-item-card-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--comic-shadow-md);
  }

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

  .billing-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

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

  .billing-item-title {
    font-weight: var(--font-medium);
    color: var(--color-ink);
  }

  .billing-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

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

  .billing-item-total {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    color: var(--color-ink);
    letter-spacing: 0.02em;
  }

  .billing-item-status {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  /* ==========================================================================
     Invoice Detail View
     ========================================================================== */

  .invoice-header-info {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: var(--border-thin) solid var(--color-comic-border);
  }

  .invoice-meta-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--space-2) var(--space-4);
    text-align: right;
  }

  .invoice-meta-list dt {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .invoice-meta-list dd {
    font-weight: var(--font-medium);
  }

  .invoice-balance {
    font-weight: var(--font-semibold);
    color: var(--color-warning);
  }

  /* ==========================================================================
     Invoice Form
     ========================================================================== */

  .invoice-form {
    max-inline-size: 720px;
  }

  /* ==========================================================================
     Add Billable Items (Invoice Edit)
     ========================================================================== */

  .add-items-section {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-thin) solid var(--color-comic-border);
  }

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

  .add-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: var(--border-medium) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
  }

  .add-item-info {
    flex: 1;
    min-width: 0;
  }

  .add-item-title {
    font-weight: var(--font-medium);
    color: var(--color-ink);
  }

  .add-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
  }

  .add-item-available {
    font-size: var(--text-sm);
    color: var(--color-ink);
    font-weight: var(--font-medium);
    white-space: nowrap;
  }

  .add-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }
}