/* ==========================================================================
   БОКОВЕ МЕНЮ, ЩО ХОВАЄТЬСЯ (auto-hide sidebar), 08.09.2026.

   Ширина меню була вписана числом 242px у ТРЬОХ місцях і в двох із них — з
   `!important` (`style.css` `body>main`, `production.css` двічі: аналітика і
   «фіксована навігація резервує місце»). Тому тут заведено одну змінну
   `--nav-w`, а ті три правила перекриті нею; інакше згорнуте меню лишало б
   242 px порожнечі, і сенс зникав.

   Файл підключається ОСТАННІМ — перекриваємо `!important` таким самим
   `!important`, але з правильним значенням.
   ========================================================================== */

:root{ --nav-w:242px; --nav-rail:15px; }

/* Нижче 901 px меню взагалі не бокове — це горизонтальна смуга (`style.css`).
   Там ховати нічого, тож уся механіка живе тільки в широкій розкладці. */
@media (min-width:901px){
  body.nav-collapsed{ --nav-w:var(--nav-rail); }

  body>main{
    margin-left:var(--nav-w) !important;
    transition:margin-left .24s cubic-bezier(.4,0,.2,1);
  }
  body>main:has(#analytics-card:not(.workspace-hidden)){
    width:calc(100% - var(--nav-w)) !important;
    margin-left:var(--nav-w) !important;
  }

  .workspace-nav{
    transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease;
    will-change:transform;
  }
  /* Ховаємо ЗСУВОМ, а не `display:none`: анімувати можна тільки перше, і
     вузол лишається в потоці фокуса рівно доти, доки він видимий. */
  body.nav-collapsed .workspace-nav{ transform:translateX(-100%) }
  body.nav-collapsed .workspace-nav *{ visibility:hidden }
  body.nav-collapsed.nav-peek .workspace-nav{
    transform:translateX(0);
    box-shadow:8px 0 30px #0c1d3855;
  }
  body.nav-collapsed.nav-peek .workspace-nav *{ visibility:visible }

  /* «Язичок»: тонка смужка кольору меню з шевроном. Він і є зона наведення. */
  #nav-edge{
    position:fixed;z-index:11;top:68px;bottom:0;left:0;
    display:flex;align-items:center;justify-content:center;
    width:var(--nav-rail);
    background:linear-gradient(90deg,#142b50,#1b3a68);
    border-right:1px solid #0d1f3c;
    cursor:pointer;
    opacity:0;pointer-events:none;
    transition:opacity .24s ease,width .15s ease;
  }
  body.nav-collapsed #nav-edge{ opacity:1;pointer-events:auto }
  body.nav-collapsed.nav-peek #nav-edge{ opacity:0 }
  #nav-edge span{
    color:#9ab8ff;font-size:13px;font-weight:800;line-height:1;
    transition:transform .15s ease,color .15s ease;
  }
  #nav-edge:hover{ width:calc(var(--nav-rail) + 4px) }
  #nav-edge:hover span{ color:#fff;transform:translateX(1px) }
  /* Три крапки вздовж смужки — щоб вона читалась як «тут щось є», а не як
     випадкова рамка сторінки. */
  #nav-edge::before,#nav-edge::after{
    content:"";position:absolute;left:50%;width:3px;height:3px;
    margin-left:-1.5px;border-radius:50%;background:#4a6ea8;
  }
  #nav-edge::before{ top:calc(50% - 22px) }
  #nav-edge::after{ top:calc(50% + 19px) }
}

@media (max-width:900px){
  #nav-edge{ display:none }
  body.nav-collapsed .workspace-nav{ transform:none }
  body.nav-collapsed .workspace-nav *{ visibility:visible }
}

/* Кнопка згортання — у верхній панелі, ліворуч від назви. Потрібна не лише
   для зручності: на дотику наведення не існує взагалі, і без неї згорнуте
   меню було б неможливо розгорнути з планшета. */
#nav-toggle{
  display:grid;place-items:center;
  width:34px;height:34px;margin-right:14px;flex:0 0 auto;
  border:1px solid #33517f;border-radius:9px;
  background:#1b3a68;color:#cfe0ff;
  font-size:15px;line-height:1;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
#nav-toggle:hover{ background:#28518c;border-color:#4a72ad;color:#fff }
#nav-toggle:focus-visible{ outline:2px solid #7f9fe9;outline-offset:2px }
@media (max-width:760px){ #nav-toggle{ margin-right:9px } }

/* ==========================================================================
   ВІДСТУПИ РОБОЧОЇ ОБЛАСТІ — ОДНЕ МІСЦЕ НА ВСІ РОЗДІЛИ (16.09.2026).

   Раніше мінімальний відступ мав лише «Склад» (окреме правило в
   `warehouse-register.css`), решта розділів брала 18px зверху (`production.css`,
   двічі з `!important`) і 24px з боків (`style.css`: 4vw). Тепер усі розділи
   однакові: 4px з боків і зверху. Файл іде ПІСЛЯ `production.css` і
   `compact-headers.css`, тож їхні `!important` тут перекриваються.

   Шапку в `compact-headers.css` зменшено до 48px, а `style.css` досі
   резервував під неї 68px (`body{padding-top}`), тому під шапкою в КОЖНОМУ
   розділі, і в «Складі» теж, лишалась порожня смуга 20px.
   ========================================================================== */
body{ padding-top:48px }
body>main{ padding:4px 4px 8px !important }
/* Перший видимий блок розділу не додає власного відступу зверху; відстань
   між блоками, що стоять один під одним, лишається як була. */
body>main>:not(.workspace-hidden, :not(.workspace-hidden) ~ *){ margin-top:0 !important }
/* Ці дві картки мали власну стелю ширини (`style.css`: 1080 і 1240px), тож
   справа в них лишалась смуга замість мінімального відступу. */
.operations-calendar-card,.recipe-catalog-card{ max-width:none }