/* OKR Dashboard - Dark Metro Tile Design */

/* Progress Bar Animations */
.progress-bar {
    transition: width 0.8s ease-in-out;
}

/* Health Status Dots */
.health-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.health-dot.on_track { background-color: var(--color-on-track); }
.health-dot.at_risk { background-color: var(--color-at-risk); }
.health-dot.off_track { background-color: var(--color-off-track); }
.health-dot.done { background-color: var(--color-done); }
.health-dot.stopped { background-color: var(--color-stopped); }

/* KR Number Badge */
.kr-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background-color: var(--color-text-secondary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* KR Progress Bar Colors */
.kr-progress.on_track { background-color: var(--color-on-track); }
.kr-progress.at_risk { background-color: var(--color-at-risk); }
.kr-progress.off_track { background-color: var(--color-off-track); }
.kr-progress.done { background-color: var(--color-done); }
.kr-progress.stopped { background-color: var(--color-stopped); }

/* Objective Cover Image */
.objective-cover {
    height: 120px;
    background-size: cover;
    background-position: center;
}

/* Metro Tile Base */
.objective-card {
    transition: transform 0.15s ease, opacity 0.15s ease;
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius);
    border: none;
}

.objective-card:hover {
    transform: scale(1.01);
    opacity: 0.95;
}

/* Colored top bar on objective tiles */
.tile-accent-bar {
    height: 10px;
    width: 100%;
}

/* Health Indicator Tile - full color background, Metro style */
.health-card {
    transition: transform 0.15s ease, opacity 0.15s ease;
    border-radius: var(--border-radius);
    border: none;
    color: white;
}

.health-card:hover {
    transform: scale(1.02);
    opacity: 0.92;
}

/* Pulse animation for off-track items */
@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pulse-warning {
    animation: pulse-red 2s ease-in-out infinite;
}

/* Time marker on progress bar */
.time-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background-color: var(--color-time-marker);
    opacity: 0.5;
}

/* Gauge mini visualization */
.gauge-container {
    position: relative;
    height: 6px;
    background-color: var(--color-gauge-bg);
    border-radius: 0;
    overflow: visible;
}

.gauge-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.8s ease-in-out;
}

.gauge-time-marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background-color: var(--color-time-marker);
    border-radius: 0;
}