@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/noto_sans/NotoSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito/Nunito-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
  --background-color: 34 64% 98%;
  --primary-color: 34 64% 45%;
  --text-color: 34 64% 20%;
  --border-color: 34 20% 85%;
  --error-color: 0 70% 50%;
  --error-bg: 0 70% 97%;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --link-color: #4183c4;
}

h1, h2, h3, h4, h5 {
    font-family: 'Noto Sans', system-ui, sans-serif;
}

body {
  background-color: hsl(var(--background-color));
  font-family: 'Nunito', system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: hsl(var(--text-color));

  header {
    padding: 1rem 2rem;
    border-bottom: 1px solid hsl(var(--border-color));
    display: flex;
    justify-content: space-between;
    align-items: center;

    h1, h2 {
      margin: 0;

      a {
        color: hsl(var(--text-color));
      }
    }

    div {
      flex: 1;
      text-align: start;

      &:nth-child(2) {
        text-align: center;
      }

      &:last-of-type {
        text-align: end;
      }
    }

    a {
      color: hsl(var(--primary-color));
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s ease;

      &:hover {
        color: hsl(var(--text-color));
      }
    }
  }

  div#content {
    flex: 1;
    display: flex;
    flex-direction: row;

    nav:not(:empty) {
      flex: .2;
      box-shadow: var(--shadow);
    }

    main {
      flex: 1;
    }

    &:has(nav:empty) {
      main {
        flex: 1;
      }
    }
  }


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

  .submit-row {
    margin-top: 2rem;
  }

  .submit-row {
    margin-top: 2rem;
  }

  input[type="submit"] {
    width: 100%;
    background-color: hsl(var(--primary-color));
    color: white;
    border: none;
    padding: 0.875rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  input[type="submit"]:hover {
    background-color: hsl(var(--primary-color) / 0.9);
  }

  footer {
    padding: 1rem 2rem;
    border-top: 1px solid hsl(var(--border-color));
    text-align: center;
    color: hsl(var(--text-color) / 0.7);
    font-size: .8rem;

    a {
        color: hsl(var(--text-color) / 0.7);
        font-weight: normal;

        &:hover {
            text-decoration: underline;
        }
    }
  }
}

body.login_page {
  main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  #login-form {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
    border: 1px solid hsl(var(--border-color));
    position: relative;
  }

  .form-row {
    margin-bottom: 1.5rem;

    &.has-error {
      input[type="text"],
      input[type="password"] {
        border-color: hsl(var(--error-color));
        background-color: hsl(var(--error-bg));

        &:focus {
          border-color: hsl(var(--error-color));
          box-shadow: 0 0 0 3px hsl(var(--error-color) / 0.1);
        }
      }

      label {
        color: hsl(var(--error-color));
      }

      .field-error {
        display: block;
        color: hsl(var(--error-color));
        font-size: 0.875rem;
        margin-top: 0.375rem;
        font-weight: 500;
      }
    }
  }

  .form-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: hsl(var(--text-color));
  }

  .form-row input[type="text"],
  .form-row input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid hsl(var(--border-color));
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
  }

  .form-row input[type="text"]:focus,
  .form-row input[type="password"]:focus {
    outline: none;
    border-color: hsl(var(--primary-color));
    box-shadow: 0 0 0 3px hsl(var(--primary-color) / 0.1);
  }

  .errornote {
    background-color: hsl(var(--error-bg));
    color: hsl(var(--error-color));
    border: 1px solid hsl(var(--error-color) / 0.2);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;

    &::before {
      content: "⚠️";
      margin-right: 0.5rem;
      font-size: 1.1rem;
    }
  }

  .errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;

    li {
      background-color: hsl(var(--error-bg));
      color: hsl(var(--error-color));
      border: 1px solid hsl(var(--error-color) / 0.2);
      border-radius: 6px;
      padding: 0.875rem 1rem;
      margin-bottom: 0.5rem;
      font-weight: 500;
      font-size: 0.875rem;
      display: flex;
      align-items: center;

      &::before {
        content: "❌";
        margin-right: 0.5rem;
        font-size: 0.8rem;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

input[type="submit"] {
  width: 100%;
  background-color: hsl(var(--primary-color));
  color: white;
  border: none;
  padding: 0.875rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

body.taulell.list {
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 750px;
    width: 100%;

    li {
      padding: 1rem;
      border: 1px solid hsl(var(--border-color));
      border-radius: 3px;


      &:hover {
        background-color: white;
      }
    }
  }
}

body.taulell.detail {
  nav {
    details {
      summary {
        padding: .25rem .5rem;
        font-weight: 600;
        font-size: 1.1rem;
        color: hsl(var(--text-color));
        cursor: pointer;
        border: none;
      }

      & > div {
        padding: 1.5rem;

        form {
          max-width: 600px;

          & > div {
            margin-bottom: 1.5rem;

            label {
              display: block;
              margin-bottom: 0.5rem;
              font-weight: 500;
              color: hsl(var(--text-color));
            }

            input[type="text"] {
              width: 100%;
              padding: 0.75rem;
              border: 1px solid hsl(var(--border-color));
              border-radius: 6px;
              font-size: 1rem;
              transition: all 0.2s ease;
              box-sizing: border-box;

              &:focus {
                outline: none;
                border-color: hsl(var(--primary-color));
                box-shadow: 0 0 0 3px hsl(var(--primary-color) / 0.1);
              }
            }

            fieldset {
              border: 1px solid hsl(var(--border-color));
              border-radius: 6px;
              padding: 1rem;
              margin: 0;

              legend {
                font-weight: 500;
                color: hsl(var(--text-color));
                padding: 0 0.5rem;
              }

              .split-datetime-widget {
                margin: 0;

                .date-time-container {
                  display: flex;
                  gap: 1rem;
                  align-items: end;

                  @media (max-width: 768px) {
                    flex-direction: column;
                    gap: 0.75rem;
                  }

                  .date-field,
                  .time-field {
                    flex: 1;

                    label {
                      font-weight: 400;
                      font-size: 0.875rem;
                      color: hsl(var(--text-color) / 0.8);
                    }

                    input[type="date"],
                    input[type="time"] {
                      width: 100%;
                      padding: 0.625rem;
                      border: 1px solid hsl(var(--border-color));
                      border-radius: 4px;
                      font-size: 0.875rem;

                      &:focus {
                        outline: none;
                        border-color: hsl(var(--primary-color));
                        box-shadow: 0 0 0 2px hsl(var(--primary-color) / 0.1);
                      }
                    }
                  }
                }
              }
            }

            input[type="checkbox"] {
              margin-right: 0.5rem;
              transform: scale(1.2);

              &:focus {
                outline: 2px solid hsl(var(--primary-color));
                outline-offset: 2px;
              }
            }
          }

          button[type="submit"] {
            background-color: hsl(var(--primary-color));
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease;

            &:hover {
              background-color: hsl(var(--primary-color) / 0.9);
            }
          }
        }
      }
    }
  }
  main {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  body.login_page {
    main {
      padding: 1rem;
    }

    #login-form {
      padding: 1.5rem;
    }

    .errornote,
    .errorlist li {
      padding: 0.875rem 1rem;
      font-size: 0.85rem;
    }
  }
}