/* ===================== CHIPS v1.0 — Order Detail Cost Chips ===================== */
/* Colored mini cards used in order detail expand rows */

.cost-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid;
    transition: var(--transition);
}

.detail-chip-gray {
    color: #9fa6b2;
    background: rgba(159, 166, 178, 0.12);
    border-color: rgba(159, 166, 178, 0.25);
}

.detail-chip-blue {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.25);
}

.detail-chip-purple {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.25);
}

.detail-chip-yellow {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.25);
}

.detail-chip-pink {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.12);
    border-color: rgba(244, 114, 182, 0.25);
}

.detail-chip-red {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

/* Light theme */
[data-theme="light"] .detail-chip {
    border-width: 1px;
}

[data-theme="light"] .detail-chip-gray {
    background: rgba(159, 166, 178, 0.08);
}

[data-theme="light"] .detail-chip-blue {
    background: rgba(96, 165, 250, 0.08);
}

[data-theme="light"] .detail-chip-purple {
    background: rgba(192, 132, 252, 0.08);
}

[data-theme="light"] .detail-chip-yellow {
    background: rgba(251, 191, 36, 0.08);
}

[data-theme="light"] .detail-chip-pink {
    background: rgba(244, 114, 182, 0.08);
}

[data-theme="light"] .detail-chip-red {
    background: rgba(239, 68, 68, 0.08);
}