/*#################################################*/
/* MODERN LOGIN PAGE (index.php)
/* Loaded after style.css and style.custom.php only when the modern UI is on (see index.php),
/* every rule scoped to body#login.tmc-modern. Colours follow the active theme (--theme-*).
/* The theme's login settings still apply: background colour and image, logo on/off and
/* position, card position left / center / right. The card is always opaque (glass look).
/*#################################################*/

body#login.tmc-modern {
	--tm-accent: var(--theme-accent-1, #2B82D4);
	--tm-accent-soft: color-mix(in srgb, var(--tm-accent) 9%, #ffffff);
	--tm-ink: #1E1B2E;
	--tm-ink-2: #4A4760;
	--tm-muted: #6E6B80;
	--tm-line: #E8E6EF;
	--tm-soft: #F3F2F7;
	--tm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
	min-height: 100%;
	overflow-x: hidden;
	font-family: "Manrope", "open sans", system-ui, sans-serif;
	color: var(--tm-ink-2);
	-webkit-font-smoothing: antialiased;
}

/* the background photo moves very slowly (in a layer of its own, so the card stays still) */
body#login.tmc-modern::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	background: inherit;
	background-size: cover;
	background-position: center center;
	transform-origin: 60% 40%;
	animation: tml-drift 40s ease-in-out infinite alternate;
}
/* soft shade so the card stands out on any photo */
body#login.tmc-modern::after {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse at 50% 45%, rgba(20, 16, 40, 0) 0%, rgba(20, 16, 40, 0.28) 75%),
		linear-gradient(180deg, rgba(20, 16, 40, 0.05) 0%, rgba(20, 16, 40, 0.35) 100%);
	pointer-events: none;
}
@keyframes tml-drift { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

.tmc-modern #loading_panel { background: transparent; }

/* animated journey (js/login.journey.js adds the canvas and the tml-journey class): it replaces the
   photo, and on wide screens the card moves to the right so the road and the cluster have room */
/* html.tml-journey is set by a script in <head> (index.php) before the first paint, body.tml-journey
   later by login.journey.js. Until its first frame is drawn a dusk sky close to the scene shows, and
   the scene fades in over it instead of popping. */
html.tml-journey body#login.tmc-modern,
body#login.tmc-modern.tml-journey { background: #0B1B3A linear-gradient(180deg, #1B2A55 0%, #6B3F6E 52%, #E08A5A 62%, #2B3A3A 63%, #1E2A2A 100%) fixed; }
html.tml-journey body#login.tmc-modern::before,
html.tml-journey body#login.tmc-modern::after,
body#login.tmc-modern.tml-journey::before,
body#login.tmc-modern.tml-journey::after { display: none; }
body#login.tmc-modern #tml_journey { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: block; animation: tml-scene-in 0.9s ease-out backwards; }
@keyframes tml-scene-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body#login.tmc-modern #tml_journey { animation: none; } }
/* now and then the scene points visitors to the form (js/login.journey.js adds tml-nudge to the card
   for a few seconds): a glowing ring pulses twice, the Login button shines, a hint shows above */
body#login.tmc-modern .wrapper .inner-wrapper::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -2px;
	bottom: -2px;
	left: -2px;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 2px var(--tm-accent), 0 0 36px 6px color-mix(in srgb, var(--tm-accent) 45%, transparent);
	opacity: 0;
}
body#login.tmc-modern .wrapper .inner-wrapper.tml-nudge::after { animation: tml-ring 1.5s ease-out 2; }
body#login.tmc-modern .wrapper .inner-wrapper.tml-nudge #connect input.button { animation: tml-shine 1.3s ease-in-out 0.4s 2; }
@keyframes tml-ring { 0% { opacity: 0; transform: scale(1); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.035); } }
@keyframes tml-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
body#login.tmc-modern .tml-hint {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	padding: 9px 15px;
	border-radius: 12px;
	background: var(--tm-ink);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 14px 30px -12px rgba(20, 16, 40, 0.6);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 0.35s ease, transform 0.35s var(--tm-ease);
}
body#login.tmc-modern .tml-hint::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--tm-ink); }
body#login.tmc-modern .wrapper .inner-wrapper.tml-nudge .tml-hint { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1001px) {
	html.tml-journey body#login.tmc-modern .wrapper .inner-wrapper,
	html.tml-journey body#login.tmc-modern .wrapper .inner-wrapper[style*="float"],
	body#login.tmc-modern.tml-journey .wrapper .inner-wrapper,
	body#login.tmc-modern.tml-journey .wrapper .inner-wrapper[style*="float"] { margin-left: auto; margin-right: max(6vw, 16px); float: none !important; }
}

/*#################################################*/
/* CARD
/*#################################################*/

body#login.tmc-modern .wrapper .inner-wrapper {
	position: relative;
	width: 400px;
	margin: 40px auto;
	padding: 34px 34px 22px 34px;
	box-sizing: content-box;
	border-radius: 24px;
	background: transparent;
	box-shadow: 0 30px 80px -30px rgba(20, 16, 40, 0.55);
	isolation: isolate;
	opacity: 1 !important;
	animation: tml-rise 0.7s var(--tm-ease) backwards;
}
/* the frosted glass is a layer behind the card's content: a backdrop-filter on the card itself
   would make it the frame for position:fixed children, and the language list (jquery.multiple,
   placed in screen coordinates) then opened at the bottom of the page */
body#login.tmc-modern .wrapper .inner-wrapper::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
body#login.tmc-modern .wrapper .inner-wrapper[style*="float"],
body#login.tmc-modern .wrapper .inner-wrapper { margin-left: auto; margin-right: auto; }

@keyframes tml-rise { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes tml-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

body#login.tmc-modern .logo-block { float: none; display: flex; justify-content: center; margin-bottom: 26px; animation: tml-fade-up 0.6s var(--tm-ease) 0.15s backwards; }
body#login.tmc-modern .logo { margin: 0; width: auto; height: 50px; }

body#login.tmc-modern .registration-closed { border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 12.5px; }

/* the login, recover and register panels sit in one box and the links scroll between them;
   the box is taller for the bigger fields, and scrolls smoothly */
body#login.tmc-modern .wrapper .inner-wrapper .content { height: 270px; scroll-behavior: smooth; }
body#login.tmc-modern .wrapper .inner-wrapper .content .content-block { height: 270px; }

body#login.tmc-modern .content-block .row3 { margin-bottom: 12px; }
body#login.tmc-modern #connect .row3:nth-child(1) { animation: tml-fade-up 0.5s var(--tm-ease) 0.25s backwards; }
body#login.tmc-modern #connect .row3:nth-child(2) { animation: tml-fade-up 0.5s var(--tm-ease) 0.32s backwards; }
body#login.tmc-modern #connect .submit-btn { animation: tml-fade-up 0.5s var(--tm-ease) 0.39s backwards; }

/* fields */
body#login.tmc-modern input.inputbox {
	height: 50px;
	padding-left: 46px;
	border: 1px solid var(--tm-line);
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.9);
	background-position: 16px center;
	background-size: 16px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--tm-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
body#login.tmc-modern input.inputbox:hover { background-color: #ffffff; border-color: #D9D6E3; }
body#login.tmc-modern input.inputbox:focus {
	background-color: #ffffff;
	border-color: var(--tm-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tm-accent) 16%, transparent);
	outline: 0;
}
body#login.tmc-modern input.inputbox::placeholder { color: #9A97AB; font-weight: 500; }
body#login.tmc-modern .content-block .reveal { top: 15px; right: 14px; opacity: 0.6; transition: opacity 0.15s ease; }
body#login.tmc-modern .content-block .reveal:hover { opacity: 1; }

/* main button, with a light sweep across it on hover */
body#login.tmc-modern .wrapper .content-block input.button {
	position: relative;
	height: 50px;
	border: 0;
	border-radius: 14px;
	background-color: var(--tm-accent);
	background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
	background-size: 250% 100%;
	background-position: 130% 0;
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 12px 24px -12px var(--tm-accent);
	transition: transform 0.18s var(--tm-ease), box-shadow 0.18s ease, background-position 0.7s ease;
}
body#login.tmc-modern .wrapper .content-block input.button:hover { opacity: 1; background-position: -30% 0; transform: translateY(-1px); box-shadow: 0 16px 30px -12px var(--tm-accent); }
body#login.tmc-modern .wrapper .content-block input.button:active { transform: translateY(0) scale(0.99); }

/* remember me: the lock that sat inside the button becomes a labelled switch under it
   (track on the block, knob and the translated label text on the label) */
body#login.tmc-modern .wrapper .content-block .submit-btn { display: flex; flex-direction: column-reverse; gap: 14px; }
/* style.css placed this block with right/top offsets (it sat inside the button); relative, those would shift it */
body#login.tmc-modern .wrapper .content-block .submit-btn .remember-block { position: relative; top: auto; right: auto; display: flex; align-items: center; height: 22px; }
body#login.tmc-modern .wrapper .content-block .submit-btn .remember-block::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #C9C5D6;
	box-shadow: inset 0 0 0 1px rgba(20, 16, 40, 0.06);
	transition: background-color 0.2s ease;
}
body#login.tmc-modern .wrapper .content-block .submit-btn .remember-block:has(.custom-checkbox.checked)::before { background: var(--tm-accent); }
body#login.tmc-modern .submit-btn .remember-block .custom-checkbox {
	position: relative;
	display: flex;
	align-items: center;
	width: auto;
	height: 22px;
	padding-left: 46px;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--tm-ink-2);
	cursor: pointer;
	user-select: none;
}
body#login.tmc-modern .submit-btn .remember-block .custom-checkbox.checked { background: none; }
body#login.tmc-modern .submit-btn .remember-block .custom-checkbox::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(20, 16, 40, 0.3);
	transition: left 0.2s var(--tm-ease);
}
body#login.tmc-modern .submit-btn .remember-block .custom-checkbox.checked::before { left: 18px; }
body#login.tmc-modern .submit-btn .remember-block .custom-checkbox::after { content: attr(title); }

/* recover / register links */
body#login.tmc-modern .recover-register-block { margin: 18px 0 0 0; font-size: 13px; color: var(--tm-muted); }
body#login.tmc-modern .recover-register-block span { margin: 0 6px; }
body#login.tmc-modern .recover-register-block li a { color: var(--tm-accent); font-weight: 700; text-decoration: none; }
body#login.tmc-modern .recover-register-block li a:hover { text-decoration: underline; }

/* server choice (multi server login) */
body#login.tmc-modern .server-select .ms-choice { border-radius: 14px; border: 1px solid var(--tm-line); background-color: rgba(255, 255, 255, 0.9); }

/*#################################################*/
/* FOOTER: mobile version and language
/*#################################################*/

body#login.tmc-modern .footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(30, 27, 46, 0.08);
	animation: tml-fade-up 0.5s var(--tm-ease) 0.45s backwards;
}
body#login.tmc-modern .footer .float-left,
body#login.tmc-modern .footer .float-right { float: none; }
body#login.tmc-modern .footer .mobile-v { font-size: 13px; font-weight: 600; color: var(--tm-ink-2); }
body#login.tmc-modern .footer .mobile-v:hover { color: var(--tm-accent); }
body#login.tmc-modern .footer.text { justify-content: center; border-top: 0; padding-top: 6px; font-size: 12px; color: var(--tm-muted); }

/* app store links (Android, iOS) in place of the mobile version link */
body#login.tmc-modern .tml-apps { display: flex; gap: 8px; }
body#login.tmc-modern .tml-app {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px 0 10px;
	box-sizing: border-box;
	border: 1px solid var(--tm-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--tm-ink);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
body#login.tmc-modern .tml-app svg { display: block; flex-shrink: 0; }
body#login.tmc-modern .tml-app:first-child svg { color: #3DDC84; }
body#login.tmc-modern .tml-app:hover { border-color: color-mix(in srgb, var(--tm-accent) 40%, #ffffff); background: #ffffff; color: var(--tm-accent); transform: translateY(-1px); }

/* language: a round globe button (no language name), the list opens as before */
body#login.tmc-modern .footer .ms-parent { width: 34px !important; }
/* until the page has loaded the plain select stands in its place: keep the globe's space, hidden,
   so it does not show as a dropdown and then change (multipleSelect hides it when it builds the button) */
body#login.tmc-modern .footer select#system_language { width: 34px; height: 34px; opacity: 0; }
body#login.tmc-modern .footer .ms-choice {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--tm-line) !important;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4760' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18'/%3E%3C/svg%3E") center / 17px 17px no-repeat !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
body#login.tmc-modern .footer .ms-choice:hover { border-color: color-mix(in srgb, var(--tm-accent) 40%, #ffffff) !important; background-color: #ffffff !important; }
body#login.tmc-modern .footer .ms-choice > span,
body#login.tmc-modern .footer .ms-choice > div { display: none; }
/* jquery.multiple opens its list 24px below the top of the field (the button is 34px tall) and as
   wide as the button: the list gets its own width and ends under the button's right edge */
body#login.tmc-modern .footer .ms-drop { width: 150px !important; margin: 14px 0 0 -116px; }
body#login.tmc-modern .ms-drop { border: 0 !important; border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(20, 16, 40, 0.4); overflow: hidden; }

/*#################################################*/
/* ERROR / INFO DIALOG
/*#################################################*/

body#login.tmc-modern .ui-dialog { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(20, 16, 40, 0.55); animation: tml-fade-up 0.25s var(--tm-ease) backwards; }
body#login.tmc-modern .ui-dialog .ui-dialog-titlebar { height: 34px; line-height: 34px; padding: 6px 16px; background: #ffffff; color: var(--tm-ink); font-weight: 800; border-bottom: 1px solid var(--tm-line); box-shadow: inset 0 3px 0 var(--tm-accent); }
body#login.tmc-modern .ui-dialog .ui-dialog-titlebar .ui-icon { filter: brightness(0) opacity(0.55); }
body#login.tmc-modern .ui-dialog .ui-dialog-titlebar-close .ui-icon { position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; }
body#login.tmc-modern .ui-widget-overlay { background: rgba(20, 16, 40, 0.4); opacity: 1; backdrop-filter: blur(3px); }
body#login.tmc-modern #dialog_notify_text { font-size: 13.5px; line-height: 20px; color: var(--tm-ink); }
body#login.tmc-modern #dialog_notify input.button { height: 36px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--tm-accent); color: #ffffff; font-weight: 700; cursor: pointer; }

/*#################################################*/
/* SMALL SCREENS
/*#################################################*/

@media (max-width: 520px) {
	body#login.tmc-modern .wrapper .inner-wrapper { width: auto; margin: 16px; padding: 26px 20px 18px 20px; float: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	body#login.tmc-modern *,
	body#login.tmc-modern::before { animation: none !important; transition: none !important; }
}

/* messages inside the card (js/login.modern.js) instead of the old popup */
body#login.tmc-modern .tml-msg {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 11px 10px 11px 12px;
	border: 1px solid;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	animation: tml-msg-in 0.28s var(--tm-ease) backwards;
}
body#login.tmc-modern .tml-msg svg { flex: 0 0 auto; margin-top: 0; }
body#login.tmc-modern .tml-msg span { flex: 1 1 auto; padding-top: 1px; }
body#login.tmc-modern .tml-msg.is-error { border-color: #FECACA; background: #FEF2F2; color: #B91C1C; }
body#login.tmc-modern .tml-msg.is-warn { border-color: #FDE68A; background: #FFFBEB; color: #B45309; }
body#login.tmc-modern .tml-msg.is-ok { border-color: #BBF7D0; background: #F0FDF4; color: #15803D; }
body#login.tmc-modern .tml-msg-x {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: -2px -2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 17px;
	line-height: 1;
	opacity: 0.6;
	cursor: pointer;
}
body#login.tmc-modern .tml-msg-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
body#login.tmc-modern input.inputbox.tml-invalid { border-color: #F87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }
body#login.tmc-modern .wrapper .inner-wrapper.tml-shake { animation: tml-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes tml-msg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tml-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(4px); }
	30%, 50%, 70% { transform: translateX(-7px); }
	40%, 60% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
	body#login.tmc-modern .wrapper .inner-wrapper.tml-shake,
	body#login.tmc-modern .tml-msg { animation: none; }
}
html.tmc-dark body#login.tmc-modern .tml-msg.is-error { border-color: rgba(248, 113, 113, 0.35); background: rgba(220, 38, 38, 0.14); color: #FCA5A5; }
html.tmc-dark body#login.tmc-modern .tml-msg.is-warn { border-color: rgba(251, 191, 36, 0.35); background: rgba(217, 119, 6, 0.14); color: #FCD34D; }
html.tmc-dark body#login.tmc-modern .tml-msg.is-ok { border-color: rgba(74, 222, 128, 0.35); background: rgba(22, 163, 74, 0.14); color: #86EFAC; }
html.tmc-dark body#login.tmc-modern .tml-msg-x:hover { background: rgba(255, 255, 255, 0.08); }