/* =========================
   EDIT BADGE "+"
   ========================= */

/* общий бейдж “+” — универсально (центр по вертикали справа) */
.edit-badge{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);

  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; line-height:1;

  background: var(--secondary);
  color: var(--primary);
  border: 1px solid var(--stroke);

  pointer-events:none;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.dark .edit-badge{
  background:#1a1e1a;
  color:#9fd1a3;
  border-color:#2a2d31;
}


/* =========================
   CALENDAR BAR
   ========================= */

.page--main .calendar-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
.page--main .calendar-bar .month{ font-weight:800; letter-spacing:-0.02em; }
.page--main .calendar-bar .nav-btn{
  appearance:none; border:0; background:transparent;
  width: var(--tap-h, 44px); height: var(--tap-h, 44px);
  border-radius:12px; line-height:1;
  font-size:18px; color:var(--primary);
  -webkit-tap-highlight-color: transparent;
}
.page--main .calendar-bar .nav-btn:active{ background:var(--secondary); }
.page--main .nav-btn.is-disabled{ opacity:.4; pointer-events:none; cursor:default; }


/* =========================
   WEEK ROW (7 squares)
   ========================= */

.page--main .week-row{
  --week-gap: clamp(4px, 1.2vw, 10px);
  --pad-y: clamp(4px, 0.8vw, 8px);
  --radius: clamp(8px, 1.2vw, 12px);

  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--week-gap);
  margin: 8px 0 14px;
  width:100%;
  box-sizing:border-box;

  container-type: inline-size;
}

.page--main .week-row .date-item{
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background:#fff;
  border:1px solid #e5e7eb;

  user-select:none;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;

  padding: var(--pad-y) 2px;
  min-width:0;
  overflow:hidden;
}

.page--main .week-row .date-item .wd{
  font-size: clamp(10px, 1.6vw, 13px);
  opacity:.7;
  margin-bottom:2px;
  text-align:center;
  line-height:1;
}
.page--main .week-row .date-item .wdnum{
  font-weight:800;
  font-size: clamp(14px, 2.2vw, 20px);
  line-height:1;
  text-align:center;
}

.page--main .week-row .date-item.is-selected{ outline:2px solid rgba(46,125,50,.25); }
.page--main .week-row .date-item.is-today{ border-color:#2e7d32; }
.page--main .week-row .date-item.is-disabled{ opacity:.4; pointer-events:none; cursor:default; }

@container (max-width: 340px){
  .page--main .week-row{ --week-gap: 4px; }
  .page--main .week-row .date-item{ padding: 4px 1px; }
  .page--main .week-row .date-item .wd{ font-size: 10px; }
  .page--main .week-row .date-item .wdnum{ font-size: 14px; }
}

/* fallback для старых браузеров без aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .page--main .week-row .date-item{ position:relative; }
  .page--main .week-row .date-item::before{ content:""; display:block; padding-top:100%; }
  .page--main .week-row .date-item > *{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
  }
}


/* =========================
   WEIGHT CARD
   ========================= */

.page--main .card-weight{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;

  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;

  padding:10px 14px;
  margin:10px 0;
  min-height: var(--tap-h,44px);
  width:100%;
}
.page--main .card-weight .left{ display:flex; align-items:center; gap:10px; }
.page--main .card-weight .icon{ font-size:22px; }
.page--main .card-weight .label{ font-weight:800; font-size:var(--fz-title); }
.page--main .card-weight .right{ display:flex; align-items:center; gap:8px; }
.page--main .card-weight .value{ font-size:var(--fz-large); font-weight:900; letter-spacing:-0.02em; }
.page--main .card-weight .unit{ font-size:var(--fz-large); font-weight:900; letter-spacing:-0.02em; padding-right:32px; }


/* =========================
   DUAL METRICS (СОФ / Не еда)
   ========================= */

.dual-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 28px;
}

.metric-card{
  position:relative;
  display:flex; align-items:center; justify-content:center;

  background:#ffffff00;
  border:1px solid var(--stroke);
  border-radius:14px;
  box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.08));

  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
  padding:12px;
  min-height: var(--tap-h, 80px);
  width:100%;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}

.metric-box{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.metric-title{
  font-size:clamp(14px, 4vw, 16px);
  font-weight:700;
  color:var(--text, #000);
  display:flex; align-items:center; gap:4px;
}
.metric-title .icon{ font-size:18px; }
.metric-value{
  font-size:clamp(16px, 5vw, 20px);
  font-weight:800;
  color:var(--primary, #2e7d32);
}
.metric-value .unit{ font-size:.8em; font-weight:400; margin-left:2px; color:var(--text-light, #555); }


/* =========================
   TRAIN HEAD
   ========================= */

.page--main .train-head{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--primary);
  font-weight:900;
  letter-spacing:-0.01em;
  margin:6px 0;
}
.page--main .train-head .left{ display:flex; align-items:center; gap:8px; }


/* =========================
   EXERCISE LIST
   ========================= */

.page--main .ex-list{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:8px 10px;
}
.page--main .ex-row{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  min-height: var(--tap-h,44px);
  border-radius:14px;
  padding:10px 12px;
  padding-right:44px; /* резерв под edit-badge */
  font-size:14px;

  background:transparent;
  border:0;
  text-align:left;
}
.page--main .ex-row + .ex-row{ border-top:1px dashed var(--stroke); }
.page--main .ex-ico{ width:28px; text-align:center; font-size:20px; }
.page--main .ex-name{ flex:1; font-weight:700; }
.page--main .ex-vals{ font-weight:800; color:#172018; margin-right:28px; }


/* =========================
   YESTERDAY BLOCK
   ========================= */

.page--main .yesterday .title{ margin-top:12px; font-weight:700; font-size:var(--fz-title); }
.page--main .y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0; }

.page--main .y-btn{
  position:relative;
  border-radius:14px;
  min-height:64px;

  background:#fff;
  border:1px solid var(--stroke);

  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:12px;
}

.page--main .y-btn .mini-title{ font-weight:700; opacity:.85; margin-bottom:2px; }
.page--main .y-btn .mini-value{ font-size:var(--fz-title); font-weight:800; }


/* =========================
   STEPS / PROFILE REPORT BUTTONS (arrow right)
   ========================= */

.page--main .steps{
  position:relative;
  width:100%;
  min-height:var(--tap-h,48px);

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 14px;
  padding-right:44px; /* резерв под edit-badge, если он будет */

  border:1px solid var(--stroke);
  border-radius:12px;
  background:#fff;
  color:var(--text, #000);

  font-weight:700;
  font-size:clamp(14px, 4vw, 16px);
}

.page--main .steps .icon{
  width:24px;
  text-align:center;
  flex:0 0 auto;
}

.page--main .steps .label{
  font-size:var(--fz-title);
  flex:1 1 auto;     /* ← занимает середину */
  min-width:0;
}

/* ВАЖНО: стрелка всегда справа */
.page--main .steps .value{
  margin-left:auto;  /* ← прижимает к правому краю */
  flex:0 0 auto;
  padding-left:0;
  text-align:right;

  font-weight:700;
  opacity:.55;
  font-size:14px;
}


/* =========================
   REPORTS BUTTON
   ========================= */

.page--main .reports{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  height:var(--tap-h,48px);

  background:#275f2a;
  color:#fff;
  border-radius:999px;

  font-weight:700;
  font-size:clamp(14px, 4vw, 16px);

  margin:12px 0 12px;
  box-shadow:var(--shadow);
}


/* =========================
   DISABLED (единая логика)
   ========================= */

.page--main .is-disabled{
  opacity:.45;
  filter: grayscale(1);
  pointer-events:none;
  cursor:default;
}

/* Сброс user-agent стилей, если где-то реально ставишь disabled */
.mini-card.y-btn:disabled,
.steps:disabled{
  color: inherit;
  background: #fff;
  border-color: #e5e7eb;
  opacity: 1; /* прозрачность контролим через .is-disabled */
}


/* =========================
   DARK THEME
   ========================= */

.dark .page--main .calendar-bar .nav-btn{ color:#9fd1a3; }
.dark .page--main .ex-list,
.dark .page--main .y-btn,
.dark .page--main .steps{
  background:#0f1113;
  border-color:#2a2d31;
}
.dark .page--main .reports{ background:#275f2a; }


/* =========================
   MINI-CARD (если используешь)
   ========================= */

.mini-card.y-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;

  padding:12px 14px;
  box-shadow:none;
  text-align:left;

  transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease;
}

.mini-card .mini-title{
  font-size:12px;
  opacity:.75;
  line-height:1.2;
  margin-bottom:2px;
}
.mini-card .mini-value{
  font-weight:800;
  font-size:18px;
  line-height:1;
}
.mini-card .mini-value .unit{
  font-weight:600;
  font-size:12px;
  margin-left:4px;
  opacity:.7;
}
/* =========================
   MY EXERCISES (scoped)
   ========================= */
.page--main .myex-wrap{ width:100%; }

.page--main .myex-panel{
  padding: 10px 12px 14px;
  border-top: 1px dashed var(--stroke);
}

.page--main .myex-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
}

.page--main .myex-label{
  font-size:12px;
  font-weight:800;
  opacity:.75;
}

.page--main .myex-inp{
  appearance:none;
  width:100%;
  border-radius:14px;
  border:1px solid;
  background:#fff;
  border-color:#b4b4b4;

  padding:12px 12px;
  font-size:12px;
  font-weight:700;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

.page--main .myex-inp:focus{
  outline:2px solid rgba(46,125,50,.25);
  border-color: rgba(46,125,50,.35);
}

.page--main .myex-hint{
  font-size:12px;
  font-weight:700;
  opacity:.6;
}

.page--main .myex-msg{
  font-size:13px;
  font-weight:800;
  opacity:.85;
  padding-top:8px;
}

.dark .page--main .myex-inp{
  background:#0f1113;
  border-color:#2a2d31;
  color:#e7efe7;
}