/* Adminer design wagg */
/* What WaggPanel adds to the cPanel design of Adminer (adminer.css, unchanged, loaded first by
wagg-login.php): the colours for a dark system and a few rules for narrow screens. Only the
variables of adminer.css are changed here, so the two designs cannot drift apart. */

@media (prefers-color-scheme: dark) {
	html {
		--cp-page: #0f1720;
		--cp-surface: #17222e;
		--cp-fg: #dbe4ec;
		--cp-muted: #93a1ad;
		--cp-border: #3b4957;
		--cp-border-light: #2a3743;
		--cp-cap: #1e2b38;
		--cp-link: #86b2ff;
		--cp-link-hover: #b0cdff;
		--cp-accent: #f28f63;
		--cp-danger: #ff7f8b;
		--cp-alert-error: #ff8f60;
		--cp-alert-error-bg: #3b2218;
		--cp-alert-success: #7fc77a;
		--cp-alert-success-bg: #1b3321;
		--cp-focus: 0 0 0 .25rem rgba(134, 178, 255, .3);
		--cp-shadow: 0 .125rem .25rem rgba(0, 0, 0, .5);
		color-scheme: dark;
	}
	/* the text of the messages is dark-on-pale in the light design, light-on-dark here */
	.error, .message { color: var(--cp-fg); }
}

/* a phone: the content uses the whole width, and a wide table scrolls inside the card, not the page */
@media all and (max-width: 800px) {
	#content { margin-left: 10px; margin-right: 10px; }
	#content table { display: block; max-width: 100%; overflow-x: auto; }
	input, select, textarea { max-width: 100%; }
	/* The Logout button floats over the top right corner. The temporary user's name says nothing to
	the tenant, so it goes. The breadcrumb (a long socket path, one line, absolutely placed) stops
	before the button and ends in an ellipsis instead of running under it or widening the page;
	the page title below it says where the visitor is anyway. */
	.logout span { display: none; }
	.logout { right: 10px; }
	#breadcrumb { right: 6.5em; overflow: hidden; text-overflow: ellipsis; }
	.rtl .logout { left: 10px; right: auto; }
	.rtl #breadcrumb { left: 6.5em; right: 48px; }
}