/* Citena — макет панели. Оформление снято с дизайн-прототипа
   «CRM Bagira Perfeccion.dc.html»: тёмная лента слева, зелёный акцент,
   панель ассистента справа, светлая и тёмная тема. */
:root{
  --bg:#f3f4f6; --card:#ffffff; --ink:#111827; --ink-2:#374151; --mut:#6b7280;
  --line:#e5e7eb; --line-2:#f3f4f6;
  --rail:#0f1a14; --rail-ink:#8b9a91; --rail-on:#16a34a;
  --ok:#16a34a; --ok-bg:#dcfce7; --ok-ink:#15803d;
  --bad:#dc2626; --bad-bg:#fee2e2;
  --warn:#d97706; --warn-bg:#fef3c7;
  --info:#2563eb; --info-bg:#dbeafe;
  --col:#e8eaee;  /* подложка колонки канбана: темнее страницы, светлее карточки */
  --shadow:0 1px 2px rgba(16,24,40,.05);
}
[data-theme="dark"]{
  --bg:#0b100d; --card:#141b17; --ink:#e8edea; --ink-2:#c3ccc7; --mut:#8b9a91;
  --line:#22302a; --line-2:#1a241f;
  --rail:#080d0a; --rail-ink:#7d8c83;
  --ok-bg:#0f2a1b; --bad-bg:#2a1214; --warn-bg:#2a2110; --info-bg:#101f37;
  --col:#0f1713;
  --shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
button{font:inherit; color:inherit}

.ct-app{display:flex; min-height:100vh}

/* ---------- лента слева ---------- */
.ct-rail{width:64px; flex:0 0 64px; background:var(--rail); display:flex; flex-direction:column;
  align-items:center; padding:12px 0; position:sticky; top:0; height:100vh; gap:4px}
.ct-ten{width:34px; height:34px; border-radius:9px; border:0; cursor:pointer; font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center; background:#1e2b24; color:#93a49a; margin-bottom:4px; line-height:1}
.ct-ten[aria-pressed="true"]{background:var(--ok); color:#fff}
.ct-rail__sep{width:26px; height:1px; background:rgba(255,255,255,.1); margin:8px 0 6px}
.ct-rail__b{width:40px; height:40px; border-radius:10px; border:0; background:none; color:var(--rail-ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; font-size:17px; line-height:1}
.ct-rail__b:hover{background:rgba(255,255,255,.06); color:#fff}
.ct-rail__b[aria-selected="true"]{background:rgba(22,163,74,.18); color:#fff}
.ct-rail__b .ct-dot{position:absolute; top:4px; right:4px; min-width:16px; height:16px; border-radius:9px;
  background:var(--bad); color:#fff; font-size:10px; font-weight:600; display:flex; align-items:center;
  justify-content:center; padding:0 4px; line-height:1}

/* ---------- содержимое ---------- */
.ct-main{flex:1; min-width:0; padding:22px 26px 50px; overflow:hidden}
.ct-top{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap}
.ct-top h1{font-size:24px; margin:0 0 5px; font-weight:600; letter-spacing:-.3px; line-height:1.2}
.ct-top p{margin:0; color:var(--mut); font-size:14px; max-width:520px; line-height:1.5}
.ct-ctl{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ct-seg{display:flex; background:var(--line-2); border:1px solid var(--line); border-radius:9px; padding:2px}
.ct-seg button{border:0; background:none; padding:5px 11px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--mut); line-height:1.4}
.ct-seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}
.ct-clock{text-align:right; line-height:1.25}
.ct-clock__k{font-size:10px; letter-spacing:.8px; color:var(--mut); text-transform:uppercase}
.ct-clock__v{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}

.ct-view{display:none}
.ct-view.ct-on{display:block}

.ct-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:12px; margin-bottom:18px}
.ct-kpi{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:14px 16px; box-shadow:var(--shadow)}
.ct-kpi__k{font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--mut); line-height:1.5}
.ct-kpi__v{font-size:28px; font-weight:600; letter-spacing:-.6px; margin:3px 0 2px; line-height:1.15}
.ct-kpi__d{font-size:12.5px; color:var(--mut); line-height:1.45}
.ct-kpi--bad .ct-kpi__v{color:var(--bad)} .ct-kpi--ok .ct-kpi__v{color:var(--ok)} .ct-kpi--warn .ct-kpi__v{color:var(--warn)}

.ct-card{background:var(--card); border:1px solid var(--line); border-radius:11px; margin-bottom:16px;
  overflow:hidden; box-shadow:var(--shadow)}
.ct-card__h{padding:13px 17px; border-bottom:1px solid var(--line); display:flex; gap:12px;
  align-items:center; justify-content:space-between; flex-wrap:wrap}
.ct-card__h h2{font-size:15px; margin:0; font-weight:600; line-height:1.35}
.ct-card__h .ct-sub{font-size:12.5px; color:var(--mut); line-height:1.45}
.ct-card__b{padding:15px 17px}
.ct-card__b--0{padding:0}
.ct-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.ct-grid2--w{grid-template-columns:1.5fr 1fr}
@media(max-width:1100px){.ct-grid2,.ct-grid2--w{grid-template-columns:1fr}}

table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--mut);
  font-weight:600; padding:9px 17px; border-bottom:1px solid var(--line); white-space:nowrap; line-height:1.5}
td{padding:11px 17px; border-bottom:1px solid var(--line-2); line-height:1.45; vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--line-2)}
td:last-child,th:last-child{white-space:nowrap; width:1%}
.ct-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ct-mut{color:var(--mut)} .ct-b{font-weight:600} .ct-sm{font-size:12.5px}

.ct-tag{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11.5px; line-height:1.6; white-space:nowrap; font-weight:500}
.ct-tag--ok{background:var(--ok-bg); color:var(--ok-ink)}
.ct-tag--bad{background:var(--bad-bg); color:var(--bad)}
.ct-tag--warn{background:var(--warn-bg); color:var(--warn)}
.ct-tag--info{background:var(--info-bg); color:var(--info)}
.ct-tag--mut{background:var(--line-2); color:var(--mut)}

.ct-q{display:flex; gap:12px; align-items:center; padding:13px 17px; border-bottom:1px solid var(--line-2)}
.ct-q:last-child{border-bottom:0}
.ct-q--late{background:var(--bad-bg); box-shadow:inset 3px 0 0 var(--bad)}
[data-theme="dark"] .ct-q--late{background:rgba(220,38,38,.09)}
.ct-av{width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:var(--line-2); color:var(--mut);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; line-height:1}
.ct-q__m{flex:1; min-width:0}
.ct-q__n{font-weight:600; display:flex; gap:7px; align-items:center; flex-wrap:wrap; line-height:1.4}
.ct-q__t{color:var(--mut); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.45}
.ct-q__w{text-align:right; line-height:1.3}
.ct-q__w b{color:var(--bad); font-size:15px; font-variant-numeric:tabular-nums}
.ct-q__w span{display:block; font-size:11.5px; color:var(--mut)}
.ct-btn{border:0; background:var(--ok); color:#fff; padding:7px 14px; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:500; line-height:1.4}
.ct-btn--g{background:var(--line-2); color:var(--ink-2)}

.ct-kan{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
@media(max-width:1250px){.ct-kan{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.ct-kan{grid-template-columns:1fr}}
/* Колонка получает свою подложку: раньше она была того же цвета, что страница,
   и белые карточки висели ни на чём — границы столбца не читалось вовсе. */
.ct-kan__c{background:var(--col); border-radius:12px; padding:10px 10px 4px}
.ct-kan__h{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px;
  font-weight:600; color:var(--ink-2); padding:3px 4px 10px; line-height:1.4}
.ct-kan__h span:last-child{background:var(--card); color:var(--mut); border-radius:20px;
  min-width:22px; text-align:center; padding:1px 7px; font-size:11.5px; font-weight:600}
.ct-kan__n{background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:10px 11px 10px 13px; margin-bottom:8px; line-height:1.45; box-shadow:var(--shadow);
  border-left:3px solid var(--line)}
/* Левая грань карточки повторяет цвет колонки — статус виден, даже когда
   столбцы на узком экране встают друг под друга и шапка уезжает. */
.ct-kan__c--info .ct-kan__n{border-left-color:var(--info)}
.ct-kan__c--warn .ct-kan__n{border-left-color:var(--warn)}
.ct-kan__c--ok   .ct-kan__n{border-left-color:var(--ok)}
.ct-kan__c--mut  .ct-kan__n{border-left-color:var(--mut)}
.ct-kan__c--bad  .ct-kan__n{border-left-color:var(--bad)}
.ct-kan__n b{display:block; font-size:13.5px; margin-bottom:2px}
.ct-kan__n .ct-s{font-size:12.5px; color:var(--mut)}
.ct-kan__n .ct-m{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap}

.ct-cal{overflow-x:auto}
.ct-cal table{min-width:620px; font-size:13.5px}
.ct-cal td{padding:0; height:34px; border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2)}
.ct-cal th{padding:11px 14px}
.ct-cal .ct-hh{width:62px; color:var(--mut); font-size:12px; padding:0 10px; text-align:right;
  vertical-align:top; border-right:1px solid var(--line)}
.ct-slot{margin:1px 4px; padding:5px 9px; border-radius:7px; font-size:12.5px; line-height:1.35;
  background:var(--info-bg); box-shadow:inset 3px 0 0 var(--info); height:calc(100% - 2px); overflow:hidden}
.ct-slot--g{background:var(--ok-bg); box-shadow:inset 3px 0 0 var(--ok)}
.ct-slot b{display:block; font-weight:600}
.ct-slot span{color:var(--mut); font-size:11.5px}

.ct-bars{display:flex; flex-direction:column; gap:8px}
.ct-bar{display:grid; grid-template-columns:1fr 2fr 60px; gap:11px; align-items:center; font-size:13px; line-height:1.4}
.ct-bar__t{background:var(--line-2); border-radius:5px; height:18px; overflow:hidden}
/* display:block обязателен: .ct-bar__f лежит внутри .ct-bar__t, которая сама не флекс
   и не грид, поэтому span оставался строчным и игнорировал и width, и height —
   полоски выглядели пустыми. */
.ct-bar__f{display:block; height:100%; background:var(--ok); border-radius:5px}

.ct-note{border-left:3px solid var(--ok); background:var(--ok-bg); padding:11px 14px;
  border-radius:0 8px 8px 0; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.ct-note--bad{border-color:var(--bad); background:var(--bad-bg)}
.ct-note--warn{border-color:var(--warn); background:var(--warn-bg)}

.ct-wa{display:flex; flex-direction:column; gap:9px}
.ct-msg{padding:9px 13px; border-radius:12px; font-size:13.5px; line-height:1.5; max-width:84%}
.ct-msg--in{background:var(--line-2); align-self:flex-start; border-bottom-left-radius:3px}
.ct-msg--out{background:var(--ok-bg); align-self:flex-end; border-bottom-right-radius:3px}
.ct-msg em{display:block; font-style:normal; font-size:11px; color:var(--mut); margin-top:4px; line-height:1.4}

.ct-set{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-2); line-height:1.45}
.ct-set:last-child{border-bottom:0}
.ct-set__d{font-size:12.5px; color:var(--mut); margin-top:2px; line-height:1.45}
.ct-pill{background:var(--line-2); border:1px solid var(--line); border-radius:8px; padding:5px 11px;
  font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- ассистент ---------- */
.ct-ai{width:310px; flex:0 0 310px; background:var(--card); border-left:1px solid var(--line);
  padding:16px 16px 20px; position:sticky; top:0; height:100vh; overflow-y:auto}
.ct-ai__h{display:flex; gap:10px; align-items:center; margin-bottom:22px}
.ct-ai__i{width:34px; height:34px; border-radius:9px; background:var(--ok-bg); color:var(--ok-ink);
  display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1}
.ct-ai__t{font-weight:600; line-height:1.3}
.ct-ai__s{font-size:11.5px; color:var(--ok); line-height:1.4}
.ct-ai__c{text-align:center; padding:24px 6px 16px}
.ct-ai__c b{display:block; margin-bottom:5px; line-height:1.35}
.ct-ai__c p{margin:0; font-size:12.5px; color:var(--mut); line-height:1.5}
.ct-ai__q{width:100%; text-align:left; background:var(--line-2); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:13px; line-height:1.45}
.ct-ai__q:hover{border-color:var(--ok)}
.ct-ai__a{background:var(--ok-bg); border-radius:9px; padding:11px 13px; font-size:13px;
  line-height:1.55; margin-bottom:10px; color:var(--ink-2)}
.ct-ai__f{margin-top:16px; font-size:11px; color:var(--mut); text-align:center; line-height:1.5}
@media(max-width:1400px){.ct-ai{display:none}}

@media(max-width:820px){
  .ct-app{flex-direction:column}
  .ct-rail{width:100%; flex:none; height:auto; position:static; flex-direction:row; overflow-x:auto;
    padding:8px 10px; justify-content:flex-start; gap:2px}
  .ct-rail__sep{width:1px; height:26px; margin:0 6px}
  .ct-ten{margin-bottom:0}
  .ct-main{padding:16px 14px 36px}
  .ct-top h1{font-size:20px}
  .ct-kan{grid-template-columns:1fr}
  th,td{padding:9px 12px}
}

/* Колонки мастеров должны быть равными. Без table-layout:fixed браузер отдаёт
   ширину по содержимому, и врач с длинными названиями услуг забирает полсетки.
   Общее правило `th:last-child{width:1%}` (оно для кнопок в обычных таблицах)
   в календаре сжимало последнего мастера до 11px — здесь оно отменяется. */
.ct-cal table{table-layout:fixed}
.ct-cal th:first-child{width:62px}
.ct-cal td:last-child,.ct-cal th:last-child{width:auto; white-space:normal}
.ct-cal th{overflow:hidden; text-overflow:ellipsis}
.ct-slot b{overflow-wrap:anywhere}

/* ---------- раздвижная лента ---------- */
/* Иконки без подписи угадываются не всегда — в дизайне поэтому есть кнопка
   «Свернуть меню». Ширина и выравнивание меняются классом на самой ленте,
   подписи скрыты не через display у каждой, а одним правилом. */
.ct-rail{transition:width .18s}
.ct-rail__l{display:none; font-size:13.5px; white-space:nowrap; text-align:left; overflow:hidden; text-overflow:ellipsis}
.ct-rail.ct-wide{width:208px; flex:0 0 208px; align-items:stretch; padding-left:10px; padding-right:10px}
.ct-rail.ct-wide .ct-rail__l{display:block; flex:1 1 0; min-width:0}
.ct-rail.ct-wide .ct-rail__b{width:100%; justify-content:flex-start; gap:12px; padding:0 10px}
.ct-rail.ct-wide .ct-ten{width:100%; justify-content:flex-start; gap:12px; padding:0 11px; height:36px}
.ct-rail.ct-wide .ct-rail__sep{width:100%}
/* В раскрытом виде счётчик уходит вправо. order нужен потому, что в разметке
   он стоит перед подписью — без него margin-left:auto прижал бы его к тексту. */
.ct-rail.ct-wide .ct-rail__b .ct-dot{position:static; order:3; margin-left:auto}
.ct-rail.ct-wide .ct-rail__l{order:2}
.ct-rail__t{margin-top:auto; width:40px; height:40px; border:0; background:none; color:var(--rail-ink);
  cursor:pointer; border-radius:10px; display:flex; align-items:center; gap:12px; padding:0;
  justify-content:center; flex:0 0 40px}
.ct-rail__t:hover{background:rgba(255,255,255,.06); color:#fff}
/* Свёрнутая лента: стрелка вправо — «раздвинуть». Раскрытая: влево — «свернуть». */
.ct-rail__t svg{width:20px; height:20px; flex:0 0 20px; transition:transform .18s}
.ct-rail.ct-wide .ct-rail__t{width:100%; justify-content:flex-start; padding:0 10px}
.ct-rail.ct-wide .ct-rail__t svg{transform:rotate(180deg)}
@media(max-width:820px){ .ct-rail__t{display:none} .ct-rail.ct-wide{width:100%; flex:none} }

/* Иконки ленты — штриховые SVG, не типографские символы: у тех разная насечка
   и разный кегль в каждом шрифте, из-за чего меню выглядело рассыпанным. */
.ct-rail__b svg{width:20px; height:20px; flex:0 0 20px}

/* ---------- демо-полоса ---------- */
/* Переключателя клиник в продукте нет: арендатор берётся из аккаунта при входе,
   и админ одной клиники не должен даже видеть, что рядом есть чужая. Для показа
   он нужен — поэтому вынесен за пределы панели и подписан как демонстрационный. */
.ct-demobar{background:#1f2a24; color:#c8d3cd; display:flex; gap:12px; align-items:center;
  flex-wrap:wrap; padding:7px 16px; font-size:12.5px; line-height:1.5}
.ct-demobar__k{background:#c19a3e; color:#1b1205; border-radius:5px; padding:1px 8px;
  font-weight:600; font-size:11px; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap}
.ct-demobar__t{flex:1 1 260px; min-width:0}
.ct-demobar__s{display:flex; gap:2px; background:rgba(0,0,0,.28); border-radius:8px; padding:2px}
.ct-demobar__s button{border:0; background:none; color:#9aa8a1; padding:4px 11px; border-radius:6px;
  cursor:pointer; font-size:12.5px; white-space:nowrap; line-height:1.5}
.ct-demobar__s button[aria-pressed="true"]{background:var(--ok); color:#fff}
.ct-ten--now{cursor:default; background:#1e2b24; color:#cfe0d6}
.ct-rail.ct-wide .ct-ten--now{justify-content:flex-start}
@media(max-width:820px){.ct-demobar__t{display:none}}

/* Роль переключает не оформление, а состав ленты: у администратора смена,
   у владельца — деньги и загрузка. Скрытые пункты не занимают места. */
.ct-rail__b[hidden]{display:none}
.ct-chain{display:flex; gap:8px; flex-wrap:wrap}
.ct-step{flex:1 1 150px; min-width:150px; background:var(--line-2); border:1px solid var(--line);
  border-radius:9px; padding:11px 12px; line-height:1.45}
.ct-step--live{border-color:var(--ok); background:var(--ok-bg)}
.ct-step__k{font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--mut); line-height:1.5}
.ct-step__v{font-size:16px; font-weight:600; margin:2px 0 3px; line-height:1.25}
.ct-step__d{font-size:12px; color:var(--mut); line-height:1.45}

/* Лента и панель ассистента прибиты к 100vh, но над ними стоит демо-полоса,
   и на её высоту они вылезали за экран — вместе с кнопкой «Свернуть меню».
   Высоту полосы меряет JS: она переносится на узких экранах, и фиксировать
   её числом значило бы обрезать ленту при первом же переносе. */
:root{--bar:0px}
.ct-rail,.ct-ai{height:calc(100vh - var(--bar))}

/* ---------- переписка ---------- */
/* Системная реплика — не сообщение, а отметка системы: передача человеку,
   вложение, создание обращения. Её видно только в панели, пациенту не уходит. */
.ct-msg--sys{align-self:center; max-width:92%; background:none; border:1px dashed var(--line);
  color:var(--mut); font-size:12px; text-align:center; padding:6px 12px; border-radius:8px; line-height:1.5}
.ct-msg--sys em{margin-top:2px}
.ct-wa__in{display:flex; gap:9px; align-items:center; margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
.ct-wa__f{flex:1; min-width:0; background:var(--line-2); border:1px solid var(--line); border-radius:9px;
  padding:9px 13px; font:inherit; font-size:16px; color:var(--ink); line-height:1.45}
.ct-wa__f::placeholder{color:var(--mut)}
.ct-wa__f:focus{outline:none; border-color:var(--ok); background:var(--card)}
@media(min-width:821px){ .ct-wa__f{font-size:13.5px} }
.ct-q--pick{cursor:pointer}
.ct-q--pick:hover{background:var(--line-2)}
.ct-q--on{background:var(--ok-bg); box-shadow:inset 3px 0 0 var(--ok)}
[data-theme="dark"] .ct-q--on{background:rgba(22,163,74,.12)}

/* ---------- список слева, содержимое справа ---------- */
/* Так устроены и «Диалоги», и «Клиенты» в макете: слева выбираешь, справа
   работаешь. Обратный порядок читается как отчёт, а не как рабочее место. */
.ct-split{display:grid; grid-template-columns:332px minmax(0,1fr); gap:16px; align-items:start}
.ct-split__l{display:flex; flex-direction:column; gap:16px; min-width:0}
.ct-split__r{min-width:0}
@media(max-width:1000px){ .ct-split{grid-template-columns:1fr} }
.ct-h3{font-size:13px; font-weight:600; margin:22px 0 4px; color:var(--ink-2); line-height:1.4}
.ct-btns{display:flex; gap:9px; flex-wrap:wrap}
.ct-split__r table{margin:0 -17px; width:calc(100% + 34px)}