/* Написано Codex, 12.11.2026. Исходный интерфейс и бизнес-логику написал Дима.
 * Это слой оформления поверх существующих классов: HTML форм и обработчики
 * остаются прежними. Префикс html[data-gronn-theme] ограничивает действие теми
 * страницами, где подключён gronn-glass.js. !important нужен для переопределения
 * старых inline-стилей и <style>, приходящих с AJAX-фрагментами справочников.
 * Фирменные цвета взяты из указанного пользователем GRONN Liquid Glass:
 * синий #1644D5, тёмно-синий #0B3577, зелёный #A3C935, лайм #E1FF67.
 */
@font-face{font-family:GronnGolos;src:url('./golos.ttf') format('truetype');font-weight:100 900;font-display:swap}
/* Написано Codex: единые токены. Для изменения темы достаточно менять этот блок. */
html[data-gronn-theme]{--gg-blue:#1644d5;--gg-lime:#a3c935;--gg-text:#203858;--gg-muted:#526b8c;--gg-bg:#e7eef8;--gg-solid:#f0f5fd;--gg-field:#ffffffe0;--gg-border:#ffffffed;--gg-line:#1644d51b;--gg-head:#e5eefb;--gg-glass:linear-gradient(135deg,#ffffffc7,#ffffff70 65%,#e4efff99);--gg-shadow:inset 0 1px 0 #ffffffee,0 16px 48px #0b357710;--gg-accent:linear-gradient(135deg,#1644d5,#006aff);color-scheme:light}
html[data-gronn-theme=dark]{--gg-blue:#a8caff;--gg-lime:#e1ff67;--gg-text:#eef5ff;--gg-muted:#adc2e0;--gg-bg:#071633;--gg-solid:#142c50;--gg-field:#10264b;--gg-border:#bed5ff35;--gg-line:#a8c7ff26;--gg-head:#19355a;--gg-glass:linear-gradient(140deg,#e7f0ff18,#c5ddff08 65%,#88b8ff12);--gg-shadow:inset 0 1px 0 #e6f2ff35,0 16px 48px #01091935;color-scheme:dark}
html[data-gronn-theme] body{font-family:GronnGolos,Inter,Arial,sans-serif!important;color:var(--gg-text)!important;background:var(--gg-bg)!important;isolation:isolate}
/* Написано Codex: фиксированный декоративный фон не перехватывает клики. */
html[data-gronn-theme] body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 90% 0%,#bad3ff,transparent 52%),radial-gradient(ellipse at 0% 80%,#d4e6ff,transparent 55%),linear-gradient(125deg,#f5f8ff,#e3eaf4)}
html[data-gronn-theme=dark] body::before{background:radial-gradient(ellipse at 90% 0%,#1644d577,transparent 52%),radial-gradient(ellipse at 0% 80%,#0b357799,transparent 55%),linear-gradient(125deg,#06122d,#102852)}
html[data-gronn-theme] body::after{content:'';position:fixed;inset:-15%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 45%,#006aff14,transparent 35%),radial-gradient(ellipse at 80% 90%,#a3c93512,transparent 30%)}
html[data-gronn-effects=on] body::after{animation:gronn-ambient 20s ease-in-out infinite alternate}
@keyframes gronn-ambient{to{transform:translate3d(3%,-3%,0) scale(1.06)}}
/* Написано Codex: оболочка кабинета. Сохраняем механизм горизонтального меню Димы. */
html[data-gronn-theme] body :is(.home-desktop1,.home-frame1){background:transparent!important}
html[data-gronn-theme] body .home-frame2{background:var(--gg-glass)!important;border:1px solid var(--gg-border);box-shadow:var(--gg-shadow);backdrop-filter:blur(24px);border-radius:28px}
html[data-gronn-theme] body .content-area{padding:28px 28px 76px;scrollbar-color:var(--gg-blue) transparent}
html[data-gronn-theme] body .home-imageservicedesk1{filter:brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(2800%) hue-rotate(225deg);height:37px;top:24px}
html[data-gronn-theme=dark] body .home-imageservicedesk1{filter:brightness(0) invert(1)}
html[data-gronn-theme] body :is(.dashboard-button,.dispatcher-button){background:var(--gg-glass)!important;border:1px solid var(--gg-border);box-shadow:var(--gg-shadow);border-radius:15px;backdrop-filter:blur(20px)}
html[data-gronn-theme] body :is(.dashboard-button-text,.dispatcher-button-text){color:var(--gg-blue)!important;font-size:14px;font-weight:600}
html[data-gronn-theme] body :is(.mobile-sidebar,.dropdown-menu,.more-dropdown,.user-dropdown,.dropdown-content){background:var(--gg-solid)!important;color:var(--gg-text)!important;border:1px solid var(--gg-line);box-shadow:var(--gg-shadow)}
html[data-gronn-theme] body :is(.mobile-sidebar a,.dropdown-item){color:var(--gg-text)!important;border-color:var(--gg-line)}
html[data-gronn-theme] body .home-image2{border:2px solid var(--gg-border);box-shadow:var(--gg-shadow);height:50px;width:50px;top:16px}
/* Написано Codex: кнопка мобильного меню сохраняет контраст независимо от темы. */
html[data-gronn-theme] body .mobile-menu-btn{background:var(--gg-solid)!important;color:var(--gg-blue)!important;border:1px solid var(--gg-border);border-radius:12px}
html[data-gronn-theme] body .greeting-text{background:var(--gg-glass)!important;color:var(--gg-text)!important;border:1px solid var(--gg-border);border-radius:20px;padding:18px 24px;box-shadow:var(--gg-shadow);font-size:clamp(18px,2vw,26px)}
/* Написано Codex: панели, справочники, карточки услуг и модальные окна.
 * Фон модального окна непрозрачен: текст таблицы позади не должен просвечивать. */
html[data-gronn-theme] body :is(.workspace-menu-action,.section-item,.card,.bloki,.directories-container,.directory-content,.filter-panel,.filters-container,.stats-card,.stat-card,.chart-container,.report-container,.table-container,.sqcdp-card){background:var(--gg-glass)!important;border:1px solid var(--gg-border)!important;box-shadow:var(--gg-shadow)!important;border-radius:22px!important;color:var(--gg-text)!important;backdrop-filter:blur(18px) saturate(135%)}
html[data-gronn-theme] body :is(.servicedesk-menu,.directories-menu){padding:12px 0}
/* Написано Codex: внутреннее меню Димы имело непрозрачный светлый фон.
 * Прозрачность здесь обязательна, иначе стеклянные карточки в тёмной теме
 * просвечивают до белой подложки, и светлый текст становится нечитаемым. */
html[data-gronn-theme] body .directories-menu{background:transparent!important}
/* Написано Codex: две строки справочников помещаются на обычном ноутбуке.
 * На телефоне сохраняется исходная одноколоночная сетка и прокрутка. */
html[data-gronn-theme] body .directories-menu{padding:18px!important}
html[data-gronn-theme] body .directories-title{margin-bottom:24px;font-size:26px}
html[data-gronn-theme] body .directories-sections{gap:18px;flex:0;align-content:start}
html[data-gronn-theme] body .section-item{min-height:174px;height:auto;padding:22px 16px}
html[data-gronn-theme] body .section-name{font-size:15px;line-height:1.4;hyphens:none;overflow-wrap:normal;word-break:normal}
html[data-gronn-theme] body .section-icon{margin-bottom:16px}
html[data-gronn-theme] body .section-icon-image{width:50px;height:50px}
html[data-gronn-theme=dark] body .section-icon img{filter:invert(1);opacity:.85}
/* Написано Codex: контейнеры таблиц внутри восьми справочников. */
html[data-gronn-theme] body :is(.directory-header,[class$="-grid-container"],.grid-header,.grid-toolbar,.directory-toolbar){background:var(--gg-solid)!important;color:var(--gg-text)!important;border-color:var(--gg-line)!important}
html[data-gronn-theme] body [class*="-directory-section"]{background:transparent!important;border-color:var(--gg-line)!important}
html[data-gronn-theme] body .workspace-menu-action{min-height:215px;padding:28px;overflow:hidden}
html[data-gronn-theme] body :is(.workspace-menu-action,.section-item){transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
html[data-gronn-effects=on] body :is(.workspace-menu-action,.section-item):hover{transform:translateY(-4px);border-color:var(--gg-blue)!important;box-shadow:0 20px 45px #1644d522!important}
html[data-gronn-theme] body :is(.servicedesk-icon,.servicedesk-brand,.section-icon){background:var(--gg-head)!important;color:var(--gg-blue)!important;border-radius:16px}
html[data-gronn-theme] body :is(.servicedesk-header,.card-header,.modal-header,.modal-footer){border-color:var(--gg-line)!important}
html[data-gronn-theme] body :is(.servicedesk-menu h2,.directories-title,.section-name,h1,h2,h3,h4,h5,h6){color:var(--gg-text)!important;letter-spacing:-.025em}
html[data-gronn-theme] body :is(.servicedesk-header p,.workspace-menu-action p,.text-muted,.profile-info,small){color:var(--gg-muted)!important}
html[data-gronn-theme] body :is(.text-dark,.text-body,.card-body,.form-label,label){color:var(--gg-text)!important}
html[data-gronn-theme] body :is(.modal-content,.machine-modal-content){background:var(--gg-solid)!important;color:var(--gg-text)!important;border:1px solid var(--gg-border);border-radius:22px;box-shadow:0 30px 90px #0004}
html[data-gronn-theme] body :is(.card-header,.block-header){background:var(--gg-head)!important;color:var(--gg-blue)!important;border-bottom:1px solid var(--gg-line)}
/* Написано Codex: компактный профиль. Меняем только размеры, данные остаются PHP Димы. */
html[data-gronn-theme] body .fon-profile{height:280px!important;min-height:280px;background-color:#1644d5;background-image:radial-gradient(ellipse at 85% 15%,#63a5ff99,transparent 50%),linear-gradient(125deg,#0b3577,#1644d5 55%,#006aff);border-radius:24px!important;box-shadow:var(--gg-shadow)}
html[data-gronn-theme] body .poloska-profile{height:105px!important;background:var(--gg-field)!important;border:1px solid var(--gg-border)!important;backdrop-filter:blur(24px)}
html[data-gronn-theme] body .user-photo{width:132px;height:132px;left:100px;top:69%;border:5px solid var(--gg-solid);box-shadow:0 8px 25px #07163325}
html[data-gronn-theme] body .text-offset{margin-left:190px}
html[data-gronn-theme] body .bloki{min-height:250px!important}
html[data-gronn-theme] body .bloki p[style*="min-height"]{min-height:180px!important}
/* Написано Codex: единый вид форм и таблиц, включая загружаемые AJAX-фрагменты. */
html[data-gronn-theme] body :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea,.form-control,.form-select){background-color:var(--gg-field)!important;color:var(--gg-text)!important;border:1px solid var(--gg-line)!important;border-radius:11px;box-shadow:none;accent-color:#1644d5}
html[data-gronn-theme] body :is(input,textarea)::placeholder{color:var(--gg-muted)!important;opacity:.8}
html[data-gronn-theme] body :is(input,select,textarea):focus{border-color:var(--gg-blue)!important;outline:3px solid #006aff25;outline-offset:1px}
html[data-gronn-theme] body table{--bs-table-bg:transparent;--bs-table-color:var(--gg-text);--bs-table-striped-bg:var(--gg-line);--bs-table-striped-color:var(--gg-text);color:var(--gg-text)!important;background:transparent!important}
html[data-gronn-theme] body :is(table td,table th){color:var(--gg-text)!important;border-color:var(--gg-line)!important;background-color:transparent!important}
html[data-gronn-theme] body table thead th{background:var(--gg-head)!important;color:var(--gg-blue)!important;font-weight:600}
html[data-gronn-theme] body tbody tr:nth-child(even){background-color:var(--gg-line)}
html[data-gronn-theme] body tbody tr:hover{background-color:#006aff12}
/* Написано Codex: нижние панели таблиц также следуют выбранной теме. */
html[data-gronn-theme] body :is(.grid-pagination,.pagination-container,.pagination-controls){background:var(--gg-solid)!important;color:var(--gg-text)!important;border-color:var(--gg-line)!important}
html[data-gronn-theme] body :is(.page-link,.pagination-btn){background:var(--gg-field)!important;color:var(--gg-blue)!important;border-color:var(--gg-line)!important}
html[data-gronn-theme] body td :is(em,i,.text-secondary){color:var(--gg-muted)!important}
html[data-gronn-theme] body :is(.btn-primary,.add-btn,.save-btn){background:var(--gg-accent)!important;color:#fff!important;border:1px solid #4a7aff!important;border-radius:12px;box-shadow:0 6px 18px #1644d522}
html[data-gronn-theme] body :is(.btn-light,.btn-outline-primary,.back-btn,.btn-secondary){background:var(--gg-field)!important;color:var(--gg-blue)!important;border:1px solid var(--gg-line)!important;border-radius:12px}
html[data-gronn-theme] body :is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--gg-blue);outline-offset:3px}
/* Написано Codex: вход и подприложение ОТК используют ту же палитру. */
html[data-gronn-theme] body .login-container .card{width:min(420px,92vw)!important;padding:12px}
html[data-gronn-theme=dark] body .login-container .logo-container img{filter:brightness(0) invert(1)}
html[data-gronn-theme] body .navbar{background:linear-gradient(120deg,#0b3577ee,#1644d5dd)!important;box-shadow:0 8px 30px #0b357722;backdrop-filter:blur(20px)}
html[data-gronn-theme] body :is(.navbar .nav-link,.navbar .user-name,.navbar .user-email){color:#fff!important}
html[data-gronn-theme] body .navbar .nav-link:is(.active,:hover){background:#ffffff24!important;border-radius:12px}
html[data-gronn-theme] body :is(.bg-white,.bg-gray-50,.bg-gray-100){background-color:var(--gg-solid)!important;color:var(--gg-text)!important}
html[data-gronn-theme] body :is(.text-gray-900,.text-gray-800,.text-gray-700){color:var(--gg-text)!important}
html[data-gronn-theme] body :is(.hero-banner,.sqcdp-hero){background:linear-gradient(125deg,#0b3577,#1644d5 60%,#006aff)!important;border-radius:25px;border:1px solid #ffffff40;box-shadow:0 16px 45px #1644d522}
html[data-gronn-theme] body :is(.hero-banner,.sqcdp-hero,.warehouse-heading,.movement-overview-banner) :is(h1,h2,h3){color:#fff!important}
/* Написано Codex: подписи SQCDP должны оставаться читаемыми в обеих темах.
 * Сигнальные цвета дней и мини-показателей сохраняем: они кодируют состояние. */
html[data-gronn-theme] body :is(.sqcdp-caption,.sqcdp-card-arrow,.sqcdp-card-foot){color:var(--gg-text)!important}
html[data-gronn-theme] body .sqcdp-trend-card{background:var(--gg-glass)!important;border:1px solid var(--gg-border);color:var(--gg-text)!important;box-shadow:var(--gg-shadow)}
html[data-gronn-theme] body .sqcdp-trend-card :is(span,p){color:var(--gg-muted)!important}
html[data-gronn-theme] body .sqcdp-trend-card svg text{fill:var(--gg-muted)!important}
/* Написано Codex: фиксированные переключатели. Отступ в content-area позволяет
 * прокрутить последнюю строку выше панели. В печати панель полностью скрыта. */
html[data-gronn-theme] body .gronn-appearance{position:fixed;right:28px;bottom:17px;z-index:1035;display:flex;gap:6px;padding:5px;border:1px solid var(--gg-border);border-radius:24px;background:var(--gg-solid);box-shadow:var(--gg-shadow)}
html[data-gronn-theme] body .gronn-appearance button{padding:9px 14px;border:0;border-radius:20px;background:transparent;color:var(--gg-text);font:500 12px GronnGolos,Arial,sans-serif;cursor:pointer}
html[data-gronn-theme] body .gronn-appearance button:hover{background:var(--gg-head)}
html[data-gronn-theme] body .gronn-appearance button[aria-pressed=true]{color:var(--gg-blue)}
@media(max-width:768px){
 html[data-gronn-theme] body .content-area{padding:16px 10px 80px}
 html[data-gronn-theme] body .home-imageservicedesk1{height:30px;top:27px;filter:brightness(0) invert(1)}
 html[data-gronn-theme] body .gronn-appearance{right:12px;bottom:12px}
 html[data-gronn-theme] body .fon-profile{height:245px!important;min-height:245px}
 html[data-gronn-theme] body .user-photo{width:82px;height:82px;left:55px;top:70%}
 html[data-gronn-theme] body .text-offset{margin-left:105px}
 html[data-gronn-theme] body .group-bloki{grid-template-columns:1fr;gap:16px}
 html[data-gronn-theme] body .workspace-menu-action{min-height:175px}
}
/* Системная настройка уменьшения движения имеет приоритет над переключателем. */
html[data-gronn-effects=off] body::after{animation:none}
html[data-gronn-effects=off] body :is(.workspace-menu-action,.section-item){transition:none}
@media(prefers-reduced-motion:reduce){html[data-gronn-theme] body::after{animation:none}html[data-gronn-theme] body :is(.workspace-menu-action,.section-item){transition:none;transform:none!important}}
@media print{html[data-gronn-theme] body{background:white!important;color:black!important}html[data-gronn-theme] body::before,html[data-gronn-theme] body::after,.gronn-appearance{display:none!important}}