/* ============================================================
   dashboard.css — KPI alarm kartları, dönem karşılaştırma
   ============================================================ */

/* KPI Kart vurgulama */
.stat-card.kpi-card {
    position: relative;
    transition: border-left-color 0.2s, box-shadow 0.2s;
}

.stat-card.kpi-warning {
    border-left-color: var(--warning-color, #f59e0b) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

.stat-card.kpi-critical {
    border-left-color: var(--danger-color, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* KPI durum badge */
.kpi-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 99px;
    text-transform: uppercase;
}

.kpi-badge--ok {
    display: none;
}

.kpi-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color, #f59e0b);
    display: inline-block;
}

.kpi-badge--critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color, #ef4444);
    display: inline-block;
}

/* Dönem karşılaştırma — değişim badge */
.period-change-badge {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 4px;
    display: block;
    min-height: 1.1em;
}

.period-change--up {
    color: var(--success-color, #16a34a);
}

.period-change--down {
    color: var(--danger-color, #ef4444);
}

/* Küçük buton */
.btn-xs {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-xs.btn-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color, #f59e0b);
    border-color: var(--warning-color, #f59e0b);
}

.btn-xs.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color, #ef4444);
    border-color: var(--danger-color, #ef4444);
}

/* Admin login history / api keys table */
.admin-filter-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}