/*
 * The command palette (ADO #336): the small bar, and the dialog it becomes.
 *
 * WHY THIS IS ITS OWN STYLESHEET AND NOT A <style> BLOCK. The dashboard
 * scopes its own styles inline, and that is right for styles only the
 * dashboard has. This is a component meant to be dropped onto any page with
 * one include, and a component whose CSS is copied into each page is a
 * component with a different bug on every page.
 *
 * NOT assets/css/main.css. That file is compiled output from assets/sass/,
 * which is not deployed, so an edit there silently diverges the next time
 * anybody rebuilds it. Same convention as dashboard.php and all-services.php.
 *
 * EVERY COLOUR IS STATED. The theme's page ground is dark navy (#242943) with
 * WHITE default text, so anything drawn here has to set its own colour or
 * inherit white onto whatever it happens to sit on -- and the theme colours
 * strong/b and .button white specifically, which beats a colour set on a
 * parent. Three separate invisible-white-on-white bugs were shipped on the
 * dashboard before that was written down. The panel is therefore deliberately
 * DARK rather than a white card: it sits over a dark page, and a dark surface
 * is the one where the theme's own defaults are already readable.
 *
 * Every selector is .vg-cp-*, so nothing here can reach the rest of the page.
 */

/* -- the collapsed bar --------------------------------------------------- */

.vg-cp {
	margin: 0 0 2em;
}

/* An <a>, so main.css gives it an underline and a dotted border-bottom that
   have to be removed by hand -- the same thing the dashboard's tab strip does. */
.vg-cp-bar {
	display: flex;
	align-items: center;
	gap: .75em;
	max-width: 30em;
	padding: .7em 1em;
	border: 1px solid rgba(255, 255, 255, .22);
	border-bottom: 1px solid rgba(255, 255, 255, .22);
	border-radius: 6px;
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .72);
	font-size: .85em;
	text-decoration: none;
	cursor: text;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.vg-cp-bar:hover,
.vg-cp-bar:focus {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
	text-decoration: none;
}

.vg-cp-bar-icon:before,
.vg-cp-field-icon:before,
.vg-cp-icon:before {
	/* The theme ships Font Awesome 5. FA6 renamed a lot of icons and an
	   unknown name draws nothing at all, silently -- which is why
	   command-palette-test.php checks every icon name against the
	   stylesheet the site actually ships. */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.vg-cp-bar-icon {
	opacity: .6;
}

.vg-cp-bar-text {
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vg-cp-bar-keys {
	flex: 0 0 auto;
	opacity: .75;
}

/* -- keys ---------------------------------------------------------------- */

.vg-cp kbd {
	display: inline-block;
	min-width: 1.5em;
	padding: .1em .4em;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 3px;
	background: rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .85);
	font-family: inherit;
	font-size: .8em;
	line-height: 1.5;
	text-align: center;
}

/* -- the dialog ---------------------------------------------------------- */

/*
 * MEASURED, NOT GUESSED. The theme's #header is `position: fixed` at z-index
 * 10000 and its #menu overlay is 10002; the dashboard's floating jumper is
 * 9000. The first version of this sat at 9500 and the VPS GB logo drew
 * straight over the open panel -- visible in a screenshot, invisible in the
 * code. Anything added above these has to clear 10002.
 */
.vg-cp-scrim {
	position: fixed;
	inset: 0;
	z-index: 10010;
	background: rgba(15, 17, 28, .65);
}

.vg-cp-panel {
	position: fixed;
	z-index: 10011;
	/* 8vh, but never under the iPhone status bar in the installed app, where
	   8vh of a phone is about the status bar's own height. --vg-safe-top is
	   declared in app-shell.css; 0px outside that case. */
	top: max(8vh, calc(var(--vg-safe-top, 0px) + 1em));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	width: calc(100% - 2.5em);
	max-width: 44em;
	max-height: 80vh;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 8px;
	background: #262b46;
	box-shadow: 0 1.5em 3em rgba(0, 0, 0, .45);
	color: #fff;
	overflow: hidden;
}

.vg-cp-field {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: .9em 1.1em;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.vg-cp-field-icon {
	opacity: .55;
}

/* The theme styles inputs for its own forms -- a bottom border, a fixed
   height and a margin. All three have to go, or the field sits half out of
   its own row. */
.vg-cp-input,
.vg-cp-input:focus {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	height: auto;
	border: 0;
	box-shadow: none;
	background: transparent;
	color: #fff;
	font-size: 1.05em;
	line-height: 1.6;
}

.vg-cp-input::placeholder {
	color: rgba(255, 255, 255, .45);
	opacity: 1;
}

.vg-cp-dismiss {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	height: auto;
	font-family: inherit;
	margin: 0;
	padding: .3em .8em;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 4px;
	background: transparent;
	color: rgba(255, 255, 255, .8);
	font-size: .7em;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.8;
	cursor: pointer;
}

.vg-cp-dismiss:hover {
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.vg-cp-status {
	margin: 0;
	padding: .6em 1.15em 0;
	color: rgba(255, 255, 255, .55);
	font-size: .75em;
	letter-spacing: .06em;
}

.vg-cp-status:empty {
	display: none;
}

/* -- results ------------------------------------------------------------- */

.vg-cp-results {
	flex: 1 1 auto;
	margin: 0;
	padding: .5em .6em .8em;
	list-style: none;
	overflow-y: auto;
}

.vg-cp-results li {
	margin: 0;
	padding: 0;
}

.vg-cp-group {
	padding: .9em .55em .35em;
	color: rgba(255, 255, 255, .5);
	font-size: .65em;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/*
 * HALF THESE RULES EXIST TO UNDO THE THEME'S <button>, and they are not
 * padding. A row that opens a confirm has to be a button rather than a link,
 * and main.css styles every button as a call to action: 2.75em tall,
 * uppercase, letter-spaced, centred, its own font-weight and an inset
 * box-shadow border. Seen in a browser, the first version of this rendered
 * "RESTART VM1" in spaced capitals across its own second line while the
 * <a> rows next to it looked perfect -- because the anchors were never
 * styled that way. text-transform and letter-spacing are INHERITED too, so
 * resetting the row fixes its children with it.
 */
.vg-cp-row {
	display: flex;
	align-items: center;
	gap: .85em;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: .6em .55em;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid transparent;
	border-radius: 5px;
	box-shadow: none;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
}

/* Hover and keyboard selection are the SAME state deliberately: two different
   highlights, one following the mouse and one the arrow keys, is how somebody
   presses Enter and gets the other one. */
.vg-cp-row.is-active,
.vg-cp-row:hover {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .22);
	text-decoration: none;
}

/* ...and while the pointer is inside the list, the keyboard's highlight gives
   way to it, so there is never more than one. Two appear otherwise in one
   real case: the panel opens directly under a stationary cursor, which
   hovers a row without ever firing a mousemove for the script to follow. */
.vg-cp-results:hover .vg-cp-row.is-active:not(:hover) {
	background: transparent;
	border-color: transparent;
}

.vg-cp-icon {
	flex: 0 0 1.4em;
	opacity: .65;
	text-align: center;
}

.vg-cp-body {
	flex: 1 1 auto;
	min-width: 0;
}

.vg-cp-name {
	display: block;
	overflow: hidden;
	color: #fff;
	font-size: .9em;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vg-cp-meta {
	display: block;
	overflow: hidden;
	margin-top: .15em;
	color: rgba(255, 255, 255, .55);
	font-size: .75em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vg-cp-tail {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .5);
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A status worth noticing: a resource that is not live yet carries it, so
   "why can I not restart this" is answered in the row rather than by a
   refusal after pressing Enter. */
.vg-cp-tag {
	display: inline-block;
	margin-left: .5em;
	padding: .1em .6em;
	border-radius: 999px;
	background: rgba(255, 193, 7, .16);
	color: #ffd75e;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: .1em;
}

/* -- the confirm step ---------------------------------------------------- */

/*
 * This is the important state in the whole component. A command is never run
 * by the keystroke that selects it: selecting turns the row into this, which
 * names the target and says what will happen, and only a second, deliberate
 * Enter posts anything. Amber rather than red -- nothing the palette can run
 * is destructive (no rebuild, no resize, no delete) and a red panel for
 * "restart PHP" trains people to click through red panels.
 */
.vg-cp-confirm {
	margin: .5em .55em;
	padding: .9em 1em;
	border: 1px solid rgba(255, 193, 7, .5);
	border-radius: 6px;
	background: rgba(255, 193, 7, .1);
	color: #fff;
}

.vg-cp-confirm-title {
	display: block;
	color: #fff;
	font-size: .95em;
	font-weight: 700;
}

.vg-cp-confirm-note {
	display: block;
	margin-top: .35em;
	color: rgba(255, 255, 255, .78);
	font-size: .8em;
	line-height: 1.5;
}

.vg-cp-confirm-actions {
	display: flex;
	align-items: center;
	gap: .6em;
	margin-top: .9em;
}

/* The theme's .button is white text on a white inset box-shadow, which
   vanishes on a light surface and reads as a ghost on this one. Both buttons
   here are painted from scratch rather than borrowed. */
.vg-cp-go,
.vg-cp-cancel {
	appearance: none;
	-webkit-appearance: none;
	height: auto;
	font-family: inherit;
	margin: 0;
	padding: .45em 1.1em;
	border: 0;
	border-radius: 4px;
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 2;
	cursor: pointer;
}

.vg-cp-go {
	background: #ffc107;
	color: #35301c;
}

.vg-cp-go:hover {
	background: #ffcf3d;
	color: #35301c;
}

.vg-cp-cancel {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
	color: rgba(255, 255, 255, .85);
}

.vg-cp-cancel:hover {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
	color: #fff;
}

/* -- empty, error, footer ------------------------------------------------ */

.vg-cp-empty {
	padding: 1.4em .8em;
	color: rgba(255, 255, 255, .6);
	font-size: .85em;
	line-height: 1.6;
}

.vg-cp-empty a {
	color: #fff;
}

.vg-cp-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.1em;
	padding: .7em 1.15em;
	border-top: 1px solid rgba(255, 255, 255, .14);
	background: rgba(0, 0, 0, .14);
	color: rgba(255, 255, 255, .55);
	font-size: .7em;
	letter-spacing: .06em;
}

.vg-cp-foot-link {
	margin-left: auto;
	border-bottom: 0;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

.vg-cp-foot-link:hover {
	color: #fff;
}

/* -- small screens ------------------------------------------------------- */

@media screen and (max-width: 736px) {
	.vg-cp-bar {
		max-width: none;
	}

	/* Full height, not a floating card: on a phone the keyboard takes half
	   the viewport, and a centred 80vh panel ends up as a two-row list. */
	.vg-cp-panel {
		top: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	/* Every hint in the footer is a key a phone does not have. */
	.vg-cp-foot span {
		display: none;
	}

	.vg-cp-foot-link {
		margin-left: 0;
	}
}

/* [hidden] has to win over the display rules above, because the panel and the
   scrim are rendered hidden and toggled by the attribute rather than by a
   class -- the same reason all-services.php restates it. */
.vg-cp [hidden] {
	display: none !important;
}