/* ===============================================================
   GUI Builder — scoped styles (matches Casper-RS wiki tokens)
   =============================================================== */

.gb-page { max-width: 1500px; margin-top: 10px; }

.gb-head { margin-bottom: 18px; }
.gb-head .gb-sub { color: var(--muted); margin: 0; }

/* Form fields ------------------------------------------------- */
.gb-field { display: flex; flex-direction: column; gap: 6px; }
.gb-field > label {
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--muted);
}
.gb-input, .gb-select {
	height: 40px;
	padding: 0 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.04);
	color: var(--text);
	font: inherit;
	transition: border-color var(--anim) var(--ease), background var(--anim) var(--ease);
}
.gb-input:focus, .gb-select:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(255,255,255,0.06);
}

/* Custom dropdown (replaces native select option menus) */
.gb-dd { position: relative; }
.gb-dd__btn {
	height: 40px; min-width: 90px; width: 100%;
	padding: 0 34px 0 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.04);
	color: var(--text); font: inherit; text-align: left;
	cursor: pointer; position: relative;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	line-height: 38px;
	transition: border-color var(--anim) var(--ease), background var(--anim) var(--ease);
}
.gb-dd__btn:hover { background: rgba(255,255,255,0.07); }
.gb-dd__btn::after {
	content: ""; position: absolute; right: 13px; top: 50%;
	width: 8px; height: 8px; margin-top: -3px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform var(--anim) var(--ease);
}
.gb-dd.open .gb-dd__btn { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.gb-dd.open .gb-dd__btn::after { transform: rotate(-135deg); margin-top: 0; }
.gb-dd__menu {
	position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; min-width: 100%;
	background: var(--bg-elev, #0f1621);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: 5px; display: none;
	max-height: 280px; overflow-y: auto;
}
.gb-dd.open .gb-dd__menu { display: block; }
.gb-dd__opt {
	padding: 8px 12px; border-radius: 8px; cursor: pointer;
	color: var(--text); font-size: 0.92rem; white-space: nowrap;
	transition: background 90ms var(--ease);
}
.gb-dd__opt:hover { background: rgba(255,255,255,0.08); }
.gb-dd__opt.sel { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
body.light .gb-dd__menu { background: #fff; }

/* tooltip name + lore lines */
.gb-tip .gb-tip-name { font-weight: 700; }
.gb-tip .gb-tip-lore { font-weight: 500; opacity: 0.95; margin-top: 1px; }

.gb-btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.04);
	color: var(--text);
	font-weight: 700; cursor: pointer;
	transition: transform var(--anim) var(--ease), border-color var(--anim) var(--ease), background var(--anim) var(--ease);
}
.gb-btn:hover { transform: translateY(-1px); border-color: var(--border-2); background: rgba(255,255,255,0.07); }
.gb-btn:active { transform: translateY(0); }
.gb-btn--accent {
	background: linear-gradient(135deg, rgba(46,204,113,0.20), rgba(46,204,113,0.10));
	border-color: rgba(46,204,113,0.30); color: #dfffee;
}
.gb-btn--accent:hover { border-color: rgba(46,204,113,0.45); }
.gb-btn--danger:hover { border-color: rgba(231,76,60,0.5); color: #ff8e80; }

/* Workbench layout — 3 columns: settings · chest · palette ----- */
.gb-workbench {
	display: grid;
	grid-template-columns: minmax(240px, 280px) minmax(0, 580px) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
	margin-top: 24px;
}
.gb-workbench > .gb-col-chest,
.gb-workbench > .gb-settings,
.gb-workbench > .gb-palette { min-height: 560px; }
@media (max-width: 1280px) {
	.gb-workbench { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
	.gb-workbench .gb-palette { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 900px) {
	.gb-workbench { grid-template-columns: 1fr; }
	.gb-workbench .gb-palette { grid-column: auto; }
	.gb-workbench > .gb-col-chest,
	.gb-workbench > .gb-settings { min-height: 0; }
}

/* Shared card header with divider bar (Settings + Inventory) */
.gb-card-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}
.gb-card-head h2 { margin: 0; font-size: 1.05rem; }
.gb-card-head .gb-hint { font-size: 0.82rem; color: var(--muted); text-align: right; }

/* chest column holds the canvas + (optional) editor, stacked */
.gb-col-chest { display: flex; flex-direction: column; gap: 16px; }
.gb-col-chest .gb-canvas-wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
.gb-canvas-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 18px; }
.gb-canvas-body .gb-chest { margin: 0; }

/* Settings card (left column) */
.gb-settings {
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.03);
	box-shadow: var(--shadow);
	display: flex; flex-direction: column;
}
.gb-settings__body {
	padding: 16px; display: flex; flex-direction: column; gap: 14px;
}
.gb-settings .gb-field { display: flex; flex-direction: column; gap: 6px; }
.gb-settings .gb-dd { width: 100%; }
.gb-settings .gb-dd__btn { width: 100%; }
.gb-check {
	display: flex; align-items: flex-start; gap: 10px;
	cursor: pointer; color: var(--text); font-size: 0.9rem;
	padding: 8px 10px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: rgba(255,255,255,0.02);
	transition: border-color var(--anim) var(--ease), background var(--anim) var(--ease);
}
.gb-check:hover { border-color: var(--border-2); background: rgba(255,255,255,0.04); }
.gb-check input { margin-top: 2px; flex-shrink: 0; }
.gb-check em { display: block; font-style: normal; color: var(--muted); font-size: 0.78rem; margin-top: 1px; }

/* Chest canvas ------------------------------------------------- */
.gb-canvas-wrap {
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.03);
	box-shadow: var(--shadow);
}

/* the chest itself — dark panel that matches the wiki theme */
.gb-chest {
	display: inline-grid;
	gap: 5px;
	padding: 14px;
	border-radius: var(--radius-sm);
	background: rgba(0,0,0,0.28);
	border: 1px solid var(--border-2);
	box-shadow: inset 0 2px 14px rgba(0,0,0,0.45);
	margin: 0 auto;
	width: max-content;
	max-width: 100%;
	overflow: auto;
}
.gb-chest-name {
	grid-column: 1 / -1;
	font-family: "Fira Code","JetBrains Mono",ui-monospace,monospace;
	font-size: 0.85rem;
	color: var(--text);
	font-weight: 700;
	padding: 2px 2px 8px;
	user-select: none;
	opacity: 0.9;
}

.gb-slot {
	width: 52px; height: 52px;
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--border-2);
	border-radius: 8px;
	position: relative;
	cursor: pointer;
	display: grid; place-items: center;
	transition: background 120ms var(--ease), border-color 120ms var(--ease), transform 120ms var(--ease);
}
.gb-slot:hover {
	background: rgba(255,255,255,0.09);
	border-color: rgba(255,255,255,0.22);
}
.gb-slot.gb-slot--over {
	border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: 0 0 0 2px rgba(46,204,113,0.35);
}
.gb-slot.gb-slot--selected {
	border-color: #ffd84a;
	box-shadow: 0 0 0 2px rgba(255,216,74,0.4);
}
.gb-slot img {
	width: 40px; height: 40px;
	image-rendering: pixelated;
	pointer-events: none;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.gb-slot .gb-slot-idx {
	position: absolute; top: 2px; left: 4px;
	font-size: 9px; color: var(--muted); font-weight: 700;
	pointer-events: none; font-family: ui-monospace, monospace;
	opacity: 0.7;
}
.gb-slot .gb-amount {
	position: absolute; right: 3px; bottom: 1px;
	font-family: "Fira Code", ui-monospace, monospace;
	font-size: 13px; font-weight: 800; color: #fff;
	text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none;
}
.gb-slot .gb-shapechar {
	position: absolute; right: 3px; top: 2px;
	font-size: 10px; font-weight: 800; color: #6ea8ff;
	pointer-events: none; font-family: ui-monospace, monospace;
}

/* light-mode slot readability */
body.light .gb-chest { background: rgba(0,0,0,0.06); }
body.light .gb-slot { background: rgba(0,0,0,0.04); border-color: rgba(13,21,38,0.15); }
body.light .gb-slot:hover { background: rgba(0,0,0,0.08); border-color: rgba(13,21,38,0.28); }
body.light .gb-slot .gb-slot-idx { color: rgba(13,21,38,0.55); }

/* Palette ------------------------------------------------------ */
.gb-palette {
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.03);
	box-shadow: var(--shadow);
	display: flex; flex-direction: column;
	max-height: 720px;
}
.gb-palette__head {
	padding: 12px 12px 10px;
	border-bottom: 1px solid var(--border);
	display: flex; gap: 8px; align-items: center;
}
.gb-palette__search { flex: 1 1 auto; min-width: 0; }
.gb-palette__cat { flex: 0 0 auto; width: 150px; }
.gb-palette__head .gb-dd { flex: 0 0 auto; width: 150px; }
.gb-palette__head .gb-dd__btn { width: 100%; min-width: 0; }
.gb-palette__foot {
	padding: 8px 14px; border-top: 1px solid var(--border);
	display: flex; align-items: center;
}
.gb-palette__grid {
	flex: 1; overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
	gap: 6px; padding: 12px;
	align-content: start;
}
.gb-palette__grid::-webkit-scrollbar { width: 10px; }
.gb-palette__grid::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.10); border-radius: 999px;
	border: 2px solid transparent; background-clip: padding-box;
}
.gb-pal-item {
	aspect-ratio: 1; border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.03);
	display: grid; place-items: center;
	cursor: grab; position: relative;
	transition: transform 120ms var(--ease), border-color 120ms var(--ease), background 120ms var(--ease);
}
.gb-pal-item:hover {
	transform: translateY(-2px) scale(1.04);
	border-color: rgba(46,204,113,0.3);
	background: rgba(46,204,113,0.07);
	z-index: 2;
}
.gb-pal-item:active { cursor: grabbing; }
.gb-pal-item img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.gb-pal-empty { grid-column: 1/-1; color: var(--muted); text-align: center; padding: 28px 0; }
.gb-pal-count { font-size: 0.78rem; color: var(--muted); margin-left: auto; }

/* tooltip */
.gb-tip {
	position: fixed; z-index: 9999; pointer-events: none;
	background: #16100f; color: #fff;
	border: 2px solid #2d0a5e;
	box-shadow: inset 0 0 0 1px #100124, 0 6px 18px rgba(0,0,0,0.5);
	padding: 6px 10px; font-size: 0.82rem; font-weight: 600;
	font-family: "Fira Code", ui-monospace, monospace;
	display: none; max-width: 260px;
}
.gb-tip .gb-tip-id { color: #9aa0a6; font-size: 0.72rem; display: block; margin-top: 2px; }

/* Slot editor (below canvas) ---------------------------------- */
.gb-editor {
	margin-top: 16px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.03);
	box-shadow: var(--shadow);
	padding: 16px;
}
.gb-editor[hidden] { display: none; }
.gb-editor__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gb-editor__preview {
	width: 46px; height: 46px; border-radius: 8px;
	background: rgba(255,255,255,0.05); border: 1px solid var(--border-2);
	display: grid; place-items: center; flex-shrink: 0;
}
.gb-editor__preview img { width: 34px; height: 34px; image-rendering: pixelated; }
.gb-editor__head h3 { margin: 0; font-size: 1rem; }
.gb-editor__head .gb-editor__slotno { color: var(--muted); font-size: 0.82rem; }
.gb-editor__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 640px) { .gb-editor__grid { grid-template-columns: 1fr; } }
.gb-editor__full { grid-column: 1 / -1; }
.gb-editor textarea.gb-input { height: 70px; padding: 8px 12px; resize: vertical; font-family: inherit; }

/* hide-flag chips */
.gb-flags { display: flex; flex-wrap: wrap; gap: 7px; }
.gb-flag {
	font-size: 0.78rem; font-weight: 600;
	padding: 6px 12px; border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.03);
	color: var(--muted); cursor: pointer;
	transition: all var(--anim) var(--ease);
	white-space: nowrap;
}
.gb-flag:hover { border-color: var(--border-2); color: var(--text); }
.gb-flag.on {
	background: var(--accent-soft);
	border-color: rgba(46,204,113,0.4);
	color: var(--accent);
}
.gb-flag.on::before { content: "\2713"; font-weight: 700; margin-right: 6px; font-size: 0.78rem; }

/* Code output -------------------------------------------------- */
.gb-code-wrap { margin-top: 36px; }
.gb-code-head {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 10px; margin-bottom: 10px;
}
.gb-code-head h2 { margin: 0; font-size: 1.1rem; margin-right: auto; }
/* dropdown + buttons grouped on the right, on ONE row, dropdown kept small.
   Covers both the raw <select> (if un-enhanced) and the custom .gb-dd. */
.gb-code-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	flex-wrap: nowrap; flex: 0 0 auto;
}
.gb-code-toggle > .gb-select,
.gb-code-toggle > .gb-dd {
	flex: 0 0 auto;
	width: 190px; min-width: 190px; max-width: 190px;
}
.gb-code-toggle .gb-dd__btn { width: 100%; min-width: 0; height: 40px; }
.gb-code-toggle .gb-btn { flex: 0 0 auto; white-space: nowrap; }
/* The code box reuses the wiki's proven .command-block > pre styling
   (from info_cards.css) which already handles white-space:pre, padding,
   rounded corners, etc. We only add a scroll cap here. */
.gb-code-wrap .command-block > pre {
	max-height: 460px;
	overflow: auto;
}

/* light mode tweaks */
body.light .gb-tip { color: #fff; }

/* Toast notifications */
.gb-toasts {
	position: fixed; bottom: 20px; right: 20px; z-index: 10000;
	display: flex; flex-direction: column; gap: 10px;
	max-width: 360px;
}
.gb-toast {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: var(--bg-elev, #0f1621);
	border: 1px solid var(--border-2);
	box-shadow: var(--shadow);
	color: var(--text);
	font-size: 0.88rem; line-height: 1.45;
	opacity: 0; transform: translateX(20px);
	transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.gb-toast.show { opacity: 1; transform: translateX(0); }
.gb-toast i { margin-top: 1px; flex-shrink: 0; }
.gb-toast--error   { border-color: rgba(231,76,60,0.45); }
.gb-toast--error i { color: #e74c3c; }
.gb-toast--info    { border-color: rgba(52,164,235,0.45); }
.gb-toast--info i  { color: #34a4eb; }
.gb-toast--success { border-color: rgba(46,204,113,0.45); }
.gb-toast--success i { color: var(--accent); }
body.light .gb-toast { background: #fff; }