:root {
  --color-closed: #cc3333;
  --color-open: #33cc33;
}

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

body {
  font-family: sans-serif;
  line-height: 1.25;
  background: #333333;
  color: #eeeeee;
}

h1, h2, h3 { margin-top: 0; margin-bottom: 0.5rem; }

a { color: inherit; font-family: inherit; }

input, button, select, textarea {
  background: #000000;
  border: 1px solid #999999;
  color: #eeeeee;
}

body > header, main {
  position: relative;
  padding: 1em;
}

body > header {
  background: #666666;

  nav {
    display: flex;
    justify-content: space-between;
    gap: 1ch;

    span {
      margin-left: auto;
    }
  }

  #push-button {
    visibility: hidden;
  }
}

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

main.tasks {
  .tasks-table {
    display: grid;
    grid-template-columns: repeat(4, auto) 1fr auto auto;
    gap: 0.125rem 0;
    margin: 0 -0.5rem;

    > * {
      display: contents;
    }

    > * > * {
      padding: 0 0.5rem;
    }

    .header {
      font-weight: bold;
      font-size: 0.7rem;
    }
  }

  .task {
    color: unset;
  }

  .task--closed .id { color: var(--color-closed); }
  .task--open .id { color: var(--color-open); }

  .task:hover > * {
    background: #000000;
  }

  .task--closed .title {
    text-decoration: line-through;
  }
  .task--tease .title {
    font-style: italic;
  }
}

main.task-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  table { align-self: start; }
  th { text-align: left; }

  header {
    background: #666666;
    padding: 0.5rem 1.5rem;
  }

  h2 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;

    span, input[type=text] {
      flex: 1;
    }

    > div, > form {
      display: inherit;
      align-items: inherit;
      gap: inherit;
      flex: 1;
    }

    form { display: none; }
    &.edit {
      > form { display: inherit; }
      > div { display: none; }
    }
  }

  .info-table {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 0.125rem 1rem;

    > * {
      display: contents;
    }

    label {
      font-weight: bold;
    }

    .status--closed span { color: var(--color-closed); }
    .status--open span { color: var(--color-open); }
  }

  .updates {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .update {
    border-left: 0.25rem solid #666666;

    header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;

      font-size: 0.9rem;

      .author { font-weight: bold; }
      .action { font-weight: thin; }
      .time { margin-left: auto; }

      padding: 0.125rem 0.5rem;
      background: #666666;
    }

    p {
      margin: 0;
      padding: 0.25rem 0.5rem 0;
      white-space: pre-wrap;
    }

    .attachment {
      padding: 0.5rem;
      max-width: 80vw;
      max-height: 80vh;
      color: #999999;

      a {
        color: #eeeeee;
      }
    }
  }

  > form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    textarea {
      width: 100%;
      resize: vertical;
    }
  }
}

main.login,
main.recover {
  .error {
    border-left: 0.25rem solid var(--color-closed);
    padding: 0.125rem 0.5rem;
  }

  form.flex {
    display: flex;
    flex-direction: inherit;
    gap: inherit;
  }

  .form-table {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    align-self: flex-start;

    > * {
      display: contents;
    }

    span {
      font-weight: bold;
    }

    input[type=submit] {
      width: min-content;
      margin-left: auto;
    }
  }
}