/* TODO resolve colors from identity */
:root {
  --primary-color: #4f6f52;
  --background-color: #f2efe9;
  --frond-background-color: #f8f5f0;
  --text-color: #2f3e2e;
  --border-color: #dee2e6;
  --hover-bg-color: #e0e0e0;
  --dirt-red: #7a4a3a;
}

/* Prevent scrollbars on the page */
body {
  font-family: 'Karla', 'Roboto', Tahoma, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text-color);
}

.top-bar, .show-frond {
  box-shadow: 0 2px 10px 5px rgba(0, 0, 0, 0.16);
}

.top-bar .lead {
  font-weight: 500;
  font-size: 1.8rem;
  font-family: 'EB Garamond', serif;
}

.top-bar #frond-display-title {
  font-size: 2.2rem;
  letter-spacing: 0.18rem;
}

.top-bar #frond-display-title.pull-up {
  margin-top: -0.7rem;
}

#frond-container {
  height: 100vh;
  width: 100vw;
  /* height: 80vh;
  width: 100vw;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;   */
}

.frond-row, .modal-content, .top-bar, .show-frond {
  background-color: var(--background-color);
}

.frond-item {
  position: relative; /* needed for overlay */
  background-color: var(--frond-background-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.frond-item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 1; /* Ensure overlay is above the item */
}

.frond-item, .frond-item-overlay {
  width: 145px ; /** must match the JS constant SIZE */
  min-width: 145px;
  height: 145px;
  min-height: 145px;
  margin: 0.15rem;
  padding: 0.2rem;
  cursor: pointer;
}

.frond-item.frond-active, .show-frond {
  border: 2px solid var(--primary-color);
}

.color-red {
  background-color: #f8bcbc;
}

.color-green {
  background-color: #b8e6b8;
}

.color-blue {
  background-color: #b8c6f8;
}

.color-yellow {
  background-color: #f8eeb8;
}

.color-orange {
  background-color: #ffd1a6;
}

.color-purple {
  background-color: #d1a6ff;
}

.color-teal {
  background-color: #a6fff0;
}

.frond-item.color-pink {
  background-color: #ffb8e1;
}

.frond-item.frond-done h5::after{
  font-family: 'Material Symbols Outlined';
  content: "verified";
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-size: 1.2rem;
  padding-left: 0.2rem;
  vertical-align: middle;
}

.material-symbols-outlined.icon {
  vertical-align: middle;
  cursor: pointer;
}

.material-symbols-outlined.icon.disabled {
  cursor: not-allowed;
  pointer-events: none; /* disable interaction */
  opacity: 0.5; /* visually indicate disabled state */
}

.show-frond {
  display: none;
  z-index: 10;
  width: 445px; /** must match the JS constant 3*SIZE + padding + margin +/- magic */
  background-color: var(--frond-background-color);
  color: var(--text-color);
}

.show-frond.display {
  display: block;
  z-index: 10;
  position: absolute;
}

.show-frond.display, .frond-item, .frond-item-overlay  {
  border-radius: 5px;
}

.show-frond .frond-title {
  border-bottom: var(--border-color) 1px solid;
}

.show-frond .form-check input[type="text"] {
  padding: 0; /*override some Bootstrap styles*/
}