/* HOLZCOM command shell 2026.
   One restrained visual authority loaded after the historical theme layers. */

:root,
:root[data-theme="light"] {
  --cmd-bg: #f3f5f7;
  --cmd-surface: #ffffff;
  --cmd-surface-subtle: #f8fafb;
  --cmd-line: #e1e6ea;
  --cmd-line-strong: #cbd4da;
  --cmd-ink: #172027;
  --cmd-muted: #66737d;
  --cmd-accent: #087f68;
  --cmd-accent-soft: #e8f4f1;
  --cmd-danger: #c93b35;
  --cmd-warning: #ad6b09;
  --cmd-radius: 12px;
  --cmd-shadow: 0 1px 2px rgba(17, 31, 40, .04), 0 10px 30px rgba(17, 31, 40, .045);
  --ff-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body { width: 100%; max-width: 100%; overflow-x: clip; }
body { color: var(--cmd-ink); background: var(--cmd-bg); font-family: var(--ff-sans); }
/* Без !important. Замер каскада: единственный соперник на body::before —
   аврора из redesign.css, а она подключена в index.html РАНЬШЕ этого файла
   (слот 9 против 17) при равной специфичности. Значит правило ниже выигрывает
   порядком, и !important здесь не держал ничего.
   Стережёт scripts/test_css_bez_lishnego_important.cjs. */
body::before { display: none; }

.app,
.app.no-inbox {
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--cmd-bg);
}

.side {
  z-index: 30;
  padding: 12px 10px;
  background: rgba(255, 255, 255, .97);
  border-right: 1px solid var(--cmd-line);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.brand {
  min-height: 54px;
  margin: 0 4px 10px;
  padding: 5px 6px 13px;
  border-bottom: 1px solid var(--cmd-line);
  font-size: 13px;
}
.brand .lg { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.brand .name small { margin-top: 3px; color: #7c878f; font-size: 12px; letter-spacing: .12em; }

.product-accordion { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 10px; }
.product-section { margin: 0; }
.product-section__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 10px;
  color: #4b575f;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
  list-style: none;
}
.product-section__summary::-webkit-details-marker { display: none; }
.product-section__summary:hover { color: var(--cmd-ink); background: #f2f5f6; }
.product-section__summary.active { color: var(--cmd-accent); background: var(--cmd-accent-soft); box-shadow: inset 2px 0 0 var(--cmd-accent); }
.product-section__summary .ico { width: 15px; height: 15px; color: #78858c; transition: transform .14s ease; }
.product-section[open] > .product-section__summary .ico { transform: rotate(180deg); }
.product-section__groups { margin: 2px 0 7px 10px; padding-left: 7px; border-left: 1px solid #d8e1df; }

.sidebar-nav .nav-section-label {
  margin: 12px 9px 4px;
  padding: 9px 2px 0;
  color: #929b9f;
  border-top: 1px solid var(--cmd-line);
  font-size: 12px;
  letter-spacing: .12em;
}
.sidebar-nav .brand + .nav-section-label { margin-top: 0; padding-top: 0; border-top: 0; }
.sidebar-nav .nav-area {
  min-height: 40px;
  gap: 10px;
  padding: 9px 10px;
  color: #4b575f;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .01em;
}
.sidebar-nav .nav-area:hover { color: var(--cmd-ink); background: #f2f5f6; }
.sidebar-nav .nav-group.open > .nav-area,
.sidebar-nav .nav-area.active {
  color: var(--cmd-accent);
  background: var(--cmd-accent-soft);
  box-shadow: inset 2px 0 0 var(--cmd-accent);
}
.sidebar-nav .nav-area-items {
  gap: 2px;
  margin: 3px 0 8px 18px;
  padding: 3px 0 3px 9px;
  border-left: 1px solid #d8e1df;
}
.sidebar-nav .nav-area-items .nav-item {
  min-height: 34px;
  padding: 7px 8px;
  color: #6c777e;
  border-radius: 6px;
  font-size: 12px;
}
.sidebar-nav .nav-area-items .nav-item.active {
  color: var(--cmd-accent);
  background: #eef7f5;
  box-shadow: none;
  font-weight: 700;
}
.side-foot { margin: auto 4px 0; padding: 12px 4px 2px; border-color: var(--cmd-line); }
.ws,
.ws-body,
.today-new-view,
.team-new-view,
.customers-new-view,
.conversations-new-view,
.archi-control-view,
.purchase-new-view{ min-width: 0; max-width: 100%; }

.ws-top {
  min-height: 54px;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--cmd-line);
  box-shadow: none;
  backdrop-filter: blur(16px);
}
.ws-top .crumb { flex: 1 1 260px; color: var(--cmd-muted); }
.ws-top .seg { border-color: var(--cmd-line); border-radius: 8px; background: #f4f6f7; }
.ws-top .seg button { min-height: 34px; border-radius: 6px; }
.ws-top .seg button.on { color: var(--cmd-ink); background: #fff; box-shadow: 0 1px 2px rgba(17,31,40,.08); }
.ws-top .pill { border-radius: 999px; }

/* Порог был 1440px по ОКНУ, а тесно становится в рабочей области: при окне
   1512px под шапку остаётся 1280px, а её содержимое просит 1298px. Разницу
   съедали переключатели периода — «Квартал» и «Год» уезжали под чип и
   обрезались посреди слова, причём полоса прокрутки у .top-segments скрыта,
   так что признака, что там что-то есть, не было вовсе. Замер: контейнер
   378px держал 434px кнопок. Порог поднят до 1600px — сворачиваемся раньше,
   чем начинаем резать. */
@media (max-width: 1600px) {
  /* Тесно в шапке — убираем украшения, а не органы управления.
     «обновлено · 09:44» и подсказка ⌘K занимают 209px и ничего не решают;
     переключатели роли и периода — решают. Раньше при нехватке места
     сворачивались именно они, и «Квартал» с «Годом» уезжали под чип,
     обрезанные посреди слова: контейнер 378px держал 434px кнопок, а полоса
     прокрутки у .top-segments скрыта, так что признака этого не было. */
  .ws-top .ws-kbd { display: none; }
  .ws-top .live { display: none; }
}

/* Замер 18.09 (viewport 1280 и 1440, боковая панель 232px): .top-segments
   держит 527px кнопок при 431px (1280) и 491px (1440) места — «Квартал» и
   «Год» по-прежнему уезжали под чип, порог 1600 по окну этого не лечил.
   До 1500px по окну сворачиваем переключатель РОЛИ до выбранной (ролью
   пользуются редко, периодом — постоянно); наведение или фокус раскрывает
   его обратно, так что переключить роль можно и здесь. */
@media (max-width: 1500px) {
  .ws-top #rolePreset:not(:hover):not(:focus-within) button:not(.on) { display: none; }
}

@media (max-width: 1180px) {
  /* Дальше сжимать нечего — только теперь сворачиваем переключатели до
     выбранного значения. */
  .ws-top #rolePreset button:not(.on),
  .ws-top #periodPreset button:not(.on) { display: none; }
}

.ws-body { gap: 16px; padding: 20px clamp(16px, 2vw, 32px) 48px; overflow-x: clip; }
.ws-body > * { width: 100%; min-width: 0; }

.today-new-view,
.team-new-view,
.customers-new-view,
.conversations-new-view,
.archi-control-view,
.purchase-new-view {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding: 0;
  color: var(--cmd-ink);
  font-family: var(--ff-sans);
}

.today-new-view h1,
.today-new-view h2,
.today-new-view h3,
.team-new-view h1,
.team-new-view h2,
.team-new-view h3,
.customers-new-view h1,
.customers-new-view h2,
.customers-new-view h3,
.conversations-new-view h1,
.conversations-new-view h2,
.conversations-new-view h3,
.archi-control-view h1,
.archi-control-view h2,
.archi-control-view h3,
.purchase-new-view h1,
.purchase-new-view h2,
.purchase-new-view h3,
.purchase-new-view .serif,
.today-new-view .serif {
  font-family: var(--ff-sans) !important;
  letter-spacing: -.02em;
}
.card,
.card-pad-lg,
.ui-card-soft,
.purchase-screen-intro,
.purchase-filterbar,
.purchase-decision-strip{
  min-width: 0;
  color: var(--cmd-ink);
  background: var(--cmd-surface);
  border: 1px solid var(--cmd-line);
  border-radius: var(--cmd-radius);
  box-shadow: none;
}
.card:hover { border-color: var(--cmd-line-strong); transform: none; box-shadow: none; }
.kpi-grid,
.purchase-command-kpis{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 10px !important;
}
.kpi-card,
.home-tile,
.purchase-command-kpi{
  min-width: 0;
  min-height: 124px;
  padding: 16px;
  border: 1px solid var(--cmd-line);
  border-top: 2px solid #72ad9f;
  border-radius: 10px;
  background: var(--cmd-surface);
  box-shadow: none;
}
.kpi-card .big,
.home-tile .ht-value,
.purchase-command-kpi b { font-family: var(--ff-sans); font-size: clamp(26px, 2.1vw, 38px); font-weight: 760; letter-spacing: -.045em; }
.grid-2{ grid-template-columns: minmax(0, 1fr) !important; }
.grid-2 > *{ min-width: 0; }

.today-new-view .tn-contour-shell,
.today-new-view .new-contour-nav,
.archi-control-view .new-contour-nav {
  position: static;
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--cmd-line) !important;
  border-radius: 10px !important;
  background: var(--cmd-surface) !important;
  box-shadow: none !important;
}
.today-new-view > .chips,
.today-new-view .tn-new-contour-subnav {
  gap: 3px;
  margin-bottom: 12px !important;
  padding: 4px;
  border: 1px solid var(--cmd-line);
  border-radius: 9px;
  background: #f4f6f7;
}

.today-new-view .today-new-entity-toolbar,
.archi-control-view .today-new-entity-toolbar {
  margin: 0 0 14px !important;
  padding: 14px !important;
  border-color: var(--cmd-line);
  border-radius: var(--cmd-radius);
}
.today-new-view .tn-filter-grid,
.archi-control-view .tn-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.purchase-new-tabs { padding: 5px; border-color: var(--cmd-line); border-radius: 10px; }
.purchase-new-tabs a { border-radius: 7px; }
.purchase-new-tabs a.active { color: var(--cmd-accent); background: var(--cmd-accent-soft); box-shadow: none; }
.purchase-screen-intro { padding: 16px 18px; border-left: 3px solid var(--cmd-accent); }
.table-wrap,
.dt-wrap,
.purchase-new-view .card:has(table),
.today-new-view .card:has(table),
.archi-control-view .card:has(table){
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
table { max-width: 100%; }
.dt,
.purchase-new-view table { width: 100%; }
.dt th,
.dt td,
.purchase-new-view th,
.purchase-new-view td { padding: 11px 12px; }

@media (max-width: 1280px) {
  .app,
  .app.no-inbox { grid-template-columns: 220px minmax(0, 1fr); }
  .ws-top .live { display: none; }
  .ws-top .pill { max-width: 150px; }
  .ws-top .top-effect-pill { display: none; }
}

@media (max-width: 1100px) {
  .app,
  .app.no-inbox { display: block; }
  .side { position: fixed; inset: auto 0 0; width: 100%; height: auto; padding: 0; border: 0; }
  .ws-body { padding: 14px 12px 82px; }
  .ws-top { padding-inline: 12px; }
}

@media (max-width: 720px) {
  .ws-top { align-items: flex-start; flex-wrap: wrap; }
  .ws-top .crumb { flex-basis: 100%; }
.kpi-grid,
.purchase-command-kpis{ grid-template-columns: 1fr 1fr !important; }
.purchase-screen-intro{ align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
.kpi-grid,
.purchase-command-kpis{ grid-template-columns: 1fr !important; }
}