/* CloudRedBerry VCMS — standard Bootstrap / Frappe Desk look
   Desk UI uses Frappe defaults (Bootstrap-based). Only brand color is set. */

:root {
	--crb-accent: #cd2653;
	--crb-accent-hover: #a81f44;
	/* Map brand into Bootstrap + Frappe tokens */
	--bs-primary: #cd2653;
	--bs-primary-rgb: 205, 38, 83;
	--primary: #cd2653;
	--primary-color: #cd2653;
	--brand-color: #cd2653;
}

[data-theme="dark"] {
	--crb-accent: #cd2653;
	--crb-accent-hover: #d84070;
	--bs-primary: #cd2653;
	--primary: #cd2653;
	--primary-color: #cd2653;
	--brand-color: #cd2653;
}

/* Brand primary buttons (Bootstrap .btn-primary) */
.btn-primary,
.btn-primary:focus,
.btn-login,
.for-login button[type="submit"],
.login-content button.btn-block {
	--bs-btn-bg: var(--crb-accent);
	--bs-btn-border-color: var(--crb-accent);
	--bs-btn-hover-bg: var(--crb-accent-hover);
	--bs-btn-hover-border-color: var(--crb-accent-hover);
	--bs-btn-active-bg: var(--crb-accent-hover);
	--bs-btn-active-border-color: var(--crb-accent-hover);
	background-color: var(--crb-accent) !important;
	border-color: var(--crb-accent) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-login:hover,
.for-login button[type="submit"]:hover,
.login-content button.btn-block:hover {
	background-color: var(--crb-accent-hover) !important;
	border-color: var(--crb-accent-hover) !important;
}

.btn-primary:focus-visible {
	box-shadow: 0 0 0 0.25rem rgba(205, 38, 83, 0.25);
}

input[type="checkbox"]:checked,
.form-check-input:checked {
	background-color: var(--crb-accent) !important;
	border-color: var(--crb-accent) !important;
}

.app-logo {
	max-height: 28px;
}

.for-login a,
.for-signup a,
.for-forgot a {
	color: var(--crb-accent-hover);
}

/* Clinic Command Center / Workspaces — full available width */
[data-page-route="Workspaces"] .layout-main,
[data-page-route="Workspaces"] .layout-main-section-wrapper,
[data-page-route="Workspaces"] .page-head .container,
[data-page-route="Workspaces"] .page-body,
[data-page-route="Workspaces"] .container.page-body {
	max-width: none !important;
	width: 100% !important;
}

[data-page-route="Workspaces"] .layout-main {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

[data-page-route="Workspaces"] .codex-editor,
[data-page-route="Workspaces"] .codex-editor__redactor,
[data-page-route="Workspaces"] .workspace-body {
	max-width: none !important;
	width: 100% !important;
}

/* Left menu — full viewport height, no white gap under profile */
.body-sidebar-container,
.body-sidebar-container.expanded {
	align-self: stretch;
	min-height: 100vh;
	min-height: 100dvh;
	height: 100vh;
	height: 100dvh;
	background-color: var(--surface-menu-bar, #f8f8f8) !important;
}

.body-sidebar-placeholder {
	min-height: 100vh !important;
	min-height: 100dvh !important;
	height: 100vh !important;
	height: 100dvh !important;
	background-color: var(--surface-menu-bar, #f8f8f8) !important;
}

.body-sidebar,
.body-sidebar-container.expanded .body-sidebar {
	min-height: 100vh !important;
	min-height: 100dvh !important;
	height: 100vh !important;
	height: 100dvh !important;
	top: 0 !important;
	bottom: 0 !important;
	background-color: var(--surface-menu-bar, #f8f8f8) !important;
}

.body-sidebar .body-sidebar-top {
	flex: 1 1 auto;
	min-height: 0;
}

.body-sidebar .body-sidebar-bottom {
	margin-top: auto;
	background-color: var(--surface-menu-bar, #f8f8f8);
}


/* ============================================================
   Animated login page (veterinary theme)
   Styles use body[data-path="login"] so they apply with first paint
   (no FOUC). JS only adds floating paw decorations.
   ============================================================ */

body[data-path="login"] {
	background: linear-gradient(125deg, #fdf3f7 0%, #f5f7fc 30%, #fbe0e8 60%, #fff6f9 100%);
	background-size: 300% 300%;
	animation: vcms-gradient 20s ease infinite;
	min-height: 100vh;
}

body[data-path="login"] .for-login,
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .page_content {
	background: transparent !important;
}

@keyframes vcms-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* decorative layer (injected by JS after paint — optional polish) */
.vcms-login-bg {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.vcms-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.45;
}

.vcms-blob-1 {
	width: 420px;
	height: 420px;
	left: -120px;
	top: -100px;
	background: #f7c6d6;
	animation: vcms-drift-1 26s ease-in-out infinite alternate;
}

.vcms-blob-2 {
	width: 360px;
	height: 360px;
	right: -100px;
	top: 30%;
	background: #cdd8f5;
	animation: vcms-drift-2 30s ease-in-out infinite alternate;
}

.vcms-blob-3 {
	width: 300px;
	height: 300px;
	left: 35%;
	bottom: -140px;
	background: #f9d9e4;
	animation: vcms-drift-1 34s ease-in-out infinite alternate-reverse;
}

@keyframes vcms-drift-1 {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(70px, 50px) scale(1.15); }
}

@keyframes vcms-drift-2 {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(-60px, -40px) scale(1.1); }
}

.vcms-float {
	position: absolute;
	bottom: -70px;
	opacity: 0;
	color: var(--crb-accent);
	animation-name: vcms-rise;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.vcms-float svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
	opacity: 0.16;
}

@keyframes vcms-rise {
	0% { transform: translateY(0) rotate(-14deg); opacity: 0; }
	8% { opacity: 1; }
	85% { opacity: 0.7; }
	100% { transform: translateY(-115vh) rotate(20deg); opacity: 0; }
}

/* ---- Scene: sleeping cat on tree (top) + dog hunting bone (bottom) ---- */
.vcms-scene {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.vcms-tree-cat {
	position: absolute;
	top: -8px;
	right: 2%;
	width: min(240px, 28vw);
	opacity: 0.95;
}

.vcms-tree-canopy {
	transform-origin: center;
	animation: vcms-canopy-sway 6s ease-in-out infinite;
}

@keyframes vcms-canopy-sway {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(2px); }
}

.vcms-cat {
	transform-box: fill-box;
	transform-origin: center;
	animation: vcms-cat-breathe 3.6s ease-in-out infinite;
}

@keyframes vcms-cat-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

.vcms-cat-tail {
	transform-origin: 40px 26px;
	animation: vcms-cat-tail 4s ease-in-out infinite;
}

@keyframes vcms-cat-tail {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(8deg); }
}

.vcms-zzz {
	animation: vcms-zzz 3s ease-in-out infinite;
}

@keyframes vcms-zzz {
	0%, 100% { transform: translate(0, 0); opacity: 0.85; }
	50% { transform: translate(4px, -8px); opacity: 1; }
}

.vcms-bone {
	position: absolute;
	bottom: 18px;
	left: 72%;
	width: 54px;
	animation: vcms-bone-wait 12s ease-in-out infinite;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

@keyframes vcms-bone-wait {
	0%, 38%, 100% { transform: translateY(0) rotate(-8deg) scale(1); opacity: 0.95; }
	42% { transform: translateY(-10px) rotate(12deg) scale(1.15); opacity: 1; }
	48% { transform: translateY(0) rotate(-4deg) scale(1); opacity: 1; }
	55%, 100% { transform: translateY(0) rotate(-8deg) scale(1); opacity: 0.95; }
}

.vcms-dog {
	position: absolute;
	bottom: 8px;
	left: -140px;
	width: 120px;
	animation: vcms-dog-run 12s linear infinite;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15));
}

/* run L→R, sniff at bone (~70%), turn, run back */
@keyframes vcms-dog-run {
	0% { transform: translateX(0) scaleX(1); }
	36% { transform: translateX(calc(72vw - 40px)) scaleX(1); }
	40% { transform: translateX(calc(72vw - 20px)) scaleX(1) translateY(-4px); }
	44% { transform: translateX(calc(72vw - 20px)) scaleX(1) translateY(0); }
	48% { transform: translateX(calc(72vw - 20px)) scaleX(-1); }
	100% { transform: translateX(-160px) scaleX(-1); }
}

.vcms-dog-legs .vcms-leg {
	transform-box: fill-box;
	transform-origin: top center;
}

.vcms-leg-1,
.vcms-leg-3 {
	animation: vcms-leg-a 0.28s ease-in-out infinite;
}

.vcms-leg-2,
.vcms-leg-4 {
	animation: vcms-leg-b 0.28s ease-in-out infinite;
}

@keyframes vcms-leg-a {
	0%, 100% { transform: rotate(18deg); }
	50% { transform: rotate(-22deg); }
}

@keyframes vcms-leg-b {
	0%, 100% { transform: rotate(-22deg); }
	50% { transform: rotate(18deg); }
}

.vcms-dog-tail {
	transform-origin: 30px 40px;
	animation: vcms-dog-tail 0.35s ease-in-out infinite;
}

@keyframes vcms-dog-tail {
	0%, 100% { transform: rotate(-8deg); }
	50% { transform: rotate(18deg); }
}

.vcms-dog-tongue {
	transform-origin: 102px 44px;
	animation: vcms-tongue 0.5s ease-in-out infinite;
}

@keyframes vcms-tongue {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(1.15); }
}

.vcms-dog-head {
	transform-origin: 80px 40px;
	animation: vcms-sniff-head 12s linear infinite;
}

@keyframes vcms-sniff-head {
	0%, 34%, 50%, 100% { transform: rotate(0deg); }
	38%, 42% { transform: rotate(-12deg); }
	40% { transform: rotate(-18deg); }
}

.vcms-sniff {
	animation: vcms-sniff-burst 12s linear infinite;
}

@keyframes vcms-sniff-burst {
	0%, 36%, 46%, 100% { opacity: 0; transform: scale(0.6); }
	40% { opacity: 0.55; transform: scale(1.4); }
}

@media (max-width: 720px) {
	.vcms-tree-cat {
		width: min(160px, 42vw);
		right: -2%;
	}
	.vcms-dog {
		width: 90px;
	}
	.vcms-bone {
		width: 40px;
		left: 62%;
	}
	@keyframes vcms-dog-run {
		0% { transform: translateX(0) scaleX(1); }
		36% { transform: translateX(calc(62vw - 30px)) scaleX(1); }
		40% { transform: translateX(calc(62vw - 10px)) scaleX(1) translateY(-3px); }
		44% { transform: translateX(calc(62vw - 10px)) scaleX(1) translateY(0); }
		48% { transform: translateX(calc(62vw - 10px)) scaleX(-1); }
		100% { transform: translateX(-120px) scaleX(-1); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.vcms-tree-canopy,
	.vcms-cat,
	.vcms-cat-tail,
	.vcms-zzz,
	.vcms-bone,
	.vcms-dog,
	.vcms-dog-legs .vcms-leg,
	.vcms-dog-tail,
	.vcms-dog-tongue,
	.vcms-dog-head,
	.vcms-sniff {
		animation: none !important;
	}
	.vcms-dog {
		left: 18%;
		transform: none;
	}
	.vcms-bone {
		left: 42%;
	}
}

body[data-path="login"] #page-login {
	position: relative;
	z-index: 1;
}

/* glassy card — visible immediately, no delayed entrance fade */
body[data-path="login"] .login-content.page-card {
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(205, 38, 83, 0.12);
	box-shadow: 0 18px 50px rgba(205, 38, 83, 0.14), 0 4px 14px rgba(15, 23, 34, 0.06);
}

body[data-path="login"] .app-logo {
	animation: vcms-heartbeat 2.8s ease-in-out infinite;
	transform-origin: center;
}

@keyframes vcms-heartbeat {
	0%, 100% { transform: scale(1); }
	12% { transform: scale(1.09); }
	24% { transform: scale(1); }
	36% { transform: scale(1.06); }
	48% { transform: scale(1); }
}

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
	background-color: var(--crb-accent) !important;
	border-color: var(--crb-accent) !important;
	color: #fff !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover {
	background-color: var(--crb-accent-hover) !important;
	border-color: var(--crb-accent-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(205, 38, 83, 0.35);
}

body[data-path="login"] .btn-login:active {
	transform: translateY(0);
}

body[data-path="login"] .form-control:focus {
	border-color: var(--crb-accent) !important;
	box-shadow: 0 0 0 3px rgba(205, 38, 83, 0.15) !important;
}

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"],
	.vcms-blob,
	.vcms-float,
	body[data-path="login"] .app-logo {
		animation: none !important;
	}
	.vcms-float {
		display: none;
	}
}