/* ──────────────────────────────────────────────────────────────────────────
   K&C NetFox / LoRaWAN Mapper NextGen
   Color palette matched to https://netfox-it.de

   Templates use only theme-aware Bootstrap 5.3 utilities now
   (.bg-body-tertiary, .border, .text-secondary, .table — no .bg-dark /
   .text-light / .table-dark hacks). The legacy override block has been
   deleted; this file only re-themes Bootstrap's CSS custom properties
   and adds NetFox brand specifics.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* NetFox base palette */
  --kc-blue-600:  #2563eb;
  --kc-blue-700:  #1d4ed8;
  --kc-blue-800:  #1e40af;
  --kc-blue-400:  #60a5fa;
  --kc-blue-300:  #93c5fd;
  --kc-bg-dark:   #0a0f1a;
  --kc-bg-card:   #0d1628;
  --kc-border:    #1e2d45;
  --kc-text:      #e2e8f0;
  --kc-text-mute: #94a3b8;
  /* Fox-Orange (secondary accent, matches the logo) */
  --kc-orange:    #f59811;
  --kc-orange-d:  #e08a0f;

  /* Re-map Bootstrap's named colours to the NetFox palette so that
     .text-primary / .btn-warning / .border-warning / .text-info etc.
     pick up the brand automatically. */
  --bs-primary:        var(--kc-blue-600);
  --bs-primary-rgb:    37, 99, 235;
  --bs-warning:        var(--kc-orange);
  --bs-warning-rgb:    245, 152, 17;
  --bs-info:           var(--kc-blue-400);
  --bs-info-rgb:       96, 165, 250;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

.app-navbar {
  background: var(--bs-tertiary-bg);
  border-bottom-color: var(--bs-border-color);
}
.app-navbar .nav-link { color: var(--bs-secondary-color); }
.app-navbar .nav-link:hover { color: var(--bs-body-color); }

footer { border-top-color: var(--bs-border-color); }

/* Hero: subtle gradient + soft accent glow instead of the full blue wash */
.hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(37, 99, 235, .18), transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(245, 152, 17, .07), transparent 50%),
    linear-gradient(180deg, var(--kc-bg-card) 0%, var(--kc-bg-dark) 100%);
  color: var(--kc-text);
  border-bottom: 1px solid var(--bs-border-color);
}
[data-bs-theme="light"] .hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(37, 99, 235, .10), transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(245, 152, 17, .06), transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  color: #0a0f1a;
}

.hero-title {
  font-size: 2.1rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
}
.hero-title .text-warning {
  letter-spacing: 0;
}

/* Stat cards — slimmer than full .card, hairline border, big-but-light number */
.stat-card {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 0.85rem 0.5rem;
}
.stat-number {
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Navbar brand — semibold instead of bold, a hair smaller */
.navbar-brand {
  font-weight: 500 !important;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}

.card { border-radius: 10px; }
.btn  { border-radius: 8px; }

/* Links: NetFox blue, lighter shade in dark mode for contrast */
a { color: var(--kc-blue-400); text-decoration: none; }
a:hover { color: var(--kc-blue-300); }
[data-bs-theme="light"] a { color: var(--kc-blue-600); }
[data-bs-theme="light"] a:hover { color: var(--kc-blue-700); }

/* Links inside coloured text/buttons inherit the parent colour */
.text-warning a, a.text-warning,
.text-primary a, a.text-primary { color: inherit; }

/* Code/kbd: subtle blue accent */
code {
  color: var(--kc-blue-400);
  background: rgba(96, 165, 250, .12);
  padding: 1px 5px;
  border-radius: 4px;
}
[data-bs-theme="light"] code {
  color: var(--kc-blue-700);
  background: rgba(37, 99, 235, .10);
}

.font-monospace { font-size: .85em; }

.breadcrumb-item + .breadcrumb-item::before { color: var(--bs-secondary-color); }
.leaflet-container { background: var(--bs-secondary-bg) !important; }

/* Focused inputs use the brand blue ring */
.form-control:focus,
.form-select:focus {
  border-color: var(--kc-blue-600);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, .25);
}

/* ── Dark theme (default) — NetFox dark palette ────────────────────────── */

[data-bs-theme="dark"] {
  --bs-body-bg:         var(--kc-bg-dark);
  --bs-body-color:      var(--kc-text);
  --bs-border-color:    var(--kc-border);
  --bs-secondary-color: var(--kc-text-mute);
  --bs-tertiary-bg:     var(--kc-bg-card);
  --bs-secondary-bg:    #11192c;
}
[data-bs-theme="dark"] .app-navbar { background: var(--kc-bg-card); }

/* Inputs/selects need slightly more contrast than body-bg in dark mode,
   otherwise they disappear into the page. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #0f1a30;
  color: var(--kc-text);
  border-color: var(--kc-border);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--kc-text-mute); }
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--kc-bg-card);
  color: var(--kc-text-mute);
  border-color: var(--kc-border);
}

/* ── Light theme — slate-tinted palette ────────────────────────────────── */

[data-bs-theme="light"] {
  --bs-body-bg:         #ffffff;
  --bs-body-color:      #0a0f1a;
  --bs-border-color:    #e2e8f0;
  --bs-secondary-color: #64748b;
  --bs-tertiary-bg:     #f8fafc;
}

/* ── Theme toggle ───────────────────────────────────────────────────────── */
#theme-toggle { line-height: 1; padding: 4px 10px; }

/* ── Brand assets ───────────────────────────────────────────────────────── */
.brand-icon { display: block; }
.footer-logo { max-width: 220px; height: auto; opacity: 0.9; }
.footer-logo:hover { opacity: 1; }

/* Logo's blue arc is dark — brighten slightly in dark mode for contrast */
[data-bs-theme="dark"] .footer-logo,
[data-bs-theme="dark"] .brand-icon {
  filter: brightness(1.15);
}

/* ── Search bar ────────────────────────────────────────────────────────────── */
.search-container {
  flex-shrink: 0;
}

#search-input {
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  transition: all 0.15s ease-in-out;
}

#search-input:focus {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

.search-results {
  min-width: 200px;
  max-width: 300px;
  margin-top: 2px;
}

.search-results .list-group-item {
  border: none;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.875rem;
}

.search-results .list-group-item:last-child {
  border-bottom: none;
}

.search-results .list-group-item:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="light"] .search-results {
  border: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .search-results {
  border: 1px solid var(--kc-border);
}

/* ── Webhook status indicators ───────────────────────────────────────────── */
.webhook-status {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.webhook-status-green { background-color: #10b981; }
.webhook-status-orange { background-color: #f59e0b; }
.webhook-status-red { background-color: #ef4444; }