/* ------------------------------------------------------------------
   Medqon Property brand tokens.
   Every value below is sampled from application/assets/images/Medqon-Logo.gif
   (the "M" mark runs violet -> deep indigo -> blue; the wordmark is near-black).
   ------------------------------------------------------------------ */
:root {
	--medqon-violet: #7007dd; /* left end of the mark gradient   */
	--medqon-purple: #5c04c4; /* primary UI colour               */
	--medqon-deep: #4504a6; /* pressed / dark accent           */
	--medqon-indigo: #1c0075; /* middle of the mark gradient     */
	--medqon-navy: #0c2479;
	--medqon-blue: #2f62e9; /* right end of the mark gradient  */
	--medqon-blue-light: #839eea;
	--medqon-ink: #1f1f1f; /* wordmark black                  */
	--medqon-tint: #f4edff; /* lightest wash of the purple     */

	--medqon-gradient: linear-gradient(
		90deg,
		var(--medqon-violet) 0%,
		var(--medqon-indigo) 50%,
		var(--medqon-blue) 100%
	);
}

/* Brand gradient rule used under the logo bar and as a section divider. */
.medqon-rule {
	height: 3px;
	width: 100%;
	border: 0;
	margin: 0;
	background: var(--medqon-gradient);
}

/* Logo bar shown at the top of the login / tenant / referee screens. */
.medqon-brandbar {
	width: 100%;
	background: #fff;
	padding: 18px 15px;
	margin: 0 auto;
	text-align: center;
	border-bottom: 3px solid transparent;
	border-image: var(--medqon-gradient) 1;
}

.medqon-brandbar img {
	height: 72px;
	width: auto;
	max-width: 90%;
}

@media (max-width: 767.98px) {
	.medqon-brandbar {
		padding: 12px 15px;
	}
	.medqon-brandbar img {
		height: 48px;
	}
}

/* Primary call to action carrying the mark's gradient. */
.medqon-btn,
.btn.medqon-btn {
	background: var(--medqon-gradient);
	border: 0;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.2px;
	box-shadow: 0 4px 14px rgba(92, 4, 196, 0.28);
}

.medqon-btn:hover:not(:disabled),
.medqon-btn:focus:not(:disabled) {
	color: #fff;
	filter: brightness(1.08);
	box-shadow: 0 6px 18px rgba(92, 4, 196, 0.36);
}

.medqon-btn:disabled {
	background: #b9b9b9;
	box-shadow: none;
}

/* The square "M" mark used beside page and dashboard headings.
   The file itself is 192px square so it stays sharp on high-DPI screens, but it
   replaced a 54x61 icon, so left unsized it renders roughly three times too tall.
   Pin it back to that original footprint. !important because a few of the header
   partials carry an inline max-width that would otherwise scale it back up - that
   inline rule never bit before, since the old icon was only 54px wide. */
img[src$="medqon-mark.png"] {
	height: 56px !important;
	width: auto !important;
	max-width: none !important;
}

/* Text helpers */
.medqon-text {
	color: var(--medqon-purple) !important;
}

.medqon-ink {
	color: var(--medqon-ink) !important;
}

.medqon-gradient-text {
	background: var(--medqon-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--medqon-purple);
}

/* Focus ring on form controls, matched to the brand purple. */
.medqon-field:focus {
	border-color: var(--medqon-purple) !important;
	box-shadow: 0 0 0 3px rgba(92, 4, 196, 0.18) !important;
	outline: 0;
}

/* ------------------------------------------------------------------
   Pop-up messages (SweetAlert).

   Every message in the site goes through medqon_alerts.js, which draws a
   SweetAlert box. The rules below give that box a Medqon header bar and
   the brand purple button, so a message looks like part of the site
   instead of a plain browser alert.
   ------------------------------------------------------------------ */

/* The white box itself: softer corners, no padding at the top so the
   coloured header bar can reach the edges.

   SweetAlert lays its pieces out in its own order, so we make the box a
   column and give each piece an order number. That puts the header bar at
   the very top, where a header belongs. */
.swal2-popup.medqon-popup {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	padding: 0 0 24px;
	width: 420px;
	max-width: 92vw;
	overflow: hidden;
}

/* The icon and the title live together in .swal2-header. Clear its padding so
   the coloured bar can run the full width of the box. */
.swal2-popup.medqon-popup .swal2-header {
	width: 100%;
	padding: 0;
}

/* 1. The header bar across the top, in the brand gradient.

   SweetAlert puts display:flex straight on this element, so text-align cannot
   move the wording - justify-content is what centres it. */
.swal2-popup.medqon-popup .swal2-title {
	order: 1;
	justify-content: center;
	width: 100%;
	margin: 0 0 18px;
	padding: 15px 20px;
	background: var(--medqon-gradient);
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
}

/* No tick / cross / "i" picture. The header bar already says what kind of
   message this is, and the drawn icons did not sit well in this box. */
.swal2-popup.medqon-popup .swal2-icon {
	display: none !important;
}

/* 2, 3. The message, then the button. */
.swal2-popup.medqon-popup .swal2-html-container,
.swal2-popup.medqon-popup #swal2-content {
	order: 2;
}

.swal2-popup.medqon-popup .swal2-actions {
	order: 3;
}

/* The X in the corner, when a message has one, stays out of the bar. */
.swal2-popup.medqon-popup .swal2-close {
	order: 0;
	color: #ffffff;
	position: absolute;
	top: 6px;
	right: 10px;
	z-index: 2;
}


/* The message itself. */
.swal2-popup.medqon-popup .swal2-html-container,
.swal2-popup.medqon-popup #swal2-content {
	margin: 0 24px 4px;
	padding: 0;
	color: var(--medqon-ink);
	font-size: 15px;
	line-height: 1.5;
}

/* The OK button, same purple pill as the sign-in screens. */
.swal2-popup.medqon-popup .swal2-actions {
	margin-top: 20px;
}

.swal2-popup.medqon-popup .swal2-confirm {
	min-width: 120px;
	padding: 10px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--medqon-gradient) !important;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	box-shadow: none;
}

.swal2-popup.medqon-popup .swal2-confirm:focus {
	box-shadow: 0 0 0 3px rgba(92, 4, 196, 0.25);
}

/* The Cancel button on a yes / no question (medqonConfirm). Same shape as the
   purple button, but plain gray so the yes button stands out. */
.swal2-popup.medqon-popup .swal2-cancel {
	min-width: 120px;
	padding: 10px 28px;
	border: 1px solid #ccc;
	border-radius: 999px;
	background: #eee !important;
	color: #000000;
	font-size: 15px;
	font-weight: 600;
	box-shadow: none;
}

/* The thin bar that counts down on messages that close themselves. */
.swal2-popup.medqon-popup .swal2-timer-progress-bar {
	background: var(--medqon-purple);
}