/* База даних — ER-діаграма схеми Beauty CRM.
   Кольори беруться з токенів порталу (app.css), тому тема перемикається
   разом із рештою розділів і окремого набору змінних тут немає. */

/* align-items:start — щоб полотно НЕ розтягувалось під висоту панелі.
   За замовчуванням grid тягне обидві колонки до висоти вищої, і полотно
   діставало зайві ~200px порожнечі під схемою щоразу, коли відкривали
   картку таблиці. */
#dbWrap{
  display:grid; grid-template-columns:minmax(0,1fr); gap:14px;
  align-items:start;
}
#dbWrap.has-panel{ grid-template-columns:minmax(0,1fr) 336px; }

/* ---------- панель керування ---------- */

.db-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px;
}
.db-stats{ color:var(--ink-3); font-size:.84rem; font-family:var(--mono); }

.db-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.db-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule); background:var(--surface);
  color:var(--ink-2); font:inherit; font-size:.82rem; line-height:1.2;
}
.db-chip i{ width:8px; height:8px; border-radius:50%; flex:none; }
.db-chip em{ font-style:normal; color:var(--ink-3); font-size:.76rem; }
.db-chip.is-on{ border-color:var(--c); background:var(--cs); color:var(--ink); font-weight:600; }
.db-chip:not(.is-on){ opacity:.5; }
.db-chip:hover{ border-color:var(--c); }

.db-seg{ display:inline-flex; border:1px solid var(--rule); border-radius:9px; overflow:hidden; }
.db-seg button{
  padding:6px 11px; border:0; background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:.84rem; cursor:pointer;
}
.db-seg button + button{ border-left:1px solid var(--rule); }
.db-seg button.is-on{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }

.db-zoom{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
.db-zoom button{
  width:29px; height:29px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--rule); border-radius:8px; background:var(--surface);
  color:var(--ink-2);
}
.db-zoom button:hover{ border-color:var(--accent); color:var(--accent-ink); }
.db-zoom .db-fit{ width:auto; padding:0 10px; font:inherit; font-size:.82rem; }
#dbZoomVal{
  min-width:44px; text-align:center; font-size:.8rem;
  color:var(--ink-3); font-family:var(--mono);
}
#dbSearch{
  padding:6px 11px; border:1px solid var(--rule); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:.85rem;
  min-width:150px;
}
#dbSearch:focus{ border-color:var(--accent); outline:none; }

/* ---------- полотно ---------- */

/* Висота полотна — max-height, а не height: у «Вписати» діаграма стає нижчою
   за стелю, і фіксована висота лишала під нею широку порожню смугу.
   min-height тримає корисний розмір, поки схема ще вантажиться. */
#dbScroll{
  overflow:auto; background:var(--surface-3);
  border:1px solid var(--rule); border-radius:14px;
  max-height:min(74vh, 780px); min-height:320px;
  cursor:grab; touch-action:pan-x pan-y;
  overscroll-behavior:contain;
}
#dbScroll.is-drag{ cursor:grabbing; }
/* Полотно центруємо: після «Вписати» діаграма буває вужча за контейнер,
   і при лівому притисканні праворуч лишалась широка порожня смуга. */
/* Полотно центруємо по горизонталі, але НЕ розтягуємо по вертикалі:
   min-height:100% разом із центруванням відкидав високу схему вниз і над
   нею лишалась порожня смуга на пів екрана. Вертикаль лишаємо за вмістом. */
/* Полотно центруємо по горизонталі, але НЕ розтягуємо по вертикалі:
   min-height:100% разом із центруванням відкидав високу схему вниз і над
   нею лишалась порожня смуга на пів екрана. Вертикаль лишаємо за вмістом.
   safe center: коли схема НИЖЧА за контейнер (малий масштаб на телефоні),
   центруємо і по вертикалі, інакше вона лягала на дно порожньої рамки. */
#dbCanvas{
  display:flex; justify-content:safe center; align-items:safe center;
  min-width:100%; min-height:100%; padding:10px;
  box-sizing:border-box;
}
#dbSvg{ display:block; }

.db-load{ padding:40px; text-align:center; color:var(--ink-3); font-size:.9rem; }
.db-load.db-err{ color:var(--danger); }

/* доменні смуги */
.db-lane{ opacity:.42; }
.db-lanetxt{
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.02em;
}

/* картки */
.db-card{ cursor:pointer; }
.db-cardbg{
  fill:var(--surface); stroke:var(--rule-2); stroke-width:1;
}
.db-card:hover .db-cardbg{ stroke:var(--accent); }
.db-card.is-sel .db-cardbg{ stroke:var(--accent); stroke-width:2.2; }
.db-card.is-hit .db-cardbg{ stroke:var(--open); stroke-width:2; }
.db-card.is-dim{ opacity:.26; }
.db-card:focus{ outline:none; }
.db-card:focus-visible .db-cardbg{ stroke:var(--accent); stroke-width:2.2; }

.db-cardname{
  font-family:var(--sans); font-size:12px; font-weight:700; fill:var(--ink);
}
.db-cardttl{ font-family:var(--sans); font-size:10px; fill:var(--ink-3); }
.db-cardn{
  font-family:var(--sans); font-size:10px; fill:var(--ink-3); text-anchor:end;
}

.db-f{ font-family:var(--sans); font-size:10.5px; fill:var(--ink-2); }
.db-f.is-pk{ font-weight:700; fill:var(--ink); }
.db-ft{ font-family:var(--sans); font-size:9.5px; fill:var(--ink-3); text-anchor:end; }
.db-fmore{ font-family:var(--sans); font-size:9.5px; fill:var(--accent-ink); font-style:italic; }

/* лінії */
.db-edge{
  fill:none; stroke:var(--rule-2); stroke-width:1; opacity:.55; color:var(--rule-2);
}
.db-edge.is-on{ stroke:var(--accent); stroke-width:2; opacity:1; color:var(--accent); }
.db-edge.is-dim{ opacity:.12; }
.db-self{ stroke-dasharray:3 2; }
.db-edgelbl{
  font-family:var(--sans); font-size:9.5px; font-weight:600;
  fill:var(--accent-ink); text-anchor:middle;
  paint-order:stroke; stroke:var(--surface-3); stroke-width:3.5px; stroke-linejoin:round;
}

/* ---------- панель деталей ---------- */

#dbPanel{
  border:1px solid var(--rule); border-radius:14px; background:var(--surface);
  padding:0 0 14px; overflow:auto; height:min(74vh, 780px);
  box-shadow:var(--lift);
}
.db-phead{
  position:sticky; top:0; z-index:2; background:var(--surface);
  padding:14px 40px 11px 15px; border-bottom:2px solid var(--rule);
}
.db-pdom{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:.72rem; font-weight:600; margin:0 0 6px;
}
.db-phead h3{ margin:0; font-size:1.02rem; font-weight:700; }
.db-pname{
  display:inline-block; margin:3px 0 0; font-family:var(--code);
  font-size:.78rem; color:var(--ink-3);
}
.db-pclose{
  position:absolute; top:12px; right:12px;
  width:26px; height:26px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--rule); border-radius:7px;
  background:var(--surface); color:var(--ink-2);
}
.db-pclose:hover{ border-color:var(--danger); color:var(--danger); }
.db-pdescr{
  margin:11px 15px 0; font-size:.85rem; line-height:1.45; color:var(--ink-2);
}
.db-ph4{
  margin:16px 15px 7px; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
}
.db-ph4 em{
  font-style:normal; background:var(--surface-2); color:var(--ink-2);
  padding:1px 6px; border-radius:999px; margin-left:5px; letter-spacing:0;
}

/* table-layout:fixed — без нього довгий FK-бейдж («FK → employee.id») розсовує
   колонку і третій стовпчик виїжджає за межу панелі: у першому прогоні
   значки читались як «FK → salo…» і «NOT N…». Фіксована розкладка плюс
   перенос слів тримають усі три колонки всередині. */
.db-ftable{
  width:calc(100% - 30px); margin:0 15px;
  border-collapse:collapse; table-layout:fixed;
}
.db-ftable td{
  padding:5px 6px 5px 0; border-bottom:1px solid var(--rule);
  vertical-align:top; font-size:.8rem;
  overflow-wrap:anywhere; word-break:break-word;
}
.db-ftable tr:last-child td{ border-bottom:0; }
.db-fn{ font-family:var(--code); font-size:.76rem; color:var(--ink); font-weight:600; width:34%; }
.db-ftype{ color:var(--ink-3); font-size:.75rem; width:24%; }
.db-vals{ display:block; color:var(--ink-3); font-size:.7rem; margin-top:2px; }
.db-fmark{ text-align:right; width:42%; padding-right:0; }
/* white-space лишаємо звичайним: nowrap саме і виштовхував довгі FK-бейджі
   за край панелі. Хай краще «FK → employee.id» перенесеться. */
.db-k{
  display:inline-block; font-style:normal; font-size:.64rem; font-weight:700;
  padding:1px 5px; border-radius:4px; margin:0 0 2px 3px;
  max-width:100%; overflow-wrap:anywhere;
}
.db-pk{ background:var(--accent-soft); color:var(--accent-ink); }
.db-fk{ background:var(--t2s); color:var(--t2); font-weight:600; }
.db-uq{ background:var(--idea-s); color:var(--idea); }
.db-rq{ background:var(--surface-2); color:var(--ink-3); }
.db-fnote{
  display:block; text-align:left; color:var(--ink-3);
  font-size:.72rem; line-height:1.35; margin-top:3px;
}

.db-rels{ list-style:none; margin:0 15px; padding:0; display:grid; gap:4px; }
.db-rel{
  width:100%; text-align:left; cursor:pointer; font:inherit;
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  padding:6px 9px; border:1px solid var(--rule); border-radius:8px;
  background:var(--surface-3); color:var(--ink-2);
}
.db-rel:hover{ border-color:var(--accent); background:var(--accent-soft); }
.db-relk{
  font-style:normal; font-size:.66rem; font-weight:700;
  background:var(--surface-2); color:var(--ink-3);
  padding:1px 5px; border-radius:4px; flex:none;
}
.db-rel b{ font-family:var(--code); font-size:.76rem; color:var(--ink); }
.db-rel span{ font-size:.75rem; color:var(--ink-3); flex:1 1 100%; }

/* ---------- вузькі екрани ---------- */

@media (max-width:1100px){
  #dbWrap.has-panel{ grid-template-columns:minmax(0,1fr); }
  #dbPanel{ height:auto; max-height:56vh; }
}
@media (max-width:760px){
  /* На телефоні схема у вписаному вигляді невисока, і стеля в 520px лишала
     над нею порожню смугу. Тримаємо стелю, але прибираємо підлогу: рамка
     сідає по вмісту, а гортання нікуди не дівається. */
  #dbScroll{ max-height:min(62vh, 520px); min-height:0; }
  .db-zoom{ margin-left:0; }
  #dbSearch{ flex:1 1 100%; min-width:0; }
  .db-bar{ gap:8px; }
}