/* ===== Шапка v4 и оранжевая окантовка левого блока (решение владельца 30.09.2026) =====
   Документ: mp_manager/DEVELOPMENT.md §«Шапка v4». Файл подключён ПОСЛЕДНИМ, поэтому
   перекрывает прежние правила .hdr из style.css / dailybar.css / profile.css без правки их.

   Одна строка: [домик + знак GARANT] [плашка сводки] [капсула «Инструменты»] [профиль,
   под ним свежесть · обновить · закладки].
   Скорость: анимируются только transform и opacity (композитор, без пересчёта раскладки),
   размеры капсулы фиксированы — шапка не прыгает. Панель — position:fixed поверх страницы:
   у .hdr стоит overflow:hidden, и absolute-панель обрезалась бы (как меню профиля). */

:root{
  --o:#F2711C; --o-2:#FF9A3D; --o-ink:#B94E0B; --o-soft:#FFF3EA; --o-soft2:#FFE2CC;
  --o-line:#F4D2B6; --o-line2:#EBB78F; --o-side:#FFF9F4;
}

/* ---------- сетка шапки: одна строка ---------- */
.hdr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;column-gap:14px;
  padding:4px 14px;background:linear-gradient(180deg,#fff 55%,#FFFBF7)}
.hdr > .brand{grid-row:1;align-self:center;padding-right:12px;border-right:1px solid var(--o-line)}
.hdr > .topbar{grid-column:2;grid-row:1}
.hdr > header{grid-column:3;grid-row:1;gap:12px !important}

/* ---------- знак GARANT / MP MANAGER ---------- */
.brand-row{gap:10px}
.hdr .home-btn{width:30px;height:30px;border-radius:50%;border-color:var(--o-line);color:var(--o-ink);background:#fff}
.hdr .home-btn:hover{background:var(--o-soft);border-color:var(--o-line2)}
.hdr .home-btn.on{background:var(--o);border-color:var(--o);color:#fff}
.brand-mark{display:flex;flex-direction:column;line-height:1;user-select:none}
.bmk-w{font-family:Unbounded,Onest,system-ui,sans-serif;font-weight:800;font-size:18px;letter-spacing:.04em;
  background:linear-gradient(100deg,#D42A1C 0%,#F2711C 58%,#FF9F45 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;position:relative;padding-bottom:3px}
.bmk-w::after{content:"";position:absolute;left:1px;right:.09em;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#D42A1C,#FF9F45)}
.bmk-s{margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.bmk-s em{font-style:normal;color:var(--o-ink)}

/* ---------- плашка сводки: без подписей-капсов, пилюлями ---------- */
.hdr .fplate{align-items:center;gap:6px;background:var(--o-side);border:1px solid var(--o-line);
  border-radius:999px;padding:3px 4px}
.hdr .fplate .fcap{display:none}
.hdr .fplate .prange{background:#fff;border:1px solid var(--o-line);border-radius:999px;padding:0 3px 0 8px;height:28px;gap:2px}
.hdr .fplate .prange input[type=date]{border:0 !important;background:transparent;width:112px;height:26px;box-shadow:none}
.hdr .fplate .prange .pdash{color:var(--muted)}
.hdr .fplate .prange #btn-period-reset{height:22px;border-radius:999px;border:0;background:var(--o-soft);color:var(--o-ink);
  padding:0 8px !important;font-size:11.5px !important}
.hdr .fplate .prange #btn-period-reset:hover{background:var(--o-soft2)}
.hdr .fplate #f-gran{display:none}
.gran-seg{display:inline-flex;background:#fff;border:1px solid var(--o-line);border-radius:999px;padding:2px;height:28px;box-sizing:border-box}
.gran-seg button{border:0;background:none;font:inherit;font-size:12px;padding:0 10px;border-radius:999px;color:var(--muted);cursor:pointer}
.gran-seg button:hover{color:var(--o-ink)}
.gran-seg button.on{background:var(--o);color:#fff;font-weight:600}
.hdr .fplate .ss-btn{height:28px;border-radius:999px;border-color:var(--o-line);background:#fff}
.hdr .fplate .ss-btn svg{color:var(--o)}
.hdr .fplate .ss-btn:hover{border-color:var(--o-line2)}
.hdr .fplate .ss-btn.open{background:var(--o);border-color:var(--o);color:#fff}
.hdr .fplate .ss-btn.open svg{color:#fff}

/* ---------- капсула «Инструменты» ---------- */
.tools{position:relative;flex:0 0 auto}
.tools-pill{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px 0 4px;border-radius:999px;
  border:1px solid var(--o-line);background:#fff;font:inherit;color:var(--text);cursor:pointer;
  transition:box-shadow .2s,border-color .2s}
.tools-pill:hover,.tools-pill.on{border-color:var(--o-line2);box-shadow:0 4px 14px -6px rgba(242,113,28,.45)}
.tl-stack{display:flex;align-items:center}
.tl-sc{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--o-soft);color:var(--o-ink);border:2px solid #fff;margin-left:-8px;
  transition:transform .3s cubic-bezier(.32,1.4,.45,1)}
.tl-sc:first-child{margin-left:0;z-index:4}.tl-sc:nth-child(2){z-index:3}.tl-sc:nth-child(3){z-index:2}.tl-sc:nth-child(4){z-index:1}
.tl-sc.hot{background:linear-gradient(135deg,var(--o),var(--o-2));color:#fff}
.tl-sc.more{background:var(--panel2);color:var(--muted);font-size:10.5px;font-weight:700}
.tools-pill:hover .tl-sc:nth-child(2){transform:translateX(3px)}
.tools-pill:hover .tl-sc:nth-child(3){transform:translateX(6px)}
.tools-pill:hover .tl-sc:nth-child(4){transform:translateX(9px)}
.tl-stack svg,.tl-grid svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl-lbl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;font-weight:700;font-size:12.5px;white-space:nowrap}
.tl-lbl small{font-weight:500;font-size:10.5px;color:var(--muted)}
.tl-lbl small:empty{display:none}
.tl-badge{position:absolute;top:-5px;right:-8px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;
  border-radius:999px;background:#E5484D;color:#fff;font-size:9.5px;font-weight:700;line-height:12px;
  display:grid;place-items:center;border:2px solid #fff}
.tl-badge.warn{background:#E8A23A}
.tl-badge.hidden{display:none}

.tools-pop{position:fixed;z-index:1100;width:360px;background:var(--panel);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 18px 50px -18px rgba(120,60,10,.30),0 2px 6px rgba(120,60,10,.08);
  transform-origin:top right;transform:translateY(-6px) scale(.92);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .38s cubic-bezier(.32,1.25,.45,1),opacity .2s,visibility 0s .38s}
.tools-pop.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .42s cubic-bezier(.32,1.25,.45,1),opacity .18s,visibility 0s}
.tl-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 9px;border-bottom:1px solid var(--line)}
.tl-head b{font-size:14px}
.tl-x{width:26px;height:26px;border-radius:50%;border:0;background:var(--panel2);color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.tl-x:hover{background:var(--o-soft);color:var(--o-ink)}
.tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 4px;padding:14px 10px 14px}
.tl-item{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;font:inherit;color:var(--text);
  cursor:pointer;padding:0;opacity:0;transform:translateY(6px)}
.tl-item.hidden{display:none}
.tools-pop.open .tl-item{animation:tlPop .42s cubic-bezier(.32,1.35,.45,1) forwards}
.tools-pop.open .tl-item:nth-child(2){animation-delay:.03s}.tools-pop.open .tl-item:nth-child(3){animation-delay:.06s}
.tools-pop.open .tl-item:nth-child(4){animation-delay:.09s}.tools-pop.open .tl-item:nth-child(5){animation-delay:.12s}
.tools-pop.open .tl-item:nth-child(6){animation-delay:.15s}.tools-pop.open .tl-item:nth-child(7){animation-delay:.18s}
.tools-pop.open .tl-item:nth-child(8){animation-delay:.21s}
@keyframes tlPop{to{opacity:1;transform:none}}
.tl-c{position:relative;width:46px;height:46px;border-radius:50%;background:var(--o-soft);color:var(--o-ink);display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.32,1.4,.45,1),background .15s,color .15s}
.tl-item:hover .tl-c,.tl-item:focus-visible .tl-c{transform:translateY(-2px) scale(1.07);background:var(--o);color:#fff}
.tl-c.hot{background:linear-gradient(135deg,var(--o),var(--o-2));color:#fff}
.tl-t{font-size:11.5px;font-weight:600;text-align:center;line-height:1.15;max-width:80px}
@media (prefers-reduced-motion:reduce){
  .tools-pop,.tools-pop.open,.tl-sc{transition:none}
  .tools-pop.open .tl-item{animation:none;opacity:1;transform:none}
}

/* ---------- правая колонка: профиль, под ним свежесть · обновить · закладки ---------- */
.hdr > header > .me-col{order:12;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.me-col .me-btn{padding:1px 2px 1px 8px}
.me-col .me-ava{background:linear-gradient(135deg,var(--o),var(--o-2))}
.me-sub{display:flex;align-items:center;gap:4px;padding-right:2px}
.hdr .me-sub #freshness{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);white-space:nowrap}
.hdr .me-sub #freshness:not(:empty)::before{content:"";width:6px;height:6px;border-radius:50%;background:#2FA36B;
  box-shadow:0 0 0 2px rgba(47,163,107,.18)}
.hdr-ico{width:22px;height:22px;border-radius:50%;border:1px solid var(--o-line);background:#fff;color:var(--o-ink);
  display:inline-grid;place-items:center;padding:0;cursor:pointer;flex:none}
.hdr-ico svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hdr-ico:hover{background:var(--o-soft);border-color:var(--o-line2)}
.hdr .me-sub .bm-wrap{display:inline-flex}
#view-app.home-mode .me-sub #btn-refresh{display:none !important}

/* ---------- левый блок фильтров: только окантовка и фон в оранжевом тоне ---------- */
.sidebar{background:var(--o-side);border-right-color:var(--o-line)}
.side-compact{border-color:var(--o-line) !important;box-shadow:0 1px 2px rgba(180,90,20,.06),inset 0 2px 0 #FFE9D8}
.side-compact:hover{border-color:var(--o-line2) !important;box-shadow:0 2px 8px rgba(180,90,20,.10),inset 0 2px 0 #FFDCC0}
.side-compact .msel-btn,.side-compact select{border-color:#EFD9C7}
.side-compact .msel-btn:hover,.side-compact select:hover{border-color:var(--o-line2)}
.side-block .msel-btn.on{background:var(--o-soft);border-color:var(--o-line2)}
.sidebar input[type=checkbox]{accent-color:var(--o)}
.side-search .sku-search{display:flex;width:100%}
.side-search #f-search{width:100% !important;max-width:none !important;height:28px;padding:0 30px 0 10px !important;font-size:13px !important;
  border:1px solid #EFD9C7;border-radius:9px;box-sizing:border-box}
.side-search #f-search:focus{border-color:var(--o);outline:0;box-shadow:0 0 0 3px rgba(242,113,28,.15)}
.side-search #btn-search-sku{position:absolute;right:3px;top:3px;height:22px;width:24px;border-radius:7px;border:0;
  background:var(--o-soft);color:var(--o-ink);cursor:pointer;padding:0}
.side-search #btn-search-sku:disabled{opacity:.45;cursor:default}

@media (max-width:900px){
  .hdr{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .hdr > .brand{grid-column:1;grid-row:1;border-right:0}
  .hdr > header{grid-column:2;grid-row:1}
  .hdr > .topbar{grid-column:1 / -1;grid-row:2;overflow-x:auto}
  .tl-lbl{display:none}
  .tools-pop{width:min(360px,calc(100vw - 16px))}
}

/* ---------- карточка артикула: разделы бывшего «Ещё» у своей группы вкладок ---------- */
#modal-sku .grp-links{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
#modal-sku .grp-link[data-group]{display:none}
#modal-sku .grp-link[data-group].on{display:inline-flex;align-items:center}
.grp-link{height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--o-line);background:var(--o-soft);
  color:var(--o-ink);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.grp-link:hover{background:var(--o-soft2);border-color:var(--o-line2)}
.grp-link.hidden{display:none !important}

/* Ноутбук 1280–1400: подпись капсулы прячем (счётчик виден на кружке), кнопка вида сводки ужимается. */
.hdr > .topbar{min-width:0}
.hdr .fplate{min-width:0;flex:0 1 auto}
.hdr .fplate .fcell:last-child{min-width:0;flex:0 1 auto}
.hdr .fplate .ss-btn{max-width:100%;min-width:0;overflow:hidden}
@media (max-width:1400px){
  .tl-lbl{display:none}
  .tools-pill{padding-right:4px}
  .hdr .fplate .prange input[type=date]{width:104px}
}