/* CORTEX — bileşenler (docs/06 §5, §12)
 *
 * Sayfaya özel CSS dosyası yoktur. Bir sayfanın kendine stil istemesi,
 * adı konmamış bir bileşendir ve buraya adıyla girer (docs/06 §13).
 */

/* --- Butonlar: küçük metin taşıyan dolgular --brand-dark kullanır (4.5:1) --- */
.cortex-brand-button {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    font-weight: 600;
}
.cortex-brand-button:hover, .cortex-brand-button:focus {
    background: var(--brand-deep); border-color: var(--brand-deep); color: #fff;
}
.cortex-outline-button { border-color: #f2a386; color: var(--brand-dark); }
.cortex-outline-button:hover, .cortex-outline-button:focus {
    background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
}

/* --- Kartlar --- */
.card, .cortex-card {
    border: 1px solid var(--card-border); border-radius: 14px;
    box-shadow: 0 8px 20px rgba(11, 16, 28, .08);
}
.cortex-kpi-value { font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cortex-kpi-label { font-size: .8125rem; color: var(--muted); }

/* --- Durum rozetleri: ikon + etiket + renk (renk tek başına anlam taşımaz) --- */
.cortex-status {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}
.cortex-status--good     { background: var(--status-good-soft);     color: var(--status-good-ink); }
.cortex-status--warning  { background: var(--status-warning-soft);  color: var(--status-warning-ink); }
.cortex-status--critical { background: var(--status-critical-soft); color: var(--status-critical-ink); }
.cortex-status--unknown  { background: var(--page-bg);              color: var(--muted); }

/* --- Sayfa içi not: kalıcı açıklama, geçici uyarı değil (docs/06 §12).
       Uyarılar toast'tan çıkar; bu kutu sayfanın bir parçasıdır. --- */
.cortex-note {
    display: flex; gap: .6rem; align-items: flex-start;
    border: 1px solid var(--card-border); border-radius: 12px;
    background: #fff; padding: .75rem .9rem;
    font-size: .8125rem; color: var(--text-main);
}
.cortex-note--warning { border-color: #f0d089; background: var(--warning-soft); }
.cortex-note i { color: var(--muted); margin-top: .1rem; }
.cortex-note--warning i { color: var(--status-warning-ink); }

.login-card { width: 100%; max-width: 470px; }

.form-control:focus, .form-select:focus {
    border-color: #f2a386; box-shadow: 0 0 0 .2rem rgba(255, 77, 15, .15);
}

/* --- Toast: tüm uyarıların tek çıkışı (docs/06 §12) --- */
.cortex-toasts {
    position: fixed; top: 1rem; right: 1rem; z-index: 1085;
    display: flex; flex-direction: column; gap: .6rem;
    width: min(23rem, calc(100vw - 2rem));
}
.cortex-toast {
    display: flex; gap: .7rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--card-border);
    border-left: 4px solid var(--muted); border-radius: 10px;
    padding: .75rem .8rem;
    box-shadow: 0 8px 20px rgba(11, 16, 28, .08);
}
.cortex-toast--success  { border-left-color: var(--status-good); }
.cortex-toast--warning  { border-left-color: var(--status-warning); }
.cortex-toast--danger   { border-left-color: var(--status-critical); }
.cortex-toast__icon { flex-shrink: 0; margin-top: .1rem; }
.cortex-toast--success .cortex-toast__icon { color: var(--status-good-ink); }
.cortex-toast--warning .cortex-toast__icon { color: var(--status-warning-ink); }
.cortex-toast--danger  .cortex-toast__icon { color: var(--status-critical-ink); }
.cortex-toast__body { flex: 1; min-width: 0; }
.cortex-toast__title { font-size: .8125rem; font-weight: 600; }
.cortex-toast__detail { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.cortex-toast__close {
    flex-shrink: 0; background: none; border: 0; padding: 0;
    color: var(--muted); line-height: 1; cursor: pointer;
}
.cortex-toast__close:hover, .cortex-toast__close:focus { color: var(--text-main); }

/* --- Fixture rozeti: yalnız geliştirme ortamında görünür (docs/10 §2.2) --- */
.cortex-source-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #f3e8ff;
    color: #6b21a8;
    border: 1px dashed #c084fc;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* --- Grafik kapsayıcısı: Chart.js maintainAspectRatio:false ile çalışır,
       yüksekliği kapsayıcı belirler (docs/06 §6) --- */
.cortex-chart {
    position: relative;
    width: 100%;
}

.cortex-chart canvas {
    display: block;
}

/* --- Canlı izleme kartı: bayat sensör normal görünmemelidir (docs/06 §5.1) --- */
.cortex-sensor-card { transition: box-shadow .15s ease; }
.cortex-sensor-card:hover { box-shadow: 0 10px 24px rgba(11, 16, 28, .12); }

.cortex-sensor-card--stale {
    opacity: .62;
    border-style: dashed;
}

.cortex-sensor-card--critical {
    border: 2px solid var(--status-critical);
    background: var(--status-critical-soft);
}