/* Панель платформи (ТЗ КАН §6.3: PNL-VIS-01…04, PNL-A11Y-01, PNL-RWD-01). Кольори — лише змінними,
   ті самі назви й значення, що в панелі ОСББ (orgs/static/orgs/panel.css): обидві панелі однакові,
   а orgs/ ізольований, тож це копія. Збіг палітри й контраст пар перевіряє
   tests/panel/test_panel_look.py. Розміри — щільніші, ніж у панелі ОСББ: це робочий інструмент
   менеджера на комп'ютері; на сенсорному екрані елементи керування вищі. */
:root {
  --font: Inter, Manrope, "IBM Plex Sans", "e-Ukraine", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Monaco, Consolas, monospace;
  --bg: #FFFCF6; --surface: #FFFFFF; --surface-2: #F4EFE6; --ink: #1B2329; --muted: #56626B;
  --line: #D9D2C5; --field-line: #8C8275; --accent: #2C6079; --on-accent: #FFFFFF; --focus: #2C6079;
  --danger: #B3261E; --danger-bg: #F9DEDC; --warning: #8A5300; --warning-bg: #FDEBC8;
  --success: #1E6B3A; --success-bg: #D8F0DF; --info: #1F5B9A; --info-bg: #DCE8F7;
  --frame: #E8E8E8; --frame-2: #DCDCDC; /* сірий фон рамки таблиць — палітра панелі ОСББ (шахматка) */
  --space: 8px; --radius: 12px; --control: 38px;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1A20; --surface: #15232B; --surface-2: #1C2D36; --ink: #E6EEF2; --muted: #A5B4BC;
    --line: #2E424D; --field-line: #6A838F; --accent: #86C3DD; --on-accent: #0F1A20; --focus: #86C3DD;
    --danger: #F2B8B5; --danger-bg: #5C1714; --warning: #F5C36B; --warning-bg: #4A3300;
    --success: #9BD8AE; --success-bg: #123D22; --info: #A8C8F0; --info-bg: #13304F;
    --frame: #263640; --frame-2: #2F414B;
    color-scheme: dark;
  }
}
/* Сенсорний екран — цілі натискання вищі (PNL-VIS-02). */
@media (pointer: coarse) { :root { --control: 44px; } }

/* --- Основа ------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; font: var(--fs-14)/1.5 var(--font); background: var(--bg); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
h1 { font-size: var(--fs-24); line-height: 1.25; font-weight: 600; margin: 0 0 calc(var(--space) * 2); }
h2 { font-size: var(--fs-16); line-height: 1.3; font-weight: 600; margin: calc(var(--space) * 4) 0 var(--space); }
h3 { font-size: var(--fs-14); font-weight: 600; margin: calc(var(--space) * 2) 0 var(--space); }
h1 .code, h2 .code { font-weight: 400; }
p { margin: 0 0 var(--space); }
.muted { color: var(--muted); }
.code, code { font-family: var(--mono); font-size: var(--fs-12); }
pre { white-space: pre-wrap; margin: 0; font: inherit; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.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;
}
.skip-link { position: absolute; left: var(--space); top: -60px; z-index: 10; padding: var(--space) calc(var(--space) * 2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.skip-link:focus { top: var(--space); }

/* --- Оболонка: бокове меню групами, шапка з пошуком і станом (PNL-UX-08, PNL-RWD-01) --------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface);
  border-right: 1px solid var(--line); padding: calc(var(--space) * 2) var(--space);
}
.sidebar .brand { display: flex; align-items: center; gap: var(--space); padding: 0 var(--space) calc(var(--space) * 2);
  font-weight: 600; font-size: var(--fs-16); color: var(--ink); }
.sidebar .brand:hover { text-decoration: none; }
/* Знак — кіт з іконки застосунку: маска, пофарбована акцентом теми (у темній темі — світлий). */
.brand-mark { flex: none; display: inline-block; width: 28px; height: 28px; background: var(--accent);
  -webkit-mask: url("cat-mark.0798e761eb8e.png") center / contain no-repeat; mask: url("cat-mark.0798e761eb8e.png") center / contain no-repeat; }
.nav-group { margin: 0 0 calc(var(--space) * 2); }
.nav-group h2 { margin: 0 0 4px; padding: 0 var(--space); font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group a {
  display: flex; align-items: center; gap: 10px; min-height: var(--control); padding: 0 var(--space);
  border-radius: 8px; color: var(--ink);
}
.nav-group a:hover { background: var(--surface-2); text-decoration: none; }
.nav-group a[aria-current="page"] { background: var(--surface-2); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-group .count { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--surface-2);
  font-size: var(--fs-12); text-align: center; color: var(--ink); }
.nav-group a[aria-current="page"] .count { background: var(--surface); }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.scrim { display: none; } /* тло під меню, відкритим на вузькому екрані */
.topbar {
  position: sticky; top: 0; z-index: 12; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space) calc(var(--space) * 2); padding: var(--space) calc(var(--space) * 3);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar .burger { display: none; }
.topbar .search { display: flex; gap: 4px; flex: 1 1 280px; max-width: 420px; margin: 0; }
.topbar .search input { margin: 0; width: auto; flex: 1 1 auto; min-width: 0; }
.topbar .status { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; }
.topbar .status a.chip:hover { text-decoration: none; filter: brightness(0.97); }
.topbar .user { margin-left: auto; }
/* «Довідка» — підрозділ «Інструкції» про відкриту сторінку (PNL-HELP-02) */
.topbar .help-link { margin-left: auto; padding: 0 var(--space); }
.topbar .help-link + .user { margin-left: 0; }
/* до 1440 px — лише значок: шапка адміністратора з усіма чіпами вміщається в рядок */
@media (max-width: 1439px) { .topbar .help-link .label { display: none; } }
.topbar .user > summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control); padding: 0 var(--space);
  border-radius: 8px; color: var(--ink); }
.topbar .user > summary:hover { background: var(--surface-2); }
.topbar .user .menu .who { padding: var(--space) calc(var(--space) * 1.5); color: var(--muted); font-size: var(--fs-12); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.topbar .user .menu form { margin: 0; }
.crumbs { padding: calc(var(--space) * 2) calc(var(--space) * 3) 0; font-size: var(--fs-12); color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: 4px; }
main { width: 100%; max-width: 1440px; margin: 0; padding: calc(var(--space) * 2) calc(var(--space) * 3) calc(var(--space) * 4); min-width: 0; }
/* Проста сторінка (вхід): без меню, картка по центру */
.plain-header { padding: calc(var(--space) * 2) calc(var(--space) * 3); }
.plain-header .brand { font-weight: 600; font-size: var(--fs-16); color: var(--ink); display: inline-flex; align-items: center; gap: var(--space); }
.plain main { max-width: 480px; margin: 0 auto; padding-top: calc(var(--space) * 4); }

/* --- Картки, сітки фактів ------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: calc(var(--space) * 2); margin: 0 0 calc(var(--space) * 2);
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.warn { border-color: var(--warning); }
.card.bad { border-color: var(--danger); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space) calc(var(--space) * 3); margin: 0; }
.grid dt { color: var(--muted); font-size: var(--fs-12); }
.grid dd { margin: 0 0 4px; }
.card.grid > div > dd, .card.grid dd { font-size: var(--fs-16); }

/* --- Таблиці ------------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 calc(var(--space) * 2); }
th, td { text-align: left; padding: var(--space) calc(var(--space) * 1.5); border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--fs-14); }
thead th { color: var(--muted); font-weight: 600; font-size: var(--fs-12); background: var(--surface-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
tr.over td { background: var(--danger-bg); }
tr.over td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.card table { border: none; margin: 0; }
.table-scroll { overflow-x: auto; margin: 0 0 calc(var(--space) * 2); }
.table-scroll table { margin: 0; }

/* --- Поля ---------------------------------------------------------------------------------- */
label { display: block; margin: 0 0 calc(var(--space) * 1.5); font-size: var(--fs-14); }
textarea, select, input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], input[type=tel], input[type=url], input[type=search], input[type=file], input:not([type]) {
  display: block; width: 100%; min-height: var(--control); margin: 4px 0 0; padding: 6px 10px;
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--field-line); border-radius: 8px;
}
textarea { resize: vertical; }
input[type=file] { padding: 6px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: -3px; margin: 0 6px 0 0; }
:is(textarea, select, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
label > :is(textarea, select, input) + .hint, .hint { display: block; color: var(--muted); font-size: var(--fs-12); margin-top: 4px; }

/* --- Кнопки: головна (за замовчуванням), вторинна, текстова, небезпечна (PNL-UX-02) ------------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control);
  padding: 0 calc(var(--space) * 2); font: inherit; font-weight: 500; line-height: 1.2; color: var(--on-accent);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
button:hover, .button:hover { filter: brightness(1.08); text-decoration: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
button.secondary, .button.secondary { background: transparent; color: var(--accent); border-color: var(--field-line); }
button.secondary:hover, .button.secondary:hover { background: var(--surface-2); filter: none; }
button.link, .button.link {
  background: transparent; color: var(--accent); border-color: transparent; padding: 0 4px; min-height: 0; font-weight: 400;
}
button.link:hover { text-decoration: underline; filter: none; }
button.danger, .button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.danger:hover, .button.danger:hover { background: var(--danger-bg); filter: none; }
button.danger-solid { background: var(--danger); border-color: var(--danger); color: var(--surface); }
button.small, .button.small { min-height: 28px; padding: 0 10px; font-size: var(--fs-12); }
form.inline { display: inline; }

/* --- Чіпи стану ---------------------------------------------------------------------------- */
.badge, .chip, .origin {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 12px;
  font-size: var(--fs-12); line-height: 20px; background: var(--surface-2); color: var(--ink); white-space: nowrap;
}
.badge.high, .chip.bad { background: var(--danger-bg); color: var(--ink); }
.badge.medium, .chip.warn { background: var(--warning-bg); color: var(--ink); }
.badge.low, .chip.ok { background: var(--success-bg); color: var(--ink); }
.chip.info { background: var(--info-bg); color: var(--ink); }
.origin { margin-right: 4px; }

/* --- Повідомлення: банер на сторінці; із JS — спливають унизу (PNL-UX-07) ------------------------- */
.msg {
  display: flex; align-items: flex-start; gap: var(--space); padding: 10px 14px; margin: 0 0 var(--space);
  border-radius: 8px; border-left: 4px solid var(--muted); background: var(--surface-2); color: var(--ink);
}
.msg.error { background: var(--danger-bg); border-left-color: var(--danger); }
.msg.success { background: var(--success-bg); border-left-color: var(--success); }
.msg.warning { background: var(--warning-bg); border-left-color: var(--warning); }
.msg.info { background: var(--info-bg); border-left-color: var(--info); }
.msg .msg-text { flex: 1; }
.msg .msg-close { display: none; }
.js .toasts {
  position: fixed; right: calc(var(--space) * 3); bottom: calc(var(--space) * 3); z-index: 20;
  display: flex; flex-direction: column; gap: var(--space); max-width: min(480px, calc(100vw - 32px));
}
.js .toasts .msg { margin: 0; box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); }
.js .toasts .msg-close { display: inline-flex; min-height: 0; padding: 0 4px; color: var(--ink); }

/* --- Вкладки й фільтри --------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; margin: 0 0 calc(var(--space) * 2); }
p.filters a, .tabs a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 calc(var(--space) * 1.5);
  border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--surface); white-space: nowrap;
}
p.filters a:hover, .tabs a:hover { background: var(--surface-2); text-decoration: none; }
p.filters a.active, .tabs a.active, .tabs a[aria-current="page"], .tabs a[aria-current="true"] {
  background: var(--surface-2); color: var(--accent); border-color: var(--accent); font-weight: 600;
}
.filters form { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; margin: 0; }
.filters form :is(select, input) { width: auto; margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space); margin: 0 0 calc(var(--space) * 2); }

/* --- Блоки дій ----------------------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--space) * 2); }
.actions form { flex: 1; min-width: 260px; }
.actions > a { align-self: center; }

/* --- Заголовок сторінки, банери, порожній стан ------------------------------------------------- */
/* Однакова висота шапки з кнопкою й без неї: вкладки під нею стоять на тому самому місці (власник 08.10). */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space) calc(var(--space) * 2); min-height: var(--control); margin: 0 0 calc(var(--space) * 2); }
.page-head h1 { margin: 0; }
.page-head > .button, .page-head > form.inline { margin-left: auto; }
.updated { font-size: var(--fs-12); }
.banner { display: flex; align-items: center; gap: var(--space); padding: 10px 14px; margin: 0 0 calc(var(--space) * 2); border-radius: 8px; background: var(--info-bg); color: var(--ink); }
.banner.warning { background: var(--warning-bg); }
.banner.bad { background: var(--danger-bg); }
.empty { padding: calc(var(--space) * 4) calc(var(--space) * 2); text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.tabs .count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-12); text-align: center; }
.tabs a[aria-current="page"] .count { background: var(--surface); }
.tabs.secondary a { min-height: 28px; font-size: var(--fs-12); }

/* --- Черга (PNL-UX-10/12, PNL-RWD-01): рядок-картка, натискається цілком ----------------------- */
.queue-filters { display: grid; gap: var(--space); margin: 0 0 calc(var(--space) * 2); }
.queue-filters .tabs { margin: 0; }
.queue-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.q-row {
  position: relative; display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) 190px 110px;
  gap: 4px calc(var(--space) * 2); align-items: center; padding: calc(var(--space) * 1.5) calc(var(--space) * 2);
  border-bottom: 1px solid var(--line);
}
.q-row:last-child { border-bottom: none; }
.q-row:hover { background: var(--surface-2); }
.q-row.late { box-shadow: inset 4px 0 0 var(--danger); }
.q-row.risk { box-shadow: inset 4px 0 0 var(--warning); }
.q-row.fresh { animation: fresh 2.4s ease-out; }
@keyframes fresh { from { background: var(--info-bg); } to { background: transparent; } }
.q-kind { display: grid; gap: 2px; min-width: 0; }
.q-type { font-weight: 600; }
.q-main { display: grid; gap: 2px; min-width: 0; }
.q-main .muted { font-size: var(--fs-12); }
.q-link { color: var(--ink); overflow-wrap: anywhere; }
.q-link::after { content: ""; position: absolute; inset: 0; } /* увесь рядок — посилання на картку */
.q-link:hover { text-decoration: underline; }
.q-action { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.q-action form { margin: 0; }
.priority, .timer { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: var(--fs-12); }
.priority .icon, .timer .icon { width: 16px; height: 16px; }
.priority.high { color: var(--danger); font-weight: 600; }
.priority.medium { color: var(--warning); font-weight: 600; }
.priority.low { color: var(--muted); }
.timer { font-size: var(--fs-14); }
.timer.late { color: var(--danger); font-weight: 600; }
.timer.risk { color: var(--warning); font-weight: 600; }
.timer.done { color: var(--success); }
@media (max-width: 839px) {
  .q-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind sla" "main main" "action action"; }
  .q-kind { grid-area: kind; display: flex; flex-wrap: wrap; gap: 4px var(--space); align-items: center; }
  .q-sla { grid-area: sla; text-align: right; }
  .q-main { grid-area: main; }
  .q-action { grid-area: action; justify-content: flex-start; }
}

/* --- Картка (завдання, людина, звернення): шапка, «Потрібно зараз», дві колонки (PNL-UX-01/04) - */
.card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space) calc(var(--space) * 2); align-items: start; margin: 0 0 calc(var(--space) * 2); }
.card-title { display: grid; gap: var(--space); min-width: 0; }
.card-title h1 { margin: 0; overflow-wrap: anywhere; }
.card-head .meta { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; }
.chips .icon { width: 14px; height: 14px; }
.now { margin: 0 0 calc(var(--space) * 3); padding: calc(var(--space) * 2); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); }
.now h2 { margin: 0 0 var(--space); font-size: var(--fs-14); color: var(--accent); }
.now-item { display: grid; gap: var(--space); padding: var(--space) 0 var(--space) calc(var(--space) * 1.5); border-left: 4px solid var(--line); }
.now-item + .now-item { margin-top: calc(var(--space) * 1.5); }
.now-item.late { border-left-color: var(--danger); }
.now-what { display: flex; flex-wrap: wrap; gap: 4px var(--space); align-items: center; margin: 0; }
.now-actions { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; }
.now-actions form { margin: 0; }
.task-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--space) * 3); }
@media (min-width: 1200px) {
  .task-layout { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side"; align-items: start; }
  .task-main { grid-area: main; }
  .task-side { grid-area: side; position: sticky; top: 72px; }
}
.task-main, .task-side { min-width: 0; }
.side-card h2 { margin: 0 0 var(--space); font-size: var(--fs-14); }
.side-card p { margin: 0 0 var(--space); }
.side-head { display: flex; justify-content: space-between; align-items: center; }
.side-head h2 { margin: 0; }
.description { max-height: 12em; overflow: auto; margin: 0 0 var(--space); }
.edit-block > summary { cursor: pointer; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; margin: var(--space) 0; }
.edit-block .icon { width: 14px; height: 14px; }
.phone { display: flex; align-items: center; gap: 4px; }
.card-tabs { position: sticky; top: 57px; z-index: 5; padding: var(--space) 0; background: var(--bg); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space); margin: calc(var(--space) * 2) 0 var(--space); }
.section-head h2 { margin: 0; }
[data-tab-panel] > h2:first-child { margin-top: calc(var(--space) * 2); }
.plan-editor { margin: calc(var(--space) * 2) 0; }
.plan-editor > summary { cursor: pointer; font-weight: 600; color: var(--accent); margin: 0 0 var(--space); }
.plan-editor td input, .plan-editor td select { margin: 0; }
.small-text { font-size: var(--fs-12); }
.nowrap { white-space: nowrap; }
.score { font-size: var(--fs-12); white-space: nowrap; }
.action-dialog { width: min(560px, calc(100vw - 32px)); }
.action-dialog h2 { margin: 0 0 var(--space); font-size: var(--fs-20); }
.action-dialog p { font-size: var(--fs-14); }
@media (max-width: 839px) {
  .card-head { grid-template-columns: minmax(0, 1fr); }
  .card-tabs { top: 0; overflow-x: auto; flex-wrap: nowrap; }
}

.result-list { list-style: none; margin: 0 0 calc(var(--space) * 2); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.result-list li { display: flex; flex-wrap: wrap; gap: 4px var(--space); align-items: center; padding: var(--space) calc(var(--space) * 2); border-bottom: 1px solid var(--line); }
.result-list li:last-child { border-bottom: none; }

/* --- Листування сторін: бульбашки (клієнт ліворуч, фахівець праворуч, служба — посередині) --- */
.chat-feed { list-style: none; margin: 0 0 calc(var(--space) * 2); padding: 0; display: flex; flex-direction: column; gap: calc(var(--space) * 1.5); }
.bubble { max-width: min(640px, 85%); padding: var(--space) calc(var(--space) * 1.5); border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.bubble.client { align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.master { align-self: flex-end; background: var(--info-bg); border-color: transparent; border-bottom-right-radius: 4px; }
.bubble.service { align-self: center; background: var(--surface-2); border-color: transparent; }
.bubble.hidden-msg { opacity: 0.75; border-style: dashed; }
.bubble-head { display: flex; align-items: center; gap: var(--space); font-size: var(--fs-12); margin: 0 0 4px; }
.bubble-head .author { font-weight: 600; }
.bubble-head details { margin-left: auto; }
.hidden-note { display: flex; align-items: center; gap: 4px; color: var(--danger); font-size: var(--fs-12); margin: 0 0 4px; }
.hidden-note .icon { width: 14px; height: 14px; }

.inline-search { display: flex; gap: var(--space); max-width: 520px; margin: 0 0 calc(var(--space) * 2); }
.inline-search input { margin: 0; flex: 1 1 auto; min-width: 0; }
.head-actions { display: flex; gap: var(--space); align-items: center; }
.portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: calc(var(--space) * 2); }

/* --- Плитки чисел, числові колонки, групи полів форми ----------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: calc(var(--space) * 1.5); margin: 0 0 calc(var(--space) * 2); }
.tile { display: grid; gap: 2px; padding: calc(var(--space) * 1.5) calc(var(--space) * 2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tile .muted { font-size: var(--fs-12); }
.tile b { font-size: var(--fs-20); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.tile b.code { font-size: var(--fs-16); }
.tile .goal { font-size: var(--fs-12); color: var(--muted); font-weight: 400; }
.tile .change { font-weight: 600; }
.tile .change.ok { color: var(--success); }
.tile .change.bad { color: var(--danger); }
.metric-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 calc(var(--space) * 3); }
th.num, td.num { text-align: right; }
.org-logo { height: 32px; width: auto; max-width: 96px; object-fit: contain; vertical-align: middle; margin-right: var(--space); border-radius: 6px; }
.form-groups fieldset { border: none; border-top: 1px solid var(--line); margin: 0; padding: calc(var(--space) * 2) 0 0; }
.form-groups fieldset:first-of-type { border-top: none; padding-top: 0; }
.form-groups legend { font-weight: 600; font-size: var(--fs-16); padding: 0; margin: 0 0 var(--space); }
.field-error { display: block; margin-top: 4px; color: var(--danger); font-size: var(--fs-12); }
/* Поле адреси з випадним списком (orgs/_address_field.html, orgs/address_field.js; ORG-A-02, ORG-O-08) */
.address-field { position: relative; }
.address-field > label { margin-bottom: 0; }
.address-options { position: absolute; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--field-line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.15); }
.address-options [role="option"] { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.address-options [role="option"]:hover, .address-options [aria-selected="true"] { background: var(--surface-2); }
.address-options [aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.address-options .address-kept { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; }
.address-options .address-kept span { color: var(--muted); font-size: var(--fs-12); }
.address-hint { margin: 4px 0 calc(var(--space) * 1.5); font-size: var(--fs-12); }
/* Рядки адрес форми нової організації (orgs/platform/_address_row.html) */
.address-row { padding: var(--space) 0; border-bottom: 1px solid var(--line); }
.address-row .field-error { margin: -4px 0 var(--space); }
.address-rows { margin-bottom: var(--space); }
.list-filters select, .list-filters input[type=search], .list-filters input[type=text], .list-filters input[type=number] { width: auto; min-width: 160px; }
.list-filters input[type=search] { flex: 1 1 260px; max-width: 420px; }
.list-filters label.check input, label.check input { width: auto; min-width: 0; min-height: 0; margin: 0; }

.how-it-works { margin: 0 0 calc(var(--space) * 2); }
.how-it-works > summary { cursor: pointer; color: var(--accent); }
.how-it-works p { margin-top: var(--space); }

.bulk-bar {
  position: sticky; bottom: calc(var(--space) * 2 + env(safe-area-inset-bottom, 0px)); z-index: 10; display: flex; flex-wrap: wrap;
  gap: var(--space); align-items: center; padding: var(--space) calc(var(--space) * 2); margin: calc(var(--space) * 2) 0;
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
}
.bulk-bar input[type=text] { width: auto; flex: 1 1 220px; margin: 0; }

/* --- Горизонтальні смуги (OPN-UX-13): назва, смуга, число ------------------------------------- */
.bars { list-style: none; margin: 0 0 calc(var(--space) * 2); padding: calc(var(--space) * 1.5) calc(var(--space) * 2); display: grid; gap: var(--space); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.bars li { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr) 56px; gap: calc(var(--space) * 1.5); align-items: center; }
.bar-label { overflow-wrap: anywhere; }
.bar-track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.bar { display: block; height: 100%; background: var(--accent); border-radius: 5px; min-width: 2px; }
.bar-value { text-align: right; font-weight: 600; }

/* --- Поза списком: картка запиту з однією головною дією (етап 10 плану) -------------------- */
.gap-list { display: grid; gap: calc(var(--space) * 1.5); margin: 0 0 calc(var(--space) * 3); }
.gap.card { margin: 0; }
.gap-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space); }
.gap-head h3 { margin: 0; font-size: var(--fs-16); }
.gap .meta, .gap p { margin: 4px 0 0; }
.gap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space); margin-top: calc(var(--space) * 1.5); }
.gap-actions > form.inline { margin: 0; }
.gap-actions > details > summary { list-style: none; }
.gap-actions > details > summary::-webkit-details-marker { display: none; }
.gap-actions > details[open] { flex-basis: 100%; order: 1; }
.gap-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 calc(var(--space) * 2); margin-top: var(--space); padding: calc(var(--space) * 1.5) calc(var(--space) * 2); background: var(--surface-2); border-radius: 8px; }
.gap-form .wide { grid-column: 1 / -1; }
.gap-form label.check { margin: 0 0 calc(var(--space) * 1.5); }

/* --- Географія: перемикач «активна», коефіцієнт на місці (етап 10 плану) ------------------- */
button.switch { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control); padding: 0 4px; background: transparent; border: none; color: var(--ink); font-weight: 400; }
button.switch:hover { filter: none; background: transparent; }
button.switch .track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: var(--field-line); }
button.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform 0.15s; }
button.switch[aria-checked="true"] .track { background: var(--accent); }
button.switch[aria-checked="true"] .track::after { transform: translateX(16px); }
form.coef { display: inline-flex; gap: 6px; align-items: center; }
form.coef input { width: 6em; margin: 0; }
.tab-head { display: flex; flex-wrap: wrap; gap: var(--space); align-items: flex-start; justify-content: space-between; }
.street-search { flex: 1 1 520px; max-width: 760px; }
.street-search select { width: auto; max-width: 40%; margin: 0; }
.alias-form { display: flex; gap: 6px; align-items: center; }
.alias-form input { margin: 0; min-width: 160px; }

/* --- Виклик моделі: згорнутий JSON (етап 9 плану) ------------------------------------------- */
.json-block { margin: 0 0 calc(var(--space) * 2); padding: var(--space) calc(var(--space) * 2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.json-block > summary { cursor: pointer; font-weight: 600; min-height: var(--control); display: flex; align-items: center; }
.json-block > button { margin: 0 0 var(--space); }
pre.json { max-height: 70vh; overflow: auto; padding: var(--space); font-family: var(--mono); font-size: var(--fs-12); background: var(--surface-2); border-radius: 8px; }
.j-key { color: var(--accent); }
.j-str { color: var(--success); }
.j-num, .j-lit { color: var(--ink); font-weight: 600; }

/* --- Графік чергувань: сітка тижня, зміни чіпами (як OSBB-S-06, власник 08.10) ------------------ */
.month-nav { display: flex; align-items: center; gap: var(--space); margin-left: auto; }
.duty-grid th, .duty-grid td { vertical-align: top; }
.duty-grid td { min-width: 112px; }
.duty-grid thead th.today { color: var(--accent); }
.duty-grid td.today { background: var(--surface-2); }
.duty-chip { display: inline-flex; align-items: center; gap: 2px; margin: 2px 0; white-space: nowrap; }
.duty-chip form { display: inline; margin: 0; }
.chip-x { min-height: 0; padding: 0 2px; font-size: var(--fs-16); line-height: 1; color: var(--muted); }
.duty-gaps th, .duty-gaps td { border-top: 2px solid var(--line); }
.duty-forms { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: calc(var(--space) * 2); align-items: start; margin-top: calc(var(--space) * 2); }
.duty-forms .card { margin: 0; }
.duty-forms h2 { margin-top: 0; }
.duty-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 calc(var(--space) * 2); }
.duty-form-row .wide { grid-column: 1 / -1; }
@media (max-width: 839px) { .duty-forms { grid-template-columns: minmax(0, 1fr); } }

/* --- Параметри й тексти (етап 8 плану) ---------------------------------------------------------- */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: calc(var(--space) * 3); align-items: start; }
/* Закріплена шапка сторінки (власник 08.10): назва й пошук лишаються видимими під час прокрутки;
   висоти шапки панелі й цієї шапки рахує panel.js (--topbar-h, --head-h). */
.sticky-head { position: sticky; top: var(--topbar-h, 57px); z-index: 11; margin: 0 0 calc(var(--space) * 2);
  padding: var(--space) 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.sticky-head .page-head { margin-bottom: var(--space); }
.sticky-head .filters, .sticky-head .how-it-works { margin-bottom: 0; }
.sticky-head .how-it-works { margin-top: var(--space); }
.settings-group, .text-list { scroll-margin-top: calc(var(--topbar-h, 57px) + var(--head-h, 0px) + var(--space)); }
.toc { position: sticky; top: calc(var(--topbar-h, 57px) + var(--head-h, 0px) + var(--space)); display: grid; gap: 2px;
  max-height: calc(100vh - var(--topbar-h, 57px) - var(--head-h, 0px) - var(--space) * 3); overflow-y: auto; }
.toc a { display: flex; justify-content: space-between; gap: var(--space); padding: 6px var(--space); border-radius: 8px; color: var(--ink); }
.toc a:hover { background: var(--surface-2); text-decoration: none; }
.toc .count { font-size: var(--fs-12); color: var(--muted); }
.settings-group h2 { margin-top: 0; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: var(--space) calc(var(--space) * 2); align-items: start; padding: calc(var(--space) * 1.5) 0; border-top: 1px solid var(--line); }
.setting-row:first-of-type { border-top: none; }
.setting-text { min-width: 0; }
.setting-value { display: flex; gap: var(--space); align-items: center; margin: 0; }
.setting-value input { margin: 0; }
label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: var(--control); }
.edit-block form { display: flex; gap: var(--space); align-items: center; }
.edit-block form input { margin: 0; }
.text-list { list-style: none; margin: 0 0 calc(var(--space) * 2); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.text-row { border-bottom: 1px solid var(--line); }
.text-row:last-child { border-bottom: none; }
.text-edit > summary { display: grid; gap: 2px; padding: calc(var(--space) * 1.5) calc(var(--space) * 2); cursor: pointer; list-style: none; }
.text-edit > summary::-webkit-details-marker { display: none; }
.text-edit > summary:hover { background: var(--surface-2); }
.text-edit[open] > summary { background: var(--surface-2); }
.text-where { font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px var(--space); align-items: center; }
.text-preview { color: var(--ink); white-space: pre-line; }
.text-edit form { padding: var(--space) calc(var(--space) * 2); margin: 0; }
.text-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space); margin-top: var(--space); }
.description-form { display: flex; gap: var(--space); align-items: flex-end; }
.description-form label { flex: 1; margin: 0; }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: calc(var(--space) * 2); }
.doc-card h2 { margin-top: 0; }
.pager { display: flex; gap: calc(var(--space) * 2); align-items: center; margin: 0 0 calc(var(--space) * 2); }
@media (max-width: 839px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  /* вузько: зміст — рядком чіпів, закріпленим одразу під шапкою */
  .toc { top: calc(var(--topbar-h, 57px) + var(--head-h, 0px)); z-index: 10; display: flex; gap: 6px; max-height: none;
    overflow-x: auto; padding: var(--space) 0; background: var(--bg); }
  .toc a { flex: none; white-space: nowrap; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .settings-group { scroll-margin-top: calc(var(--topbar-h, 57px) + var(--head-h, 0px) + 56px); }
  .setting-row { grid-template-columns: minmax(0, 1fr); }
}

/* --- Меню «⋯» на <details> ------------------------------------------------------------------ */
details.dropdown { position: relative; display: inline-block; }
details.dropdown > summary { list-style: none; cursor: pointer; }
details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown .menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; min-width: 240px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
}
details.dropdown .menu :is(a, button) {
  display: flex; width: 100%; justify-content: flex-start; min-height: var(--control); padding: 0 calc(var(--space) * 1.5);
  background: transparent; border: none; border-radius: 6px; color: var(--ink); font-weight: 400;
}
details.dropdown .menu :is(a, button):hover { background: var(--surface-2); text-decoration: none; filter: none; }
details.dropdown .menu .danger { color: var(--danger); }

/* --- Діалог «Так / Ні» (PNL-UX-06) ----------------------------------------------------------- */
dialog {
  border: 1px solid var(--line); border-radius: var(--radius); padding: calc(var(--space) * 3);
  background: var(--surface); color: var(--ink); max-width: min(520px, calc(100vw - 32px));
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
}
dialog::backdrop { background: rgb(15 26 32 / 0.45); }
dialog p { margin: 0 0 calc(var(--space) * 2); font-size: var(--fs-16); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space); flex-wrap: wrap; }

/* --- Фото, документи, правові тексти ---------------------------------------------------------- */
/* Профіль фахівця в картці людини: фото й стан ліворуч, числа рядком праворуч (власник 08.10). */
.profile-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: calc(var(--space) * 2.5); align-items: start; }
.profile-side { display: grid; gap: 6px; justify-items: start; }
.profile-photo { display: block; width: 128px; height: 128px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-photo.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: var(--fs-12); text-align: center; padding: var(--space); }
.profile-facts { display: flex; flex-wrap: wrap; gap: 4px calc(var(--space) * 3); margin: 0 0 calc(var(--space) * 1.5); color: var(--muted); }
.profile-facts b { color: var(--ink); font-size: var(--fs-16); }
.profile-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px calc(var(--space) * 2); margin: 0; }
.profile-list dt { color: var(--muted); }
.profile-list dd { margin: 0; }
@media (max-width: 559px) { .profile-card { grid-template-columns: minmax(0, 1fr); } .profile-list { grid-template-columns: minmax(0, 1fr); } .profile-list dd { margin-bottom: 6px; } }
.photos { display: flex; flex-wrap: wrap; gap: var(--space); margin: 6px 0; }
.photos a { display: block; line-height: 0; }
.photos img { height: 96px; width: auto; border: 1px solid var(--line); border-radius: 8px; }
.photos .pending {
  height: 96px; min-width: 96px; display: flex; align-items: center; justify-content: center; padding: 0 var(--space);
  border: 1px dashed var(--field-line); border-radius: 8px; color: var(--muted); font-size: var(--fs-12); text-align: center;
}
.documents { margin: 0; padding-left: 18px; }
.legal-doc { max-width: 860px; line-height: 1.6; font-size: var(--fs-16); }
.legal-doc h1 { font-size: var(--fs-20); margin: 0 0 12px; }
.legal-doc h2 { font-size: var(--fs-16); margin: 24px 0 8px; }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 12px; padding-left: 22px; }
.legal-doc li { margin-bottom: 4px; }
.legal-doc table { margin: 8px 0 16px; }
.legal-doc th, .legal-doc td { border: 1px solid var(--line); }
.legal-doc blockquote { margin: 0 0 12px; padding: 6px 12px; border-left: 3px solid var(--line); color: var(--muted); }

/* --- Планшет і телефон (PNL-RWD-01): меню — кнопкою «☰», виїжджає зліва поверх сторінки ------ */
@media (max-width: 839px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .js .sidebar {
    position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto;
    transform: translateX(-105%); transition: transform 0.18s ease; box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
  }
  .js .nav-open .sidebar { transform: none; }
  .js .nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(15 26 32 / 0.45); }
  .js .topbar .burger { display: inline-flex; }
  .topbar { padding: var(--space) calc(var(--space) * 2); }
  .topbar .search { order: 5; flex-basis: 100%; max-width: none; }
  .crumbs { padding: var(--space) calc(var(--space) * 2) 0; }
  main { padding: calc(var(--space) * 2); }
  /* широка таблиця гортається всередині себе, а сторінка вбік — ні */
  main table { display: block; overflow-x: auto; }
}
@media (max-width: 599px) {
  .actions form { min-width: 100%; }
  .topbar .user .label, .topbar .help-link .label { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Список «знайдені → обрані» (`panel/_picker.html`, ТР-106): реферальні програми, організації. */
.picker { margin:0 0 12px; }
.picker-title { margin:0 0 4px; }
.picker-cols { display:grid; grid-template-columns:1fr auto 1fr; gap:8px 12px; align-items:start; }
.picker-col select { margin:0; }
.picker-btns { display:flex; flex-direction:column; gap:8px; justify-content:center; padding-top:40px; }
.picker-clear { display:block; width:100%; margin:4px 0 8px; background:transparent; color:var(--accent); border:1px solid var(--field-line); }
.picker-clear:hover, .picker-clear:focus { background:var(--surface-2); }
.picker-group { font-weight:600; }

/* Офлайн реферали (`referrals/offline.html`): поля й кнопка форми — на одній нижній лінії. */
.offline-form { max-width:1040px; }
.offline-form .row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 150px; gap:12px 16px; align-items:end; }
.offline-form label { display:block; margin:0; }
.offline-form :is(input:not([type=hidden]), select) { width:100%; box-sizing:border-box; margin:4px 0 0; min-height:var(--control); }
.offline-form input[type=file] { padding:5px 6px; }
.offline-form .row button { width:100%; white-space:nowrap; margin:0; min-height:var(--control); }
.confirm-cell { display:flex; gap:6px; flex-wrap:nowrap; align-items:center; }
.badge-ok { background:var(--success-bg); color:var(--ink); white-space:nowrap; }
@media (max-width: 839px) { .offline-form .row { grid-template-columns:1fr; } }

/* «Бізнес-процеси» (PNL-HELP-01): зміст, текст розділів і схеми — SVG на білому, клік — більша */
.help-toc ol { margin:0; padding-left:20px; columns:2 260px; }
.help-toc li { margin:2px 0; }
.help-body { max-width:960px; }
.help-body h2 { margin-top:calc(var(--space) * 4); scroll-margin-top:calc(var(--space) * 2); }
.help-body table { margin:var(--space) 0; }
.help-body blockquote { margin:var(--space) 0; padding:var(--space) calc(var(--space) * 2); border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 8px 8px 0; }
figure.map { margin:calc(var(--space) * 2) 0; }
figure.map img { display:block; max-width:100%; height:auto; background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px; box-sizing:border-box; }
figure.map figcaption { font-size:var(--fs-14); color:var(--muted); margin-top:4px; }
/* «Інструкція» (PNL-HELP-02): зміст розділами, підрозділи — h3 з якорем, знімки екрана в рамці */
.guide-toc { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--space) calc(var(--space) * 3); }
.guide-toc p { margin:0 0 4px; }
.guide-toc ul { margin:0; padding-left:20px; }
.guide-toc li { margin:2px 0; }
.help-chapter h2 { font-size:var(--fs-20); margin-top:calc(var(--space) * 5); padding-top:calc(var(--space) * 2); border-top:1px solid var(--line); }
.help-chapter h3 { font-size:var(--fs-16); margin-top:calc(var(--space) * 3); scroll-margin-top:calc(var(--space) * 2); }
figure.shot { margin:calc(var(--space) * 2) 0; }
figure.shot img { display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
figure.shot figcaption { font-size:var(--fs-14); color:var(--muted); margin-top:4px; }