/*
 * Vansales Theme for MantisBT 2.28 (ACE admin template + Bootstrap 3).
 * Brand: #1765B3. Loaded after core CSS via EVENT_LAYOUT_RESOURCES.
 * CSP allows only same-origin assets, so images use absolute /images/ paths.
 */
:root {
	--vs-blue: #1765B3;
	--vs-blue-dark: #0E4A87;
	--vs-blue-deep: #0A3463;
	--vs-blue-light: #EAF2FB;
	--vs-ink: #1C2B3F;
	--vs-muted: #6B7A90;
	--vs-border: #D6DFEA;
	--vs-radius: 10px;
}

body {
	font-family: "Open Sans", "Sukhumvit Set", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
	color: var(--vs-ink);
}

a, a:focus { color: var(--vs-blue); }
a:hover { color: var(--vs-blue-dark); }

/* ------------------------------------------------------------------ */
/* Login, password and lost-password pages                            */
/* ------------------------------------------------------------------ */
/* ace-mantis.css forces .light-login { background: #fff !important } */
body.login-layout,
body.login-layout.light-login {
	min-height: 100vh;
	background-color: var(--vs-blue-deep) !important;
	background-image:
		radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, 0) 38%),
		radial-gradient(circle at 85% 85%, rgba(44, 139, 224, .45) 0, rgba(44, 139, 224, 0) 45%),
		linear-gradient(135deg, var(--vs-blue-deep) 0%, var(--vs-blue) 60%, #2C8BE0 100%) !important;
	background-attachment: fixed !important;
}

/* faint route dots across the background */
body.login-layout::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .13) 1.2px, transparent 1.3px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 70%);
	mask-image: linear-gradient(160deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 70%);
}

body.login-layout::after {
	content: "\00A9  Vansales Application Co., Ltd.";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 18px;
	text-align: center;
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .6);
	pointer-events: none;
}

.login-layout .main-container,
.login-layout .main-content {
	background: transparent !important;
}

/* ACE paints a white sheet behind .main-container */
.login-layout .main-container::before { display: none !important; }

.login-layout .main-content {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 32px 16px 64px;
	margin: 0;
}

.login-layout .main-content > .row {
	width: 100%;
	max-width: 440px;
	margin: 0;
}

.login-layout .main-content > .row > [class*="col-"] {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.login-layout .login-container {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 40px 40px 32px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(4, 25, 55, .35), 0 2px 6px rgba(4, 25, 55, .12);
}

.login-layout .login-container .space-12,
.login-layout .login-container .space-24,
.login-layout .login-container .space-6 {
	display: none;
}

.login-layout .login-logo {
	text-align: center;
	margin: 0 0 6px;
}

.login-layout .login-logo img {
	height: 54px;
	width: auto;
	max-width: 100%;
}

.login-layout .login-logo::after {
	content: "Helpdesk";
	display: block;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--vs-muted);
}

.login-layout .widget-box,
.login-layout .widget-box.visible {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

.login-layout .widget-body,
.login-layout .widget-main,
body.login-layout.light-login .widget-box .widget-main,
body.login-layout .widget-box .widget-body {
	background: transparent !important;
	border: 0 !important;
	padding: 0;
}

body.login-layout .widget-box .widget-main {
	padding: 22px 0 0 !important;
}

.login-layout .widget-main .header,
.login-layout h4.header {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	color: var(--vs-ink);
}

.login-layout .widget-main .header .ace-icon { display: none; }

.login-layout fieldset label.block { margin-bottom: 14px; }

.login-layout .form-control,
.login-layout input[type="text"],
.login-layout input[type="password"],
.login-layout input[type="email"] {
	height: 46px;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--vs-border);
	border-radius: var(--vs-radius) !important;
	font-size: 15px;
	color: var(--vs-ink);
	background: #F8FAFD;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.login-layout .form-control:focus,
.login-layout input:focus {
	border-color: var(--vs-blue);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(23, 101, 179, .16);
	outline: 0;
}

.login-layout .input-icon > .ace-icon {
	line-height: 46px;
	right: 6px;
	color: #9AA8BA;
}

.login-layout .input-icon > input:focus + .ace-icon { color: var(--vs-blue); }

.login-layout .btn,
.login-layout input[type="submit"].btn {
	display: block;
	float: none !important;
	width: 100% !important;
	height: 46px;
	margin-top: 6px;
	border: 0 !important;
	border-radius: var(--vs-radius);
	background: var(--vs-blue) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	text-shadow: none !important;
	box-shadow: 0 6px 16px rgba(23, 101, 179, .28);
	transition: background .15s, transform .05s;
}

.login-layout .btn:hover,
.login-layout .btn:focus { background: var(--vs-blue-dark) !important; }
.login-layout .btn:active { transform: translateY(1px); }

/* "Remember me", lost password, signup links */
.login-layout .toolbar,
.login-layout .widget-body .toolbar {
	background: transparent !important;
	border: 0 !important;
	padding: 18px 0 0 !important;
	text-align: center;
}

.login-layout .toolbar a,
.login-layout .widget-main a {
	color: var(--vs-blue) !important;
	text-shadow: none !important;
	font-size: 13px;
}

.login-layout label.inline,
.login-layout .lbl { color: var(--vs-muted); font-size: 13px; }

.login-layout .alert {
	border-radius: var(--vs-radius);
	margin-bottom: 16px;
}

.login-layout #btn-scroll-up { display: none !important; }

/* the inner widget-box must stay frameless (generic widget border rule below) */
body.login-layout .widget-box,
body.login-layout .widget-box.visible {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* "Enter password for 'user'" is a bare text node in the fieldset */
.login-layout #login-form fieldset {
	font-size: 13px;
	color: var(--vs-muted);
}

.login-layout #login-form label.block { margin-top: 8px; }

.login-layout #login-form .clearfix { margin: 2px 0; }

/* breathing room between the password box and the checkbox group */
.login-layout #login-form label.block { margin-bottom: 0 !important; }
.login-layout #login-form label.block + .clearfix { margin-top: 18px; }

.login-layout #login-form label.inline {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.45;
	cursor: pointer;
}

/* checkbox (ACE draws the box + tick in .lbl::before): flex keeps a wrapped
   label aligned with the text without moving the tick */
.login-layout #login-form label.inline .lbl {
	display: flex;
	align-items: flex-start;
}

.login-layout #login-form input.ace[type="checkbox"] + .lbl::before {
	flex: 0 0 auto;
	margin-right: 8px;
	border: 1px solid #C5D2E2;
	border-radius: 4px;
	color: var(--vs-blue);
	background-color: #fff;
}

.login-layout #login-form input.ace[type="checkbox"]:hover + .lbl::before,
.login-layout #login-form input.ace[type="checkbox"] + .lbl:hover::before,
.login-layout #login-form input.ace[type="checkbox"]:focus + .lbl::before {
	border-color: var(--vs-blue);
	box-shadow: none;
}

.login-layout #login-form input.ace[type="checkbox"]:checked + .lbl::before {
	border-color: var(--vs-blue);
	background-color: var(--vs-blue-light);
}

/* username step: short intro and an account hint (no core change) */
.login-layout #login-form:has(#username) fieldset::before {
	content: "Sign in to the Vansales team work log.";
	display: block;
	margin: -6px 0 18px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vs-muted);
}

.login-layout #login-form:has(#username) fieldset::after {
	content: "Need an account? Ask your administrator.";
	display: block;
	clear: both;
	padding-top: 18px;
	text-align: center;
	font-size: 12.5px;
	color: #8A97A8;
}

.login-layout #login-form .space-10 { height: 14px; }

.login-layout #login-form > fieldset > a.pull-right {
	float: none !important;
	display: block;
	margin-top: 16px;
	text-align: center;
	font-size: 13px;
}

@media (max-width: 480px) {
	.login-layout .login-container { padding: 30px 22px 24px; border-radius: 14px; }
	.login-layout .login-logo img { height: 44px; }
}

/* ------------------------------------------------------------------ */
/* Top navbar                                                         */
/* ------------------------------------------------------------------ */
.navbar,
.navbar-default,
.navbar .navbar-container {
	background: var(--vs-blue) !important;
	border-color: var(--vs-blue-dark) !important;
}

.navbar .navbar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	letter-spacing: .01em;
}

.navbar .navbar-brand::before {
	content: "";
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: url("/images/vansales-mark-white.svg") no-repeat center / contain;
}

.ace-nav > li { border-left-color: rgba(255, 255, 255, .14) !important; }

.ace-nav > li > a,
.ace-nav > li.grey > a,
.ace-nav > li.light-blue > a,
.ace-nav > li.purple > a,
.ace-nav > li.green > a {
	background-color: transparent !important;
}

.ace-nav > li > a:hover,
.ace-nav > li.open > a,
.ace-nav > li > a:focus {
	background-color: rgba(255, 255, 255, .12) !important;
}

.navbar .btn,
.navbar .btn-primary,
.navbar-buttons .btn {
	background: rgba(255, 255, 255, .14) !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 8px !important;
	text-shadow: none !important;
}

.navbar .btn:hover,
.navbar-buttons .btn:hover { background: rgba(255, 255, 255, .24) !important; }

/* ------------------------------------------------------------------ */
/* Sidebar                                                            */
/* ------------------------------------------------------------------ */
.nav-list > li.active > a,
.nav-list > li.active > a:hover,
.nav-list > li.active > a .menu-icon { color: var(--vs-blue) !important; }

/* li.active::after is ACE's border-triangle pointer — leave its border colours alone */
/* ACE skin-3 paints a 16x24 block (a::before) on the active item while hovered */
.sidebar .nav-list > li.active > a::before { display: none !important; }

/* ------------------------------------------------------------------ */
/* Widgets, buttons, labels                                           */
/* ------------------------------------------------------------------ */
/* Light card headers — solid blue on every widget was too heavy */
.widget-box,
.widget-box.widget-color-blue2 {
	border: 1px solid #DCE5F0 !important;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16, 42, 80, .06);
}

.widget-box.widget-color-blue2 > .widget-header {
	background: #F4F8FD !important;
	border: 0 !important;
	border-top: 3px solid var(--vs-blue) !important;
	border-bottom: 1px solid #E3EAF3 !important;
	color: var(--vs-ink) !important;
}

.widget-box.widget-color-blue2 > .widget-header > .widget-title,
.widget-box.widget-color-blue2 > .widget-header > .widget-title a {
	color: var(--vs-ink) !important;
	font-weight: 600;
	font-size: 15px;
}

.widget-box.widget-color-blue2 > .widget-header .ace-icon,
.widget-box.widget-color-blue2 > .widget-header > .widget-toolbar > a,
.widget-box.widget-color-blue2 > .widget-header > .widget-toolbar .ace-icon {
	color: var(--vs-blue) !important;
}

.widget-box.widget-color-blue2 > .widget-header > .widget-toolbar {
	border-left-color: #DCE5F0 !important;
}

.widget-box.widget-color-blue2 > .widget-header .badge {
	background: #E1EBF7 !important;
	color: var(--vs-blue-dark) !important;
	font-weight: 600;
	text-shadow: none;
}

.widget-box.widget-color-blue2 > .widget-header .btn {
	background: #fff !important;
	color: var(--vs-blue) !important;
	border: 1px solid #CFDCEC !important;
	border-radius: 6px !important;
	text-shadow: none !important;
}

.widget-box.widget-color-blue2 > .widget-header .btn:hover {
	background: var(--vs-blue-light) !important;
	border-color: var(--vs-blue) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-info,
.btn-info:focus {
	background-color: var(--vs-blue) !important;
	border-color: var(--vs-blue) !important;
}

.btn-primary:hover,
.btn-info:hover,
.open > .btn-primary.dropdown-toggle {
	background-color: var(--vs-blue-dark) !important;
	border-color: var(--vs-blue-dark) !important;
}

.btn-white.btn-primary {
	background-color: #fff !important;
	color: var(--vs-blue) !important;
	border-color: var(--vs-border) !important;
}

.btn-white.btn-primary:hover {
	background-color: var(--vs-blue-light) !important;
	border-color: var(--vs-blue) !important;
}

.form-control:focus {
	border-color: var(--vs-blue);
	box-shadow: 0 0 0 3px rgba(23, 101, 179, .14);
}

.breadcrumbs { background-color: #F6F9FD; border-bottom-color: #E3EAF3; }

/* ------------------------------------------------------------------ */
/* Footer: replace the MantisBT logo with Vansales                     */
/* ------------------------------------------------------------------ */
#powered-by-mantisbt-logo { display: none !important; }

/* Hide "Powered by MantisBT" + "Copyright © MantisBT Team" (hard-coded in layout_footer);
   keep the copyright_statement and contact lines. */
.footer address > strong:first-child,
.footer address > strong:first-child + br,
.footer address > strong:first-child + br + small,
.footer address > strong:first-child + br + small + br {
	display: none !important;
}

.footer address > small {
	display: block;
	color: var(--vs-muted);
	line-height: 1.6;
}

.footer address { margin: 6px 0 0; }

.vansales-footer-logo { padding-top: 6px; }

.vansales-footer-logo img {
	height: 30px;
	width: auto;
	opacity: .9;
	transition: opacity .15s;
}

.vansales-footer-logo a:hover img { opacity: 1; }

.footer .footer-inner .footer-content {
	border-top-color: #E3EAF3;
}