/*
 * CADENCE — SC Consumption Bridge: Days-remaining chip styles (WP04 / T021)
 *
 * Styles for the .scb-card__days-chip element appended by
 * ConsumptionDaysRemaining.render() inside each SC card.
 *
 * Design tokens reused: --scb-* (declared in sc_consumption_bridge.css).
 *
 * WCAG 2.1 AA compliance:
 *   remaining:   #374151 (gray-700) on #f1f5f9 (slate-100) = ~10:1  ✓ AA
 *   over_budget: #7c2d12 (orange-900) on #fff7ed (orange-50) = ~10:1  ✓ AA
 *   unknown:     var(--color-text-muted) on var(--color-surface-2) ≥ 4.5:1  ✓ AA
 *
 * Mission: graph-navigation-and-consumption-refinements-01KRNT9R
 * Work Package: WP04 / T021
 */

/* ============================================================================
   Base chip — sits at the bottom of the card, full-width pill
   ============================================================================ */

.scb-card__days-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
    /* Ensure chip is visible regardless of card state background */
    position: relative;
    z-index: 0;
}

/* ============================================================================
   Variant: remaining — slate background, dark text
   ============================================================================ */

.scb-card__days-chip--remaining {
    background: #f1f5f9;   /* slate-100 */
    color: #374151;         /* gray-700 — ~10:1 on slate-100 */
    border: 1px solid #cbd5e1;  /* slate-300 */
}

/* ============================================================================
   Variant: over_budget — amber/red tint, dark text
   ============================================================================ */

.scb-card__days-chip--over {
    background: #fff7ed;   /* orange-50 */
    color: #7c2d12;         /* orange-900 — ~10:1 on orange-50 */
    border: 1px solid #fed7aa;  /* orange-200 */
}

/* ============================================================================
   Variant: unknown — muted gray, italic
   ============================================================================ */

.scb-card__days-chip--unknown {
    background: var(--color-surface-2, #f8fafc);
    color: var(--color-text-muted, #6b7280);
    border: 1px solid var(--color-border, #e2e8f0);
    font-style: italic;
    font-weight: 400;
}

/* ============================================================================
   Print: keep chips visible (they carry data, not chrome)
   ============================================================================ */

@media print {
    .scb-card__days-chip {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}