html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  font-family: sans-serif;
  background-color: #000;
  color: #fff;
  font-size: clamp(14px, 3.2vw, 22px);
}

table {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #000;
  border-collapse: collapse;
}

.toolbar {
  vertical-align: middle;
}

.inventory-list {
  margin: 0 auto;
  padding: 20px;
}

.field {
  border: 1px solid #fff;
}

.field-name {
  font-weight: bold;
  background-color: #222;
}

.field-action-top {
  border-bottom: 0;
}

.field-action-bottom {
  border-top: 0;
}

.spacer {
  padding: 10px;
  border: 0;
}

button {
  margin: 8px;
  padding: 8px 12px;
  font-size: inherit;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  cursor: pointer;
}

#categorydrop,
.categorydropdown,
select {
  width: 100%;
  padding: 10px 30px 10px 10px;
  background-color: #e7e7e7;
  font-size: inherit;
  border: 1px solid #ccc;
  appearance: none;
  background-image: url('../img/dropdown-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 0.7em top 50%;
  background-size: 0.65em auto;
}

#downloadcsvbutton {
  font-size: inherit;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  cursor: pointer;
}

.icons {
  font-size: clamp(28px, 5vw, 48px);
  cursor: pointer;
}

.iconrow {
  font-size: clamp(22px, 3.5vw, 36px);
  cursor: pointer;
}

.editbutton,
.deletebutton {
  font-size: clamp(16px, 2vw, 24px);
  cursor: pointer;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: min(100%, 360px);
  background: #111;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 24px;
  display: grid;
  gap: 12px;
}

.auth-card input {
  padding: 12px;
  font-size: 18px;
}

.auth-error {
  color: #ff6b6b;
}

@media (max-width: 1099px) {
  html, body {
    font-size: clamp(12px, 2.2vw, 18px);
  }

  .field {
    padding: 16px;
  }

  .icons {
    font-size: clamp(36px, 9vw, 56px);
  }

  .iconrow {
    font-size: clamp(28px, 7vw, 44px);
  }

  .deletebutton {
    font-size: clamp(24px, 5.5vw, 36px);
  }
}