/* =======================
   flask.css (glass unified)
   ======================= */

/* Reset & base */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: url('/static/api2.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #c5c8c6;
  font-family: 'Orbitron', sans-serif;
  overflow-x: hidden;
}

/* Layout helpers */
.container { max-width: 1200px; margin: auto; padding: 20px; }

/* -----------------------
   Navbar
   ----------------------- */
.navbar {
  background: linear-gradient(180deg, rgba(12,14,18,.92), rgba(12,14,18,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.navbar-brand,
.logo-button {
  background: none; border: none; color: #5bc0de !important;
  font-weight: 600; font-size: 1.8em; text-transform: uppercase;
  padding: 0; cursor: pointer; transition: color .25s ease;
}
.logo-button:hover, .navbar-brand:hover { color: #4aa7c3 !important; }
.logo-button:focus { outline: none; box-shadow: none; }

.navbar-nav .nav-link { color: #c5c8c6 !important; }
.navbar-nav .nav-link:hover { color: #5bc0de !important; }

.dropdown-menu { background-color: #1f2328; border: 1px solid rgba(255,255,255,.06); }
.dropdown-item { color: #c5c8c6 !important; }
.dropdown-item:hover { background-color: #293037; }

/* -----------------------
   Glass panels (shared style)
   ----------------------- */
.glass-panel {
  background: rgba(20,23,27,.72);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border: none;
  color: #e9eef5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 30px;
}

/* Search container uses glass directly */
.search-container {
  max-width: 900px; width: 90%;
  margin: 50px auto;
}
.search-container { /* apply glass */
  background: rgba(20,23,27,.72);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border: none;
  color: #e9eef5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 30px;
}

/* Auth container: slim layout; card gets glass via strong override */
.auth-container {
  max-width: 440px; width: 92%;
  margin: clamp(40px, 10vh, 80px) auto;
  background: transparent; padding: 0; box-shadow: none;
}
.auth-container .card {
  background: rgba(20,23,27,.72) !important;
  color: #e9eef5 !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.auth-container .card .card-body { padding: 28px; }

/* Titles */
.auth-container h3, .search-container h1, .card h4 {
  color: #e6f6fb; text-align: center; margin-bottom: 18px; font-weight: 700;
}

/* -----------------------
   Forms
   ----------------------- */
.form-label { color: #cfd6dc; letter-spacing: .2px; }

.form-control {
  background-color: #2b2f36;
  border: 1px solid rgba(255,255,255,.10);
  color: #e9eef5;
  padding: 12px 14px;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:focus {
  outline: none;
  background-color: #2f343b;
  border-color: #6bd4ee;
  box-shadow: 0 0 0 3px rgba(91,192,222,.25);
  color: #ffffff; /* ← gør skriften lysere mens du skriver */
}

.form-control::placeholder { color: #9aa3ad; }

/* Camera dropdown button next to plate input */
.btn-outline-light {
  border-radius: 0 12px 12px 0;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  transition: background-color .3s ease, border-color .3s ease;
}
.btn-outline-light:hover { background-color: rgba(255,255,255,.10); }

/* -----------------------
   Buttons
   ----------------------- */
.btn-primary {
  background-color: #5bc0de;
  border: none; color: #0f1115; font-weight: 700;
  padding: 12px 16px; border-radius: 12px;
  transition: transform .06s ease, filter .2s ease, background-color .2s ease;
}
.btn-primary:hover { background-color: #4aa7c3; filter: brightness(1.02); }
.btn-primary:active { transform: translateY(1px); }

.btn-success {
  background-color: #28a745; border: none; color: #fff; font-weight: 700;
  padding: 12px 16px; border-radius: 12px;
}
.btn-success:hover { background-color: #218838; }

/* -----------------------
   Alerts (only used for errors on login)
   ----------------------- */
.alert {
  border-radius: 12px; border: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.alert-danger {
  background: rgba(220,53,69,.18);
  color: #ffd6db;
}

/* -----------------------
   Responsiveness
   ----------------------- */
@media (max-width: 1200px) { .search-container { max-width: 800px; } }
@media (max-width: 992px)  { .search-container { max-width: 700px; } }
@media (max-width: 768px)  { .search-container { max-width: 92%; } }

/* Selection */
::selection { background: rgba(91,192,222,.35); color: #0f1115; }

/* -----------------------
   Graph modal fix
   ----------------------- */
#graphModal .modal-body {
  height: calc(100vh - 64px); /* fuld højde minus header */
  position: relative;
}
#cy {
  width: 100%;
  height: 100%;
  background: #111;
  display: block;
}
#graphLoading {
  z-index: 10;
  pointer-events: none; /* så X-knappen kan trykkes selv om loader vises */
}