/*
 * SPDX-FileCopyrightText: 2026 Flickmin
 * SPDX-FileCopyrightText: 2026 Marlena Müller
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

:root {
  color-scheme: light dark;

  --solid: light-dark(black, white);
  --grey-heavy: light-dark(#d5d5d5, #373a5d);
  --grey-light: light-dark(#f0f0f0, #292c47);
  --acc-color: light-dark(#053FFF, #50f1c1);
  --error-color: light-dark(#ff94be, #d01348);
}

body {
  color: var(--solid);
  background-color: light-dark(white, #1c1e30);
  accent-color: var(--acc-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  max-width: min(800px, 90vw);
  margin: auto;
}

a, a:visited {
  color: var(--acc-color);
  text-decoration: none;
}

nav, adminnav{
  border: solid 1px var(--solid);
  border-top: none;
  background: var(--grey-heavy);

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .current {
    background: light-dark(white, #1c1e30);
  }

  a {
    padding: 10px;

    &:hover {
      background: var(--grey-light);
    }
  }

  .right-start {
    margin-left: auto;
  }
}

form {
  max-width: fit-content;
  margin: 1rem auto;
  text-align: center;
  padding: 1rem;
  background: var(--grey-light);
  border: 1px solid var(--solid);

  checkbox-list {
    text-align: left;
    display: flex;
    flex-direction: column;
  }
}

table {
  margin: 1rem auto;
  border-collapse: collapse;
  border: 1px solid var(--solid);

  th, td {
    padding: 1rem;
  }

  th {
    background: var(--grey-heavy);
  }

  tr:nth-child(odd) {
    background: var(--grey-light);
  }
}

error-box {
  display: block;
  max-width: fit-content;
  padding: 1rem;
  margin: 1rem auto;
  text-align: center;

  border: 1px solid var(--solid);
  background-color: var(--error-color);
}

:root, body {
  height: 100%;
}

footer {
  position: sticky;
  top: 100vh;
}

footer {
  border: solid 1px var(--solid);
  border-bottom: none;
  background: var(--grey-heavy);

  max-width: fit-content;
  margin: auto;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  a {
    padding: 10px;

    &:hover {
      background: var(--grey-light);
    }
  }
}

/* Hack for not displaying a table without data */
table:not(:has(td)) {
  * {
    display: none;
  }

  &::before {
    display: block;
    content: "No Data in this Table.";
    padding: 1rem;
  }
}