/* ============ NUTRITION SETTINGS (new demo-style) ============ */
.nut-dish-list {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2)
}

.nut-dish-card {
  display:grid;
  grid-template-columns:4.17vw 1fr;
  gap:var(--w2-s3);
  align-items:start;
  padding:var(--w2-s3) var(--w2-s4);
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--w2-s3);
  transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s, transform .18s, opacity .18s;
}

.nut-dish-card:hover {
  border-color:rgba(255,255,255,.1)
}

.nut-dish-card.is-pinned {
  border-color:rgba(255,215,64,.35);
  background:rgba(255,215,64,.03)
}

.nut-dish-card.is-off {
  opacity:.45
}

.nut-dish-card.is-off:hover {
  opacity:.65
}

.nut-dish-card .ndish-img {
  width:4.17vw;
  height:4.17vw;
  border-radius:var(--w2-s2);
  object-fit:cover;
  border:1px solid rgba(255,255,255,.06);
  background:#1E2023;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
}

.nut-dish-card .ndish-img img {
  width:100%;
  height:100%;
  object-fit:cover
}

.nut-dish-card .ndish-img-empty {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.35);
  background:#1E2023;
}

.nut-dish-card .ndish-body {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2);
  min-width:0
}

.nut-dish-card .ndish-top {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  flex-wrap:wrap
}

.nut-dish-card .ndish-name {
  font:600 14px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:#fff;
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  padding:var(--w2-s1) 0;
  min-width:6.25vw;
  flex:1;
  transition:border-color .14s;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.nut-dish-card .ndish-name:hover {
  border-bottom-color:rgba(255,255,255,.1)
}

.nut-dish-card .ndish-name:focus {
  outline:0;
  border-bottom-color:#C8F135;
  color:#C8F135
}

.nut-dish-card .ndish-badge {
  display:inline-flex;
  align-items:center;
  height:max(18px,1.04vw);
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:0 var(--w2-s2);
  border-radius:var(--w2-s1);
  white-space:nowrap;
  cursor:pointer;
}

.nut-dish-card .ndish-badge.on {
  color:#C8F135;
  background:rgba(200,241,53,.12);
  border:1px solid rgba(200,241,53,.3)
}

.nut-dish-card .ndish-badge.off {
  color:#F1462C;
  background:rgba(241,70,44,.08);
  border:1px solid rgba(241,70,44,.25)
}

.nut-dish-card .ndish-pin {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s1);
  height:max(18px,1.04vw);
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.1em;
  padding:0 var(--w2-s2);
  border-radius:var(--w2-s1);
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  white-space:nowrap;
}

.nut-dish-card .ndish-pin.pinned {
  color:#FFD740;
  background:rgba(255,215,64,.1);
  border:1px solid rgba(255,215,64,.3)
}

.nut-dish-card .ndish-pin.unpinned {
  color:rgba(255,255,255,.35);
  background:transparent;
  border:1px solid rgba(255,255,255,.06)
}

.nut-dish-card .ndish-pin.unpinned:hover {
  border-color:rgba(255,215,64,.3);
  color:rgba(255,215,64,.5)
}

.nut-dish-card .ndish-pin svg {
  width:max(10px,0.52vw);
  height:max(10px,0.52vw);
  fill:currentColor
}

.nut-dish-card .ndish-cats {
  font:400 12px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.55)
}

.nut-dish-card .ndish-macros {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  flex-wrap:wrap
}

.nut-dish-card .ndish-kcal {
  font:700 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:#C8F135
}

.nut-dish-card .ndish-macro-lbl {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.55);
  letter-spacing:.04em
}

.nut-dish-card .ndish-macro-inp {
  width:3.4vw;
  min-width:40px;
  text-align:center;
  font:600 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:#fff;
  background:#1E2023;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--w2-s2);
  padding:var(--w2-s1) var(--w2-s1);
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
}

.nut-dish-card .ndish-macro-inp:focus {
  outline:0;
  border-color:#C8F135;
  color:#C8F135
}

.nut-dish-card .ndish-macro-reset {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
  cursor:pointer;
  transition:color .14s;
}

.nut-dish-card .ndish-macro-reset:hover {
  color:#fff
}

.nut-dish-card .ndish-del {
  width:max(23px,1.35vw);
  height:max(23px,1.35vw);
  border-radius:var(--w2-s2);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.35);
  border:1px solid transparent;
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  background:transparent;
  margin-left:auto;
}

.nut-dish-card .ndish-del:hover {
  color:#F1462C;
  border-color:rgba(241,70,44,.3);
  background:rgba(241,70,44,.06)
}

.nut-dish-card .ndish-del svg {
  width:max(12px,0.73vw);
  height:max(12px,0.73vw);
  stroke:currentColor;
  stroke-width:2;
  fill:none
}

/* Dish image popup */
.ndish-img-popup {
  position:fixed;
  z-index:10001;
  background:#26282B;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--w2-s3);
  overflow:hidden;
  box-shadow:0 .63vw 2.08vw rgba(0,0,0,.6);
  width:16.67vw;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.ndish-img-popup-close {
  position:absolute;
  top:var(--w2-s2);
  right:var(--w2-s2);
  z-index:2;
  background:rgba(0,0,0,.6);
  border:0;
  color:rgba(255,255,255,.55);
  cursor:pointer;
  font-size:14px;
  width:max(25px,1.46vw);
  height:max(25px,1.46vw);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
}

.ndish-img-popup-close:hover {
  color:#fff;
  background:rgba(0,0,0,.8)
}

.ndish-img-popup img.ndish-popup-img {
  width:100%;
  height:10.42vw;
  object-fit:cover;
  display:block;
  background:#16181A
}

.ndish-img-popup img.ndish-popup-img[src] {
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="15" stroke="rgba(255,255,255,.15)" stroke-width="2" fill="none" stroke-dasharray="30 20"><animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/></circle></svg>') center/40px no-repeat #16181A
}

.ndish-img-popup-empty {
  width:100%;
  height:6.25vw;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.35);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  background:#16181A
}

.ndish-img-popup-body {
  padding:var(--w2-s3);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2)
}

.ndish-img-popup-body input {
  width:100%;
  padding:var(--w2-s2);
  font:500 12px/1.2 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:#fff;
  background:#1E2023;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--w2-s2);
  box-sizing:border-box;
}

.ndish-img-popup-body input:focus {
  outline:0;
  border-color:#C8F135
}

.ndish-img-popup-actions {
  display:flex;
  gap:var(--w2-s2)
}

.ndish-img-popup-actions button {
  border-radius:var(--w2-s2);
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.06);
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  padding:var(--w2-s3) var(--w2-s3);
}

.ndish-img-popup-actions .save {
  flex:1;
  background:#C8F135;
  color:#000;
  border-color:#C8F135
}

.ndish-img-popup-actions .save:hover {
  box-shadow:0 0 .73vw rgba(200,241,53,.55)
}

.ndish-img-popup-actions .save.disabled {
  background:transparent;
  color:rgba(255,255,255,.35);
  border-color:rgba(255,255,255,.06);
  cursor:default;
  pointer-events:none;
  box-shadow:none
}

.ndish-img-popup-actions .del {
  background:transparent;
  color:rgba(255,255,255,.35);
  flex-shrink:0
}

.ndish-img-popup-actions .del:hover {
  color:#F1462C;
  border-color:rgba(241,70,44,.4);
  background:rgba(241,70,44,.06)
}

/* Macro priority drag */
.nut-mp-list {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2)
}

.nut-mp-item {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s3);
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--w2-s2);
  cursor:grab;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  user-select:none;
}

.nut-mp-item:active {
  cursor:grabbing;
  border-color:#C8F135;
  background:rgba(200,241,53,.04)
}

.nut-mp-item .mp-handle {
  color:rgba(255,255,255,.35);
  display:flex;
  align-items:center
}

.nut-mp-item .mp-handle svg {
  width:max(12px,0.73vw);
  height:max(12px,0.73vw);
  fill:currentColor
}

.nut-mp-item .mp-num {
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:#C8F135;
  width:max(18px,1.04vw);
  text-align:center
}

.nut-mp-item .mp-label {
  font:500 14px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:#fff;
  flex:1
}

.nut-mp-item .mp-sub {
  font:400 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.35)
}

.nut-mp-item .mp-val {
  display:flex;
  align-items:center;
  gap:var(--w2-s2)
}

.nut-mp-item .mp-val input {
  width:3.65vw;
  text-align:center;
  font:600 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:#C8F135;
  background:#1E2023;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s1);
}

.nut-mp-item .mp-val input:focus {
  outline:0;
  border-color:#C8F135
}

.nut-mp-item .mp-unit {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.35)
}

.nut-mp-item.is-residual {
  border-style:dashed;
  border-color:rgba(255,255,255,.08);
  opacity:.65
}

.nut-mp-item.is-residual:hover {
  opacity:.8
}

.nut-mp-item.is-residual .mp-num {
  color:rgba(255,255,255,.35)
}

.nut-mp-item .mp-residual-tag {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s1);
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.04);
  padding:var(--w2-s1) var(--w2-s2);
  border-radius:var(--w2-s1);
  border:1px solid rgba(255,255,255,.06);
  margin-left:var(--w2-s2);
}

.nut-mp-item.drag-over {
  border-color:#C8F135;
  background:rgba(200,241,53,.04)
}

.nut-mp-item:focus {
  outline:0;
  border-color:#C8F135;
  box-shadow:0 0 0 1px rgba(200,241,53,.25)
}

/* Dish filter chips */
.nut-dish-filters {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  margin-bottom:var(--w2-s3);
  flex-wrap:wrap
}

.nut-dish-flt {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s1);
  padding:var(--w2-s2) var(--w2-s3);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--w2-s9);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.55);
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
}

.nut-dish-flt:hover {
  border-color:rgba(255,255,255,.1);
  color:#fff
}

.nut-dish-flt.active {
  border-color:#C8F135;
  color:#C8F135;
  background:rgba(200,241,53,.08);
  font-weight:600
}

.nut-dish-flt .df-count {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.35);
  background:#1E2023;
  padding:var(--w2-s1) var(--w2-s1);
  border-radius:var(--w2-s1);
  min-width:max(16px,0.94vw);
  text-align:center;
}

/* Dish add modal */
.ndish-add-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center
}

.ndish-add-modal-head {
  padding:var(--w2-s4) var(--w2-s5);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.ndish-add-modal-head h3 {
  font:700 14px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:#fff;
  margin:0
}

.ndish-add-modal-body {
  padding:var(--w2-s5);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s3)
}

.ndish-add-field {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1)
}

.ndish-add-field label {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35)
}

.ndish-add-field input,.ndish-add-field select {
  padding:var(--w2-s2) var(--w2-s3);
  background:#1E2023;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--w2-s2);
  color:#fff;
  font:500 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  box-sizing:border-box;
  width:100%;
  clip-path:none;
}

.ndish-add-field input:focus,.ndish-add-field select:focus {
  outline:0;
  border-color:#C8F135
}

.ndish-add-macros {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--w2-s3)
}

.ndish-add-actions {
  display:flex;
  padding:var(--w2-s3) var(--w2-s5);
  border-top:1px solid rgba(255,255,255,.06)
}

.ndish-add-actions .btn-full {
  width:100%;
  justify-content:center;
  padding:var(--w2-s3) var(--w2-s5);
  font-size:12px;
  clip-path:none;
  border-radius:var(--w2-s2);
}

.ndish-add-actions .btn-full.disabled {
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.25);
  border-color:rgba(255,255,255,.06);
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}

.ndish-add-modal {
  background:#26282B;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--w2-s3);
  width:max(360px,22vw);
  overflow:visible;
}

.ndish-add-modal .btn {
  clip-path:none
}

@media(max-width:500px) {
  /* Названия закреплённых блюд не влезали в поле (+75). Поле ввода текст не
     переносит — даём ему всю ширину строки и шрифт помельче (докрутка 15.08.2026). */
  #nut-dish-list .ndish-name {
    width:100%;
    min-width:0;
    font-size:14px;
  }


  #screen-settings input.inp[type="number"][data-path^="nutrition."],
  #nut-mp-list .mp-val input {
    min-width:calc(var(--w2-s9) + var(--w2-s2));
    min-height:var(--w2-s8)
  }

  #nut-mp-list .nut-mp-item {
    flex-wrap:wrap
  }

  #sub-regime input.slider {
    height:var(--w2-s8);
    background:linear-gradient(var(--w2-line),var(--w2-line)) center / 100% var(--w2-s1) no-repeat
  }

  #sub-regime input.slider::-webkit-slider-thumb {
    box-sizing:border-box;
    width:var(--w2-s8);
    height:var(--w2-s8);
    padding:var(--w2-s3);
    border:0;
    background:var(--w2-lime);
    background-clip:content-box;
    box-shadow:none
  }

  #sub-regime input.slider::-moz-range-thumb {
    box-sizing:border-box;
    width:var(--w2-s8);
    height:var(--w2-s8);
    padding:var(--w2-s3);
    border:0;
    background:var(--w2-lime);
    background-clip:content-box;
    box-shadow:none
  }

  .nut-dish-flt {
    min-height:var(--w2-s8)
  }

  #sub-weight input.inp[step="0.001"] {
    min-width:calc(var(--w2-s9) + var(--w2-s5))
  }

  #screen-settings .nut-dish-card {
    grid-template-columns:var(--w2-s8) minmax(0,1fr)
  }

  #screen-settings .nut-dish-card .ndish-img {
    width:var(--w2-s8);
    height:var(--w2-s8);
    box-sizing:border-box
  }

  #screen-settings .nut-dish-card .ndish-top {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center
  }

  #screen-settings .nut-dish-card .ndish-name {
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #screen-settings .nut-dish-card .ndish-macro-inp {
    min-width:calc(var(--w2-s9) + var(--w2-s2));
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #screen-settings .nut-dish-card :is(.ndish-badge,.ndish-pin,.ndish-macro-reset) {
    min-height:var(--w2-s8);
    padding-block:var(--w2-s2);
    box-sizing:border-box
  }

  #screen-settings .nut-dish-card .ndish-macro-reset {
    display:inline-flex;
    align-items:center;
    padding-inline:var(--w2-s2)
  }

  #screen-settings .nut-dish-card .ndish-del {
    width:var(--w2-s8);
    min-width:var(--w2-s8);
    height:var(--w2-s8);
    min-height:var(--w2-s8);
    padding:0;
    box-sizing:border-box
  }
}
/* ============ END NUTRITION SETTINGS CSS ============ */