/* ==========================================================================
   UDM KPI-Indikatoren & TimeBadge — Globale Styles
   Wird in DxGrid/TreeView/ListView CellTemplates verwendet.
   NICHT als .razor.css (CSS-Isolation funktioniert nicht in Third-Party-Templates).
   ========================================================================== */


/* --- KPI: Ampel-Dot (TrafficLight) --- */
.udm-kpi-traffic-light {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.udm-kpi-dot {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    flex-shrink: 0;
}


/* --- KPI: Fortschrittsbalken (ProgressBar) --- */
.udm-kpi-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    width: 100%;
}

.udm-kpi-progress-track {
    flex: 1;
    height: 0.5em;
    background-color: var(--bs-light);
    border-radius: 0.25em;
    overflow: hidden;
}

.udm-kpi-progress-bar {
    display: block;
    height: 100%;
    border-radius: 0.25em;
    transition: width 0.3s ease;
}


/* --- KPI: Trend-Pfeil (TrendArrow) --- */
.udm-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}


/* --- KPI: Badge --- */
.udm-kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.5em;
    border-radius: 0.25em;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}


/* --- KPI: Rating (Sterne) --- */
.udm-kpi-rating {
    display: inline-flex;
    gap: 0.1em;
}


/* --- KPI: Gemeinsame Elemente --- */
.udm-kpi-icon-img {
    height: 1em;
    width: auto;
    vertical-align: middle;
    object-fit: contain;
}

.udm-kpi-value {
    white-space: nowrap;
    min-width: 2.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   TimeBadge: Kompakte Dauer-Anzeige mit farblicher Abstufung nach Alter
   ========================================================================== */

.udm-time-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68em;
    font-family: tabular-nums, monospace;
    padding: 0.1em 0.35em;
    border-radius: 0.25em;
    white-space: nowrap;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* Gruen-Stufen: < 7 Tage (frisch) */
.udm-time-badge.time-green-1 { background: rgba(5, 122, 85, 0.15); color: #057a55; border-color: rgba(5, 122, 85, 0.3); }
.udm-time-badge.time-green-2 { background: rgba(16, 185, 129, 0.12); color: #059669; border-color: rgba(16, 185, 129, 0.25); }
.udm-time-badge.time-green-3 { background: rgba(52, 211, 153, 0.1); color: #10b981; border-color: rgba(52, 211, 153, 0.2); }

/* Gelb/Braun-Stufen: 7-60 Tage (mittel) */
.udm-time-badge.time-amber-1 { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.25); }
.udm-time-badge.time-amber-2 { background: rgba(217, 119, 6, 0.12); color: #92400e; border-color: rgba(217, 119, 6, 0.25); }
.udm-time-badge.time-amber-3 { background: rgba(180, 83, 9, 0.1); color: #78350f; border-color: rgba(180, 83, 9, 0.2); }

/* Grau-Stufen: > 60 Tage (alt) */
.udm-time-badge.time-gray-1 { background: rgba(107, 114, 128, 0.1); color: #6b7280; border-color: rgba(107, 114, 128, 0.2); }
.udm-time-badge.time-gray-2 { background: rgba(156, 163, 175, 0.1); color: #9ca3af; border-color: rgba(156, 163, 175, 0.2); }
.udm-time-badge.time-gray-3 { background: rgba(209, 213, 219, 0.1); color: #d1d5db; border-color: rgba(209, 213, 219, 0.15); }

/* Zukunft-Stufen: Standard (Blau/Cyan) */
.udm-time-badge.time-future-1 { background: rgba(23, 162, 184, 0.15); color: #0c7c8a; border-color: rgba(23, 162, 184, 0.3); }
.udm-time-badge.time-future-2 { background: rgba(13, 110, 253, 0.12); color: #0a58ca; border-color: rgba(13, 110, 253, 0.25); }
.udm-time-badge.time-future-3 { background: rgba(102, 16, 242, 0.1); color: #6610f2; border-color: rgba(102, 16, 242, 0.2); }

/* Kein Wert */
.udm-time-badge.time-none { background: transparent; color: var(--bs-secondary-color); border-style: dashed; }

/* TimeBadge: Optionale Datumsanzeige neben dem Badge */
.udm-time-badge-date {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    margin-left: 0.3em;
}