/* Falcon MDM — Custom Styles */

:root {
  --falcon-blue: #0d6efd;
  --falcon-dark: #050d1a;
  --falcon-card: #0d1b2a;
  --falcon-border: #1a2f4a;
}

body {
  background-color: #0a0f1e;
  color: #c9d1d9;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Navbar ──────────────────────────────────────────── */
.navbar {
  background-color: #050d1a !important;
  border-bottom-color: #1a2f4a !important;
}

.falcon-logo {
  font-size: 1.4rem;
  color: var(--falcon-blue);
  line-height: 1;
}

/* ── Cards ───────────────────────────────────────────── */
.card {
  background-color: #0d1b2a;
  border-color: #1a2f4a;
  border-radius: 10px;
}

.card-header {
  background-color: rgba(255,255,255,0.03);
  border-bottom-color: #1a2f4a;
}

.card-footer {
  background-color: rgba(255,255,255,0.02);
  border-top-color: #1a2f4a;
}

/* ── Device cards ─────────────────────────────────────── */
.device-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(13, 110, 253, 0.15);
}

/* ── Status dots ──────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-online {
  background-color: #198754;
  box-shadow: 0 0 6px #19875477;
  animation: pulse-green 2s infinite;
}

.dot-offline {
  background-color: #6c757d;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 4px #19875466; }
  50%       { box-shadow: 0 0 10px #198754bb; }
}

/* ── Blink indicators ─────────────────────────────────── */
.blink-green {
  animation: blink 1.4s step-start infinite;
  color: #198754;
}

.blink-red {
  animation: blink 0.8s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ── Tables ───────────────────────────────────────────── */
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(13, 110, 253, 0.07);
  --bs-table-striped-bg: rgba(255,255,255,0.02);
}

.table-dark thead th {
  background-color: rgba(255,255,255,0.04);
  color: #8b949e;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-color: #1a2f4a;
}

/* ── Tabs ─────────────────────────────────────────────── */
.nav-tabs {
  border-bottom-color: #1a2f4a;
}

.nav-tabs .nav-link {
  color: #8b949e;
  border-color: transparent;
  font-size: 0.85rem;
}

.nav-tabs .nav-link:hover {
  color: #c9d1d9;
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  background-color: #0d1b2a;
  border-color: #1a2f4a #1a2f4a #0d1b2a;
  color: var(--falcon-blue);
}

/* ── Forms ────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: #0d1b2a;
  border-color: #1a2f4a;
  color: #c9d1d9;
}

.form-control:focus, .form-select:focus {
  background-color: #0d1b2a;
  border-color: var(--falcon-blue);
  color: #c9d1d9;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

.form-control::placeholder { color: #8b949e; }

.input-group-text {
  background-color: #0a0f1e;
  border-color: #1a2f4a;
}

/* ── Breadcrumb ───────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before { color: #8b949e; }
.breadcrumb-item a { color: var(--falcon-blue); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: #8b949e; }

/* ── Toasts ───────────────────────────────────────────── */
.toast {
  backdrop-filter: blur(12px);
  border-radius: 8px !important;
  min-width: 260px;
}

/* ── Scrollbars ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #050d1a; }
::-webkit-scrollbar-thumb { background: #1a2f4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3f5a; }

/* ── Badges ───────────────────────────────────────────── */
.badge {
  letter-spacing: 0.04em;
}

/* ── QR code container ────────────────────────────────── */
.qr-container svg {
  border-radius: 10px;
  background: #f8f9fa;
  padding: 8px;
}

/* ── Letter spacing ───────────────────────────────────── */
.letter-spacing-3 { letter-spacing: 0.35em; }
.ls-1 { letter-spacing: 0.1em; }

/* ── Sticky header ────────────────────────────────────── */
.sticky-top thead { z-index: 1; }

/* ── Alert strip ──────────────────────────────────────── */
.alert-sm { font-size: 0.85rem; }

/* ── Modal backdrop ───────────────────────────────────── */
.modal-content {
  background-color: #0d1b2a;
  border-color: #1a2f4a;
}

.modal-header, .modal-footer { border-color: #1a2f4a !important; }

/* ── Pre blocks ───────────────────────────────────────── */
pre {
  background-color: #050d1a;
  border: 1px solid #1a2f4a;
  border-radius: 6px;
  padding: 1rem;
}

/* ── Leaflet dark override ────────────────────────────── */
.leaflet-container {
  background: #0a0f1e;
}

.leaflet-tile {
  filter: brightness(0.85) hue-rotate(10deg);
}

/* ── Footer ───────────────────────────────────────────── */
footer {
  border-top-color: #1a2f4a !important;
  font-size: 0.72rem;
  color: #3d4f63;
}