/* тема — из petala-theme.css */
:root {
  --font-sans-base: "Onest", sans-serif;
  --background: oklch(95.0% 0.008 114.2);
  --foreground: oklch(26.0% 0 0);
  --card: oklch(100.0% 0 0);
  --card-foreground: oklch(26.0% 0 0);
  --popover: oklch(100.0% 0 0);
  --popover-foreground: oklch(26.0% 0 0);
  --primary: oklch(54.0% 0.122 124.6);
  --primary-foreground: oklch(100.0% 0 0);
  --secondary: oklch(96.5% 0.007 115.7);
  --secondary-foreground: oklch(26.0% 0 0);
  --muted: oklch(96.5% 0.007 115.7);
  --muted-foreground: oklch(51.0% 0 0);
  --accent: oklch(96.5% 0.007 115.7);
  --accent-foreground: oklch(26.0% 0 0);
  --destructive: oklch(54.5% 0.179 32.5);
  --success: oklch(43.9% 0.096 121.6);
  --border: oklch(0.0% 0 0 / 0.105);
  --input: oklch(0.0% 0 0 / 0.105);
  --ring: oklch(54.0% 0.122 124.6);
  --chart-1: oklch(86% 0.12 124);
  --chart-2: oklch(74% 0.15 124);
  --chart-3: oklch(60% 0.13 124);
  --chart-4: oklch(47% 0.1 124);
  --chart-5: oklch(40.1% 0.082 123.7);
  --radius: 0.5rem;
  --sidebar: oklch(100.0% 0 0);
  --sidebar-foreground: oklch(32.1% 0 0);
  --sidebar-primary: oklch(54.0% 0.122 124.6);
  --sidebar-primary-foreground: oklch(100.0% 0 0);
  --sidebar-accent: oklch(96.5% 0.007 115.7);
  --sidebar-accent-foreground: oklch(26.0% 0 0);
  --sidebar-border: oklch(0.0% 0 0 / 0.105);
  --sidebar-ring: oklch(54.0% 0.122 124.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --background: oklch(18.7% 0.009 129.0);
  --foreground: oklch(95.8% 0.010 93.6);
  --card: oklch(25.9% 0.015 124.2);
  --card-foreground: oklch(95.8% 0.010 93.6);
  --popover: oklch(30.2% 0.018 125.2);
  --popover-foreground: oklch(95.8% 0.010 93.6);
  --primary: oklch(54.0% 0.122 124.6);
  --primary-foreground: oklch(100.0% 0 0);
  --secondary: oklch(30.2% 0.018 125.2);
  --secondary-foreground: oklch(95.8% 0.010 93.6);
  --muted: oklch(30.2% 0.018 125.2);
  --muted-foreground: oklch(68.5% 0.015 97.5);
  --accent: oklch(30.2% 0.018 125.2);
  --accent-foreground: oklch(95.8% 0.010 93.6);
  --destructive: oklch(75.6% 0.148 33.6);
  --success: oklch(85.6% 0.098 118.4);
  --border: oklch(100.0% 0 0 / 0.1);
  --input: oklch(100.0% 0 0 / 0.15);
  --ring: oklch(85.6% 0.098 118.4);
  --chart-1: oklch(48% 0.1 124);
  --chart-2: oklch(60% 0.12 124);
  --chart-3: oklch(72% 0.14 124);
  --chart-4: oklch(82% 0.13 124);
  --chart-5: oklch(90% 0.1 124);
  --sidebar: oklch(25.9% 0.015 124.2);
  --sidebar-foreground: oklch(89.4% 0.012 96.4);
  --sidebar-primary: oklch(54.0% 0.122 124.6);
  --sidebar-primary-foreground: oklch(100.0% 0 0);
  --sidebar-accent: oklch(30.2% 0.018 125.2);
  --sidebar-accent-foreground: oklch(95.8% 0.010 93.6);
  --sidebar-border: oklch(100.0% 0 0 / 0.1);
  --sidebar-ring: oklch(85.6% 0.098 118.4);
  color-scheme: dark;
  }
  :root:not([data-theme="light"]) .logo-on-light, :root:not([data-theme="light"]) .theme-light-ico { display: none; }
:root:not([data-theme="light"]) .logo-on-dark, :root:not([data-theme="light"]) .theme-dark-ico { display: revert; }
:root:not([data-theme="light"]) .side__foot { --tint: 14%; }
:root:not([data-theme="light"]) .btn--danger { color: var(--background); }
}
:root[data-theme="dark"] {
  --background: oklch(18.7% 0.009 129.0);
  --foreground: oklch(95.8% 0.010 93.6);
  --card: oklch(25.9% 0.015 124.2);
  --card-foreground: oklch(95.8% 0.010 93.6);
  --popover: oklch(30.2% 0.018 125.2);
  --popover-foreground: oklch(95.8% 0.010 93.6);
  --primary: oklch(54.0% 0.122 124.6);
  --primary-foreground: oklch(100.0% 0 0);
  --secondary: oklch(30.2% 0.018 125.2);
  --secondary-foreground: oklch(95.8% 0.010 93.6);
  --muted: oklch(30.2% 0.018 125.2);
  --muted-foreground: oklch(68.5% 0.015 97.5);
  --accent: oklch(30.2% 0.018 125.2);
  --accent-foreground: oklch(95.8% 0.010 93.6);
  --destructive: oklch(75.6% 0.148 33.6);
  --success: oklch(85.6% 0.098 118.4);
  --border: oklch(100.0% 0 0 / 0.1);
  --input: oklch(100.0% 0 0 / 0.15);
  --ring: oklch(85.6% 0.098 118.4);
  --chart-1: oklch(48% 0.1 124);
  --chart-2: oklch(60% 0.12 124);
  --chart-3: oklch(72% 0.14 124);
  --chart-4: oklch(82% 0.13 124);
  --chart-5: oklch(90% 0.1 124);
  --sidebar: oklch(25.9% 0.015 124.2);
  --sidebar-foreground: oklch(89.4% 0.012 96.4);
  --sidebar-primary: oklch(54.0% 0.122 124.6);
  --sidebar-primary-foreground: oklch(100.0% 0 0);
  --sidebar-accent: oklch(30.2% 0.018 125.2);
  --sidebar-accent-foreground: oklch(95.8% 0.010 93.6);
  --sidebar-border: oklch(100.0% 0 0 / 0.1);
  --sidebar-ring: oklch(85.6% 0.098 118.4);
  color-scheme: dark;
}
:root[data-theme="dark"] .logo-on-light, :root[data-theme="dark"] .theme-light-ico { display: none; }
:root[data-theme="dark"] .logo-on-dark, :root[data-theme="dark"] .theme-dark-ico { display: revert; }
:root[data-theme="dark"] .side__foot { --tint: 14%; }
:root[data-theme="dark"] .btn--danger { color: var(--background); }

/* Раскладка: меню-карточка слева с отступом 16 (как ЛК petala.ru), справа шапка, показатели, график, таблица.
   Цвета — переменные темы UI-кита (shadcn-vue), вставляются сборкой из petala-theme.css. */
:root {
  --font: var(--font-sans-base, "Onest", system-ui, sans-serif);
  --r-sm: calc(var(--radius) - 4px); --r-md: calc(var(--radius) - 2px); --r-lg: var(--radius); --r-xl: calc(var(--radius) + 4px);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .06);
  --side: 16rem; --g: 1rem;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--background); color: var(--foreground); }
body { font: 400 0.875rem/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; } /* textarea без этого — моноширинный шрифт браузера */
svg.i { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* скролл как в фильтрах сайта (style.css .filters__groups): тонкий, без дорожки и стрелок; ползунок от цвета текста — в тёмной сам светлый */
/* Chrome на Windows при scrollbar-color рисует стрелки — для него ::-webkit-scrollbar (стрелок нет), стандартные свойства — только Firefox */
@supports not selector(::-webkit-scrollbar) {
  html, .side, .tbl-scroll, .chart__wrap { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--foreground) 20%, transparent) transparent; }
}
:is(html, .side, .tbl-scroll, .chart__wrap)::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; background: transparent; }
:is(html, .side, .tbl-scroll, .chart__wrap)::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 1rem; background: color-mix(in oklch, var(--foreground) 20%, transparent) padding-box; }
:is(html, .side, .tbl-scroll, .chart__wrap)::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--foreground) 35%, transparent); }
:is(html, .side, .tbl-scroll, .chart__wrap)::-webkit-scrollbar-button, :is(html, .side, .tbl-scroll, .chart__wrap)::-webkit-scrollbar-corner { display: none; background: transparent; }

/* ---------- меню ---------- */
.side { position: fixed; z-index: 30; top: var(--g); bottom: var(--g); left: var(--g); width: var(--side); display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem 0.75rem; background: var(--sidebar); color: var(--sidebar-foreground); border: 1px solid var(--sidebar-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow-y: auto; }
.side__logo { display: flex; align-items: center; height: 2.5rem; padding: 0 0.5rem; margin-bottom: 0.75rem; }
.side__logo img { height: 1.75rem; width: auto; }
.logo-on-dark { display: none; }
.side__label { padding: 0.75rem 0.5rem 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.nav { display: flex; flex-direction: column; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: flex; align-items: center; gap: 0.625rem; height: 2.25rem; padding: 0 0.625rem; border-radius: var(--r-md); color: inherit; text-decoration: none; font-weight: 500; transition: background-color .15s, color .15s; }
.nav a:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav a.is-on { background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); }
.nav a .chev { margin-left: auto; opacity: .6; }
.side__end { margin-top: auto; }
/* карточка пользователя — как в ЛК сайта (.cuser): плитка инициалов в оливе, имя, почта, выход (Павлон 12.10) */
.side__foot { --tint: 8%; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem; border: 1px solid var(--sidebar-border); border-radius: 0.75rem; }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--chart-5) var(--tint), transparent); color: var(--chart-5); font-size: 0.875rem; font-weight: 600; line-height: 1; }
.side__who { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--muted-foreground); }
.side__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__who b { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
.side__out { flex: none; margin-left: auto; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: none; color: var(--muted-foreground); cursor: pointer; transition: background-color .15s, color .15s; }
.side__out:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }

/* ---------- основная колонка ---------- */
.main { margin-left: calc(var(--side) + var(--g) * 2); padding: var(--g) var(--g) 2rem 0; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.top { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; }
.top .top__burger { display: none; }
.search { position: relative; flex: 1; max-width: 22rem; }
.search .i { position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%; color: var(--muted-foreground); }
.input { width: 100%; height: 2.25rem; padding: 0 0.75rem 0 2.25rem; border: 1px solid var(--input); border-radius: var(--r-md); background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.input::placeholder { color: var(--muted-foreground); }
.input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent); }
.top__tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.top .top__find, .top .top__cancel { display: none; } /* лупа и «Отмена» — только на телефоне, см. ≤560 */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.25rem; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--r-md); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; color: inherit; text-decoration: none; }
.btn--primary { background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { background: color-mix(in oklch, var(--primary) 90%, black); }
.btn--outline { background: var(--card); border-color: var(--input); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.btn--outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn--ghost { background: none; }
.btn--ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } /* «Загрузить» без файла, «Применить» без дат, «Назад» на первой странице */
.btn--icon { width: 2.25rem; padding: 0; }
.btn .dot { position: absolute; }
.bell { position: relative; }
.bell::after { content: ""; position: absolute; top: 0.5rem; right: 0.5625rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--destructive); box-shadow: 0 0 0 2px var(--card); }
.bell-read .bell::after { display: none; } /* класс на <html> ставит скрипт в <head> до отрисовки — точка не мигает */
.theme-dark-ico { display: none; }

.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; padding-top: 0.5rem; }
.head__crumbs { font-size: 0.8125rem; color: var(--muted-foreground); }
.head h1 { margin: 0.125rem 0 0; font-size: 1.625rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.head__tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-lg); background: var(--muted); }
.tabs button { height: 1.875rem; padding: 0 0.75rem; border: 0; border-radius: var(--r-md); background: none; color: var(--muted-foreground); font-weight: 500; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* ---------- карточки ---------- */
.card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kpi { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.kpi__top { display: flex; align-items: center; gap: 0.625rem; color: var(--muted-foreground); font-weight: 500; margin-bottom: 0.375rem; }
.kpi__ico { width: 2.25rem; height: 2.25rem; border-radius: var(--r-lg); display: grid; place-items: center; flex: none; background: color-mix(in oklch, var(--primary) 11%, transparent); color: var(--success); }
.kpi--accent { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.kpi--accent .kpi__top, .kpi--accent .kpi__note, .kpi--accent .kpi__val small { color: var(--primary-foreground); }
.kpi--accent .kpi__ico { background: color-mix(in oklch, var(--primary-foreground) 16%, transparent); color: var(--primary-foreground); }
.kpi__val { font-size: 1.75rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi__val small { font-size: 1.125rem; font-weight: 500; color: var(--muted-foreground); margin-left: 0.25rem; }
.kpi__note { font-size: 0.75rem; color: var(--muted-foreground); }
.badge { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.375rem; padding: 0 0.5rem; border-radius: var(--r-sm); border: 1px solid transparent; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.badge--soft { background: color-mix(in oklch, var(--primary) 12%, transparent); color: var(--success); }
.badge--sale { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }
.badge--outline { border-color: var(--border); color: var(--muted-foreground); }

.chart { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card__title { margin: 0; font-size: 1rem; font-weight: 600; }
.card__desc { margin: 0.125rem 0 0; color: var(--muted-foreground); }
.chart__big { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.chart__wrap { position: relative; width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .tick { fill: var(--muted-foreground); font: 400 11px var(--font); font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--chart-3); transition: fill .15s; }
.chart .bar.is-max { fill: var(--chart-5); }
.chart .bar:hover { fill: var(--chart-4); }
.tip { position: absolute; pointer-events: none; padding: 0.375rem 0.625rem; border-radius: var(--r-md); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); box-shadow: 0 4px 12px rgb(0 0 0 / .12); font-size: 0.75rem; white-space: nowrap; translate: -50% -110%; }
.tip b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- таблица ---------- */
.tbl-card { min-width: 0; }
.tbl-card .card__head { padding: 1.5rem 1.5rem 1rem; }
.tbl-scroll { overflow-x: auto; }
table { width: 100%; min-width: 46rem; border-collapse: collapse; }
th { height: 2.5rem; padding: 0 0.75rem; text-align: left; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; border-bottom: 1px solid var(--border); }
td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: color-mix(in oklch, var(--muted) 60%, transparent); }
tbody tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child { padding-left: 1.5rem; width: 2.75rem; }
th:last-child, td:last-child { padding-right: 1.5rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; } /* цифры одной ширины — только столбцам сумм и количеств (разряды встают друг под другом); на всей таблице телефоны и даты читались разрядкой (Павлон 12.10) */
.prod { display: flex; align-items: center; gap: 0.75rem; }
.prod img { width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); object-fit: cover; background: var(--muted); }
.prod b { font-weight: 500; }
.muted { color: var(--muted-foreground); }
.old { color: var(--muted-foreground); text-decoration: line-through; }
.chk { appearance: none; width: 1rem; height: 1rem; margin: 0; border: 1px solid var(--input); border-radius: 4px; background: var(--card); cursor: pointer; display: grid; place-items: center; vertical-align: middle; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.chk:checked { background: var(--primary); border-color: var(--primary); }
.chk:checked::after { content: ""; width: 0.5rem; height: 0.3rem; border: 2px solid var(--primary-foreground); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; }
.row-more { color: var(--muted-foreground); }

.foot { color: var(--muted-foreground); font-size: 0.75rem; }

/* ---------- узкие экраны ---------- */
.scrim { display: none; }
@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .side { translate: calc(-100% - 2rem) 0; transition: translate .25s cubic-bezier(.3,1,.3,1); }
  body.menu-open .side { translate: 0 0; }
  body.menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / .35); }
  .main { margin-left: 0; padding: var(--g) var(--g) 2rem; }
  .top .top__burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  /* поиск шапки на телефоне — за лупой: она раскрывает поле на всю шапку, «Отмена» сворачивает.
     Только .top > .search: прежнее «.search» прятало и поиск разделов, и поиск в формах */
  .top > .search { display: none; }
  .top .top__find { display: inline-flex; }
  .find-open .top > :not(.search, .top__cancel) { display: none; }
  .find-open .top > .search { display: block; max-width: none; }
  .find-open .top .top__cancel { display: inline-flex; padding: 0 0.75rem; }
  .head h1 { font-size: 1.375rem; }
  .head__tools { margin-left: 0; }
  .kpi, .chart { padding: 1.25rem; }
  .tbl-card .card__head { padding: 1.25rem 1.25rem 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- подменю (Товарный учёт, Настройки) ---------- */
.nav__grp > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.625rem; width: 100%; height: 2.25rem; padding: 0 0.625rem; border-radius: var(--r-md); font-weight: 500; cursor: pointer; transition: background-color .15s; }
.nav__grp > button:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav__grp > button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nav__grp > button .chev { margin-left: auto; opacity: .6; transition: rotate .2s; }
.nav__grp.is-open > button .chev { rotate: 180deg; }
.nav__grp.has-on > button { color: var(--foreground); }
.nav__sub { display: none; list-style: none; margin: 0.125rem 0 0.25rem 1.125rem; padding: 0 0 0 0.75rem; border-left: 1px solid var(--sidebar-border); flex-direction: column; gap: 0.125rem; }
.nav__grp.is-open .nav__sub { display: flex; }
.nav__sub a { height: auto; min-height: 2rem; padding: 0.375rem 0.625rem; font-weight: 400; line-height: 1.3; white-space: normal; } /* «Родительские категории товаров» — в две строки */
.side { overflow-y: auto; }

/* ---------- страница-список ---------- */
.list { display: flex; flex-direction: column; min-width: 0; }
.tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.tbar .search { max-width: none; flex: 1 1 16rem; }
.tbar__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.pick { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.75rem; border: 1px dashed var(--input); border-radius: var(--r-md); background: none; color: var(--muted-foreground); font-weight: 500; cursor: pointer; white-space: nowrap; }
.pick:hover { background: var(--accent); color: var(--accent-foreground); }
.pick .i { width: 0.875rem; height: 0.875rem; }
th .sort { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 -0.25rem; padding: 0.25rem; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
th .sort:hover { background: var(--accent); color: var(--accent-foreground); }
th .sort .i { width: 0.75rem; height: 0.75rem; opacity: .55; flex: none; }
th[aria-sort="ascending"] .sort, th[aria-sort="descending"] .sort { color: var(--foreground); }
th[aria-sort="ascending"] .sort .i, th[aria-sort="descending"] .sort .i { opacity: 1; }
.tbl-scroll { position: relative; } /* точка отсчёта для .sr: иначе подпись «Действия» выпадает из прокрутки и раздвигает страницу */
.thumb { width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); object-fit: cover; background: var(--muted); display: block; }
.swatch { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 50%; vertical-align: -0.125rem; margin-right: 0.5rem; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.wrap-cell { white-space: normal; min-width: 14rem; max-width: 24rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.8125rem; }
.pager__btns { display: flex; gap: 0.25rem; }
.pager__btns .btn { height: 2rem; min-width: 2rem; padding: 0 0.625rem; }
.pager__btns .is-on { background: var(--card); border-color: var(--input); color: var(--foreground); box-shadow: var(--shadow-sm); }
.badge--ok { background: color-mix(in oklch, var(--primary) 12%, transparent); color: var(--success); }
.badge--wait { background: var(--muted); color: var(--foreground); border-color: var(--border); }
.badge--bad { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }
.link { color: var(--success); font-weight: 500; text-decoration: none; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.8125rem; }

/* ---------- вкладки страницы (Накладные, Отчёты) ---------- */
.ptabs { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: var(--r-lg); background: var(--muted); align-self: flex-start; max-width: 100%; }
.ptabs button { flex: none; height: 2rem; padding: 0 0.875rem; border: 0; border-radius: var(--r-md); background: none; color: var(--muted-foreground); font-weight: 500; cursor: pointer; white-space: nowrap; }
.ptabs button[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.panel[hidden] { display: none; }
.panel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ---------- плитки сумм ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); /* 15.5: влезает «2 182 129 727,00 ₽» */ gap: 1rem; }
.tile { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tile__label { color: var(--muted-foreground); font-weight: 500; }
.tile__val { font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile__val small { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); margin-left: 0.125rem; }
.tile--neg .tile__val { color: var(--destructive); }
.tile--accent { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.tile--accent .tile__label, .tile--accent .tile__val small { color: var(--primary-foreground); }

/* ---------- роли ---------- */
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); /* 20: «Редактировать» + «Удалить» (~230 px) + поля 48 */ gap: 1rem; }
.role { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.role__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.role__name { margin: 0; font-size: 1rem; font-weight: 600; }
.role__perms { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.role__perms li { display: flex; justify-content: space-between; gap: 0.75rem; }
.role__perms span:first-child { color: var(--muted-foreground); min-width: 0; }
.role__perms span:last-child { white-space: nowrap; text-align: right; }
.role__foot { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.25rem; }

/* ---------- форма настроек ---------- */
.form { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; max-width: 40rem; }
.field { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); }
.field b { display: block; font-weight: 500; }
.field p { margin: 0.125rem 0 0; color: var(--muted-foreground); }
.switch { flex: none; position: relative; width: 2.25rem; height: 1.25rem; margin: 0; appearance: none; border-radius: 1rem; background: var(--input); cursor: pointer; transition: background-color .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: translate .15s; }
.switch:checked { background: var(--primary); }
.switch:checked::after { translate: 1rem 0; }
.form__foot { display: flex; justify-content: flex-end; }

.note { margin: 0; color: var(--muted-foreground); font-size: 0.75rem; }

@media (max-width: 560px) {
  .tbar .search { display: block; } /* в base.css поиск шапки на телефоне скрыт — поиск раздела оставляем */
  .tbar, .pager { padding-inline: 1.25rem; }
  .tbar__btns { margin-left: 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); } /* суммы до 2 182 129 727,00 ₽ в две колонки не влезают */
  .tile__val { font-size: 1.125rem; }
}

/* ---------- сворачивание меню (как в ЛК: 4.5rem, знак вместо логотипа, подписи — подсказкой) ---------- */
.side__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; padding-left: 0.5rem; }
.side .side__logo { display: block; height: auto; margin: 0; padding: 0; overflow: hidden; flex: none; }
.side .side__logo img { width: 8.5rem; max-width: none; height: auto; vertical-align: top; } /* display не задавать: им прячется логотип второй темы */
.side__fold { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: none; color: var(--muted-foreground); cursor: pointer; }
.side__fold:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.fold-open { display: none; }
@media (max-width: 960px) { .side__fold { display: none; } }
@media (min-width: 961px) {
  .side { transition: width .25s cubic-bezier(.3, 1, .3, 1), padding .25s; }
  .main { transition: margin-left .25s cubic-bezier(.3, 1, .3, 1); }
  :root.side-mini { --side: 4.5rem; }
  .side-mini .side { padding: 1rem 0.625rem; overflow-x: hidden; }
  .side-mini .side__top { flex-direction: column; gap: 0.75rem; padding: 0; }
  .side-mini .side .side__logo { width: 1.875rem; } /* лист — левые 27 из 136 px, буква «A» с 32.7: режем по 30 */
  .side-mini .fold-close { display: none; }
  .side-mini .fold-open { display: block; }
  .side-mini .nav__t, .side-mini .side__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-mini .chev { display: none; }
  .side-mini .nav a, .side-mini .nav__grp > button { justify-content: center; gap: 0; height: 2.5rem; padding: 0; }
  .side-mini .nav__grp .nav__sub { display: none; }
  .side-mini .nav__grp.has-on > button { background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); } /* открытая страница внутри свёрнутой группы */
  .side-mini .side__label { height: 1px; margin: 0.75rem 0.5rem; padding: 0; overflow: hidden; background: var(--sidebar-border); color: transparent; font-size: 0; }
  .side-mini .side__foot { flex-direction: column; gap: 0.25rem; padding: 0.5rem 0 0; border: 0; } /* как в ЛК: инициалы и выход столбиком под луной */
  .side-mini .side__out { margin: 0; }
}

/* ---------- строк на странице: 20 / 40 / 60 ---------- */
.pager__info { margin-right: auto; }
.pager__size { display: flex; align-items: center; gap: 0.5rem; }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-md); background: var(--muted); }
.seg button { min-width: 2.25rem; height: 1.75rem; padding: 0 0.5rem; border: 0; border-radius: calc(var(--r-md) - 2px); background: none; color: var(--muted-foreground); font: inherit; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.pager__btns .gap { display: inline-grid; place-items: center; min-width: 1.5rem; color: var(--muted-foreground); }

/* ---------- формы «Добавить …» — выезжающая панель справа (shadcn Sheet) ---------- */
[hidden] { display: none !important; } /* .fld, .btn и др. задают display — без этого hidden их не прячет */
.sheet { position: fixed; inset: 0 0 0 auto; width: min(36rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border); background: var(--card); color: var(--card-foreground); box-shadow: -8px 0 32px rgb(0 0 0 / .12); }
.sheet[open] { display: flex; animation: sheet-in .22s cubic-bezier(.2, .8, .2, 1); }
.sheet::backdrop { background: rgb(0 0 0 / .35); animation: fade-in .22s; }
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } }
.sheet h2, .sheet p { margin: 0; } /* общего сброса нет — браузерные поля у p/h2 отодвигали «Заполните поле» на 20 px */
.sheet__form { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.sheet__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border); }
.sheet__head h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.sheet__head p { margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.sheet__head .btn { margin: -0.25rem -0.5rem 0 auto; flex: none; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 1.5rem; align-content: start; }
.sheet__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }

.fs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.fs__t { grid-column: 1 / -1; padding: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
.fld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; align-content: start; min-width: 0; } /* без колонки minmax(0,1fr) длинный выбор («Выбрано: 3 — …») распирал поле за панель */
.fld--wide { grid-column: 1 / -1; }
.fld__l { font-weight: 500; }
.fld__l .req { margin-left: 0.125rem; color: var(--destructive); }
.fld__hint { color: var(--muted-foreground); font-size: 0.8125rem; }
.fld__err { color: var(--destructive); font-size: 0.8125rem; }
.fld .input { padding-left: 0.75rem; }
.fld textarea.input { height: auto; min-height: 5.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; resize: vertical; }
.fld.is-err .input, .fld.is-err .drop { border-color: var(--destructive); }
.fld.is-err .input:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent); }

/* число с единицей: «₽», «шт.», «см» внутри поля справа */
.affix { position: relative; }
.affix .input { padding-right: 2.75rem; font-variant-numeric: tabular-nums; }
.affix__u { position: absolute; right: 0.75rem; top: 50%; translate: 0 -50%; color: var(--muted-foreground); pointer-events: none; }

/* свой выпадающий список (у <select> раскрытое окно стилями не красится) */
.sel { position: relative; }
.sel__btn { display: flex; align-items: center; gap: 0.5rem; text-align: left; cursor: pointer; }
.sel__v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; }
.sel__v.is-ph { color: var(--muted-foreground); }
.sel__chev { color: var(--muted-foreground); transition: rotate .15s; }
.sel__btn[aria-expanded="true"] .sel__chev { rotate: 180deg; }
.sel__pop, .dp__pop, .items__found { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 0.25rem); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
:is(.sel, .dp).is-up > :is(.sel__pop, .dp__pop) { top: auto; bottom: calc(100% + 0.25rem); }
.sel__list { max-height: 15rem; overflow-y: auto; padding: 0.25rem; margin: 0; list-style: none; }
.sel__search { position: relative; display: block; padding: 0.375rem 0.375rem 0; }
.sel__search .i { position: absolute; left: 1rem; top: calc(50% + 0.1875rem); translate: 0 -50%; color: var(--muted-foreground); }
.sel__search input { width: 100%; height: 2rem; padding: 0 0.5rem 0 2.125rem; border: 1px solid var(--input); border-radius: calc(var(--r-md) - 2px); background: var(--card); color: inherit; font: inherit; }
.sel__search input:focus { outline: none; border-color: var(--ring); }
.sel__none { color: var(--muted-foreground); cursor: default !important; background: none !important; }
.sel--multi .sel__list li[role=option]::before { content: ""; flex: none; width: 1rem; height: 1rem; border: 1px solid var(--input); border-radius: 4px; background: var(--card); }
.sel--multi .sel__list li[aria-selected="true"]::before { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat; border-color: var(--primary); }
.sel--multi .sel__list li[aria-selected="true"]::after { display: none; }
.sel__list li, .items__found li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.5rem; border-radius: calc(var(--r-md) - 2px); cursor: pointer; }
.sel__list li:hover, .sel__list li.is-act, .items__found li[data-id]:hover, .items__found li.is-act { background: var(--accent); color: var(--accent-foreground); }
.sel__list li[aria-selected="true"] { font-weight: 600; }
.sel__list li[aria-selected="true"]::after { content: ""; margin-left: auto; width: 0.875rem; height: 0.5rem; border: solid currentColor; border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -2px; }

/* фото: зона перетаскивания */
.drop { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed var(--input); border-radius: var(--r-lg); background: var(--muted); cursor: pointer; transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.is-over { border-color: var(--ring); background: color-mix(in oklch, var(--primary) 6%, var(--muted)); }
.drop__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: var(--r-md); background: var(--card); color: var(--muted-foreground); overflow: hidden; }
.drop__ico img { width: 100%; height: 100%; object-fit: cover; }
.drop__t b { display: block; font-weight: 500; }
.drop__t span { color: var(--muted-foreground); font-size: 0.8125rem; }
input[type="file"].sr { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* уведомление после сохранения */
.toast { position: fixed; z-index: 60; right: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: 0.625rem; max-width: min(26rem, calc(100vw - 2rem)); padding: 0.875rem 1rem; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgb(0 0 0 / .14); animation: toast-in .2s ease-out; }
.toast .i { color: var(--success); }
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; translate: 0 0.5rem; } }

/* короткие справочники — окно по центру вместо панели */
.sheet--modal { inset: 0; margin: auto; width: min(30rem, calc(100vw - 2rem)); height: fit-content; /* при inset:0 авто-высота растягивает окно на весь экран */ max-height: calc(100dvh - 2rem); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 16px 48px rgb(0 0 0 / .2); overflow: visible; }
.sheet--modal[open] { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; scale: .97; } }
.sheet--modal .sheet__body { overflow: visible; }
.sheet--modal .sheet__foot { border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* пароль: «глаз»; HEX: образец цвета слева */
.affix__btn { position: absolute; right: 0.25rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: calc(var(--r-md) - 2px); background: none; color: var(--muted-foreground); cursor: pointer; }
.affix__btn:hover, .affix__btn[aria-pressed="true"] { color: var(--foreground); background: var(--accent); }
.affix--l .input { padding-left: 2.5rem; padding-right: 0.75rem; }
.hex-sw { position: absolute; left: 0.625rem; top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem; border-radius: 4px; border: 1px solid var(--input); background: repeating-conic-gradient(var(--muted) 0 25%, var(--card) 0 50%) 0 0 / 0.5rem 0.5rem; }
.fld .input:disabled { opacity: .5; cursor: not-allowed; }
.fld input::-ms-reveal { display: none; } /* Edge рисует свой «глаз» — у нас свой */

/* переключатель с подписью */
.fld--check { align-self: center; }
.check { display: flex; align-items: center; gap: 0.625rem; font-weight: 500; cursor: pointer; min-height: 2.25rem; }

/* варианты кнопками: «Процент / Рубли», пол */
/* во всю ширину поля, варианты поровну — как соседние поля; inline-flex с nowrap вылезал из колонки («Не указан / Мужской / Женский») */
.segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--muted); min-width: 0; }
.segs label { position: relative; min-width: 0; }
.segs input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segs span { display: block; padding: 0 0.375rem; text-align: center; overflow: hidden; text-overflow: ellipsis; line-height: 1.875rem; border-radius: calc(var(--r-md) - 2px); color: var(--muted-foreground); font-weight: 500; white-space: nowrap; }
.segs input:checked + span { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.segs input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 1px; }

/* календарь */
.dp { position: relative; }
.dp__ico { color: var(--muted-foreground); }
.perms th:first-child, .perms td:first-child { padding-left: 0.75rem; }
.dp__pop { right: auto; width: 18.5rem; padding: 0.75rem; }
.dp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.dp__head b { font-weight: 600; }
.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp__wd { text-align: center; font-size: 0.75rem; color: var(--muted-foreground); padding: 0.25rem 0; }
.dp__d { height: 2.25rem; border: 0; border-radius: calc(var(--r-md) - 2px); background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.dp__d:hover { background: var(--accent); }
.dp__d.is-out { color: var(--muted-foreground); opacity: .55; }
.dp__d.is-today { box-shadow: inset 0 0 0 1px var(--ring); }
.dp__d.is-on { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.dp__foot { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.dp__time { display: grid; gap: 0.25rem; flex: 1; font-size: 0.8125rem; color: var(--muted-foreground); }
.dp__time .input { padding-left: 0.75rem; color: var(--foreground); }
.dp__time .input.is-bad { border-color: var(--destructive); }

/* товары в форме */
.items { position: relative; display: grid; gap: 0.5rem; }
.fld .items .search { display: block; max-width: none; } /* на узком экране base.css прячет .search шапки — этот не трогать */
.fld .items .search .input { padding-left: 2.25rem; }
.items__found { top: 2.5rem; max-height: 20rem; overflow-y: auto; padding: 0.25rem; margin: 0; list-style: none; }
.items__found li { display: flex; align-items: center; gap: 0.625rem; }
.items__found .thumb { width: 1.75rem; height: 1.75rem; }
.items__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.items__rows { display: grid; }
.irow { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 4.5rem 6rem 2.25rem; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.irow__n { min-width: 0; }
.irow__n b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow__n .muted { font-size: 0.8125rem; }
.fld .irow__q { height: 2rem; padding: 0 0.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.irow__s { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.items__empty { padding: 1rem; border: 1px dashed var(--input); border-radius: var(--r-md); text-align: center; color: var(--muted-foreground); font-size: 0.8125rem; }
.items__empty[hidden] { display: none; }
.items__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.25rem; color: var(--muted-foreground); }
.items__total b { color: var(--foreground); font-size: 1rem; font-variant-numeric: tabular-nums; }
.items__total[hidden] { display: none; }

/* итог формы */
.calc { display: flex; align-items: center; height: 2.25rem; padding: 0 0.75rem; border-radius: var(--r-md); background: var(--muted); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* права роли */
.perms { border: 1px solid var(--border); border-radius: var(--r-lg); }
.perms table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.perms th:first-child { width: 36%; }
.perms th { white-space: normal; line-height: 1.2; }
.perms th, .perms td { padding: 0.5rem 0.375rem; border-bottom: 1px solid var(--border); text-align: center; }
.perms th:first-child, .perms td:first-child { text-align: left; }
.perms tbody tr:last-child td { border-bottom: 0; }
.perms th { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); vertical-align: bottom; }
.perm-col { display: grid; justify-items: center; gap: 0.375rem; cursor: pointer; }
.perms .chk { margin: 0 auto; }
.perm-short { display: none; }
@media (max-width: 560px) { .perm-full { display: none; } .perm-short { display: inline; } }

@media (max-width: 560px) {
  .irow { grid-template-columns: 2.5rem minmax(0, 1fr) 4rem 2.25rem; }
  .irow__s { grid-column: 2 / 4; grid-row: 2; text-align: left; }
  .sheet { width: 100vw; border-left: 0; }
  .sheet__head, .sheet__body, .sheet__foot { padding-left: 1rem; padding-right: 1rem; }
  .fs { grid-template-columns: minmax(0, 1fr); }
  .sheet__foot .btn { flex: 1; }
  .toast { left: 1rem; right: 1rem; bottom: 1rem; }
}

/* ---------- меню строки «⋯» (shadcn DropdownMenu) и подтверждение удаления (AlertDialog) ---------- */
.rmenu { position: fixed; z-index: 50; min-width: 10rem; padding: 0.25rem; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgb(0 0 0 / .12); animation: modal-in .12s ease-out; }
.rmenu[hidden] { display: none; }
.rmenu button { display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 2rem; padding: 0 0.5rem; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.rmenu button .i { color: var(--muted-foreground); }
.rmenu button:is(:hover, :focus-visible) { background: var(--accent); color: var(--accent-foreground); outline: none; }
.rmenu .is-danger, .rmenu .is-danger .i, .rmenu .is-danger:is(:hover, :focus-visible) { color: var(--destructive); }
.rmenu .is-danger:is(:hover, :focus-visible) { background: color-mix(in oklch, var(--destructive) 10%, transparent); }
.row-more[aria-expanded="true"] { background: var(--accent); color: var(--accent-foreground); }
tr.is-gone, .role.is-gone { opacity: 0; transition: opacity .18s; }
.tr-empty td { padding: 2rem 1rem; text-align: center; color: var(--muted-foreground); }
.confirm { width: min(26rem, calc(100vw - 2rem)); }
.confirm[open] { flex-direction: column; } /* у панели внутри form, тут прямо дети — иначе текст и кнопки встают в ряд */
.confirm__body { padding: 1.5rem 1.5rem 1.25rem; }
.confirm__body h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.confirm__body p { margin-top: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }
.confirm .sheet__foot { padding-top: 0; border-top: 0; }
.btn--danger { background: var(--destructive); color: #fff; }
.btn--danger:hover { background: color-mix(in oklch, var(--destructive) 88%, black); }
@media (prefers-reduced-motion: reduce) { .rmenu { animation: none; } tr.is-gone, .role.is-gone { transition: none; } }

/* ---------- шаг (4): всплывашки фильтров, календарь диапазона, «ничего не найдено», импорт ---------- */
.fpop { position: fixed; z-index: 50; max-height: calc(100dvh - 1rem); overflow-y: auto; padding: 0.75rem; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgb(0 0 0 / .12); animation: modal-in .12s ease-out; }
.fpop[hidden] { display: none; }
.pick[aria-expanded="true"], .pick.is-set { border-style: solid; color: var(--foreground); }
.pick__v { padding: 0.125rem 0.5rem; margin-left: 0.125rem; border-radius: var(--r-sm); background: var(--secondary); color: var(--secondary-foreground); font-size: 0.8125rem; font-weight: 500; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.pick__v::before { content: ""; display: inline-block; width: 1px; height: 0.875rem; margin: 0 0.625rem 0 -0.75rem; vertical-align: -0.125rem; background: var(--border); }
/* календарь: слева быстрые варианты, справа месяц */
.dr { display: flex; gap: 0.75rem; }
.dr__pre { display: flex; flex-direction: column; gap: 0.125rem; min-width: 10rem; padding-right: 0.75rem; border-right: 1px solid var(--border); }
.dr__pre button { height: 2rem; padding: 0 0.625rem; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; font-size: 0.875rem; text-align: left; white-space: nowrap; cursor: pointer; }
.dr__pre button:is(:hover, :focus-visible) { background: var(--accent); color: var(--accent-foreground); outline: none; }
.dr__main { width: 17.5rem; }
.dr .dp__d.is-in { background: color-mix(in oklch, var(--primary) 14%, transparent); border-radius: 0; }
.dr .dp__d.is-on { background: var(--primary); color: var(--primary-foreground); border-radius: calc(var(--r-md) - 2px); }
.dr__foot { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.dr__sum { font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.dr__foot > div { display: flex; justify-content: flex-end; gap: 0.5rem; }
@media (max-width: 560px) {
  .dr { flex-direction: column; }
  .dr__main { width: auto; }
  .fpop:has(.dr) { width: calc(100vw - 1rem); }
  .dr__pre { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 0 0 0.75rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .dr__pre button { border: 1px solid var(--border); border-radius: 999px; height: 1.875rem; font-size: 0.8125rem; }
}
/* список с галочками («Категория», «Филиал») */
.fs-pop { width: 16rem; }
.fs-pop .sel__search { margin-bottom: 0.5rem; }
.fs-pop__list { max-height: 18rem; overflow-y: auto; margin: 0 -0.25rem; padding: 0; list-style: none; }
.fs-pop__list label { display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0 0.5rem; border-radius: var(--r-sm); cursor: pointer; font-size: 0.875rem; }
.fs-pop__list label:hover { background: var(--accent); }
.fs-pop__list label > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-pop__n { color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.fs-pop__foot { display: flex; justify-content: flex-end; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.tr-none td { padding: 2rem 1rem; text-align: center; color: var(--muted-foreground); }
.link-btn { padding: 0; border: 0; background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* импорт */
.imp__steps { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: st; }
.imp__steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; counter-increment: st; font-size: 0.875rem; }
.imp__steps li > span { flex: 1 1 14rem; display: flex; gap: 0.625rem; }
.imp__steps li > span::before { content: counter(st); flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--secondary); color: var(--secondary-foreground); font-size: 0.75rem; font-weight: 600; }
.imp__ok { margin-top: 0.5rem !important; color: var(--success); font-size: 0.8125rem; }
.imp .sheet__body { overflow: visible; }
.fs-pop__empty { max-width: 16rem; font-size: 0.875rem; color: var(--muted-foreground); }
.dr .dp__grid { gap: 2px 0; } /* диапазон — сплошной полосой, без щелей между днями */

/* ---------- шаг (5): уведомления, верхний поиск, «Обновляем…» ---------- */
.fpop:has(.ntf) { width: 22rem; max-width: calc(100vw - 1rem); padding: 0.5rem; }
.ntf__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.375rem 0.5rem 0.625rem; font-size: 0.875rem; }
.ntf__head .link-btn { font-size: 0.8125rem; color: var(--muted-foreground); }
.ntf__head .link-btn:hover { color: var(--foreground); }
.ntf__list { margin: 0; padding: 0; list-style: none; }
.ntf__it { position: relative; display: flex; gap: 0.75rem; padding: 0.625rem 0.5rem; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.ntf__it:hover, .ntf__it:focus-visible { background: var(--accent); }
.ntf__ic { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-md); background: var(--muted); color: var(--muted-foreground); }
.ntf__ic .i { width: 1rem; height: 1rem; }
.ntf__txt { display: grid; gap: 0.125rem; min-width: 0; font-size: 0.8125rem; line-height: 1.35; }
.ntf__txt b { font-size: 0.875rem; font-weight: 500; }
.ntf__txt span { color: var(--muted-foreground); }
.ntf__txt small { color: var(--muted-foreground); font-size: 0.75rem; }
.ntf__it.is-new .ntf__txt b { font-weight: 600; }
.ntf__it.is-new::after { content: ""; position: absolute; top: 1rem; right: 0.5rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--destructive); }
.ntf__it.is-new .ntf__txt { padding-right: 1rem; }

.qpop { position: fixed; z-index: 50; max-height: min(26rem, calc(100dvh - 5rem)); overflow-y: auto; padding: 0.375rem; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.qpop[hidden] { display: none; }
.qpop__g { padding: 0.5rem 0.5rem 0.25rem; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; }
.qpop__it { display: grid; gap: 0.0625rem; padding: 0.4375rem 0.5rem; border-radius: var(--r-sm); color: inherit; text-decoration: none; font-size: 0.875rem; }
.qpop__it span, .qpop__it small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qpop__it small { color: var(--muted-foreground); font-size: 0.75rem; }
.qpop__it:hover, .qpop__it.is-active { background: var(--accent); color: var(--accent-foreground); }
.qpop__none { margin: 0; padding: 0.75rem 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }

.btn.is-busy .i { animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy .i { animation: none; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Petala (petala/build-crm.mjs): логотип по высоте, свёрнутая панель — знак целиком */
.side .side__logo img { width: auto; height: 2.25rem; }
@media (min-width: 961px) { .side-mini .side .side__logo { width: 2.25rem; margin-inline: auto; } } /* та же граница, что у свёрнутой панели в теме */