/* MEDOGLYAD Design System 2.0 — оболонка. * * Цей файл підключається ОСТАННІМ і володіє каркасом: рамкою застосунку, * заголовками розділів, картками, таблицями й контролами. Розділи лишаються * там, де були, — вони просто починають виглядати як одна річ, а не як * чотири різні панелі, зроблені в різні місяці. * * Три правила, з яких усе інше випливає: * * 1. Ієрархію тримають розмір і повітря, а не рамки й тіні. Тінь у спокої — * жодної; вона зʼявляється тільки там, де щось справді підіймається над * сторінкою (діалог, спливаюче). * 2. Блок — це картка з волосяною лінією й великим радіусом. Усе, що всередині, * дихає одним кроком: 20px по краях, 16px між елементами. * 3. Один вимір тексту на всю сторінку. Заголовок розділу, підпис і зміст * стоять на одній лівій межі — око не бігає. */ /* Значення живуть у tokens.css — там один корінь на всю систему (§14.4 ТЗ). * Тут лише правила. Якщо потрібне нове число — воно заводиться токеном, а не * вписується сюди. */ /* ── каркас ─────────────────────────────────────────────────────────────── */ body{background:var(--surface-subtle);color:var(--text-primary);font-family:var(--font-sans)} .sidebar,aside.sidebar{ width:var(--nav-width);flex:none;background:var(--surface-base); border-right:var(--hairline);padding:var(--space-4) var(--space-3) var(--space-3); } .sidebar .brand,.brand{ font-size:15px;font-weight:var(--weight-bold);letter-spacing:-.01em; color:var(--text-primary);padding:0 var(--space-2) var(--space-5); } /* Навігація: групи — це підписи, а не пункти. Різниця має читатись без * додаткової лінії, самим лише розміром і кольором. */ .nav-group>button.nav-group-title,.nav-group-title{ display:flex;align-items:center;justify-content:space-between;width:100%; font-size:var(--text-label);font-weight:var(--weight-bold);letter-spacing:.06em; text-transform:uppercase;color:var(--text-muted);min-height:44px; padding:var(--space-4) var(--space-2) var(--space-1);background:none;border:0; } .sidebar nav button[data-view],.nav-group-flat>button,.nav-item,.contour-item{ display:flex;align-items:center;gap:var(--space-2);width:100%; /* 44px — не оформлення, а §13.5 ТЗ: розмір, у який влучає палець. Доти цю * висоту тримала власна копія правил в admin.html — єдине, що з неї ще * діяло, — а решта кабінетів лишалась із 36px. */ min-height:44px;padding:8px 10px;margin:1px 0;border:0;border-radius:var(--radius-chip); background:transparent;color:var(--text-secondary);text-align:left; font-size:var(--text-secondary-size);font-weight:var(--weight-medium); transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease); } .sidebar nav button[data-view]:hover,.nav-item:hover,.contour-item:hover{ background:var(--surface-sunken);color:var(--text-primary); } .sidebar nav button[data-view].active,.sidebar nav button[data-view].on, .sidebar nav button[data-view][aria-current="page"], .nav-item.active,.nav-item.on{ /* §6.1 ТЗ: активний пункт — світла брендова підкладка й брендовий напис. * Темно-синій --brand-ink читався як «звичайний текст, лише жирніший». */ background:var(--brand-primary-soft);color:var(--brand-primary);font-weight:var(--weight-semibold); } /* Смуга-стрічка: кабінет без шухляди на вузькому екрані. * * Панель управління ховає меню в шухляду — там розділів під тридцять. Кабінети * з десятком розділів шухляди не варті: смуга просто лягає рядком чипів над * змістом. Без цього правила пункт лишається на всю ширину (`width:100%` * вище), і на телефоні 390px меню займає перші 614 пікселів з 844 — людина * відкриває свій кабінет і не бачить у ньому нічого, крім меню. * * Клас потрібен саме класом, а не медіазапитом у сторінці: `shell.css` * підключається останнім, і правило тієї самої ваги зі сторінки програє йому * незалежно від того, що написано в медіазапиті. */ @media (max-width:860px){ .sidebar.sidebar-strip{ width:auto;border-right:0;border-bottom:var(--hairline); padding:var(--space-3) var(--space-3) var(--space-2); } .sidebar.sidebar-strip nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-1)} .sidebar.sidebar-strip nav button[data-view]{width:auto;margin:0} .sidebar.sidebar-strip .nav-group-title{display:none} } /* ── верхня смуга ───────────────────────────────────────────────────────── */ .topbar{ height:var(--top-height);display:flex;align-items:center;gap:var(--space-3); padding:0 var(--gutter);background:color-mix(in srgb,var(--surface-base) 88%,transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:var(--hairline);position:sticky;top:0;z-index:40; } /* Синя смужка під шапкою була декорацією й тільки заважала читати межу. */ .topbar::after{display:none} .topbar .role-badge{ font-size:var(--text-label);font-weight:var(--weight-semibold);letter-spacing:.02em; padding:3px 8px;border-radius:var(--radius-pill); background:var(--surface-sunken);color:var(--text-secondary);border:var(--hairline); } .topbar>*{white-space:nowrap} /* ── робоче поле ────────────────────────────────────────────────────────── */ main{ background:var(--surface-subtle); padding:var(--space-6) var(--gutter) var(--space-8); } main>.view,main>section.view{max-width:var(--measure);margin:0 auto} .view{display:flex;flex-direction:column;gap:var(--space-5)} /* Заголовок розділу: надпис, назва, пояснення — на одній лівій межі. */ .page-head{ display:flex;align-items:flex-start;justify-content:space-between; gap:var(--space-4);flex-wrap:wrap;margin:0 0 var(--space-2);padding:0;border:0; } .page-head>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0} .eyebrow{ font-size:var(--text-label);font-weight:var(--weight-bold);letter-spacing:.12em; text-transform:uppercase;color:var(--text-muted); } .page-head h1{ font-size:clamp(24px,2.4vw,32px);font-weight:var(--weight-bold); letter-spacing:-.022em;line-height:1.12;margin:0;color:var(--text-primary); } .page-head .muted,.page-head p{font-size:var(--text-body);color:var(--text-secondary);margin:2px 0 0} .page-head .actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap} /* ── блок ───────────────────────────────────────────────────────────────── */ .panel,.card,.tile{ background:var(--surface-base);border:var(--hairline);border-radius:var(--radius-block); box-shadow:none;overflow:hidden; } .panel-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4); padding:var(--space-4) var(--space-5);border-bottom:var(--hairline);flex-wrap:wrap; } .panel-head h2,.panel-head h3{ font-size:var(--text-section);font-weight:var(--weight-semibold); letter-spacing:-.01em;margin:0;color:var(--text-primary); } .panel-head .muted,.panel-head p{font-size:var(--text-secondary-size);color:var(--text-muted);margin:3px 0 0} .panel-head .actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap} .panel>.panel-body,.panel-body{padding:var(--space-5)} .panel>.table-wrap{border:0} /* ── числа ──────────────────────────────────────────────────────────────── */ .kpis,.metrics{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-3);margin:0;background:none;border:0;border-radius:0;overflow:visible; } .kpi,.metric{ display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start; padding:var(--space-4) var(--space-5);background:var(--surface-base); border:var(--hairline);border-radius:var(--radius-block);text-align:left; transition:border-color var(--motion-base) var(--ease); } .kpi::before,.metric::before,.contours-top .contour::before,.ai-panel::before{display:none} .kpi:hover,.metric:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--brand-primary-border)} .kpi strong,.metric strong{ font-size:32px;font-weight:var(--weight-bold);line-height:1.05; letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary); } .kpi span,.metric span{font-size:var(--text-secondary-size);color:var(--text-muted);font-weight:var(--weight-medium)} .kpi-attention,.kpi.warm{background:var(--status-warning-soft);border-color:var(--status-warning)} .kpi-attention strong,.kpi.warm strong{color:var(--status-warning-ink)} /* Плитка показника має тон, коли число щось означає: прострочене — тривога, * виконане — спокій. Ці три тони жили власною копією в кабінеті роботодавця, * а в системі був лише теплий (`.kpi-attention`); тепер вони тут, і теплий — * те саме, що й був, просто названий поруч із рештою. * * Підпис на тонованій плитці — `--text-secondary`, а не `--text-muted`: * приглушений на спокійній підкладці дає 4,34:1 при потрібних 4,5 (§13.5, * WCAG AA). Знайдено рахунком; на око різниці немає. */ .kpi.hot{background:var(--status-danger-soft);border-color:var(--status-danger)} .kpi.hot strong{color:var(--status-danger-ink)} .kpi.good{background:var(--status-success-soft);border-color:var(--status-success)} .kpi.good strong{color:var(--status-success-ink)} .kpi-attention span,.kpi.warm span,.kpi.hot span,.kpi.good span{color:var(--text-secondary)} /* ── контури на головній ────────────────────────────────────────────────── */ .contours,.contours.contours-top{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-3);max-width:var(--measure);margin:0 auto;padding:0; } .contour{ background:var(--surface-base);border:var(--hairline);border-radius:var(--radius-block); overflow:hidden;transition:border-color var(--motion-base) var(--ease); } .contour:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--brand-primary-border)} .contours-top .contour:not(:first-child)::after{display:none} .contour-head{padding:var(--space-4) var(--space-4);gap:var(--space-3);background:none;border:0} .contour-index{ width:26px;height:26px;border-radius:var(--radius-pill);font-size:var(--text-body); font-weight:var(--weight-bold);background:var(--brand-primary-soft);color:var(--brand-primary); } .contour-title strong{font-size:var(--text-card);font-weight:var(--weight-semibold);letter-spacing:-.01em} .contour-status{font-size:var(--text-meta);font-weight:var(--weight-semibold);color:var(--brand-primary)} /* ── таблиці ────────────────────────────────────────────────────────────── */ .table-wrap{overflow-x:auto;border:0;border-radius:0;background:none} table{width:100%;border-collapse:collapse;font-size:var(--text-secondary-size)} /* Таблиця спокійна: жодних вертикальних ліній, жодної шахівниці — самі * горизонтальні межі, як просить §6.6 ТЗ. Шапка світло-сіра, щоб відділятись * від рядків без рамки. */ thead th{ position:sticky;top:0;z-index:1;background:var(--surface-subtle); padding:10px var(--space-5);text-align:left; font-size:var(--text-meta);font-weight:var(--weight-semibold);letter-spacing:.04em; color:var(--text-muted);border-bottom:var(--hairline); } /* §6.6 ТЗ: рядок 52–56px. Саме висота рядка, а не відступ: відступом рівно * 52 не вийде — рядок із кнопкою виросте до 64, а рядок з одним словом сяде на * 44. `height` для рядка таблиці браузер розуміє як мінімум: короткий рядок * підтягується до 52, довгий росте далі. Заміряно до зміни: 44 у рядку з одним * рядком тексту, 64 там, де імʼя переноситься, 89 там, де три кнопки. * * Межа 721px тут не про смаки: на вузькому екрані сторінки перетворюють рядок * таблиці на картку (`display:block`), а для блока `height` — це вже не мінімум, * а точний розмір. Заміряно на 390px: рядок із вмістом 270–328px діставав рівно * 52 і обрізав усе решту. */ @media (min-width:721px){ tbody tr{height:52px} } tbody td{ padding:10px var(--space-5);border-bottom:var(--hairline); color:var(--text-primary);vertical-align:middle;line-height:var(--leading-body); } tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--row-hover)} tbody tr[aria-selected="true"] td,tbody tr.selected td{background:var(--row-selected)} td:has(input),td:has(select){padding-top:8px;padding-bottom:8px} /* ── контроли ───────────────────────────────────────────────────────────── */ /* Кнопка — 42px заввишки й 18px повітря з боків (ТЗ §6.4). Дрібна кнопка * читається як підпис і промахується пальцем; §13.5 просить 44px на дотик. */ button.primary,button.secondary,button.ghost,.drop,.submit{ border-radius:var(--radius-control);font-size:var(--text-body); font-weight:var(--weight-semibold);min-height:42px;padding:0 18px;line-height:1.3; display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease); } /* У рядку таблиці кнопка нижча, інакше рядок виростає до 70px і таблиця * перестає читатись як список. 34px + 10px відступів = ті самі 54px рядка. */ tbody td button.primary,tbody td button.secondary,tbody td button.ghost,tbody td .drop{ min-height:34px;padding:0 12px;font-size:var(--text-secondary-size); } button.primary,.submit{background:var(--brand-primary);border:1px solid var(--brand-primary);color:var(--on-brand)} button.primary:hover,.submit:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover)} button.secondary,.drop{background:var(--surface-base);border:1px solid var(--border-strong);color:var(--text-primary)} button.secondary:hover,.drop:hover{background:var(--surface-sunken);border-color:var(--text-muted)} button.ghost{background:transparent;border:1px solid transparent;color:var(--text-secondary)} button.ghost:hover{background:var(--surface-sunken);color:var(--text-primary)} :focus-visible{outline:none;box-shadow:var(--focus-ring)} /* Поле — тієї ж висоти, що й кнопка поруч (ТЗ §6.5): рядок форми стоїть * рівно, а не сходинками. */ input,select,textarea,.search{ border-radius:var(--radius-control);border:1px solid var(--border-strong); background:var(--surface-base);color:var(--text-primary); min-height:42px;padding:0 12px;font-size:var(--text-body);font-family:inherit; } textarea{padding:10px 12px;min-height:88px;line-height:var(--leading-body)} input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;padding:0} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-primary);box-shadow:var(--focus-ring)} /* Перемикач і галочка — не поле вводу: квадратне кільце фокуса поля навколо * круглої радіокнопки виглядало як синій квадрат за нею. Фокус з клавіатури — * контуром, що йде за формою елемента. */ input[type=radio],input[type=checkbox]{box-shadow:none} input[type=radio]{border-radius:50%} input[type=radio]:focus,input[type=checkbox]:focus{box-shadow:none} input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px} /* Сесія вкладки відновлюється (session-boot.js): форму входу не показуємо, * поки кабінет не скаже, чи сесія жива. Через 8 с — показуємо все одно. */ html.session-restoring #login-page,html.session-restoring #login{visibility:hidden;animation:session-reveal 0s linear 8s forwards} @keyframes session-reveal{to{visibility:visible}} html.session-restoring body::after{content:'';position:fixed;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%; border:3px solid var(--border-default,#DCE8F5);border-top-color:var(--brand-primary,#176CC1);animation:session-spin .8s linear infinite,session-hide 0s linear 8s forwards;z-index:1000} @keyframes session-spin{to{transform:rotate(360deg)}} @keyframes session-hide{to{visibility:hidden}} label{font-size:var(--text-secondary-size);font-weight:var(--weight-semibold);color:var(--text-primary)} .field{margin-bottom:var(--space-3)} .hint{font-size:var(--text-meta);color:var(--text-muted);line-height:1.5} /* ── стани ──────────────────────────────────────────────────────────────── */ .empty{ padding:var(--space-6) var(--space-5);text-align:center; color:var(--text-muted);font-size:var(--text-secondary-size); } /* Той самий блок, але коли розділ не завантажився: причина лишається на екрані * замість тосту, що зникає за три секунди. */ .empty.empty-failed{color:var(--status-danger-ink);background:var(--status-danger-soft);border-radius:var(--radius-md);font-weight:var(--weight-medium)} /* Повідомлення за замовчуванням — нейтральне. Раніше базовий .notice був * червоним, і кожен спокійний рядок стану читався як помилка: «Статус QUEUED: * виконується» лякав людину посеред нормального оновлення. Тривога має бути * винятком, який позначають явно, а не тлом усіх повідомлень. */ .notice{ margin:var(--space-3) var(--space-5) var(--space-4);padding:10px 12px; border-radius:var(--radius-control);font-size:var(--text-secondary-size); background:var(--status-info-soft);color:var(--status-info-ink); border:1px solid var(--status-info); } .notice.error{background:var(--status-danger-soft);color:var(--status-danger-ink);border-color:var(--status-danger)} .notice.warning{background:var(--status-warning-soft);color:var(--status-warning-ink);border-color:var(--status-warning)} .notice.success,.notice.ok{background:var(--status-success-soft);color:var(--status-success-ink);border-color:var(--status-success)} .status-badge,.role-badge,.pill{ display:inline-flex;align-items:center;gap:6px;padding:4px 8px; border-radius:var(--radius-pill);font-size:var(--text-meta); font-weight:var(--weight-semibold);letter-spacing:.01em; background:var(--surface-sunken);color:var(--text-secondary);border:var(--hairline); } /* ── Іконки ───────────────────────────────────────────────────────────── * §6.2 ТЗ: один набір контурних іконок, 18–20px, товщина 1.7–2px, круглі * кінці — і не змішувати його з емодзі й випадковими символами. Доти кнопки * малювались гліфами: ▶ ■ ◀◀ ▶▶ ✕ → і двома емодзі 🔊 🎤, тобто кожна * операційна система й кожен шрифт показували їх по-своєму, а емодзі ще й * кольоровими. Набір лежить у сторінці як , малюється контуром * поточного кольору тексту й тому однаковий і в світлій темі, і в темній. */ .icon-sprite{position:absolute;width:0;height:0;overflow:hidden} .icon{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-3px; fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} button .icon{pointer-events:none} /* ── діалоги: єдине, що справді над сторінкою ───────────────────────────── */ dialog{ border:var(--hairline);border-radius:var(--radius-block); box-shadow:var(--shadow-overlay);background:var(--surface-base);color:var(--text-primary); padding:0;max-width:min(680px,calc(100vw - 48px)); } dialog::backdrop{background:var(--scrim);backdrop-filter:blur(2px)} .dialog-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4); padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:var(--hairline); } .dialog-head h2{font-size:19px;font-weight:var(--weight-bold);letter-spacing:-.015em;margin:0} .dialog-body{padding:var(--space-5)} /* Дія лишається на видноті. Форма працівника має 1199px змісту, а вікно на * ноутбуці — 662–762: доти, щоб дістатись «Додати», треба було прокрутити * діалог до кінця, і на короткому екрані кнопка просто йшла з поля зору. На * телефоні цю смугу вже прибили до низу; тепер так само й на великому екрані. */ .dialog-actions{ position:sticky;bottom:0;z-index:1; display:flex;justify-content:flex-end;gap:var(--space-2); padding:var(--space-4) 0;margin-top:var(--space-4);border-top:var(--hairline); background:var(--surface-base); } /* ── спокій ─────────────────────────────────────────────────────────────── */ /* Рух лишається там, де він щось означає, і зникає там, де був прикрасою. */ .kpi,.ac-item,.contours-top .contour,.kanban-card{transition:border-color var(--motion-base) var(--ease)} .kpi:hover,.ac-item:hover,.contours-top .contour:hover,.kanban-card:hover{ transform:none;box-shadow:var(--shadow-sm);border-color:var(--brand-primary-border); } @media (max-width:900px){ :root{--gutter:var(--gutter-tight)} main{padding:var(--space-5) var(--gutter) var(--space-7)} .panel-head,.panel-body{padding-left:var(--space-4);padding-right:var(--space-4)} thead th,tbody td{padding-left:var(--space-4);padding-right:var(--space-4)} } /* ── верхня смуга: зліва пошук, справа все службове ─────────────────────── */ .topbar .identity{display:flex;align-items:center;gap:var(--space-2);min-width:0} .topbar .user-name{ font-size:var(--text-secondary-size);font-weight:var(--weight-semibold); color:var(--text-primary);max-width:160px;overflow:hidden;text-overflow:ellipsis; } .topbar #workspace-label{font-size:var(--text-meta);color:var(--text-muted)} @media (max-width:1200px){.topbar #workspace-label{display:none}} /* ── смуга контурів під шапкою ──────────────────────────────────────────── */ .contours.contours-top{ padding:var(--space-4) var(--gutter) 0; grid-template-columns:repeat(4,minmax(0,1fr)); } .contours-top .contour-head{padding:var(--space-3) var(--space-4)} .contours-top .contour-index{width:24px;height:24px;font-size:11px} @media (max-width:1100px){.contours.contours-top{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.contours.contours-top{grid-template-columns:1fr}} /* ── внутрішнє поле блока ───────────────────────────────────────────────── */ /* Усе, що лежить у блоці просто так, дістає ті самі краї, що й заголовок: * інакше числа й підписи прилипають до рамки. */ .panel>:not(.panel-head):not(.table-wrap):not(.empty):not(.notice):not(.panel):not(form){ padding-left:var(--space-5);padding-right:var(--space-5); } .panel>:last-child{padding-bottom:var(--space-5)} .panel>.panel-head+*{padding-top:var(--space-4)} .panel>.table-wrap:first-child{padding-top:0} .today-stats,.today-stat{gap:var(--space-4)} /* Порожній стан усередині блока не потребує ще однієї рамки. */ .panel>.empty{border-top:var(--hairline)} /* У смузі контурів лишається те, що відрізняє контур один від одного: назва і * стан. Опис — це довідка для першого разу, у постійній роботі він тільки * розганяє картку на чотири рядки. */ .contours-top .contour-title .muted,.contours-top .contour-head p,.contours-top .contour-desc{display:none} .contours-top .contour-title strong{font-size:var(--text-body);line-height:1.25} .contours-top .contour-head .nav-chevron{margin-left:auto} /* Фільтри стоять в один ряд із заголовком блока, а не колонкою під ним: * інакше шапка реєстру виростає вище за перші три рядки самого реєстру. */ .panel-head .actions{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-end} .panel-head .search,.panel-head select,.panel-head input{width:auto;min-width:200px;max-width:280px} .panel-head>div:first-child{min-width:0;flex:1 1 240px} /* Нижній край навігації не має ховатись під підписом версії. */ .sidebar .nav{padding-bottom:var(--space-4)} /* Картки контурів мали власне світле тло, зашите в старий шар, — у темній * темі вони світились білими плитами посеред екрана. */ .contours .contour,.contours-top .contour,.workspace .contour{ background:var(--surface-base);border:var(--hairline); } .contours .contour-head,.contours-top .contour-head{background:transparent;color:var(--text-primary)} /* ── розмір діалогу за його роботою ─────────────────────────────────────── */ /* Форма на кілька полів і редактор структури — різні речі. Вузьке вікно * форми для таблиці з колонкою дій завузьке: кнопка «Змінити» просто * обрізалась об край. */ #structure-dialog,#attestation-card-dialog,#commission-card-dialog,#ac-dialog{ max-width:min(920px,calc(100vw - 48px)); } #structure-dialog .dialog-body,#attestation-card-dialog .dialog-body{ display:flex;flex-direction:column;gap:var(--space-4); } /* Форми додавання всередині діалогу — теж блок, а не поля, що висять між * двома блоками. */ #branch-form,#department-form,#ac-workplace-form,#ac-document-form{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-3);align-items:end; padding:var(--space-4) var(--space-5); border:var(--hairline);border-radius:var(--radius-block); background:var(--surface-subtle); } #branch-form .field,#department-form .field,#ac-workplace-form .field,#ac-document-form .field{margin:0} #branch-form button,#department-form button,#ac-workplace-form button,#ac-document-form button{align-self:end} /* ── телефон ────────────────────────────────────────────────────────────── */ @media (max-width:640px){ /* Числа стають по двоє в ряд: одне число на весь екран — це не показник, * а трата екрана. */ .kpis,.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)} .kpi,.metric{padding:var(--space-3) var(--space-4)} .kpi strong,.metric strong{font-size:26px} .contours.contours-top{gap:var(--space-2);padding-top:var(--space-3)} .contours-top .contour-head{padding:var(--space-3)} .page-head h1{font-size:24px} main{padding-top:var(--space-4)} .panel-head{padding:var(--space-4)} .dialog-head,.dialog-body{padding:var(--space-4)} dialog{max-width:calc(100vw - 24px)} #structure-dialog,#attestation-card-dialog,#commission-card-dialog{max-width:calc(100vw - 24px)} } /* ── Марка ──────────────────────────────────────────────────────────────── * MEDOGLYAD — назва, OS — те, чим воно є: не «сайт із кабінетом», а * операційна система підприємства для медоглядів. Друга частина набирається * тонше й меншим кеглем: у сайдбарі мають прочитатись обидві, і жодна не * має кричати. Там, де марка вже акцентного кольору (картка входу), «OS» * іде приглушеним — інакше слово злипається в одну пляму. */ .brand-os{margin-left:.32em;font-weight:var(--weight-semibold);letter-spacing:.06em;color:var(--brand-primary)} .mark .brand-os{color:var(--text-muted)} /* ── Шлях роботодавця ───────────────────────────────────────────────────── * Кабінет побудований навколо прострочень. Але в перший день прострочень * немає — і людина лишається перед порожнім екраном, хоча закон її вже * зобовʼязав. Цей блок і є законом, розкладеним по кроках: один поточний * крок великим планом, решта — тонкою смугою прогресу. * * Правило блоку: розкритий рівно один крок. Вісім однаково розкритих * карток — це знову вибір, від якого ми людину й рятуємо. */ .journey{border:var(--hairline);border-radius:var(--radius-block);background:var(--surface-base); padding:var(--space-5);margin-bottom:var(--space-5)} .journey-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)} .journey-head h3{margin:2px 0 2px;font-size:var(--text-section);font-weight:var(--weight-bold)} .journey-head .sub{margin:0;color:var(--text-muted);font-size:var(--text-meta)} .journey-tools{display:flex;gap:var(--space-2);flex:0 0 auto} .journey-rail{display:flex;gap:5px;margin-bottom:var(--space-4)} .journey-rail i{flex:1;height:4px;border-radius:2px;background:var(--border-default);transition:background .2s ease} .journey-rail i.done{background:var(--brand-primary)} .journey-rail i.now{background:var(--brand-primary);opacity:.45} .journey-now{display:grid;grid-template-columns:38px minmax(0,1fr);gap:var(--space-4);align-items:start} .journey-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:var(--brand-primary);color:var(--text-inverse);font-weight:var(--weight-bold);font-size:var(--text-card)} .journey-now h4{margin:6px 0 6px;font-size:var(--text-card);font-weight:var(--weight-bold)} .journey-now p{margin:0 0 6px;font-size:var(--text-body);color:var(--text-secondary);max-width:70ch} .journey-now p.why{color:var(--text-muted);font-size:var(--text-meta)} .journey-norm{display:block;margin-top:8px;font-size:var(--text-meta);color:var(--text-muted)} .journey-norm a{color:var(--brand-primary)} .journey-act{margin-top:var(--space-3);display:flex;gap:var(--space-2);flex-wrap:wrap} .journey-act button{width:auto;flex:0 0 auto;padding:9px 18px} .journey-wait{margin-top:var(--space-3);font-size:var(--text-meta);color:var(--status-warning-ink)} .journey-done{margin:0;padding:0;list-style:none} .journey-done li{display:flex;align-items:center;gap:var(--space-2);padding:7px 0;border-top:var(--hairline); font-size:var(--text-body);color:var(--text-muted)} .journey-done li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; font-size:var(--text-label);font-weight:var(--weight-bold);background:var(--surface-subtle);color:var(--text-muted)} .journey-done li.is-done b{background:var(--brand-primary-soft);color:var(--brand-primary)} .journey-done li.is-done span{color:var(--text-secondary)} /* Крок, про який іде мова: підсвітка потрібна, щоб очі йшли за голосом. */ .journey-done li.speaking{background:var(--brand-primary-soft);border-radius:var(--radius-chip);padding-left:6px;padding-right:6px} .journey-done li.speaking span{color:var(--text-primary);font-weight:var(--weight-semibold)} .journey-steps{margin-top:var(--space-4)} .journey:not(.open) .journey-steps{display:none} .journey.complete .journey-num{background:var(--status-success)} @media(max-width:720px){ .journey{padding:var(--space-4)} .journey-head{flex-direction:column} .journey-tools{width:100%} /* Рівні частки ламали слова: «Розкажи по кроках» у третині 390-го екрана * виходило трьома рядками. Кнопки беруть свою ширину й переносяться цілими, * а рядок гортається, якщо не вміщаються. */ .journey-tools{flex-wrap:wrap} .journey-tools button{flex:0 1 auto;white-space:nowrap;padding:0 12px} } /* Еріка — у власному файлі /erika.css: вона живе в усіх кабінетах, зокрема * там, де shell.css не підключено (кабінет працівника). */ /* ── Розподіл по кроках (операційний контур) ────────────────────────────── * Не діаграма, а перелік заторів: скільки підприємств стоїть на кожному * кроці. Число велике, підпис малий — читається за секунду з іншого кінця * кімнати, бо саме так на цей екран і дивляться. */ .journey-spread{display:flex;flex-wrap:wrap;gap:var(--space-3)} .journey-spread-item{flex:1 1 150px;min-width:150px;border:var(--hairline);border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4);background:var(--surface-subtle)} .journey-spread-item b{display:block;font-size:26px;font-weight:var(--weight-bold);line-height:1.1;font-variant-numeric:tabular-nums} .journey-spread-item span{display:block;margin-top:4px;font-size:var(--text-meta);color:var(--text-muted)} .status-badge.wait{background:var(--status-warning-soft);color:var(--status-warning-ink);border-color:var(--status-warning)} .status-badge.ok{background:var(--status-success-soft);color:var(--status-success-ink);border-color:var(--status-success)} /* «Хід за нами»: не попередження про чужу затримку і не аварія, а власна * робота, яку ще ніхто не почав. Тому колір дії, а не тривоги — червоний тут * означав би, що підприємство, яке щойно подало список, уже щось порушило. */ .status-badge.due{background:var(--brand-primary-soft);color:var(--brand-primary);border-color:var(--brand-primary-border);font-weight:var(--weight-bold)} /* Прострочене — тон тривоги. Тонів у значка було три (очікує, зроблено, * строк), а найважливішого — «уже пізно» — не було, і кабінет роботодавця * тримав власний `.pip` саме заради нього. */ .status-badge.bad{background:var(--status-danger-soft);color:var(--status-danger-ink);border-color:var(--status-danger);font-weight:var(--weight-bold)} /* ── Підприємство в кабінеті роботодавця ────────────────────────────────── * Філія — блок із власними реквізитами й підрозділами, а не рядок таблиці: * рядок змусив би або ховати підрозділи, або повторювати назву філії в * кожному з них. Правка розкривається в самій картці — діалог тут зайвий. */ .req{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:6px var(--space-4);margin:0} .req dt{color:var(--text-muted);font-size:var(--text-meta)} .req dd{margin:0;font-size:var(--text-body);font-weight:var(--weight-semibold)} .co-branch{border:var(--hairline);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3);background:var(--surface-base)} .co-branch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)} .co-branch-head strong{display:block;font-size:var(--text-card)} .co-branch-head span{display:block;font-size:var(--text-meta);color:var(--text-muted);margin-top:2px} .co-depts{list-style:none;margin:var(--space-3) 0 0;padding:0} .co-depts li{display:flex;align-items:center;gap:var(--space-2);padding:5px 0;border-top:var(--hairline); font-size:var(--text-body);color:var(--text-secondary)} .co-depts li.muted{color:var(--text-muted)} .co-depts li em{font-style:normal;font-size:var(--text-label);color:var(--status-warning-ink)} .co-branch-form{border:var(--hairline);border-radius:var(--radius-lg);padding:var(--space-4); margin-bottom:var(--space-3);background:var(--surface-subtle)} .co-branch-form .field{margin-bottom:var(--space-3)} .co-branch-actions{display:flex;gap:var(--space-2)} /* Дві панелі на одній сторінці — це два кроки однієї справи, а не один блок: * між ними той самий крок, що й між будь-якими двома блоками. */ .panel-gap{height:var(--space-5)} /* Зовнішні підключення: позначка ліворуч, назва і подробиці праворуч. */ .integration-row{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:var(--hairline)} .integration-row:last-child{border-bottom:0} .integration-row>b{width:14px;flex:none;text-align:center} /* ── ADMIN SHELL — окрема палітра нової IA (ROADMAP.md, рішення власника) ── * Свідомо відмінні від --brand-primary / --surface- / --text-primary вище: * нова адмін-IA отримує власну світлову палітру, яка НЕ повинна протікати * в /company, /review, /doctor (вони теж на цьому shell.css) — тому все * тут заскоуплено класом .admin-shell, а не переписує :root. * .admin-shell додається лише на #app у admin.html. * ПРОВІЗОРНО: перегрупування сайдбару під нову 7-групову IA зроблено з боку * дизайну без залучення Серёги — потрібне підтвердження перед мержем, * оскільки shell.css/tokens.css/admin.html — спільні файли (AGENTS.md). * Референс макетів: https://claude.ai/artifact/1tLSRGpxkq5Bm9NauHPBZ2 */ .admin-shell{ --admin-bg:#F5F9FF; --admin-surface:#FFFFFF; --admin-primary:#1F78EA; --admin-primary-hover:#1B67CB; --admin-navy:#12356B; --admin-border:#DFE8F4; background:var(--admin-bg); } .admin-shell .sidebar,.admin-shell aside.sidebar{ background:var(--admin-surface);border-right:1px solid var(--admin-border); } .admin-shell .sidebar .brand,.admin-shell .brand{color:var(--admin-navy)} .admin-shell .sidebar nav button[data-view].active, .admin-shell .sidebar nav button[data-view].on, .admin-shell .sidebar nav button[data-view][aria-current="page"]{ background:color-mix(in srgb, var(--admin-primary) 12%, white); color:var(--admin-navy); } .admin-shell .topbar{border-bottom:1px solid var(--admin-border)} /* ── ADMIN SHELL — акцент і поля під нову палітру ──────────────────────── * Продовження блоку .admin-shell вище. Тут — лише колірні токени на вже * існуючих загальних класах (кнопки/поля/фокус), без зміни розмірів чи * відступів: table/tbody/thead навмисно не трогав — там задокументована * висота рядка (52px, §6.6 ТЗ) і тести shell-system.spec.mjs/ * patient-scale.spec.mjs, які цю висоту перевіряють. Це суто перефарбовка * поверх існуючої структури — жодних нових полів/колонок. */ .admin-shell button.primary,.admin-shell .submit{ background:var(--admin-primary-hover);border-color:var(--admin-primary-hover); } .admin-shell button.primary:hover,.admin-shell .submit:hover{ background:#164F9E;border-color:#164F9E; } .admin-shell button.secondary,.admin-shell .drop{ background:var(--admin-bg);border-color:var(--admin-border);color:var(--admin-navy); } .admin-shell input,.admin-shell select,.admin-shell textarea,.admin-shell .search{ background:var(--admin-bg);border-color:var(--admin-border);color:var(--admin-navy); } .admin-shell input:focus,.admin-shell select:focus,.admin-shell textarea:focus{ border-color:var(--admin-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--admin-primary) 20%, transparent); } .admin-shell .kpi:hover,.admin-shell .metric:hover{border-color:var(--admin-border)} /* ── Аватар-ініціали в списках людей (admin.js: avatarCell) ───────────── * Ініціали рахуються з полів, які й так прийшли з API (lastName/firstName) - * жодних нових даних. Використано у "Працівники"; той самий клас можна * повторно взяти в інших списках людей без нових правок CSS. */ .admin-shell .name-cell{display:flex;align-items:center;gap:10px} .admin-shell .avatar-badge{ display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;flex:none;border-radius:50%; background:#EAF4FF;color:var(--admin-navy); font-size:12px;font-weight:700;letter-spacing:.02em; } /* ── .overdue: клас вже використовувався в admin.js (examinations-view), але * ніде не був описаний стилем - бейдж не мав кольору взагалі. Прострочене * важливіше за поточний статус, тому overdue завжди виграє червоним. */ .status-badge.overdue{ background:var(--status-danger-soft);color:var(--status-danger-ink); border-color:var(--status-danger);font-weight:var(--weight-bold); } /* ── .ai-panel: під .admin-shell фон #app став --admin-bg (не білий), а * .ai-panel своєї підкладки не мав - .ai-note (text-muted) сидів прямо на * канвасі й контраст впав нижче 4.5:1 (contrast.spec.mjs це зловив). Даємо * панелі власну білу підкладку - контраст відновлюється, вигляд картки * навіть логічніший для AI-блоку. */ .admin-shell .ai-panel{ background:var(--admin-surface);border:1px solid var(--admin-border);border-radius:var(--radius-lg); } /* ── топбар: дзвінок і аватар-плейсхолдер (лише візуальний шар) ────────── * .admin-bell веде на "Сповіщення" через існуючий data-goto-маршрут (той * самий механізм, що contour-item — кілька елементів з однаковим * data-goto вже є в admin.html), нового data-view НЕ додає, тож не * ламає унікальність [data-view] у health.spec.mjs. Аватар — іконка- * заглушка (avatar-badge вже описаний вище для avatarCell), жодних нових * даних про користувача не рахує. */ .admin-shell .admin-bell{ width:36px;height:36px;flex:none;border-radius:10px; border:1px solid var(--admin-border);background:var(--admin-surface); display:flex;align-items:center;justify-content:center;color:var(--admin-navy); } .admin-shell .admin-bell:hover{background:var(--admin-bg)} /* ── KPI-бейджі: іконка-кружок над цифрою, той самий набір --status-* * токенів, що вже фарбує .kpi-attention нижче — нових кольорів не додаю. */ .admin-shell .kpi-icon{ width:38px;height:38px;flex:none;border-radius:11px; display:flex;align-items:center;justify-content:center;margin-bottom:2px; } .admin-shell .kpi-icon .icon{width:19px;height:19px} .admin-shell .kpi-icon-info{background:var(--status-info-soft);color:var(--status-info-ink)} .admin-shell .kpi-icon-success{background:var(--status-success-soft);color:var(--status-success-ink)} .admin-shell .kpi-icon-caution{background:var(--status-caution-soft);color:var(--status-caution-ink)} .admin-shell .kpi-attention .kpi-icon-warning{background:var(--admin-surface);color:var(--status-warning-ink)} /* ── Пошук: іконка-лупа в кожному .search (29 полів по всій платформі) — * той самий приймальний трюк, що в мокапах (Companies/Employees.dc.html): * іконка ліворуч, текст їде на 38px. SVG прямо в background-image, * кольором --text-muted (#6C83A2), без нового DOM/класу і без зміни * висоти поля (лише padding-left). Скоуп .admin-shell — на /company, * /review, /doctor .search лишається без іконки, як і раніше. */ .admin-shell .search{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C83A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:12px center;padding-left:38px; } /* ── Панелі: легка тінь у стані спокою — свідомий відступ саме для адмінки * від правила файлу вище ("тінь тільки для того, що підіймається"): мокап * (Main/Companies/Employees.dc.html) тримає картку м'яким підняттям над * #F5F9FF, а не лише волосяною лінією. Скоуп .admin-shell — /company, * /review, /doctor лишаються без тіні, як і раніше. */ .admin-shell .panel,.admin-shell .card,.admin-shell .tile{ box-shadow:0 1px 2px rgba(18,53,107,.05); } /* ── Таблиця: капс-шапка як у мокапах (Companies/Employees.dc.html) — лише * text-transform/letter-spacing. Розмір і висота рядка (52px, §6.6 ТЗ) не * зачеплені: shell-system.spec.mjs/patient-scale.spec.mjs як і раніше * бачать ту саму висоту. */ .admin-shell thead th{ text-transform:uppercase;letter-spacing:.05em; } /* ── Підтримка в сайдбарі — статичний блок, як у кожному мокапі (Main/ * Companies/…dc.html): контакт support@stemd.net уже використаний * у cabinets.html/worker.html, тут лише той самий контакт у новому місці. * Жодних нових даних. margin-top:auto притискає блок до низу навігації — * .sidebar-meta (реальний "Захищене з'єднання"/версія) іде одразу під ним, * той рядок і раніше мав власний margin-top:auto (shell.css) і лишається. * DOM-вставка — admin.html (IA), правило тут — суто стилі. */ .admin-shell .admin-support{ margin-top:auto;background:var(--admin-bg);border-radius:14px;padding:14px; display:flex;flex-direction:column;gap:6px; } .admin-shell .admin-support .icon{color:var(--admin-primary);width:20px;height:20px} .admin-shell .admin-support-title{font-weight:700;font-size:13px;color:var(--admin-navy)} .admin-shell .admin-support-text{font-size:12px;color:var(--text-muted);line-height:1.4} .admin-shell .admin-support-link{font-size:13px;font-weight:700;color:var(--admin-primary-hover)} .admin-shell .admin-support-link:hover{color:var(--admin-primary)} /* ── Форма чипу статусу як у мокапах (Companies/CompanyDetail/Employees/ * EventLog.dc.html): прямокутник 8px, а не капсула. Свідомо лише для * .admin-shell — глобальний --radius-pill (999px) на /company, /review, * /doctor не чіпаю: там та ж капсула, що й була — тести на форму не * зав'язані. Колір/розмір/padding .status-badge не зачеплені. */ .admin-shell .status-badge,.admin-shell .role-badge,.admin-shell .pill{ border-radius:8px; } /* ── Радіус контролів трохи більший (11-12px), як у мокапах — той самий * прийом, що вже є в панелях/пошуку вище. Розмір/висота не зачеплені. */ .admin-shell button.primary,.admin-shell button.secondary,.admin-shell button.ghost, .admin-shell .drop,.admin-shell .submit, .admin-shell input,.admin-shell select,.admin-shell textarea,.admin-shell .search{ border-radius:11px; } /* —— Канбан-дошка кампаній (#campaign-board): реальна вже роботає, без стилівання * взагалі класи були порожні. Дані/ендпойнти не заче́плені — лише CSS. */ .admin-shell .kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px} .admin-shell .kanban-col{flex:0 0 232px;background:var(--admin-bg);border-radius:14px;border-top:3px solid var(--col-color,var(--admin-primary)); padding:12px;display:flex;flex-direction:column;gap:8px;} .admin-shell .kanban-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px; font-size:11.5px;font-weight:700;color:var(--admin-navy);text-transform:uppercase;letter-spacing:.04em;padding:0 2px} .admin-shell .kanban-count{background:var(--admin-surface);border-radius:8px;padding:1px 7px;font-size:11px;font-weight:700;color:var(--text-muted)} .admin-shell .kanban-card{display:flex;flex-direction:column;gap:5px;background:var(--admin-surface);border:1px solid var(--admin-border); border-radius:11px;padding:10px 12px;text-align:left;cursor:pointer;font:inherit;color:inherit} .admin-shell .kanban-card:hover{border-color:var(--admin-primary)} .admin-shell .kanban-card strong{font-size:13px;color:var(--admin-navy)} .admin-shell .kanban-card .muted{font-size:12px;color:var(--text-muted)} .admin-shell .kanban-progress{font-size:11.5px;color:var(--text-muted)} .admin-shell .kanban-bar{display:block;height:5px;border-radius:4px;background:var(--admin-border);overflow:hidden} .admin-shell .kanban-bar i{display:block;height:100%;background:var(--admin-primary);border-radius:4px} .admin-shell .kanban-note{align-self:flex-start;font-size:11px;font-weight:700;border-radius:7px;padding:2px 7px; background:var(--status-warning-soft);color:var(--status-warning-ink)} .admin-shell .kanban-empty{font-size:12px;color:var(--text-muted);text-align:center;padding:14px 0} /* —— Рядок інтеграцій (#integrations на екрані Адміністрування/Системні налаштування): * .integration-row базовий стиль вище сбігає (/company тощо) — тут лише .admin-shell-огляд під той самий * ✓/—, що JS вже ставить (loadIntegrations): кругла знацок замість голого символу. Реальний * configured/detail з API не зачеплений. */ .admin-shell .integration-row{padding:10px 4px;align-items:center;border-bottom:1px solid var(--admin-border)} .admin-shell .integration-row>b{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#EAF4FF; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;text-align:center} /* —— .view-chip (фільтри "Усі/Прострочені/До 30 днів/..." в Медогляди та * подібних реєстрах): капсула (--radius-pill, 999px) замість прямокутника * з мокапів (Telemedicine.dc.html — чипи "Всі/Заплановані/В процесі/Завершені"), * той самий прийом, що вже застосований до .status-badge/.role-badge/.pill * вище ("8px, а не капсула"). Активний чип — на --admin-primary, а не * глобальний --brand-primary (#176CC1 -> #1F78EA), щоб збігтися з рештою * адмінки. data-vfilter/JS, розмір і padding чипу не зачеплені — лише колір і радіус. */ .admin-shell .view-chip{ border-radius:10px;background:var(--admin-bg);border-color:var(--admin-border);color:var(--text-muted); } .admin-shell .view-chip:hover,.admin-shell .view-chip:focus-visible{border-color:var(--admin-primary)} .admin-shell .view-chip.is-active{ background:var(--admin-primary);border-color:var(--admin-primary);color:#fff; } /* -- Иконки в головному меню (Огляд + 6 заголовкiв груп): мокапи * (ConductExam/NormativeBase/Registration/Telemedicine.dc.html - сайдбар) * малюють кожен з 7 верхньорiвневих пунктiв з iконкою; у реальнiй адмiнцi * жодної не було. .nav-group-label - обгортка лише для того, щоб iконка й * пiдпис групи мали свiй gap, а шеврон (другий прямий child кнопки) * лишався прибитий праворуч через justify-content:space-between з правила * .nav-group-title вище (shell.css) - це чисто структурна обгортка, не * новий вигляд. Сам .icon (18px, currentColor) вже описаний глобально - * тут лише gap. Активний стан пункту (колiр/фон) не зачеплений: те, що * мокап малює суцiльною плямою акценту, тут навмисно лишається м'якою * пiдкладкою - так просить сам ТЗ пар.6.1 ("свiтла брендова пiдкладка"), а * не мокап. */ .nav-group-label{display:flex;align-items:center;gap:var(--space-2);min-width:0} /* Заголовок групи — завжди один рядок. «Документи і нормативи» переносився * на два й ставав по центру: кнопка за замовчуванням центрує текст, а * ширини при розрядці .1em не вистачало. Розрядка тепер .06em, меню на 16 px * ширше, а якщо назва колись таки не влізе — вона обріжеться, а не * переламає рядок. */ .nav-group-label{text-align:left;white-space:nowrap} .nav-group-label>span:last-child{overflow:hidden;text-overflow:ellipsis} /* ── Кит головної: сітка панелей, перемикач періоду, графік, кільце статусів, * список подій, тренд. Спільні класи — ними ж будуть збиратися /company і * /review; кольори лише з токенів (статусна система --status-*), нових * відтінків не додано. Графік і кільце малює admin.js з реальних даних. */ .dash-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-4);margin-bottom:var(--space-4)} .dash-grid{align-items:start} .dash-grid .panel-head>div:first-child{flex:1 1 0} .dash-grid>.panel{margin:0;min-width:0} @media (max-width:1100px){ .dash-grid{grid-template-columns:minmax(0,1fr)} .dash-grid>.panel{grid-column:auto;grid-row:auto} } .seg{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:var(--surface-sunken);border:var(--hairline)} .seg button{ border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-meta); font-weight:var(--weight-semibold);padding:6px 12px;border-radius:8px;cursor:pointer;min-height:32px; } .seg button[aria-checked="true"]{background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--shadow-sm)} .seg button:focus-visible{outline:none;box-shadow:var(--focus-ring)} .chart-legend{display:flex;gap:var(--space-4);font-size:var(--text-meta);color:var(--text-secondary);margin:0 0 var(--space-2)} .chart-legend .lg{display:inline-flex;align-items:center;gap:6px} .chart-legend .lg::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--admin-primary,var(--brand-primary))} .chart-legend .lg-due::before{height:2px;border-radius:1px;background:var(--status-warning)} .chart{width:100%;overflow:hidden} .chart-svg{display:block} .chart-grid{stroke:var(--border-subtle);stroke-width:1} .chart-tick{font-size:10px;fill:var(--text-muted)} .chart-bar{fill:var(--admin-primary,var(--brand-primary))} .chart-line{fill:none;stroke:var(--status-warning);stroke-width:2;stroke-linejoin:round} .donut-wrap{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap} .donut{flex:none} .donut svg{display:block} .donut-total{font-size:22px;font-weight:var(--weight-bold);fill:var(--text-primary)} .donut-caption{font-size:10px;fill:var(--text-muted)} .legend{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);flex:1 1 160px;min-width:0} .legend li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-secondary-size);color:var(--text-secondary)} .legend li strong{margin-left:auto;color:var(--text-primary);font-variant-numeric:tabular-nums} .legend-dot{width:10px;height:10px;border-radius:50%;flex:none} .legend .legend-note{color:var(--status-danger-ink);font-size:var(--text-meta);font-weight:var(--weight-semibold)} .event-list{list-style:none;margin:0;padding:0} .event-list li{display:flex;gap:var(--space-3);align-items:baseline;padding:var(--space-2) 0;border-top:var(--hairline)} .event-list li:first-child{border-top:0} .event-list time{flex:none;width:118px;font-size:var(--text-meta);color:var(--text-muted);font-variant-numeric:tabular-nums} .event-main{display:flex;flex-direction:column;min-width:0} .event-main strong{font-size:var(--text-secondary-size);font-weight:var(--weight-semibold);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis} .event-main .muted{font-size:var(--text-meta)} .trend{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--radius-pill);font-size:var(--text-label);font-weight:var(--weight-semibold);vertical-align:1px} .trend-up{background:var(--status-success-soft);color:var(--status-success-ink)} .trend-down{background:var(--status-danger-soft);color:var(--status-danger-ink)} .trend-flat{background:var(--status-neutral-soft);color:var(--status-neutral-ink)} /* ── Топбар на телефоні. На 390 px у шапку не влазило вісім елементів: * контейнер облікового запису стискався до 8 px (min-width:0), а його діти * вилазили назовні — аватар ліг на дзвінок, бейдж ролі на «Вийти». Лишаємо * те, що концепт тримає на телефоні: меню, пошук, дзвінок, аватар, вихід. * Роль видно в меню облікового запису на десктопі; радіо — фон для роботи, * на телефоні не потрібне. */ @media (max-width:640px){ .admin-shell .topbar{gap:var(--space-2);padding:0 var(--space-4)} .admin-shell .topbar .identity{flex:none} .admin-shell .topbar #role{display:none} .admin-shell .topbar .palette-open{margin-right:auto} .event-list time{width:92px} } /* ── Режими медоглядів і строки ───────────────────────────────────────────── * Картки режимів у «Нормативній базі» і лічильники станів на «Строках оглядів». * Лічильник — це й фільтр: натиснутий показує лише свій стан. */ .regime-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:var(--space-4)} .regime-card{border:var(--hairline);border-radius:var(--radius-block);padding:var(--space-4);background:var(--surface-base);min-width:0} .regime-head h3{margin:0 0 var(--space-1);font-size:var(--text-card);font-weight:var(--weight-semibold);color:var(--text-primary)} .regime-head .muted{margin:0 0 var(--space-3);font-size:var(--text-secondary-size)} .regime-card .hint{margin:0 0 var(--space-3)} .regime-rules{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)} .regime-rules li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding-top:var(--space-2);border-top:var(--hairline);font-size:var(--text-secondary-size)} .regime-rules li:first-child{border-top:0;padding-top:0} .regime-rule-text{flex:1 1 220px;min-width:0;color:var(--text-secondary);overflow-wrap:anywhere} .deadline-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)} .deadline-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--space-3) var(--space-4);border:var(--hairline);border-radius:var(--radius-block);background:var(--surface-base);color:var(--text-secondary);text-align:left;cursor:pointer;min-width:0} .deadline-chip strong{font-size:22px;line-height:1.1;font-weight:var(--weight-bold);color:var(--text-primary);font-variant-numeric:tabular-nums} .deadline-chip span{font-size:var(--text-secondary-size)} .deadline-chip.bad strong{color:var(--status-danger-ink)} .deadline-chip.wait strong{color:var(--status-warning-ink)} .deadline-chip.ok strong{color:var(--status-success-ink)} .deadline-chip[aria-pressed="true"]{border-color:var(--brand-primary);box-shadow:inset 0 0 0 1px var(--brand-primary);background:var(--brand-primary-soft)} .deadline-chip:focus-visible{outline:none;box-shadow:var(--focus-ring)} .category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--space-2);border:0;padding:0;margin:0} .category-grid legend{grid-column:1/-1;padding:0;margin-bottom:var(--space-1)} .category-grid.hidden{display:none} td.cell-actions{white-space:nowrap} td.cell-actions>*+*{margin-left:var(--space-2)} .cell-sub{font-size:var(--text-meta);margin-top:2px} #deadline-body .status-badge{white-space:nowrap} @media (max-width:767px){ .deadline-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .deadline-summary .deadline-chip:last-child{grid-column:1/-1} } /* ── Контури й кабінети — панель на виклик ───────────────────────────────── * Доти це була смуга над кожним розділом: чотири картки по десятку пунктів * забирали весь перший екран. Тепер ті самі картки — у панелі, яку відкриває * пункт меню «Контури й кабінети». Специфічність навмисно вища за правила * смуги в admin.html (≤960 — дві колонки, ≤720 — горизонтальна стрічка): вони * лишились для сумісності й тут не діють. */ .contours.contours-top.contours-panel{ position:fixed;z-index:70;top:calc(var(--top-height) + 8px); left:calc(var(--nav-width) + 16px);right:16px; max-height:calc(100dvh - var(--top-height) - 24px);overflow:auto;overscroll-behavior:contain; margin:0;padding:var(--space-4); display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3);align-items:start; background:var(--surface-base);border:1px solid var(--border-default); border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay); } .contours.contours-top.contours-panel[hidden]{display:none} .contours-panel-head{grid-column:1/-1;grid-row:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)} .contours-panel-head strong{display:block;font-size:var(--text-card);color:var(--text-primary)} .contours-panel-head .muted{display:block;font-size:var(--text-meta)} #top-contours.contours-panel .contour{min-width:0;flex:initial;grid-column:auto;grid-row:auto} @media (max-width:960px){ .contours.contours-top.contours-panel{left:8px;right:8px;grid-template-columns:minmax(0,1fr);padding:var(--space-3)} } /* Пошук тримає лівий край, решта шапки — одною групою праворуч, біля «Вийти». * (Радіо й пульс у шапці прибрано зовсім — рішення власника від 28.09.2026.) */ .admin-shell .topbar .palette-open{margin-right:auto} /* ── Каркас панелі: поле, меню (відгук власника від 26.09.2026) ───────────── * Меню ширшало до 280px, а колонка сітки лишалась 248px — меню лягало на * робоче поле на 32px, і заголовки всіх розділів притискались до його краю. * Колонка тепер бере ту саму --nav-width (admin.html). Тут — решта. */ .sidebar .nav{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable} .sidebar .nav:hover,.sidebar .nav:focus-within{scrollbar-color:var(--border-default) transparent} .sidebar .nav::-webkit-scrollbar{width:6px;height:0} .sidebar .nav::-webkit-scrollbar-thumb{background:transparent} .sidebar .nav:hover::-webkit-scrollbar-thumb{background:var(--border-default)} /* Поки група згортається, вона ще видима — інакше анімації нема на чому грати. */ .nav-group-title[aria-expanded="false"]+.nav-group-items.nav-animating{display:flex} .nav-group-items.nav-animating{overflow:hidden} /* ── UX-прохід по всіх екранах панелі (відгук власника від 26.09.2026) ────── * Один блок у кінці файлу, щоб перебити розрізнені старі правила з admin.html * і верхніх частин цього файлу тією самою вагою, а не !important. */ /* Заголовок розділу: повітря між надписом, назвою й поясненням; дії — одним * рядком праворуч, а не стовпчиком на всю ширину (фільтри-select мали * width:100% від .search і самі себе переносили в новий рядок). */ .admin-shell .page-head{margin:0 0 var(--space-2);gap:var(--space-4) var(--space-6)} .admin-shell .page-head>div:first-child{gap:6px} @media (min-width:721px){ .admin-shell .page-head{align-items:flex-end} .admin-shell .page-head>div:first-child{flex:1 1 380px} } /* На телефоні шапки стоять стовпчиком, і flex-basis «ширини» ставав висотою: * під назвою блоку лишалось 240–380px порожнечі. */ @media (max-width:720px){ .admin-shell .page-head>div:first-child,.admin-shell .panel-head>div:first-child{flex:0 0 auto} .admin-shell .page-head{align-items:stretch} } .admin-shell .page-head>div:first-child>.muted,.admin-shell .page-head>div:first-child>p{margin:4px 0 0;max-width:78ch;line-height:1.5} @media (min-width:721px){ .admin-shell .page-head>.actions,.admin-shell .page-head>.views{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2);width:auto;flex:0 1 auto;max-width:100%} .admin-shell .page-head>.actions>select,.admin-shell .page-head>.actions>input,.admin-shell .page-head>select,.admin-shell .page-head>input{width:auto;min-width:180px;max-width:260px;flex:0 1 auto} .admin-shell .page-head>button,.admin-shell .page-head>.actions>button{flex:none;width:auto} } /* Пояснення під заголовком, що лежить окремим абзацом у розділі. */ .admin-shell .view>p.hint{font-size:var(--text-secondary-size);line-height:1.55;color:var(--text-secondary);max-width:90ch;margin:-8px 0 0 !important} /* Шапка блоку: назва й пояснення ліворуч, дії праворуч — по центру висоти. */ @media (min-width:721px){ .admin-shell .panel-head{align-items:center;gap:var(--space-3) var(--space-5)} .admin-shell .panel-head>h2:only-child{padding:2px 0} } /* Лупа — лише там, де шукають текстом. На списках, датах і числах вона * вводила в оману: поле виглядало пошуком, а було фільтром чи датою. */ .admin-shell select.search,.admin-shell input.search[type="date"],.admin-shell input.search[type="datetime-local"], .admin-shell input.search[type="number"],.admin-shell input.search[type="month"]{background-image:none;padding-left:12px} .admin-shell select.search{padding-right:32px} /* Форми, що лежать прямо в блоці, мали нуль відступу: підписи впирались у * край картки (бланки, виїзди, калькулятор, телемедицина). */ .admin-shell .panel>form{padding:var(--space-4) var(--space-5) var(--space-5)} .admin-shell .panel>.tele-open{padding:var(--space-4) var(--space-5)} .admin-shell .panel>form label{white-space:nowrap} /* Посилання в тексті — брендовим кольором, а не системним синім. */ .admin-shell main a:not([class]){color:var(--brand-primary);text-decoration-color:color-mix(in srgb,var(--brand-primary) 35%,transparent);text-underline-offset:2px} .admin-shell main a:not([class]):hover{text-decoration-color:currentColor} /* Поле вибору файлу — кнопкою тієї самої мови, що й решта. */ .admin-shell input[type="file"]{padding:6px;cursor:pointer} .admin-shell input[type="file"]::file-selector-button{font:inherit;font-weight:var(--weight-semibold);font-size:var(--text-secondary-size); border:var(--hairline);border-radius:var(--radius-control,10px);background:var(--surface-sunken);color:var(--text-primary);padding:8px 14px;margin-right:12px;cursor:pointer} /* Головна: показники й панелі під ними злипались — між ними не було жодного * проміжку, бо обгортка #cc-content не мала своєї сітки. */ .admin-shell #cc-content{display:flex;flex-direction:column;gap:var(--space-5)} .admin-shell #cc-content>.dash-grid{margin:0} .admin-shell #cc-empty>button.primary{margin:var(--space-4) var(--space-5) var(--space-5)} .admin-shell .kpi-attention .kpi-icon-warning{background:var(--status-warning-soft)} @media (min-width:721px){.admin-shell .dash-grid .panel-head>div:first-child{flex:1 1 200px}} /* Дошка етапів кампаній. Три шари правил (admin.html + два тут) малювали * зверху колонки лінію, а поверх назви — кружок-«станцію», який лягав на * текст; колонки притискались до країв картки. Тепер: колонка — підкладка * з кольоровою міткою етапу, назвою (у два рядки, якщо треба) і лічильником; * дошка прокручується вбік з відступами, краї не обрізаються. */ .admin-shell #campaign-board.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:var(--space-3); overflow-x:auto;padding:var(--space-4) var(--space-5) var(--space-5);scroll-snap-type:x proximity;scroll-padding:0 var(--space-5); scrollbar-width:thin;scrollbar-color:var(--border-default) transparent} .admin-shell #campaign-board .kanban-col{background:var(--surface-subtle);border:var(--hairline);border-top:var(--hairline);border-radius:var(--radius-block); padding:var(--space-3);gap:var(--space-2);min-height:148px;scroll-snap-align:start;min-width:0} .admin-shell #campaign-board .kanban-col-head{position:static;background:none;border:0;padding:2px 2px var(--space-1); display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:start;gap:var(--space-2); font-size:var(--text-label);letter-spacing:.04em;text-transform:uppercase;font-weight:var(--weight-bold);color:var(--text-secondary);line-height:1.35} .admin-shell #campaign-board .kanban-col-head::before{content:'';position:static;display:block;width:10px;height:10px;margin-top:2px;border-radius:50%;background:var(--col-color,var(--brand-primary))} .admin-shell #campaign-board .kanban-col-head::after{content:none;display:none} .admin-shell #campaign-board .kanban-col-head>span:first-child{overflow-wrap:anywhere} .admin-shell #campaign-board .kanban-count{background:var(--surface-base);border:var(--hairline);border-radius:var(--radius-pill);padding:0 8px;font-size:var(--text-meta);letter-spacing:0;color:var(--text-secondary)} .admin-shell #campaign-board .kanban-card{border-left:3px solid var(--col-color,var(--brand-primary));width:100%} .admin-shell #campaign-board .kanban-empty{padding:var(--space-4) 0;color:var(--text-muted)} /* Дошка: flex замість grid — лише так правий відступ лишається в межах * прокрутки, і остання колонка не обрізається краєм картки. */ .admin-shell #campaign-board.kanban{display:flex;align-items:stretch} .admin-shell #campaign-board .kanban-col{flex:1 0 214px} .admin-shell #campaign-board.kanban::after{content:'';flex:0 0 1px} /* Нормативна база: вкладки й таблиця актів. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .admin-shell .normative-tabs{align-self:flex-start} .admin-shell .seg [role="tab"]{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:0;border-radius:8px;background:transparent; color:var(--text-secondary);font-weight:var(--weight-semibold);font-size:var(--text-secondary-size);cursor:pointer} .admin-shell .seg [role="tab"][aria-selected="true"]{background:var(--surface-raised,var(--surface-base));color:var(--text-primary);box-shadow:var(--shadow-sm)} .admin-shell .seg [role="tab"]:focus-visible{outline:none;box-shadow:var(--focus-ring)} .admin-shell .seg [role="tab"].hidden{display:none} .admin-shell .tab-count{font-size:var(--text-meta);font-variant-numeric:tabular-nums;padding:0 7px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-secondary)} .admin-shell .tab-count.hidden{display:none} .admin-shell .normative-table td.normative-title{min-width:260px;line-height:1.45} .admin-shell .normative-table td:nth-child(5){white-space:nowrap} .admin-shell .normative-table td:first-child{white-space:nowrap} .admin-shell .normative-table td:nth-child(3){white-space:nowrap} @media (max-width:720px){.admin-shell .normative-tabs{align-self:stretch;overflow-x:auto}.admin-shell .normative-table td.normative-title{min-width:220px}} @media (max-width:720px){ .admin-shell .panel-head .actions{width:100%;justify-content:stretch} .admin-shell .panel-head .search,.admin-shell .panel-head select,.admin-shell .panel-head input{width:100%;max-width:none;min-width:0;flex:1 1 100%} .admin-shell .panel-head>.search{width:100%} } .admin-shell .inline-field{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-secondary-size);color:var(--text-secondary);font-weight:var(--weight-medium);margin:0} .admin-shell .inline-field>input{width:auto;min-width:150px} /* Порожній список-фільтр (ще немає кампаній) не показуємо — порожнє поле без підпису лише бентежило. */ .admin-shell .page-head select:empty{display:none} .admin-shell code.audit-id{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--text-meta);color:var(--text-muted);background:var(--surface-sunken);padding:1px 6px;border-radius:6px} /* На телефоні рядки таблиць стають картками — бейдж стану не має розтягуватись на всю ширину. */ @media (max-width:720px){ .admin-shell td .status-badge{justify-self:start;align-self:center;width:auto;max-width:100%} .admin-shell .normative-table td.normative-title{min-width:0} .admin-shell .inline-field{width:100%}.admin-shell .inline-field>input{flex:1 1 auto} } .admin-shell .filter-check{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;font-size:var(--text-secondary-size);color:var(--text-secondary);font-weight:var(--weight-medium);cursor:pointer} .admin-shell .panel-head input[type="checkbox"],.admin-shell .page-head input[type="checkbox"],.admin-shell .filter-check input{width:18px;min-width:0;height:18px;flex:none;margin:0} .admin-shell #medical-services-groups{display:flex;flex-direction:column;gap:var(--space-4)} .admin-shell #access-users-body td:last-child{white-space:nowrap} .admin-shell #access-users-body td:last-child>*+*{margin-left:var(--space-1)} /* ── Входи в кабінети: кому ці двері і що за ними (відгук власника від 26.09.2026) */ .login-who{margin:var(--space-3) 0 var(--space-2);font-size:var(--text-secondary-size);color:var(--text-secondary);line-height:1.5} .login-who b{color:var(--text-primary);font-weight:var(--weight-semibold)} .login-finds{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid;gap:6px} .login-finds li{position:relative;padding-left:22px;font-size:var(--text-secondary-size);color:var(--text-secondary);line-height:1.45} .login-finds li::before{content:'';position:absolute;left:4px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--brand-primary-soft);box-shadow:inset 0 0 0 2px var(--brand-primary)} .login-doors{margin:var(--space-4) 0 0;font-size:var(--text-meta,12px);color:var(--text-muted);line-height:1.6;text-align:center} .login-doors a{color:var(--brand-primary);font-weight:var(--weight-semibold);text-decoration:none} .login-doors a:hover{text-decoration:underline} @media (min-width:961px){ .login-page{grid-template-columns:minmax(380px,520px) 1fr} .login-page .login-panel{padding:clamp(32px,4.5vw,64px)} } /* Меню не ширше за себе: доріжка сітки — рівно ширина меню, довгий підпис * групи («Документи і нормативи») більше не розпирає її і не дає горизонтальної * смуги прокрутки. */ .sidebar .nav{grid-template-columns:minmax(0,1fr)} .sidebar .nav-group-title{letter-spacing:.04em} input[type="file"]::file-selector-button{font:inherit;font-weight:var(--weight-semibold);font-size:var(--text-secondary-size); border:var(--hairline);border-radius:10px;background:var(--surface-sunken);color:var(--text-primary);padding:8px 14px;margin-right:12px;cursor:pointer} /* Кабінети роботодавця й Держпраці: одна шапка над розділами — дати їй * повітря до першого блоку, як у панелі. */ main>.page-head{margin-bottom:var(--space-5)} main>.page-head>div:first-child{gap:6px} /* Розділ займає всю ширину поля: у кабінеті Держпраці він стискався до * ширини свого вмісту (margin:auto у flex-контейнері), і список кампаній * стояв вузькою колонкою посередині. */ main>.view,main>section.view{width:100%} .admin-shell .tele-open{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center} .admin-shell .tele-open input[type="datetime-local"]{min-width:230px;flex:1 1 230px;background-image:none;padding-left:12px} .admin-shell .tele-open input[type="number"]{width:88px;background-image:none;padding-left:12px} /* ── каркас кабінету з шухлядою: .app-drawer ───────────────────────────── * Бічне меню ліворуч і робоче поле праворуч; на вузькому екрані меню — шухляда * з затемненням (кнопка «Меню» у верхній смузі). Ті самі числа, що в панелі * управління (/admin тримає їх ще у своєму