/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */

:root {
	--blue: #374875;
	--orange: #f7934d;
	--grey: #5F6062;
	--grey-light: #eceff4;
	--white: #ffffff;
	--yellow: #FFC700;
	--red: #D72F2F;
	--green: #519b68;
}

body {
	height: auto;
}

.miniorange-oauth-20-server-card-background {
	background-color: var(--blue);
	min-height: 260px !important;
	border-radius: 10px;
}

.miniorange-oauth-20-server-card-background-1 {
	background-color: var(--blue);
	min-height: 150px !important;
}

.miniorange-oauth-20-server-card-title {
	color: var(--orange);
}

.miniorange-oauth-20-server-orange-color {
	color: var(--orange);
}

.card-footer a:hover {
	color: var(--orange);
}

.miniorange-oauth-20-server-blue-color,
.is-blue {
	color: var(--blue);
}

.miniorange-oauth-20-server-yellow-color {
	color: var(--yellow);
}

.miniorange-oauth-20-server-logo {
	padding: 20px;
	border-radius: 100%;
	box-shadow: 0 6px 10px rgb(0 0 0 / 8%), 0 0 6px rgb(0 0 0 / 5%);
}

.miniorange-oauth-20-server-account-setup-card {
	background-color: var(--orange);
	border-radius: 10px;
}

.miniorange-oauth-20-server-tooltip-button {
	border: none !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.miniorange-oauth-20-server-tooltip-button input::before {
	/* remove before on input */
	display: none !important;
}

.miniorange-oauth-20-server-tooltip-button input {
	border: none !important;
}

.miniorange-oauth-20-server-nav-active {
	background-color: var(--blue) !important;
	color: var(--white) !important;
	border-radius: 5px !important;
}

.miniorange-oauth-20-server-card {
	border-radius: 10px;
	border-color: var(--white);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-bottom: 0;
	transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
}

.miniorange-oauth-20-server-card .card-footer {
	margin-top: auto;
}

.miniorange-oauth-20-server-card .media {
	height: 40px !important;
}

.miniorange-oauth-20-server-card:hover {
	background-color: var(--blue);
	color: var(--white);
	transform: scale(1.05);
}

#mo-dasboard-side-panel {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-around !important;
}

#mo-dasboard-side-panel .is-one-fifth-widescreen {
	width: 33%;
}

#signing-algo.select:not(.is-multiple):not(.is-loading)::after {
	top: 75%;
}

#upgrade_now {
	background-color: var(--yellow);
	color: var(--white);
	border-color: var(--yellow);
}

.select select:not([multiple]) {
	padding: 0.5em;
}

.wp-core-ui select,
.wp-core-ui select:disabled {
	background-image: none;
}

.button.delete-client {
	border-color: var(--red);
	color: var(--red);
	background-color: var(--white);
}

.button.delete-client:hover {
	border-color: var(--red);
	color: var(--white);
	background-color: var(--red);
}

.button.is-blue,
.button.is-blue:hover {
	background-color: var(--blue);
	color: var(--white);
	border-color: var(--blue);
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.button.is-blue.is-outlined,
.button.is-blue.is-outlined:hover {
	background-color: var(--white);
	color: var(--blue);
	border-color: var(--blue);
}

#download_postman_collection {
	background-color: var(--orange);
}

.is-grey {
	color: var(--grey);
}

/* Abilities API tab — MCP client setup guide cards */
.miniorange-oauth-20-server-mcp-guide-link {
	display: block;
	padding: 1rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	color: var(--grey);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}

.miniorange-oauth-20-server-mcp-guide-link:hover {
	border-color: var(--blue);
	box-shadow: 0 2px 8px rgb(55 72 117 / 12%);
	color: var(--grey);
}

.miniorange-oauth-20-server-mcp-guide-link:hover .miniorange-oauth-20-server-mcp-guide-link-cta {
	text-decoration: underline;
}

.miniorange-oauth-20-server-mcp-guide-link-cta {
	color: var(--blue);
}

.media-left,
.content-title,
.menu-list a.nav-link {
	color: var(--blue);
}

.card:hover .media-left,
.card:hover .content-title {
	color: var(--white);
}

.menu-list a.nav-link#premium_features_link {
	color: var(--yellow);
}

.menu-list a.nav-link#premium_features_link.miniorange-oauth-20-server-nav-active {
	background-color: var(--yellow) !important;
	border-color: var(--yellow) !important;
}

.switch[type=checkbox].is-success:checked+label::before,
.switch[type=checkbox].is-success:checked+label:before {
	background: var(--green);
}

/* Email Popup */
#email_popup {
	right: 20px;
	bottom: 20px;
	position: fixed;
	z-index: 40;
	width: auto;
}

.email_popup_dialog,
.email_popup_triangle,
.email_popup_button {
	background-color: var(--blue);
}

.email_popup_dialog {
	height: 80px;
	width: 180px;
	border-radius: 8px;
	z-index: 5;
}

.email_popup_triangle {
	height: 14px;
	width: 12px;
	transform: rotate(-45deg);
	margin-left: -8px;
}

.email_popup_button {
	height: 90px;
	width: 90px;
	display: grid;
	border-radius: 50px;
	cursor: pointer;
}

.email_popup_button button {
	background-color: transparent;
	border: none;
}

.email_popup_button i {
	font-size: 60px;
}

.card {
	border: none;
}

#client-secret {
	border: none;
	box-shadow: none;
}

.premium-features~.column .card {
	min-width: 0px;
}

.columns.is-multiline.is-vcentered {
	background-image: linear-gradient(to right, var(--white), var(--yellow));
	border-radius: 10px;
}

#integrations-and-clients .columns.is-multiline.is-vcentered {
	background-image: none;
}

/* Breakpoints */
@media screen and (max-width: 1520px) {

	#dashboard .column.is-one-third,
	#integrations-and-clients .column.is-one-third,
	#premium-features .column.is-one-third {
		width: 50%;
	}
}

@media screen and (max-width: 1396px) {

	.columns.is-multiline.is-vcentered .column.is-one-third,
	.columns.is-multiline.is-vcentered .column.is-one-forth {
		min-width: 100%;
	}
}

@media screen and (max-width: 1110px) {

	#dashboard .column.is-one-third,
	#integrations-and-clients .column.is-one-third,
	#premium-features .column.is-one-third {
		width: 100%;
	}
}