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

/* ---------------------------------------------------------------- Tokens */
body {
	--hp-a1: #ff512f;
	--hp-a2: #dd2476;
	--hp-a3: #6a11cb;
	--hp-a4: #2575fc;
	--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: .28;

	--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, #ff8a5c, #ff5fa2 32%, #b07cff 66%, #62a8ff);

	--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 */
.index > .container.sticky-top {
	top: .75rem;
	padding-top: .75rem;
}

.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 {
	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 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 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);
	}
}

/* ---------------------------------------------------------------- Dashboard quick tour prompt */
#tour-modal {
	background: rgba(15, 18, 30, .45);
}

#tour-modal .mdl-content {
	padding: 1.75rem;
	background: var(--hp-glass-bg-solid);
	border: 1px solid var(--hp-glass-line);
	border-radius: var(--hp-radius);
	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%);
}

#tour-modal .mdl-content p,
body[data-theme-style="dark"] #tour-modal .mdl-content p {
	color: var(--hp-heading) !important;
}

#tour-modal .mdl-content button {
	border-radius: var(--hp-radius-xs);
}

#tour-modal #dont-show-tour {
	background: var(--hp-glass-bg-inner);
	border: 1px solid var(--hp-line);
	color: var(--hp-soft);
}

/* ---------------------------------------------------------------- Add-block modal */
/* Its title + search bar stay pinned while blocks scroll beneath, so the bar must be opaque. */
.modal-content:has(.sticky-blocks-container),
.sticky-blocks-container {
	background-color: var(--hp-solid);
}

.sticky-blocks-container {
	margin: 0 -1rem;
	padding: .25rem 1rem 1px;
}

/* 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 */
.index .navbar-main .btn {
	border-radius: var(--hp-radius-xs);
}