/* ============================================================
   DBML Studio — стилі інтерфейсу (тема: світла / темна)
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-app); color: var(--text-main);
  transition: background .15s, color .15s;
}

/* ---------------- Теми (CSS-змінні) ---------------- */
:root[data-theme="dark"] {
  --bg-app: #0b0f14;
  --bg-panel: #131a22;
  --bg-panel-2: #10161f;
  --bg-editor: #0d131c;
  --bg-editor-text: #cfe3f5;
  --bg-gutter: #0c1219;
  --gutter-text: #45546b;
  --border: #27303f;
  --border-strong: #3d5270;
  --text-main: #d7e0ea;
  --text-dim: #7d8ea3;
  --text-bright: #e8eef6;
  --accent: #4da3ff;
  --accent-2: #2f7ff5;
  --btn-bg: #1c2735;
  --btn-border: #2c3a4c;
  --btn-hover-bg: #243244;
  --btn-hover-border: #3d5270;
  --danger: #f85149;
  --sql-bg: #0d1117;
  --sql-text: #9fd0a0;
  --err-bg: #170f14;
  --err-text: #e0a2a2;
  --toast-bg: #1f2937;
  --toast-border: #374151;
  --tbl-bg: #0f1722;
  --tbl-bg-stroke: #2f3f57;
  --tbl-head: #1c2b42;
  --tbl-line: #223044;
  --tbl-junction: #8b5cf6;
  --tbl-title: #eef4fb;
  --tbl-sub: #7d8ea3;
  --col-name: #c9d8ea;
  --col-pk: #ffd54f;
  --col-fk: #4dd0e1;
  --col-type: #5f7288;
  --col-badge: #8a9bb0;
  --ref-line: #5f7288;
  --ref-card: #9fb0c3;
  --canvas-bg: #0b0f14;
  --modal-bg: #131a22;
  --modal-overlay: rgba(0,0,0,.55);
  --input-bg: #0d131c;
  --input-border: #2c3a4c;
  --pill-bg: #1c2735;
}
/* Світла тема — тепла палітра (кремово-бежеві відтінки, не ріже очі) */
:root[data-theme="light"] {
  --bg-app: #f2ece2;
  --bg-panel: #fbf6ee;
  --bg-panel-2: #f0e9dd;
  --bg-editor: #fdfaf4;
  --bg-editor-text: #33291f;
  --bg-gutter: #f0e9dd;
  --gutter-text: #a89680;
  --border: #ddd2c1;
  --border-strong: #c3b6a1;
  --text-main: #3a3025;
  --text-dim: #7a6c5b;
  --text-bright: #2a2118;
  --accent: #b5651d;
  --accent-2: #9c5416;
  --btn-bg: #fbf6ee;
  --btn-border: #d8ccb9;
  --btn-hover-bg: #f3e9d8;
  --btn-hover-border: #c0ab8d;
  --danger: #c0392b;
  --sql-bg: #fdfaf4;
  --sql-text: #4a6b32;
  --err-bg: #fae8e0;
  --err-text: #9c4436;
  --toast-bg: #3a3025;
  --toast-border: #574838;
  --tbl-bg: #fdfaf4;
  --tbl-bg-stroke: #cfc0a8;
  --tbl-head: #f0e4cf;
  --tbl-line: #e2d6c2;
  --tbl-junction: #8b5cf6;
  --tbl-title: #33291f;
  --tbl-sub: #7a6c5b;
  --col-name: #3d3226;
  --col-pk: #9a6c05;
  --col-fk: #1b7a70;
  --col-type: #8b7d6a;
  --col-badge: #8b7d6a;
  --ref-line: #9a8b76;
  --ref-card: #6b5c48;
  --canvas-bg: #f2ece2;
  --modal-bg: #fbf6ee;
  --modal-overlay: rgba(48,38,26,.42);
  --input-bg: #fdfaf4;
  --input-border: #d8ccb9;
  --pill-bg: #f3e9d8;
}

header#topbar {
  height: 60px; flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; background: var(--bg-panel); border-bottom: 1px solid var(--border);
  overflow-x: auto; white-space: nowrap;
}
.brand { font-weight: 700; font-size: 15px; color: var(--text-bright); }
.brand .logo { color: var(--accent); }
.brand .sub { font-weight: 400; font-size: 11.5px; color: var(--text-dim); margin-left: 8px; }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; flex: 0 0 auto; }
button {
  background: var(--btn-bg); color: var(--text-main); border: 1px solid var(--btn-border); border-radius: 6px;
  padding: 5px 11px; font-size: 12.5px; cursor: pointer; flex: 0 0 auto;
}
button:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-2); }
button.danger { color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: .45; cursor: not-allowed; }
#topbar .spacer { flex: 1; }
#docNameInput {
  color: var(--text-main); font-size: 12.5px; margin-right: 6px; background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: 6px; padding: 5px 8px; width: 180px;
}

main#main { flex: 1; display: flex; min-height: 0; }
#editorPane {
  width: 38%; min-width: 260px; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--bg-panel); flex: 0 0 auto;
}
#editorHead {
  height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  font-size: 11.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); background: var(--bg-panel-2); flex: 0 0 auto;
}
#lineStat { margin-left: auto; }
#editorWrap { position: relative; flex: 1; min-height: 0; display: flex; }
#gutter {
  width: 46px; overflow: hidden; background: var(--bg-gutter); color: var(--gutter-text);
  text-align: right; padding: 10px 8px 10px 0;
  font: 12.5px/20px Consolas, 'Cascadia Code', Menlo, monospace;
  user-select: none; border-right: 1px solid var(--border); white-space: pre; flex: 0 0 auto;
}
#editor {
  flex: 1; background: var(--bg-editor); color: var(--bg-editor-text); border: 0; outline: 0; resize: none;
  padding: 10px 12px 10px 8px;
  font: 12.5px/20px Consolas, 'Cascadia Code', Menlo, monospace;
  white-space: pre; tab-size: 2;
}
#editor[readonly] { opacity: .8; cursor: not-allowed; }
#errors {
  border-top: 1px solid var(--border); max-height: 132px; overflow: auto; font-size: 12px;
  background: var(--err-bg); display: none; flex: 0 0 auto;
}
#errors.show { display: block; }
#errorsTitle { padding: 5px 10px; color: var(--danger); font-weight: 600; }
#errorsList { padding: 0 10px 8px 24px; color: var(--err-text); }
#errorsList li { padding: 1px 0; }
#divider { width: 5px; cursor: col-resize; background: var(--bg-app); flex: 0 0 auto; }
#divider:hover { background: var(--accent); }
#rightPane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-app); }
nav#tabs {
  height: 36px; display: flex; align-items: stretch; gap: 2px; padding: 0 10px;
  border-bottom: 1px solid var(--border); background: var(--bg-panel-2); flex: 0 0 auto;
}
nav#tabs > button.tab { border: none; background: none; color: var(--text-dim); font-size: 13px; padding: 8px 12px 9px; border-bottom: 2px solid transparent; border-radius: 0; align-self: flex-end; }
nav#tabs > button.tab:hover { color: var(--text-main); background: none; }
nav#tabs > button.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
#viewDiagram { flex: 1; position: relative; min-height: 0; background: var(--canvas-bg); }

/* Кнопки керування масштабом — у рядку заголовків робочої області (праворуч) */
#canvasCtrls {
  margin-left: auto; display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
}
#canvasCtrls button {
  padding: 3px 10px; font-size: 12px; border-radius: 6px;
  background: var(--btn-bg); color: var(--text-main); border: 1px solid var(--btn-border);
}
#canvasCtrls button:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: var(--text-main); }
#canvasCtrls #btnZoomIn, #canvasCtrls #btnZoomOut { min-width: 28px; font-weight: 700; }
#svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#svg:active { cursor: grabbing; }
#emptyHint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px; pointer-events: none; text-align: center; padding: 20px;
}
#viewSql { flex: 1; background: var(--sql-bg); overflow: auto; min-height: 0; }
#sqlOut { padding: 14px 18px; font: 12.5px/1.55 Consolas, 'Cascadia Code', Menlo, monospace; color: var(--sql-text); white-space: pre; }
footer#statusbar {
  height: 25px; flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 0 12px; font-size: 11.5px; color: var(--text-dim); background: var(--bg-panel); border-top: 1px solid var(--border);
}
#statErrors.err { color: var(--danger); font-weight: 700; cursor: pointer; }
.hidden { display: none !important; }
#toast {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%) translateY(16px);
  background: var(--toast-bg); color: #e5e7eb; padding: 8px 18px; border-radius: 8px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: .2s; border: 1px solid var(--toast-border); z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------------- Модальні вікна ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--modal-overlay); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none !important; }
.modal {
  background: var(--modal-bg); border: 1px solid var(--border); border-radius: 10px;
  width: 420px; max-width: 92vw; max-height: 86vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.modal.wide { width: 620px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 15px; color: var(--text-bright); }
.modal-body { padding: 16px; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 8px 10px; background: var(--input-bg); color: var(--text-main);
  border: 1px solid var(--input-border); border-radius: 6px; font-size: 13px;
}
.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; }
.hint-text { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.err-text { font-size: 12px; color: var(--danger); margin-top: 6px; min-height: 14px; }

.diagram-list { display: flex; flex-direction: column; gap: 4px; }
.diagram-list h3 { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; margin: 12px 0 6px; letter-spacing: .04em; }
.diagram-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
  cursor: pointer; border: 1px solid transparent;
}
.diagram-item:hover { background: var(--btn-hover-bg); border-color: var(--border); }
.diagram-item .di-name { flex: 1; font-size: 13px; color: var(--text-main); }
.diagram-item .di-meta { font-size: 11px; color: var(--text-dim); }
.diagram-item .di-del { opacity: .6; }
.diagram-item .di-del:hover { opacity: 1; }
.empty-note { font-size: 12.5px; color: var(--text-dim); padding: 10px 2px; }

.share-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.share-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--btn-hover-bg); border-radius: 6px; }
.share-row .sh-email { flex: 1; font-size: 12.5px; color: var(--text-main); }
.share-row .sh-role { font-size: 11px; color: var(--text-dim); padding: 2px 7px; background: var(--pill-bg); border-radius: 8px; }

/* \u0411\u043b\u043e\u043a \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430: \u043b\u043e\u0433\u0456\u043d \u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0412\u0438\u0439\u0442\u0438\u00bb \u2014 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434\u043e\u043a */
#userArea { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.user-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-right: 4px; white-space: nowrap; flex: 0 0 auto; }
.user-chip .avatar {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700;
}

/* ---------------- SVG-класи (ERD) ----------------
   ВАЖЛИВО: раніше ці класи для таблиць та лінії зв'язку не були
   визначені у видимій сторінці (лише всередині рядка експорту SVG),
   тому <path> лінії зв'язку без stroke/fill:none заливався браузером
   чорним кольором і виглядав як трикутник. Тут стилі додано повністю. */
.tbl-bg { fill: var(--tbl-bg); stroke: var(--tbl-bg-stroke); stroke-width: 1.2; }
.tbl-acc { }
.tbl-head { fill: var(--tbl-head); }
.tbl-line { stroke: var(--tbl-line); stroke-width: 1; }
.tbl-junction { fill: var(--tbl-junction); opacity: .85; }
.tbl-title { font-size: 13.5px; font-weight: 700; fill: var(--tbl-title); }
.tbl-sub { font-size: 10.5px; fill: var(--tbl-sub); }
.col-name { font-size: 12px; fill: var(--col-name); font-family: Consolas, Menlo, monospace; }
.col-name.pk { fill: var(--col-pk); font-weight: 600; }
.col-name.fk { fill: var(--col-fk); }
.col-type { font-size: 10.5px; fill: var(--col-type); font-family: Consolas, Menlo, monospace; }
.col-badge { font-size: 9px; font-weight: 700; fill: var(--col-badge); font-family: Consolas, Menlo, monospace; }
.col-badge.b-pk { fill: var(--col-pk); }
.col-badge.b-fk { fill: var(--col-fk); }
.card { font-size: 10px; fill: var(--ref-card); font-weight: 700; font-family: Consolas, Menlo, monospace; }
.ref-name { font-size: 10px; fill: var(--ref-card); }
.ref-line { stroke: var(--ref-line); stroke-width: 1.6; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tbl.selected .tbl-bg { stroke: var(--accent); stroke-width: 2; }