/*
 * 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: 1px solid var(--color-border);
    box-shadow: var(--rd-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
    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(--rd-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
  }

  .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-sans);
    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: 1px solid var(--color-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);
  }

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

  .add-items-section {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-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: 1px solid var(--color-border);
    box-shadow: var(--rd-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
  }

  .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;
  }

  /* QBO item select in add-item rows */
  .add-item-actions select.form-control {
    width: 120px;
    max-width: 120px;
    font-size: var(--text-sm);
  }

  /* Constrain the amount input width */
  .add-item-actions .input-with-suffix {
    width: 100px;
  }

  .add-item-actions .input-with-suffix input {
    width: 100%;
  }

  /* ==========================================================================
     Line Item Bundles
     ========================================================================== */

  /* Checkbox column */
  .th-checkbox,
  .td-checkbox {
    width: 40px;
    text-align: center;
  }

  /* Bundle header row */
  .bundle-header-row {
    background: light-dark(var(--color-zinc-100), var(--color-zinc-800));
    color: var(--color-ink);
  }

  .bundle-header-row td:not(.actions) {
    border-block-end: 1px solid var(--color-border);
  }

  .bundle-header-row:hover {
    background: light-dark(var(--color-zinc-100), var(--color-zinc-800));
  }

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

  .bundle-icon {
    color: var(--color-ink);
    flex-shrink: 0;
  }

  /* Bundle item rows (indented, muted) */
  .bundle-item-row {
    background: light-dark(var(--color-zinc-50), var(--color-zinc-900));
  }

  .bundle-item-row td:not(.actions) {
    border-block-end: 1px solid light-dark(var(--color-zinc-200), var(--color-zinc-700));
  }

  .bundle-item-row .bundle-item-description {
    padding-inline-start: var(--space-10);
  }

  /* Bundle description text */
  .bundle-description {
    color: var(--color-ink-muted);
    font-weight: var(--font-normal);
    font-style: italic;
  }

  /* Bundle edit button (inline icon) */
  .bundle-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: color var(--duration-fast), background-color var(--duration-fast);
  }

  .bundle-edit-btn:hover {
    color: var(--color-link);
    background-color: light-dark(var(--color-zinc-200), var(--color-zinc-700));
  }

  .bundle-edit-btn:active {
    transform: scale(0.95);
  }

  /* Section header actions */
  .section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}