/* SC UI Manager - styles for the ported LLM-SQL pages (Query, Modeler,
 * Connections, Settings).
 *
 * Extracted from the LLM-SQL browser extension
 * (D:\Projects\SC-Browser-Extensions\extensions\llm-sql): the session terminal,
 * master-detail tree, datatable and ER-diagram host styling those pages rely on.
 * Only the classes the ported pages use are copied here, not the whole 55 KB
 * panel.css. Design tokens (--border-color, --accent-primary, --text-muted, ...)
 * are already defined by the vendored sc-extension-theme.css (light + dark), so
 * this file references them without redeclaring a :root palette.
 *
 * Sources: sidepanel/panel.css and shared/assets/styles/sidepanel.css in the
 * extension. The stub pages of S13 do not yet consume these rules; the file ships
 * now so S14-S18 render against a stable stylesheet.
 */

/* ── Session terminal (Query workbench) ─────────────────────────────────── */
/* Terminal containers inside the SQL-session host. */
.session-terminal-container {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Row resizer between SQL editor and results panel. sc-extension-theme.css sets
   width:3px on .webix_resizer (for column resizers), which kills the horizontal
   row resizer; override it inside the session context. The column resizers that
   must keep the vertical 3px style are excluded by class. */
.session-terminal-container .webix_resizer:not(.sc-sidebar-resizer):not(.detail-pane-resizer) {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	height: 6px !important;
	min-height: 6px !important;
	background: transparent !important;
	border-top: 1px solid var(--border-color) !important;
	cursor: ns-resize !important;
}
.session-terminal-container .webix_resizer_vy {
	height: 6px !important;
	min-height: 6px !important;
	background: transparent !important;
	cursor: ns-resize !important;
}
.session-terminal-container .xterm {
	height: 100%;
}

/* ── Datatable cells (SQL results grid) ─────────────────────────────────── */
.datatable-null-cell {
	color: var(--text-muted);
	font-style: italic;
	opacity: 0.7;
}
.datatable-error-row {
	background: var(--error-bg);
}

/* ── Messages editor (Monaco error decoration) ──────────────────────────── */
.messages-error-line {
	background: var(--error-bg) !important;
}

/* ── ER-diagram host (Query object explorer, Modeler) ───────────────────── */
/* The diagram host div; SCErDiagram injects its own maximize-affordance styles
   at runtime under .sc-er-diagram-host. This class carries the layout the
   extension applied inline. */
.er-diagram-host {
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 8px;
	box-sizing: border-box;
}

/* ── Query toolbar Stop button ──────────────────────────────────────────── */
.query_button_stop.webix_disabled_view button,
.query_button_stop .webix_disabled_box button {
	background-color: #9e9e9e !important;
	color: #eeeeee !important;
	border-color: #9e9e9e !important;
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* ── Webix tree / detail helpers (Query object explorer, Connections) ───── */
.wx-tree-cloud {
	font-size: 9px;
	color: var(--text-muted);
	margin-right: 2px;
}
.wx-tree-label {
	font-size: 12px;
}
.wx-tree-label-server {
	color: var(--text-secondary);
}
.wx-tree-icon {
	margin-right: 4px;
}
.wx-tree-play {
	float: right;
	cursor: pointer;
	color: var(--accent-primary);
	font-size: 11px;
	padding: 0 4px;
	opacity: 0;
	transition: opacity 0.15s;
}
.webix_row_hover .wx-tree-play,
.wx-tree-play:hover {
	opacity: 1;
}
.webix-empty-state {
	text-align: center;
	padding: 40px 12px;
	font-size: 13px;
	color: var(--text-muted);
}

.wx-badge {
	display: inline-block;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 3px;
	font-weight: 500;
}
.wx-badge-var {
	background: rgba(74, 158, 255, 0.15);
	color: #4a9eff;
}
.wx-badge-device {
	background: rgba(108, 164, 36, 0.15);
	color: #6ca424;
}
.wx-badge-tag {
	background: rgba(115, 115, 115, 0.15);
	color: var(--text-secondary);
}

.wx-detail-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
}
.wx-detail-icon {
	font-size: 20px;
}
.wx-detail-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}
.wx-detail-info {
	padding: 2px 12px 8px;
	font-size: 12px;
	color: var(--text-secondary);
}
.wx-readonly-note {
	padding: 4px 12px;
	font-size: 11px;
	color: var(--text-muted);
	font-style: italic;
}
.form-section-label-wx {
	text-transform: uppercase;
	font-size: 10px !important;
	font-weight: 600;
	color: var(--text-muted) !important;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 2px !important;
	margin-top: 4px;
}
.connections-webix-tree .webix_tree_item {
	line-height: 28px;
	font-size: 12px;
}

/* ── Connections page: tree + form master-detail split (the Local tab) ──── */
.connections-split {
	flex: 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
}
.connections-tree-panel {
	width: 180px;
	min-width: 120px;
	max-width: 280px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border-color);
	background: var(--bg-primary);
}
.connections-tree-container {
	flex: 1;
	overflow-y: auto;
	padding: 4px 0;
}
.connections-tree-container .empty-state {
	color: var(--text-muted);
	font-style: italic;
	text-align: center;
	padding: 16px 6px;
	font-size: 11px;
}
.connections-tree-container:focus {
	outline: none;
}
.connections-tree-container:focus-visible {
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
}
.connections-split-handle {
	width: 4px;
	cursor: col-resize;
	background: var(--border-color);
	flex-shrink: 0;
	transition: background 0.15s;
}
.connections-split-handle:hover,
.connections-split-handle.dragging {
	background: var(--accent-primary);
}
.connections-form-panel {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.connections-tree-node {
	user-select: none;
}
.connections-tree-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 12px;
	transition: background 0.15s;
}
.connections-tree-row:hover {
	background: var(--tab-hover-bg);
}
.connections-tree-row.selected {
	background: var(--accent-primary);
	color: white;
}
.connections-tree-toggle {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: var(--text-muted);
	flex-shrink: 0;
	transition: transform 0.15s;
}
.connections-tree-toggle.expanded {
	transform: rotate(90deg);
}
.connections-tree-icon {
	flex-shrink: 0;
	font-size: 12px;
}
.connections-tree-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.connections-tree-status {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-success);
	flex-shrink: 0;
	margin-left: auto;
}
.connections-tree-test-status {
	font-size: 10px;
	margin-left: auto;
	flex-shrink: 0;
	display: none;
}
.connections-tree-test-status.testing {
	display: inline;
	color: var(--text-muted);
	animation: testPulse 1s ease-in-out infinite;
}
.connections-tree-test-status.test-ok {
	display: inline;
	color: var(--accent-success);
}
.connections-tree-test-status.test-fail {
	display: inline;
	color: var(--accent-danger);
}
.connections-tree-row.test-failed .connections-tree-label {
	color: var(--accent-danger);
}
.connections-tree-row.selected.test-failed .connections-tree-label {
	color: #ffb3b3;
}
.connections-tree-row.selected .connections-tree-test-status.test-fail {
	color: #ffb3b3;
}
.connections-tree-row.selected .connections-tree-test-status.test-ok {
	color: #b3ffb3;
}
@keyframes testPulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
}
.connections-tree-children {
	overflow: hidden;
}
.connections-tree-children.collapsed {
	display: none;
}
.connections-tree-row.drag-source {
	opacity: 0.4;
}
.connections-tree-row.drop-above {
	box-shadow: inset 0 2px 0 0 #4a90d9;
}
.connections-tree-row.drop-below {
	box-shadow: inset 0 -2px 0 0 #4a90d9;
}
.connections-tree-row.drop-into {
	background: rgba(74, 144, 217, 0.2);
	outline: 1px dashed #4a90d9;
	outline-offset: -1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   S14 connections page (ported LLM-SQL "Local" tab)

   Classes consumed by frontend/static/js/pages/connections.js: the sctreetable
   name-column template (engine badge + test mark ✓/✗ + quick-connect play
   button) and the inline test-connection status panel injected into the engine
   parameters form. Tokens come from the vendored sc-extension-theme.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* Engine badge next to a connection name in the tree. */
.wx-tree-engine {
	margin-left: 6px;
	color: var(--text-muted);
	font-size: 11px;
}

/* Last-test result mark (✓ / ✗) after the engine badge. */
.wx-tree-test {
	margin-left: 4px;
	font-size: 10px;
	font-weight: 600;
}
.wx-tree-test-ok {
	color: var(--accent-success);
}
.wx-tree-test-fail {
	color: var(--accent-danger);
}

/* Inline Test-Connection status panel (injected beside the Test button inside
   the engine parameters form). The status- classes map to the three states set
   by showTestStatus(). Kept overflow-visible so wrapped multi-line messages
   remain readable even though a Webix cols row fixes its height at layout time. */
.engine-test-row {
	padding: 4px 0;
}
.connection-test-status-wrap {
	overflow: visible;
}
.connection-test-status-inner {
	font-size: 12px;
	line-height: 1.4;
}
.connection-test-status {
	padding: 4px 8px;
	border-radius: 4px;
}
.connection-test-status.status-testing {
	color: var(--text-muted);
}
.connection-test-status.status-success {
	color: var(--accent-success);
	background: var(--success-bg);
}
.connection-test-status.status-error {
	color: var(--accent-danger);
	background: var(--error-bg);
}

/* ==========================================================================
   Query page (S16) - session tab strip + terminals host + page cell wrappers.
   Ported from the LLM-SQL extension's panel.css. The tab strip (renderTabBar)
   and per-session containers are plain HTML inside the AppPages page cell; the
   Webix `template` cells below host them. Tokens come from sc-extension-theme.css.
   ========================================================================== */

/* The two Webix `template` cells the query page mounts into (query-page.js). */
.query_page_tabbar_cell,
.query_page_tabbar_cell .webix_template {
	padding: 0;
	overflow: visible;
}
.query_page_host_cell,
.query_page_host_cell .webix_template {
	padding: 0;
}
.query_page_host_cell .webix_template {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Session tab strip */
.session-tab-bar {
	display: flex;
	align-items: center;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
	min-height: 0;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.session-tab-bar::-webkit-scrollbar { display: none; }

.session-tab {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 8px;
	font-size: 11px;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s;
	max-width: 150px;
	flex-shrink: 0;
}
.session-tab:hover {
	background: var(--tab-hover-bg);
	color: var(--text-primary);
}
.session-tab.active {
	color: var(--accent-primary);
	border-bottom-color: var(--accent-primary);
	background: var(--tab-active-bg);
}

.session-tab-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-right: 4px;
}
.session-tab-dot.connected { background: var(--accent-success); }
.session-tab-dot.disconnected { background: var(--accent-danger); cursor: pointer; }
.session-tab-dot.disconnected:hover {
	box-shadow: 0 0 4px 2px var(--accent-danger);
	transform: scale(1.4);
}

.session-tab-label {
	display: flex;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.session-tab-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 10px;
	cursor: pointer;
	border-radius: 3px;
	opacity: 0;
	transition: all 0.15s;
	flex-shrink: 0;
}
.session-tab:hover .session-tab-close { opacity: 1; }
.session-tab-close:hover { background: var(--accent-danger); color: #fff; }

/* "+" add-session button + recent (vertical-ellipsis) button */
.session-add-wrapper { position: relative; flex-shrink: 0; }
.session-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0 4px;
	border: 1px solid var(--border-color);
	background: transparent;
	color: var(--text-secondary);
	font-size: 14px;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.15s;
}
.session-add-btn:hover {
	background: var(--tab-hover-bg);
	color: var(--accent-primary);
	border-color: var(--accent-primary);
}
.session-recent-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 26px;
	padding: 0;
	margin: 0 2px 0 4px;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.15s;
	flex-shrink: 0;
}
.session-recent-btn:hover { background: var(--tab-hover-bg); color: var(--accent-primary); }

/* Expand/Collapse buttons in the "+" popup tree header */
.session-tree-hdr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
	width: 20px;
	height: 20px;
	border: 1px solid var(--border-color);
	border-radius: 3px;
	opacity: 0.7;
	vertical-align: middle;
	margin: 0 1px;
	line-height: 1;
}
.session-tree-hdr-btn:hover { opacity: 1; background: var(--tab-hover-bg); }
.session-add-popup-webix .webix_hcell:last-child {
	overflow: visible !important;
	white-space: nowrap !important;
	padding: 0 4px !important;
}

/* Terminals host: per-session containers are appended here and shown one at a
   time (see .session-terminal-container above). */
.terminal-wrapper {
	flex: 1;
	min-height: 0;
	background: var(--bg-primary);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.terminal-wrapper > div {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}