/* It's Your Profile: site-wide look for Frappe's standard pages (2026-11-06).
   Loaded on every website page via hooks.py web_include_css. Page-specific parts are scoped by
   body[data-path=...], so the home page (own styles) is not affected. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap");

@keyframes iyp-site-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes iyp-site-float { to { transform: translate3d(30px, 40px, 0) scale(1.08); } }
@keyframes iyp-site-float-2 { to { transform: translate3d(-40px, -30px, 0) scale(.94); } }
@keyframes iyp-site-shimmer { to { background-position: 200% 0; } }

/* Frappe top bar on every standard page: transparent, with our logo full size */
.navbar { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
.navbar .navbar-brand img { height: 46px !important; width: auto !important; max-height: none !important; max-width: none !important; }
.navbar .nav-link { color: #3F3A5E !important; font-weight: 500; }
.navbar .nav-link:hover { color: #3B2E7E !important; }

/* No "Switch To Desk" / "Apps" in the website's user menu (2026-11-06): the backend stays out of
   sight; staff reach it from the home page's "Backend" link or /desk */
.switch-to-desk, .dropdown-item.apps { display: none !important; }

/* Loading splash: our logo, sized like Frappe's */
.splash img { max-width: 220px !important; height: auto; }

/* ---------- Shared page background: login and the owner's dashboard ---------- */
body[data-path="login"], body[data-path="notifications"] {
	position: relative; isolation: isolate;
	font-family: Sora, system-ui, -apple-system, sans-serif;
	background: linear-gradient(180deg, #F3F0FB 0, #F6F4FC 380px, #fff 900px) no-repeat, #fff !important;
	color: #1E1838;
}
body[data-path="login"]::before, body[data-path="login"]::after,
body[data-path="notifications"]::before, body[data-path="notifications"]::after {
	content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none;
}
body[data-path="login"]::before, body[data-path="notifications"]::before { width: 380px; height: 380px; left: -150px; top: 160px; background: #FFE3CF; opacity: .75; animation: iyp-site-float 12s ease-in-out infinite alternate; }
body[data-path="login"]::after, body[data-path="notifications"]::after { width: 300px; height: 300px; right: -110px; top: 40px; background: #DDF5E8; opacity: .85; animation: iyp-site-float-2 14s ease-in-out infinite alternate; }
body[data-path="login"] .web-footer, body[data-path="notifications"] .web-footer,
body[data-path="login"] .web-footer .footer-info, body[data-path="notifications"] .web-footer .footer-info { background: transparent !important; }
html { overflow-x: clip; }

/* ---------- Login page ---------- */
body[data-path="login"] .page-card,
body[data-path="login"] .login-content.page-card {
	position: relative; overflow: hidden;
	max-width: 440px !important; margin: 48px auto 32px !important;
	padding: 42px 38px 34px !important;
	background: #fff !important; border: 1px solid #E4DFF3 !important; border-radius: 28px !important;
	box-shadow: 0 40px 80px -40px rgba(59, 46, 126, .45) !important;
	animation: iyp-site-rise .7s cubic-bezier(.2, .8, .2, 1) backwards;
}
/* Moving brand stripe along the top of the card */
body[data-path="login"] .page-card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
	background: linear-gradient(90deg, #3B2E7E, #6B55D6, #E87012, #6B55D6, #3B2E7E); background-size: 200% 100%;
	animation: iyp-site-shimmer 6s linear infinite;
}
body[data-path="login"] .page-card-head { align-items: center !important; text-align: center !important; gap: 18px !important; }
/* Our logo in place of Frappe's */
body[data-path="login"] img.app-logo {
	content: url("/assets/its_your_profile/images/iyp-logo.png");
	height: 64px !important; width: auto !important; max-width: 100% !important; max-height: none !important;
}
body[data-path="login"] .page-card-head h4 { font-family: Sora, system-ui, sans-serif; font-weight: 800 !important; letter-spacing: -0.035em; color: #1E1838 !important; text-align: center; }
body[data-path="login"] .page-card-subtitle { color: #5A5578 !important; text-align: center; }
body[data-path="login"] label { color: #1E1838 !important; font-weight: 600; }
body[data-path="login"] .form-control {
	min-height: 46px; background: #fff !important; border: 1px solid #B9B4CC !important; border-radius: 12px !important;
	color: #1E1838 !important; box-shadow: none !important; font-family: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}
body[data-path="login"] .form-control:hover { border-color: #8E88A8 !important; }
body[data-path="login"] .form-control:focus { border-color: #3B2E7E !important; box-shadow: 0 0 0 4px rgba(107, 85, 214, .16) !important; outline: none; }
body[data-path="login"] .es-button[data-variant="solid"]:not(.btn-login-option) {
	min-height: 48px; border: 0 !important; border-radius: 14px !important; color: #fff !important; font-weight: 700 !important; font-family: inherit;
	background: linear-gradient(90deg, #3B2E7E, #6B55D6, #3B2E7E) !important; background-size: 200% 100% !important;
	box-shadow: 0 12px 26px -12px rgba(59, 46, 126, .8);
	transition: transform .15s ease, box-shadow .15s ease, background-position .6s ease;
}
body[data-path="login"] .es-button[data-variant="solid"]:not(.btn-login-option):hover { background-position: 100% 0 !important; transform: translateY(-2px); }
body[data-path="login"] .btn-login-option {
	min-height: 46px; background: #fff !important; border: 1px solid #D3CCE8 !important; border-radius: 14px !important;
	color: #1E1838 !important; font-weight: 600 !important; font-family: inherit;
}
body[data-path="login"] .btn-login-option:hover { border-color: #3B2E7E !important; color: #3B2E7E !important; }
body[data-path="login"] .page-card a, body[data-path="login"] .sign-up-message a { color: #3B2E7E !important; font-weight: 600; }
body[data-path="login"] .page-card a:hover { color: #B55406 !important; }
body[data-path="login"] .sign-up-message { color: #5A5578 !important; }

@media (max-width: 576px) {
	body[data-path="login"]::before, body[data-path="login"]::after,
	body[data-path="notifications"]::before, body[data-path="notifications"]::after { display: none; }
	body[data-path="login"] .page-card { margin: 20px 12px !important; padding: 34px 22px 26px !important; border-radius: 22px !important; }
	body[data-path="login"] img.app-logo { height: 52px !important; }
	.navbar .navbar-brand img { height: 38px !important; }
}
@media (prefers-reduced-motion: reduce) {
	body[data-path]::before, body[data-path]::after, body[data-path="login"] .page-card, body[data-path="login"] .page-card::before { animation: none !important; }
}

/* ---------- Mobile-friendly pass (2026-11-06) ---------- */
@media (max-width: 767px) {
	/* 16px text in inputs stops iPhones from zooming in when a box is tapped */
	body[data-path="login"] .form-control,
	[data-doctype="Web Form"] .form-control,
	[data-doctype="Web Form"] select,
	[data-doctype="Web Form"] textarea { font-size: 16px !important; }
	/* Frappe's collapsible top-bar menu as a clean panel */
	.navbar .navbar-collapse { background: #fff; border: 1px solid #E4DFF3; border-radius: 18px; margin-top: 10px; padding: 8px 12px; box-shadow: 0 24px 50px -24px rgba(30, 24, 56, .4); }
	.navbar .nav-link { padding: 12px 6px !important; font-size: 16px; }
	.navbar-toggler { border: 1px solid #E4DFF3 !important; border-radius: 12px !important; padding: 8px 10px !important; }
}
/* Owner's dashboard on phones: full-width, easy-to-tap buttons */
@media (max-width: 520px) {
	body[data-path="notifications"] .iyp-biz { padding: 16px; border-radius: 20px; }
	body[data-path="notifications"] .iyp-biz-actions { width: 100%; }
	body[data-path="notifications"] .iyp-biz-actions .iyp-b { flex: 1 1 100%; justify-content: center; min-height: 46px; }
	body[data-path="notifications"] .iyp-hello-avatar { width: 48px; height: 48px; border-radius: 14px; }
	body[data-path="notifications"] .iyp-alert { padding: 12px; }
}

/* Android-friendly (2026-11-06): no grey flash on tap, no double-tap delay, buttons press in */
a, button, label, .btn, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active, .es-button:active { transform: scale(.97); }

/* Sign-up page (2026-11-07): a disabled button looks disabled, so people know to fill both boxes */
body[data-path="login"] .es-button:disabled,
body[data-path="login"] .es-button[disabled] { opacity: .5 !important; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
body[data-path="login"] .form-signup .page-card-actions::before {
	content: "Enter your name and email, then tap Create Account."; display: block; margin-bottom: 4px;
	font-size: 13px; color: #7D7898; text-align: center;
}

/* Frappe top bar on phones (2026-11-07): no ☰ button and no big empty menu box. The few items
   (profile picture, or Login) sit in the top-right corner; the profile picture opens a small
   dropdown (My Dashboard, Log out). Replaces the panel style above. */
@media (max-width: 991.98px) {
	.navbar .container { flex-wrap: nowrap; }
	.navbar .navbar-toggler { display: none !important; }
	.navbar .navbar-collapse {
		display: flex !important; flex-basis: auto; flex-grow: 0; margin: 0 0 0 auto !important; padding: 0 !important;
		background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	}
	.navbar .navbar-nav { flex-direction: row; align-items: center; gap: 4px; }
	.navbar .navbar-nav .nav-link { padding: 8px 10px !important; }
	.navbar .navbar-nav .dropdown-menu {
		position: absolute; right: 0; left: auto; top: calc(100% + 8px); min-width: 210px; padding: 8px;
		border: 1px solid #E4DFF3; border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(30, 24, 56, .45);
	}
	.navbar .navbar-nav .dropdown-item { min-height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #1E1838; }
	.navbar .navbar-nav .dropdown-item:active, .navbar .navbar-nav .dropdown-item:hover { background: #F3F0FB; color: #3B2E7E; }
	.navbar #language-switcher { display: none !important; }
}
/* Profile picture in the corner: a neat round button */
.navbar .nav-avatar .avatar, .navbar .user-image-wrapper .avatar { width: 40px !important; height: 40px !important; }
.navbar .nav-avatar .avatar-frame, .navbar .nav-avatar .standard-image { border: 2px solid #E4DFF3; font-weight: 700; }