/*
 * Allocations Component Styles
 * Styles for team member allocation management
 */

@layer components {
  /* ==========================================================================
     Allocation List
     ========================================================================== */

  .allocations-list {
    margin-block-start: var(--space-4);
  }

  .allocation-row.allocation-status-ended {
    opacity: 0.6;
  }

  .allocation-row.allocation-status-future {
    background: var(--color-surface-alt, oklch(0.97 0 0));
  }

  .team-member-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .team-member-info .text-muted {
    font-size: var(--text-sm);
  }

  .allocation-percentage {
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
  }

  .allocation-hours {
    color: var(--color-ink-muted);
  }

  .allocation-dates {
    font-size: var(--text-sm);
  }

  .allocation-notes-row td {
    padding-block-start: 0;
    border-top: none;
  }

  .allocation-notes {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-border-muted);
  }

  /* ==========================================================================
     Allocation Form
     ========================================================================== */

  .allocation-form {
    max-width: 600px;
  }

  .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .capacity-preview {
    background: var(--color-surface-alt, oklch(0.97 0 0));
    border: var(--border-thin) solid var(--color-comic-border);
    padding: var(--space-4);
  }

  .capacity-preview h2 {
    margin-block-end: var(--space-3);
  }

  /* ==========================================================================
     Status Badges for Allocations
     ========================================================================== */

  .status-active {
    background: var(--color-positive-subtle, oklch(0.95 0.05 150));
    color: var(--color-positive);
  }

  .status-future {
    background: var(--color-info-subtle, oklch(0.95 0.05 250));
    color: var(--color-info, oklch(0.55 0.15 250));
  }

  .status-ended {
    background: var(--color-surface-alt, oklch(0.9 0 0));
    color: var(--color-ink-muted);
  }

  /* Solid warning badge for conflict indicators */
  .badge-warning.badge-solid {
    background: var(--color-warning);
    color: white;
    box-shadow: none;
    font-size: var(--text-xs);
    padding: 0.1em 0.4em;
    border: 1px solid var(--color-comic-border);
    margin-inline-start: var(--space-2);
  }
}