/* Magis Diff — giao diện chính. Theme qua html[data-theme]. */

:root {
	--bg: #f4f5f7;
	--panel: #ffffff;
	--border: #d0d4da;
	--text: #1f2328;
	--muted: #6b7280;
	--accent: #2563eb;
	--add-bg: rgba(46, 160, 67, 0.18);
	--add-strong: rgba(46, 160, 67, 0.45);
	--del-bg: rgba(248, 81, 73, 0.16);
	--del-strong: rgba(248, 81, 73, 0.45);
	--current: rgba(37, 99, 235, 0.55);
	--spacer: repeating-linear-gradient(45deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04) 6px, transparent 6px, transparent 12px);
}

html[data-theme="dark"] {
	--bg: #16181d;
	--panel: #1e2128;
	--border: #33363e;
	--text: #e6e8eb;
	--muted: #9aa2ad;
	--accent: #4f8ef7;
	--add-bg: rgba(63, 185, 80, 0.16);
	--add-strong: rgba(63, 185, 80, 0.42);
	--del-bg: rgba(248, 81, 73, 0.15);
	--del-strong: rgba(248, 81, 73, 0.42);
	--current: rgba(79, 142, 247, 0.6);
	--spacer: repeating-linear-gradient(45deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 6px, transparent 6px, transparent 12px);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font: 13px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
	display: flex;
	flex-direction: column;
}

/* ---------- toolbars ---------- */

.topbar, .toolbar2 {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 10px;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}

.brand {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin-right: 6px;
}

.brand span { color: var(--accent); }

.group {
	display: flex;
	align-items: center;
	gap: 6px;
}

.group.right { margin-left: auto; }

button, select, summary {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 10px;
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
}

button:hover, summary:hover { border-color: var(--accent); }
button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { border-color: var(--border); }

.chk {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--muted);
	cursor: pointer;
	user-select: none;
}

.badge {
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 12px;
}

.stats .stat { font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.stat.add { color: #2ea043; background: var(--add-bg); }
.stat.del { color: #f85149; background: var(--del-bg); }
.stat.mod { color: var(--accent); }

/* menu dropdown */
details.menu { position: relative; }
details.menu summary { list-style: none; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu .menu-items {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
details.menu .menu-items button {
	border: none;
	text-align: left;
	border-radius: 4px;
}
details.menu .menu-items button:hover { background: var(--accent); color: #fff; }

/* ---------- panes ---------- */

main {
	flex: 1;
	display: flex;
	gap: 1px;
	min-height: 0;
	background: var(--border);
}

main[hidden] { display: none; }

.pane {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--panel);
}

.pane-head {
	padding: 4px 10px;
	font-size: 12px;
	color: var(--muted);
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pane-head .filename { color: var(--accent); font-weight: 600; }

.editor { flex: 1; min-height: 0; }

.pane.dragging { outline: 2px dashed var(--accent); outline-offset: -4px; }

footer {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 4px 10px;
	border-top: 1px solid var(--border);
	background: var(--panel);
	font-size: 12px;
	color: var(--muted);
}

footer .privacy { margin-left: auto; }

#status { color: #d29922; }

/* ---------- decorations trong Monaco ---------- */

.md-line-del { background: var(--del-bg); }
.md-line-add { background: var(--add-bg); }
.md-char-del { background: var(--del-strong); border-radius: 2px; }
.md-char-add { background: var(--add-strong); border-radius: 2px; }

.md-current { box-shadow: inset 3px 0 0 var(--current); }

.md-gutter-del { background: #f85149; width: 4px !important; margin-left: 2px; }
.md-gutter-add { background: #2ea043; width: 4px !important; margin-left: 2px; }

.md-spacer { background: var(--spacer); width: 100%; }

/* nút merge nổi tại change đang chọn (content widget, neo cột 1, đẩy vào vùng gutter) */
.md-merge-widget { margin-left: -50px; z-index: 60; }

.md-merge-widget button {
	width: 22px;
	height: 18px;
	padding: 0;
	line-height: 1;
	font-size: 10px;
	border-radius: 4px;
	background: var(--accent);
	color: #fff;
	border: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	cursor: pointer;
}

.md-merge-widget button:hover { filter: brightness(1.2); }

/* ---------- selftest ---------- */

#selftest-report {
	position: fixed;
	inset: 40px;
	z-index: 999;
	overflow: auto;
	background: var(--panel);
	border: 2px solid var(--accent);
	border-radius: 10px;
	padding: 16px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12px;
}

#selftest-report .pass { color: #2ea043; }
#selftest-report .fail { color: #f85149; font-weight: 700; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	#panes-side { flex-direction: column; }
}