/* ===========================================================
   Гвардия — дизайн-система (полевой микс v3+v2)
   Подключается поверх Bootstrap 5. Палитра и типографика зафиксированы
   по утверждённому макету mockups/final.
   =========================================================== */
:root{
  /* Парк приключений Хотьково — палитра с adventure-park.ru */
  --side:#1e1f24; --side2:#2a2b31; --side-ink:#e9e8ee; --side-mut:#8f8d99;
  --paper:#f1f0f5; --card:#ffffff; --line:#e7e5ee;
  --ink:#25262b; --mut:#9593a0;
  --acc:#ff4b19; --acc-dark:#e23d0f; --acc-soft:#ffe9e2;
  --red:#d64545; --mark:#fdeecb;
  --spec:#7a5bd6; --spec-soft:#efeaff;
  --bs-body-bg:var(--paper); --bs-body-color:var(--ink);
}
@font-face{font-family:'Unbounded';src:local('Unbounded')}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}
.ff-disp{font-family:'Unbounded','Mulish',sans-serif}
.mono{font-family:'JetBrains Mono','Cascadia Code',ui-monospace,monospace}
a{color:var(--acc-dark)}

/* ── оболочка: сайдбар + рабочая зона ── */
.shell{display:flex;min-height:100vh}
.side{width:206px;flex:0 0 206px;background:var(--side);color:var(--side-ink);
  padding:1rem .9rem;display:flex;flex-direction:column;gap:.15rem;
  /* панель не зависит от высоты данных: липкая, во весь экран, со своим скроллом */
  position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;
  /* меню и его выпадашки — поверх контента (плитки дат, липкий заголовок таблицы) */
  z-index:40}
.side-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.side .logo{display:flex;justify-content:center;align-items:center;background:#fff;
  border-radius:10px;padding:.5rem .6rem;text-decoration:none}
.side .logo img{width:100%;max-width:140px;display:block}
.side-collapse{background:none;border:none;color:var(--side-mut);cursor:pointer;padding:.25rem;
  border-radius:6px;display:flex;transition:transform .15s}
.side-collapse:hover{color:#fff;background:var(--side2)}
.side .ic{flex:0 0 18px}
.side a.nav{display:flex;align-items:center;gap:.55rem;color:var(--side-mut);text-decoration:none;
  padding:.5rem .6rem;border-radius:7px;font-weight:600}
.side a.nav.on{background:var(--side2);color:#fff}
.side a.nav:hover{color:#fff;background:var(--side2)}
.side .nav-top{margin-bottom:.2rem}
/* сворачиваемые группы меню */
.side .navgroup{margin-top:.2rem}
.side .grp{display:flex;align-items:center;gap:.2rem}
.side .grp-main{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0;text-decoration:none;
  color:var(--side-mut);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  padding:.5rem .5rem;border-radius:7px}
.side .grp-main .lbl{flex:1}
.side .grp-main:hover{color:#fff;background:var(--side2)}
.side .navgroup.active .grp-main{color:var(--side-ink)}
.side .grp-toggle{background:none;border:none;color:var(--side-mut);cursor:pointer;padding:.35rem;border-radius:6px;font-family:inherit}
.side .grp-toggle:hover{color:#fff;background:var(--side2)}
.side .caret{transition:transform .15s;font-size:.8rem;display:inline-block}
.side .navgroup.open .caret{transform:rotate(90deg)}
.side .grp-items{display:none;flex-direction:column;gap:.15rem;padding-left:1.9rem}
.side .navgroup.open .grp-items{display:flex}
.side .sp{flex:1;min-height:.5rem}
.side .who{border-top:1px solid #3a4531;padding-top:.8rem;font-size:.82rem;color:var(--side-mut)}
.side .who b{color:var(--side-ink)}
.side .who a{color:var(--acc)}
.side .who-ic{display:none;color:var(--side-mut)}
.side .who-ic:hover{color:#fff}

/* ── свёрнутый режим: только иконки + всплывающие подменю ── */
@media (min-width:881px){
  html.side-collapsed .side{width:60px;flex-basis:60px;padding:1rem .5rem;overflow:visible} /* overflow:visible — чтобы всплывающие подменю не обрезались */
  html.side-collapsed .side .logo,
  html.side-collapsed .side .lbl,
  html.side-collapsed .side .caret,
  html.side-collapsed .side .who-full{display:none}
  html.side-collapsed .side-top{justify-content:center}
  html.side-collapsed .side-collapse{transform:rotate(180deg)}
  html.side-collapsed .side a.nav,
  html.side-collapsed .side .grp-main{justify-content:center;padding:.55rem}
  html.side-collapsed .side .grp-toggle{display:none}
  html.side-collapsed .side .grp{gap:0}
  html.side-collapsed .side .who{display:flex;justify-content:center;border-top:1px solid #3a4531}
  html.side-collapsed .side .who-ic{display:flex}
  /* всплывающее подменю группы при наведении */
  html.side-collapsed .side .navgroup{position:relative}
  html.side-collapsed .side .grp-items{display:none!important;position:absolute;left:100%;top:0;
    min-width:190px;background:var(--side2);border-radius:0 10px 10px 0;padding:.4rem;
    box-shadow:6px 6px 24px #0006;z-index:30;padding-left:.4rem}
  html.side-collapsed .side .navgroup:hover .grp-items{display:flex!important}
  html.side-collapsed .side .grp-items .nav{justify-content:flex-start;white-space:nowrap}
  html.side-collapsed .side .grp-items::before{content:"";position:absolute;left:-6px;top:0;width:6px;height:100%} /* мост для наведения */
}
.work{flex:1;min-width:0;padding:1rem 1.2rem 2rem}

/* ── панель дат: слайдер + шкала заполнения ── */
.datebar{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.datebar .title{font-family:'Unbounded','Mulish',sans-serif;font-weight:500;font-size:1rem;color:var(--acc-dark);letter-spacing:.04em;min-width:120px}
.pad{background:var(--card);border:1px solid var(--line);border-radius:7px;width:34px;height:34px;
  font-family:'Unbounded';font-size:1rem;color:var(--acc-dark);cursor:pointer}
.pad:hover{border-color:var(--acc);background:var(--acc-soft)}
.rng{display:flex;align-items:center;gap:.35rem;color:var(--mut)}
.rng input[type=date]{border:1px solid var(--line);border-radius:7px;padding:.3rem .45rem;
  font-family:'JetBrains Mono';font-size:.8rem;background:var(--card);color:var(--ink)}
.btn-today{background:none;border:none;color:var(--acc-dark);font-weight:800;cursor:pointer;text-decoration:underline}
.days{display:flex;gap:7px;overflow-x:auto;padding:4px 0 10px 4px;scroll-behavior:smooth;scrollbar-width:thin}
.day{flex:0 0 68px;box-sizing:border-box;position:relative;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:.4rem 0 .5rem;cursor:pointer;overflow:hidden;text-decoration:none;color:var(--ink)}
.day:hover{border-color:var(--acc)}
.day .dw{font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.12em}
.day .dd{font-family:'Unbounded';font-size:1.15rem;line-height:1.3}
.day .dm{font-size:.68rem;color:var(--mut);font-weight:600}
.day .dc{font-family:'JetBrains Mono';font-size:.78rem;color:var(--acc-dark);font-weight:700}
.day .fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--acc-soft);
  border-top:2px solid var(--acc);z-index:0;transition:height .15s}
.day>span{position:relative;z-index:1;display:block}
/* выделение — через outline (не box-shadow), чтобы оно сосуществовало с жирными
   рамками closed/hascm и не перебивалось ими */
.day.sel{border-color:var(--acc-dark);outline:2px solid var(--acc-dark);outline-offset:1px}
.day.sel .fill{background:#d9e6c3}
.day.we .dd{color:var(--red)}
/* комментарий — жёлтая, закрыт — красная. Настоящая жирная рамка (2px, поверх
   заливки количества заказов — inset-тень пряталась под .fill; box-sizing:border-box
   не даёт сдвига). Закрытый день НЕ затемняем. closed после hascm → у закрытого с
   комментарием побеждает красная */
.day.hascm{border:2px solid #e6a700}
.day.closed{border:2px solid var(--red)} .day.closed .dc{color:var(--red)}
.day.past{opacity:.5} /* прошедшие даты приглушены — доступен только просмотр */
.day.past.sel{opacity:.8}
.day.today .dw{color:var(--acc-dark);font-weight:800}

/* ── штамп дня + переключатель вида ── */
.stamp{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border:2px solid var(--ink);
  border-radius:10px;background:var(--card);padding:.65rem 1rem;margin-bottom:.8rem}

/* ── страница-список: шапка (даты/фильтр/сводка) закреплена, прокручивается только таблица ── */
.listwrap{display:flex;flex-direction:column}
.listhead{flex:0 0 auto}
.listbody{flex:1 1 auto}
.listfoot{flex:0 0 auto;padding-top:.5rem}
@media (min-width:881px){
  /* на списковых страницах рабочая зона фиксируется во весь экран и сама не
     прокручивается — скроллится только тело таблицы (.listbody). Всё это
     ограничено body.page-list, чтобы обычные страницы (формы, отчёты)
     по-прежнему прокручивались целиком. */
  body.page-list{overflow:hidden}
  body.page-list .work{height:100vh;overflow:hidden;display:flex;flex-direction:column;padding-bottom:.4rem}
  body.page-list .listwrap{flex:1 1 auto;min-height:0}
  body.page-list .listbody{min-height:0;overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--card)}
  body.page-list .listbody .sheet{border:none;overflow:visible;background:none;border-radius:0}
  body.page-list .footer{flex:0 0 auto;margin-top:.4rem}
  .listhead .stamp{margin-bottom:.6rem}
}
.stamp h1{font-family:'Unbounded';font-size:1.25rem;margin:0;letter-spacing:.03em}
.stamp .sub{font-family:'JetBrains Mono';color:var(--mut)} .stamp .sub b{color:var(--acc-dark)}
.note{background:var(--mark);border-left:4px solid #d8b74a;padding:.3rem .6rem;border-radius:4px;font-weight:600;cursor:pointer}
.btn-a{background:var(--acc);color:#fff;border:none;border-radius:7px;padding:.5rem 1rem;font-weight:800}
.btn-a:hover{background:var(--acc-dark);color:#fff}
.btn-o{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:.5rem 1rem;text-decoration:none;display:inline-block}
.btn-o:hover{border-color:var(--acc);color:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.seg button{border:none;background:none;padding:.42rem .85rem;font-weight:700;color:var(--mut);cursor:pointer;font-family:'Unbounded';letter-spacing:.03em}
.seg button.on{background:var(--side);color:#fff}

/* ── таблица заказов ── */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:9px;overflow:auto}
table.z{width:100%;border-collapse:collapse;min-width:1200px;margin:0}
.z th{font-family:'Unbounded';font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--mut);text-align:left;padding:.5rem .55rem;border-bottom:2px solid var(--ink);
  white-space:nowrap;background:var(--paper);position:sticky;top:0;z-index:2}
.z td{padding:.45rem .55rem;border-bottom:1px solid var(--line);vertical-align:top}
.z td.ico{text-align:center;font-size:1rem;white-space:nowrap} /* колонки-эмодзи (опов./тип карты) */
.z tbody tr{cursor:pointer}
.z tbody tr:hover td{background:var(--acc-soft)}
.z .n{color:var(--mut);font-family:'JetBrains Mono';text-align:right;width:2.2rem}
.z .tim{font-family:'JetBrains Mono';font-weight:700;font-size:.98rem;white-space:nowrap;
  border-left:4px solid var(--acc);background:var(--paper)}
.z .num{font-family:'JetBrains Mono';text-align:right}
.z .ph{font-family:'JetBrains Mono';white-space:nowrap}
.z .cli{font-weight:800;white-space:nowrap}
.z .place{font-family:'Unbounded' !Important;font-weight:401;font-size:.78rem;color:var(--acc-dark);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.z .who{color:var(--mut);white-space:nowrap;font-size:.85rem}
.z .em{color:var(--mut);font-family:'JetBrains Mono';font-size:.82rem}
.z .ref{white-space:nowrap;color:var(--ink);font-weight:600} /* судьи — основная информация, не приглушать */
/* единый шрифт по всем колонкам таблицы заказов (иерархия — весом и цветом,
   не гарнитурой). Перебивает поколоночные font-family выше по специфичности id. */
#tableView .z td{font-family:inherit}
.clip{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.clip.has{cursor:zoom-in}
.clip.has::after{content:"⤢";margin-left:.25rem;color:var(--acc);font-weight:700}
.clip.empty{color:var(--line)}
.z tfoot td{font-family:'JetBrains Mono';background:var(--paper);border-top:2px solid var(--ink);padding:.6rem .6rem}
.z tfoot b{color:var(--acc-dark)}
tr.spec td.tim{border-left-color:var(--spec)}
tr.spec:hover td{background:var(--spec-soft)}
.mark-spec{color:var(--spec);font-size:1.05rem;cursor:help}
.has-card{cursor:pointer;margin-left:.3rem;font-size:.95rem;text-decoration:none} /* 💳 у клиента с бонусной картой */
tr.deleted{opacity:.5;text-decoration:line-through}
/* удалённые заказы скрыты, пока не включён «глаз» */
.z tbody tr.deleted{display:none}
body.show-deleted .z tbody tr.deleted{display:table-row}
/* пиктограмма-глаз рядом с переключателем вида */
.eye-btn{border:1px solid var(--line);background:var(--paper);border-radius:8px;
  width:38px;height:34px;cursor:pointer;color:var(--mut);display:inline-flex;align-items:center;justify-content:center;position:relative}
.eye-btn:hover{color:var(--ink);border-color:var(--acc)}
.eye-btn.disabled{opacity:.3;pointer-events:none}
.eye-btn .ico-on{display:none} .eye-btn .ico-off{display:inline}
body.show-deleted .eye-btn{color:var(--acc-dark);border-color:var(--acc)}
body.show-deleted .eye-btn .ico-on{display:inline} body.show-deleted .eye-btn .ico-off{display:none}
.eye-btn .cnt{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:700;border-radius:8px;padding:0 .3rem;line-height:1.4}

/* ── карточный вид (компактный — цель: ~8 карточек на экран) ── */
.log{display:flex;flex-direction:column;gap:5px}
.log.hide{display:none}
.orow{display:grid;grid-template-columns:82px 104px 1fr 1.4fr 200px;background:var(--card);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;text-decoration:none;color:var(--ink);line-height:1.25}
.orow:hover{border-color:var(--acc);box-shadow:0 1px 6px #0001}
.orow.spec{border-left:4px solid var(--spec)}
/* удалённые заказы в карточном виде — скрыты, пока не включён «глаз» */
.orow.deleted{opacity:.5;text-decoration:line-through;display:none}
body.show-deleted .orow.deleted{display:grid}
/* компактность даёт уплотнение отступов/интерлиньяжа, а НЕ уменьшение шрифта —
   размеры шрифта как в исходной версии (иначе «начало игры» почти не читается) */
.cell{padding:.32rem .6rem;min-width:0}
.c-tim{background:var(--side);color:#fff;font-weight:700;font-size:1rem;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.1rem}
.c-tim small{color:var(--side-mut);font-size:.66rem;font-weight:600}
.c-pl{display:flex;flex-direction:column;justify-content:center;border-right:1px dashed var(--line)}
.c-pl .pl{color:var(--acc-dark);font-family: Unbounded} .c-pl .kol{font-size:.8rem;color:var(--ink)} /* чел. — обычный текст, не серый */
.c-cli .nm{font-weight:800}
.c-cli .ph{color:var(--mut);font-size:.85rem}
.c-cli .em{color:var(--mut);font-size:.8rem}
.c-cli .razm2{color:var(--acc-dark);font-size:.8rem;font-weight:600;margin-top:.1rem}
.c-cli .razm2 b{font-weight:600;color:var(--mut);font-size:.72rem;letter-spacing:.04em;margin-right:.3rem}
.c-det{font-size:.86rem;border-left:1px dashed var(--line)}
.c-det div{margin-bottom:.05rem}
.c-det b{font-weight:600;color:var(--mut);font-size:.72rem;letter-spacing:.04em;margin-right:.3rem} /* метки строчными (без uppercase) */
.c-det .hidden-note b{color:var(--spec)}
.c-who{font-size:.8rem;color:var(--mut);border-left:1px dashed var(--line);display:flex;flex-direction:column;justify-content:center;gap:.05rem}
.c-who .ref-line{color:var(--ink)} /* судьи — обычный текст (не жирный), но полноцветный */
/* единый шрифт в карточном виде заказа */
.orow .c-tim, .orow .c-pl .kol, .orow .c-cli .ph{font-family:inherit}
.sum{font-family:'JetBrains Mono';color:var(--mut);padding:.7rem .2rem}
.sum b{color:var(--acc-dark);font-size:1.05rem}
.legend{font-size:.8rem;color:var(--mut);margin:.6rem .1rem 0;display:flex;gap:1.2rem;flex-wrap:wrap}
.legend i{font-style:normal;display:inline-flex;align-items:center;gap:.35rem}
.dot{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ── модальное окно (формы заказа/бонусов) ──
   Габариты уменьшены пропорционально: окно гарантированно помещается по высоте
   на экране 1920×1080 без прокрутки оверлея. Само окно — flex-колонка с
   ограничением по высоте; прокручивается только область полей (#modal-body),
   а панель действий (.form-actions) закреплена снизу — «Сохранить» всегда виден. */
.modal-ov{position:fixed;inset:0;background:#1a1e17cc;z-index:1080;display:flex;
  align-items:flex-start;justify-content:center;padding:2vh 1rem;overflow:auto}
.modal-ov[hidden]{display:none}
.modal-box{position:relative;background:var(--paper);border-radius:12px;box-shadow:0 20px 60px #0006;
  width:min(840px,95vw);max-height:96vh;display:flex;flex-direction:column;
  overflow:hidden;animation:modalin .14s ease}
@keyframes modalin{from{transform:translateY(-10px);opacity:.6}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:.7rem;right:.7rem;width:30px;height:30px;border:none;border-radius:7px;
  background:var(--line);color:var(--ink);cursor:pointer;font-size:1rem;z-index:3}
.modal-x:hover{background:var(--red);color:#fff}
#modal-body{overflow-y:auto;overflow-x:hidden;min-height:0;padding:1rem 1.3rem}
/* заголовок-штамп в модалке не заезжает под кнопку «✕»: справа оставлен зазор */
.modal-box .stamp{margin-top:.1rem;margin-bottom:.7rem;margin-right:2.2rem;padding:.5rem .85rem}
.modal-box .stamp h1{font-size:1.05rem}
.modal-busy{padding:2rem;text-align:center;color:var(--mut)}
/* компактная сетка полей внутри модалки */
.modal-box form{max-width:none!important}
.modal-box .fld{gap:.15rem}
.modal-box .fld>span{font-size:.66rem}
.modal-box .fld input,.modal-box .fld select,.modal-box .fld textarea{padding:.35rem .5rem;font-size:.88rem}
/* закреплённая панель действий формы (Сохранить/Отмена) */
.modal-box .form-actions{position:sticky;bottom:0;background:var(--paper);
  padding:.6rem 0 .2rem;margin-top:.7rem;border-top:1px solid var(--line);z-index:2}
/* на телефоне модалка — во весь экран, чтобы гарантированно помещалась; сетка
   полей в одну колонку */
@media (max-width:880px){
  .modal-ov{padding:0}
  .modal-box{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  #modal-body{padding:.8rem 1rem}
  /* потомок, а не прямой ребёнок: сетка заказа обёрнута в <fieldset> (блокировка
     прошлых дат), поэтому form>div её не доставал и окно не сжималось в 1 колонку */
  .modal-box form div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

/* ── всплывающий полный текст ── */
.pop{position:fixed;z-index:1090;max-width:340px;background:var(--side);color:#fff;border-radius:9px;
  padding:.7rem .85rem;box-shadow:0 8px 30px #0004;font-size:.9rem;line-height:1.4;display:none}
.pop.pinned{box-shadow:0 8px 30px #0006,0 0 0 2px var(--acc);cursor:default}
.pop.pinned::before{content:"закреплено · клик в стороне закроет";display:block;font-size:.62rem;
  color:var(--side-mut);margin-bottom:.35rem;letter-spacing:.02em}
.pop b{display:block;font-family:'Unbounded';font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--acc);margin-bottom:.3rem}
.pop::after{content:"";position:absolute;top:-7px;left:20px;border:7px solid transparent;border-top:0;border-bottom-color:var(--side)}

/* ── форма входа ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--side)}
.login-card{background:var(--card);border-radius:14px;padding:2rem 2.2rem;width:min(360px,92vw);box-shadow:0 20px 60px #0005}
.login-card .logo{text-align:center;margin-bottom:1.2rem}
.login-card .logo img{height:48px;width:auto;display:inline-block}
.login-card label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700}
.login-card input{width:100%;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;margin:.25rem 0 .9rem;font-size:1rem}
.login-card input:focus{outline:2px solid var(--acc);border-color:var(--acc)}
.login-card .alarm{color:var(--mut);text-align:center;font-size:.82rem;margin-top:.6rem}

/* ── автоподсказка клиента в форме заказа (#10) ── */
.ac-box{position:fixed;z-index:1200;background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 30px #0003;max-height:260px;overflow:auto;max-width:380px}
.ac-box[hidden]{display:none}
.ac-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;cursor:pointer;white-space:nowrap}
.ac-item:hover{background:var(--acc-soft)}
.ac-card{width:1.2rem;text-align:center;flex:0 0 1.2rem}
.ac-nm{font-weight:700}
.ac-ph{color:var(--mut);font-size:.85rem}

/* ── компактные поля фильтра (список карт и т.п.) ── */
.ff{display:flex;flex-direction:column;gap:.15rem}
.ff>span{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700}
.ff input,.ff select{border:1px solid var(--line);border-radius:7px;padding:.4rem .5rem;font-family:inherit}
.chk{display:flex;align-items:center;gap:.4rem;cursor:pointer}

/* ── общий низ страницы ── */
.footer{margin-top:1.4rem;padding-top:.8rem;border-top:1px solid var(--line);color:var(--mut);font-size:.82rem}

/* ── мобильная верхняя панель + выезжающий сайдбар (по умолчанию скрыты) ── */
.mtop{display:none}
.side-backdrop{display:none}

@media (max-width:880px){
  .shell{flex-direction:column}
  /* верхняя панель с гамбургером */
  .mtop{display:flex;align-items:center;gap:.7rem;position:sticky;top:0;z-index:50;
    background:var(--side);color:#fff;padding:.5rem .8rem}
  .mtop-burger{background:none;border:none;color:#fff;cursor:pointer;padding:.25rem;display:flex;border-radius:6px}
  .mtop-burger:hover{background:var(--side2)}
  .mtop .logo{display:flex;align-items:center;background:#fff;border-radius:8px;padding:.2rem .4rem;text-decoration:none}
  .mtop .logo img{height:24px;display:block}
  /* сайдбар превращается в выезжающую панель (как на десктопе, но off-canvas) */
  .side{position:fixed;top:0;left:0;height:100vh;width:min(260px,82vw);flex:none;
    transform:translateX(-100%);transition:transform .2s ease;z-index:60;overflow-y:auto}
  body.side-open .side{transform:none}
  .side-collapse{display:none} /* сворачивание в рейку — только для десктопа */
  .side-backdrop{display:block;position:fixed;inset:0;background:#0007;z-index:55;
    opacity:0;pointer-events:none;transition:opacity .2s}
  body.side-open .side-backdrop{opacity:1;pointer-events:auto}
  body.side-open{overflow:hidden} /* фон не скроллится, пока открыта панель */
  /* заказы: карточный вид вместо таблицы на узком экране (таблица заказов
     помечена .view-table-only; таблицу списка карт .sheet не трогаем — у неё
     своего карточного вида нет, прячем только оформление заказов) */
  .seg,.view-table-only{display:none!important}
  .log.hide{display:flex!important}
  .orow{grid-template-columns:76px 1fr}
  .c-pl{border-right:none} .c-det,.c-who{border-left:none;border-top:1px dashed var(--line);grid-column:1/-1}
  .c-tim{grid-row:1/3}
}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.days{scroll-behavior:auto}}

@media print{
  .side,.datebar,.seg,.stamp .btn-a,.stamp .btn-o,.legend,.footer{display:none!important}
  .work{padding:0} .sheet{overflow:visible;border:none} table.z{min-width:0}
  .z th{position:static}
}