@charset "utf-8";

:root {
  --system-ui: system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    'Noto Sans' Cantarell, 'Helvetica Neue', sans-serif;

  --green-1: #e1f2da;
  --green-2: #b0e19c;
  --green-3: #8cd070;
  --green-4: #6cb94c;
  --green-5: #52a230;
  --green-6: #3d8d1b;
  --green-7: #2a700c;
  --green-8: #1c5603;
  --green-9: #0f3300;

  --green-light: var(--green-2);
  --green: var(--green-5);
  --green-dark: var(--green-8);

  --blue-1: #becaed;
  --blue-2: #8da1da;
  --blue-3: #6d86d0;
  --blue-4: #435fb5;
  --blue-5: #244093;
  --blue-6: #102a76;
  --blue-7: #091e5e;
  --blue-8: #021140;
  --blue-9: #000a26;

  --blue-light: var(--blue-2);
  --blue: var(--blue-5);
  --blue-dark: var(--blue-8);

  --red-1: #f2cece;
  --red-2: #e69999;
  --red-3: #e07878;
  --red-4: #d14949;
  --red-5: #bb2525;
  --red-6: #971414;
  --red-7: #720c0c;
  --red-8: #4e0606;
  --red-9: #300303;

  --red-light: var(--red-2);
  --red: var(--red-5);
  --red-dark: var(--red-8);

  --yellow-1: #f2e1c2;
  --yellow-2: #f0d29c;
  --yellow-3: #efc57c;
  --yellow-4: #e8b153;
  --yellow-5: #da9a2b;
  --yellow-6: #b27c1e;
  --yellow-7: #875c12;
  --yellow-8: #5a3d0a;
  --yellow-9: #332205;

  --yellow-light: var(--yellow-2);
  --yellow: var(--yellow-5);
  --yellow-dark: var(--yellow-8);

  --brown-1: #e6cbc3;
  --brown-2: #d09e8e;
  --brown-3: #bf8776;
  --brown-4: #a2624e;
  --brown-5: #884936;
  --brown-6: #6b2d1a;
  --brown-7: #571e0d;
  --brown-8: #401204;
  --brown-9: #260900;

  --brown-light: var(--brown-2);
  --brown: var(--brown-5);
  --brown-dark: var(--brown-8);

  --grey-1: #fff;
  --grey-2: #dfdfdf;
  --grey-3: #bfbfbf;
  --grey-4: #9f9f9f;
  --grey-5: #808080;
  --grey-6: #606060;
  --grey-7: #404040;
  --grey-8: #202020;
  --grey-9: #000;

  --grey-light: var(--grey-2);
  --grey: var(--grey-5);
  --grey-dark: var(--grey-8);

  --primary: var(--green-5);
  --secondary: var(--brown-5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ########################################################################## */
/* HTML DEFAULTS */

html {
  font-family: Inter, sans-serif;
  font-size: 62.5%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  font-size: 1.8em;
  display: flex;
  width: 100%;
  align-items: start;
  justify-content: start;
  flex-grow: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.6em;
  margin-top: 0.6em;
}

h1 {
  font-weight: bold;
  font-size: calc((36 / 18) * 1em);
}

h2 {
  font-weight: bold;
  font-size: calc((30 / 18) * 1em);
}

h3 {
  font-weight: bold;
  font-size: calc((24 / 18) * 1em);
}

h4 {
  font-weight: bold;
  font-size: calc((20 / 18) * 1em);
}

h5 {
  font-weight: bold;
  font-size: 1em;
}

p {
  max-width: 40em;
  margin-bottom: 0.5em;
}

article {
  margin-top: 2.8em;
}

button,
button:link,
button:visited,
button:hover,
button:active {
  font-size: inherit;
  font-family: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2em;
  border: 0.15em solid var(--green-4);
  border-radius: 0.5em;
  transition: all 0.2s;
  cursor: pointer;
  color: var(--grey-9);
  background-color: var(--grey-1);
  margin-top: 1.33em;
}

button:hover,
button:active {
  background-color: var(--green-4);
}

form {
  position: relative;
  padding: 1em 1.2em;
  background-color: rgba(225, 242, 218, 0.5);
  border-radius: 1em;
}

form > *:first-child {
  margin-right: 0.6em;
  margin-top: 0;
}

fieldset {
  border: 0;
}

label {
  text-align: right;
}

input {
  padding: 0.2em 0.4em;
}

input[type='radio'] {
  width: 1.37em;
}

strong {
  font-weight: bold;
  color: var(--red);
}

table {
  border-collapse: collapse;
}

/* ########################################################################## */
/* CLASSES */

.hidden {
  font-size: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.highlighted {
  color: var(--green-8);
  font-weight: bold;
}

.highlightedRow {
  color: var(--green-8);
  font-weight: 500;
}

.noLineBreak {
  white-space: nowrap;
}

.controlElement {
  cursor: pointer;
  color: var(--grey-5);
}

.controlElement:hover,
.controlElement:active,
.controlElement:focus {
  color: var(--grey-9);
}

.controlElement::first-letter {
  font-weight: bold;
}

.controlElement--close {
  transform: rotate(45deg);
  display: inline-block;
  position: absolute;
  top: 0.5em;
  right: 0.6em;
}

.icon--inline {
  position: relative;
  height: 1em;
  top: 0.1em;
}

.link {
  cursor: pointer;
}

.link--inline,
.link--inline:link,
.link--inline:visited,
.link--inline:focus,
.link--inline:hover,
.link--inline:active {
  cursor: pointer;
  color: var(--blue);
}

.link--inline:focus {
  outline: var(--blue-light) dotted 0.1em;
}

.link--inline:focus,
.link--inline:hover,
.link--inline:active {
  text-decoration: underline;
}

.button--attention,
.button--attention:link,
.button--attention:visited {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--grey-1);
}

.button--attention:hover,
.button--attention:active {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--grey-1);
}

.button--danger,
.button--danger:link,
.button--danger:visited {
  background-color: var(--grey-1);
  border-color: var(--red);
  color: var(--red);
  border-width: 0.17em;
  font-weight: bold;
}

.button--danger:hover,
.button--danger:active {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--grey-1);
  border-width: 0.17em;
  font-weight: bold;
}

.input--invalid {
  color: var(--red);
}

.mainSection {
  padding: 1.8em 1em 1em 1em;
}

.error {
  font-size: 2em;
  font-weight: bold;
  color: var(--red);
  background-color: #fff;
  width: 100%;
  margin: 0;
  padding: 0.2em 1em 0 1em;
  position: fixed;
  top: calc(env(titlebar-area-height, 33px));
  text-align: center;
}

.modal__error {
  font-weight: bold;
  color: var(--red);
}

.modal__background {
  position: fixed;
  top: calc(env(titlebar-area-height, 33px));
  left: 0;
  width: 100%;
  height: calc(100% - env(titlebar-area-height, 33px));
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  margin-top: 0;
}

.modal__box {
  background-color: rgb(240, 248, 236);
}

.label--left {
  text-align: left;
}

.labelWrapper--block {
  display: block;
  margin-bottom: 0.2em;
}

/* main navigation */

.mainNav__nav {
  position: fixed;
  background-color: var(--primary);
  padding: 0.4em 0.8em;
  display: flex;
  justify-content: space-between;
  font-size: 1.3em;
  width: 100%;
  z-index: 9;
}

.mainNav__ul {
  display: inline-flex;
  gap: 0.5em;
  justify-content: flex-end;
}

.mainNav__li {
  list-style: none;
}

.mainNav__li:hover {
  cursor: pointer;
}

.mainNav__svg {
  width: 1.5em;
  height: 1.5em;
}

.mainNav__svg:hover,
.mainNav__svg:focus-visible,
.mainNav__reload:hover,
.mainNav__reload:focus-visible {
  transform: scale(1.15);
  outline: none;
}

.mainNav__home {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 0.5em;
  cursor: pointer;
  font-family: var(--system-ui);
}

@media (display-mode: window-controls-overlay) {
  body {
    margin-top: env(titlebar-area-height, 28px);
    height: calc(100vh - env(titlebar-area-height, 28px));
  }

  .mainNav__nav {
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 28px);
    app-region: drag;
    background-color: var(--primary);
    background-image: url(./icon.svg);
    background-repeat: no-repeat;
    background-size: 1.85em 2em;
    background-position-x: 0.8em;
    color: var(--grey-8);
  }

  .mainNav__home {
    margin-left: env(titlebar-area-height, 28px);
    app-region: no-drag;
  }

  .mainNav__ul {
    display: flex;
    height: 100%;
    align-items: center;
  }

  .mainNav__svg {
    height: 1.846em;
    app-region: no-drag;
  }

  .mainNav__reload {
    height: 1.23em;
  }
}

/* signup */

.signup__inputs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7em;
  align-items: center;
}

/* settings */

.list--styleNone {
  list-style: none;
}

.settings__farmRoles {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
}

.settings__farmRoles div {
  padding: 0.1em 1em 0.1em 0;
}

.updateUserPermissions__email {
  margin-bottom: 0.7em;
}

@media all and (max-width: 720px) {
  .settings__farmRoles {
    grid-template-columns: repeat(1, auto);
  }

  .settings__farmRoles div:nth-child(3n) {
    margin-bottom: 1em;
  }
}

/* addBedblock */

.addBedblock {
  width: 40em;
}

/* card */

.card {
  background-color: hsl(102, 55%, 80%);
  box-shadow: 0 2rem 3rem 0 hsl(0, 0%, 85%);
  border-radius: 0.8rem;
  padding: 1.6rem;
  list-style: none;
}

.card h2 {
  margin-top: 0;
}