/* elements classes  */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background-color: #212529;
  color: whitesmoke;
}

input {
  color: whitesmoke;
  border: none;
  background-color: #212529;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0;
  font-size: 1rem;
}

form {
  margin: 0;
}

button {
  color: whitesmoke;
  font-size: 1rem;
}

li,
ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* general classes */

.display-toggle {
  display: none;
}

.display-toggle:checked~.display-on-unchecked {
  display: none;
}

.display-toggle:not(:checked)~.display-on-checked {
  display: none;
}

.width-5 {
  width: 5rem;
  height: 2.5rem;
  box-sizing: border-box;
}

/* button classes */

.button-neutral,
.button-green,
.button-red {
  border-radius: 0.5rem;
  padding: 0.5rem;
  border: none;
  user-select: none;
  display: flex;
  align-items: center;
  /* Vertical centering */
  justify-content: center;
  /* Horizontal centering */
}

.button-neutral {
  background-color: rgb(150, 150, 150);
}

.button-neutral:hover {
  background-color: rgb(100, 100, 100);
}

.button-neutral:active {
  background-color: rgb(80, 80, 80);
}

.button-neutral:disabled {
  background-color: rgb(200, 200, 200);
}

.button-red {
  background-color: rgb(255, 40, 40);
}

.button-red:hover {
  background-color: rgb(200, 35, 35);
}

.button-red:active {
  background-color: rgb(150, 30, 30);
}

.button-red:disabled {
  background-color: rgb(255, 100, 100);
}

.button-green {
  background-color: rgb(40, 200, 40);
}

.button-green:hover {
  background-color: rgb(35, 150, 35);
}

.button-green:active {
  background-color: rgb(30, 125, 30);
}

.button-green:disabled {
  background-color: rgb(150, 230, 150);
}

/* index classes */

.item-list {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  gap: 0.5rem;
  padding: 1rem;
}

body {
  display: flex;
  flex-direction: column;
  height: 100svh; /* fills viewport; svh fixes mobile URL-bar issues */
  margin: 0;
}

main {
  display: flex;
  flex: 1;       /* take remaining space between h1 and footer */
  min-height: 0;        /* 🔑 allows the child to shrink so it can scroll */
  overflow-y: scroll;     /* scroll only the main content when it overflows */
}

.item-add {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
  gap: 0.5rem;
}

.item-add-name-input {
  flex: 1;
  border-color: cadetblue;
  border-width: 0.1rem;
  border-style: solid;
}

/* item classes */
.item-row {
  background-color: rgb(59, 116, 180);
  border-radius: 1rem;
  padding: 1rem;
}

.item-view,
.item-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.item-edit-name {
  flex: 1;
  width: 100%;
}

.item-actions {
  flex: 0;
  display: flex;
  gap: 0.5rem;
}