/* ============================================================
   RideOps Design System — super-dashboard.css
   app/Filament/Super/Pages/Dashboard.php hiç değişmedi. Bu dosya
   sadece resources/views/filament/super/pages/dashboard.blade.php
   içindeki .vip-* ve .dch-* sınıflarının RENKLERİNİ ezer.
   ============================================================ */

/* ── KPI kartları (.vip-card) ─────────────────────────────── */
.vip-card {
    background: var(--ro-card) !important;
    border: 1px solid var(--ro-border-soft) !important;
    border-radius: var(--ro-radius-lg) !important;
    box-shadow: var(--ro-shadow-sm) !important;
}
.vip-card:hover {
    background: var(--ro-card-hover) !important;
    box-shadow: var(--ro-shadow-md) !important;
}

/* Renk şeritleri ve ikonlar — semantik token eşlemesi */
.vip-card.c-blue::before,
.vip-card.c-indigo::before { background: linear-gradient(90deg, var(--ro-info), #60a5fa) !important; }
.vip-card.c-green::before,
.vip-card.c-teal::before   { background: linear-gradient(90deg, var(--ro-success), #34d399) !important; }
.vip-card.c-yellow::before,
.vip-card.c-amber::before  { background: linear-gradient(90deg, var(--ro-warning), #fbbf24) !important; }
.vip-card.c-orange::before { background: linear-gradient(90deg, var(--ro-primary), var(--ro-primary-hover)) !important; }
.vip-card.c-red::before,
.vip-card.c-rose::before   { background: linear-gradient(90deg, var(--ro-danger), #f87171) !important; }
.vip-card.c-violet::before { background: linear-gradient(90deg, var(--ro-primary), var(--ro-primary-hover)) !important; }

.vip-card.c-blue   .vip-icon,
.vip-card.c-indigo .vip-icon { background: var(--ro-info-soft) !important;    color: var(--ro-info) !important; }
.vip-card.c-green  .vip-icon,
.vip-card.c-teal   .vip-icon { background: var(--ro-success-soft) !important; color: var(--ro-success) !important; }
.vip-card.c-yellow .vip-icon,
.vip-card.c-amber  .vip-icon { background: var(--ro-warning-soft) !important; color: var(--ro-warning) !important; }
.vip-card.c-orange .vip-icon { background: var(--ro-primary-soft) !important; color: var(--ro-primary) !important; }
.vip-card.c-red    .vip-icon,
.vip-card.c-rose   .vip-icon { background: var(--ro-danger-soft) !important;  color: var(--ro-danger) !important; }
.vip-card.c-violet .vip-icon { background: var(--ro-primary-soft) !important;  color: var(--ro-primary) !important; }

.vip-label { color: var(--ro-muted) !important; }
.vip-value,
.vip-value-sm { color: var(--ro-text) !important; }
.vip-sub { color: var(--ro-muted) !important; }
.vip-section-title { color: var(--ro-muted) !important; }
.vip-section-title::after { background: var(--ro-border) !important; }

.vip-badge.up      { background: var(--ro-success-soft) !important; color: var(--ro-success) !important; }
.vip-badge.down    { background: var(--ro-danger-soft) !important;  color: var(--ro-danger) !important; }
.vip-badge.neutral { background: rgba(148,163,184,.14) !important;  color: var(--ro-muted) !important; }
.vip-chip { background: rgba(148,163,184,.14) !important; color: var(--ro-muted) !important; }

/* ── Grafik + liste kartları (.dch-*) — zaten koyu, sadece token'a sabitleniyor ── */
.dch-card {
    background: var(--ro-card) !important;
    border: 1px solid var(--ro-border-soft) !important;
    border-radius: var(--ro-radius-lg) !important;
}
.dch-title,
.dch-legname,
.dch-liname,
.dch-liamount,
.dch-donutcenter .num { color: var(--ro-text) !important; }
.dch-legval,
.dch-lisub,
.dch-lidate,
.dch-donutcenter .lbl { color: var(--ro-muted) !important; }
.dch-li { border-bottom-color: var(--ro-border-soft) !important; }
.dch-sel,
.dch-minibtn {
    background: var(--ro-bg) !important;
    border: 1px solid var(--ro-border) !important;
    color: var(--ro-text-secondary) !important;
}
.dch-lirank { background: var(--ro-bg) !important; color: var(--ro-muted) !important; }
.dch-lirank.gold { background: var(--ro-warning-soft) !important; color: var(--ro-warning) !important; }
.dch-empty { color: var(--ro-muted) !important; }

.b-green { background: var(--ro-success-soft) !important; color: var(--ro-success) !important; }
.b-blue  { background: var(--ro-info-soft) !important;    color: var(--ro-info) !important; }
.b-amber { background: var(--ro-warning-soft) !important; color: var(--ro-warning) !important; }
.days-red   { color: var(--ro-danger) !important; }
.days-amber { color: var(--ro-warning) !important; }
.days-blue  { color: var(--ro-info) !important; }