/* =========================================================
   NUTRITION VIEW
   ========================================================= */

.nutrition-view {
  padding: 16px 14px 115px;
}


/* =========================================================
   HEADER
   ========================================================= */

.nutrition-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.nutrition-kicker {
  color: var(--orange);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .8px;
  text-transform: uppercase;
}

.nutrition-heading h2,
.nutrition-date-select {
  margin: 4px 0 3px;

  font-size: 27px;
  line-height: 1.1;

  letter-spacing: -.7px;
}

.nutrition-date-select {
  display: block;
  margin-top: 4px;
  max-width: 190px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.nutrition-heading p {
  margin: 0;

  color: var(--muted);

  font-size: 11px;
}


/* =========================================================
   PROFILS
   ========================================================= */

.nutrition-profile-switch {
  display: flex;

  padding: 3px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.06);
}

.nutrition-profile-button {
  border: 0;

  padding:
    7px
    10px;

  border-radius: 999px;

  background: transparent;

  color: var(--muted);

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}

.nutrition-profile-button.active {
  color: var(--text);

  background:
    rgba(255,122,50,.18);
}


/* =========================================================
   BUDGET
   ========================================================= */

.nutrition-budget-card {
  padding: 16px;
  margin-bottom: 22px;
}

.nutrition-budget-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}

.nutrition-card-label {
  display: block;

  color: var(--muted);

  font-size: 11px;
}

.nutrition-budget-value {
  display: flex;

  align-items: baseline;
  gap: 5px;

  margin-top: 6px;
}

.nutrition-budget-value strong {
  font-size: 35px;
  letter-spacing: -1px;
}

.nutrition-budget-value span {
  color: var(--muted);
  font-size: 13px;
}

.nutrition-budget-ring {
  width: 78px;
  height: 78px;

  flex: 0 0 78px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background:
    conic-gradient(
      var(--orange) 0deg 0deg,
      rgba(255,255,255,.07) 0deg 360deg
    );

  position: relative;
}

.nutrition-budget-ring::before {
  content: "";

  position: absolute;

  inset: 7px;

  border-radius: 50%;

  background: #10202c;
}

.nutrition-budget-ring-inner {
  position: relative;

  z-index: 1;

  text-align: center;
}

.nutrition-budget-ring-inner strong {
  display: block;
  font-size: 17px;
}

.nutrition-budget-ring-inner span {
  display: block;

  margin-top: 1px;

  color: var(--muted);

  font-size: 8px;
}

.nutrition-budget-bar {
  height: 6px;

  margin-top: 16px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.055);
}

.nutrition-budget-progress {
  height: 100%;
  width: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #ff933f,
      var(--orange)
    );

  transition:
    width .3s ease;
}

.nutrition-budget-details {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin-top: 14px;
}

.nutrition-budget-details div {
  padding: 8px;

  border-radius: 10px;

  background:
    rgba(255,255,255,.025);
}

.nutrition-budget-details span {
  display: block;

  color: var(--muted);

  font-size: 9px;
}

.nutrition-budget-details strong {
  display: block;

  margin-top: 3px;

  font-size: 14px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.nutrition-section {
  margin-top: 22px;
}

.nutrition-section-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;
}

.nutrition-section-title {
  font-size: 15px;
  font-weight: 750;
}

.nutrition-section-subtitle {
  margin-top: 3px;

  color: var(--muted);

  font-size: 10px;
}

.nutrition-add-button {
  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 50%;

  display: grid;
  place-items: center;

  background:
    rgba(255,122,50,.16);

  color: var(--orange);

  font-size: 23px;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   MACROS
   ========================================================= */

.nutrition-macro-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 7px;
}

.nutrition-macro-card {
  min-width: 0;

  padding: 11px 8px;

  border-radius: 12px;

  text-align: center;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid var(--border);
}

.nutrition-macro-card span {
  display: block;

  overflow: hidden;

  color: var(--muted);

  font-size: 8px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.nutrition-macro-card strong {
  display: block;

  margin-top: 5px;

  font-size: 17px;
}

.nutrition-macro-card small {
  color: var(--muted);
  font-size: 8px;
}


/* =========================================================
   REPAS
   ========================================================= */

.nutrition-meals-list {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.nutrition-meal-card {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 12px;

  border: 0;
  border-radius: 14px;

  color: var(--text);

  text-align: left;

  background:
    linear-gradient(
      145deg,
      rgba(20,35,49,.96),
      rgba(13,27,39,.96)
    );

  border:
    1px solid var(--border);

  cursor: pointer;
}

.nutrition-clickable-card {
  transition:
    transform .12s ease,
    background .12s ease;
}

.nutrition-clickable-card:active {
  transform:
    scale(.985);
}

.nutrition-meal-icon {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background:
    rgba(255,122,50,.12);

  font-size: 18px;
}

.nutrition-meal-content {
  min-width: 0;

  flex: 1;
}

.nutrition-meal-content strong {
  display: block;

  overflow: hidden;

  font-size: 13px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.nutrition-meal-content span {
  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 9px;
}

.nutrition-meal-calories {
  text-align: right;
}

.nutrition-meal-calories strong {
  display: block;

  font-size: 14px;
}

.nutrition-meal-calories span {
  color: var(--muted);

  font-size: 8px;
}

.nutrition-row-arrow {
  margin-left: 4px;

  color:
    rgba(255,255,255,.35);

  font-size: 21px;
  line-height: 1;
}

.nutrition-empty {
  padding: 18px;

  border:
    1px dashed rgba(255,255,255,.08);

  border-radius: 13px;

  color: var(--muted);

  text-align: center;

  font-size: 11px;
}


/* =========================================================
   HYDRATATION
   ========================================================= */

.nutrition-hydration-card {
  padding: 14px;
}

.nutrition-water-main {
  display: flex;

  align-items: center;

  gap: 12px;
}

.nutrition-water-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background:
    rgba(36,152,255,.14);

  font-size: 20px;
}

.nutrition-water-main span {
  display: block;

  color: var(--muted);

  font-size: 9px;
}

.nutrition-water-main strong {
  display: block;

  margin-top: 3px;

  font-size: 18px;
}

.nutrition-drink-breakdown {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 12px;
}

.nutrition-drink-chip {
  padding:
    5px
    8px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.04);

  color: var(--muted);

  font-size: 9px;
}

.nutrition-drinks-list {
  display: flex;

  flex-direction: column;

  gap: 5px;

  margin-top: 8px;
}

.nutrition-drink-row {
  width: 100%;

  border: 0;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 10px;

  padding:
    9px
    5px;

  border-radius: 10px;

  background: transparent;

  color: var(--muted);

  text-align: left;

  font-size: 10px;

  cursor: pointer;
}

.nutrition-drink-row:active {
  background:
    rgba(255,255,255,.035);
}

.nutrition-drink-row-value {
  display: flex;

  align-items: center;

  gap: 3px;

  white-space: nowrap;
}


/* =========================================================
   MENUS
   ========================================================= */

.nutrition-menu-card {
  width: 100%;

  min-height: 68px;

  padding: 12px;

  display: grid;

  grid-template-columns:
    42px
    1fr
    20px;

  align-items: center;

  gap: 11px;

  color: var(--text);

  text-align: left;

  cursor: pointer;
}

.nutrition-menu-icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background:
    rgba(150,101,232,.13);

  color: var(--purple);

  font-size: 20px;
}

.nutrition-menu-copy {
  min-width: 0;
}

.nutrition-menu-copy strong {
  display: block;

  font-size: 13px;
}

.nutrition-menu-copy span {
  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 9px;
}

.nutrition-menu-arrow {
  color: var(--muted);

  font-size: 22px;
}


/* =========================================================
   LISTE DES MENUS SAUVES
   ========================================================= */

.nutrition-menus-list {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.nutrition-saved-menu {
  display: grid;

  grid-template-columns:
    40px
    1fr;

  gap: 11px;

  align-items: center;

  padding: 12px;

  border-radius: 13px;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(255,255,255,.055);
}

.nutrition-saved-menu-icon {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  background:
    rgba(150,101,232,.12);

  color: var(--purple);

  font-size: 18px;
}

.nutrition-saved-menu-copy {
  min-width: 0;
}

.nutrition-saved-menu-copy strong {
  display: block;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 13px;
}

.nutrition-saved-menu-copy span {
  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 9px;
}

.nutrition-saved-menu-copy small {
  display: block;

  margin-top: 5px;

  color:
    rgba(255,255,255,.48);

  font-size: 9px;

  line-height: 1.35;
}


/* =========================================================
   MODALES
   ========================================================= */

html.nutrition-modal-open,
body.nutrition-modal-open {
  overflow: hidden !important;
}

.nutrition-modal {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  padding:
    max(10px, env(safe-area-inset-top))
    10px
    max(10px, env(safe-area-inset-bottom));

  overflow: hidden;
}

.nutrition-modal[hidden] {
  display: none !important;
}

.nutrition-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}

.nutrition-modal-sheet {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 500px;

  max-height:
    calc(
      100dvh
      - env(safe-area-inset-top)
      - env(safe-area-inset-bottom)
      - 24px
    );

  overflow-y: auto;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

  padding:
    18px
    16px
    calc(
      20px
      + env(safe-area-inset-bottom)
    );

  border-radius: 22px;

  background:
    #0e1c28;

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 20px 70px
    rgba(0,0,0,.55);
}

.nutrition-modal-sheet-small {
  max-height:
    min(
      620px,
      calc(
        100dvh
        - env(safe-area-inset-top)
        - env(safe-area-inset-bottom)
        - 24px
      )
    );
}

.nutrition-modal-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: 17px;
}

.nutrition-modal-header strong {
  display: block;

  font-size: 17px;
}

.nutrition-modal-header span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 10px;
}

.nutrition-modal-close {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,.05);

  color: var(--text);

  font-size: 22px;

  cursor: pointer;
}


/* =========================================================
   FORMULAIRES
   ========================================================= */

.nutrition-field {
  display: block;

  margin-bottom: 12px;
}

.nutrition-field[hidden] {
  display: none !important;
}

.nutrition-field > span {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 10px;
}

.nutrition-field input,
.nutrition-field select,
.nutrition-field textarea {
  width: 100%;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 11px;

  outline: none;

  background:
    rgba(255,255,255,.035);

  color: var(--text);

  padding:
    10px
    11px;

  font: inherit;

  font-size: 16px;
}

.nutrition-field input:focus,
.nutrition-field select:focus,
.nutrition-field textarea:focus {
  border-color:
    rgba(255,122,50,.55);

  box-shadow:
    0 0 0 3px
    rgba(255,122,50,.08);
}

.nutrition-field textarea {
  resize: vertical;
}

.nutrition-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 9px;
}

.nutrition-items-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin:
    17px
    0
    9px;
}

.nutrition-items-title strong {
  font-size: 13px;
}

.nutrition-items-title button {
  border: 0;

  background: transparent;

  color: var(--orange);

  font-size: 11px;

  cursor: pointer;
}

.nutrition-structured-entry { margin: 0 0 14px; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.025); }
.nutrition-structured-entry summary { color: var(--orange); font-size: 11px; cursor: pointer; }
.nutrition-structured-entry p { color: var(--muted); font-size: 9px; line-height: 1.4; }
.nutrition-structured-entry textarea { width: 100%; min-height: 110px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(0,0,0,.18); color: var(--text); font: 12px ui-monospace, monospace; }
.nutrition-structured-entry button { margin-top: 8px; padding: 8px 10px; border: 0; border-radius: 9px; background: rgba(255,122,50,.16); color: var(--orange); }
.nutrition-favorite-toggle { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; color: var(--muted); font-size: 11px; }


/* =========================================================
   LIGNES ALIMENTS
   ========================================================= */

.nutrition-food-row {
  margin-bottom: 9px;

  padding: 10px;

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid rgba(255,255,255,.055);
}

.nutrition-food-row[open] {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,122,50,.2);
}

.nutrition-food-row-top {
  display: grid;

  grid-template-columns:
    1fr
    38px;

  gap: 7px;
}

.nutrition-food-row-top {
  list-style: none;
  cursor: pointer;
  align-items: center;
}

.nutrition-food-row-top::-webkit-details-marker {
  display: none;
}

.nutrition-food-row-top > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.nutrition-food-summary-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.nutrition-food-summary-kcal,
.nutrition-food-field > span {
  color: var(--muted);
  font-size: 10px;
}

.nutrition-food-drawer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.nutrition-food-remove {
  width: 38px;
  height: 38px;

  border: 0;

  border-radius: 9px;

  background:
    rgba(239,71,111,.12);

  color: var(--red);

  font-size: 19px;

  cursor: pointer;
}

.nutrition-food-row-values {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 7px;

  margin-top: 7px;
}

.nutrition-food-row input {
  width: 100%;

  min-width: 0;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);

  color: var(--text);

  padding:
    9px;

  font-size: 16px;
}

.nutrition-food-field {
  display: grid;
  gap: 5px;
}

.nutrition-food-field-wide {
  margin-bottom: 8px;
}

.nutrition-food-field > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nutrition-food-field > div small {
  min-width: 28px;
  color: var(--muted);
  font-size: 10px;
}

.nutrition-calendar-section {
  margin-top: 24px;
}

.nutrition-calendar-nav {
  display: flex;
  gap: 6px;
}

.nutrition-calendar-nav button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 20px;
}

.nutrition-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 12px;
}

.nutrition-calendar-weekday {
  color: var(--muted);
  text-align: center;
  font-size: 9px;
}

.nutrition-calendar-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 11px;
}

.nutrition-calendar-day.green { background: rgba(51,209,122,.2); color: #7ef0ad; }
.nutrition-calendar-day.yellow { background: rgba(255,193,7,.2); color: #ffd95b; }
.nutrition-calendar-day.red { background: rgba(239,71,111,.2); color: #ff87a4; }
.nutrition-calendar-day.selected { outline: 2px solid var(--orange); }

.nutrition-calendar-legend {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 9px;
}

.nutrition-calendar-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nutrition-calendar-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.nutrition-calendar-legend i.green { background: #33d17a; }
.nutrition-calendar-legend i.yellow { background: #ffc107; }
.nutrition-calendar-legend i.red { background: #ef476f; }


/* =========================================================
   BOUTON PRINCIPAL
   ========================================================= */

.nutrition-submit-button {
  width: 100%;

  border: 0;

  border-radius: 12px;

  background:
    var(--orange);

  color: white;

  padding:
    13px;

  font-weight: 750;

  cursor: pointer;
}

.nutrition-submit-button:active {
  transform:
    scale(.99);
}


/* =========================================================
   ACTION SHEETS
   ========================================================= */

.nutrition-action-sheet {
  max-width: 480px;
}

.nutrition-action-header {
  margin-bottom: 14px;

  padding:
    4px
    2px
    10px;
}

.nutrition-action-header strong {
  display: block;

  font-size: 17px;
}

.nutrition-action-header span {
  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 10px;
}

.nutrition-action-button {
  width: 100%;

  min-height: 46px;

  margin-top: 8px;

  border: 0;

  border-radius: 12px;

  background:
    rgba(255,255,255,.055);

  color: var(--text);

  font-weight: 650;

  cursor: pointer;
}

.nutrition-action-delete {
  background:
    rgba(239,71,111,.12);

  color: var(--red);
}


/* =========================================================
   IPHONE / PETITS ECRANS
   ========================================================= */

@media (max-width: 600px) {

  .nutrition-modal {
    padding:
      max(6px, env(safe-area-inset-top))
      6px
      max(6px, env(safe-area-inset-bottom));
  }

  .nutrition-modal-sheet {
    max-height:
      calc(
        100dvh
        - env(safe-area-inset-top)
        - env(safe-area-inset-bottom)
        - 12px
      );

    border-radius:
      20px
      20px
      14px
      14px;
  }

}


/* =========================================================
   TRES PETITS ECRANS
   ========================================================= */

@media (max-width: 380px) {

  .nutrition-heading {
    flex-direction: column;
  }

  .nutrition-macro-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .nutrition-form-grid {
    grid-template-columns: 1fr;
  }

  .nutrition-food-row-values {
    grid-template-columns: 1fr;
  }

}

/* Compact nutrition header and calendar */
.nutrition-view{
  padding-top:12px;
}
.nutrition-heading{
  margin-bottom:12px;
}
.nutrition-heading h2,
.nutrition-date-select{
  font-size:23px;
  line-height:1.05;
}
.nutrition-heading p{
  font-size:10px;
}
.nutrition-budget-card{
  margin-bottom:16px;
}
.nutrition-calendar-section{
  margin-top:16px;
}
.nutrition-calendar-section .nutrition-section-header{
  margin-bottom:6px;
}
.nutrition-calendar-nav button{
  width:30px;
  height:30px;
  border-radius:9px;
}
.nutrition-calendar{
  gap:5px;
  padding:9px;
}
.nutrition-calendar-weekday{
  font-size:8px;
}
.nutrition-calendar-day{
  aspect-ratio:auto;
  min-height:38px;
  height:38px;
  border-radius:10px;
  font-size:10px;
}
.nutrition-calendar-legend{
  margin-top:5px;
  font-size:8px;
  gap:9px;
}
@media(max-width:380px){
  .nutrition-heading{
    flex-direction:row;
  }
  .nutrition-heading h2,
  .nutrition-date-select{
    font-size:22px;
  }
  .nutrition-calendar-day{
    height:34px;
    min-height:34px;
  }
}


/* Header nutrition: the tab already gives the context */
.nutrition-heading{
  margin-bottom:8px;
}