/* "KI-Verbrauch" (/ai_usage, ai_usages/show, task 488): one card per AI
   provider, its plan meters as rows — label and reset on the left, the bar
   in the middle, "21 % verwendet" on the right, like the provider's own
   usage page. Archive-independent admin page: no sidebar. Loaded
   automatically by app_stylesheets_tag. */
@layer components {
  .ai-usage-page {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0.5rem 0 3rem;
  }

  .ai-usage-header {
    margin-bottom: 1.25rem;
  }

  .ai-usage-title {
    margin: 0;
    font-size: 1.6rem;
    color: var(--ink);
  }

  .ai-usage-intro,
  .ai-usage-empty,
  .ai-usage-none {
    margin: 0.15rem 0 0;
    color: var(--muted);
  }

  .ai-usage-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem 1rem;
    border-radius: var(--radius-card);
    border: 1px solid var(--surface-border);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }

  .ai-usage-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .ai-usage-provider {
    margin: 0;
    font-size: 1.25rem;
    color: var(--ink);
  }

  .ai-usage-plan {
    color: var(--muted);
  }

  /* A failed fetch or a collector that went quiet — above the last known
     meters, in the gold of a hint, not the red of a failure: the numbers
     below are still the last truth. */
  .ai-usage-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-control);
    background: var(--gold);
    color: var(--gold-ink);
  }

  .ai-usage-limits {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ai-usage-limit {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(8rem, 1fr) 9rem;
    align-items: center;
    gap: 0.25rem 1.5rem;
    padding: 0.75rem 0;
  }

  .ai-usage-limit.is-group-start {
    margin-top: 0.5rem;
    border-top: 1px solid var(--hairline);
    padding-top: 1.25rem;
  }

  .ai-usage-limit-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .ai-usage-limit-label {
    color: var(--ink);
    font-weight: 500;
  }

  .ai-usage-limit-reset {
    color: var(--muted);
    font-size: 0.9rem;
  }

  .ai-usage-bar {
    display: block;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--hairline);
    overflow: hidden;
  }

  /* The provider grades each meter itself (normal / warning / critical);
     the bar takes its colour from that, never from its own threshold. */
  .ai-usage-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--wine);
  }

  .ai-usage-limit.is-warning .ai-usage-bar-fill {
    background: var(--gold-bright);
  }

  .ai-usage-limit.is-critical .ai-usage-bar-fill {
    background: #c0392b;
  }

  /* The window has reset since the report: the share is history. */
  .ai-usage-limit.is-passed .ai-usage-bar-fill {
    background: var(--muted-3);
  }

  .ai-usage-limit-percent {
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .ai-usage-card-footer {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hairline);
    color: var(--muted-2);
    font-size: 0.85rem;
  }

  /* Phones: label and reset over the full width, bar and share below. */
  @media (max-width: 640px) {
    .ai-usage-card {
      padding: 1rem;
    }

    .ai-usage-limit {
      grid-template-columns: 1fr auto;
      gap: 0.5rem 1rem;
    }

    .ai-usage-limit-text {
      grid-column: 1 / -1;
    }
  }
}