/* Кабинет платформы — слой адаптации наших классов к UI-системе Тима.
   Порядок подключения (lib/ui.php → ui_head): base.css (цвета, тёмная тема, сайдбар, таблицы, формы) →
   ui-compact.css (стиль «плотный»: токены --ui-*, .ui-head/.ui-chip/.ui-kpi, плотные таблицы, кнопки) → app.css (этот файл).
   Здесь: наши классы (.card .row .chip .kpi .badge .flash .tw .kanban .login …) → компоненты Тима; меню без JS
   (чекбокс #navtg), тёмная тема по куке (data-theme) и по системной настройке. Инлайновых style="" и JS нет (CSP). */

/* ---- 0. Совместимость имён переменных (tb.css и старые правила) ---- */
:root {
  --line: var(--border); --card: var(--surface); --run: var(--warn); --bad: var(--err); --wait: var(--muted);
  --soft: var(--accent-soft); --radius: var(--ui-r); --accent-text: #fff;
}
/* Тёмная тема по системной настройке, пока кука темы не задана (у Тима переключатель на JS; у нас — кнопка в меню → кука).
   Палитра — та же, что :root[data-theme=dark] в base.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1115; --surface: #171a21; --surface2: #1d212a; --hover: #232834; --active-soft: #1e2c4d;
    --border: #2a2f3a; --border-subtle: #232834; --text: #e6e9ef; --muted: #8b93a3;
    --accent: #6d8dff; --accent-soft: #1e2745; --accent-hover: #5577f5;
    --ok: #34d399; --ok-bg: #0e2b1e; --warn: #fbbf24; --warn-bg: #2e2410; --err: #f87171; --err-bg: #341a1a;
    --shadow: 0 1px 3px rgba(0,0,0,.5);
    --ui-th-bg: var(--surface2); --ui-zebra: rgba(255,255,255,.025);
  }
}

/* ---- 1. База ---- */
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 6px 0; }
small, .muted { color: var(--muted); }
small { font-size: var(--ui-fs-s); }
code { font-family: var(--ui-font-mono); font-size: 12px; background: var(--surface2); padding: 0 4px; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 8px 0; }
progress { width: 220px; max-width: 100%; vertical-align: middle; }
.pre { white-space: pre-wrap; word-break: break-word; }
.ev { padding: 3px 0; }
.ev small, small.ev { display: block; }
.b-ok { color: var(--ok); } .b-bad { color: var(--err); } .b-run { color: var(--warn); }
.b-wait { color: var(--muted); } .b-off { color: var(--muted); opacity: .7; }

/* заголовки: страница 20px (как .page-title у Тима), раздел 15px, внутри карточки — 10.5px капителью (ui-compact) */
h1 { font-size: var(--ui-fs-title); font-weight: 700; margin: 0 0 var(--ui-gap); line-height: 1.2; }
h1 small { font-size: var(--ui-fs); font-weight: 400; color: var(--muted); }
h2 { font-size: var(--ui-fs-h); font-weight: 700; margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
h2 small { font-weight: 400; color: var(--muted); font-size: inherit; }
h2 a { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; }
.card h2 .badge, .card h2 .btn { text-transform: none; letter-spacing: 0; }
.card h2 .btn { margin-left: auto; }

/* ---- 2. Каркас: сайдбар Тима без JS ---- */
.navtg { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
label.sidebar-toggle { display: flex; align-items: center; justify-content: center; margin: 0; font-size: 16px; line-height: 1; color: var(--text); }
label.sidebar-backdrop { margin: 0; cursor: pointer; }
label.sidebar-close { margin: 0 12px 0 auto; font-size: 16px; color: var(--text); flex: 0 0 auto; }
.sidebar-brand a.brand-name { flex: 1; min-width: 0; color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.15; white-space: normal; }
.sidebar-brand a.brand-name small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
a.nav-item { text-decoration: none; }
a.nav-item:hover { text-decoration: none; }
.nav-grp-h { cursor: default; }
.nav-grp-h::after { display: none; }
.sidebar-footer .who { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.sidebar-footer .who .role { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.sidebar-footer form { display: block; margin: 0; gap: 0; }
.sidebar-footer .btn { display: block; width: 100%; text-align: center; margin: 6px 0 0; }
main#mainRoot { min-width: 0; }
main#mainRoot.solo { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
main#mainRoot.solo .page { width: 100%; max-width: 460px; }

/* ---- 3. Шапка раздела: .phead = .ui-head (ui-compact) ---- */
.ui-head form.row, .ui-head .chips { flex-direction: row; flex-wrap: nowrap; gap: 4px; align-items: center; }
.ui-head form.row input, .ui-head form.row select { width: auto; }
.ui-head > small { color: var(--muted); font-size: var(--ui-fs-s); white-space: nowrap; }

/* ---- 4. Чипы (.chip = .ui-chip) и счётчики (.kpi = .ui-kpi: чипы, не плитки) ---- */
.chip { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; line-height: 1.5; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: var(--ui-r-s); background: var(--surface); color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip b { color: var(--text); font-weight: 700; }
.chip small { font-size: 10.5px; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--muted); color: var(--text); text-decoration: none; }
.chip.on, .chip[aria-current], .chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.on b, .chip[aria-current] b, .chip.is-on b { color: #fff; }
.chip.b-bad, .chip.b-ok, .chip.b-run, .chip.c-bad, .chip.c-ok, .chip.c-warn, .chip.c-run { color: var(--muted); border-color: var(--border); }
.chip.c-bad b, .chip.b-bad b { color: var(--err); }
.chip.c-warn b, .chip.c-run b, .chip.b-run b { color: var(--warn); }
.chip.c-ok b, .chip.b-ok b { color: var(--ok); }
label.chip { cursor: pointer; }
label.chip input[type="checkbox"] { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--ui-gap-s); align-items: center; }
p.chips, div.chips, nav.chips { margin: 0 0 var(--ui-gap); }
.ui-head .chips { margin: 0; }
.kpis { display: flex; flex-wrap: wrap; gap: var(--ui-gap-s); margin-bottom: var(--ui-gap); }
.kpi { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--ui-r-s);
  background: var(--surface); font-size: 11px; color: var(--muted); text-decoration: none; }
.kpi b { display: inline; font-size: 12.5px; color: var(--text); }
.kpi small { font-size: 11px; }
a.kpi:hover { border-color: var(--accent); text-decoration: none; }
.kpi.c-bad b { color: var(--err); }

/* ---- 5. Карточки и сетка ---- */
.card.dec { margin: 8px 0; }
details > summary { cursor: pointer; }
summary.muted { font-size: var(--ui-fs-s); }
details.card > summary { font-weight: 600; font-size: 12.5px; }
details.card[open] > summary { margin-bottom: 8px; }
details.more, details.del { margin-top: 4px; }
details.more form, details.del form { margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-gap); }
.grid2 > * { min-width: 0; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
/* задачи (слева, шире — там таблица) и идеи (справа); на узком экране — друг под другом */
.grid2.tasks-ideas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 1100px) { .grid2.tasks-ideas { grid-template-columns: 1fr; } }
.card.idea { margin: 8px 0; }
.card.idea > .row > b { flex: 1 1 auto; }
.card.idea details.more { margin-top: 4px; }
details.plan > summary { color: var(--muted); }
details.plan[open] > summary { color: var(--text); }
/* галерея фото (зумы): карточки в ряд */
.chips > .card { margin: 0; max-width: 200px; }
.chips > .card img { display: block; max-width: 100%; height: auto; border-radius: var(--ui-r-s); }

/* ---- 6. Таблицы: плотные, шапка капителью, зебра (ui-compact), только горизонтальный скролл ---- */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; line-height: 1.3; }
th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
tr:last-child td { border-bottom: 0; }
.tw tr:nth-child(even) td { background: var(--ui-zebra); }
.tw tr:hover td { background: var(--hover); }
td.num { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
td small { display: block; font-size: 10.5px; color: var(--muted); }
td .badge + small { display: inline; }
tr.off td { opacity: .6; }
td.acts { min-width: 260px; }
table.tasks td.acts { min-width: 320px; }
table.settings td:first-child { white-space: nowrap; }
tr.grp td { font-weight: 600; color: var(--muted); background: var(--surface2); }

/* ---- 7. Бейджи статусов (= .ui-pill) ---- */
.badge { display: inline-block; border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent; background: var(--surface2); color: var(--muted); }
.badge.b-ok { background: var(--ok-bg); color: var(--ok); }
.badge.b-bad { background: var(--err-bg); color: var(--err); }
.badge.b-run { background: var(--warn-bg); color: var(--warn); }
.badge.b-wait { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.badge.b-off { background: var(--surface2); color: var(--muted); opacity: .7; }

/* ---- 8. Формы и кнопки ---- */
form { gap: var(--ui-gap-s); }
form.inline { display: inline; margin: 0; }
.row { display: flex; gap: var(--ui-gap-s); flex-wrap: wrap; align-items: center; }
.row > * { min-width: 0; flex: 0 1 auto; }
form.row { flex-direction: row; }
.row > details.wide, .row > .wide { flex-basis: 100%; }
input, select, textarea { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--ui-r-s);
  background: var(--surface2); color: var(--text); width: auto; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; margin: 0 4px 0 0; vertical-align: middle; box-shadow: none; }
input[type="file"] { background: none; border: 0; padding: 2px 0; }
textarea { width: 100%; min-height: 54px; resize: vertical; line-height: 1.4; }
input.grow { flex: 1 1 180px; }
input.wide { width: 100%; margin-bottom: 4px; }
input.narrow { width: 70px; }
form.edit { margin-top: 8px; }
form.edit textarea { margin-bottom: 4px; }
form.enq textarea { margin-top: 6px; min-height: 70px; font-family: var(--ui-font-mono); font-size: 12px; }
label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: var(--ui-fs-s); color: var(--muted); }
label:has(> textarea) { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
label > textarea { flex: 1 1 100%; }
form.card label { margin: 0 12px 4px 0; }
datalist { display: none; }
button, .btn { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; line-height: 1.35; padding: 4px 10px; border-radius: var(--ui-r-s);
  border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-block;
  text-decoration: none; transition: background var(--ui-t), border-color var(--ui-t); }
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.ghost, .btn { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 400; }
button.ghost:hover, .btn:hover { background: var(--hover); border-color: var(--border); text-decoration: none; }
button.bad { background: var(--err-bg); border-color: transparent; color: var(--err); font-weight: 600; }
button.bad:hover { background: var(--err); border-color: var(--err); color: #fff; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 400; font-size: inherit; line-height: inherit; }
button.link:hover { background: none; text-decoration: underline; }
button:disabled { opacity: .55; cursor: default; }

/* ---- 9. Сообщения ---- */
.flash { padding: 6px 10px; border-radius: var(--ui-r-s); margin-bottom: var(--ui-gap); border: 1px solid transparent; font-size: 12.5px; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.err { background: var(--err-bg); color: var(--err); }
.flash code { background: rgba(0,0,0,.06); color: inherit; }

/* ---- 10. Вход (как login.php у Тима: крупная карточка, пилюля-кнопка) и публичная главная ---- */
.login { max-width: 460px; margin: 0 auto; padding: 32px; border-radius: 22px; box-shadow: 0 18px 40px rgba(16,24,40,.06); font-size: 15px; overflow: visible; }
.login h1 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
.login .sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.login label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 0 0 14px; font-size: 13px; }
.login input { width: 100%; padding: 11px 13px; border-radius: 12px; font-size: 15px; }
.login button { width: 100%; margin-top: 6px; padding: 13px; border-radius: 999px; font-size: 15px; font-weight: 700; }
main.solo .flash { border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.home { display: grid; place-items: center; min-height: 100vh; }
.home-box { text-align: center; padding: 16px; }
.home-box h1 { font-size: 24px; }

/* ---- 11. Доска (канбан) — как .crm-col/.crm-deal у Тима: колонки в горизонтальной прокрутке, страница — один вертикальный скролл ---- */
.kanban { display: flex; gap: var(--ui-gap); overflow-x: auto; align-items: flex-start; padding-bottom: 8px; margin-bottom: var(--ui-gap); -webkit-overflow-scrolling: touch; }
.kcol { flex: 0 0 260px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--ui-r); border-top: 3px solid var(--c, var(--border)); display: flex; flex-direction: column; }
.kcol.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.kh { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface2); z-index: 1; font-size: 12px; }
.kh b { font-size: 13px; color: var(--c, var(--text)); }
.kh .n { color: var(--muted); font-size: 12px; }
.kh small { margin-left: auto; color: var(--c, var(--muted)); }
.kb { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r); padding: 8px 10px; font-size: 12.5px; cursor: grab; }
.kcard:hover { border-color: var(--accent); }
.kcard.drag { opacity: .5; }
.kcard .kname { font-weight: 600; }
.kmeta { margin-top: 3px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ksum { margin-top: 4px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.ksrc { display: block; font-size: 11.5px; color: var(--muted); }
.kmove summary { color: var(--muted); font-size: 11.5px; }
.kmove form { margin-top: 4px; }
.kmove select { max-width: 110px; }
.kmove input.grow { flex-basis: 80px; }
.kempty { margin: 4px 0; font-size: 12px; }
.kmore { display: block; text-align: center; padding: 4px; font-size: 12px; }
@media (min-width: 1100px) {
  .kanban { overflow-x: visible; }
  .kcol { flex: 1 1 0; min-width: 0; }
}

/* ---- 12. Телефон (≤720 px, как у Тима): меню — выезжающая панель по «☰», формы столбиком, доска — колонка во всю ширину ---- */
@media (max-width: 720px) {
  .sidebar { width: min(280px, 84vw); }
  .navtg:not(:checked) ~ .app .sidebar { transform: translateX(-105%); border-right: none; }
  .navtg:checked ~ .app .sidebar { transform: none; }
  .navtg:checked ~ .sidebar-backdrop { display: block; }
  .navtg:checked ~ .sidebar-toggle { display: none !important; }
  form.row { flex-direction: column; align-items: stretch; }
  form.row > *, .row input, .row select { width: 100%; }
  .ui-head form.row { flex-direction: row; align-items: center; }
  .ui-head form.row > *, .ui-head form.row input, .ui-head form.row select { width: auto; }
  input.grow { flex-basis: auto; }
  td.acts, table.tasks td.acts { min-width: 200px; }
  .kanban { scroll-snap-type: x mandatory; }
  .kcol { flex: 0 0 86vw; max-width: 86vw; scroll-snap-align: start; }
  .login { padding: 22px 16px; border-radius: 16px; }
}