:root {
  --color-0: #060609;
  --color-1: #111116;
  --color-2: #222229;
  --color-3: #333339;
  --color-4: #444449;
  --color-5: #555559;
  --color-6: #666669;
  --color-7: #777779;
  --color-8: #888889;
  --color-9: #999;
  --color-10: #aaa;
  --color-11: #bbb;
  --color-12: #ccc;
  --color-13: #ddd;
  --color-14: #eee;
  --color-15: #fff;
  --color-primary: #55a;
  --color-dangerous: #944;
  --color-accent: #f96;
  --color-success: #3c3;
  --color-link: #ff6;
  --color-online: var(--color-success);
  --color-offline: #c22;
  --border-radius: .25em;
  --border-radius-button: 10em;
  --page-transition-duration: 0ms;
  --page-transition-duration-short: 0ms;
  --page-transition-duration-long: 0ms;
  --page-padding: 2em; }
  :root:has(body.animations) {
    --page-transition-duration: 100ms;
    --page-transition-duration-short: 50ms;
    --page-transition-duration-long: 150ms; }

@font-face {
  font-family: rubik;
  src: url(res/rubik.ttf); }

@font-face {
  font-family: dejavu;
  src: url(res/dejavu.ttf); }

@keyframes status-animation-online {
  0% {
    outline-color: #3c30;
    outline-offset: 0; }
  25% {
    outline-color: #3c3c; }
  50% {
    outline-color: #3c30;
    outline-offset: .25em; } }

@keyframes status-animation-offline {
  0% {
    outline-color: #c220;
    outline-offset: 0;
    scale: .9; }
  25% {
    outline-color: #c229;
    scale: 1; }
  100% {
    outline-color: #c220;
    outline-offset: .25em;
    scale: .9; } }

@keyframes status-animation-warning {
  0% {
    outline-color: #cc20;
    outline-offset: 0;
    scale: .9; }
  25% {
    outline-color: #cc29;
    scale: 1; }
  100% {
    outline-color: #cc20;
    outline-offset: .25em;
    scale: .9; } }

::-webkit-scrollbar {
  width: .325em;
  height: .325em; }

::-webkit-scrollbar-track {
  background: var(--color-3); }

::-webkit-scrollbar-thumb {
  background: var(--color-5); }

::-webkit-scrollbar-thumb:hover {
  background: var(--color-7); }

::-webkit-scrollbar-corner {
  background: transparent; }

html, body {
  height: 100dvh; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-2) !important; }

body, input, textarea, select, button {
  font-family: rubik, sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--color-14); }

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
  body, input, textarea, select, button {
    font-size: 1rem; } }

@media (max-width: 40rem) {
  :root {
    --page-padding: 1em; }
  nav {
    display: none !important; }
  body, input, textarea, select, button {
    font-size: .8rem; } }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

h1 {
  font-size: 1.75em; }

h2 {
  font-size: 1.5em; }

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

#queue-running-indicator {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none; }

h1::before {
  content: '';
  display: inline-block;
  background-image: url(res/loading-small.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em;
  height: 1em;
  transition: var(--page-transition-duration-long);
  margin-right: 0;
  width: 0;
  opacity: 0;
  translate: 0 .125em; }

body:has(#queue-running-indicator.visible) h1::before {
  margin-right: .25em;
  width: 1em;
  opacity: 1; }

#app {
  display: flex;
  min-height: 100%; }

nav {
  flex: .2;
  display: flex;
  flex-direction: column;
  padding-block: 1.25em 3.25em;
  white-space: nowrap;
  overflow: hidden;
  min-width: 10em;
  max-width: 15em;
  background-color: var(--color-3); }
  nav ul {
    flex: 1;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; }
  nav li {
    user-select: none;
    padding: .75em 1.25em;
    /* icon in front of every page entry; the image comes from the rules below */ }
    nav li[data-link]:hover {
      background-color: var(--color-4); }
    nav li[data-link]:active, nav li.active {
      background-color: var(--color-5); }
    nav li[data-link]::before {
      content: '';
      display: inline-block;
      width: 1.15em;
      height: 1.15em;
      margin-right: .6em;
      translate: 0 .2em;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      opacity: .55;
      transition: opacity var(--page-transition-duration); }
    nav li[data-link]:hover::before, nav li.active::before {
      opacity: 1; }
    nav li[data-link="clients"]::before {
      background-image: url(res/monitor.svg); }
    nav li[data-link="customers"]::before {
      background-image: url(res/customers.svg); }
    nav li[data-link="sessions"]::before {
      background-image: url(res/remotedesktop.svg); }
    nav li[data-link="aiworkspaces"]::before {
      background-image: url(res/folder.svg); }
    nav li[data-link="instructions"]::before {
      background-image: url(res/list.svg); }
    nav li[data-link="watchers"]::before {
      background-image: url(res/eye.svg); }
    nav li[data-link="tunnels"]::before {
      background-image: url(res/link.svg); }
    nav li[data-link="statistics"]::before {
      background-image: url(res/chart.svg); }
    nav li[data-link="settings"]::before {
      background-image: url(res/cog.svg); }
    nav li:has(.label):has(.version) {
      display: flex;
      align-items: center;
      margin-bottom: 1em; }
      nav li:has(.label):has(.version) .label {
        margin-right: auto;
        color: var(--color-accent); }
      nav li:has(.label):has(.version) .version {
        margin-left: auto;
        color: var(--color-10);
        font-size: .9em; }

#main {
  overflow: hidden;
  display: flex;
  flex: 1; }

#page {
  transition: var(--page-transition-duration);
  opacity: 0;
  translate: 0 -1em;
  overflow: auto;
  flex: 1; }
  #page.visible {
    opacity: 1;
    translate: 0 0; }
  #page h1 {
    margin: 1em 1em .5em; }

#page.fadeout {
  translate: 0 1em; }

.hidden {
  display: none !important; }

.loading {
  opacity: 0;
  translate: 1em 0;
  margin-right: 1.25em;
  transition: opacity var(--page-transition-duration), translate var(--page-transition-duration), margin-right var(--page-transition-duration); }
  .loading.loaded {
    opacity: 1;
    translate: 0 0;
    margin-right: unset; }

input, textarea, select, button {
  color: var(--color-14);
  outline: none; }
  input[disabled]:not(.loading), input[disabled].loaded, textarea[disabled]:not(.loading), textarea[disabled].loaded, select[disabled]:not(.loading), select[disabled].loaded, button[disabled]:not(.loading), button[disabled].loaded {
    opacity: .5; }

input, textarea, select {
  background-color: var(--color-3);
  border: none;
  padding: .325em .5em;
  border-radius: var(--border-radius); }
  input:focus, textarea:focus, select:focus {
    background-color: var(--color-4); }
  input.select, textarea.select, select.select {
    cursor: default; }
    input.select:hover, textarea.select:hover, select.select:hover {
      background-color: var(--color-4); }

textarea {
  resize: none;
  min-height: 8em; }

/* dropdown of Feuerwehr.Client.attachSuggestions - the wrapper is inserted around
   the input, so it has to take over the flex sizing the input had in the field */
.suggest {
  flex: 1;
  position: relative; }
  .suggest input {
    width: 100%;
    box-sizing: border-box; }

/* the list is NOT a child of .suggest - it lives next to the dialog/page so that
   it is not clipped by an "overflow: auto" ancestor (.overlay .box). position and
   width therefore come from javascript, viewport relative */
.suggest-list {
  position: fixed;
  z-index: 10;
  box-sizing: border-box;
  max-height: 10.5em;
  overflow-y: auto;
  padding-block: .5em;
  background-color: var(--color-4);
  border-radius: var(--border-radius);
  display: none;
  box-shadow: 0 0.25em 2em -0.5em var(--color-1); }
  .suggest-list.visible {
    display: block; }
  .suggest-list > div {
    padding: .25em .6em;
    border-radius: calc(var(--border-radius) / 2);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .suggest-list > div b {
      font-weight: 600; }
    .suggest-list > div:hover, .suggest-list > div.active {
      background-color: var(--color-6); }

button {
  background-color: var(--color-5);
  border: none;
  padding: .325em .875em;
  filter: brightness(0.9);
  border-radius: var(--border-radius-button); }
  button:not([disabled]):hover {
    filter: brightness(1); }
  button:not([disabled]):active {
    filter: brightness(1.15); }
  button:not([disabled]).active {
    filter: brightness(1);
    background-color: var(--color-14);
    color: var(--color-5); }
  button[style] {
    padding-left: 2.25em;
    background-repeat: no-repeat;
    background-size: 1.25em;
    background-position: .675em center; }
  button.primary {
    background-color: var(--color-primary); }
  button.dangerous {
    background-color: var(--color-dangerous); }

pre, code, .mono {
  font-family: dejavu; }

.mono {
  font-size: .9em; }

pre, code {
  font-size: .95em;
  padding: 0;
  margin: 0; }

code {
  background-color: var(--color-2);
  padding-inline: .25em;
  margin-inline: .25em;
  border-radius: var(--border-radius); }

.overlay,
.overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; }

.overlay-backdrop {
  backdrop-filter: brightness(0.5) contrast(0.9) saturate(1.25);
  opacity: 0;
  transition: var(--page-transition-duration-long); }

body:has(.overlay:not(.no-backdrop)) .overlay-backdrop {
  opacity: 1;
  pointer-events: unset; }

.overlay .box {
  background-color: var(--color-3);
  box-shadow: 0 1em 6em -5em var(--color-0);
  display: flex;
  flex-direction: column;
  scale: 1.1;
  opacity: 0;
  transition: var(--page-transition-duration);
  max-height: calc(100% - 2em);
  max-width: calc(100% - 2em);
  overflow: auto;
  border-radius: var(--border-radius); }
  .overlay .box .content {
    flex: 1;
    padding-block: .5em; }
    .overlay .box .content .item {
      padding: .25em 2em .25em 1em;
      cursor: default;
      white-space: nowrap; }
      .overlay .box .content .item:hover {
        background-color: var(--color-4); }
      .overlay .box .content .item.selected {
        background-color: var(--color-5); }
      .overlay .box .content .item.disabled {
        color: var(--color-8); }
      .overlay .box .content .item.columns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em; }
        .overlay .box .content .item.columns > div {
          overflow: hidden;
          text-overflow: ellipsis; }
      .overlay .box .content .item:has(div + span) {
        display: flex;
        align-items: stretch;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0; }
        .overlay .box .content .item:has(div + span) div {
          flex: 1;
          padding: .25em 2em .25em 0;
          pointer-events: none; }
        .overlay .box .content .item:has(div + span) span {
          display: block;
          padding: .25em .5em; }
          .overlay .box .content .item:has(div + span) span[style] {
            flex: 0 0 1em;
            background-size: 1.25em;
            background-position: center;
            background-repeat: no-repeat; }
        .overlay .box .content .item:has(div + span) span:hover {
          background-color: var(--color-5); }
    .overlay .box .content .item[style] {
      padding-left: 2.125em;
      background-repeat: no-repeat;
      background-size: 1.125em;
      background-position: .5em center; }
    .overlay .box .content .separator {
      border-bottom: 0.125em dashed var(--color-5);
      margin-block: .5em; }

.overlay.no-backdrop .box {
  box-shadow: 0 0.75em 3.25em -2.25em var(--color-0); }

.overlay.visible {
  opacity: 1;
  pointer-events: unset; }
  .overlay.visible .box {
    scale: 1;
    opacity: 1; }

.overlay.busy .box {
  pointer-events: none;
  filter: contrast(0.8) brightness(0.75) saturate(1.5); }

.overlay.dialog {
  display: flex;
  justify-content: center;
  align-items: center; }
  .overlay.dialog .content:has(.title) {
    padding: 1em 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em; }
  .overlay.dialog .title {
    font-size: 1.5em; }
  .overlay.dialog .text {
    padding: .25em 0 .75em;
    text-align: center; }
  .overlay.dialog .buttons {
    display: flex;
    gap: .5em;
    justify-content: center; }

.overlay.context-menu .box {
  position: absolute;
  transform-origin: left top;
  transition: var(--page-transition-duration-short); }

.overlay.context-menu:not(.visible) .box {
  scale: 1 .75; }

.options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2em; }
  .options > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .25em; }
    .options > div label {
      color: var(--color-9); }

input:has(+ button) {
  border-radius: 10em 0 0 10em;
  padding-left: 1em; }

input + button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: .675em; }

.searchbar {
  display: flex;
  padding-inline: var(--page-padding); }
  .searchbar input {
    flex: 1;
    min-width: 1em; }
  .searchbar input:focus {
    background-color: var(--color-3); }

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-1);
  z-index: 1000; }
  .login-screen .login-box {
    display: flex;
    flex-direction: column;
    gap: .75em;
    padding: 2em;
    background: var(--color-2);
    border-radius: .5em;
    width: 24em;
    max-width: 90vw;
    animation: login-appear calc(var(--page-transition-duration-long) * 3) ease-out; }
    .login-screen .login-box > div {
      display: flex; }
    .login-screen .login-box .login-title {
      font-size: 1.5em;
      margin-bottom: .5em;
      margin-inline: auto; }
    .login-screen .login-box input {
      border-radius: var(--border-radius-button);
      padding: .5em 1.25em;
      flex: 1; }
    .login-screen .login-box button {
      margin-inline: auto;
      padding: .5em 1.5em; }
    .login-screen .login-box .login-error {
      color: var(--color-accent);
      margin-inline: auto; }

/* Shown while the server is unreachable (see Feuerwehr_Client.setOffline). Sits above
   everything including the login screen, because a dead server makes every other screen
   pointless - the page reloads by itself once the server answers again. */
.offline-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-0) 85%, transparent);
  backdrop-filter: blur(0.25em);
  z-index: 2000; }
  .offline-screen .offline-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 2.5em 3em;
    background: var(--color-2);
    border-radius: .5em;
    width: 32em;
    max-width: 90vw;
    text-align: center;
    animation: login-appear calc(var(--page-transition-duration-long) * 3) ease-out; }
    .offline-screen .offline-box .offline-title {
      font-size: 1.5em;
      color: var(--color-accent); }
    .offline-screen .offline-box .offline-text {
      color: var(--color-12);
      line-height: 1.5; }
    .offline-screen .offline-box .offline-dots {
      display: flex;
      gap: .4em; }
      .offline-screen .offline-box .offline-dots span {
        width: .5em;
        height: .5em;
        border-radius: 50%;
        background: var(--color-7);
        animation: offline-pulse 1.2s infinite ease-in-out; }
        .offline-screen .offline-box .offline-dots span:nth-child(2) {
          animation-delay: .2s; }
        .offline-screen .offline-box .offline-dots span:nth-child(3) {
          animation-delay: .4s; }

@keyframes offline-pulse {
  0%, 100% {
    opacity: .25; }
  50% {
    opacity: 1; } }

@keyframes login-appear {
  from {
    opacity: 0;
    scale: 1.1;
    filter: blur(0.5em); }
  to {
    opacity: 1;
    scale: 1;
    filter: blur(0); } }

tooltip {
  display: none; }

.custom-tooltip {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  background: var(--color-1);
  color: var(--color-12);
  border-radius: var(--border-radius);
  padding: .5em .75em;
  font-size: .9em;
  line-height: 1.5;
  max-width: 35em;
  box-shadow: 0 1em 6em -5em var(--color-0);
  opacity: 0;
  transition: opacity var(--page-transition-duration-short); }
  .custom-tooltip.visible {
    opacity: 1; }
  .custom-tooltip b, .custom-tooltip strong {
    color: var(--color-15); }
  .custom-tooltip .label {
    color: var(--color-7);
    margin-right: .25em; }
  .custom-tooltip hr {
    border: none;
    border-top: 1px solid var(--color-3);
    margin: .25em 0; }