/*
 * ORB Liquid Glass Skin
 * Loaded after custom.css
 */

/* ---------------------------------------------------------------- Tokens */
body {
	--hp-a1: #047857;
	--hp-a2: #0369a1;
	--hp-a3: #4f46e5;
	--hp-a4: #1d4ed8;
	--hp-gradient: linear-gradient(110deg, var(--hp-a1), var(--hp-a2) 32%, var(--hp-a3) 66%, var(--hp-a4));
	--hp-gradient-text: var(--hp-gradient);

	--hp-radius: calc(var(--border-radius) * 3.5);
	--hp-radius-sm: calc(var(--border-radius) * 2.2);
	--hp-radius-xs: var(--border-radius);
	--hp-pill: calc(var(--border-radius) * 99);
	--hp-blur: 22px;

	--hp-glass-bg: rgba(255, 255, 255, .55);
	--hp-glass-bg-strong: rgba(255, 255, 255, .72);
	--hp-glass-bg-inner: rgba(255, 255, 255, .6);
	--hp-glass-bg-solid: rgba(255, 255, 255, .9);
	--hp-glass-line: rgba(255, 255, 255, .7);
	--hp-line: rgba(23, 32, 77, .08);
	--hp-glass-edge: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .25) 38%, rgba(255, 255, 255, .1) 62%, rgba(255, 255, 255, .75));
	--hp-glass-shadow: 0 1px 2px rgba(23, 32, 77, .04), 0 12px 32px -12px rgba(23, 32, 77, .14), 0 32px 64px -32px rgba(23, 32, 77, .2);
	--hp-glass-shadow-sm: 0 1px 2px rgba(23, 32, 77, .04), 0 8px 24px -12px rgba(23, 32, 77, .16);
	--hp-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .3);
	--hp-glow: rgba(255, 255, 255, .6);
	--hp-aurora-opacity: .24;

	--hp-solid: var(--white);
	--hp-frost: rgba(255, 255, 255, .7);
	--hp-heading: var(--gray-900);
	--hp-body: var(--gray-700);
	--hp-soft: var(--gray-600);
	--hp-tint: 13%;
}

body[data-theme-style="dark"] {
	--hp-gradient-text: linear-gradient(110deg, #4ade9f, #5cc8f5 32%, #a5a8ff 66%, #6ea8ff);

	--hp-glass-bg: rgba(255, 255, 255, .045);
	--hp-glass-bg-strong: rgba(255, 255, 255, .075);
	--hp-glass-bg-inner: rgba(255, 255, 255, .05);
	--hp-glass-bg-solid: rgba(24, 26, 32, .92);
	--hp-glass-line: rgba(255, 255, 255, .09);
	--hp-line: rgba(255, 255, 255, .08);
	--hp-glass-edge: linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .02) 62%, rgba(255, 255, 255, .18));
	--hp-glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
	--hp-glass-shadow-sm: 0 14px 34px -18px rgba(0, 0, 0, .7);
	--hp-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .07);
	--hp-glow: rgba(255, 255, 255, .08);
	--hp-aurora-opacity: .24;
	--hp-solid: var(--gray-100);
	--hp-frost: rgba(24, 26, 32, .68);
	--hp-tint: 20%;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	body {
		--hp-glass-bg: color-mix(in srgb, var(--white) 55%, transparent);
		--hp-glass-bg-strong: color-mix(in srgb, var(--white) 72%, transparent);
		--hp-glass-bg-inner: color-mix(in srgb, var(--white) 60%, transparent);
		--hp-glass-bg-solid: color-mix(in srgb, var(--white) 90%, transparent);
		--hp-frost: color-mix(in srgb, var(--white) 68%, transparent);
	}

	body[data-theme-style="dark"] {
		--hp-glass-bg: color-mix(in srgb, var(--gray-400) 11%, transparent);
		--hp-glass-bg-strong: color-mix(in srgb, var(--gray-400) 17%, transparent);
		--hp-glass-bg-inner: color-mix(in srgb, var(--gray-400) 12%, transparent);
		--hp-glass-bg-solid: color-mix(in srgb, var(--gray-100) 92%, transparent);
		--hp-frost: color-mix(in srgb, var(--gray-100) 66%, transparent);
	}
}

/* ---------------------------------------------------------------- Backdrop */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--hp-aurora-opacity);
	background:
		radial-gradient(circle 31vmax at 13vmax 7vmax, var(--hp-a4), transparent),
		radial-gradient(circle 31vmax at calc(100% - 9vmax) 11vmax, var(--hp-a2), transparent),
		radial-gradient(circle 31vmax at 39vmax calc(100% - 1vmax), var(--primary), transparent),
		radial-gradient(circle 31vmax at calc(100% - 15vmax) calc(100% - 5vmax), var(--hp-a3), transparent);
}

@media print {
	body::before {
		display: none;
	}
}

/* ---------------------------------------------------------------- Typography */
h1, h2, h3, .h1, .h2, .h3 {
	letter-spacing: -.02em;
}

/* ---------------------------------------------------------------- Navigation */
body > .sticky-top {
	top: .75rem;
	padding: .75rem 15px 0;
}

body > .sticky-top > .navbar-main {
	max-width: 1110px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid;
}

/* custom.css adds a bottom margin once the page scrolls, which makes the content jump */
.navbar-main.scrolled {
	margin-bottom: 0;
	box-shadow: var(--hp-glass-shadow), var(--hp-glass-inset);
}

.navbar-main,
.app-navbar {
	background: var(--hp-glass-bg-strong) !important;
	border-color: var(--hp-glass-line) !important;
	box-shadow: var(--hp-glass-shadow-sm), var(--hp-glass-inset);
	opacity: 1;
}

.navbar-main::before,
.app-navbar::before,
.app-sidebar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	-webkit-backdrop-filter: blur(var(--hp-blur)) saturate(170%);
	backdrop-filter: blur(var(--hp-blur)) saturate(170%);
}

.navbar-main,
.index-highly-rounded {
	border-radius: var(--hp-radius-sm);
}

.navbar-custom-toggler {
	border-color: var(--hp-line);
	border-radius: var(--hp-radius-xs);
}

/* App sidebar */
.app-sidebar {
	background: var(--hp-glass-bg-strong);
	border-color: var(--hp-glass-line) !important;
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-glass-shadow), var(--hp-glass-inset);
}

.app-sidebar-links > li > a,
.app-sidebar-footer > a {
	border-radius: var(--hp-radius-xs);
}

.app-sidebar-links > li > a:hover,
.app-sidebar-footer > a:hover,
[data-theme-style="dark"] .app-sidebar-links > li > a:hover {
	background: var(--hp-glass-bg-strong);
	box-shadow: var(--hp-glass-inset);
}

.app-sidebar-links > li.active > a:not(.default),
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) {
	box-shadow: 0 3px 8px -5px var(--primary), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.app-sidebar-links > .divider-wrapper > .divider,
.app-sidebar-footer > a {
	border-top-color: var(--hp-line);
}

.app-overlay {
	background: rgba(15, 18, 30, .45);
	opacity: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.navbar-main,
	.app-navbar,
	.app-sidebar {
		background: var(--white) !important;
	}
}

/* Footer */
.footer,
.app-footer {
	background: var(--hp-glass-bg);
	border-color: var(--hp-glass-line);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-glass-shadow-sm), var(--hp-glass-inset);
}

/* ---------------------------------------------------------------- Surfaces */
.card {
	background-color: var(--hp-glass-bg-strong);
	border-color: var(--hp-glass-line);
	border-radius: var(--hp-radius-sm);
	box-shadow: var(--hp-glass-shadow-sm), var(--hp-glass-inset);
}

/* Cards inside cards stay flat so depth reads as one sheet of glass */
.card .card {
	background-color: var(--hp-glass-bg-inner);
	border-color: var(--hp-line);
	box-shadow: none;
}

.card-header,
.card-footer {
	background-color: transparent;
	border-color: var(--hp-line);
}

.card > .card-header:first-child {
	border-radius: var(--hp-radius-sm) var(--hp-radius-sm) 0 0;
}

.card > .card-footer:last-child {
	border-radius: 0 0 var(--hp-radius-sm) var(--hp-radius-sm);
}

.card-img-top {
	border-top-left-radius: calc(var(--hp-radius-sm) - 1px);
	border-top-right-radius: calc(var(--hp-radius-sm) - 1px);
}

.custom-row,
.custom-radio-box input[type="radio"] + div,
.btn-custom,
.list-group-item {
	background: var(--hp-glass-bg-strong);
	border-color: var(--hp-glass-line);
}

.custom-row {
	border-radius: var(--hp-radius-sm);
	box-shadow: var(--hp-glass-shadow-sm), var(--hp-glass-inset);
}

.custom-row-inactive {
	background: var(--hp-glass-bg-inner);
	box-shadow: none;
}

.custom-radio-box input[type="radio"] + div {
	border-radius: var(--hp-radius-xs);
}

.custom-radio-box input[type="radio"]:checked + div {
	background: var(--hp-glass-bg-solid);
	box-shadow: 0 4px 10px -6px var(--primary), var(--hp-glass-inset);
}

.btn-custom {
	border-color: var(--hp-line) !important;
	border-radius: var(--hp-radius-xs);
}

.list-group-item {
	border-color: var(--hp-line);
}

.list-group-item:first-child {
	border-top-left-radius: var(--hp-radius-xs);
	border-top-right-radius: var(--hp-radius-xs);
}

.list-group-item:last-child {
	border-bottom-right-radius: var(--hp-radius-xs);
	border-bottom-left-radius: var(--hp-radius-xs);
}

/* Tables */
.table-custom-container {
	overflow: hidden;
	background: var(--hp-glass-bg-strong);
	border-color: var(--hp-glass-line);
	border-radius: var(--hp-radius-sm);
	box-shadow: var(--hp-glass-shadow-sm), var(--hp-glass-inset);
}

.table-custom-container.table-responsive {
	overflow-x: auto;
}

.table-custom {
	background: transparent;
}

.table-custom thead th,
.table-custom td {
	background: transparent;
	border-color: var(--hp-line);
}

.table-custom thead th {
	font-size: .78rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hp-soft);
}

.table-custom tbody tr {
	transition: background-color .2s ease;
}

.table-custom tbody tr:hover {
	background: var(--hp-glass-bg-inner);
}

/* Menus and popovers: frosted glass. By orb.firy.io */
.dropdown-menu,
.popover,
.select2-dropdown {
	background-color: var(--hp-frost);
	border: 1px solid var(--hp-glass-line);
	box-shadow: var(--hp-glass-shadow), var(--hp-glass-inset);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	backdrop-filter: blur(28px) saturate(180%);
}

/* Inside a modal the modal itself is the backdrop, so a menu there cannot frost the page: keep it solid */
.modal-content .dropdown-menu {
	background-color: var(--hp-solid);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dropdown-menu,
	.popover,
	.select2-dropdown {
		background-color: var(--hp-solid);
	}
}

.modal-content {
	background-color: var(--hp-glass-bg-solid);
	border: 1px solid var(--hp-glass-line);
	box-shadow: var(--hp-glass-shadow), var(--hp-glass-inset);
	-webkit-backdrop-filter: blur(var(--hp-blur)) saturate(170%);
	backdrop-filter: blur(var(--hp-blur)) saturate(170%);
}

.dropdown-menu {
	padding: .4rem;
	border-radius: var(--hp-radius-sm);
}

.dropdown-item {
	border-radius: var(--hp-radius-xs);
}

.dropdown-divider {
	border-top-color: var(--hp-line);
}

.modal-content {
	border-radius: var(--hp-radius);
}

.modal-backdrop.show {
	opacity: .45;
}

.alert {
	border-color: var(--hp-glass-line);
	border-radius: var(--hp-radius-sm);
	box-shadow: var(--hp-glass-inset);
}

/* ---------------------------------------------------------------- Controls */
.btn {
	border-radius: var(--hp-radius-xs);
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-sm {
	border-radius: var(--hp-radius-xs);
}

.btn-lg {
	border-radius: var(--hp-radius-sm);
}

.btn-primary:not(:disabled):not(.disabled) {
	box-shadow: 0 3px 8px -5px var(--primary), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-primary:not(:disabled):not(.disabled):hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 12px -6px var(--primary), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-light,
.btn-outline-secondary,
.btn-outline-primary {
	box-shadow: var(--hp-glass-inset);
}

.btn-light {
	background-color: var(--hp-glass-bg-strong);
	border-color: var(--hp-line);
}

.form-control,
.custom-select,
.input-group-text,
.altum-file-input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	background-color: var(--hp-glass-bg-strong);
	border-color: var(--hp-line);
	border-radius: var(--hp-radius-xs);
}

.form-control-lg,
.custom-select-lg {
	border-radius: var(--hp-radius-sm);
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
	background-color: var(--hp-glass-bg-solid);
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-100);
}

.form-control:disabled,
.form-control[readonly] {
	background-color: var(--hp-glass-bg-inner);
}

.select2-dropdown {
	overflow: hidden;
	border-radius: var(--hp-radius-xs);
}

.nav-pills .nav-link {
	border-radius: var(--hp-radius-xs);
}

.page-link {
	background-color: var(--hp-glass-bg-strong);
	border-color: var(--hp-line);
}

.page-item:first-child .page-link {
	border-top-left-radius: var(--hp-radius-xs);
	border-bottom-left-radius: var(--hp-radius-xs);
}

.page-item:last-child .page-link {
	border-top-right-radius: var(--hp-radius-xs);
	border-bottom-right-radius: var(--hp-radius-xs);
}

.progress {
	background-color: var(--hp-glass-bg-inner);
	border-radius: var(--hp-pill);
	box-shadow: inset 0 1px 2px rgba(23, 32, 77, .08);
}

.progress-bar {
	border-radius: var(--hp-pill);
}

.btn-group-custom {
	padding: .4rem 0;
	background: var(--hp-glass-bg-strong);
	border-color: var(--hp-glass-line);
	border-radius: var(--hp-pill);
	box-shadow: var(--hp-glass-inset);
}

.btn-group-custom .btn {
	margin: 0 .4rem;
	background: transparent;
	border-radius: var(--hp-pill) !important;
	font-weight: 600;
}

.btn-group-custom .btn.active {
	background: var(--dark);
	color: var(--white);
}

/* ---------------------------------------------------------------- Pricing */
.pricing-plan {
	overflow: hidden;
	background: var(--hp-glass-bg-strong);
	border-color: var(--hp-glass-line);
	border-radius: var(--hp-radius) !important;
	box-shadow: var(--hp-glass-shadow), var(--hp-glass-inset);
	transition: transform .3s ease;
}

.pricing-plan:hover {
	transform: translateY(-6px);
}

.pricing-header,
.pricing-body {
	background: transparent;
	border-radius: 0 !important;
}

.pricing-header,
[data-theme-style="dark"] .pricing-header {
	border-bottom-color: var(--hp-line);
}

.pricing-name {
	border-radius: var(--hp-pill);
}

.pricing-price-amount {
	letter-spacing: -.03em;
	color: var(--hp-heading);
}

.pricing-details {
	color: var(--hp-soft);
}

.pricing-body .btn {
	border-radius: var(--hp-radius-sm);
	font-weight: 600;
}

/* ---------------------------------------------------------------- Sign-in pages (basic wrapper) */
main > .container > .d-flex > [class*="col-"] > .card {
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-glass-shadow), var(--hp-glass-inset);
}

/* ---------------------------------------------------------------- Motion preferences */
@media (prefers-reduced-motion: reduce) {
	.btn,
	.pricing-plan,
	.table-custom tbody tr {
		transition: none;
	}

	.btn-primary:not(:disabled):not(.disabled):hover,
	.pricing-plan:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------- Small screens */
/* The sidebar slides over the page here, so it needs to be near-opaque to stay readable */
@media (max-width: 991.98px) {
	.app-sidebar {
		background: var(--hp-glass-bg-solid);
	}
}

/* Light buttons inside modals sit on a near-solid surface, so they need their own tint to stay visible */
.modal-content .btn-light {
	background-color: var(--gray-100);
	background-color: color-mix(in srgb, var(--gray-300) 45%, transparent);
}

.modal-content .btn-light:hover {
	background-color: var(--gray-200);
	background-color: color-mix(in srgb, var(--gray-300) 75%, transparent);
}

/* custom.css hard-codes .35rem on navbar buttons; keep them on the theme radius instead */
.navbar-main .btn {
	border-radius: var(--hp-radius-xs);
}

/* ---------------------------------------------------------------- ORB specifics */
.app-sidebar-title a,
[data-theme-style="dark"] .app-sidebar-title a {
	color: var(--hp-heading);
}

.app-sidebar-links > li {
	padding: .2rem 1rem;
}

.app-sidebar-links > li > a,
[data-theme-style="dark"] .app-sidebar-links > li > a {
	background: transparent;
	color: var(--gray-600);
}

.app-sidebar-links > li > a:hover,
[data-theme-style="dark"] .app-sidebar-links > li > a:hover {
	color: var(--hp-heading);
}

.app-sidebar-links > li.active > a:not(.default),
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) {
	background: var(--primary);
	color: #fff;
}

.app-sidebar-footer-text,
[data-theme-style="dark"] .app-sidebar-footer-text {
	color: var(--gray-700);
}

[data-theme-style="light"] .app-sidebar * {
	scrollbar-color: var(--gray-300) transparent !important;
}

[data-theme-style="light"] .app-sidebar *::-webkit-scrollbar-thumb {
	background: var(--gray-300);
}

[data-theme-style="light"] .app-sidebar *::-webkit-scrollbar,
[data-theme-style="light"] .app-sidebar *::-webkit-scrollbar-track {
	background: transparent;
}

/* Plans are regular cards with an accent line on top */
.pricing-card {
	overflow: hidden;
	border-top-color: var(--primary);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-glass-shadow), var(--hp-glass-inset);
	transition: transform .3s ease;
}

.pricing-card:hover {
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.pricing-card {
		transition: none;
	}

	.pricing-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------- Readable primary colour */
body {
	--hp-primary-ink: var(--primary-700);
}

body[data-theme-style="dark"] {
	--hp-primary-ink: var(--primary);
}

:where([data-theme-style="light"]) a {
	color: var(--hp-primary-ink);
}

:where([data-theme-style="light"]) a:hover {
	color: var(--primary-800);
}

[data-theme-style="light"] .text-primary {
	color: var(--hp-primary-ink) !important;
}

[data-theme-style="light"] .btn-custom.active,
[data-theme-style="light"] .btn-link,
[data-theme-style="light"] .btn-outline-primary:not(:hover):not(:active):not(.active) {
	color: var(--hp-primary-ink);
}

[data-theme-style="light"] .btn-outline-primary {
	border-color: var(--hp-primary-ink);
}

[data-theme-style="light"] .btn-primary,
[data-theme-style="light"] .btn-outline-primary:hover,
[data-theme-style="light"] .btn-outline-primary:not(:disabled):not(.disabled):active,
[data-theme-style="light"] .btn-outline-primary.active,
[data-theme-style="light"] .dropdown-item.active,
[data-theme-style="light"] .dropdown-item:active,
[data-theme-style="light"] .nav-pills .nav-link.active,
[data-theme-style="light"] .page-item.active .page-link,
[data-theme-style="light"] .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--hp-primary-ink);
	border-color: var(--hp-primary-ink);
	color: #fff;
}

[data-theme-style="light"] .btn-primary:hover,
[data-theme-style="light"] .btn-primary:focus,
[data-theme-style="light"] .btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--primary-800);
	border-color: var(--primary-800);
}

/* Active sidebar item: deep emerald with white text in light mode, bright emerald with dark text in dark mode */
.app-sidebar-links > li.active > a:not(.default) {
	background: var(--hp-primary-ink);
	color: #fff;
}

[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) {
	background: var(--primary);
	color: var(--white);
}