/* AZB_IT_GotovnostKUborke — стили. Один файл, без сборки. Палитра: светлая тема винная (бордо), тёмная тема — благородное золото (осветлённый винный уходит в розовый/пастель — запрещено правилом AZB Core). На золотой ЗАЛИВКЕ текст всегда тёмный (--on-accent), белый по золоту не читается. */ @font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap; src: local('Inter'), url('../assets/fonts/InterVariable.woff2') format('woff2'); } :root { --ease: cubic-bezier(.22,.61,.36,1); --ease-inout: cubic-bezier(.6,0,.35,1); --dur-1: .16s; --dur-2: .24s; --dur-3: .38s; --radius-sm: 9px; --radius: 13px; --radius-lg: 18px; --topbar-h: 60px; } /* ── Светлая тема: винная (бордо) ── */ [data-theme="light"] { color-scheme: light; --bg: #F0F2F5; --surface: rgba(255,255,255,.72); --surface-2: rgba(255,255,255,.55); --pop-bg: #FBFCFE; --text: #1A1A2E; --text-2: #565F6D; --muted: #656C7A; --border: rgba(26,26,46,.10); --border-soft: rgba(26,26,46,.06); --border-strong: rgba(26,26,46,.18); --accent: #8B1F3F; --accent-2: #C2456C; --accent-ink: #8B1F3F; --on-accent: #FFFFFF; --accent-soft: rgba(139,31,63,.10); --accent-glow: rgba(139,31,63,.26); /* --ok затемнён относительно чистого #15803D — на тонированной плашке (--ok-bg) исходный тон давал ~4.45:1, ниже порога WCAG AA 4.5:1; посчитано формулой после композитинга слоёв. */ --ok: #0E6B31; --ok-bg: rgba(34,197,94,.14); --ok-border: rgba(34,197,94,.42); --err: #B91C1C; --err-bg: rgba(239,68,68,.13); --err-border: rgba(239,68,68,.42); /* --warn — намеренно НЕ тот же оттенок, что золотой --accent тёмной темы (там hue 35-45°): сдвинут к 29° (оранжевее), иначе бейдж «1С недоступна» в тёмной теме сливался бы с обычным акцентом и переставал читаться как предупреждение. Посчитан формулой (5.77:1). */ --warn: #934A06; --warn-bg: rgba(245,158,11,.16); --warn-border: rgba(245,158,11,.42); --thead-solid: #FFFFFF; --chip-bg: rgba(255,255,255,.62); /* Опаковые (без alpha) варианты --tint-last/--tint-prev для sticky-шапки таблицы — color-mix() с полупрозрачным цветом даёт полупрозрачный РЕЗУЛЬТАТ (альфа интерполируется линейно, а не композитится «поверх»), из-за чего строки таблицы просвечивали сквозь закреплённую шапку при скролле. Здесь — тот же тон, но заранее сведённый к сплошному hex-цвету (посчитано композитингом, не наглаз). */ --thead-tint-last: #F9F3F4; --thead-tint-prev: #F6F6F7; --hover-row: rgba(139,31,63,.045); --zebra-tint: rgba(26,26,46,.022); --tint-last: rgba(139,31,63,.055); --tint-prev: rgba(86,95,109,.055); --grp-lvl0: rgba(139,31,63,.08); --grp-lvl1: rgba(139,31,63,.05); --grp-lvl2: rgba(139,31,63,.028); --shadow: 0 1px 3px rgba(32,26,34,.06), 0 10px 30px -18px rgba(32,26,34,.22); --shadow-pop: 0 20px 50px -24px var(--accent-glow), 0 4px 14px rgba(32,26,34,.10); --mesh-1: rgba(139,31,63,.09); --mesh-2: rgba(194,69,108,.07); --mesh-3: rgba(217,155,88,.05); --mesh-4: rgba(107,20,46,.06); --scrollbar-thumb: rgba(139,31,63,.26); --scrollbar-thumb-hover: rgba(139,31,63,.45); /* Плашка «Цвет» (сорт винограда, 20.08.2026) — фиксированные по смыслу тона (белый/красный/ розовый сорт), НЕ завязаны на --accent: в тёмной теме --accent уходит в золото, а «Красный» обязан узнаваться как вино-красный что в светлой, что в тёмной теме — та же логика, что у --notstarted…--nodata в karta.html (data-viz цвет важнее подгонки под тему). */ --cvet-white: #7A6423; --cvet-white-bg: rgba(196,168,88,.20); --cvet-white-border: rgba(196,168,88,.48); --cvet-red: #83102E; --cvet-red-bg: rgba(139,20,55,.15); --cvet-red-border: rgba(139,20,55,.42); --cvet-pink: #A3396B; --cvet-pink-bg: rgba(219,90,140,.18); --cvet-pink-border: rgba(219,90,140,.45); } /* ── Тёмная тема: благородное золото (бордо + золото — пара винного дома). Hue держим в 35-45° (янтарь-золото) — 50-60° сползает в грязный оливковый. ── */ [data-theme="dark"] { color-scheme: dark; --bg: #0A0C14; --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.035); --pop-bg: #161A28; --text: #F3F4F6; --text-2: #A9B0BD; --muted: #8890A0; --border: rgba(255,255,255,.09); --border-soft: rgba(255,255,255,.05); --border-strong: rgba(255,255,255,.18); --accent: #C99A3C; --accent-2: #E8C275; --accent-ink: #E3BA6A; --on-accent: #241804; --accent-soft: rgba(201,154,60,.15); --accent-glow: rgba(201,154,60,.30); --ok: #4ADE80; --ok-bg: rgba(34,197,94,.16); --ok-border: rgba(34,197,94,.36); --err: #F87171; --err-bg: rgba(239,68,68,.17); --err-border: rgba(239,68,68,.40); --warn: #F8A659; --warn-bg: rgba(245,158,11,.20); --warn-border: rgba(245,158,11,.38); --thead-solid: #12141F; --chip-bg: rgba(255,255,255,.05); --thead-tint-last: #222022; --thead-tint-prev: #1A1C27; --hover-row: rgba(201,154,60,.08); --zebra-tint: rgba(255,255,255,.025); --tint-last: rgba(201,154,60,.09); --tint-prev: rgba(255,255,255,.035); --grp-lvl0: rgba(201,154,60,.11); --grp-lvl1: rgba(201,154,60,.065); --grp-lvl2: rgba(201,154,60,.035); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 12px 34px -20px rgba(0,0,0,.7); --shadow-pop: 0 22px 54px -26px var(--accent-glow), 0 6px 18px rgba(0,0,0,.45); --mesh-1: rgba(201,154,60,.12); --mesh-2: rgba(139,31,63,.13); --mesh-3: rgba(232,194,117,.05); --mesh-4: rgba(201,154,60,.06); --scrollbar-thumb: rgba(232,194,117,.20); --scrollbar-thumb-hover: rgba(232,194,117,.36); /* Тот же смысл, что в светлой теме (см. комментарий там) — тона светлее, чтобы читались на тёмной поверхности плашки. */ --cvet-white: #E4D7AE; --cvet-white-bg: rgba(201,171,86,.18); --cvet-white-border: rgba(201,171,86,.40); --cvet-red: #F0A6B8; --cvet-red-bg: rgba(216,90,120,.22); --cvet-red-border: rgba(216,90,120,.45); --cvet-pink: #F3AFC9; --cvet-pink-bg: rgba(219,112,147,.22); --cvet-pink-border: rgba(219,112,147,.48); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; height: 100%; } body { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; height: 100vh; display: flex; flex-direction: column; overflow: hidden; -webkit-tap-highlight-color: transparent; } button, th.sortable, tr.grp-row { touch-action: manipulation; } /* Плавная смена темы — иначе поверхности «щёлкают» */ html.theming *:not(.no-theming) { transition: background-color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease) !important; } /* Mesh-фон — фирменная деталь семьи AZB_IT */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 10% 15%, var(--mesh-1), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 12%, var(--mesh-2), transparent 55%), radial-gradient(ellipse 42% 50% at 50% 85%, var(--mesh-3), transparent 50%), radial-gradient(ellipse 35% 35% at 78% 70%, var(--mesh-4), transparent 45%); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Мягкий эквивалент, не выключение (apple-design): поповерам оставляем короткое затухание прозрачностью, убираем только сдвиг/масштаб. */ .msel-pop, .cal-pop, .modal { transition-property: opacity !important; transition-duration: var(--dur-1) !important; transform: none !important; } .modal.open { transform: translate(-50%,-50%) !important; } } /* ══════════════════════ Шапка ══════════════════════ */ .topbar { position: sticky; top: 0; z-index: 90; height: var(--topbar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 0 26px; background: var(--thead-solid); border-bottom: 1px solid var(--border); } /* flex:0 1 auto (не 1 1 auto) — лого больше не «съедает» всю лишнюю ширину шапки: с приходом вкладок-навигации и бейджа свежести шапка стала многосоставной, лишнее пространство отдаём .topbar-spacer между вкладками и правым кластером (свежесть+тема), а не логотипу вхолостую. */ .logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; flex: 0 1 auto; min-width: 0; text-decoration: none; color: var(--text); transition: opacity var(--dur-1) var(--ease); } a.logo:hover { opacity: .82; } a.logo:active { opacity: .68; } .logo-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 16px -2px var(--accent-glow); display: flex; align-items: center; justify-content: center; color: var(--on-accent); } .logo-mark svg { width: 19px; height: 19px; } .logo b { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .logo-sub { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 2px; } /* ══════════════════════ Навигация в шапке (Карта участков / Готовность к уборке) ══════════════════════ Единый компонент трёх страниц — сегментированная группа вкладок-ссылок, тот же язык, что и .cal-levels/.chip (мягкая заливка на активной). .topbar-spacer забирает всё свободное место между левым кластером (лого+вкладки) и правым (свежесть+тема), не давая логотипу растягиваться вхолостую. */ .topbar-spacer { flex: 1 1 auto; min-width: 0; } .nav-tabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--chip-bg); border: 1px solid var(--border); flex: none; } .nav-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .nav-tab:hover { color: var(--text); background: var(--accent-soft); } .nav-tab:active { transform: scale(.96); } .nav-tab[aria-current="page"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: 0 2px 10px -3px var(--accent-glow); } .nav-tab[aria-current="page"]:hover { color: var(--on-accent); } @media (max-width: 920px) { .nav-tabs { display: none; } } /* На узких окнах (~360px, планшет/телефон агронома) подпись-расшифровка в шапке не помещается — `.logo` сжимается (min-width:0), но текст внутри него держит white-space:nowrap (не обрезаем — правило проекта), и при нехватке места визуально вылезал за пределы топбара, утаскивая горизонтальный скролл на всю страницу (при этом ТЗ прямо требует, чтобы горизонтальный скролл был только внутри контейнера таблицы). Прячем декоративную подпись — не данные, дублирует смысл заголовка «Готовность к уборке» рядом; текст остаётся в HTML (не удалён), просто на узких окнах не занимает места — это стандартная адаптивная практика скрыть второстепенную подпись целиком, а не «обрезание» видимого текста (которое запрещено правилом проекта). */ @media (max-width: 640px) { .logo-sub { display: none; } } .theme-toggle { width: 56px; height: 29px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip-bg); position: relative; cursor: pointer; flex: none; padding: 0; transition: border-color var(--dur-2) var(--ease); } .theme-toggle:hover { border-color: var(--accent-2); } .theme-toggle .thumb { position: absolute; top: 2.5px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; color: var(--on-accent); transition: transform var(--dur-3) var(--ease-inout); } [data-theme="dark"] .theme-toggle .thumb { transform: translateX(27px); } .theme-toggle svg { width: 13px; height: 13px; } .theme-toggle .i-moon { display: none; } [data-theme="dark"] .theme-toggle .i-moon { display: block; } [data-theme="dark"] .theme-toggle .i-sun { display: none; } /* ══════════════════════ Каркас страницы ══════════════════════ */ .wrap { width: 100%; max-width: 1760px; margin: 0 auto; padding: 18px 26px 12px; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; } .card { background: var(--surface); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* ══════════════════════ Панель фильтров ══════════════════════ */ .filters { flex: 0 0 auto; padding: 14px 16px; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; row-gap: 12px; } .f-field { display: flex; flex-direction: column; gap: 5px; } .f-label { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; } .f-spacer { flex: 1 1 auto; min-width: 12px; } .inline-row { display: flex; align-items: center; gap: 6px; } /* Чипы «Состояние уборки» — переключаются мгновенно, без поповера */ .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip-bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .chip:hover { border-color: var(--accent-2); color: var(--text); } .chip:active { transform: scale(.96); } .chip.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--on-accent); box-shadow: 0 3px 12px -4px var(--accent-glow); } .chip .cnt { font-size: 11px; opacity: .85; } /* Поиск — иконка внутри поля НЕ налезает на текст (запас слева). ВАЖНО: `.search-field` —flex-item родителя `.f-field` (display:flex; flex-direction:COLUMN), поэтому `flex: 1 1 220px` здесь растягивал бы ВЫСОТУ (главная ось колоночного контейнера), а не ширину — раньше так и было (искали как «ширина 220», получали поле высотой 220px, подпись/инпут/иконка разъезжались по вертикали на всю панель фильтров). Ширина — только через width/min-width/max-width. */ /* Ширина увеличена 19.08.2026 (220→260, максимум 340→420) — освободилось место после снятия фильтра «Период» с этой панели, отдано под более удобное поле поиска, чтобы панель не выглядела дырявой (решение заказчика, см. комментарий в gotovnost.html). */ .search-field { position: relative; width: 260px; min-width: 200px; max-width: 420px; } .search-field svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; } .search-field input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--chip-bg); padding: 0 34px 0 38px; font: inherit; font-size: 13px; color: var(--text); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .search-field input::placeholder { color: var(--muted); } .search-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; display: none; align-items: center; justify-content: center; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .search-field.has-value .search-clear { display: flex; } .search-clear:hover { background: var(--accent-soft); color: var(--text); } .search-clear:active { transform: translateY(-50%) scale(.88); } .search-clear svg { width: 14px; height: 14px; } /* ══════════════════════ Мультивыбор (Участки / Направление / Санитарное) ══════════════════════ */ .msel { position: relative; } .msel-trigger { /* min-width 150→168 (19.08.2026) — та же причина, что у .search-field выше: место после снятия «Периода» отдано мультивыборам, панель не должна выглядеть дырявой. */ display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; min-width: 168px; border-radius: 10px; border: 1px solid var(--border); background: var(--chip-bg); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .msel-trigger:hover { border-color: var(--accent-2); } .msel-trigger:active { transform: scale(.98); } .msel-trigger.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .msel-trigger svg { width: 13px; height: 13px; color: var(--muted); flex: none; margin-left: auto; transition: transform var(--dur-2) var(--ease); } .msel-trigger.on svg { transform: rotate(180deg); } .msel-trigger .cnt { font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: 1px 7px; } .msel-pop { /* position:fixed, не absolute — поповер переносится в document.body скриптом (см. createMultiSelect): `.filters.card` и `.table-card.card` — оба `.card` с backdrop-filter, а backdrop-filter создаёт свой стек-контекст ДАЖЕ при position:static. Внутри стек-контекста `.filters` z-index:70 поповера не мог пробиться выше стек-контекста `.table-card`, который в DOM идёт следом — таблица перекрывала список чекбоксов, клики по «Выделить все»/чекбоксам проваливались в ячейки под поповером. Тот же перенос в body уже применялся к календарю (.cal-pop) — здесь распространён и на мультивыбор. */ position: fixed; top: 0; left: 0; z-index: 95; width: 290px; max-height: 360px; display: flex; flex-direction: column; background: var(--pop-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 10px; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .msel-pop.open { opacity: 1; transform: none; pointer-events: auto; } .msel-search { width: 100%; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--chip-bg); padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); margin-bottom: 8px; } .msel-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .msel-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; display: flex; flex-direction: column; gap: 1px; } .msel-empty { padding: 12px 8px; color: var(--muted); font-size: 12.5px; } .msel-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: background var(--dur-1) var(--ease); } .msel-item:hover { background: var(--accent-soft); } .msel-item input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; } .msel-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); } .msel-link { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent-ink); background: none; border: none; cursor: pointer; font-weight: 600; padding: 4px 2px; transition: color var(--dur-1) var(--ease); } .msel-link:hover { text-decoration: underline; } .msel-apply { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 9px; border: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); transition: filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .msel-apply:hover { filter: brightness(1.08); } .msel-apply:active { transform: scale(.96); } /* ══════════════════════ Календарь-период («Стандартный период», как в 1С:ERP) ══════════════════════ */ .cal-wrap { position: relative; display: inline-block; } .cal-trigger { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--chip-bg); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .cal-trigger:hover { border-color: var(--accent-2); } .cal-trigger:active { transform: scale(.98); } .cal-trigger.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .cal-trigger svg { width: 15px; height: 15px; color: var(--accent-ink); flex: none; } .cal-clear { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); background: var(--chip-bg); color: var(--muted); cursor: pointer; display: none; align-items: center; justify-content: center; flex: none; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .cal-clear.show { display: flex; } .cal-clear:hover { border-color: var(--err); color: var(--err); } .cal-clear:active { transform: scale(.9); } .cal-clear svg { width: 13px; height: 13px; } .cal-pop { position: fixed; top: 0; left: 0; z-index: 95; width: 566px; max-width: calc(100vw - 32px); background: var(--pop-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 14px; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .cal-pop.open { opacity: 1; transform: none; pointer-events: auto; } .cal-backdrop { display: none; position: fixed; inset: 0; z-index: 89; background: rgba(10,10,20,.42); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); } .cal-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .cal-backdrop { display: block; } .cal-pop { position: fixed !important; top: 50% !important; left: 50% !important; width: min(400px, calc(100vw - 32px)) !important; transform: translate(-50%,-50%) scale(.97) !important; } .cal-pop.open { transform: translate(-50%,-50%) scale(1) !important; } .cal-body { flex-direction: column !important; } .cal-presets { flex-direction: row !important; flex-wrap: wrap; width: auto !important; border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; } } .cal-body { display: flex; gap: 14px; align-items: flex-start; } .cal-presets { display: flex; flex-direction: column; gap: 3px; width: 120px; flex: none; border-right: 1px solid var(--border-soft); padding-right: 12px; } .cal-presets button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); text-align: left; border: 1px solid transparent; background: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .cal-presets button:hover { background: var(--accent-soft); color: var(--text); } .cal-presets button:active { transform: scale(.97); } .cal-presets button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); } .cal-grid-area { flex: 1; min-width: 0; } .cal-levels { display: inline-flex; background: var(--chip-bg); border: 1px solid var(--border); border-radius: 10px; padding: 2px; gap: 2px; margin-bottom: 10px; } .cal-levels button { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2); border: none; background: none; padding: 5px 10px; border-radius: 7px; cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); white-space: nowrap; } .cal-levels button:hover:not(.on) { background: var(--accent-soft); color: var(--text); } .cal-levels button:active { transform: scale(.95); } .cal-levels button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); } .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; } .cal-page-label { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; color: var(--text); } .cal-nav > button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--chip-bg); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); flex: none; } .cal-nav > button:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-ink); } .cal-nav > button:active:not(:disabled) { transform: scale(.92); } .cal-nav > button:disabled { opacity: .35; cursor: default; } .cal-nav > button svg { width: 15px; height: 15px; } .cal-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; } .cal-dow span { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0; } .cal-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; } .cal-grid.lvl-months, .cal-grid.lvl-years, .cal-grid.lvl-quarters { grid-template-columns: repeat(4,1fr); } .cal-grid.lvl-days { grid-template-columns: repeat(7,1fr); } .cal-cell { height: 44px; border: none; background: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); position: relative; user-select: none; } .cal-grid.lvl-days .cal-cell { height: 36px; font-size: 12.5px; } .cal-grid.lvl-months .cal-cell, .cal-grid.lvl-quarters .cal-cell, .cal-grid.lvl-years .cal-cell { font-size: 12.5px; font-weight: 600; } .cal-cell.cal-blank { cursor: default; pointer-events: none; background: none; } .cal-cell:not(.cal-blank):not(.sel):not(:disabled):hover { background: var(--accent-soft); } .cal-cell:not(.cal-blank):not(:disabled):active { transform: scale(.9); } .cal-cell:disabled { opacity: .32; cursor: default; } .cal-cell.in-range { background: var(--accent-soft); border-radius: 0; } .cal-cell.range-start { border-radius: 9px 0 0 9px; } .cal-cell.range-end { border-radius: 0 9px 9px 0; } .cal-cell.sel { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); font-weight: 700; z-index: 1; } .cal-cell.today::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-ink); } .cal-cell.sel.today::after { background: var(--on-accent); } .cal-manual { display: flex; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .cal-manual label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; } .cal-manual input { height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--chip-bg); padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; font-weight: 600; } .cal-manual input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .cal-manual input.invalid { border-color: var(--err); } .cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); } .cal-foot .cal-hint { font-size: 12px; color: var(--muted); } .cal-apply { padding: 8px 16px; border-radius: 9px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px -4px var(--accent-glow); display: inline-flex; align-items: center; justify-content: center; transition: filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .cal-apply:hover:not(:disabled) { filter: brightness(1.08); } .cal-apply:active:not(:disabled) { transform: scale(.96); } .cal-apply:disabled { opacity: .5; cursor: not-allowed; } /* ══════════════════════ Кнопки общего назначения ══════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 10px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; transition: filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); white-space: nowrap; } .btn:active { transform: scale(.96); } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn-ghost { color: var(--text-2); background: var(--chip-bg); border: 1px solid var(--border); } .btn-ghost:hover:not(:disabled) { border-color: var(--accent-2); color: var(--text); } /* Состояние «включено» — тот же язык, что .msel-trigger.on/.cal-trigger.on (обводка+свечение, не сплошная заливка — заливка акцентом зарезервирована за первичными действиями). Используется тумблером «Плоский список» (02-spec.md §17.22), когда режим активен. */ .btn-ghost.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent-ink); } .btn svg { width: 14px; height: 14px; flex: none; } /* Тумблер режима таблицы прячет «Свернуть/Развернуть всё» — в плоском списке сворачивать нечего (нет ни одной группы). Скрытие через body-класс, а не [hidden]-атрибут: у .btn уже есть свой display:inline-flex (специфичность класса), который бы забил UA-правило [hidden] ровно той же специфичности (после [hidden] в каскаде побеждает автор, не UA) — id-селектор здесь надёжнее и не завязан на порядок правил в файле. */ body.flat-mode #btnExpandAll, body.flat-mode #btnCollapseAll { display: none; } /* ══════════════════════ Панель-тулбар: счётчик + свернуть/развернуть ══════════════════════ */ /* flex-wrap — те же грабли, что были в .logo: «Развернуть всё» + «Свернуть всё» не сжимаются (white-space:nowrap в .btn) и на узких окнах вылезали за пределы .toolbar, утаскивая горизонтальный скролл на всю страницу. .filters уже решает это через wrap — переносим тот же приём сюда. */ .toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; row-gap: 8px; flex-wrap: wrap; padding: 2px 4px; } .counter { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } .counter b { color: var(--text); font-weight: 800; } /* flex-wrap здесь — БАГ (найден живым прогоном Edge на 360px 19.08.2026), не было изначально: .toolbar сам умеет переноситься (flex-wrap выше), но 4 кнопки (после §17.22/23 их стало вдвое больше, чем при первом ревью) внутри .toolbar-actions — БЕЗ собственного flex-wrap и БЕЗ min-width:0 — не сжимались (white-space:nowrap у .btn) и требовали свою полную ширину как неделимый блок, из-за чего вся страница получала горизонтальный СКРОЛЛ (не только таблица внутри .table-scroll, где это ожидаемо и разрешено). */ .toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; } /* Сегментированный переключатель «Все / С анализами / Без анализов» (правка 19.08.2026) — тот же визуальный язык, что .nav-tabs/.nav-tab в шапке (мягкая обводка-контейнер, активный сегмент — сплошная заливка акцентом), но отдельные классы: .nav-tabs жёстко завязан на -ссылки и правило «прятать на узких экранах», сюда не подходит — это кнопки-фильтр. */ .seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--chip-bg); border: 1px solid var(--border); flex: none; } .seg-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 8px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .seg-btn:hover { color: var(--text); background: var(--accent-soft); } .seg-btn:active { transform: scale(.96); } .seg-btn.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: 0 2px 10px -3px var(--accent-glow); } /* ══════════════════════ Таблица ══════════════════════ */ .table-card { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; } .table-scroll { flex: 1 1 auto; min-width: 0; overflow: auto; overscroll-behavior: contain; border-radius: var(--radius); } /* table-layout:fixed — ширина таблицы держится СТРОГО суммой из colgroup, не «на глаз». Без него ячейки с неразрывным текстом (например .badge, white-space:nowrap) в режиме auto раздвигали свою колонку шире объявленной — сумма реальных колонок превышала объявленную ширину таблицы, и на 20 колонках (правка 19.08.2026 — строка отчёта = строка плана, +4 колонки) это уже давало горизонтальный скролл раньше, чем нужно. Данные при этом не обрезаются — не помещающийся текст переносится (см. правки .badge/.t-text ниже), а не обрезается и не толкает колонку. width:100% (не фиксированный px) + в % (см. colgroup в gotovnost.html) — таблица ВСЕГДА растягивается ровно на ширину .table-scroll, на любом мониторе 1280–2560px: без горизонтального переполнения (было при узком окне — колонки не помещались) и без пустой полосы справа (было на широком — таблица держала одну и ту же ширину 1567px и не занимала весь контейнер). min-width — защитный пол ниже 1280px: если места меньше расчётного, таблица останавливается на этой ширине и .table-scroll просто даёт горизонтальный скролл, вместо того чтобы сжимать колонки до нечитаемых. */ .report-table { width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; } .report-table thead th { position: sticky; z-index: 6; background: var(--thead-solid); font-weight: 800; text-align: center; vertical-align: middle; color: var(--text); padding: 9px 6px; border-bottom: 1px solid var(--border); line-height: 1.25; font-size: 11px; /* СЛОВА В ШАПКЕ НЕ РВЁМ (правка 20.08.2026 по замечанию заказчика). Раньше стояло overflow-wrap:anywhere — «безопасный перенос как крайний случай» на деле применялся первым: колонки узкие, и заголовки резались посреди слова — «Конди/ции», «Площ/адь», «Кислот/а», «Урожай/., ц/га». Читать такое невозможно. Теперь: перенос ТОЛЬКО между словами, единицы измерения вынесены отдельной строкой (.th-sub), а чтобы длинные слова физически помещались, у таблицы есть min-width — на узком мониторе появится прокрутка внутри контейнера, но заголовки останутся целыми. */ overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* .t-date у ЗАГОЛОВКА («Дата», «След. анализ») — не должен наследовать white-space:nowrap тела таблицы (там nowrap защищает от переноса САМУ дату, что запрещено правилом «даты не обрезать»). В заголовке nowrap не нужен и на узкой колонке не давал «След. анализ» перенестись — заголовок вылезал за границу ячейки. Значения дат в теле (td.t-date) остаются nowrap — их не касается. */ .report-table thead th.t-date { white-space: normal; } .report-table thead tr.h1 th { top: 0; border-right: 1px solid var(--border-soft); } .report-table thead tr.h2 th { border-right: 1px solid var(--border-soft); font-size: 12px; font-weight: 700; color: var(--text-2); } .report-table thead th:last-child { border-right: none; } .report-table thead th.col-last { background: var(--thead-tint-last); } .report-table thead th.col-prev { background: var(--thead-tint-prev); } .th-sub { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 2px; } .report-table th.sortable { cursor: pointer; user-select: none; } .report-table th.sortable:hover { color: var(--accent-ink); } .report-table th.sortable::after { content: ''; display: inline-block; width: 9px; margin-left: 4px; opacity: .35; } .report-table th.sort-asc::after { content: '▲'; opacity: 1; color: var(--accent-ink); font-size: 9px; } .report-table th.sort-desc::after { content: '▼'; opacity: 1; color: var(--accent-ink); font-size: 9px; } /* padding 8px 7px (было 8px 10px) — правка 19.08.2026: колонок стало 20 (было 16), при старом отступе 20 узких числовых колонок не помещались в 1280px без горизонтального скролла. */ .report-table tbody td { padding: 8px 7px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; line-height: 1.4; } .report-table tbody td.col-last { background: var(--tint-last); } .report-table tbody td.col-prev { background: var(--tint-prev); } /* Зебра по строкам-участкам (сквозная нумерация, группы в счёт не идут) — держит взгляд на строке при чтении широкой таблицы; hover ниже по каскаду и всегда перекрывает. */ .report-table tbody tr.leaf-row.zebra td { background: var(--zebra-tint); } .report-table tbody tr.leaf-row.zebra td.col-last { background: color-mix(in srgb, var(--zebra-tint) 60%, var(--tint-last)); } .report-table tbody tr.leaf-row.zebra td.col-prev { background: color-mix(in srgb, var(--zebra-tint) 60%, var(--tint-prev)); } .report-table tbody tr.leaf-row:hover td { background: var(--hover-row); } .report-table tbody tr.leaf-row:hover td.col-last { background: color-mix(in srgb, var(--hover-row) 55%, var(--tint-last)); } .report-table tbody tr.leaf-row:hover td.col-prev { background: color-mix(in srgb, var(--hover-row) 55%, var(--tint-prev)); } .t-text { text-align: left; } .t-num { text-align: right; font-variant-numeric: tabular-nums; } .t-date { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } .t-flag { text-align: center; } .empty-cell { color: var(--muted); cursor: help; } /* Строка-участок (лист дерева) БАГ (найден живым прогоном 19.08.2026, заказчик увидел как «лесенку» внизу таблицы): display:flex здесь превращал ячейку из обычной table-cell в отдельный флекс-блок высотой ПО СВОЕМУ содержимому (одна строка текста) — а не по высоте строки таблицы. Пока соседняя ячейка «Направление» умещалась в одну строку, разницы не было видно; как только она переносилась на 2-4 строки (длинные значения вроде «Уход за виноградником 4-го года вегетации»), ячейка «Поле» оставалась короткой и её нижняя граница обрывалась на середине строки — виден уступ. display:flex тут и не нужен: во вложенном содержимом всего один текстовый узел (gap:8px было не с кем создавать), обычная table-cell со своим vertical-align:middle (см. .report-table tbody td выше) центрирует текст ничуть не хуже и корректно растягивается на всю высоту строки, как и остальные 15 колонок. */ .report-table tbody tr.leaf-row td.col-field { padding-left: 58px; position: relative; white-space: normal; overflow-wrap: anywhere; } .report-table tbody tr.leaf-row td.col-field::before { content: ''; position: absolute; left: 34px; top: 0; bottom: 0; width: 1px; background: var(--border-soft); } /* Строки-группы (Состояние / Результат / Сорт) */ .report-table tbody tr.grp-row td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); } .report-table tbody tr.grp-row .grp-inner { display: flex; align-items: center; gap: 9px; } .report-table tbody tr.grp-lvl0 td { background: var(--grp-lvl0); font-weight: 800; font-size: 13.5px; } .report-table tbody tr.grp-lvl0:not(:first-child) td { border-top: 1px solid var(--border); } .report-table tbody tr.grp-lvl1 td { background: var(--grp-lvl1); font-weight: 700; } .report-table tbody tr.grp-lvl1 .grp-inner { padding-left: 20px; } .report-table tbody tr.grp-lvl2 td { background: var(--grp-lvl2); font-weight: 600; } .report-table tbody tr.grp-lvl2 .grp-inner { padding-left: 40px; } .grp-count { color: var(--muted); font-weight: 500; font-size: 12px; } .grp-toggle { width: 22px; height: 22px; border-radius: 6px; border: none; background: none; color: var(--accent-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; transition: background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); } .grp-toggle:hover { background: var(--accent-soft); } .grp-toggle:active { transform: scale(.88); } /* Базовый путь SVG (см. renderGroupRow в app.js) рисует стрелку вправо. Раньше было наоборот: развёрнутая группа (есть строки под ней) показывала стрелку ВПРАВО, свёрнутая — ВВЕРХ — не совпадает ни с одной привычной схемой (обычно закрыто/схлопнуто = вправо «раскрыть в эту сторону», открыто = вниз «содержимое ниже»). Разворот на 90° теперь у РАЗВЁРНУТОГО состояния (стрелка вниз, к открытым строкам), у свёрнутого — стрелка остаётся в базовом положении вправо. */ .grp-toggle svg { width: 13px; height: 13px; transform: rotate(90deg); transition: transform var(--dur-2) var(--ease); } .grp-toggle.collapsed svg { transform: none; } tr.grp-row { cursor: pointer; } /* Плашка санитарного состояния / результата анализа / состояния уборки (вкладка «Все анализы») */ .badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; } .badge-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); } .badge-ok::before { background: var(--ok); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 60%, transparent); } .badge-bad { background: var(--err-bg); color: var(--err); border-color: var(--err-border); } .badge-bad::before { background: var(--err); box-shadow: 0 0 6px color-mix(in srgb, var(--err) 60%, transparent); } /* Состояние уборки участка (правка 20.08.2026, колонка «Состояние» вкладки «Все анализы») — свои два цвета сверх ok/bad/muted: harvest (идёт уборка сейчас) — фирменный акцент проекта, самое заметное состояние; cleanup/prep (в процессе, но не сама уборка — зачистка после/ подготовка до) — тон предупреждения, «требует внимания, не финал». closed использует готовый badge-ok («спокойный зелёный» — завершено, ничего не требуется), notstarted/nodata — готовый badge-muted (нейтральный серый — заказчик 20.08.2026: «не начат» не тревожный). */ .badge-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); } .badge-accent::before { background: var(--accent-ink); box-shadow: 0 0 6px var(--accent-glow); } .badge-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); } .badge-warn::before { background: var(--warn); box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 55%, transparent); } /* В узкой колонке «Санитарное» (table-layout:fixed) длинные значения («Незначит. повреждение») переносятся внутри плашки, а не толкают колонку шире и не обрезаются — тот же принцип «ничего не обрезаем», применённый к badge вместо обычного текста. БАГ (найден живым прогоном 19.08.2026 на 1280px, после сужения колонки «Санитарное» под новые процентные ширины): white-space:normal переносит плашку по пробелу («Незначит.»/«повреждение»), но сама плашка — inline-flex БЕЗ ограничения ширины, поэтому она вставала настолько широкой, чтобы длинное слово «повреждение» (11 букв, внутри без пробелов) поместилось на своей строке целиком, — и вылезала за правый край колонки поверх соседней «Дата». max-width:100% заставляет плашку не быть шире своей ячейки, overflow-wrap:break-word — перенести «повреждение» саму по себе, если и после этого не помещается (перенос ТОЛЬКО когда иначе никак, не «куда попало» — anywhere здесь пробовали и получили некрасивую «лесенку» из одной-двух букв на строку). */ .report-table .badge { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; overflow-wrap: break-word; } .dyn-up { color: var(--ok); font-weight: 700; } .dyn-down { color: var(--err); font-weight: 700; } /* Пустое состояние после фильтрации/поиска — иконка + текст + явный выход из фильтров */ .no-rows td { padding: 0; border-bottom: none; } .no-rows-inner { display: flex; flex-direction: column; align-items: center; padding: 48px 20px 40px; text-align: center; } .no-rows-icon { width: 40px; height: 40px; color: var(--muted); opacity: .5; margin-bottom: 12px; } .no-rows-inner b { color: var(--text); font-size: 14.5px; font-weight: 800; margin-bottom: 5px; } .no-rows-inner p { color: var(--muted); font-size: 13.5px; max-width: 380px; margin: 0; } .no-rows-reset { margin-top: 16px; } /* ══════════════════════ Вкладка «Все анализы» (analizy.html) ══════════════════════ Таблица переиспользует ВСЮ базовую стилистику .report-table (sticky-шапка, зебра, badge, пустое состояние и т.п. — см. выше), здесь только то, чего там не было: своя минимальная ширина (у неё 11 колонок, не 20 — незачем требовать те же 1200px), кликабельная строка- участок со своей раскрывашкой (не деревом группировки, поэтому НЕ переиспользует .col-field с его линией-«веткой» — та линия осмысленна только внутри трёхуровневого дерева вкладки-2), и вложенная мини-таблица истории анализов участка (тот же приём, что .privyazka-table). */ /* .report-table thead th сам по себе НЕ задаёт top (это делает .h1/.h2 — у них двухуровневая шапка вкладки-2); у этой таблицы шапка ОДНОуровневая, своего класса нет — sticky без top не прилипает вовсе (проверено вживую). Задаём top:0 и разделители явно, тем же языком. */ /* 1656px (было 1612px) — правка 20.08.2026: колонок стало 23 (добавлена «Цвет» после «Сорт», «Фитосанитарное состояние» переименовано в короткую «Готовность» и сужено — освободившееся место частично отдано новой колонке, частично — остальным пропорционально, colgroup в gotovnost.html пересчитан заново под эту сумму, не растянут на глаз). */ .report-table { min-width: 1656px; } /* см. комментарий про шапку выше */ .report-table.analiz-table { min-width: 860px; } .report-table.analiz-table thead th { top: 0; border-right: 1px solid var(--border-soft); } .report-table.analiz-table thead th:last-child { border-right: none; } tr.analiz-summary-row { cursor: pointer; } /* Просто flex-строка «раскрывашка + код участка + счётчик анализов» — без специального левого отступа: 58px-индент .col-field на вкладке-2 нужен, чтобы визуально подчинить строку-лист группе НАД ней (дерево); здесь дерева нет, все строки равноправны. */ .analiz-field-cell { white-space: normal; overflow-wrap: anywhere; } .analiz-field-inner { display: flex; align-items: center; gap: 8px; } .analiz-detail-row td { padding: 0; border-bottom: 1px solid var(--border-soft); background: var(--grp-lvl2); } .analiz-detail-scroll { margin: 10px 14px 12px 14px; overflow: auto; max-height: min(320px, 40vh); overscroll-behavior: contain; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); } .analiz-mini-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: var(--pop-bg); } .analiz-mini-table th { position: sticky; top: 0; z-index: 2; background: var(--pop-bg); text-align: left; font-weight: 700; padding: 8px 12px; color: var(--text-2); font-size: 11.5px; border-bottom: 1px solid var(--border); white-space: nowrap; } .analiz-mini-table td { padding: 7px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .analiz-mini-table tr:last-child td { border-bottom: none; } .analiz-mini-table tbody tr:hover td { background: var(--hover-row); } .analiz-mini-table tbody tr:nth-child(even) td { background: var(--zebra-tint); } .analiz-mini-table tbody tr:nth-child(even):hover td { background: var(--hover-row); } .analiz-mini-table td.t-date { text-align: left; } /* в мини-таблице «Дата» — первая колонка, левое выравнивание естественнее */ /* ══════════════════════ Подвал ══════════════════════ */ .footer { flex: 0 0 auto; text-align: center; padding: 9px 16px; font-size: 12px; color: var(--muted); line-height: 1.6; } /* --- Подпись «Заказчик / Исполнители» в подвале (правило AZB Core от 21.08.2026). Здесь шесть человек с обеих сторон — в шапку такой список не помещается, поэтому подписи стоят в подвале двумя колонками. --- */ .footer .footer-marks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 40px; margin-bottom: 8px; text-align: left; } .footer .fm { display: inline-flex; align-items: flex-start; gap: 9px; } .footer .fm-k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: none; padding-top: 2px; } .footer .fm-v { font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.5; } .footer .footer-org { color: var(--muted); } @media (max-width: 700px) { .footer .footer-marks { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ══════════════════════ Мини-лендинг (index.html) ══════════════════════ */ /* Контента мало и он статичный — в отличие от таблицы вкладки-2 странице не нужен overflow:hidden на body (это была защита от «прыжков» при перерисовке таблицы). */ .landing-body { overflow: auto; height: auto; min-height: 100vh; } .landing-wrap { /* max-width 900→980 (правка 19.08.2026 — добавлена 3-я карточка «Все анализы») */ width: 100%; max-width: 980px; margin: 0 auto; padding: 56px 26px 40px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; } .landing-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; } .landing-title { font-size: clamp(28px, 4.2vw, 40px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-sub { font-size: 15px; color: var(--text-2); max-width: 560px; margin-bottom: 40px; line-height: 1.5; } /* 3 карточки (правка 19.08.2026 — добавлена «Все анализы»): 3 колонки на широком экране, 2 — на среднем (иначе карточки становятся уже 260px и текст внутри тесно переносится), 1 — на совсем узком (было и раньше). */ .landing-cards { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(min(260px, 100%), 1fr)); gap: 20px; margin-bottom: 28px; } @media (max-width: 900px) { .landing-cards { grid-template-columns: repeat(2, minmax(min(260px, 100%), 1fr)); } } @media (max-width: 640px) { .landing-cards { grid-template-columns: 1fr; } } .landing-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 26px; border-radius: var(--radius-lg); text-decoration: none; color: var(--text); background: var(--surface); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .landing-card:hover { transform: translateY(-4px); border-color: var(--accent-2); box-shadow: var(--shadow-pop); } .landing-card:active { transform: translateY(-1px); } .landing-card-icon { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px -2px var(--accent-glow); } .landing-card-icon svg { width: 24px; height: 24px; } .landing-card h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; } .landing-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 18px; } .landing-card-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent-ink); transition: gap var(--dur-1) var(--ease); } .landing-card-go svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); } .landing-card:hover .landing-card-go { gap: 10px; } .landing-card:hover .landing-card-go svg { transform: translateX(2px); } .landing-problems { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--chip-bg); border: 1px solid var(--border); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .landing-problems:hover { border-color: var(--accent-2); color: var(--text); } .landing-problems:active { transform: scale(.97); } .landing-problems-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); } .landing-problems.has-problems { color: var(--err); background: var(--err-bg); border-color: var(--err-border); } .landing-problems.has-problems .landing-problems-dot { background: var(--err); box-shadow: 0 0 6px color-mix(in srgb, var(--err) 60%, transparent); } /* ══════════════════════ Бейдж свежести данных 1С (единый компонент трёх страниц) ══════════════════════ Правило freshness-indicator-standalone: компактно в шапке, не отдельной строкой в контенте. source_ok=false — предупреждающий (не кричащий) вид: жёлто-оранжевый --warn, НЕ --err (--err зарезервирован за настоящими проблемами данных — блок «Проверить привязку склада»; «1С временно недоступна» — это деградация, не авария, семафор должен это различать). */ .freshness { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--chip-bg); border: 1px solid var(--border); flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .freshness-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 55%, transparent); } .freshness.stale { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); } .freshness.stale .freshness-dot { background: var(--warn); box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 55%, transparent); } /* Порядок исчезновения на узких окнах (от менее к более важному): свежесть первой (1080px, статус-подсказка, не обязательна для работы) → вкладки-навигация (820px, есть логотип-фолбэк на лендинг) → .logo-sub (640px, уже было) → .logo-brand (400px, уже было). */ @media (max-width: 1080px) { .freshness { display: none; } } /* ══════════════════════ Проверить привязку склада (F17, вариант б) ══════════════════════ */ .privyazka-alert { flex: 0 0 auto; border-radius: var(--radius); overflow: hidden; background: var(--err-bg); border: 1px solid var(--err-border); } .privyazka-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: none; border: none; cursor: pointer; font: inherit; color: var(--err); text-align: left; transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } /* Осветление, а не докраска красным: подмешивание ещё --err поверх уже тонированного --err-bg у некоторых сочетаний светлой темы проваливало контраст текста ниже AA (4.34:1 при +8% — посчитано формулой). Белый/светлый нейтральный оверлей даёт «подсветку» и остаётся ≥4.8:1 в обеих темах с запасом. */ .privyazka-toggle:hover { background: color-mix(in srgb, white 8%, transparent); } .privyazka-toggle:active { transform: scale(.99); } .privyazka-icon { width: 19px; height: 19px; flex: none; } .privyazka-toggle span { font-size: 13.5px; font-weight: 700; } .privyazka-toggle span b { font-size: 14.5px; } .privyazka-chevron { width: 15px; height: 15px; flex: none; margin-left: auto; transition: transform var(--dur-2) var(--ease); } .privyazka-toggle[aria-expanded="true"] .privyazka-chevron { transform: rotate(180deg); } /* Раскрытие/схлопывание блока — плавное (grid-rows 0fr→1fr), не мгновенный hidden-атрибут. `-inner` — обязательная прослойка: именно у неё overflow:hidden обрезает содержимое, пока строка грид-контейнера почти нулевой высоты; border-top живёт на ней же — исчезает вместе со схлопыванием, а не «плавает» отдельной линией над нулевой высотой. */ .privyazka-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-3) var(--ease-inout), opacity var(--dur-2) var(--ease); } .privyazka-body.open { grid-template-rows: 1fr; opacity: 1; } .privyazka-body-inner { overflow: hidden; min-height: 0; padding: 0 16px 16px; border-top: 1px solid var(--err-border); } .privyazka-hint { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 14px 0 12px; } /* Внутренняя прокрутка — список проблемных анализов может быть длинным (в живых данных уже видели 40+ строк); без max-height блок распирал всю страницу вниз и выталкивал таблицу отчёта за пределы экрана (у body overflow:hidden — «лишнее» просто обрезалось бы). Шапка мини-таблицы внутри — sticky и ОБЯЗАТЕЛЬНО сплошная (без alpha/blur, та же грабля, что и в основной таблице) — иначе строки просвечивают при скролле списка. */ .privyazka-table-scroll { overflow: auto; max-height: min(320px, 40vh); overscroll-behavior: contain; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); } .privyazka-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: var(--pop-bg); } .privyazka-table th { position: sticky; top: 0; z-index: 2; background: var(--pop-bg); text-align: left; font-weight: 700; padding: 8px 12px; color: var(--text-2); font-size: 11.5px; border-bottom: 1px solid var(--border); white-space: nowrap; } .privyazka-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; vertical-align: top; } .privyazka-table tr:last-child td { border-bottom: none; } .privyazka-table tbody tr:hover td { background: var(--hover-row); } .privyazka-table tbody tr:nth-child(even) td { background: var(--zebra-tint); } .privyazka-table tbody tr:nth-child(even):hover td { background: var(--hover-row); } /* Дата/Сахар/Кислота — компактные структурные значения, не переносятся. Склад и «Что не так» — переносятся по словам (никогда не обрезаем текст, ни многоточием, ни фиксированной шириной). */ .privyazka-table th:nth-child(2), .privyazka-table td:nth-child(2) { text-align: center; font-variant-numeric: tabular-nums; } .privyazka-table th:nth-child(4), .privyazka-table td:nth-child(4), .privyazka-table th:nth-child(5), .privyazka-table td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; } .privyazka-table th:nth-child(3), .privyazka-table td:nth-child(3), .privyazka-table th:nth-child(6), .privyazka-table td:nth-child(6) { white-space: normal; overflow-wrap: anywhere; min-width: 140px; } /* ══════════════════════ «Как считается» — кнопка в заголовке колонки ══════════════════════ */ .how-calc-btn { display: block; margin: 4px auto 0; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--accent-ink); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-transform: none; letter-spacing: normal; } .how-calc-btn:hover { color: var(--accent-2); } /* ══════════════════════ Модальное окно (info, «Как считается») ══════════════════════ */ .modal-backdrop { display: none; position: fixed; inset: 0; z-index: 120; background: rgba(10,10,20,.46); opacity: 0; transition: opacity var(--dur-2) var(--ease); } .modal-backdrop.open { display: block; opacity: 1; } .modal { display: none; position: fixed; z-index: 121; top: 50%; left: 50%; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; transform: translate(-50%,-50%) scale(.97); opacity: 0; background: var(--pop-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .modal.open { display: block; opacity: 1; transform: translate(-50%,-50%) scale(1); } /* Окно «Готовность» участка (подробности по клику, 20.08.2026) — заказчик: внутри несколько таблиц + график накопительного итога, узкое окно (760px) их «смешивало». Не менее 1100px, но не шире 90% экрана (на узких мониторах) — min() между двумя формулировками требования. */ .modal.modal-wide { width: min(1100px, 90vw); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); } .modal-head h3 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; } .modal-close { width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--chip-bg); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .modal-close:hover { background: var(--accent-soft); color: var(--text); } .modal-close svg { width: 14px; height: 14px; } .modal-body { padding: 18px; font-size: 13.5px; line-height: 1.6; color: var(--text); } .modal-body p { margin-bottom: 12px; } .modal-body p:last-child { margin-bottom: 0; } .modal-formula { font-family: 'Inter', monospace; font-weight: 700; text-align: center; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--accent-ink); font-size: 13px; } .modal-example { color: var(--text-2); font-size: 13px; background: var(--chip-bg); border-radius: var(--radius-sm); padding: 10px 14px; } .modal-note { color: var(--muted); font-size: 12.5px; } /* Санитарное состояние ещё не измерено ни разу — нейтральная плашка, не тревожный красный (плашка badge-bad уместна только когда РЕАЛЬНО известно нездоровое состояние). */ .badge-muted { background: var(--chip-bg); color: var(--muted); border-color: var(--border); } .badge-muted::before { background: var(--muted); box-shadow: none; } /* ══════════════════════ Плашка «Цвет» сорта (20.08.2026, колонка отчёта «Готовность к уборке») ══════════════════════ */ .badge-cvet-white { background: var(--cvet-white-bg); color: var(--cvet-white); border-color: var(--cvet-white-border); } .badge-cvet-white::before { background: var(--cvet-white); box-shadow: none; } .badge-cvet-red { background: var(--cvet-red-bg); color: var(--cvet-red); border-color: var(--cvet-red-border); } .badge-cvet-red::before { background: var(--cvet-red); box-shadow: 0 0 6px color-mix(in srgb, var(--cvet-red) 50%, transparent); } .badge-cvet-pink { background: var(--cvet-pink-bg); color: var(--cvet-pink); border-color: var(--cvet-pink-border); } .badge-cvet-pink::before { background: var(--cvet-pink); box-shadow: 0 0 6px color-mix(in srgb, var(--cvet-pink) 50%, transparent); } /* ══════════════════════ Фитосанитарное состояние — плашка-кнопка (20.08.2026) ══════════════════════ .badge уже задаёт весь визуал (фон/паддинги/радиус) — здесь только то, что нужно ИМЕННО потому, что это