/* ═══════════════════════════════════════════════════════════════
   AMRONIX AMROSIEM — Cybersecurity Login Theme
   Split-screen layout: animated left panel + login form right
   ═══════════════════════════════════════════════════════════════ */

:root {
	--amr-navy:         #070F1E;
	--amr-right-bg:     #060D1A;
	--amr-accent:       #0EA5E9;
	--amr-accent-dark:  #0284C7;
	--amr-accent-glow:  rgba(14, 165, 233, 0.35);
	--amr-text:         #E2E8F0;
	--amr-text-dim:     #94A3B8;
	--amr-input-bg:     rgba(255, 255, 255, 0.04);
	--amr-input-border: rgba(14, 165, 233, 0.22);
	--amr-card-bg:      rgba(4, 12, 26, 0.85);
	--amr-card-border:  rgba(14, 165, 233, 0.18);
	--amr-divider:      rgba(14, 165, 233, 0.12);
	--amr-green:        #10B981;
}

* { box-sizing: border-box; }

/* ─── Root container ─── */
.loginview {
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: var(--amr-text);
	overflow: hidden;
}

/* ─── Split layout ─── */
.split-container {
	display: flex;
	width: 100%;
	height: 100%;
}

/* ════════════════════════════════════════════════
   LEFT PANEL — Branding & animations
   ════════════════════════════════════════════════ */
.left-panel {
	flex: 0 0 60%;
	position: relative;
	background: var(--amr-navy);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hexagonal grid background — inline SVG tile */
.hex-grid {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92' viewBox='0 0 80 92'%3E%3Cpolygon points='40,4 76,24 76,64 40,84 4,64 4,24' fill='none' stroke='rgba(14,165,233,0.1)' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 80px 92px;
}

/* Central radial glow */
.left-panel::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 700px;
	height: 700px;
	background: radial-gradient(ellipse, rgba(14,165,233,0.07) 0%, transparent 60%);
	pointer-events: none;
}

/* ─── Scan line animation ─── */
.scan-line {
	position: absolute;
	left: 0;
	top: -6px;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg,
		transparent    0%,
		rgba(14,165,233,0.4) 30%,
		rgba(14,165,233,0.85) 50%,
		rgba(14,165,233,0.4) 70%,
		transparent   100%);
	box-shadow: 0 0 18px rgba(14,165,233,0.5), 0 0 40px rgba(14,165,233,0.2);
	animation: scan-line 5s linear infinite;
	pointer-events: none;
}

@keyframes scan-line {
	0%   { top: -6px;   opacity: 0; }
	4%   { opacity: 1; }
	96%  { opacity: 1; }
	100% { top: 100%;   opacity: 0; }
}

/* ─── Floating hex decorations ─── */
.hex-deco {
	position: absolute;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	opacity: 0;
	animation: hex-float linear infinite;
}

.hex-deco-1 { width: 90px;  height: 90px;  background: rgba(14,165,233,0.07); left: 7%;   top: 12%; animation-duration: 9s;  animation-delay: 0s;   }
.hex-deco-2 { width: 55px;  height: 55px;  background: rgba(14,165,233,0.06); left: 74%;  top: 18%; animation-duration: 12s; animation-delay: 2.5s; }
.hex-deco-3 { width: 110px; height: 110px; background: rgba(14,165,233,0.04); left: 12%;  top: 62%; animation-duration: 10s; animation-delay: 1.8s; }
.hex-deco-4 { width: 65px;  height: 65px;  background: rgba(14,165,233,0.06); left: 78%;  top: 65%; animation-duration: 13s; animation-delay: 3.2s; }
.hex-deco-5 { width: 45px;  height: 45px;  background: rgba(14,165,233,0.08); left: 48%;  top: 6%;  animation-duration: 8s;  animation-delay: 0.8s; }

@keyframes hex-float {
	0%   { opacity: 0; transform: translateY(0) rotate(0deg);   }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-35px) rotate(18deg); }
}

/* ─── Left content ─── */
.left-content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 48px 48px 40px;
	max-width: 500px;
	animation: fade-in-up 0.9s ease both;
}

/* Shield */
.shield-wrapper {
	width: 130px;
	height: 156px;
	margin: 0 auto 32px;
	filter: drop-shadow(0 0 16px rgba(14,165,233,0.35));
	animation: shield-glow 3.5s ease-in-out infinite;
}

.shield-svg { width: 100%; height: 100%; }

.shield-ring {
	transform-origin: 50px 60px;
	animation: ring-pulse 3.5s ease-in-out infinite;
}

@keyframes shield-glow {
	0%, 100% { filter: drop-shadow(0 0 10px rgba(14,165,233,0.25)); }
	50%       { filter: drop-shadow(0 0 30px rgba(14,165,233,0.7)); }
}

@keyframes ring-pulse {
	0%, 100% { opacity: 0.25; transform: scale(1);    }
	50%       { opacity: 0.65; transform: scale(1.07); }
}

/* Brand text — SURAKSHA in the Amronix logo gradient.
   inline-block so the gradient spans the word, not the whole column.
   No text-shadow: it bleeds through gradient-clipped text. */
.brand-name {
	display: inline-block;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 6px;
	padding-left: 6px; /* balances trailing letter-spacing */
	margin: 0;
	text-transform: uppercase;
	background: linear-gradient(90deg, #7c5cff 0%, #3b82f6 50%, #06b6d4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.35));
}

.brand-tagline {
	font-size: 13px;
	color: var(--amr-text-dim);
	margin: 20px 0 36px;
	line-height: 1.6;
}

/* Feature bullets */
.feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	text-align: left;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--amr-text-dim);
	font-size: 13px;
	margin-bottom: 14px;
	transition: color 0.2s;
}

.feature-item:hover { color: var(--amr-text); }

.feature-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--amr-accent);
	flex-shrink: 0;
	box-shadow: 0 0 8px var(--amr-accent);
}

/* ════════════════════════════════════════════════
   RIGHT PANEL — Login form
   ════════════════════════════════════════════════ */
/* Flex column: pill first, badges last, content centred between them
   with margin:auto. No justify-content:center — it would push tall
   content above the scroll origin on short windows. */
.right-panel {
	flex: 0 0 40%;
	background: var(--amr-right-bg);
	border-left: 1px solid var(--amr-divider);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 24px 16px;
	overflow-y: auto;
}

.right-content {
	width: 100%;
	max-width: 360px;
	margin: auto;
	padding: 24px 44px;
	flex-shrink: 0;
	animation: fade-in-up 0.9s ease 0.15s both;
}

/* Logo */
.companylogo {
	display: block;
	margin: 0 auto 28px;
	max-width: 160px;
	max-height: 64px;
	object-fit: contain;
}

/* "Secure Access Portal" heading */
.portal-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
	font-size: 16px;
	font-weight: 600;
	color: var(--amr-text);
	letter-spacing: 0.3px;
}

.portal-lock-svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* ─── Login card ─── */
.inputwrapper {
	background: var(--amr-card-bg);
	border: 1px solid var(--amr-card-border);
	border-radius: 14px;
	padding: 30px 28px 24px;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.55),
		0 0  30px rgba(14,165,233,0.04),
		inset 0 1px 0 rgba(255,255,255,0.03);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ─── Field groups ─── */
.field-group { margin-bottom: 20px; }
.submit-group { margin-bottom: 14px; margin-top: 6px; }

.field-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	color: var(--amr-text-dim);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 7px;
}

/* Input with leading icon */
.input-wrap { position: relative; }

.field-icon {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	color: #475569;
	pointer-events: none;
	z-index: 2;
}

/* ─── Kendo input override ─── */
.loginview .right-panel .k-textbox,
.loginview .right-panel .input-wrap input[type="text"],
.loginview .right-panel .input-wrap input[type="password"] {
	width: 100% !important;
	height: 42px !important;
	background: var(--amr-input-bg) !important;
	background-color: var(--amr-input-bg) !important;
	border: 1px solid var(--amr-input-border) !important;
	border-radius: 8px !important;
	color: var(--amr-text) !important;
	padding: 0 12px 0 38px !important;
	font-size: 13px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.loginview .right-panel .k-textbox:focus,
.loginview .right-panel .input-wrap input[type="text"]:focus,
.loginview .right-panel .input-wrap input[type="password"]:focus {
	border-color: var(--amr-accent) !important;
	box-shadow: 0 0 0 3px rgba(14,165,233,0.16) !important;
	outline: none !important;
	background: rgba(14,165,233,0.03) !important;
}

.loginview .right-panel input::placeholder {
	color: rgba(148, 163, 184, 0.45) !important;
	font-size: 12px;
}

/* ─── Login button ─── */
.loginview .login-btn,
.loginview input[type="submit"].login-btn {
	display: block !important;
	width: 100% !important;
	height: 44px !important;
	background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
	background-color: #0EA5E9 !important;
	border: none !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	cursor: pointer;
	box-shadow: 0 4px 22px rgba(14,165,233,0.38) !important;
	transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
}

.loginview .login-btn:hover,
.loginview input[type="submit"].login-btn:hover {
	opacity: 0.91 !important;
	box-shadow: 0 6px 30px rgba(14,165,233,0.56) !important;
}

.loginview .login-btn:active,
.loginview input[type="submit"].login-btn:active {
	transform: scale(0.985) !important;
}

.loginview .login-btn:disabled,
.loginview input[type="submit"].login-btn:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* ─── Secure badge ─── */
.secure-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 11px;
	color: var(--amr-text-dim);
	letter-spacing: 0.3px;
	opacity: 0.85;
}

.secure-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--amr-green);
	flex-shrink: 0;
	box-shadow: 0 0 7px var(--amr-green);
	animation: dot-blink 2.2s ease-in-out infinite;
}

@keyframes dot-blink {
	0%, 100% { opacity: 1;   }
	50%       { opacity: 0.3; }
}

/* ─── Error notification ─── */
.notification-msg {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	color: #F87171;
	text-align: center;
	min-height: 14px;
}

/* ─── Bottom links ─── */
.bottomwrapper {
	margin-top: 26px;
	text-align: center;
}

.linkwrapper { margin-bottom: 8px; }

.linkstyle {
	font-size: 12px;
	font-weight: 600;
	color: var(--amr-accent);
	text-decoration: none;
	margin: 0 12px;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.linkstyle:hover { opacity: 1; text-decoration: underline; }

.copyright {
	font-size: 11px;
	color: var(--amr-text-dim);
	opacity: 0.55;
	margin: 0;
}

/* ─── "A PRODUCT OF INDIA" pill ─── */
.origin-pill {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 24px;
}

.origin-text {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.25em;
	color: #cbd5e1;
	white-space: nowrap;
}

/* Abstract colour bars — not a flag */
.tricolor {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex-shrink: 0;
}

.tricolor span {
	display: block;
	width: 14px;
	height: 3px;
	border-radius: 2px;
}

.tricolor span:nth-child(1) { background: #FF9933; }
.tricolor span:nth-child(2) { background: #FFFFFF; }
.tricolor span:nth-child(3) { background: #138808; }

/* ─── Security trust badges ─── */
.trust-badges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	max-width: 340px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	align-self: center;
	flex-shrink: 0;
}

.trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 6px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(56, 189, 248, 0.15);
	border-radius: 8px;
}

.trust-icon {
	width: 16px;
	height: 16px;
	color: #0ea5e9;
	flex-shrink: 0;
}

.trust-label {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	text-align: center;
	color: #cbd5e1;
}

/* ─── Page entry animation ─── */
@keyframes fade-in-up {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════
   MOBILE — stack vertically below 768px
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.split-container { flex-direction: column; }

	.left-panel {
		flex: 0 0 auto;
		height: 190px;
		min-height: 190px;
	}

	.left-content { padding: 16px 20px; }
	.shield-wrapper { width: 56px; height: 68px; margin-bottom: 10px; }
	.brand-name { font-size: 22px; letter-spacing: 3px; padding-left: 3px; }
	.brand-tagline,
	.feature-list { display: none; }

	/* min-height:0 — .loginview is fixed + overflow:hidden, so a 100vh
	   panel below the hero would clip the badges out of reach */
	.right-panel {
		flex: 1;
		min-height: 0;
		border-left: none;
		border-top: 1px solid var(--amr-divider);
	}

	.right-content { padding: 16px 4px; max-width: 100%; }
}

/* ════════════════════════════════════════════════
   Kendo grid styles (used in other contexts)
   ════════════════════════════════════════════════ */
.k-grid { font-size: 12px; }
.k-grid td { line-height: 2em; }
.k-grid-header { font-weight: bold; }
.k-header { font-family: Arial; font-size: 12px; }
.k-list { width: auto !important; }