/* Оболочка BuyerDesk v2 — общая для всех страниц.
   Правится ОДНИМ исполнителем и только до старта параллельной работы над страницами:
   если её трогать во время веера, страницы разъедутся между собой.
   Внешний вид перенесён из утверждённых макетов без изменений. */

:root{
  color-scheme:light;
  --bg:#F2F6FD; --card:#fff; --card-2:#F8FAFE;
  --accent:#1877F2; --accent-dark:#0A5CD8; --accent-soft:#E8F1FE;
  --text:#16233D; --muted:#5B6B86;
  --border:#DCE6F5; --border-2:#EDF2FB;
  --ok:#0E9F6E; --ok-soft:#E3F6EF; --ok-ink:#0A6B4B;
  --warn:#B45309; --warn-soft:#FDF3E3;
  --danger:#DC2626; --danger-soft:#FCEAEA;
  --scrim:rgba(10,20,40,.42);
  --shadow:0 1px 2px rgba(22,35,61,.06), 0 8px 24px rgba(22,35,61,.08);
  --shadow-sm:0 1px 2px rgba(22,35,61,.06);
  --row:34px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1626; --card:#152034; --card-2:#1B2942;
    --accent:#3B8DF7; --accent-dark:#1877F2; --accent-soft:#1C3355;
    --text:#E6EDF9; --muted:#93A4C0;
    --border:#26344F; --border-2:#1E2B44;
    --ok:#22C08A; --ok-soft:#12312A; --ok-ink:#3ED9A2;
    --warn:#E0A45B; --warn-soft:#33260F;
    --danger:#F26D6D; --danger-soft:#3A1A1C;
    --scrim:rgba(0,0,0,.55);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"]{ color-scheme:light }
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1626; --card:#152034; --card-2:#1B2942;
  --accent:#3B8DF7; --accent-dark:#1877F2; --accent-soft:#1C3355;
  --text:#E6EDF9; --muted:#93A4C0;
  --border:#26344F; --border-2:#1E2B44;
  --ok:#22C08A; --ok-soft:#12312A; --ok-ink:#3ED9A2;
  --warn:#E0A45B; --warn-soft:#33260F;
  --danger:#F26D6D; --danger-soft:#3A1A1C;
  --scrim:rgba(0,0,0,.55);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ui); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.bdnav{
  position:fixed; left:0; top:0; bottom:0; width:56px; z-index:45;
  background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:8px; overflow-x:hidden; overflow-y:auto;
  scrollbar-width:none; transform:none; visibility:visible;
  transition:width .16s ease, transform .18s ease, visibility .18s, box-shadow .16s ease;
}
.bdnav::-webkit-scrollbar{width:0}
.bdnav:hover,.bdnav:focus-within,.bdnav.is-open{scrollbar-width:thin}
.bdnav:hover::-webkit-scrollbar,.bdnav:focus-within::-webkit-scrollbar,.bdnav.is-open::-webkit-scrollbar{width:6px}
.bdnav::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px}
.bdnav:hover,.bdnav:focus-within{width:252px; box-shadow:var(--shadow)}
.bdnav-group{border-top:1px solid var(--border-2); margin-top:7px; padding-top:5px}
.bdnav-group.bdnav-first{border-top:0; margin-top:0; padding-top:0}
.bdnav-title{
  display:block; height:15px; line-height:15px; padding:0 8px; margin-bottom:2px;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; overflow:hidden; opacity:0; transition:opacity .13s;
}
.bdnav-item{
  position:relative; display:flex; align-items:center; gap:11px; height:32px; padding:0 8px;
  margin-bottom:1px; border-radius:8px; color:var(--text); text-decoration:none;
  white-space:nowrap; font-size:13px; font-weight:500;
}
.bdnav-item>svg{flex:0 0 18px; width:18px; height:18px; color:var(--muted)}
.bdnav-item:hover{background:var(--card-2)}
.bdnav-item:hover>svg{color:var(--accent)}
.bdnav-item[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:700}
.bdnav-item[aria-current="page"]>svg{color:var(--accent)}
.bdnav-item[aria-current="page"]::before{
  content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.bdnav-lab{opacity:0; overflow:hidden; text-overflow:ellipsis; transition:opacity .13s}
.bdnav-num{
  margin-left:auto; opacity:0; transition:opacity .13s; flex:0 0 auto;
  font:700 10.5px/1 var(--mono); padding:3px 5px; border-radius:5px;
  background:var(--warn-soft); color:var(--warn);
}
.bdnav-dot{
  position:absolute; left:24px; top:3px; min-width:14px; height:14px; padding:0 3px;
  border-radius:8px; background:var(--warn); color:var(--card);
  font:700 9px/14px var(--mono); text-align:center;
  box-shadow:0 0 0 2px var(--card); transition:opacity .13s;
}
.bdnav:hover .bdnav-title,.bdnav:focus-within .bdnav-title,
.bdnav:hover .bdnav-lab,.bdnav:focus-within .bdnav-lab,
.bdnav:hover .bdnav-num,.bdnav:focus-within .bdnav-num{opacity:1}
.bdnav:hover .bdnav-dot,.bdnav:focus-within .bdnav-dot{opacity:0}
@media (max-width:900px){
  body{padding-left:0}
  .bdnav{width:252px; z-index:58; transform:translateX(-100%); visibility:hidden; box-shadow:none}
  .bdnav:hover,.bdnav:focus-within{width:252px; box-shadow:none}
  .bdnav.is-open{transform:none; visibility:visible; box-shadow:var(--shadow)}
  .bdnav.is-open .bdnav-title,.bdnav.is-open .bdnav-lab,.bdnav.is-open .bdnav-num{opacity:1}
  .bdnav.is-open .bdnav-dot{opacity:0}
}

/* Отступ под полосу навигации. Без него содержимое страницы уезжает под меню:
   полоса зафиксирована, из потока выключена, места сама не занимает. */
body{ padding-left:56px }

/* Узкий экран: полоса уезжает за край, поэтому нужна кнопка, которая её вернёт.
   Разворачивается НАЛОЖЕНИЕМ поверх содержимого — рабочая область не сужается
   (требование владельца). */
@media (max-width:900px){
  body{ padding-left:0 }
  .bdnav.is-open{ transform:none; visibility:visible; box-shadow:var(--shadow) }
  .bdburger{
    position:fixed; left:10px; top:10px; z-index:60;
    width:38px; height:38px; border-radius:10px; cursor:pointer;
    border:1px solid var(--border); background:var(--card); color:var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .bdburger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
  .bdscrim{
    position:fixed; inset:0; z-index:56; background:rgba(22,35,61,.28);
    border:0; padding:0; cursor:pointer;
  }
}
@media (min-width:901px){ .bdburger, .bdscrim{ display:none } }
