/* Prototype UI styles: question palette (#1), example gallery (#3), undo (#5) */

/* ---- #1 Question palette: build on the existing .active wide panel ---- */
/* Pin the panel open while active (base CSS only shows it on :hover) */
#leftBar .menu li.addq_menu.active ul.q_list {
	display: block;
	max-height: calc(100vh - 60px) !important;
	overflow-y: auto !important;
	overflow-x: hidden;
	scrollbar-width: thin;
	box-shadow: 0 8px 40px rgba(20,40,90,0.45);
	border-radius: 10px;
	padding-top: 0;
}

/* Essentials strip stands out from the other groups */
#leftBar .addq_menu .q_list .q_essentials {
	background: #f4f8ff;
	border-radius: 8px;
}

/* Search bar */
#leftBar .addq_menu .q_searchbar {
	display: block;
	padding: 0.6em 0;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 5;
	border-bottom: 1px solid #eef;
}
#leftBar .addq_menu .q_searchbar:hover {
	background: #fff;
}
#leftBar .addq_menu .q_searchbar input {
	width: 70%;
	padding: 7px 12px;
	border: 1px solid #b9c8e4;
	border-radius: 18px;
	font-size: 13px;
	outline-color: #2c5aa0;
}
#leftBar .addq_menu #qTypeCount {
	margin-left: 0.8em;
	color: #888;
	font-size: 12px;
}

/* Recently used chips */
#leftBar .addq_menu .q_recent {
	border-bottom: 1px solid #eef;
	padding: 0.4em 0;
}
#leftBar .addq_menu .q_recent:hover {
	background: #fff;
}
#leftBar .addq_menu .q_recent > u {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: #28487f;
	margin-bottom: 2px;
	width: 8em;
	vertical-align: top;
}
#leftBar .addq_menu .q_recent > ul {
	display: inline-flex !important;
	flex-wrap: wrap;
	position: static !important;
	width: auto !important;
	max-width: calc(100% - 9em);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
#leftBar .addq_menu .q_recent > ul > li {
	border: 1px solid #cbd6ea;
	background: #fdf7e8;
	border-radius: 14px;
	padding: 2px 12px;
	margin: 2px 4px 2px 0;
	cursor: pointer;
	font-size: 12px;
}
#leftBar .addq_menu .q_recent > ul > li:hover {
	background: #f8c74f;
}

/* Close button + filter-hide helper */
#leftBar .addq_menu .q_close {
	position: absolute;
	top: 8px;
	right: 12px;
	cursor: pointer;
	color: #99a;
	font-size: 14px;
	padding: 2px 6px;
	z-index: 6;
}
#leftBar .addq_menu .q_close:hover { color: #223; }
.q_list .qs-hide { display: none !important; }

/* ---- #3 Example gallery / launchpad ---- */
.sgqGalleryBox {
	position: fixed;
	inset: 0;
	background: rgba(20,30,60,0.55);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sgqGalleryInner {
	position: relative;
	background: #fff;
	width: min(940px, 92vw);
	max-height: 88vh;
	overflow-y: auto;
	border-radius: 12px;
	padding: 1.5em 2em 1.5em 2em;
	box-shadow: 0 12px 60px rgba(0,0,10,0.4);
}
.sgqGalleryInner h2 {
	margin-top: 0;
	color: #1e3a8a;
}
.sgqGalleryClose {
	position: absolute;
	top: 10px;
	right: 16px;
	cursor: pointer;
	font-style: normal;
	font-weight: bold;
	color: #99a;
	padding: 4px 8px;
}
.sgqGalleryClose:hover { color: #223; }

.sgqStartCards {
	display: flex;
	gap: 1em;
	margin: 1em 0 0.5em 0;
}
.sgqStart {
	flex: 1;
	border: 1px solid #d7e2f4;
	border-radius: 10px;
	padding: 1.2em 1em;
	text-align: center;
	cursor: pointer;
	transition: 0.2s;
}
.sgqStart:hover {
	border-color: #2c5aa0;
	box-shadow: 0 4px 14px rgba(44,90,160,0.25);
	transform: translateY(-2px);
}
.sgqStart i {
	font-size: 1.6em;
	color: #2c5aa0;
	display: block;
	margin-bottom: 0.4em;
}
.sgqStart b {
	display: block;
	color: #1e3a8a;
	margin-bottom: 0.3em;
}
.sgqStart span {
	font-size: 0.85em;
	color: #667;
}

.sgqExHead {
	color: #28487f;
	margin: 1.2em 0 0.6em 0;
}
.sgqExGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.9em;
}
.sgqExCard {
	border: 1px solid #e0e6f2;
	border-radius: 10px;
	padding: 0.9em 1em;
	display: flex;
	flex-direction: column;
}
.sgqExCard b { color: #1e3a8a; margin-bottom: 0.3em; }
.sgqExCard span { font-size: 0.85em; color: #556; flex: 1; }
.sgqExFoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.7em;
}
.sgqExFoot small { color: #99a; }
.sgqExFoot button {
	background: #2c5aa0;
	color: #fff;
	border: none;
	border-radius: 14px;
	padding: 5px 16px;
	cursor: pointer;
	font-size: 0.85em;
}
.sgqExFoot button:hover { background: #f8c74f; color: #223; }
.sgqExNote {
	color: #889;
	font-size: 0.8em;
	margin-bottom: 0;
}

/* ---- #7 Combined Design panel ---- */
#designPanel .dsRow {
	display: flex;
	align-items: center;
	margin-bottom: 0.8em;
}
#designPanel .dsRow label {
	flex: 0 0 auto;
	width: 8em;
	font-style: italic;
	color: #556;
}
#designPanel .dsRow select, #designPanel .dsRow input {
	flex: 1;
	padding: 5px 8px;
	border: 1px solid #b9c8e4;
	border-radius: 6px;
	background: #fff;
	max-width: 20em;
}
#designPanel .dsNote {
	font-size: 0.8em;
	color: #889;
	margin-top: 1em;
	max-width: 30em;
}

/* ---- #9 Preview size presets ---- */
.modalTest .pvSizes {
	position: absolute;
	top: 8px;
	right: 42px;
	z-index: 5;
	display: flex;
	gap: 12px;
}
.modalTest .pvSizeBtn {
	cursor: pointer;
	color: #9ab;
	font-size: 14px;
}
.modalTest .pvSizeBtn:hover { color: #2c5aa0; }
body.pvPhone .modalTest .pvSizeBtn[data-pv='pvPhone'],
body.pvTablet .modalTest .pvSizeBtn[data-pv='pvTablet'],
body:not(.pvPhone):not(.pvTablet) .modalTest .pvSizeBtn[data-pv=''] {
	color: #2c5aa0;
}

body.pvPhone.qrePreviewOn #sgqQreWizard {
	grid-template-columns: 1fr 420px;
}
body.pvPhone.qrePreviewOn .modalTest .modalinner {
	width: 400px;
	min-width: 400px;
}
body.pvTablet.qrePreviewOn #sgqQreWizard {
	grid-template-columns: 1fr 790px;
}
body.pvTablet.qrePreviewOn .modalTest .modalinner {
	width: 770px;
	min-width: 770px;
}

/* ---- Formula helper ---- */
.fxStatus {
	font-size: 11px;
	margin-top: 2px;
	min-height: 1em;
	color: #889;
}
.fxStatus.fxOk { color: #1c8813; }
.fxStatus.fxWarn { color: #b07d10; }
.fxStatus.fxErr { color: #c0392b; }

.qreHelper .fxQnames, .qreHelper .fxFns {
	margin: 0.3em 0 0.8em 0;
	padding: 0;
	max-height: 16em;
	overflow-y: auto;
	scrollbar-width: thin;
}
.qreHelper .fxQnames > li, .qreHelper .fxFns > li {
	list-style: none;
	padding: 3px 6px;
	cursor: pointer;
	border-radius: 4px;
}
.qreHelper .fxQnames > li:hover, .qreHelper .fxFns > li:hover {
	background: #ebf3ff;
}
.qreHelper .fxHint {
	font-size: 11px;
	color: #99a;
	cursor: default;
	border-bottom: 1px solid #eef;
	margin-bottom: 3px;
}
.qreHelper .fxHint:hover { background: none; }
.qreHelper .fxQn { font-weight: bold; color: #28487f; }
.qreHelper .fxTwist {
	font-style: normal;
	color: #99a;
	padding: 0 6px;
	cursor: pointer;
}
.qreHelper .fxCodes {
	margin: 2px 0 2px 10px;
	padding: 0;
	border-left: 2px solid #e4eaf5;
}
.qreHelper .fxCodes li {
	list-style: none;
	font-size: 11px;
	padding: 2px 6px;
	cursor: pointer;
	color: #556;
}
.qreHelper .fxCodes li:hover { background: #fdf3d8; }
.qreHelper .fxFns b { color: #28487f; margin-right: 6px; }
.qreHelper .fxFns small { color: #778; }

/* ---- Block selection and multi-question reorder ---- */
.-admin_blk .sgqname {
	cursor: pointer;
}
.-admin_blk .sgqname:hover {
	outline: 1px solid #f8c74f;
}
.-admin_blk.sgqSelected {
	outline: 2px solid #f8c74f;
	outline-offset: 2px;
	border-radius: 4px;
}
.-admin_blk.sgqSelected .sgqname {
	background: #f8c74f;
	color: #223;
}
.sgqSelBar {
	position: fixed;
	bottom: 1.2em;
	left: 50%;
	transform: translateX(-50%);
	background: #1e2c48;
	color: #fff;
	padding: 0.55em 1.2em;
	border-radius: 20px;
	z-index: 2900;
	display: flex;
	align-items: center;
	gap: 15px;
	box-shadow: 0 4px 20px rgba(0,0,20,0.4);
	font-size: 0.95em;
}
.sgqSelBar i {
	cursor: pointer;
	color: #cfe0ff;
}
.sgqSelBar i:hover { color: #f8c74f; }
.sgqSelBar .selDel:hover { color: #ff8f8f; }
.sgqSelBar .selClear {
	cursor: pointer;
	color: #f8c74f;
	font-weight: normal;
	margin-left: 4px;
}

/* ---- #5 Undo ---- */
/* Match the qShrink/fullScreen mini-button look */
#qUndo, #qRedo {
	width: 16px;
	height: 16px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	margin: 10px 0px 5px 10px;
	box-shadow: 0px 0px 1px #767676;
	cursor: pointer;
	box-sizing: border-box;
	transition: 0.5s;
	color: #99add7;
	text-align: center;
}
#qUndo:hover, #qRedo:hover {
	background: #2c5aa0;
	color: white;
	transform: scale(1.1);
}
#qUndo i, #qRedo i { display: none; }
#qUndo.sgqDisabled, #qRedo.sgqDisabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
.sgqToast {
	position: fixed;
	bottom: 1.5em;
	left: 50%;
	transform: translateX(-50%);
	background: #1e2c48;
	color: #fff;
	padding: 0.7em 1.3em;
	border-radius: 8px;
	z-index: 3000;
	box-shadow: 0 4px 20px rgba(0,0,20,0.4);
	font-size: 0.95em;
}
.sgqToast b {
	color: #f8c74f;
	cursor: pointer;
	margin-left: 1em;
}

@media (max-width: 900px) {
	#leftBar .menu li.addq_menu ul.q_list {
		left: 4px;
		right: 4px;
		width: auto;
		max-width: unset;
	}
	#leftBar .addq_menu .q_list .q_set { width: 47%; }
	.sgqStartCards { flex-direction: column; }
}