@import "default.css";

/* =============================================
	 Purple Infinity Theme (modernized)
	 - Replaces blue tones with a deep purple palette
	 - Adds CSS variables for easier future tweaking
	 - Light glass / soft gradient surfaces
	 ============================================= */

:root {
	--pi-bg-gradient-start: #3b1161; /* primary deep purple */
	--pi-bg-gradient-end: #07030d;   /* near-black base */
	--pi-bg-solid: #1a0f29;
	--pi-bg-solid-alt: #241335;
	--pi-surface-glass: rgba(72, 31, 120, 0.18);
	--pi-surface-glass-strong: rgba(72, 31, 120, 0.35);
	--pi-border: #7951c4;
	--pi-border-soft: #5e3e96;
	--pi-accent: #8f5dff;
	--pi-accent-alt: #b586ff;
	--pi-accent-glow: 174 120 255; /* for shadow */
	--pi-text: #f2ecff;
	--pi-text-dim: #c7b8e3;
	--pi-success: #35c96f;
	--pi-focus-ring: 0 0 0 2px rgba(143,93,255,.65), 0 0 0 6px rgba(143,93,255,.25);
	/* Radius scale (adjusted to be less rounded) */
	--pi-radius-xs: 3px;
	--pi-radius-sm: 4px;
	--pi-radius: 6px;
	--pi-radius-md: 8px;
	--pi-radius-lg: 10px;
	/* Motion + timing */
	--pi-ease-smooth: cubic-bezier(.4,.14,.3,1);
	--pi-ease-spring: cubic-bezier(.34,1.56,.64,1);
	--pi-duration-fast: 120ms;
	--pi-duration: 260ms;
	--pi-duration-slow: 520ms;
	/* Auth layout sizing */
	--auth-form-max: 680px; /* adjust this single value to fine-tune width (reduced slightly) */
}

/* ================= Animations & Keyframes ================= */
@keyframes pi-fade-slide-up { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }
@keyframes pi-fade-slide-down { from { opacity:0; transform: translateY(-14px); } to { opacity:1; transform: translateY(0); } }
@keyframes pi-scale-in { 0% { opacity:0; transform: scale(.94); } 100% { opacity:1; transform: scale(1); } }
@keyframes pi-glow-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--pi-accent-glow)/.0), 0 0 0 0 rgba(var(--pi-accent-glow)/.0);} 50% { box-shadow: 0 0 0 3px rgba(var(--pi-accent-glow)/.15), 0 0 18px 4px rgba(var(--pi-accent-glow)/.35);} }
@keyframes pi-shimmer { 0% { background-position:-450px 0;} 100% { background-position:450px 0;} }
@keyframes pi-barber-progress { 0% { background-position:0 0;} 100% { background-position:120px 0;} }
@keyframes pi-ripple { 0% { transform:scale(0); opacity:.55;} 80% { transform:scale(1); opacity:0;} 100% { transform:scale(1.2); opacity:0;} }

/* Utility animation classes */
.pi-anim-fade-up { animation: pi-fade-slide-up var(--pi-duration) var(--pi-ease-smooth) both; }
.pi-anim-fade-down { animation: pi-fade-slide-down var(--pi-duration) var(--pi-ease-smooth) both; }
.pi-anim-scale-in { animation: pi-scale-in var(--pi-duration) var(--pi-ease-spring) both; }
.pi-anim-delay-1 { animation-delay: 80ms; }
.pi-anim-delay-2 { animation-delay: 160ms; }
.pi-anim-delay-3 { animation-delay: 240ms; }

/* Skeleton loading */
.skeleton { position:relative; overflow:hidden; background: linear-gradient(90deg,#2a183d 0%,#3a2252 40%,#2a183d 80%); background-size:450px 100%; animation: pi-shimmer 2.1s ease-in-out infinite; border-radius: var(--pi-radius-sm); color:transparent; }
.skeleton::after { content:""; position:absolute; inset:0; }

/* Indeterminate progress bar */
.pi-progress-indeterminate { height:4px; width:100%; background: linear-gradient(90deg,rgba(143,93,255,.1) 0%,rgba(143,93,255,.4) 50%,rgba(143,93,255,.1) 100%); background-size:120px 100%; animation: pi-barber-progress 1.2s linear infinite; border-radius: var(--pi-radius-sm); }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
	.pi-progress-indeterminate, .skeleton { animation:none !important; }
}

/* Layout */
.layout-fixed .wrapper .sidebar {
	height: calc(100vh - 3.5rem - 1px);
	background: radial-gradient(var(--pi-bg-gradient-start), var(--pi-bg-gradient-end));
	backdrop-filter: blur(6px);
}

/* Content wrappers when not mini */
body:not(.sidebar-mini-md) .content-wrapper,
body:not(.sidebar-mini-md) .main-footer,
body:not(.sidebar-mini-md) .main-header {
	transition: none !important;
	background: radial-gradient(var(--pi-bg-gradient-start), var(--pi-bg-gradient-end));
}

/* Brand link */
[class*=sidebar-dark] .brand-link,
[class*=sidebar-dark] .brand-link .pushmenu {
	color: var(--pi-text-dim);
	background: linear-gradient(145deg, var(--pi-bg-solid) 0%, var(--pi-bg-solid-alt) 100%);
	letter-spacing: .5px;
}

/* Sidebar typography */
.main-sidebar .brand-text,
.main-sidebar .logo-xl,
.main-sidebar .logo-xs,
.sidebar .nav-link p,
.sidebar .user-panel .info {
	transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease;
	color: #d3d3d3;
}

/* Active nav link (removed pulse animation to avoid continuous repaints) */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
	color: var(--pi-text);
	background: linear-gradient(125deg, var(--pi-accent) 0%, var(--pi-accent-alt) 100%);
	border-radius: var(--pi-radius-lg);
	box-shadow: none !important;
}

/* Subtle hover for nav links */
.nav-sidebar > .nav-item > .nav-link:hover:not(.active) {
	background: linear-gradient(125deg, rgba(143,93,255,.15), rgba(143,93,255,.05));
	color: var(--pi-text);
}

/* Card (dark) */
.dark-mode .card {
	background: linear-gradient(145deg, var(--pi-surface-glass), rgba(32,14,53,.35));
	color: var(--pi-text-dim);
	border: 1px solid var(--pi-border-soft);
	border-radius: var(--pi-radius-md);
	box-shadow: 0 2px 6px -1px rgba(0 0 0 / .55), 0 0 0 1px rgba(255 255 255 / .04);
	transition: none !important;
}

.dark-mode .card.pi-anim-enter { animation: pi-fade-slide-up var(--pi-duration) var(--pi-ease-smooth) both; }

.dark-mode .card:focus-within { box-shadow: 0 0 0 1px var(--pi-accent), 0 0 0 6px rgba(var(--pi-accent-glow)/.25); }

.dark-mode .card:hover {
	box-shadow: none !important;
	transform: none !important;
}

/* Buttons */
.btn-info {
	color: var(--pi-text);
	background: linear-gradient(135deg, var(--pi-accent) 0%, var(--pi-accent-alt) 100%);
	border: none;
	border-radius: var(--pi-radius-lg);
	box-shadow: 0 4px 16px -4px rgba(var(--pi-accent-glow) / .6);
	transition: background var(--pi-duration) var(--pi-ease-smooth), transform var(--pi-duration-fast) var(--pi-ease-spring), box-shadow var(--pi-duration) var(--pi-ease-smooth);
	position:relative; overflow:hidden;
}

.btn-info:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -6px rgba(var(--pi-accent-glow) / .65);
}

.btn-info:active { transform: translateY(0); box-shadow: 0 2px 10px -3px rgba(var(--pi-accent-glow)/.5); }

.btn-info::after,
.btn-warning::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at center, rgba(255 255 255 / .35) 0%, rgba(255 255 255 / 0) 70%); opacity:0; transform:scale(.2); transition: opacity var(--pi-duration-fast) linear; pointer-events:none; }
.btn-info:hover::after,
.btn-warning:hover::after { opacity:.25; transform:scale(1); }
.btn-info:active::after,
.btn-warning:active::after { animation: pi-ripple 600ms var(--pi-ease-smooth); }

.btn-info:focus-visible {
	outline: none;
	box-shadow: var(--pi-focus-ring);
}

.btn-warning {
	color: var(--pi-text);
	background: linear-gradient(135deg, #ff9d42 0%, #ffcd7a 100%);
	border: none;
	border-radius: var(--pi-radius-lg);
	box-shadow: 0 4px 16px -4px rgba(255 157 66 / .45);
	transition: background var(--pi-duration) var(--pi-ease-smooth), transform var(--pi-duration-fast) var(--pi-ease-spring), box-shadow var(--pi-duration) var(--pi-ease-smooth);
	position:relative; overflow:hidden;
}

.btn-warning:hover { transform: translateY(-2px); }
.btn-warning:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffcd7a55, 0 0 0 6px #ffcd7a22; }

/* Card title */
.card-title {
	float: left;
	font-size: 1.05rem;
	font-weight: 500;
	margin: 0;
	color: var(--pi-text);
	letter-spacing: .3px;
}

.dark-mode .text-muted { color: var(--pi-text-dim) !important; }

/* List group */
.dark-mode .list-group-item {
	background-color: rgba(77,35,128,0.15);
	border-color: var(--pi-border-soft);
}

/* Info box */
.dark-mode .info-box {
	background: linear-gradient(145deg, var(--pi-surface-glass-strong), rgba(45,20,75,.5));
	color: var(--pi-text);
	border: 1px solid var(--pi-border);
	border-radius: var(--pi-radius-md);
}

/* Labels */
label:not(.form-check-label):not(.custom-file-label) {
	font-weight: 600;
	color: var(--pi-text-dim);
	letter-spacing: .5px;
}

/* Form controls */
.dark-mode .custom-control-label:before,
.dark-mode .custom-file-label,
.dark-mode .custom-file-label:after,
.dark-mode .custom-select,
.dark-mode .form-control,
.dark-mode .input-group-text {
	background-color: rgba(91,49,150,0.15);
	color: var(--pi-text-dim);
	border: 1px solid var(--pi-border-soft);
}

.dark-mode .form-control:focus, .dark-mode .custom-select:focus {
	outline: none;
	border-color: var(--pi-accent);
	box-shadow: 0 0 0 1px var(--pi-accent), 0 0 0 4px rgba(var(--pi-accent-glow)/.35);
}

/* Alerts */
.alert-success {
	color: var(--pi-text);
	background: linear-gradient(140deg, var(--pi-success) 0%, #3ee685 60%);
	border: none;
	border-radius: var(--pi-radius-md);
	box-shadow: 0 4px 16px -4px rgba(53 201 111 / .55);
}

/* Dark mode base */
.dark-mode {
	color: var(--pi-text);
	background: radial-gradient(var(--pi-bg-gradient-start), var(--pi-bg-gradient-end));
}

/* Invoice */
.dark-mode .invoice {
	background: linear-gradient(145deg, var(--pi-surface-glass), rgba(60,26,104,.35));
	border: 1px solid var(--pi-border);
	border-radius: var(--pi-radius-md);
}

/* Tabs */
.dark-mode .nav-tabs .nav-item.show .nav-link,
.dark-mode .nav-tabs .nav-link.active {
	background: linear-gradient(120deg, rgba(143,93,255,.25), rgba(143,93,255,.1));
	color: var(--pi-text);
	border: 1px solid var(--pi-border-soft);
	border-bottom-color: var(--pi-border);
}

/* Slim images */
.slim-crop-area img,
.slim-image-editor img,
.slim-popover img,
.slim img {
	background: black;
}

/* Callouts */
.dark-mode .callout {
	background: linear-gradient(130deg, rgba(143,93,255,.2), rgba(143,93,255,.08));
	border-left: 4px solid var(--pi-accent);
}

.callout.callout-info { border-left-color: var(--pi-accent-alt); }

/* Padding utilities override */
.p-3 {
	padding: 1rem !important;
	background: var(--pi-bg-solid);
}

/* Small box */
.small-box > .small-box-footer {
	color: var(--pi-text-dim);
	display: block;
	padding: 6px 0;
	position: relative;
	text-align: center;
	text-decoration: none;
	z-index: 10;
	background: var(--pi-bg-solid-alt);
	border-radius: 0 0 var(--pi-radius) var(--pi-radius);
}

/* Dropdown */
.dark-mode .dropdown-menu {
	background-color: var(--pi-bg-solid-alt);
	border-color: var(--pi-border-soft);
	backdrop-filter: blur(10px) saturate(140%);
}

/* Card header */
.card-header:first-child {
	border-radius: var(--pi-radius-md) var(--pi-radius-md) 0 0;
	background: linear-gradient(145deg, var(--pi-bg-solid), var(--pi-bg-solid-alt));
	border-bottom: 1px solid var(--pi-border-soft);
}

/* Card body */
.card-body {
	flex: 1 1 auto;
	min-height: 1px;
	padding: 1.25rem 1.35rem;
	background: linear-gradient(160deg, rgba(48,22,82,.55), rgba(26,15,41,.65));
}

/* Justify content helper */
.justify-content-between {
	justify-content: space-between !important;
	background: transparent;
}

/* Card footer */
.dark-mode .card .card-footer {
	background: linear-gradient(145deg, var(--pi-bg-solid), var(--pi-bg-solid-alt));
	border-top: 1px solid var(--pi-border-soft);
	border-radius: 0 0 var(--pi-radius-md) var(--pi-radius-md);
}

/* Select2 single */
.dark-mode .select2-selection--single {
	background-color: rgba(76,44,129,.35);
	border-color: var(--pi-border-soft);
}

.select2-search--dropdown {
	display: block;
	padding: 4px;
	background: var(--pi-bg-solid-alt);
}

.select2-container--default .select2-results__option {
	padding: 6px 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background: var(--pi-bg-solid);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--pi-accent);
	color: var(--pi-text);
 	transition: background var(--pi-duration-fast) var(--pi-ease-smooth), color var(--pi-duration-fast) linear;
}

.dark-mode .select2-dropdown,
.dark-mode .select2-dropdown .select2-search__field,
.dark-mode .select2-search--inline .select2-search__field {
	background-color: var(--pi-bg-solid-alt);
	border-color: var(--pi-border);
	color: var(--pi-text);
}

/* Modal */
.modal-header {
	background: linear-gradient(145deg, var(--pi-bg-solid), var(--pi-bg-solid-alt));
}

.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem 1.25rem;
	background: linear-gradient(160deg, rgba(48,22,82,.55), rgba(26,15,41,.65));
}

.dark-mode .modal-footer,
.dark-mode .modal-header {
	border-color: var(--pi-border);
	background: linear-gradient(145deg, var(--pi-bg-solid), var(--pi-bg-solid-alt));
}

/* ==== Modal Flicker / Animation Suppression (enhanced) ==== */
body.modal-open .content-wrapper,
body.modal-open .main-footer,
body.modal-open .main-header {
	transition: none !important;
}

body.modal-open {
	overflow-y: auto;
}

/* Pause ALL custom animations & transitions inside modals to prevent jitter */
body.modal-open .modal,
body.modal-open .modal * {
	animation: none !important;
	transition: none !important;
}

/* Disable global animated helpers while a modal is active */
body.modal-open .pi-anim-fade-up,
body.modal-open .pi-anim-fade-down,
body.modal-open .pi-anim-scale-in {
	animation: none !important;
}

/* Remove hover transforms in modals */
body.modal-open .modal .card:hover {
	transform: none !important;
	box-shadow: none !important;
}

.modal.fade .modal-dialog {
	will-change: transform;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	/* Neutralize Bootstrap's translate animation to avoid conflict */
	transition: opacity .18s ease !important;
	transform: none !important;
}

/* Safety: prevent inherited transforms */
.modal {
	transform: none !important;
}

/* Global optional kill-switch: add 'no-anim' to <body> to disable site-wide animations */
body.no-anim *,
body.no-anim {
	animation: none !important;
	transition: none !important;
}

/* ===== End Modal / Animation Fixes ===== */

/* =============================================================
   Auth Pages (Login / Register) - Two Column Layout
   Left: Info / marketing, Right: Form
   ============================================================= */
.auth-shell {
	--_gap: clamp(1.6rem, 3vw, 3rem);
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(300px, 520px) minmax(340px, 460px);
	gap: var(--_gap);
	align-items: stretch;
	padding: clamp(1.25rem, 3vw, 3rem);
	background: radial-gradient(var(--pi-bg-gradient-start), var(--pi-bg-gradient-end));
}

@media (max-width: 980px) {
	.auth-shell { grid-template-columns: 1fr; }
	.auth-form { order: 2; }
	.auth-info { order: 1; }
}

.auth-panel {
	background: linear-gradient(155deg, rgba(48,22,82,.55), rgba(26,15,41,.82));
	border: 1px solid var(--pi-border-soft);
	border-radius: var(--pi-radius-md);
	padding: clamp(1.3rem, 2.4vw, 2.2rem);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(14px) saturate(140%);
	animation: pi-fade-slide-up var(--pi-duration) var(--pi-ease-smooth);
}
.auth-panel:nth-child(2) { animation-delay: 120ms; }

.auth-info {
	background: linear-gradient(160deg, rgba(61,26,107,.55), rgba(32,14,53,.9) 65%, rgba(21,10,33,.95));
}
.auth-info::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 25%, rgba(var(--pi-accent-glow)/.28), transparent 55%),
		radial-gradient(circle at 85% 75%, rgba(181,134,255,.22), transparent 60%);
	mix-blend-mode: screen;
	pointer-events: none;
}

.auth-brand h1 {
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	margin: 0 0 .5rem;
	background: linear-gradient(100deg,var(--pi-accent),var(--pi-accent-alt));
	-webkit-background-clip: text;
	color: transparent;
	font-weight: 600;
	letter-spacing: .5px;
}
.auth-brand .tagline {
	margin: 0 0 1.6rem;
	color: var(--pi-text-dim);
	font-size: .95rem;
	letter-spacing: .4px;
}

.auth-highlights { list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: .6rem; font-size: .88rem; }
.auth-highlights li { position: relative; padding-left: 1.3rem; color: var(--pi-text-dim); }
.auth-highlights li::before { content: ""; position: absolute; left: 0; top: .35rem; width: .65rem; height: .65rem; background: linear-gradient(120deg,var(--pi-accent),var(--pi-accent-alt)); border-radius: 2px; box-shadow: 0 0 0 1px rgba(var(--pi-accent-glow)/.35); }

.auth-cta { margin-top: 1.8rem; }
.mini-link { font-size: .7rem; color: var(--pi-accent-alt); text-decoration: none; letter-spacing: .5px; text-transform: uppercase; font-weight: 500; display: inline-flex; gap: .4ch; align-items: center; opacity: .85; transition: opacity var(--pi-duration-fast) var(--pi-ease-smooth); }
.mini-link:hover { opacity: 1; }

.auth-form { background: linear-gradient(155deg, rgba(48,22,82,.55), rgba(26,15,41,.88)); }
.auth-form { width:100%; max-width: var(--auth-form-max); }
.auth-form form { margin-top: .6rem; display: flex; flex-direction: column; gap: 1rem; }
.auth-form .form-group { display: flex; flex-direction: column; gap: .35rem; }
.auth-form label { font-size: .72rem; text-transform: uppercase; letter-spacing: .55px; color: var(--pi-text-dim); margin: 0; }
.auth-form .form-control { background: rgba(91,49,150,.18); border: 1px solid var(--pi-border-soft); border-radius: var(--pi-radius-sm); padding: .6rem .8rem; font-size: .9rem; color: var(--pi-text); transition: border-color var(--pi-duration-fast) var(--pi-ease-smooth), background var(--pi-duration-fast) var(--pi-ease-smooth); }
.auth-form .form-control:focus { outline: none; border-color: var(--pi-accent); background: rgba(91,49,150,.25); box-shadow: 0 0 0 1px var(--pi-accent), 0 0 0 5px rgba(var(--pi-accent-glow)/.25); }

.form-title { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 500; letter-spacing: .4px; color: var(--pi-text); }
.swap-link { margin: .6rem 0 0; font-size: .78rem; text-align: center; color: var(--pi-text-dim); }
.swap-link a { color: var(--pi-accent-alt); text-decoration: none; font-weight: 500; }
.swap-link a:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.auth-panel { padding: 1.1rem 1rem; }
	.auth-brand h1 { font-size: 2rem; }
	.auth-highlights { gap: .5rem; }
}

/* Variant: shift form further right (wider info column + larger gap) */
.auth-shift-right {
	grid-template-columns: minmax(400px, 760px) minmax(420px, var(--auth-form-max));
	--_gap: clamp(2.3rem, 4.8vw, 5.5rem);
}
.auth-shift-right .auth-form { justify-self: end; margin-left: auto; }
.auth-shift-right .auth-info { padding-right: clamp(1rem, 2vw, 2.2rem); }

/* Compact variant: smaller info panel */
.auth-compact {
	grid-template-columns: minmax(300px, 500px) minmax(440px, var(--auth-form-max));
	--_gap: clamp(2rem, 4vw, 4.5rem);
}
@media (max-width: 1400px) { .auth-compact { grid-template-columns: minmax(300px, 460px) minmax(440px, var(--auth-form-max)); } }
@media (max-width: 1250px) { .auth-compact { grid-template-columns: minmax(280px, 440px) minmax(420px, var(--auth-form-max)); } }
@media (max-width: 1100px) { .auth-compact { grid-template-columns: minmax(260px, 420px) minmax(400px, var(--auth-form-max)); } }
/* Fine tune inner spacing for compact */
.auth-compact .auth-info { padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1rem, 1.8vw, 1.6rem) 1.6rem; }
.auth-compact .auth-brand h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.auth-compact .auth-highlights { font-size: .8rem; }
.auth-compact .auth-highlights li { padding-left: 1.1rem; }
.auth-compact .auth-highlights li::before { top: .32rem; width: .55rem; height: .55rem; }

/* -------- Responsive refinements for auth layout -------- */
@media (max-width: 1400px) {
	.auth-shift-right { grid-template-columns: minmax(380px, 680px) minmax(420px, var(--auth-form-max)); --_gap: clamp(2rem,4.2vw,5.2rem); }
}
@media (max-width: 1250px) {
	:root { --auth-form-max: 660px; }
	.auth-shift-right { grid-template-columns: minmax(360px, 620px) minmax(400px, var(--auth-form-max)); --_gap: clamp(1.9rem,3.8vw,4.6rem); }
}
@media (max-width: 1100px) {
	:root { --auth-form-max: 640px; }
	.auth-shift-right { grid-template-columns: minmax(340px, 580px) minmax(380px, var(--auth-form-max)); --_gap: clamp(1.7rem,3.2vw,4.2rem); }
}
/* Keep existing collapse at 980px from earlier media rule */
@media (max-width: 980px) {
	.auth-form { max-width: 100%; }
}
@media (max-width: 640px) {
	.auth-form { padding: 1.1rem 1rem; }
}

/* Animated background variant */
@keyframes pi-auth-gradient-move {
	0% { transform: translate3d(0,0,0) scale(1); }
	50% { transform: translate3d(-10%, -5%,0) scale(1.05); }
	100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes pi-auth-blobs {
	0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
	50% { transform: translate3d(5%, -6%,0) rotate(35deg) scale(1.15); }
	100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
@keyframes pi-auth-noise { 0%,100% { opacity:.13; } 50% { opacity:.08; } }

.auth-animated { position:relative; overflow:hidden; }
.auth-animated::before {
	content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none;
	background:
		radial-gradient(circle at 20% 30%, rgba(var(--pi-accent-glow)/.35), transparent 60%),
		radial-gradient(circle at 80% 70%, rgba(181,134,255,.28), transparent 65%),
		linear-gradient(115deg, #3b1161 0%, #241335 55%, #07030d 100%);
	filter: blur(40px) saturate(140%);
	animation: pi-auth-gradient-move 22s ease-in-out infinite;
}
.auth-animated::after {
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background:
		radial-gradient(circle at 65% 40%, rgba(143,93,255,.18), transparent 60%),
		radial-gradient(circle at 30% 75%, rgba(90,40,160,.22), transparent 65%);
	mix-blend-mode: overlay;
	animation: pi-auth-blobs 28s cubic-bezier(.4,.14,.3,1) infinite;
}
.auth-shell.auth-animated { background: transparent; }
.auth-shell.auth-animated > .auth-panel { position:relative; z-index:1; }
.auth-shell.auth-animated .auth-info::before { animation: pi-auth-noise 12s ease-in-out infinite; }

/* === Glitch Safe Overrides (mirror simpler working app.css behavior) === */
/* Remove layout margin transition that causes reflow with modals */
body:not(.sidebar-mini-md) .content-wrapper,
body:not(.sidebar-mini-md) .main-footer,
body:not(.sidebar-mini-md) .main-header {
  transition: none !important;
}

/* Stop hover lift (prevents vertical jitter when modal/backdrop recalculates) */
.dark-mode .card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Prevent transform intent on cards at all */
.dark-mode .card {
  transition: none !important;
}

/* Disable animations globally unless body has .allow-anim */
body:not(.allow-anim) .skeleton,
body:not(.allow-anim) .pi-progress-indeterminate,
body:not(.allow-anim) [class*="pi-anim-"],
body:not(.allow-anim) .auth-animated::before,
body:not(.allow-anim) .auth-animated::after,
body:not(.allow-anim) .btn-info::after,
body:not(.allow-anim) .btn-warning::after {
  animation: none !important;
}

/* Also neutralize ripple effect */
body:not(.allow-anim) .btn-info,
body:not(.allow-anim) .btn-warning {
  transition: none !important;
}

/* Remove shimmer background movement while keeping base color */
body:not(.allow-anim) .skeleton {
  background: #2a183d !important;
  background-size: auto !important;
}

/* Freeze progress bar visual */
body:not(.allow-anim) .pi-progress-indeterminate {
  background-position: 0 0 !important;
  animation: none !important;
}

/* Simplify active nav link shadow (no pulsing/glow) */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
  animation: none !important;
  box-shadow: none !important;
}

/* Backdrop-filter may cause repaint jumping on some GPUs */
.layout-fixed .wrapper .sidebar {
  backdrop-filter: none !important;
}

/* Keep modal-specific animation suppression (already present) but ensure consistency */
body.modal-open * {
  animation: none !important;
  transition: none !important;
}

/* Optional: developer helper class to re-enable specific animations locally */
.allow-anim .pi-anim-scale-in,
.allow-anim .pi-anim-fade-up,
.allow-anim .pi-anim-fade-down {
  animation-duration: var(--pi-duration);
  animation-timing-function: var(--pi-ease-smooth);
}

/* Strong safeguard: avoid any unexpected translate flicker on dialogs */
.modal,
.modal-dialog,
.modal-content {
  transform: none !important;
  will-change: auto !important;
}

/* === End Glitch Safe Overrides === */

/* === Modal Animation Adjustments (re-enable dialog animation) === */
/* Previous global suppression left in place; we restore animation for .modal-dialog only */
body.modal-open .modal .modal-dialog {
  animation: none !important; /* ensure keyframes below define behavior */
  transition: transform .28s var(--pi-ease-smooth), opacity .28s var(--pi-ease-smooth) !important;
  will-change: transform, opacity;
}

/* Keyframes not strictly needed (using transition), but provided if future toggling required */
@keyframes pi-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Override earlier transform: none !important safeguard with explicit states */
.modal.fade .modal-dialog {
  opacity: 0;
  transform: translateY(18px) scale(.96) !important;
}

.modal.show .modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1) !important;
}

/* Closing state (added via JS before Bootstrap hides modal) */
.modal.closing .modal-dialog {
  opacity: 0 !important;
  transform: translateY(-14px) scale(.94) !important;
  filter: brightness(.9) saturate(.9);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .modal.show .modal-dialog,
  .modal.closing .modal-dialog {
    transition: opacity .18s ease !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Ensure inner content doesn’t animate (keeps stability) */
body.modal-open .modal .modal-content,
body.modal-open .modal .modal-body,
body.modal-open .modal .card,
body.modal-open .modal .card * {
  animation: none !important;
  transition: none !important;
}
/* === End Modal Animation Adjustments === */
