/* ============================================================
   FitAI — кабинет: база нового дизайна.
   Подключается ПОСЛЕ styles.css и ДО файлов cabinet-*.css.
   Здесь только токены, типографика и защита от тем кабинета.
   Правила конкретных экранов — в отдельных файлах, по одному
   на агента, чтобы не конфликтовать.
   ============================================================ */

/* ---------- токены (те же, что на лендинге) ---------- */
:root{
  --c-paper:#FAFAF8;
  --c-white:#FFFFFF;
  --c-ink:#121418;
  --c-ink-2:#454A53;
  --c-ink-3:#5C616B;
  --c-line:#E6E5E1;
  --c-line-2:#D2D0CA;
  --c-blue:#2F3E5C;
  --c-blue-2:#1F2B44;
  --c-blue-3:#42579A;
  --c-sky:#E7EDF8;
  --c-sand:#F4ECDD;
  --c-stone:#EEECE6;
  --c-brass:#B08F5C;
  --c-brass-ink:#7A5F33;
  --c-good:#2E6B4F;
  --c-bad:#9B3B3B;
  --c-display:"Unbounded","Manrope",system-ui,sans-serif;
  --c-sans:"Onest","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --c-r:16px;
  --c-r-lg:20px;
  --c-shadow:0 1px 0 rgba(18,20,24,.04),0 18px 40px -28px rgba(18,20,24,.28);
}

/* ============================================================
   ЗАЩИТА ОТ ТЕМЫ (читать перед правками!)
   app.js:7102 fai126ApplyTheme() безусловно ставит
   data-theme="dark" на <html> и <body>. В styles.css ~107
   тёмных правил с !important по голым тегам (p, h1-h3, b,
   strong, a, small) и по header/footer/.card.
   Специфичность кабинетных правил: html[data-theme=X] p = (0,1,2).
   Поэтому свои правила пишем не ниже (0,2,0).
   :where() ниже держит ровно (0,2,0) — выше кабинета, но ниже
   ваших компонентных правил, так что они продолжают работать.
   ============================================================ */
.fai83-shell.fai83-shell :where(b,strong,small,em,text,tspan){color:inherit!important}
.fai83-shell.fai83-shell :where(p){color:var(--c-ink-2)!important}
.fai83-shell.fai83-shell :where(h1,h2,h3,h4,h5,h6){color:var(--c-ink)!important}

/* ============================================================
   ЗАЩИТА ОВЕРЛЕЕВ, КОТОРЫЕ ВИСЯТ НА <body>
   Лист профиля, шторка меню и модалки добавляются в document.body,
   а не внутрь .fai83-shell, поэтому защита выше до них не достаёт.
   В styles.css есть `h1,h2,h3,h4,b,strong{color:#f7f8f7}` — почти
   белый, и спасает только `html[data-theme="light"] …{…!important}`.
   app.js ставит data-theme="dark", и тогда весь <b>-текст в шторке
   профиля становится белым на белом: пункты «Избранное», «Тарифы»,
   «Настройки», «Выйти» пропадают. Скриншот от пользователя — ровно
   этот случай.
   У самого правила нет !important, так что достаточно вернуть
   наследование; делаем это и точечно по нашим оверлеям, и глобально
   для b/strong — наследовать цвет для них и есть поведение браузера
   по умолчанию.
   ============================================================ */
b,strong{color:inherit}

#fai280ProfileLayer,#fai235MenuLayer,#fai82Auth,
#fpMyWorkoutsOverlay,#fai105ReadyOverlay,#fpWorkoutRunnerV47{
  font-family:var(--c-sans);
}
#fai280ProfileLayer :where(b,strong,small,em,span,i),
#fai235MenuLayer   :where(b,strong,small,em,span,i){color:inherit!important}
#fai280ProfileLayer :where(h1,h2,h3,h4,h5,h6),
#fai235MenuLayer   :where(h1,h2,h3,h4,h5,h6){color:var(--c-ink)!important}
#fai280ProfileLayer .fai280-profile-sheet{color:var(--c-ink)!important}
#fai280ProfileLayer .fai280-profile-head small{color:var(--c-ink-3)!important}
#fai280ProfileLayer .fai280-profile-item{color:var(--c-ink)!important}
#fai280ProfileLayer .fai280-profile-item.danger{color:var(--c-bad)!important}
#fai280ProfileLayer .fai280-profile-item.admin{color:var(--c-blue-2)!important}

/* общий фон и типографика кабинета */
html[data-theme] body,body{background:var(--c-paper)!important}
.fai83-shell{
  background:var(--c-paper)!important;
  color:var(--c-ink)!important;
  font-family:var(--c-sans)!important;
}
.fai83-shell h1,.fai83-shell h2,.fai83-shell h3,.fai83-shell h4{
  font-family:var(--c-display)!important;font-weight:600!important;letter-spacing:-.02em!important;
}

/* кабинет красит любой <footer> в тёмное */
.fai83-shell + footer,.fai92-app-footer{background:var(--c-paper)!important;border-top:1px solid var(--c-line)!important}
.fai92-app-footer,.fai92-app-footer *{color:var(--c-ink-2)!important}

/* ============================================================
   ФИКС: «кабинет выглядит как виджет на чёрной странице».

   Диагноз (проверено в браузере, не на глаз):
   1. `.fai83-shell` носит ещё и класс `.demo-shell` — это
      остатки блока «Рабочее демо» со старого лендинга. Оттуда
      прилетают border + border-radius:16px + overflow:hidden +
      box-shadow:0 30px 100px rgba(0,0,0,.38). Приложение из-за
      них выглядит карточкой, висящей над страницей.
      styles.css:86, :7342, :7897, :8379.
   2. app.js:9233 в рантайме вставляет <style> с правилом
      `.fai109-app-only,.fai109-app-only .fai83-shell,
       .fai109-app-only .main{background:#071308!important}`.
      Это (0,2,0) и inline-<style>, т.е. позже наших <link>.
      Локально его случайно перебивает `html[data-theme="light"]
      .fai83-shell` = (0,2,1) из styles.css. Но fai126ApplyTheme()
      умеет ставить data-theme="dark" — и тогда вся оболочка
      становится #071308. Сайдбар sticky и кончается через 100vh,
      поэтому ниже него открывается чёрный столбец во всю высоту
      с закруглённым нижним углом. Ровно то, что на скриншоте.
      => пишем (0,4,0) и вообще не зависим от темы.
   3. Сам столбец сайдбара: .sidebar белый, но sticky, а подложка
      под ним — фон shell. Красим колонку градиентом по shell,
      чтобы белая полоса шла до самого низа страницы.
   ============================================================ */
html{background:var(--c-paper)!important;color-scheme:light!important}
html body{background:var(--c-paper)!important}
.fai83-app-page,.fai83-app-main,#app{background:var(--c-paper)!important}
.fai109-app-only.fai109-app-only{background:var(--c-paper)!important}
.fai109-app-only.fai109-app-only .main.main{background:var(--c-paper)!important}

/* приложение = страница, а не карточка */
.fai83-shell.fai83-shell,
.fai109-app-only.fai109-app-only .fai83-shell.fai83-shell{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  min-height:calc(100vh - 86px)!important;
  /* белая колонка сайдбара + разделитель, тянутся на всю высоту */
  background:linear-gradient(90deg,
    var(--c-white)  0 279px,
    var(--c-line)   279px 280px,
    var(--c-paper)  280px 100%)!important;
}
/* на всю ширину окна: сайдбар прижат к левому краю, как в обычном
   веб-приложении, а не остров с полями по 90 px */
.fai83-app-main.fai83-app-main{width:100%!important;margin:0!important;max-width:none!important}
.fai83-shell.fai83-shell>.sidebar{background:transparent!important;border-right:0!important}
.fai83-shell.fai83-shell>.main{padding:26px clamp(20px,3vw,44px) 40px!important}

@media (max-width:1100px){
  .fai83-shell.fai83-shell,
  .fai109-app-only.fai109-app-only .fai83-shell.fai83-shell{
    background:var(--c-paper)!important;min-height:0!important;
  }
  .fai83-shell.fai83-shell>.sidebar{background:var(--c-white)!important}
  .fai83-shell.fai83-shell>.main{padding:18px 16px calc(32px + env(safe-area-inset-bottom))!important}
}

/* ============================================================
   ПОЛЯ ВВОДА
   styles.css задаёт `input,textarea,select{background:#15171B
   !important;color:#FAFAF7!important}` — без привязки к теме,
   то есть поля чёрные всегда. В светлом кабинете это читается
   как дыра: на экране «Питание» поле веса выглядит чёрным
   прямоугольником. Специфичность правила (0,0,1), поэтому
   хватает одного класса-предка.
   ============================================================ */
.fai83-shell input,.fai83-shell textarea,.fai83-shell select,
#fai280ProfileLayer input,#fai280ProfileLayer textarea,#fai280ProfileLayer select,
#fai235MenuLayer input,#fai235MenuLayer textarea,#fai235MenuLayer select{
  background:var(--c-white)!important;
  color:var(--c-ink)!important;
  border:1px solid var(--c-line-2)!important;
  font-family:var(--c-sans)!important;
  caret-color:var(--c-blue)!important;
}
.fai83-shell input::placeholder,.fai83-shell textarea::placeholder{
  color:var(--c-ink-3)!important;opacity:1!important;
}
.fai83-shell input:focus,.fai83-shell textarea:focus,.fai83-shell select:focus{
  border-color:var(--c-blue)!important;
  outline:2px solid color-mix(in srgb,var(--c-blue) 28%,transparent)!important;
  outline-offset:1px!important;
}
/* чекбоксы и радио — не заливаем, только акцент */
.fai83-shell input[type="checkbox"],.fai83-shell input[type="radio"]{
  background:initial!important;border:initial!important;accent-color:var(--c-blue)!important;
}

/* ============================================================
   ТЁМНЫЕ ОСТАТКИ В ОВЕРЛЕЯХ (те самые «чёрные полоски»)
   В styles.css осталось 10 правил вида
     html[data-theme="dark"] .X{background:#1a1d1a!important}
   Все они — про модалки, которые вешаются на <body>: карточка
   рецепта (#recipeModalV56), форма «Добавить рецепт» и .level-card.
   Наши cabinet-*.css их не достают, потому что почти все правила
   там начинаются с .fai83-shell, а этих узлов внутри шелла нет.
   А тема у приложения как раз тёмная — поэтому в карточке рецепта
   шаги приготовления шли серым по чёрному (контраст 1.91).
   Специфичность оригинала — (0,2,1); `html[data-theme]` + класс +
   тег даёт (0,2,2), чего достаточно, и это не зависит от значения
   темы: светлая она или тёмная, кабинет всё равно бумажный.
   ============================================================ */
html[data-theme] .recipe-modal-v56.recipe-modal-v56,
html[data-theme] .recipe-modal-head-v56.recipe-modal-head-v56,
html[data-theme] .recipe-modal-body-v56.recipe-modal-body-v56{
  background:var(--c-white)!important;color:var(--c-ink)!important;
}
html[data-theme] .recipe-ingredients-v56.recipe-ingredients-v56>div,
html[data-theme] .recipe-modal-macros-v56.recipe-modal-macros-v56>div{
  background:var(--c-paper)!important;border-color:var(--c-line)!important;color:var(--c-ink)!important;
}
html[data-theme] .recipe-steps-v56.recipe-steps-v56 li{
  background:var(--c-paper)!important;border-color:var(--c-line)!important;color:var(--c-ink)!important;
}
html[data-theme] .recipe-disclaimer-v56.recipe-disclaimer-v56{
  background:var(--c-sand)!important;color:var(--c-brass-ink)!important;border-color:var(--c-line-2)!important;
}
html[data-theme] .fp-add-recipe-overlay-v63.fp-add-recipe-overlay-v63{
  background:rgba(18,20,24,.44)!important;
}
html[data-theme] .fp-add-recipe-modal-v63.fp-add-recipe-modal-v63{
  background:var(--c-white)!important;border:1px solid var(--c-line)!important;
  box-shadow:0 30px 90px -40px rgba(18,20,24,.45)!important;color:var(--c-ink)!important;
}
html[data-theme] .fp-add-recipe-head-v63.fp-add-recipe-head-v63,
html[data-theme] .fp-add-recipe-actions-v63.fp-add-recipe-actions-v63{
  background:var(--c-white)!important;border-color:var(--c-line)!important;
}
html[data-theme] .fp-add-recipe-modal-v63 input.fp-add-recipe-modal-v63,
html[data-theme] .fp-add-recipe-modal-v63.fp-add-recipe-modal-v63 input,
html[data-theme] .fp-add-recipe-modal-v63.fp-add-recipe-modal-v63 textarea,
html[data-theme] .fp-add-recipe-modal-v63.fp-add-recipe-modal-v63 select{
  background:var(--c-white)!important;color:var(--c-ink)!important;
  border:1px solid var(--c-line-2)!important;box-shadow:none!important;
}
html[data-theme] .fp-ingredient-row-v63.fp-ingredient-row-v63,
html[data-theme] .fp-add-recipe-summary-v63.fp-add-recipe-summary-v63,
html[data-theme] .fp-add-recipe-section-v63.fp-add-recipe-section-v63{
  background:var(--c-paper)!important;border-color:var(--c-line)!important;color:var(--c-ink)!important;
}
html[data-theme] .level-card.level-card:hover,
html[data-theme] .level-card.level-card.selected{
  background:var(--c-sky)!important;border-color:var(--c-blue)!important;color:var(--c-ink)!important;
}

/* ------------------------------------------------------------
   Три «soft/fix»-класса из styles.css:5838-5840. По имени они
   должны были чинить светлые блоки, но красят их в почти чёрный
   (#0d120e / #111611 / #101510) — это был фикс под ПРЕЖНИЙ тёмный
   дизайн. Живут они в модалках на <body>, поэтому мимо cabinet-*.
   Из-за .fai118-white-block-fix шапка «Продукты и КБЖУ» в форме
   добавления рецепта шла тёмным по тёмному: контраст 1.00.
   Оригинал — (0,1,0) с !important, поэтому хватает удвоения класса.
   ------------------------------------------------------------ */
.fai118-recipe-modal-soft.fai118-recipe-modal-soft{
  background:var(--c-white)!important;color:var(--c-ink)!important;
}
.fai118-recipe-input-soft.fai118-recipe-input-soft{
  background:var(--c-white)!important;color:var(--c-ink)!important;border-color:var(--c-line-2)!important;
}
.fai118-white-block-fix.fai118-white-block-fix{
  background:var(--c-white)!important;border-color:var(--c-line)!important;color:var(--c-ink)!important;
}