/* favicon
https://www.svgrepo.com/svg/10030/class-notes
*/

* {box-sizing: border-box;}
html,body {overflow-x: hidden; max-width: 100%;}

body {
  --border-color: #cacaca;
  --border-radius: 5px;
  background-color: #f4f4f9; font-family: Arial, sans-serif; margin: 0;
}
/* Really focus on the note. */
body:has(.note-item:focus) {background-color: #fff;}
button {cursor: pointer;}
h1 {color: #333;}
input, select, textarea {font-size: 1em;}

ul {list-style-type: disc;}
li > p:has(+ ul) {margin-bottom: 0;}

.container {max-width: 1600px; margin: 0 auto; padding: 0 20px;}

.layout-columns, #notes-list {--gap: 20px; display: flex; flex-wrap: wrap; gap: var(--gap);}
.layout-column, .note-item {
  --column-count: 1; --gap-count: calc(var(--column-count) - 1);
  --column-width: calc(100% / var(--column-count) - var(--gap) * var(--gap-count) / var(--column-count));
  flex-shrink: 0;
  width: var(--column-width);
}



#search {
  border: 1px solid var(--border-color); border-radius: 5px; margin: 1rem 0; padding: 10px; width: 100%;
}

#note-input {
  border: 1px solid var(--border-color); border-radius: 5px; margin: 1rem 0; padding: 10px;
  min-height: 30vh; width: 100%; height: 400px;
}

/*#add-note*/
.button {
  background-color: #28a745; border: 1px solid #28a745; border-radius: 5px;
  color: white; cursor: pointer; padding: 10px 20px;
}

.button--ghost {background-color: transparent; color: #28a745;}
.button:hover {background-color: transparent; color: #28a745;}
.button--ghost:hover {background-color: #28a745; color: #fff;}

#notes-list {list-style-type: none; margin: 0 0 10rem; padding: 0;}

.note-actions {display: flex; gap: 1rem; margin-top: 1rem; text-align: center;}
.note-content {overflow: hidden; width: 100%;}
.note-dates small {white-space: nowrap;}

.note-item {
  --note-padding: 1rem;
  background-color: #fff; border: 1px solid var(--border-color); border-radius: 5px;
  display: flex; flex-direction: column; padding: var(--note-padding);
  transition: .3s; max-width: 100%; max-height: 290px;
}
.note-item.editing, .note-item:focus, .note-item:has(:focus) {--border-color: transparent; max-height: 10000px;}
.note-item a {color: #777; transition: .3s;}
.note-item a:hover {color: #fff; text-shadow: 0 0 10px #fff;}
.note-item button {background-color: #dc3545; border: none; border-radius: 5px; color: white; padding: 5px 10px;}
.note-item button:hover {background-color: #c82333;}
.note-item h1 {color: inherit;}
/*.note-item input[type="checkbox"], .note-item input[type="radio"],
.note-item input[type="checkbox"]:disabled, .note-item input[type="radio"]:disabled {border-color: #000; color: #000;}*/
.note-item span {margin-right: auto;}
.note-item li:has(input[type="checkbox"]), .note-item li:has(input[type="radio"]) {list-style: none; margin-inline-start: calc(-1 * var(--padding));}
.note-item li:has(input[type="checkbox"]:checked), .note-item li:has(input[type="radio"]:checked) {text-decoration: line-through;}
.note-item ol, .note-item ul {--padding: 20px; padding-inline-start: var(--padding);}

.note-meta {
  /*background-color: #ddd; color: #000; padding: var(--note-padding);*/
  /* Putting at the top to avoid touching mistakes. */
  /*position: fixed; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: .3s;*/
  /* previously at the top, but it interferes with screenshots when notes take a lot of height. */
  /**/
  display: none;
  margin-top: 3rem;
}

/* If there are hidden elements that appear on focus or hover, they should appear over other element (other notes). */
.note-item:not(.editing):focus,
.note-item:not(.editing):has(.note-actions button:focus),
.note-item:not(.editing):has(.note-actions button:hover) {z-index: 1;}

.note-item:not(.editing):has(:focus) .note-meta, /* This selector keeps the div visible if any child of the note is in focus. Primarily, it allows for buttons to be clicked. */
.note-item:not(.editing):has(.note-actions button:focus) .note-meta,
.note-item:not(.editing):has(.note-actions button:hover) .note-meta, /* This selector keeps the div visible if button is focused. */
.note-item:not(.editing):focus .note-meta {
  /*opacity: 1; transform: translateY(0%);*/
  display: block;
}

.save-status {margin-left: 10px; font-size: 0.8em; transition: opacity 0.3s;}
.save-status:not(:empty) {margin-bottom: 1em;}
.save-status.saving {color: orange;}
.save-status.unsaved {color: #ff9900; font-style: italic;}
.save-status.saved {color: green;}
.save-status.failed {color: red;}

.note-item.editing {border-left: 3px solid blue; background-color: #f0f8ff;}



@media (min-width: 768px) {
  /*.note-actions {margin: 0;}*/
  .note-dates small {margin-right: 2rem;}
  .note-item {--column-count: 2; padding: 2rem;}
  /*.note-meta {display: flex; align-items: center; justify-content: space-between;}*/
}
@media (min-width: 1200px) {
  .note-item {--column-count: 3;}
}



@media (prefers-color-scheme: dark) {
  body {--border-color: #333; background-color: #000; color: #e0e0e0;}
  body:has(.note-item:focus) {background-color: #000;}
  .note-item {background-color: #000; color: #e0e0e0;}
  #note-input, #search {background-color: #000; color: #e0e0e0;}
  .note-meta {background-color: transparent; color: #777;}
  .note-item.editing {background-color: #1e3a5f; border-left-color: #4d90fe;}
}