/* ── Base ─────────────────────────────────────────────────────────────────── */
:root {
  --bg-deep:    #0a0a14;
  --bg-card:    #12121e;
  --bg-card2:   #1a1a2e;
  --border:     #2a2a44;
  --accent:     #e53935;
  --text-dim:   #6c757d;
}

body {
  background: var(--bg-deep);
  min-height: 100vh;
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.eyenav {
  background: var(--bg-card2) !important;
  border-bottom: 1px solid var(--border);
}
.eyenav .nav-link { color: #adb5bd; transition: color .15s, background .15s; }
.eyenav .nav-link:hover,
.eyenav .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.06);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.card-header {
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.card-footer {
  background: rgba(0,0,0,.15);
  border-top: 1px solid var(--border);
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-card { transition: transform .2s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }

/* ── Camera feed ──────────────────────────────────────────────────────────── */
.feed-card { overflow: hidden; }
.feed-wrapper { background: #000; aspect-ratio: 16/9; overflow: hidden; }
.feed-img { object-fit: cover; height: 100%; display: block; }
.feed-offline {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0a0a14 0%, #12121e 100%);
}
.feed-overlay {
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  pointer-events: none;
}

/* ── Status dots ──────────────────────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-connected    { background: #22c55e; box-shadow: 0 0 6px #22c55e88; animation: pulse 2s infinite; }
.status-connecting   { background: #f59e0b; }
.status-offline      { background: #ef4444; }
.status-stopped      { background: #6b7280; }
.status-error        { background: #ef4444; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* Status text colours */
.status-text-connected  { color: #22c55e; }
.status-text-connecting { color: #f59e0b; }
.status-text-offline    { color: #ef4444; }
.status-text-stopped    { color: #6b7280; }

/* Camera status circle (cameras list) */
.cam-status-circle {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.status-bg-connected  { background: #16532820; color: #22c55e; border: 1px solid #22c55e44; }
.status-bg-connecting { background: #78350f20; color: #f59e0b; border: 1px solid #f59e0b44; }
.status-bg-offline    { background: #7f1d1d20; color: #ef4444; border: 1px solid #ef444444; }
.status-bg-stopped    { background: #1f293720; color: #6b7280; border: 1px solid #6b728044; }

/* ── Detection badges ─────────────────────────────────────────────────────── */
.detection-badge { font-size: .8rem; text-transform: capitalize; font-weight: 600; }
.detection-person   { background: #16532840; color: #4ade80; border: 1px solid #4ade8044; }
.detection-dog      { background: #78350f40; color: #fb923c; border: 1px solid #fb923c44; }
.detection-cat      { background: #4c1d9540; color: #c084fc; border: 1px solid #c084fc44; }
.detection-bird     { background: #16454640; color: #67e8f9; border: 1px solid #67e8f944; }
.detection-horse    { background: #71350040; color: #fbbf24; border: 1px solid #fbbf2444; }
.detection-cow,
.detection-sheep    { background: #1e3a5f40; color: #60a5fa; border: 1px solid #60a5fa44; }
.detection-bear,
.detection-elephant { background: #7f1d1d40; color: #f87171; border: 1px solid #f8717144; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; color: #dee2e6; }
.table-hover tbody tr:hover { background: rgba(255,255,255,.04); }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,.2);
}
.form-range::-webkit-slider-thumb { background: var(--accent); }
.form-range::-moz-range-thumb     { background: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-danger { background: var(--accent); border-color: var(--accent); }
.btn-danger:hover { background: #c62828; border-color: #c62828; }
.btn-xs {
  padding: .15rem .4rem;
  font-size: .75rem;
  border-radius: 4px;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-dim); border-color: transparent; }
.nav-tabs .nav-link.active {
  background: var(--bg-card2);
  border-color: var(--border) var(--border) var(--bg-card2);
  color: #fff;
}
.nav-tabs .nav-link:hover { color: #fff; }

/* ── Login page ───────────────────────────────────────────────────────────── */
.login-body  { background: var(--bg-deep); }
.login-card  { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 14px; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.font-monospace { font-family: 'SF Mono', 'Fira Code', monospace !important; }
pre { background: rgba(0,0,0,.3); padding: .75rem; border-radius: 6px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }