@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

:root{
  --bg:#2a2f34;        /* default på admin/viewer */
  --panel:#000000;     /* bakom menyer */
  --text:#ffffff;
  --muted:#aaaaaa;
  --border:#2b2b2b;

  /* mörkblå accenter */
  --accent:#0b2a5b;
  --accent2:#4aa3ff;
}

body,
body.bg-dark{
  background-color:var(--bg) !important;
  color:var(--text);
  font-family:'Orbitron',sans-serif;
  margin:0;
  padding:0;
  overflow:auto;
}

body.home,
body.home.bg-dark{
  background-color:#000 !important;
  background-image:
    url("/system/back.png"),
    linear-gradient(to bottom, #141414 0px, #000 280px) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:center clamp(90px, 10vh, 170px), 0 0 !important;
  background-size:min(48vw, 550px) auto, 100% 100% !important;
  background-attachment:scroll, scroll !important;
  min-height:100dvh;
}

@media (max-width:768px){
  body.home,
  body.home.bg-dark{
    background-size:min(100vw, 900px) auto, 100% 100% !important;
    background-position:center clamp(90px, 10vh, 170px), 0 0 !important;
  }
}




img{ background:transparent; }

a{ color:var(--accent2); text-decoration:none; }
a:hover{ color:var(--text); }

::selection{ background:var(--accent); color:#000; }

.navbar.bg-dark{
  background-color:var(--panel) !important;
  border-bottom:2px solid var(--accent);
  font-family:'Orbitron',sans-serif;
}

.navbar-brand{
  color:var(--text);
  font-weight:700;
  text-transform:uppercase;
  border-radius:8px;
  padding:.25rem .5rem;
}
.navbar-brand:hover{
  color:#000;
  background:var(--accent);
}

.navbar-nav .nav-link{
  color:var(--text);
  border-radius:8px;
  padding:.35rem .6rem;
  transition:color .15s, background-color .15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color:#000;
  background:var(--accent);
}

.navbar-toggler{ border-color:var(--accent); }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230b2a5b' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .dropdown-menu{
  background-color:var(--panel) !important;
  border:1px solid var(--border);
  max-height:calc(100vh - 40px);
  overflow:auto;
  z-index:2000;
}

.dropdown-menu .dropdown-item{
  white-space:normal;
  color:var(--text);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus{
  background-color:var(--accent);
  color:#000;
}

@media (max-width:768px){
  [data-bs-theme="dark"] .dropdown-menu{
    min-width:100%;
    max-height:calc(100dvh - 90px);
  }
}