/* ==========================================================================
   AGB BONDING · AURORA DESIGN LAYER
   --------------------------------------------------------------------------
   theme.css'in ÜZERİNE yüklenir. Hiçbir HTML/JS yapısını değiştirmez;
   yalnızca görsel dil: renk tokenları, yüzeyler, tipografi, hareket,
   odak durumları ve tema (açık/koyu) tutarsızlıklarının giderilmesi.

   Koyu tema  : "Midnight Control Room" — derin mürekkep zemin, aurora ışıması
   Açık tema  : "Mist" — parlamayan mat gri-mavi, bembeyaz yüzey yok
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TASARIM TOKENLARI
   -------------------------------------------------------------------------- */
:root,
body.theme-light {
  --bg-app: #e3e8ef;
  --bg-sidebar: rgba(234, 239, 245, 0.82);
  --bg-header: rgba(234, 239, 245, 0.78);
  --bg-card: #eef2f7;
  --bg-card-subtle: #e2e8f0;
  --bg-input: #f3f6fa;

  --border-subtle: rgba(15, 23, 42, 0.09);
  --border-line: rgba(15, 23, 42, 0.09);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-focus: #0284c7;

  --text: #0f172a;
  --text-main: #0f172a;
  --text-muted: #4b5869;
  --text-light: #7a8799;

  --accent: #0284c7;
  --accent-2: #7c3aed;
  --accent-ink: #0369a1;
  --accent-soft: rgba(2, 132, 199, 0.10);
  --accent-border: rgba(2, 132, 199, 0.28);
  --accent-grad: linear-gradient(135deg, #0284c7 0%, #6d28d9 100%);

  --ok: #059669;   --ok-soft: rgba(5, 150, 105, 0.12);   --ok-ring: rgba(5, 150, 105, 0.32);
  --bad: #dc2626;  --bad-soft: rgba(220, 38, 38, 0.10);  --bad-ring: rgba(220, 38, 38, 0.30);
  --warn: #b45309; --warn-soft: rgba(217, 119, 6, 0.12); --warn-ring: rgba(217, 119, 6, 0.32);

  --track: rgba(15, 23, 42, 0.08);
  --track-strong: rgba(15, 23, 42, 0.16);
  --grid-line: rgba(15, 23, 42, 0.07);

  --surface-hi: rgba(255, 255, 255, 0.55);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.18);
  --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 40px -18px rgba(15, 23, 42, 0.28);
  --card-radius: 16px;

  --aurora-1: rgba(2, 132, 199, 0.10);
  --aurora-2: rgba(124, 58, 237, 0.08);
  --aurora-3: rgba(16, 185, 129, 0.06);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ring: 0 0 0 3px rgba(2, 132, 199, 0.28);

  color-scheme: light;
}

body.theme-dark {
  --bg-app: #060a13;
  --bg-sidebar: rgba(10, 15, 27, 0.72);
  --bg-header: rgba(8, 13, 24, 0.70);
  --bg-card: #0d1424;
  --bg-card-subtle: #0a101d;
  --bg-input: #0a101d;

  --border-subtle: rgba(148, 163, 184, 0.11);
  --border-line: rgba(148, 163, 184, 0.11);
  --border-strong: rgba(148, 163, 184, 0.22);
  --border-focus: #38bdf8;

  --text: #e6ebf3;
  --text-main: #e6ebf3;
  --text-muted: #8b98ae;
  --text-light: #5f6c82;

  --accent: #38bdf8;
  --accent-2: #a78bfa;
  --accent-ink: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.11);
  --accent-border: rgba(56, 189, 248, 0.30);
  --accent-grad: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);

  --c-blue: #38bdf8;
  --c-blue-soft: rgba(56, 189, 248, 0.12);

  --ok: #34d399;   --ok-soft: rgba(52, 211, 153, 0.12);  --ok-ring: rgba(52, 211, 153, 0.30);
  --bad: #f87171;  --bad-soft: rgba(248, 113, 113, 0.12); --bad-ring: rgba(248, 113, 113, 0.32);
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.12); --warn-ring: rgba(251, 191, 36, 0.30);

  --track: rgba(148, 163, 184, 0.10);
  --track-strong: rgba(148, 163, 184, 0.20);
  --grid-line: rgba(148, 163, 184, 0.08);

  --surface-hi: rgba(255, 255, 255, 0.025);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.75);
  --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 48px -18px rgba(0, 0, 0, 0.85);

  --aurora-1: rgba(14, 165, 233, 0.13);
  --aurora-2: rgba(139, 92, 246, 0.11);
  --aurora-3: rgba(16, 185, 129, 0.07);

  --ring: 0 0 0 3px rgba(56, 189, 248, 0.32);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. ZEMİN, TİPOGRAFİ, SEÇİM, SCROLLBAR
   -------------------------------------------------------------------------- */
body {
  background-color: var(--bg-app);
  color: var(--text-main);
  letter-spacing: 0.15px;
  text-rendering: optimizeLegibility;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* Sabit aurora ışıması: GPU'da tek katman, scroll'da yeniden çizilmez */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 8% -10%, var(--aurora-1), transparent 70%),
    radial-gradient(50vw 45vh at 105% 5%, var(--aurora-2), transparent 70%),
    radial-gradient(70vw 50vh at 50% 120%, var(--aurora-3), transparent 70%);
}

::selection { background: var(--accent-soft); color: var(--text-main); }

* { scrollbar-width: thin; scrollbar-color: var(--track-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--track-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-light); }

/* Canlı değişen tüm sayılar sabit genişlikte → titreme yok */
.speed-value, .kpi-val, .kpi-value, .ring-center-value, .footer-val,
.fwd-metric-val, .stat-val, .usage-table td, .matrix-table td,
.line-detail-hw-table td.hw-val, .signal-pct-val, .ip-address {
  font-variant-numeric: tabular-nums;
}

/* Klavye erişilebilirliği: net, markalı odak halkası */
:focus-visible {
  outline: none !important;
  box-shadow: var(--ring) !important;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   3. SOL MENÜ (GLASS SIDEBAR)
   -------------------------------------------------------------------------- */
.icon-sidebar {
  background: var(--bg-sidebar) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-right: 1px solid var(--border-subtle) !important;
  padding: 16px 12px !important;
}

.sidebar-brand-box {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: 14px !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 10px !important;
}

/* AGB Medya logosu: koyu temada okunurluk için açık plaka */
.sidebar-logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.sidebar-logo-plate:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(14, 165, 233, 0.55), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.sidebar-logo { width: 100%; max-width: 168px; height: auto; display: block; }
body.theme-light .sidebar-logo-plate { background: #f6f8fb; }

.sidebar-brand-box .sidebar-brand-text {
  flex-direction: row !important;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.header-logo-mobile { display: none; }
@media (max-width: 768px) {
  .header-logo-mobile {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 4px 8px;
    border-radius: 10px;
    background: #ffffff;
    margin-right: 4px;
  }
  .header-logo-mobile img { height: 100%; width: auto; display: block; }
  .top-left-pills .header-user-btn { display: none !important; }
}

.sidebar-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: var(--accent-grad) !important;
  box-shadow: 0 6px 18px -6px rgba(14, 165, 233, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  font-size: 18px !important;
}

.sidebar-brand-text .brand-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.sidebar-brand-text .brand-sub {
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--text-light) !important;
}

.side-nav-list { gap: 2px !important; }

.side-nav-btn {
  height: 40px !important;
  border-radius: 11px !important;
  padding: 0 10px !important;
  gap: 11px !important;
  color: var(--text-muted) !important;
  transition: background 0.2s var(--ease-out), color 0.2s ease !important;
}
.side-nav-btn .nav-icon {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 8px;
  background: var(--track);
  font-size: 15px !important;
  transition: background 0.2s ease, transform 0.25s var(--ease-out), box-shadow 0.2s ease;
}
.side-nav-btn .nav-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.9px !important;
}
.side-nav-btn:hover {
  background: var(--track) !important;
  color: var(--text-main) !important;
  transform: none !important;
}
.side-nav-btn:hover .nav-icon { transform: scale(1.08); }

.side-nav-btn.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent 95%) !important;
  color: var(--text-main) !important;
}
.side-nav-btn.active .nav-icon {
  background: var(--accent-grad);
  box-shadow: 0 4px 14px -4px rgba(14, 165, 233, 0.7);
}
.side-nav-btn.active .nav-text { font-weight: 600 !important; }
.side-nav-btn.active::before {
  top: 9px !important;
  bottom: 9px !important;
  width: 3px !important;
  background: var(--accent-grad) !important;
  box-shadow: 0 0 10px var(--accent);
}

.side-nav-badge {
  background: var(--bad) !important;
  color: #fff !important;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--bad-soft);
}

.side-nav-bottom { border-top: 1px solid var(--border-subtle) !important; }

/* --------------------------------------------------------------------------
   4. ÜST BAR & CANLI TELEMETRİ KOKPİTİ (GLASS HEADER & TELEMETRY HUD)
   -------------------------------------------------------------------------- */
.top-header {
  height: 56px !important;
  background: var(--bg-header) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

.top-telemetry-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 0 !important;
}
.top-telemetry-bar::-webkit-scrollbar { display: none !important; }

.telemetry-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: default !important;
  transition: transform 0.2s var(--ease-out), border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.telemetry-badge:hover {
  transform: translateY(-1px) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 4px 12px -2px var(--accent-soft) !important;
}

.telemetry-dot {
  width: 7.5px !important;
  height: 7.5px !important;
  border-radius: 50% !important;
  background: var(--ok) !important;
  box-shadow: 0 0 6px var(--ok) !important;
  flex-shrink: 0 !important;
}
.telemetry-dot.ok {
  background: var(--ok) !important;
  animation: aurora-pulse-current 2s ease-out infinite !important;
}
.telemetry-dot.warn {
  background: var(--warn) !important;
  box-shadow: 0 0 6px var(--warn) !important;
}
.telemetry-dot.bad {
  background: var(--bad) !important;
  box-shadow: 0 0 6px var(--bad) !important;
}

.telemetry-icon {
  font-size: 12.5px !important;
  line-height: 1 !important;
  opacity: 0.95;
}

.telemetry-lbl {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}

.telemetry-val {
  font-family: 'Oswald', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: var(--text-main) !important;
}
.telemetry-val.ok { color: var(--ok) !important; }
.telemetry-val.accent { color: var(--accent) !important; }
.telemetry-val.warn { color: var(--warn) !important; }
.telemetry-val.bad { color: var(--bad) !important; }

.telemetry-val .up-val {
  color: #10b981 !important;
  font-weight: 600 !important;
  margin-right: 6px !important;
}
.telemetry-val .down-val {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

.top-right-telemetry {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.telemetry-clock-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  font-family: 'Oswald', monospace !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--text-main) !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15) !important;
}

.btn-burger {
  border-radius: 10px !important;
  background: var(--track) !important;
  border-color: var(--border-subtle) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   5. CANLI DURUM ŞERİDİ (Broadcast Strip) — her iki temada da koyu
   -------------------------------------------------------------------------- */
.navy-sub-banner {
  position: relative;
  background: linear-gradient(90deg, #0a1222 0%, #101b34 50%, #0a1222 100%) !important;
  color: #9fb0c8 !important;
  padding: 9px 22px !important;
  border-bottom: none !important;
  font-size: 11.5px !important;
  letter-spacing: 0.6px;
}
.navy-sub-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #0ea5e9 25%, #8b5cf6 75%, transparent);
  background-size: 200% 100%;
  opacity: 0.75;
  animation: aurora-sweep 8s linear infinite;
}
.ribbon-info { gap: 18px !important; }
.ribbon-info b { color: #f1f5f9 !important; font-weight: 600 !important; }

.navy-sub-banner .ribbon-badge {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.5px;
}
.navy-sub-banner .ribbon-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px !important;
  padding: 3px 10px !important;
  color: #cbd5e1 !important;
}
.ribbon-chip .dot.ok {
  background: #34d399 !important;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  animation: aurora-pulse 2.2s ease-out infinite;
}
.ribbon-chip .dot.warn { background: #fbbf24 !important; }
.ribbon-chip:empty { display: none !important; }

/* Kart/Modal içindeki rozetler: açık temada görünmez beyaz yazı hatası düzeltildi */
.content-body .ribbon-badge,
.modal-dialog .ribbon-badge {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-border);
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.content-body .ribbon-chip {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
}
.content-body .ribbon-chip b { filter: saturate(1.1); }

/* Bağlantı kesintisi bandı */
#banner {
  color: var(--bad) !important;
  background: var(--bad-soft) !important;
  border: none !important;
  border-bottom: 1px solid var(--bad-ring) !important;
  letter-spacing: 0.5px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. İÇERİK & KARTLAR
   -------------------------------------------------------------------------- */
.content-body { padding: 20px 22px 28px !important; }

.viewpane { animation: aurora-view-in 0.4s var(--ease-out); }

.exec-card {
  background: linear-gradient(180deg, var(--surface-hi), transparent 120px), var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 20px 22px;
  transition: box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
}
.exec-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-strong);
}

.card-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  color: var(--text-main) !important;
}

.exec-grid-row-top, .exec-grid-row-bottom { gap: 18px !important; }
.exec-grid-row-top { margin-bottom: 18px !important; }

/* --------------------------------------------------------------------------
   7. HAT KARTLARI (HERO) — bağlantı rengiyle ışıyan yüzeyler
   -------------------------------------------------------------------------- */
/* auto-fit: boş sütunlar çöker, kartlar hat sayısına göre satırı tam doldurur.
   min(…,100%): dar ekranda taşma olmadan tek sütuna iner. */
.line-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)) !important;
  gap: 18px !important;
  align-items: stretch;
}
.line-cards-grid > .line-card-box { min-width: 0; }

.line-card-box {
  background: var(--bg-card);
  background:
    radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--conn-c, #38bdf8) 13%, transparent), transparent 55%),
    linear-gradient(180deg, var(--surface-hi), transparent 140px),
    var(--bg-card);
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: var(--card-shadow) !important;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s ease !important;
}
.line-card-box:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--conn-c, #38bdf8) 45%, transparent) !important;
  box-shadow:
    var(--card-shadow-hover),
    0 0 0 1px color-mix(in srgb, var(--conn-c, #38bdf8) 18%, transparent),
    0 18px 50px -24px var(--conn-c, #38bdf8) !important;
}
.line-card-box:active { transform: translateY(-1px) scale(0.997) !important; }

/* Üst ışık çizgisi: kenarlara doğru sönen ince neon */
.line-card-box::before {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--conn-c, #38bdf8) 20%, var(--conn-c, #38bdf8) 80%, transparent) !important;
  box-shadow: 0 0 18px 1px var(--conn-c, #38bdf8) !important;
  opacity: 0.9;
}

/* Köşe teknoloji rozeti: hap formu, cam kenar */
.line-corner-badge {
  top: 16px;
  right: 16px;
  border-radius: 999px !important;
  padding: 5px 12px;
  font-size: 11.5px;
  letter-spacing: 1.4px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

/* Kopuk hat: diyagonal uyarı dokusu */
.line-card-box.conn-offline {
  opacity: 1 !important;
  background:
    repeating-linear-gradient(135deg, var(--bad-soft) 0 12px, transparent 12px 24px),
    var(--bg-card) !important;
  border-color: var(--bad-ring) !important;
}
.line-card-box.conn-offline .line-card-speeds { opacity: 0.55; }

/* Bonding Dışı (Hariç Tutulmuş) Hat */
.line-card-box.conn-bonding-excluded {
  opacity: 0.82 !important;
  border-style: dashed !important;
  border-color: #f59e0b !important;
}
.line-card-box.conn-bonding-excluded .line-corner-badge {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45) !important;
  color: #fff !important;
}

.line-identity {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  flex: 1 !important;
}

.line-operator-title {
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

.line-operator-title.line-title-clickable {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}
.line-operator-title.line-title-clickable:hover {
  color: var(--accent) !important;
}
.line-operator-title .edit-icon-hint {
  font-size: 13px !important;
  opacity: 0.35 !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}
.line-operator-title.line-title-clickable:hover .edit-icon-hint {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

.slot-badge {
  border-radius: 7px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 2px 8px -3px rgba(0, 0, 0, 0.35);
}

/* Durum çipi: nefes alan canlı nokta */
.line-status-chip {
  border-radius: 999px !important;
  padding: 4px 11px 4px 9px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.5px;
}
.line-status-chip.ok   { color: var(--ok) !important;   background: var(--ok-soft) !important;   box-shadow: inset 0 0 0 1px var(--ok-ring); }
.line-status-chip.warn { color: var(--warn) !important; background: var(--warn-soft) !important; box-shadow: inset 0 0 0 1px var(--warn-ring); }
.line-status-chip.bad  { color: var(--bad) !important;  background: var(--bad-soft) !important;  box-shadow: inset 0 0 0 1px var(--bad-ring); }
.line-status-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.line-status-chip.ok .dot { animation: aurora-pulse-current 2s ease-out infinite; }

/* Sinyal çubuğu: parlak uç */
.signal-meter-track {
  background: var(--track) !important;
  border-radius: 999px !important;
}
.signal-meter-bar {
  border-radius: 999px !important;
  position: relative;
  filter: saturate(1.15) brightness(1.05);
  transition: width 0.6s var(--ease-out) !important;
}

/* Hız paneli: gömme ekran hissi + dikey ayraç */
.line-card-speeds {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 10px -6px rgba(0, 0, 0, 0.35);
  padding: 14px 16px !important;
  gap: 0 !important;
}
.line-card-speeds .speed-box + .speed-box {
  border-left: 1px solid var(--border-subtle);
  padding-left: 16px;
}
.speed-box .speed-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.speed-box .speed-value {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.05 !important;
}
.speed-box .speed-value small {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.4px;
}
.speed-arrow.up   { color: #10b981 !important; text-shadow: 0 0 10px rgba(16, 185, 129, 0.55); }
.speed-arrow.down { color: #38bdf8 !important; text-shadow: 0 0 10px rgba(56, 189, 248, 0.55); }

/* Alt istatistik ızgarası */
.line-card-footer {
  border-top: 1px dashed var(--border-subtle) !important;
  padding-top: 13px !important;
}
.line-footer-stat .footer-lbl {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-light) !important;
}
.line-footer-stat .footer-val {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.line-card-click-hint {
  border-top: 1px dashed var(--border-subtle) !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 10.5px !important;
}

/* Satır içi "İsim Değiştir" butonu */
.btn-icon-subtle {
  border: 1px solid var(--border-subtle) !important;
  background: var(--track) !important;
  color: var(--text-muted) !important;
  border-radius: 999px !important;
  transition: all 0.2s ease;
}
.btn-icon-subtle:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-ink) !important;
}

/* Metrik rozeti: aurora uyumu */
.metric-badge {
  border-radius: 999px !important;
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-border) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   8. GRAFİK & GÖSTERGELER
   -------------------------------------------------------------------------- */
/* Donut iz halkası temaya uyar (sabit açık gri hatası) */
.ring-outer-box svg circle:first-child { stroke: var(--track) !important; }
.ring-center-value { font-weight: 600 !important; font-size: 26px !important; }
.ring-center-label { letter-spacing: 1.4px !important; text-transform: uppercase !important; font-size: 10px !important; }
.donut-legend-item { padding: 3px 0; border-bottom: 1px dashed var(--border-subtle); }
.donut-legend-item:last-child { border-bottom: none; }

.line-prog-track { background: var(--track) !important; border-radius: 999px !important; height: 8px !important; }
.line-prog-fill  { border-radius: 999px !important; transition: width 0.6s var(--ease-out) !important; }

.matrix-dot { background: var(--track-strong) !important; }
.matrix-dot.active-blue   { background: #38bdf8 !important; box-shadow: 0 0 8px rgba(56, 189, 248, 0.7) !important; }
.matrix-dot.active-green  { background: #34d399 !important; box-shadow: 0 0 8px rgba(52, 211, 153, 0.7) !important; }
.matrix-dot.active-orange { background: #fbbf24 !important; box-shadow: 0 0 8px rgba(251, 191, 36, 0.7) !important; }

.usage-segment-bar {
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--track) !important;
  gap: 2px;
  padding: 0;
}
.usage-segment-fill:first-child { border-radius: 999px 0 0 999px; }
.usage-segment-fill:last-child  { border-radius: 0 999px 999px 0; }
.usage-share-bar-bg { background: var(--track) !important; border-radius: 999px !important; }
.usage-share-bar-fill { border-radius: 999px !important; }

/* Zaman filtresi: segment kontrol */
.timeline-filters {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 999px !important;
  background: var(--track);
  padding: 3px;
  gap: 2px;
}
.timeline-filters button {
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  padding: 4px 12px !important;
  letter-spacing: 0.6px;
  transition: all 0.2s var(--ease-out);
}
.timeline-filters button:hover { color: var(--text-main) !important; }
.timeline-filters button.on {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(14, 165, 233, 0.7);
}

/* ApexCharts: tema uyumlu eksen, ızgara ve tooltip */
.apexcharts-gridline,
.apexcharts-grid line { stroke: var(--grid-line) !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label,
.apexcharts-xaxis text, .apexcharts-yaxis text { fill: var(--text-light) !important; }
.apexcharts-legend-text { color: var(--text-muted) !important; }
.apexcharts-tooltip {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.apexcharts-tooltip-title {
  background: var(--bg-card-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
}
.apexcharts-xaxistooltip {
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

/* --------------------------------------------------------------------------
   9. TABLOLAR
   -------------------------------------------------------------------------- */
.usage-table, .matrix-table { border-collapse: separate !important; border-spacing: 0; }
.usage-table th, .matrix-table th {
  background: transparent !important;
  color: var(--text-light) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px !important;
  border-bottom: 1px solid var(--border-strong) !important;
  white-space: nowrap;
}
.usage-table td, .matrix-table td {
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: background 0.15s ease;
}
.usage-table tbody tr:last-child td,
.matrix-table tbody tr:last-child td { border-bottom: none !important; }
.usage-table tbody tr:hover td,
.matrix-table tbody tr:hover td { background: var(--accent-soft) !important; }
.usage-table tbody tr:hover td:first-child,
.matrix-table tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; }
.usage-table tbody tr:hover td:last-child,
.matrix-table tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; }

/* Durum hapları: düz blok yerine yumuşak, halkalı */
.status-pill {
  border-radius: 999px !important;
  padding: 3px 11px;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
}
.status-pill.ok   { background: var(--ok-soft) !important;   color: var(--ok) !important;   box-shadow: inset 0 0 0 1px var(--ok-ring); }
.status-pill.bad  { background: var(--bad-soft) !important;  color: var(--bad) !important;  box-shadow: inset 0 0 0 1px var(--bad-ring); }
.status-pill.warn { background: var(--warn-soft) !important; color: var(--warn) !important; box-shadow: inset 0 0 0 1px var(--warn-ring); }

/* --------------------------------------------------------------------------
   10. BUTONLAR, FORMLAR, TOGGLE
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--track);
  color: var(--text-main);
  font-weight: 500;
  letter-spacing: 0.6px;
  transition: transform 0.15s var(--ease-out), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-ink);
}
.btn:active { transform: scale(0.97); }
.btn.small { border-radius: 8px; padding: 5px 11px; }

.btn.primary {
  background: var(--accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(14, 165, 233, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn.primary:hover { filter: brightness(1.1); color: #fff; background: var(--accent-grad); }

.btn.danger {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: var(--bad-ring);
}
.btn.danger:hover {
  background: var(--bad);
  color: #fff;
  box-shadow: 0 8px 20px -8px var(--bad);
}

.form-control {
  border-radius: 10px !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-main) !important;
  padding: 9px 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.form-control:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--ring) !important;
}
.form-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light) !important;
}

/* Toggle: hem standart hem büyük switch, her iki tema */
:is(body.theme-dark, body.theme-light) .toggle-slider {
  background-color: var(--track-strong);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: background 0.3s var(--ease-out), box-shadow 0.3s ease;
}
:is(body.theme-dark, body.theme-light) .toggle-slider:before {
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease-out);
}
:is(body.theme-dark, body.theme-light) input:checked + .toggle-slider {
  background: var(--accent-grad);
  box-shadow: 0 0 14px -2px rgba(14, 165, 233, 0.65);
}
:is(body.theme-dark, body.theme-light) .toggle-switch-lg input:checked + .toggle-slider {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 0 16px -2px rgba(16, 185, 129, 0.7);
}
:is(body.theme-dark, body.theme-light) input:checked + .toggle-slider:before { background-color: #ffffff; }
.toggle-switch input:focus-visible + .toggle-slider,
.toggle-switch-lg input:focus-visible + .toggle-slider { box-shadow: var(--ring); }

/* --------------------------------------------------------------------------
   11. MODEM SEKMESİ: SIM & BONDING KARTLARI
   -------------------------------------------------------------------------- */
.sim-module-card {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
  background-image: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--modem-c, #38bdf8) 11%, transparent), transparent 55%) !important;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s ease !important;
}
.sim-module-card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--modem-c, #38bdf8) 45%, transparent) !important;
  box-shadow: var(--card-shadow-hover), 0 18px 50px -26px var(--modem-c, #38bdf8) !important;
}
.sim-module-card::before {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--modem-c, #38bdf8) 20%, var(--modem-c, #38bdf8) 80%, transparent) !important;
  box-shadow: 0 0 16px var(--modem-c, #38bdf8);
}

.bonding-iface-card,
body.theme-dark .bonding-iface-card {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  padding: 13px 15px !important;
  transition: all 0.25s var(--ease-out) !important;
}
.bonding-iface-card.is-active,
body.theme-dark .bonding-iface-card.is-active {
  background:
    linear-gradient(90deg, var(--accent-soft), transparent 70%),
    var(--bg-card) !important;
  border-color: var(--accent-border) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
.bonding-iface-card:hover { transform: translateY(-1px); border-color: var(--accent-border) !important; }

/* --------------------------------------------------------------------------
   12. YÖNLENDİRME (CLOUD BRIDGE) — açık tema hataları giderildi
   -------------------------------------------------------------------------- */
.fwd-row {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid var(--border-strong) !important;
  border-radius: 14px !important;
  transition: all 0.25s var(--ease-out) !important;
}
.fwd-row:hover {
  background: var(--bg-card-subtle) !important;
  border-color: var(--accent-border) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
.fwd-row.active   { border-left-color: var(--ok) !important; }
.fwd-row.idle     { border-left-color: var(--accent) !important; }
.fwd-row.disabled { border-left-color: var(--text-light) !important; }
.fwd-row.error    { border-left-color: var(--bad) !important; }

.fwd-name { font-weight: 600 !important; }
.fwd-ports {
  background: var(--track) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
}
.port-in  { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.port-out { color: var(--text-main) !important; }
.fwd-url-bar {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
}
.fwd-url-code { color: var(--accent-ink) !important; }
.fwd-row-metrics { border-color: var(--border-subtle) !important; }
.fwd-metric-lbl { font-size: 10px !important; letter-spacing: 1.1px !important; color: var(--text-light) !important; }
.fwd-metric-val.active-conn { color: var(--ok) !important; }
.fwd-metric-val.speed-val   { color: var(--accent-ink) !important; }
.fwd-btn-del { color: var(--bad) !important; border-color: var(--bad-ring) !important; }

/* --------------------------------------------------------------------------
   13. SERVER PANELİ
   -------------------------------------------------------------------------- */
.server-kpi-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, var(--surface-hi), transparent 100px), var(--bg-card) !important;
  box-shadow: var(--card-shadow) !important;
}
.server-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: var(--accent-grad);
  opacity: 0.7;
  border-radius: 0 0 2px 2px;
}
.server-kpi-card .kpi-header { font-size: 10.5px !important; letter-spacing: 1.2px; font-weight: 500 !important; color: var(--text-light) !important; }
.server-kpi-card .kpi-value  { font-weight: 600 !important; font-size: 26px !important; }
.server-service-item {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease;
}
.server-service-item:hover { border-color: var(--accent-border) !important; }

/* --------------------------------------------------------------------------
   14. MODALLAR (GLASS DIALOG)
   -------------------------------------------------------------------------- */
.modal-overlay, .modal-backdrop {
  background: rgba(3, 7, 15, 0.62) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}
.modal-dialog {
  background: linear-gradient(180deg, var(--surface-hi), transparent 160px), var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
  animation: aurora-pop 0.38s var(--ease-out);
}
.modal-close {
  border-radius: 10px !important;
  transition: background 0.2s ease, transform 0.2s var(--ease-out);
}
.modal-close:hover { background: var(--bad-soft) !important; color: var(--bad) !important; transform: rotate(90deg); }

.line-detail-hero-box {
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%), var(--bg-card-subtle) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: 16px !important;
}
.line-detail-kpi-card {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
}
.line-detail-kpi-card .kpi-lbl { text-transform: uppercase; letter-spacing: 1px; font-size: 10.5px !important; }
.line-detail-kpi-card .kpi-val { font-weight: 600 !important; }
.line-detail-hw-table {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  background: var(--bg-card) !important;
}
.line-detail-hw-table tr:not(:last-child) td { border-bottom: 1px solid var(--border-subtle) !important; }
.line-detail-hw-table td.hw-lbl { background: var(--bg-card-subtle) !important; color: var(--text-light) !important; letter-spacing: 0.6px; }

/* --------------------------------------------------------------------------
   15. MOBİL & DOKUNMATİK
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .icon-sidebar {
    background: var(--bg-card) !important;
    border-right: 1px solid var(--border-strong) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .side-nav-btn { height: 46px !important; }
  .top-header { padding: 0 12px !important; }
  .navy-sub-banner { padding: 8px 12px !important; }
  .content-body { padding: 12px 10px calc(20px + env(safe-area-inset-bottom)) !important; }
  .exec-card { border-radius: 16px !important; }
  .line-card-box { border-radius: 18px !important; }
  .speed-box .speed-value { font-size: 26px !important; }
  .line-card-speeds .speed-box + .speed-box { padding-left: 12px; }
}

@media (hover: none) {
  .line-card-box:hover, .sim-module-card:hover, .bonding-iface-card:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   16. HAREKET
   -------------------------------------------------------------------------- */
@keyframes aurora-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ok-ring); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@keyframes aurora-pulse-current {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes aurora-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes aurora-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aurora-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. SICAKLIK VE KİLİTLENME TEŞHİS GÜNLÜĞÜ MODALI
   -------------------------------------------------------------------------- */
.temp-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}
.temp-summary-card {
  background: var(--bg-card-subtle, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.temp-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
}
.tc-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-light, #94a3b8);
}
.tc-val {
  font-size: 20px;
  font-weight: 800;
  font-family: 'Oswald', ui-monospace, monospace;
  color: var(--text-main, #f8fafc);
  letter-spacing: 0.5px;
}
.tc-val.ok { color: #10b981 !important; }
.tc-val.warn { color: #f59e0b !important; }
.tc-val.bad { color: #ef4444 !important; }
.tc-val.accent { color: #38bdf8 !important; }
.tc-sub {
  font-size: 11px;
  color: var(--text-subtle, #64748b);
  font-weight: 500;
}

.temp-console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-bottom: none;
  font-size: 12px;
  color: var(--text-light, #94a3b8);
}
.tc-file-icon { font-size: 14px; }
.tc-file-path { font-family: ui-monospace, monospace; font-weight: 600; color: #38bdf8; }
.tc-badge {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.temp-console-box {
  background: #020617;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 12px 14px;
  height: 340px;
  max-height: 45vh;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-break: break-all;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}
.temp-console-box::-webkit-scrollbar {
  width: 8px;
}
.temp-console-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.tc-loading {
  color: #64748b;
  text-align: center;
  padding: 40px 0;
  font-style: italic;
}
.tlog-crash { color: #f87171 !important; font-weight: 700; background: rgba(239, 68, 68, 0.12); padding: 1px 4px; border-radius: 3px; }
.tlog-warn  { color: #fbbf24 !important; font-weight: 600; }
.tlog-ok    { color: #34d399 !important; font-weight: 600; }
.tlog-per   { color: #38bdf8 !important; }
.tlog-banner{ color: #ef4444 !important; font-weight: 800; border-left: 3px solid #ef4444; padding-left: 6px; }


/* ==========================================================================
   YAYIN MODU kilidi & Yayın Öncesi Kontrol
   ========================================================================== */
.bm-header-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 10px; cursor: pointer;
  background: var(--bg-card); color: var(--text-main);
  border: 1px solid var(--border-subtle);
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .4px;
  white-space: nowrap;
}
.bm-header-btn:hover { border-color: var(--border-strong); }
.bm-toggle b { color: var(--text-muted); }
.bm-toggle.on { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 0 0 3px var(--bad-soft); }
.bm-toggle.on b { color: #fff; }
.broadcast-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 9px 20px; font-size: 12.5px;
  background: var(--bad-soft); color: var(--text-main);
  border-top: 1px solid var(--bad-ring); border-bottom: 1px solid var(--bad-ring);
}
.broadcast-banner b { color: var(--bad); letter-spacing: .5px; }
.broadcast-banner .bm-since { color: var(--text-muted); margin-left: auto; }
.bm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 6px var(--bad); }
label:has(> input.bm-locked),
.bm-locked, .bm-locked:hover { opacity: .45 !important; cursor: not-allowed !important; filter: grayscale(.6); }
.pf-verdict { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-family: 'Oswald', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: .5px; display: none; }
.pf-verdict.go { display: block; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-ring); }
.pf-verdict.warn { display: block; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-ring); }
.pf-verdict.no_go { display: block; background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-ring); }
.pf-verdict small { font-family: inherit; font-weight: 500; font-size: 13px; margin-left: 8px; opacity: .85; }
.pf-body { margin-top: 10px; max-height: 58vh; overflow-y: auto; }
.pf-group { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-muted); }
.pf-row { display: grid; grid-template-columns: 22px minmax(110px, 160px) 1fr; gap: 8px; align-items: start;
  padding: 6px 4px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.pf-row .pf-ic { font-weight: 800; text-align: center; }
.pf-row.ok .pf-ic { color: var(--ok); }
.pf-row.warn .pf-ic { color: var(--warn); }
.pf-row.fail .pf-ic { color: var(--bad); }
.pf-row.info .pf-ic { color: var(--text-muted); }
.pf-row .pf-lbl { font-weight: 600; }
.pf-row .pf-txt { color: var(--text-main); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .bm-btn-txt { display: none; }
  .bm-header-btn { padding: 5px 8px; }
  .pf-row { grid-template-columns: 22px 1fr; }
  .pf-row .pf-txt { grid-column: 2; }
}

/* ==========================================================================
   Loglar sekmesi (filtrelenebilir olay görüntüleyici)
   ========================================================================== */
.lg-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.lg-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-live, .lg-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-main); cursor: pointer; white-space: nowrap; }
.lg-filters { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-subtle);
  border-radius: 10px; background: var(--bg-card); margin-bottom: 10px; }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lg-lbl { width: 64px; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
.lg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lg-chips button { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-main); }
.lg-chips button small { color: var(--text-muted); margin-left: 3px; }
.lg-chips button.on { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }
.lg-chips button.on small { color: rgba(255,255,255,.85); }
.lg-custom { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lg-custom input { width: auto; padding: 3px 6px; font-size: 12px; }
.lg-search { flex: 1 1 240px; max-width: 420px; padding: 5px 10px; font-size: 13px; }
.lg-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0 8px; }
.lg-pill { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-subtle); }
.lg-pill.bad { color: var(--bad); border-color: var(--bad-ring); background: var(--bad-soft); }
.lg-pill.warn { color: var(--warn); border-color: var(--warn-ring); background: var(--warn-soft); }
.lg-pill.ok { color: var(--ok); border-color: var(--ok-ring); background: var(--ok-soft); }
.lg-list { border: 1px solid var(--border-subtle); border-radius: 10px; max-height: 62vh; overflow-y: auto; background: var(--bg-card); }
.lg-day { position: sticky; top: 0; z-index: 1; padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted); background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); }
.lg-item { display: grid; grid-template-columns: 70px 12px 80px 130px 1fr; gap: 8px; align-items: baseline;
  padding: 7px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; border-left: 3px solid transparent; }
.lg-item.sev-bad { border-left-color: var(--bad); }
.lg-item.sev-warn { border-left-color: var(--warn); }
.lg-item time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lg-item .dot { align-self: center; }
.lg-slot { font-weight: 700; }
.lg-cat { color: var(--text-muted); font-size: 11.5px; }
.lg-text { overflow-wrap: anywhere; }
.lg-ip { font-size: 11px; padding: 1px 6px; margin-left: 4px; }
.lg-src { font-size: 10.5px; color: var(--text-muted); border: 1px dashed var(--border-subtle); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
@media (max-width: 760px) {
  .lg-lbl { width: 100%; }
  .lg-item { grid-template-columns: 62px 12px 1fr; }
  .lg-item .lg-cat { display: none; }
  .lg-item .lg-text { grid-column: 1 / -1; }
}

/* ==========================================================================
   Kokpit ızgarası: dar ekranda taşma düzeltmesi
   Izgara öğeleri varsayılan olarak içlerindeki en geniş içerikten (tablo, uzun çip)
   daha dar olamaz; bu yüzden kart ekrandan taşıp kesiliyordu. min-width:0 ile kart
   ekrana sığar, geniş içerik kendi kutusunda yana kayar.
   ========================================================================== */
.exec-grid-row-top > *, .exec-grid-row-bottom > * { min-width: 0; }
.exec-card .card-title { flex-wrap: wrap; gap: 4px 8px; }
.exec-card .card-title .chip { white-space: normal; overflow-wrap: anywhere; }
.line-prog-header { gap: 8px; }
.line-prog-header > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-prog-header > span:last-child { flex-shrink: 0; }
#statusMatrixTable { min-width: 520px; }
@media (max-width: 760px) {
  .exec-grid-row-top, .exec-grid-row-bottom { grid-template-columns: minmax(0, 1fr) !important; }
  .exec-card { padding: 16px 14px; }
  .matrix-grid-box { gap: 4px; }
}

/* Detaylı Sinyal Seviyeleri: SIM başına gerçek sinyal (modemin bildirdiği %) */
#signalMatrixGrid.matrix-grid-box { display: flex !important; flex-direction: column; gap: 8px !important; }
.sig-row { display: grid; grid-template-columns: 40px 1fr 30px 44px; align-items: center; gap: 8px; font-size: 12px; }
.sig-slot { font-weight: 700; color: var(--text-main); }
.sig-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.sig-dot { height: 9px; border-radius: 3px; background: var(--track-strong, #cbd5e1); }
.sig-dot.lvl-ok { background: var(--ok); box-shadow: 0 0 6px var(--ok-ring); }
.sig-dot.lvl-warn { background: var(--warn); box-shadow: 0 0 6px var(--warn-ring); }
.sig-dot.lvl-bad { background: var(--bad); box-shadow: 0 0 6px var(--bad-ring); }
.sig-nt { color: var(--text-muted); font-weight: 600; text-align: center; }
.sig-nt.lvl-bad { color: var(--bad); }
.sig-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-muted); }
.sig-val.lvl-ok { color: var(--ok); }
.sig-val.lvl-warn { color: var(--warn); }
.sig-val.lvl-bad { color: var(--bad); }
.sig-empty { font-size: 12px; color: var(--text-muted); padding: 4px 0; }

/* ==========================================================================
   Bildirimler sekmesi (telefona gönderilen bildirimlerin geçmişi)
   ========================================================================== */
.nf-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; margin-top: 12px; }
.nf-list { display: flex; flex-direction: column; }
.nf-item { border-bottom: 1px solid var(--border-subtle); cursor: pointer; border-left: 4px solid transparent; }
.nf-item.nf-p5 { border-left-color: var(--bad); }
.nf-item.nf-p4 { border-left-color: var(--warn); }
.nf-item.nf-p3 { border-left-color: var(--ok); }
.nf-st:not(.ok):not(.bad):not(.warn) { color: var(--text-main) !important; background: transparent !important; border: 1px dashed var(--border-strong, var(--border-subtle)) !important; }
.nf-item:hover { background: var(--surface-hi, rgba(127,127,127,.05)); }
.nf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 10px; }
.nf-title { font-weight: 700; font-size: 13.5px; color: var(--text-main); overflow-wrap: anywhere; }
.nf-msg { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.nf-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.nf-side time { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nf-side .status-pill { font-size: 10px; white-space: nowrap; }
.nf-muted .nf-title, .nf-muted .nf-msg { opacity: .6; }
.nf-detail { display: none; padding: 2px 10px 12px 10px; font-size: 12.5px; }
.nf-item.open .nf-detail { display: grid; gap: 5px; }
.nf-detail > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.nf-detail b { color: var(--text-muted); font-weight: 600; }
.nf-detail span { overflow-wrap: anywhere; }
.nf-detail code { font-size: 11.5px; }
.nf-err { color: var(--bad); }
@media (max-width: 760px) {
  .nf-row { grid-template-columns: minmax(0, 1fr); }
  .nf-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .nf-detail > div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* Konum kartı (GPS / baz istasyonu) */
.loc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.loc-sep { width: 1px; height: 22px; background: var(--border-subtle); margin: 0 4px; }
.loc-select { width: auto; padding: 4px 8px; font-size: 12px; }
.loc-result { margin-top: 12px; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
.loc-ok { color: var(--ok); font-weight: 600; }
.loc-bad { color: var(--bad); font-weight: 600; }
.loc-sub { color: var(--text-main); }
.loc-table-wrap { overflow-x: auto; }
.loc-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 12px; }
.loc-table th, .loc-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); }
.loc-table th { color: var(--text-muted); font-weight: 600; }
.loc-log summary { cursor: pointer; color: var(--text-muted); font-size: 12px; }
.loc-log pre { white-space: pre-wrap; margin: 2px 0 6px; font-size: 11.5px; color: var(--text-main); }
@media (max-width: 760px) { .loc-sep { display: none; } }