/* Vigilin VMS Portal — front-end theme, v2.
   Brand colors sampled directly from the official logo:
   Navy #1E2949, Maroon #843139. Change these variables to retheme. */
.vms-portal {
	--vms-navy: #1E2949;
	--vms-navy-light: #2B3A63;
	--vms-navy-lighter: #3D4E7D;
	--vms-maroon: #843139;
	--vms-maroon-hover: #9C3A43;
	--vms-bg: #F5F6F8;
	--vms-panel: #FFFFFF;
	--vms-border: #E4E6EB;
	--vms-text: #1C1F26;
	--vms-text-muted: #6B7280;
	--vms-green: #1E8E5A;
	--vms-green-bg: #E8F6EF;
	--vms-amber: #B4740E;
	--vms-amber-bg: #FCF3E3;
	--vms-red: #C13B3B;
	--vms-red-bg: #FBEAEA;

	background: var(--vms-bg);
	color: var(--vms-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height: 1.5;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.vms-portal * { box-sizing: border-box; }

.vms-portal h1, .vms-portal h2, .vms-portal h3 {
	font-family: 'Poppins', 'Inter', sans-serif;
	color: var(--vms-text);
	font-weight: 600;
}
.vms-portal h1 { font-size: 22px; margin: 0 0 4px; }
.vms-portal h2 { font-size: 16px; margin: 0 0 16px; }
.vms-portal p { color: var(--vms-text-muted); }

/* ---------- Layout: sidebar + main ---------- */
.vms-portal-layout {
	display: flex;
	min-height: 100vh;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.vms-sidebar-toggle-checkbox { display: none !important; }

.vms-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: var(--vms-navy);
	color: #fff;
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	align-self: flex-start;
	min-height: 100vh;
}
.vms-sidebar-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 8px 22px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.vms-sidebar-brand .logo-chip {
	background: #ffffff;
	border-radius: 12px;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.vms-sidebar-brand img { height: 68px; width: auto; max-width: 100%; display: block; }
.vms-sidebar-brand .tagline { font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; color: rgba(255,255,255,0.55); }

.vms-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.vms-sidebar-nav a {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 12px; border-radius: 8px;
	color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px; font-weight: 500;
	border-left: 3px solid transparent;
}
.vms-sidebar-nav a .ico { width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vms-sidebar-nav a .ico svg { display: block; }
.vms-sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.vms-sidebar-nav a.active { background: var(--vms-maroon); color: #fff; }

.vms-sidebar-user {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: 16px; margin-top: 20px;
	font-size: 13px; color: rgba(255,255,255,0.6);
}
.vms-sidebar-user strong { display: block; color: #fff; font-size: 14px; margin-bottom: 6px; }
.vms-sidebar-user .vms-role-badge { margin-bottom: 10px; }
.vms-sidebar-user a { display: block; margin-top: 8px; color: rgba(255,255,255,0.75); text-decoration: none; }
.vms-sidebar-user a:hover { color: #fff; }

.vms-mobile-topbar {
	display: none !important;
	background: #ffffff;
	color: var(--vms-navy);
	align-items: center;
	justify-content: center;
	position: sticky; top: 0; z-index: 20;
	padding: 14px 18px;
	cursor: pointer;
	border-bottom: 1px solid var(--vms-border);
	box-shadow: 0 1px 4px rgba(16,24,40,0.06);
}
.vms-mobile-topbar .logo-wrap { display: flex; align-items: center; justify-content: center; width: 100%; }
.vms-mobile-topbar img { height: 52px; width: auto; }
.vms-mobile-topbar .burger {
	position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font-size: 24px; line-height: 1; font-weight: 700; color: var(--vms-navy);
}

.vms-main {
	flex: 1;
	padding: 28px 32px 60px;
	max-width: 1100px;
	min-width: 0;
	width: 100%;
}

/* ---------- Cards / panels ---------- */
.vms-portal-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.vms-portal-card {
	flex: 1; min-width: 140px;
	background: var(--vms-panel);
	border: 1px solid var(--vms-border);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(16,24,40,0.05);
	border-top: 3px solid var(--vms-border);
}
.vms-portal-card .num { display: block; font-size: 30px; font-weight: 700; font-family: 'Poppins', sans-serif; color: var(--vms-navy); }
.vms-portal-card .label { display: block; font-size: 12.5px; color: var(--vms-text-muted); margin-top: 4px; font-weight: 500; }
.vms-portal-card.green { border-top-color: var(--vms-green); }
.vms-portal-card.green .num { color: var(--vms-green); }
.vms-portal-card.amber { border-top-color: var(--vms-amber); }
.vms-portal-card.amber .num { color: var(--vms-amber); }
.vms-portal-card.red { border-top-color: var(--vms-red); }
.vms-portal-card.red .num { color: var(--vms-red); }
.vms-portal-card.gold { border-top-color: var(--vms-maroon); }
.vms-portal-card.gold .num { color: var(--vms-maroon); }

.vms-portal-panel {
	background: var(--vms-panel);
	border: 1px solid var(--vms-border);
	border-radius: 12px;
	padding: 22px 24px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(16,24,40,0.05);
}

/* ---------- Tables ---------- */
.vms-portal table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13.5px; }
.vms-portal table th {
	text-align: left; color: var(--vms-text-muted); font-weight: 600; padding: 10px 10px;
	border-bottom: 1px solid var(--vms-border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
}
.vms-portal table td { padding: 12px 10px; border-bottom: 1px solid var(--vms-border); vertical-align: top; color: var(--vms-text); }
.vms-portal table tr:last-child td { border-bottom: none; }
.vms-portal table tbody tr:hover { background: #FAFAFB; }

/* ---------- Forms ---------- */
.vms-portal label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--vms-text); font-weight: 500; }
.vms-portal input[type=text], .vms-portal input[type=email], .vms-portal input[type=password],
.vms-portal input[type=number], .vms-portal input[type=date], .vms-portal select, .vms-portal textarea {
	width: 100%; padding: 10px 14px; background: #fff;
	border: 1px solid var(--vms-border); border-radius: 8px; color: var(--vms-text); font-size: 14px;
	font-family: inherit;
}
.vms-portal input:focus, .vms-portal select:focus, .vms-portal textarea:focus {
	outline: none; border-color: var(--vms-navy); box-shadow: 0 0 0 3px rgba(30,41,73,0.1);
}
.vms-portal input[type=file] { color: var(--vms-text-muted); border: 1px dashed var(--vms-border); background: var(--vms-bg); }

/* ---------- Buttons ---------- */
.vms-portal .vms-btn, .vms-portal button, .vms-portal input[type=submit] {
	display: inline-block; background: var(--vms-maroon); color: #fff; border: none;
	padding: 11px 22px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
	text-decoration: none; margin-top: 14px; font-family: inherit;
}
.vms-portal .vms-btn:hover, .vms-portal button:hover, .vms-portal input[type=submit]:hover { background: var(--vms-maroon-hover); }
.vms-portal .vms-btn.secondary { background: #fff; color: var(--vms-navy); border: 1px solid var(--vms-border); }
.vms-portal .vms-btn.secondary:hover { background: var(--vms-bg); }
.vms-portal .vms-btn.danger { background: #fff; color: var(--vms-red); border: 1px solid var(--vms-red); }

/* ---------- Document lists ---------- */
.vms-document-list { margin: 0 0 20px; padding-left: 0; list-style: none; }
.vms-document-list li { padding: 8px 0; border-bottom: 1px solid var(--vms-border); font-size: 13.5px; }
.vms-document-list li:last-child { border-bottom: none; }
.vms-document-list a { color: var(--vms-navy); text-decoration: none; font-weight: 600; }
.vms-document-list a:hover { text-decoration: underline; }

/* ---------- Badges / notices ---------- */
.vms-portal .vms-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.vms-portal .vms-badge.green { background: var(--vms-green-bg); color: var(--vms-green); }
.vms-portal .vms-badge.amber { background: var(--vms-amber-bg); color: var(--vms-amber); }
.vms-portal .vms-badge.red { background: var(--vms-red-bg); color: var(--vms-red); }

.vms-portal .vms-status-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.vms-portal .vms-status-badge.green { background: var(--vms-green-bg); color: var(--vms-green); }
.vms-portal .vms-status-badge.amber { background: var(--vms-amber-bg); color: var(--vms-amber); }
.vms-portal .vms-status-badge.red   { background: var(--vms-red-bg); color: var(--vms-red); }
.vms-portal .vms-status-badge.grey  { background: #F0F1F3; color: #4B5563; }

.vms-portal .vms-role-badge {
	display: inline-block; padding: 3px 11px; border-radius: 20px;
	font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap;
}
.vms-portal .vms-role-badge.navy   { background: var(--vms-navy); }
.vms-portal .vms-role-badge.plum   { background: #6B3B52; }
.vms-portal .vms-role-badge.purple { background: #6B4C9A; }
.vms-portal .vms-role-badge.blue   { background: #2C6FBB; }
.vms-portal .vms-role-badge.teal   { background: #1E8E82; }
.vms-portal .vms-role-badge.green  { background: var(--vms-green); }
.vms-portal .vms-role-badge.grey   { background: #6B7280; }
.vms-portal .vms-role-badge.red    { background: var(--vms-red); }
.vms-portal .vms-role-badge.maroon { background: var(--vms-maroon); }

.vms-portal .vms-name-with-badge { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.vms-portal .vms-name-with-badge strong { font-size: 14px; font-weight: 600; }

/* ---------- Date filter bar (Reports, Audit Trail) ---------- */
.vms-portal .vms-filter-bar {
	display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
	background: var(--vms-panel); border: 1px solid var(--vms-border); border-radius: 10px;
	padding: 16px 20px; margin: 4px 0 20px; box-shadow: 0 1px 3px rgba(16,24,40,0.05);
}
.vms-portal .vms-filter-field label {
	display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
	color: var(--vms-text-muted); font-weight: 600; margin-bottom: 4px;
}
.vms-portal .vms-filter-field input[type=date] { padding: 8px 12px; }
.vms-portal .vms-filter-bar .vms-btn { margin-top: 0; }

.vms-portal .vms-notice { padding: 13px 18px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 500; }
.vms-portal .vms-notice.success { background: var(--vms-green-bg); border: 1px solid rgba(30,142,90,0.25); color: var(--vms-green); }
.vms-portal .vms-notice.error { background: var(--vms-red-bg); border: 1px solid rgba(193,59,59,0.25); color: var(--vms-red); }

/* ---------- Login screen ---------- */
.vms-portal-login-wrap {
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	background: var(--vms-bg); padding: 24px;
}
.vms-portal-login { max-width: 380px; width: 100%; text-align: center; }
.vms-portal-login img { max-width: 220px; width: 100%; height: auto; margin-bottom: 18px; }
.vms-portal-login h1 { margin-bottom: 2px; letter-spacing: 0.3px; }
.vms-portal-login .tagline { font-size: 13px; color: var(--vms-text-muted); margin-bottom: 24px; }
.vms-portal-login .vms-portal-panel { text-align: left; }
.vms-portal-login .vms-btn { width: 100%; text-align: center; }

.vms-muted { color: var(--vms-text-muted); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.vms-portal-layout { flex-direction: column; }
	.vms-sidebar {
		position: fixed; top: 0; left: 0; height: 100vh; min-height: 100vh; z-index: 30;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		box-shadow: 8px 0 24px rgba(0,0,0,0.15);
	}
	.vms-sidebar-toggle-checkbox:checked ~ .vms-sidebar { transform: translateX(0); }
	.vms-mobile-topbar { display: flex !important; }
	.vms-main { padding: 20px 16px 48px; max-width: 100%; }
	.vms-portal-cards { flex-direction: column; }

	.vms-portal table, .vms-portal table thead, .vms-portal table tbody,
	.vms-portal table th, .vms-portal table td, .vms-portal table tr { display: block; }
	.vms-portal table thead { display: none; }
	.vms-portal table tr { border-bottom: 1px solid var(--vms-border); padding: 10px 0; }
	.vms-portal table td { border-bottom: none; padding: 4px 0; }
	.vms-portal table td:before {
		content: attr(data-label); display: block; font-size: 10.5px; color: var(--vms-maroon);
		text-transform: uppercase; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 2px;
	}
}

/* ---------- Desktop: ensure the portal always renders at full desktop
   width and never gets squeezed by the theme's own content container ---------- */
@media (min-width: 901px) {
	.vms-portal-layout { min-height: 100vh; }
	.vms-main { padding: 36px 48px 60px; }
	.vms-sidebar { position: sticky !important; transform: none !important; display: flex !important; }
	.vms-mobile-topbar { display: none !important; }
}