/* ════════════════════════════════════════════════════════════════════════════
   Демо-CRM Bazison — оболочка приложения.
   Наследует язык лендинга: приборная панель, машинные швы, оранжевый = сигнал.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --ground:#E7E5E0; --plate:#F3F2EE; --recess:#DCDAD3;
  --ink:#15181B; --hair:#C6C3BB; --signal:#D8501B; --live:#1C7A5B; --warn:#B8860B;
  --shadow:rgba(20,22,25,.10); --plate-lip:rgba(255,255,255,.70);
  --display:'IBM Plex Sans', ui-sans-serif, -apple-system, Segoe UI, Arial, sans-serif;
  --text:ui-sans-serif, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  --rail:216px; --top:56px;
}
@media (prefers-color-scheme:dark){
  :root{--ground:#121417;--plate:#1A1D21;--recess:#0C0E10;--ink:#EAE8E3;
        --hair:#2E3338;--signal:#FF6A2B;--live:#35A981;--warn:#D9A441;
        --shadow:rgba(0,0,0,.55);--plate-lip:rgba(255,255,255,.055)}
}
:root[data-theme=dark]{--ground:#121417;--plate:#1A1D21;--recess:#0C0E10;--ink:#EAE8E3;
  --hair:#2E3338;--signal:#FF6A2B;--live:#35A981;--warn:#D9A441;
  --shadow:rgba(0,0,0,.55);--plate-lip:rgba(255,255,255,.055)}
:root[data-theme=light]{--ground:#E7E5E0;--plate:#F3F2EE;--recess:#DCDAD3;--ink:#15181B;
  --hair:#C6C3BB;--signal:#D8501B;--live:#1C7A5B;--warn:#B8860B;
  --shadow:rgba(20,22,25,.10);--plate-lip:rgba(255,255,255,.70)}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--hair);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;opacity:.55}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.top{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:30;
  display:flex;align-items:center;gap:18px;padding:0 18px;
  background:var(--plate);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand svg{width:20px;height:20px;flex:0 0 20px}
.brand b{font-family:var(--display);font-weight:600;font-size:14.5px}
.brand span{font-size:12.5px;opacity:.5;padding-left:10px;margin-left:2px;
  border-left:1px solid var(--hair)}
.clock{margin-left:auto;display:flex;align-items:center;gap:14px}
.pill{font-family:var(--mono);font-size:11.5px;padding:5px 10px;border-radius:3px;
  border:1px solid var(--hair);background:var(--ground)}
.pill.live{border-color:color-mix(in srgb,var(--live) 45%,var(--hair))}
.back{font-size:12.5px;text-decoration:none;opacity:.85;border:1px solid var(--hair);
  padding:6px 11px;border-radius:3px;white-space:nowrap;background:var(--ground)}
.back:hover{opacity:1;border-color:var(--signal);color:var(--signal)}
@media(max-width:720px){.brand span{display:none}}

/* ── боковая рейка ─────────────────────────────────────────────────────── */
.rail{position:fixed;top:var(--top);bottom:0;left:0;width:var(--rail);z-index:20;
  background:var(--plate);border-right:1px solid var(--hair);
  padding:14px 10px;overflow-y:auto}
.rail .tag{display:block;padding:0 8px;margin:14px 0 7px}
.nav-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:3px;font-size:14px;opacity:.75}
.nav-i:hover{background:var(--ground);opacity:1}
.nav-i.on{background:var(--ground);opacity:1;font-weight:600;
  box-shadow:inset 2px 0 0 var(--signal)}
.nav-i i{font-style:normal;width:18px;text-align:center;opacity:.7;font-size:15px}
.nav-i em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10.5px;
  padding:1px 6px;border-radius:8px;background:var(--signal);color:#fff}

/* ── рабочая область ───────────────────────────────────────────────────── */
.main{position:fixed;top:var(--top);left:var(--rail);right:0;bottom:0;overflow-y:auto;
  padding:22px 24px 40px}
.head{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
h1{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.022em;margin:0}
.head p{margin:3px 0 0;opacity:.6;font-size:13.5px}

.grid{display:grid;gap:14px}
/* элемент сетки по умолчанию не сжимается уже своего содержимого — из-за этого
   одна широкая карточка растягивала всю страницу на телефоне */
.grid > *,.card{min-width:0}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g21{grid-template-columns:2fr 1fr}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}.g21{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════════
   Стекло. Два уровня материала, чтобы вложенность читалась:
   .card  — толстое стекло над фоном (блик по верхней кромке + глубина),
   .pane  — тонкое стекло внутри карточки (только подкраска и волосяная линия).
   Оттенок задаётся классом t-* и означает состояние, а не украшение.
   ════════════════════════════════════════════════════════════════════════════ */
.card{--tint:transparent;position:relative;border-radius:6px;
  background:color-mix(in srgb, var(--tint) 9%, color-mix(in srgb, var(--plate) 86%, transparent));
  border:1px solid color-mix(in srgb, var(--tint) 24%, var(--hair));
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--plate-lip), 0 12px 28px -20px var(--shadow)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 34%)}
@media (prefers-color-scheme:dark){.card::before{background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 34%)}}
.card > *{position:relative}

.pane{--tint:transparent;border-radius:5px;
  background:color-mix(in srgb, var(--tint) 11%, color-mix(in srgb, var(--ground) 60%, transparent));
  border:1px solid color-mix(in srgb, var(--tint) 30%, var(--hair));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--plate-lip) 60%, transparent)}

.t-live{--tint:var(--live)}
.t-sig {--tint:var(--signal)}
.t-warn{--tint:var(--warn)}
.card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--tint) 22%, var(--hair))}
.card-h b{font-family:var(--display);font-weight:600;font-size:14.5px}
.card-b{padding:16px}
.card-b.tight{padding:0}

/* метрика */
.kpi{padding:16px}
.kpi .tag{display:block;margin-bottom:9px}
.kpi b{font-family:var(--display);font-weight:600;font-size:29px;letter-spacing:-.028em;
  display:block;line-height:1;font-variant-numeric:tabular-nums}
.kpi small{display:block;margin-top:7px;font-size:12px;opacity:.55}
.kpi .up{color:var(--live)}
.kpi .warn{color:var(--warn)}
.kpi .sig{color:var(--signal)}

/* таблица */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.5;font-weight:400;padding:10px 16px;
  border-bottom:1px solid var(--hair)}
td{padding:10px 16px;border-bottom:1px solid color-mix(in srgb,var(--hair) 45%,transparent)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--ground)}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* значки состояния */
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:2px 7px;
  border-radius:3px;border:1px solid var(--hair);white-space:nowrap}
.chip.ok{color:var(--live);border-color:color-mix(in srgb,var(--live) 40%,var(--hair))}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--hair))}
.chip.bad{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 45%,var(--hair))}

/* лента событий */
.feed{max-height:420px;overflow-y:auto}
.ev{display:flex;gap:11px;padding:10px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 45%,transparent);font-size:13px}
.ev:first-child{animation:slide .45s ease}
@keyframes slide{from{opacity:0;transform:translateY(-7px);background:color-mix(in srgb,var(--signal) 9%,transparent)}
                 to{opacity:1;transform:none;background:transparent}}
.ev time{font-family:var(--mono);font-size:11.5px;opacity:.45;flex:0 0 40px}
.ev i{font-style:normal;flex:0 0 16px;text-align:center;opacity:.75}
.ev p{margin:0}
.ev p b{font-weight:600}

/* касса */
.pos{display:grid;grid-template-columns:minmax(320px,1fr) 340px;gap:14px;
  height:calc(100vh - var(--top) - 62px)}
.pos-goods{overflow-y:auto;padding:14px;min-width:0}
/* на узком — товары сверху, корзина снизу, иначе сетка схлопывает витрину в полоску */
@media(max-width:980px){
  .pos{grid-template-columns:1fr;height:auto}
  .pos-goods{max-height:52vh}
  .cart{max-height:none}
}
.goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.good{border:1px solid var(--hair);border-radius:4px;padding:11px;text-align:left;
  background:var(--ground);transition:border-color .12s,transform .1s}
.good:hover{border-color:var(--signal)}
.good:active{transform:scale(.97)}
.good b{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px;line-height:1.25}
.good span{font-family:var(--mono);font-size:12.5px;opacity:.7}
.good em{display:block;font-style:normal;font-size:11px;opacity:.45;margin-top:4px}
.good.out{opacity:.35;pointer-events:none}
.cat-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.cat{font-size:12.5px;padding:5px 11px;border:1px solid var(--hair);border-radius:3px;opacity:.7}
.cat.on{opacity:1;border-color:var(--signal);color:var(--signal)}

.cart{display:flex;flex-direction:column;min-height:0}
.cart-items{flex:1;overflow-y:auto;min-height:0}
.ci{display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 45%,transparent);font-size:13px}
.ci b{flex:1;font-weight:400}
.ci .q{font-family:var(--mono);font-size:12.5px;opacity:.6}
.ci .s{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ci button{opacity:.35;font-size:15px;line-height:1}
.ci button:hover{opacity:1;color:var(--signal)}
.cart-foot{border-top:1px solid var(--hair);padding:14px}
.total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.total b{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.btn{display:block;width:100%;text-align:center;font-family:var(--display);font-weight:600;
  font-size:15px;padding:13px;border-radius:3px;transition:transform .1s}
.btn-signal{background:var(--signal);color:#fff;
  box-shadow:0 1px 0 var(--plate-lip) inset,0 5px 14px var(--shadow)}
.btn-signal:active{transform:translateY(1px)}
.btn-signal:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{border:1px solid var(--hair);margin-top:8px;font-size:13.5px;padding:9px}
.cust{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hair);
  font-size:13px}
.cust select{flex:1;font:inherit;background:var(--ground);color:var(--ink);
  border:1px solid var(--hair);border-radius:3px;padding:5px 7px}

/* всплывашка чека */
.toast{position:fixed;right:22px;bottom:22px;z-index:60;
  background:color-mix(in srgb, var(--live) 13%, var(--plate));
  border:1px solid color-mix(in srgb, var(--live) 30%, var(--hair));
  border-radius:7px;padding:14px 18px;max-width:340px;
  backdrop-filter:saturate(1.35) blur(10px);
  box-shadow:0 1px 0 var(--plate-lip) inset, 0 18px 40px -20px var(--shadow);
  animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.toast b{display:block;font-family:var(--display);font-weight:600;margin-bottom:3px}
.toast p{margin:0;font-size:13px;opacity:.7}
@media(max-width:560px){
  /* 340 пикселей у правого края на экране в 360 уезжают за границу,
     а снизу всплывашка садится ровно на плашку демо */
  .toast{left:12px;right:12px;max-width:none;
    bottom:calc(12px + var(--bz-note-h, 0px))}
}

.bar{height:5px;background:var(--recess);border-radius:3px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--live)}
.bar i.warn{background:var(--warn)}
.bar i.bad{background:var(--signal)}

.empty{padding:34px 16px;text-align:center;opacity:.45;font-size:13.5px}


/* ── лампа: не плоская точка, а настоящая — стекло, оправа, тёплый свет ── */
.lamp{position:relative;width:12px;height:12px;border-radius:50%;flex:0 0 12px;
  display:inline-block;vertical-align:-1px;
  background:radial-gradient(circle at 34% 30%, #7b7f83 0%, #4a4e52 42%, #26292c 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 -1px 2px rgba(0,0,0,.55),
             0 1px 1px rgba(0,0,0,.35)}
.lamp::after{content:"";position:absolute;inset:2px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.6) 0%, transparent 46%),
             radial-gradient(circle at 50% 55%, #3a3d40 0%, #232629 100%)}
.lamp.on{box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.45),
         0 0 8px -1px var(--lamp-c), 0 1px 1px rgba(0,0,0,.3)}
.lamp.on::after{background:
  radial-gradient(circle at 36% 30%, rgba(255,255,255,.85) 0%, transparent 42%),
  radial-gradient(circle at 50% 58%, var(--lamp-c) 0%, var(--lamp-d) 100%)}
.lamp.green{--lamp-c:#4ecb8d;--lamp-d:#1c7a51}
.lamp.amber{--lamp-c:#f2a83c;--lamp-d:#a86a12}
.lamp.red  {--lamp-c:#f06a44;--lamp-d:#a5331a}

/* значки в рейке — тонкий контур вместо квадратиков */
.nav-i svg{width:17px;height:17px;flex:0 0 17px;opacity:.7}
.nav-i.on svg{opacity:1}



/* ── переключатель темы ────────────────────────────────────────────────── */
.icon-btn{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;
  border:1px solid var(--hair);border-radius:3px;background:transparent;
  color:var(--ink);opacity:.7;transition:opacity .12s,border-color .12s}
.icon-btn:hover{opacity:1;border-color:var(--signal);color:var(--signal)}
.icon-btn svg{width:16px;height:16px}

/* ════════════════════════════════════════════════════════════════════════════
   Телефон и узкий планшет.
   Боковая рельса в 216 пикселей на экране в 375 не оставляет содержимому
   ничего: она превращается в горизонтальную ленту вкладок под шапкой,
   а панели и рамки устройств раскрываются во весь экран.
   ════════════════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .rail{position:sticky;top:var(--top);bottom:auto;left:auto;width:auto;height:auto;
    display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:9px 12px;
    border-right:0;border-bottom:1px solid var(--hair);scrollbar-width:none;
    background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(10px)}
  .rail::-webkit-scrollbar{display:none}
  .rail .tag{display:none}                 /* названия групп съедают всю ширину */
  .rail .nav-i{flex:0 0 auto;width:auto;white-space:nowrap;padding:8px 12px;
    border-radius:16px;border:1px solid var(--hair);margin:0}
  .rail .nav-i svg{display:none}
  .rail .nav-i.on{border-color:var(--signal)}
  .rail .nav-i.on::before{display:none}

  .main{position:static;padding:16px 12px 90px;height:auto;overflow:visible}
  /* На широком прокручивается .main, поэтому странице прокрутка запрещена.
     Здесь .main обычный блок — запрет переезжает на окно, и кабинет
     перестаёт листаться совсем: видно только первый экран. */
  body{padding-top:var(--top);overflow:visible}

  .g4{grid-template-columns:1fr 1fr}

  /* таблицы не ужимаются до 375 без потери смысла — пусть едут вбок
     внутри своей карточки, а не растягивают всю страницу */
  .card-b{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-b table{min-width:480px}
  .head{flex-direction:column;align-items:flex-start;gap:12px}
  .head .btn{width:100%;justify-content:center}
  .clock{gap:9px;min-width:0}
  .clock .pill{display:none}               /* статус и часы в шапке телефона не нужны */
}
@media(max-width:520px){
  .g4{grid-template-columns:1fr}
  .brand span{display:none}
}

/* ── карусели в кабинетах ──────────────────────────────────────────────────
   Те же соображения, что и на лендинге: четыре показателя и десяток карточек
   в колонку превращают экран в бесконечную ленту.

   Классы продублированы (.models.models) намеренно: модульные стили кабинетов
   подключаются после этого файла, и при равной специфичности выигрывали они.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:820px){
  .grid.g4,
  .panels.panels,.pls.pls,.srcs.srcs,.hw.hw,.studs.studs,.models.models,.ords.ords,
  .rms.rms,.cls.cls,.tests.tests,.cars.cars,.posts.posts,.tables.tables,.sched.sched{
    display:flex;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:12px;
    margin-inline:-12px;
    padding:2px 12px 12px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .grid.g4::-webkit-scrollbar,.panels::-webkit-scrollbar,.pls::-webkit-scrollbar,
  .srcs::-webkit-scrollbar,.hw::-webkit-scrollbar,.studs::-webkit-scrollbar,
  .models::-webkit-scrollbar,.ords::-webkit-scrollbar,.rms::-webkit-scrollbar,
  .cls::-webkit-scrollbar,.tests::-webkit-scrollbar,.cars::-webkit-scrollbar,
  .posts::-webkit-scrollbar,.tables::-webkit-scrollbar,.sched::-webkit-scrollbar{display:none}

  .grid.g4 > *{flex:0 0 min(66%, 240px);scroll-snap-align:start}
  .panels.panels > *,.pls.pls > *,.srcs.srcs > *,.hw.hw > *,.studs.studs > *,
  .ords.ords > *,.rms.rms > *,.cls.cls > *,.tests.tests > *,.cars.cars > *,
  .posts.posts > *,.tables.tables > *,.sched.sched > *{
    flex:0 0 min(84%, 310px);scroll-snap-align:start}
  .models.models > *{flex:0 0 min(52%, 190px);scroll-snap-align:start}

  .grid.g4::after,.panels::after,.pls::after,.srcs::after,.hw::after,.studs::after,
  .models::after,.ords::after,.rms::after,.cls::after,.tests::after,.cars::after,
  .posts::after,.tables::after,.sched::after{content:"";flex:0 0 1px}
}

/* ── отложенное на полке (магазин у дома) ──────────────────────────────── */
.hlines{list-style:none;margin:0 0 11px;padding:0;font-size:13.5px}
.hlines li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 30%,transparent)}
.hlines li:last-child{border:0}
.hlines em{font-style:normal;font-family:var(--mono);font-size:12.5px;opacity:.65;
  white-space:nowrap}
.hsum{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--hair);padding-top:10px;font-size:14px}
.hsum b{font-family:var(--mono);font-size:16px}
.hnote{margin:9px 0 0;font-family:var(--mono);font-size:11.5px;opacity:.5}