/* =====================================================================================
   App layer on top of the template (admina.css) and Bootstrap 5.
   1. fonts + variable aliases  2. Bootstrap 4 leftovers  3. shell (top bar, auth, brand)
   4. ported application components  5. generated utilities (see the end of the file)
   ===================================================================================== */

/* ---------- 1. fonts + variables ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --app-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-radius: .5rem;

  /* names used by the application views (they were written for the previous theme) */
  --gray-50: var(--neutral-50);
  --gray-100: var(--neutral-100);
  --gray-200: var(--neutral-200);
  --gray-300: var(--neutral-300);
  --gray-400: var(--neutral-400);
  --gray-500: var(--neutral-500);
  --gray-600: var(--neutral-600);
  --gray-700: var(--neutral-700);
  --gray-800: var(--neutral-800);
  --gray-900: var(--neutral-900);
  --gray: var(--neutral-500);
  --primary: var(--primary-600);
  --body-bg: var(--bg-color);
  --border-radius: var(--app-radius);
  --input-font-size: 1rem;
  --input-padding-x: .75rem;
  --input-padding-y: .5rem;
  --dark: var(--dark-2);
  --light: var(--neutral-100);

  /* Bootstrap 5 follows the palette of the template */
  --bs-primary: var(--primary-600);
  --bs-primary-rgb: 79, 70, 229;
  --bs-body-font-family: var(--app-font);
  --bs-link-color: var(--primary-600);
  --bs-link-hover-color: var(--primary-700);
  --bs-border-color: var(--neutral-200);
  --bs-border-radius: var(--app-radius);
}

body { font-family: var(--app-font); }

/* ---------- 2. Bootstrap 4 leftovers used by the views ---------- */
.form-group { margin-bottom: 1rem; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }
.form-row { display: flex; flex-wrap: wrap; margin-inline: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-inline: 5px; }
.input-group-prepend, .input-group-append { display: flex; }
.input-group > .input-group-prepend > .btn, .input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append > .input-group-text { height: 100%; }
.input-group > .input-group-prepend:not(:last-child) > *, .input-group > .input-group-append:not(:last-child) > * { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append:not(:first-child) > *, .input-group > .input-group-prepend:not(:first-child) > * { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-inline-start: -1px; }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.m-n1 { margin: -.25rem !important; } .m-n2 { margin: -.5rem !important; } .m-n3 { margin: -1rem !important; }
.mx-n1 { margin-inline: -.25rem !important; } .mx-n2 { margin-inline: -.5rem !important; } .mx-n3 { margin-inline: -1rem !important; }
.list-style-none { list-style: none; padding-left: 0; }
.font-size-small { font-size: .875rem; }
.font-weight-500 { font-weight: 500; }
.cursor-pointer { cursor: pointer; }
.w-fit-content { width: fit-content; }
.appearance-none { appearance: none; }
.rounded-2x { border-radius: 1rem !important; }
.rounded-3x { border-radius: 1.5rem !important; }
.text-gradient-primary { background: linear-gradient(135deg, var(--primary-500), var(--primary-800)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dropdown-toggle-simple::after { display: none; }
.form-control-range { width: 100%; }
.custom-file, .custom-file-input { position: relative; }
.btn-group-toggle > .btn input[type="radio"], .btn-group-toggle > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }
.svg-sm { width: 1rem; height: 1rem; }
.btn-custom { border-radius: var(--app-radius); }

/* switches / checks written for the previous theme */
.form-check.form-group { padding-left: 1.5em; }
.form-check.form-switch.form-group { padding-left: 2.5em; }
.custom-radio-box { display: block; cursor: pointer; }
.custom-radio-box .form-check-input, .custom-radio-box input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

/* labels next to inputs inside a form-check: keep them unbold */
.form-check-label { font-weight: 400; }

/* ---------- 3. shell ---------- */
.brand-logo { max-height: 2.25rem; width: auto; }
.brand-title { font-weight: 700; font-size: 1.25rem; color: var(--text-primary-light); }
.brand-initial { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-600); color: #fff; font-weight: 700; font-size: 1.15rem; }
.twin-rail__brand { text-decoration: none; }
.twin-panel__logo { font-weight: 700; font-size: 1.25rem; color: var(--text-primary-light); text-decoration: none; }

.topbar-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--white); color: var(--text-secondary-light); box-shadow: var(--shadow-8); }
.topbar-btn:hover { background: var(--primary-50); color: var(--primary-600); }
.topbar-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.navbar-header { background: var(--white); }

.site-public .site-main { min-height: 60vh; }
.site-nav { position: sticky; top: 0; z-index: 1030; }

.auth-page { background: var(--bg-color); }
.auth-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 480px; }
.auth-card-body { padding: 2rem; box-shadow: var(--shadow-7); }
.auth-logo { max-height: 3rem; width: auto; }

.upgrade-card { background: var(--primary-50); border-radius: 16px; padding: 1rem; text-align: center; }
.upgrade-card__art { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-600); color: #fff; margin-bottom: .5rem; }
.upgrade-card__text { font-size: .8125rem; margin: 0 0 .75rem; color: var(--neutral-600); }
.upgrade-btn { display: inline-block; padding: .4rem 1rem; border-radius: 8px; background: var(--primary-600); color: #fff; font-weight: 600; text-decoration: none; }
.upgrade-btn:hover { color: #fff; background: var(--primary-700); }

.dashboard-main-body > .container, .dashboard-main-body > .container-fluid { max-width: 100%; padding-inline: 0; }
.d-footer { background: var(--white); }

/* content spacing helpers used all over the views */
.altum-animate { animation-duration: .35s; animation-fill-mode: both; }
.altum-animate-fill-none { animation-fill-mode: none; }
.altum-animate-fade-in { animation-name: app-fade-in; }
@keyframes app-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- headings: the template ships huge landing-page sizes, the application UI needs regular ones ---------- */
.dashboard-main-body h1, .dashboard-main-body .h1, .auth-card h1, .auth-card .h1 { font-size: 1.75rem !important; }
.dashboard-main-body h2, .dashboard-main-body .h2, .auth-card h2, .auth-card .h2 { font-size: 1.5rem !important; }
.dashboard-main-body h3, .dashboard-main-body .h3 { font-size: 1.3rem !important; }
.dashboard-main-body h4, .dashboard-main-body .h4 { font-size: 1.15rem !important; }
.dashboard-main-body h5, .dashboard-main-body .h5 { font-size: 1rem !important; }
.dashboard-main-body h6, .dashboard-main-body .h6 { font-size: .9rem !important; }
.dashboard-main-body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6), .auth-card :is(h1, h2, h3, h4, h5, h6) { color: var(--text-primary-light) !important; font-weight: 600 !important; line-height: 1.3 !important; }
.site-main :is(h2, .h2) { font-size: 2rem !important; }
.site-main :is(h3, .h3) { font-size: 1.5rem !important; }
.site-main :is(h4, .h4) { font-size: 1.25rem !important; }
.site-main :is(h5, .h5) { font-size: 1.05rem !important; }
.site-main :is(h6, .h6) { font-size: .95rem !important; }

/* cards, inputs and tables follow the template palette in both modes */
.card { --bs-card-bg: var(--white); --bs-card-border-color: var(--neutral-200); --bs-card-cap-bg: transparent; border-radius: var(--app-radius, .5rem); }
.card-header.bg-white, .card-footer.bg-white { background-color: var(--white) !important; }
.bg-white { background-color: var(--white) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-secondary-light); }
.dropdown-menu { --bs-dropdown-bg: var(--white); --bs-dropdown-link-color: var(--neutral-700); --bs-dropdown-border-color: var(--neutral-200); }
.modal-content { --bs-modal-bg: var(--white); }
.text-muted { color: var(--neutral-500) !important; }

/* tables and small controls stay readable in both modes */
.table thead th, .table-custom thead th, .table-custom th { color: var(--text-secondary-light) !important; }
.table tbody td, .table-custom td { color: var(--text-primary-light); }
.table-custom td a:not(.btn), .table td a:not(.btn) { color: inherit; }
[data-theme="dark"] .btn-light, [data-theme="dark"] .btn-gray-200, [data-theme="dark"] .btn-gray-300 { background: var(--dark-3); border-color: var(--dark-3); color: var(--base); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color: var(--base); }

/* ---------- ported from custom.css ---------- */
.filters-dropdown {
	width: 18rem;
	max-height: 30rem;
	overflow-y: auto;
}
.custom-breadcrumbs {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.custom-breadcrumbs > li {
	margin-right: .5rem;
}
.custom-breadcrumbs > li > a {
	color: var(--gray);
}
.custom-breadcrumbs > li > svg {
	color: var(--gray-400);
	margin-left: .5rem;
}
.custom-breadcrumbs > li.active {
}
.icon-favicon {
	width: .95rem;
	height: auto;
}
.icon-favicon-small {
	width: .75rem;
	height: auto;
}
.chart-container {
	position: relative;
	margin: auto;
	height: 275px;
	width: 100%;
}
@media print {
  .chart-container canvas {
		min-height: 100%;
		max-width: 100%;
		max-height: 100%;
		height: auto!important;
		width: auto!important;
	}
}
.user-avatar {
	border-radius: 50%;
	max-width: 80px;
	max-height: 80px;
}
.container-disabled {
	pointer-events: none;
	opacity: .5;
}
.container-disabled-simple {
	pointer-events: none;
}
.custom-row {
	border-radius: 16px;
	padding: 1.5rem;
	position: relative;
	border: 1px solid var(--gray-100);
	background: var(--white);
}
[data-theme-style="dark"] .custom-row {
	background: rgba(26, 26, 46, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.custom-row-inactive {
	background: var(--gray-100);
}
.table-image-wrapper {
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	max-width: 2.5rem;
	max-height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-100);
}
.table-custom-container {
	border-radius: var(--border-radius);
	border: 1px solid var(--gray-100);
}
.table-custom {
	margin-bottom: 0;
}
.table-custom thead th {
	border-top: 0;
	border-bottom: 0;
	background: var(--white);
	color: var(--gray-900)
}
.table-custom th {
	padding: 1.25rem 1rem;
}
.table-custom td {
	padding: 1.55rem 1rem;
	background: var(--white);
	vertical-align: middle;
	border-color: var(--gray-100);
}
.pricing-plan {
	border: 1px solid var(--gray-100);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.pricing-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.2rem 2.2rem 0 2.2rem;
	background: var(--white);
	border-bottom: 1px solid var(--gray-100);
	border-radius: var(--border-radius);
}
[data-theme-style="dark"] .pricing-header {
	border-color: var(--gray-100);
}
.pricing-name {
	background: var(--primary-200);
	padding: .15rem 1.25rem;
	color: var(--primary-600);
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: var(--border-radius);
}
.pricing-price {
	margin: 1rem 0;
}
.pricing-price-amount {
	font-size: 3.3rem;
	font-weight: bold;
}
.pricing-price-currency {
	font-size: .9rem;
	color: var(--gray);
}
.pricing-details {
	text-align: center;
	font-size: .85rem;
	color: var(--primary-800);
	margin-bottom: 1.5rem;
}
.pricing-body {
	padding: 0 2.2rem 2.2rem 2.2rem;
	background: var(--white);
	height: 100%;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}
.pricing-features {
	margin: 2rem 0;
	list-style: none;
	padding: 0;
}
.pricing-features li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;
}
.custom-radio-box {
	cursor: pointer;
}
.custom-radio-box .custom-radio-box-main-text {
	font-size: 1.15rem;
	font-weight: bold;
}
.custom-radio-box .custom-radio-box-main-icon {
	font-size: 1.25rem;
}
.custom-radio-box input[type="radio"] + div {
	transition: all .3s ease-in-out;
	border: 1px solid var(--gray-100);
	background: var(--white);
}
.custom-radio-box input[type="radio"]:checked + div {
	border: 1px solid var(--primary);
}
.custom-radio-box input[type="radio"]:hover + div {
	border: 1px solid var(--primary);
}
.qr-code {
	width: 100rem;
}
.round-circle-md {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
.round-circle-lg {
	width: 4.5rem;
	height: 4.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
.invoice-table th {
	border-top: 0 !important;
}
.invoice-table td {
	vertical-align: baseline !important;
}
@keyframes fadeIn {
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
.blog-post-image {
	max-height: 20rem;
	object-fit: cover;
}
.blog-post-image-small {
	height: 13rem;
	max-height: 13rem;
	object-fit: cover;
}
.blog-post-content {
	line-height: 1.75;
	word-break: break-word;
}
.blog-post-content p {
	margin-bottom: 1.5rem;
}
.ql-code-block {
	background-color: var(--gray-200);
	color: var(--gray-600);
	padding: 1rem;
	border-radius: var(--border-radius);
	overflow-x: auto;
	font-family: 'Courier New', Courier, monospace;
	white-space: pre;
	font-size: .9rem;
	line-height: 1.5;
}
.ql-content p {
	margin-bottom: 0 !important;
}
.altum-file-input {
	padding: 1rem;
	background: var(--gray-100);
	border: 1px solid var(--gray-100);
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: .9rem;
}
.altum-file-input:hover {
	border-color: var(--gray-300);
}
.altum-file-input::file-selector-button {
	border: 0;
	padding: .4rem .75rem;
	border-radius: var(--border-radius);
	background-color: var(--white);
	cursor: pointer;
	font-size: .9rem;
	margin-right: 1rem;
}
.altum-file-input-preview {
	max-width: 100%;
	max-height: 68px;
	min-height: 68px;
	object-fit: cover;
}
.altum-file-input-preview {
	max-width: 100%;
	max-height: 68px;
	min-height: 68px;
	object-fit: cover;
}
.icon-zoom-animation svg {
	transition: transform .15s;
}
.icon-zoom-animation:hover svg {
	transform: scale(1.1);
}
.zoom-animation {
	transition: transform .15s;
}
.zoom-animation:hover {
	transform: scale(1.05);
}
.zoom-animation:active {
	transform: scale(.95);
}
.zoom-animation-subtle {
	transition: transform .3s;
}
.zoom-animation-subtle:hover {
	transform: scale(1.025);
}
.up-animation {
	transition: transform .3s;
}
.up-animation:hover {
	transform: translateY(-10px);
}
.pcr-button {
	border: 1px solid white !important;
	outline: 1px solid var(--gray-300) !important;
	height: calc(var(--input-padding-y) + var(--input-padding-x) + var(--input-font-size) + calc(var(--input-font-size) / 2.75)) !important;
	border-radius: var(--border-radius) !important;
	width: 100% !important;
}
.pcr-button::before, .pcr-button::after {
	border-radius: var(--border-radius) !important;
}
.signature-avatar {
	width: 50px;
	height: 50px;
	object-fit: cover;
	background: var(--primary-100);
}
.loading-overlay {
	padding: 1.25rem;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--white);
	z-index: 100;
	opacity: 0.8;
}
[data-theme-style="dark"] .loading-overlay {
	background: var(--gray-50);
}
.shiki {
	overflow: auto;
	border-radius: var(--border-radius);
	padding: 1.5rem;
	font-size: .9rem;
	line-height: 1.5rem;
}
.shiki code {
	background: initial !important;
}
.fa-stack-small {
	font-size: 0.65rem;
	vertical-align: middle;
}
.internal-notification-icon {
	animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px var(--danger);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}
}
.bg-gradient {
	animation: bg-gradient-animation 3s ease infinite alternate !important;
	background: linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);
	background-size: 300% 300%;
}
.team-user-avatar {
	width: 45px;
	height: 45px;
}
.team-delegate-access-wrapper {
	margin: .75rem;
	border-radius: .5rem;
}
@media (min-width: 992px) {
  .team-delegate-access-wrapper {
		border-radius: 5rem;
	}
}
.announcement-wrapper {
	margin: .75rem;
	border-radius: .5rem;
	opacity: 0;
	transition: opacity .3s ease-in;
	animation: ac-fade-in-down .3s ease-in .6s forwards;
}
@media (min-width: 992px) {
  .announcement-wrapper {
		border-radius: 5rem;
	}
}
@keyframes ac-fade-in-down {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.pwa-wrapper {
	position: fixed;
	bottom: 0;
	width: calc(100% - 1.5rem);
	z-index: 1000;
	background: hsla(0, 0%, 90%, 50%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
[data-theme-style="dark"] .pwa-wrapper {
	background: hsla(0, 0%, 22%, 50%);
}
.tool-icon {
	min-width: 2.75rem;
	max-height: 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
}
.tool-icon-wrapper {
	padding: 0 1.25rem;
}
.rating-star {
	cursor: pointer;
}
.rating-star svg {
	color: #ffc107;
	transition: color .15s;
}
.rating-star:hover svg,
.rating-star:hover ~ .rating-star svg {
	color: #ff8800 !important;
}
.rating-star-chosen svg,
.rating-star-chosen ~ .rating-star svg {
	color: #dd6200;
}

/* ---------- ported from admin-custom.css ---------- */
.chart-container {
	position: relative;
	margin: auto;
	height: 275px;
	width: 100%;
}
@media print {
  .chart-container canvas {
		min-height: 100%;
		max-width: 100%;
		max-height: 100%;
		height: auto!important;
		width: auto!important;
	}
}
.user-avatar {
    min-width: 45px;
    min-height: 45px;
    width: 45px;
    height: 45px;
    object-fit: cover;
    background: var(--primary-100);
}
.plugin-avatar {
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    font-size: 1.25rem;
}
.icon-favicon {
	width: .95rem;
	height: auto;
}
.icon-favicon-small {
	width: .75rem;
	height: auto;
}
.table-custom-container {
    border-radius: var(--border-radius);
    border: 0;
}
.table-custom {
    margin-bottom: 0;
    background: var(--white);
}
.table-custom thead th {
    border-top: 0;
    border-bottom: 0;
    color: var(--gray);
}
.table-custom th {
    padding: 1.25rem 1.25rem;
    font-size: .9rem;
}
[data-theme-style="dark"] .table-custom thead th {
    color: var(--gray-800)
}
.table-custom tbody tr {
    border-top: 1px solid var(--gray-100);
}
.table-custom td {
    padding: 1.25rem 1.25rem;
    vertical-align: middle;
    border-color: var(--gray-100);
}
.table-custom tbody tr td {
    border-top: 0;
}
[data-theme-style="dark"] .table-custom tbody tr td {
}
.table-custom tbody tr {
    transition: all .3s ease-in-out;
}
.table-custom tbody tr:hover td {
}
.container-disabled {
    pointer-events: none;
    opacity: .5;
}
.round-circle-md {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.round-circle-lg {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.invoice-table th {
    border-top: 0 !important;
}
.invoice-table td {
    vertical-align: baseline !important;
}
.filters-dropdown {
    width: 18rem;
    max-height: 30rem;
    overflow-y: auto;
}
.custom-breadcrumbs {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.custom-breadcrumbs > li {
    margin-right: .5rem;
}
.custom-breadcrumbs > li > a {
    color: var(--gray);
}
.custom-breadcrumbs > li > svg {
    color: var(--gray-400);
    margin-left: .5rem;
}
.custom-breadcrumbs > li.active {
}
@-webkit-keyframes fadeIn {
    0% {
        opacity:0
    }
    to {
        opacity:1
    }
}
@keyframes fadeIn {
    0% {
        opacity:0
    }
    to {
        opacity:1
    }
}
.altum-file-input {
    padding: 1rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: .9rem;
}
[data-theme-style="dark"] .altum-file-input {
    background: var(--gray-200);
    border: 1px solid var(--gray-300);
}
.altum-file-input:hover {
    border-color: var(--gray-300);
}
[data-theme-style="dark"] .altum-file-input:hover {
    border-color: var(--gray-400);
}
.altum-file-input::file-selector-button {
    border: 0;
    padding: .4rem .75rem;
    border-radius: var(--border-radius);
    background-color: var(--white);
    cursor: pointer;
    font-size: .9rem;
    margin-right: 1rem;
}
.altum-file-input-preview {
    max-width: 100%;
    max-height: 68px;
    min-height: 68px;
    object-fit: cover;
}
.pcr-button {
    border: 1px solid white !important;
    outline: 1px solid var(--gray-300) !important;
    height: calc(var(--input-padding-y) + var(--input-padding-x) + var(--input-font-size) + calc(var(--input-font-size) / 2.75)) !important;
    border-radius: var(--border-radius) !important;
    width: 100% !important;
}
.pcr-button::before, .pcr-button::after {
    border-radius: var(--border-radius) !important;
}
.ql-code-block {
    background-color: var(--gray-200);
    color: var(--gray-600);
    padding: 1rem;
    border-radius: var(--border-radius);
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre;
    font-size: .9rem;
    line-height: 1.5;
}
.shiki {
    overflow: auto;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    font-size: .9rem;
    line-height: 1.5rem;
}
.shiki code {
    background: initial !important;
}
.zoom-animation-subtle {
    transition: transform .3s;
}
.zoom-animation-subtle:hover {
    transform: scale(1.025);
}
.custom-radio-box {
    cursor: pointer;
}
.custom-radio-box .custom-radio-box-main-text {
    font-size: 1.15rem;
    font-weight: bold;
}
.custom-radio-box .custom-radio-box-main-icon {
    font-size: 1.25rem;
}
.custom-radio-box input[type="radio"] + div {
    transition: all .3s ease-in-out;
    border: 2px solid var(--gray-200);
    background: var(--white);
}
.custom-radio-box input[type="radio"]:checked + div {
    border: 2px solid var(--primary);
}
.custom-radio-box input[type="radio"]:hover + div {
    border: 2px solid var(--primary);
}
.team-user-avatar {
    width: 45px;
    height: 45px;
}

/* ---------- generated palette utilities ---------- */
.bg-gray-50{background-color:var(--neutral-50)!important}.text-gray-50{color:var(--neutral-50)!important}.border-gray-50{border-color:var(--neutral-50)!important}
.bg-primary-50{background-color:var(--primary-50)!important}.text-primary-50{color:var(--primary-50)!important}.border-primary-50{border-color:var(--primary-50)!important}
.btn-gray-50{background:var(--neutral-50);border-color:var(--neutral-50);color:var(--neutral-900)}.btn-gray-50:hover{background:var(--neutral-150);border-color:var(--neutral-150);color:var(--neutral-900)}
.btn-outline-gray-50{background:transparent;border:1px solid var(--neutral-50);color:var(--neutral-700)}.btn-outline-gray-50:hover{background:var(--neutral-50);color:var(--neutral-900)}
.bg-gray-100{background-color:var(--neutral-100)!important}.text-gray-100{color:var(--neutral-100)!important}.border-gray-100{border-color:var(--neutral-100)!important}
.bg-primary-100{background-color:var(--primary-100)!important}.text-primary-100{color:var(--primary-100)!important}.border-primary-100{border-color:var(--primary-100)!important}
.btn-gray-100{background:var(--neutral-100);border-color:var(--neutral-100);color:var(--neutral-900)}.btn-gray-100:hover{background:var(--neutral-200);border-color:var(--neutral-200);color:var(--neutral-900)}
.btn-outline-gray-100{background:transparent;border:1px solid var(--neutral-100);color:var(--neutral-700)}.btn-outline-gray-100:hover{background:var(--neutral-100);color:var(--neutral-900)}
.bg-gray-200{background-color:var(--neutral-200)!important}.text-gray-200{color:var(--neutral-200)!important}.border-gray-200{border-color:var(--neutral-200)!important}
.bg-primary-200{background-color:var(--primary-200)!important}.text-primary-200{color:var(--primary-200)!important}.border-primary-200{border-color:var(--primary-200)!important}
.btn-gray-200{background:var(--neutral-200);border-color:var(--neutral-200);color:var(--neutral-900)}.btn-gray-200:hover{background:var(--neutral-300);border-color:var(--neutral-300);color:var(--neutral-900)}
.btn-outline-gray-200{background:transparent;border:1px solid var(--neutral-200);color:var(--neutral-700)}.btn-outline-gray-200:hover{background:var(--neutral-200);color:var(--neutral-900)}
.bg-gray-300{background-color:var(--neutral-300)!important}.text-gray-300{color:var(--neutral-300)!important}.border-gray-300{border-color:var(--neutral-300)!important}
.bg-primary-300{background-color:var(--primary-300)!important}.text-primary-300{color:var(--primary-300)!important}.border-primary-300{border-color:var(--primary-300)!important}
.btn-gray-300{background:var(--neutral-300);border-color:var(--neutral-300);color:var(--neutral-900)}.btn-gray-300:hover{background:var(--neutral-400);border-color:var(--neutral-400);color:var(--neutral-900)}
.btn-outline-gray-300{background:transparent;border:1px solid var(--neutral-300);color:var(--neutral-700)}.btn-outline-gray-300:hover{background:var(--neutral-300);color:var(--neutral-900)}
.bg-gray-400{background-color:var(--neutral-400)!important}.text-gray-400{color:var(--neutral-400)!important}.border-gray-400{border-color:var(--neutral-400)!important}
.bg-primary-400{background-color:var(--primary-400)!important}.text-primary-400{color:var(--primary-400)!important}.border-primary-400{border-color:var(--primary-400)!important}
.btn-gray-400{background:var(--neutral-400);border-color:var(--neutral-400);color:var(--neutral-900)}.btn-gray-400:hover{background:var(--neutral-500);border-color:var(--neutral-500);color:var(--neutral-900)}
.btn-outline-gray-400{background:transparent;border:1px solid var(--neutral-400);color:var(--neutral-700)}.btn-outline-gray-400:hover{background:var(--neutral-400);color:var(--neutral-900)}
.bg-gray-500{background-color:var(--neutral-500)!important}.text-gray-500{color:var(--neutral-500)!important}.border-gray-500{border-color:var(--neutral-500)!important}
.bg-primary-500{background-color:var(--primary-500)!important}.text-primary-500{color:var(--primary-500)!important}.border-primary-500{border-color:var(--primary-500)!important}
.btn-gray-500{background:var(--neutral-500);border-color:var(--neutral-500);color:var(--neutral-900)}.btn-gray-500:hover{background:var(--neutral-600);border-color:var(--neutral-600);color:var(--neutral-900)}
.btn-outline-gray-500{background:transparent;border:1px solid var(--neutral-500);color:var(--neutral-700)}.btn-outline-gray-500:hover{background:var(--neutral-500);color:var(--neutral-900)}
.bg-gray-600{background-color:var(--neutral-600)!important}.text-gray-600{color:var(--neutral-600)!important}.border-gray-600{border-color:var(--neutral-600)!important}
.bg-primary-600{background-color:var(--primary-600)!important}.text-primary-600{color:var(--primary-600)!important}.border-primary-600{border-color:var(--primary-600)!important}
.btn-gray-600{background:var(--neutral-600);border-color:var(--neutral-600);color:var(--neutral-900)}.btn-gray-600:hover{background:var(--neutral-700);border-color:var(--neutral-700);color:var(--neutral-900)}
.btn-outline-gray-600{background:transparent;border:1px solid var(--neutral-600);color:var(--neutral-700)}.btn-outline-gray-600:hover{background:var(--neutral-600);color:var(--neutral-900)}
.bg-gray-700{background-color:var(--neutral-700)!important}.text-gray-700{color:var(--neutral-700)!important}.border-gray-700{border-color:var(--neutral-700)!important}
.bg-primary-700{background-color:var(--primary-700)!important}.text-primary-700{color:var(--primary-700)!important}.border-primary-700{border-color:var(--primary-700)!important}
.btn-gray-700{background:var(--neutral-700);border-color:var(--neutral-700);color:var(--neutral-900)}.btn-gray-700:hover{background:var(--neutral-800);border-color:var(--neutral-800);color:var(--neutral-900)}
.btn-outline-gray-700{background:transparent;border:1px solid var(--neutral-700);color:var(--neutral-700)}.btn-outline-gray-700:hover{background:var(--neutral-700);color:var(--neutral-900)}
.bg-gray-800{background-color:var(--neutral-800)!important}.text-gray-800{color:var(--neutral-800)!important}.border-gray-800{border-color:var(--neutral-800)!important}
.bg-primary-800{background-color:var(--primary-800)!important}.text-primary-800{color:var(--primary-800)!important}.border-primary-800{border-color:var(--primary-800)!important}
.btn-gray-800{background:var(--neutral-800);border-color:var(--neutral-800);color:var(--neutral-900)}.btn-gray-800:hover{background:var(--neutral-900);border-color:var(--neutral-900);color:var(--neutral-900)}
.btn-outline-gray-800{background:transparent;border:1px solid var(--neutral-800);color:var(--neutral-700)}.btn-outline-gray-800:hover{background:var(--neutral-800);color:var(--neutral-900)}
.bg-gray-900{background-color:var(--neutral-900)!important}.text-gray-900{color:var(--neutral-900)!important}.border-gray-900{border-color:var(--neutral-900)!important}
.bg-primary-900{background-color:var(--primary-900)!important}.text-primary-900{color:var(--primary-900)!important}.border-primary-900{border-color:var(--primary-900)!important}
.btn-gray-900{background:var(--neutral-900);border-color:var(--neutral-900);color:var(--neutral-900)}.btn-gray-900:hover{background:var(--neutral-900);border-color:var(--neutral-900);color:var(--neutral-900)}
.btn-outline-gray-900{background:transparent;border:1px solid var(--neutral-900);color:var(--neutral-700)}.btn-outline-gray-900:hover{background:var(--neutral-900);color:var(--neutral-900)}
.text-blue-500{color:#3b82f6!important}
.border-gray-50{border-color:var(--neutral-50)!important}

/* ---------- account area (profile hero + side navigation) ---------- */
.account-cover { height: 84px; background: linear-gradient(135deg, var(--primary-500), var(--primary-800)); }
.account-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-top: -44px; border: 4px solid var(--white); background: var(--white); }
.account-nav { overflow-x: auto; scrollbar-width: thin; }
.account-nav-link { display: flex; align-items: center; gap: .65rem; padding: .6rem .85rem; border-radius: 10px; color: var(--text-secondary-light); text-decoration: none; white-space: nowrap; font-weight: 500; font-size: .9rem; }
.account-nav-link i { width: 1.1rem; text-align: center; }
.account-nav-link:hover { background: var(--primary-50); color: var(--primary-600); }
.account-nav-link.active { background: var(--primary-50); color: var(--primary-600); font-weight: 600; }
.account-nav-danger { color: var(--danger-600); }
.account-nav-danger:hover, .account-nav-danger.active { background: var(--danger-50); color: var(--danger-600); }
@media (min-width: 1200px) { .account-nav { overflow: visible; } .account-nav-danger { margin-top: .5rem; border-top: 1px solid var(--neutral-200); border-radius: 0 0 10px 10px; padding-top: .9rem; } }

/* sticky save bar and tabs of the account form */
.settings-save-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 1.5rem; padding: .85rem 1rem; background: var(--white); border: 1px solid var(--neutral-200); border-radius: 12px; box-shadow: var(--shadow-9); display: flex; justify-content: flex-end; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.settings-tabs .nav-link { display: inline-flex; align-items: center; gap: .5rem; border-radius: 10px; padding: .55rem 1rem; color: var(--text-secondary-light); background: var(--white); border: 1px solid var(--neutral-200); font-weight: 500; }
.settings-tabs .nav-link.active { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.settings-section-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.settings-section-help { color: var(--text-secondary-light); font-size: .875rem; margin-bottom: 1rem; }

/* label / value lines of the admin user profile */
.info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--neutral-200); }
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--text-secondary-light); font-size: .875rem; white-space: nowrap; }
.info-label .fa-fw { color: var(--text-secondary-light); opacity: .7; margin-right: .25rem; }
.info-value { color: var(--text-primary-light); font-weight: 500; text-align: right; word-break: break-word; min-width: 0; }

.account-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--primary-50); color: var(--primary-600); font-size: 1.75rem; }

/* profile fields */
.profile-field-required { color: var(--danger-600); margin-left: .15rem; }
.form-control.is-loading { background-image: none; opacity: .7; }
.profile-group-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin: 1.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px dashed var(--neutral-200); }
.profile-group-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* integrations */
.integration-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 12px; font-size: 1.3rem; color: var(--integration-color); background: color-mix(in srgb, var(--integration-color) 12%, transparent); }
.integration-card { transition: box-shadow .15s ease, border-color .15s ease; }
.integration-card.is-on { border-color: var(--success-400, #34c38f); }
.integration-card:hover { box-shadow: var(--shadow-9); }
.min-w-0 { min-width: 0; }
.profile-fields-table .profile-fields-group td { background: var(--neutral-100); border-bottom: 0; }
[data-theme-style="dark"] .profile-fields-table .profile-fields-group td { background: rgba(255,255,255,.04); }