/* Вікно перенесення з Notion. Окремий файл, щоб не заважати правкам
   у style.css. Кольори беруться з тем застосунку. */

.nt-tabs{display:inline-flex; gap:0; padding:3px; margin-left:14px;
  border-radius:99px; background:var(--panel); border:1px solid var(--line)}
.nt-tabs button{border:0; background:transparent; color:var(--dim); font:inherit;
  font-size:12.5px; padding:6px 15px; border-radius:99px; cursor:pointer;
  transition:color .18s, background .18s}
.nt-tabs button:hover{color:var(--text)}
.nt-tabs button.on{background:var(--panel-2); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line)}

.nt{display:flex; flex-direction:column; gap:14px}
.nt-lead{margin:0; font-size:14px; line-height:1.6; color:var(--text)}
.nt-note{margin:0; font-size:12.5px; line-height:1.55; color:var(--faint)}
/* Рядок про автооновлення стоїть під підказкою про ручне перечитування —
   відділяємо його, щоб не читались як одне речення. */
.nt-auto{margin-top:6px}
.nt-sub{font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-top:4px}

.nt-steps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px;
  font-size:13.5px; line-height:1.6; color:var(--dim)}
.nt-steps b{color:var(--text); font-weight:600}
.nt-steps code{font-family:var(--mono); font-size:12.5px; padding:1px 6px;
  border-radius:6px; background:var(--panel-2); border:1px solid var(--line-soft)}

.nt-lab{font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint)}
.nt-inp{width:100%; box-sizing:border-box; background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px;
  font-family:var(--mono); font-size:13px}
.nt-inp:focus{outline:none; border-color:color-mix(in srgb, var(--up) 55%, transparent)}

.nt-err{padding:11px 14px; border-radius:var(--r); font-size:13.5px; line-height:1.5;
  color:var(--down); background:var(--down-soft);
  border:1px solid color-mix(in srgb, var(--down) 34%, transparent)}
.nt-empty{padding:26px 20px; text-align:center; color:var(--faint); font-size:13.5px;
  line-height:1.6; border:1px dashed var(--line); border-radius:var(--r)}

.nt-ok{padding:11px 14px; border-radius:var(--r); font-size:13.5px; line-height:1.5;
  color:var(--up); background:var(--up-soft);
  border:1px solid color-mix(in srgb, var(--up) 34%, transparent)}

/* ---------- з яких баз зібрано журнал ---------- */
/* Місяці в Notion часто лежать у різних журналах, тому перенесень буває
   кілька. Кожне — рядок: натиснути = перечитати, «Прибрати» = відкотити. */
.nt-srcs{display:flex; flex-direction:column; gap:8px}
.nt-src{display:flex; align-items:center; gap:8px}
.nt-src-go{flex:1 1 auto; min-width:0; display:grid; grid-template-columns:1fr auto;
  gap:3px 12px; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:11px 14px; transition:border-color .18s, background .18s}
.nt-src-go:hover{background:var(--panel-2);
  border-color:color-mix(in srgb, var(--up) 45%, transparent)}
.nt-src-go b{min-width:0; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nt-src-go span{font-family:var(--mono); font-size:11px; color:var(--faint);
  white-space:nowrap}
.nt-src-go i{grid-column:1 / -1; font-style:normal; font-family:var(--mono);
  font-size:10.5px; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nt-src-x{flex:none}

/* ---------- однакове під різними іменами ---------- */
/* Група — одне ім'я, написане по-різному. Написання стоять поруч, обране
   підсвічене: вибір тут важливіший за саму кнопку. */
.td-g{display:flex; flex-direction:column; gap:9px; padding:14px 16px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--card)}
.td-g + .td-g{margin-top:10px}
.td-vars{display:flex; flex-wrap:wrap; gap:7px}
.td-v{display:inline-flex; align-items:baseline; gap:8px; padding:8px 13px;
  border:1px solid var(--line-soft); border-radius:99px; cursor:pointer;
  background:var(--panel-2); transition:border-color .18s, background .18s}
.td-v:hover{border-color:var(--line)}
.td-v.on{border-color:color-mix(in srgb, var(--up) 45%, transparent);
  background:var(--up-soft)}
.td-v input{position:absolute; opacity:0; pointer-events:none}
.td-v b{font-size:13.5px; font-weight:600; color:var(--text)}
.td-v span{font-family:var(--mono); font-size:10.5px; color:var(--faint)}
.td-go{align-self:flex-start}

/* ---------- список баз ---------- */
.nt-dbs{display:flex; flex-direction:column; gap:8px}
.nt-db{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:13px 16px; cursor:pointer; color:var(--text); font:inherit;
  transition:border-color .18s, background .18s}
.nt-db:hover{border-color:color-mix(in srgb, var(--up) 45%, transparent);
  background:var(--panel-2)}
.nt-db b{font-size:14.5px; font-weight:600}
.nt-db span{font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:auto}

/* ---------- звірка колонок ---------- */
.nt-map{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px}
.nt-row{display:flex; align-items:center; gap:10px; min-width:0}
.nt-row > span{flex:0 0 132px; font-size:12.5px; color:var(--dim)}
.nt-row select{flex:1 1 auto; min-width:0; background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px;
  font:inherit; font-size:12.5px; cursor:pointer}
.nt-row select:focus{outline:none; border-color:color-mix(in srgb, var(--up) 55%, transparent)}

.nt-prev{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r)}
.nt-tbl{width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap}
.nt-tbl th{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); font-weight:400;
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-soft)}
.nt-tbl td{padding:9px 12px; color:var(--text); border-bottom:1px solid var(--line-soft)}
.nt-tbl tr:last-child td{border-bottom:0}

.nt-opts{display:flex; flex-wrap:wrap; gap:8px 18px}
.nt-chk{display:inline-flex; align-items:center; gap:8px; font-size:13px;
  color:var(--dim); cursor:pointer}
.nt-chk input{accent-color:var(--up); width:15px; height:15px; cursor:pointer}

/* ---------- хід перенесення ---------- */
.nt-bar{height:6px; border-radius:99px; background:var(--panel-2); overflow:hidden}
.nt-bar i{display:block; height:100%; background:var(--up); border-radius:99px;
  transition:width .35s ease}
.nt-prog{display:flex; align-items:baseline; gap:12px}
.nt-prog b{font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums}
.nt-prog span{font-size:12.5px; color:var(--faint); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

.nt-stats{display:flex; gap:10px; flex-wrap:wrap}
.nt-stat{flex:1 1 110px; padding:14px 16px; border-radius:var(--r);
  background:var(--panel-2); border:1px solid var(--line-soft)}
.nt-stat b{display:block; font-family:var(--mono); font-size:24px; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--text)}
.nt-stat span{font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint)}

.nt-tags{display:flex; flex-wrap:wrap; gap:6px}
.nt-tags i{font-style:normal; font-family:var(--mono); font-size:12px;
  padding:5px 11px; border-radius:99px; color:var(--text);
  background:var(--up-soft); border:1px solid color-mix(in srgb, var(--up) 34%, transparent)}

.nt-warn{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px;
  font-size:12.5px; line-height:1.5; color:var(--dim); max-height:150px; overflow-y:auto}

@media (max-width:720px){
  .nt-map{grid-template-columns:1fr}
  .nt-row > span{flex-basis:112px}
}

/* ---------- вибір таблиці, коли їх кілька ---------- */
.nt-tbls{display:flex; flex-direction:column; gap:7px; max-height:340px; overflow-y:auto}
.nt-tbl-row{display:flex; align-items:center; gap:11px; padding:12px 15px; cursor:pointer;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  transition:border-color .18s, background .18s}
.nt-tbl-row:hover{background:var(--panel-2)}
.nt-tbl-row.on{border-color:color-mix(in srgb, var(--up) 42%, transparent)}
.nt-tbl-row input{accent-color:var(--up); width:15px; height:15px; flex:none; cursor:pointer}
.nt-tbl-row b{font-size:14px; font-weight:600; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.nt-tbl-row b em{font-style:normal; color:var(--faint); font-weight:400; font-size:12.5px}
.nt-tbl-row span{font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:auto;
  flex:none}
.nt-tbl-row i{font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); flex:none; padding:3px 9px; border-radius:99px;
  background:var(--panel-2); border:1px solid var(--line-soft)}
.nt-tbl-row.on i{color:var(--up); border-color:color-mix(in srgb, var(--up) 34%, transparent);
  background:var(--up-soft)}

/* ---------- розділ «Підключення» в лівій панелі ---------- */
/* Notion і Telegram лежать в одному розділі, що згортається. Статус —
   звичайним написом «Підключено/Не підключено», без блимаючих індикаторів. */
.conn{display:flex; flex-direction:column}
.conn-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 5px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint)}
.conn-head:hover{color:var(--dim)}
.conn-head .chev{flex:none; transition:transform .2s var(--ease)}
.conn.open .conn-head .chev{transform:rotate(180deg)}
/* grid-template-rows 0fr→1fr — плавно розкриває блок без вимірювання висоти в JS */
.conn-list{display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s var(--ease)}
.conn.open .conn-list{grid-template-rows:1fr}
.conn-list-inner{overflow:hidden; display:flex; flex-direction:column; gap:6px}
/* align-items:flex-start — іконка лишається на рівні назви (перший рядок),
   а не по центру всього двохрядкового блока з статусом */
.conn-row{display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--line-soft); background:var(--panel-2); color:var(--dim);
  font-size:12.5px; cursor:pointer; text-align:left; transition:.15s}
.conn-row:hover{color:var(--text); border-color:var(--line)}
.conn-ic{width:24px; height:24px; border-radius:7px; flex:none; display:grid; place-items:center;
  color:var(--dim); background:var(--panel)}
/* назва й статус — двома рядками одне під одним, іконка лишається
   на рівні назви (align-items:center у .conn-row) */
.conn-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.conn-nm{font-style:normal; font-weight:600; font-size:12.5px; color:var(--text); line-height:1.25}
.conn-st{font-style:normal; font-size:11px; color:var(--faint); line-height:1.3}
.conn-row.connected .conn-st{color:var(--up)}
.conn-row.connected .conn-ic{color:var(--up)}

/* ---------- копія журналу перед перенесенням ---------- */
.nt-safe{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 14px; border-radius:var(--r);
  background:var(--be-soft, var(--panel-2));
  border:1px solid var(--line-soft)}
.nt-safe p{margin:0; flex:1 1 240px; font-size:12.5px; line-height:1.5; color:var(--dim)}
.nt-safe button{flex:none}