/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* Style the handle to look clickable */
.drag-handle {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  user-select: none;
  /* Prevents text selection while dragging */
}

/* Change cursor when actually dragging */
.drag-handle:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.sortable-ghost {
  opacity: 0.5;
  background-color: oklch(62.7% 0.194 149.214);
}

.activeFocus {
  background-color: oklch(62.7% 0.194 149.214);
}

.navbar-header-show {
  opacity: 1 !important;
}

html {
  font-family: var();
  font-style: var(--body-font-font-style);
  font-weight: var(--body-font-font-weight);
  line-height: var(--body-font-line-height);
  letter-spacing: var(--body-font-letter-spacing);
  text-transform: var(--body-font-text-transform);
  -webkit-font-smoothing: antialiased;
}

.nutrient-selected {
  --box-shadow-color: transparent;
  box-shadow: 0 0 0 6px var(--box-shadow-color);
}

.nutrient-selected.protein {
  --box-shadow-color: #9d174d;
}

.nutrient-selected.fat {
  --box-shadow-color: oklch(47.3% .137 46.201);
}

.nutrient-selected.carb {
  --box-shadow-color: #155e75;
}

.nutrient-selected.kcal {
  --box-shadow-color: #fff;
}

.nutrient-selected.fiber {
  --box-shadow-color: #4d7c0f;
}

.nutrient-selected.fasting {
  --box-shadow-color: #fff;
}

.nutrient-selected.hypertrophy {
  --box-shadow-color: #be123c;
}

.nutrient-selected.cardio {
  --box-shadow-color: #1d4ed8;
}

.nutrient-selected.vilpa {
  --box-shadow-color: #854d0e;
}

.nutrient-selected.yoga {
  --box-shadow-color: #6d28d9;
}

.nutrient-selected.breath {
  --box-shadow-color: #a21caf;
}

.nutrient-selected.meditation {
  --box-shadow-color: #047857;
}

div#blocks-header>.selected {
  transform: translateY(65px);
}

@font-face {
  font-family: 'greatvibes';
  /* Name you'll use in CSS */
  src: url("/assets/GreatVibes-Regular-f73b0887.ttf");
  font-weight: normal;
  font-style: normal;
}

#error_explanation {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid red;
  background-color: #ffe6e6;
}

#error_explanation ul {
  color: red;
  list-style-type: disc;
  padding-left: 1.5em;
}

#error_explanation h2 {
  margin-top: 0;
  color: red;
}

#error_explanation li {
  margin-top: 0.5em;
}