/*
 * TW Bug Tracker — layout / spacing polish
 * Keeps the classic blue look; fixes cramped headers, login gaps, empty boxes
 */

:root {
	--tw-blue: #0d6efd;
	--tw-blue-dark: #0b5ed7;
	--tw-navy: #0b1f33;
	--tw-ink: #1c2b3a;
	--tw-muted: #5f7388;
	--tw-line: #d7e0ea;
	--tw-surface: #ffffff;
	--tw-canvas: #eef2f6;
	--tw-radius: 10px;
	--tw-radius-sm: 6px;
}

/* ---------- Page canvas ---------- */
body.skin-3 {
	background-color: var(--tw-canvas) !important;
	-webkit-font-smoothing: antialiased;
}

.skin-3 .main-container:before {
	background: var(--tw-canvas) !important;
	background-image: none !important;
}

.page-content {
	background: transparent !important;
	padding: 14px 16px 28px !important;
}

/* ---------- Navbar: keep blue, improve spacing ---------- */
.skin-3 .navbar,
#navbar.navbar-default,
.navbar {
	background: var(--tw-blue) !important;
	border: 0 !important;
	min-height: 50px;
	box-shadow: 0 2px 10px rgba(13, 110, 253, 0.25);
}

.navbar .navbar-brand {
	padding-top: 14px;
	padding-bottom: 14px;
	font-weight: 600;
}

.ace-nav > li {
	border-left: 0 !important;
	line-height: 50px !important;
	height: 50px !important;
}

.ace-nav > li > a {
	height: 50px !important;
	line-height: 50px !important;
	background: transparent !important;
}

.ace-nav > li > a.btn,
.ace-nav .btn-success,
.navbar .btn-success,
#navbar .btn-success {
	height: 32px !important;
	line-height: 32px !important;
	padding: 0 12px !important;
	margin: 9px 5px 0 !important;
	border-radius: 4px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/* ---------- Sidebar spacing ---------- */
.skin-3 .nav-list > li > a {
	margin: 2px 8px;
	border-radius: 6px;
	padding-left: 12px !important;
}

/* ---------- Breadcrumbs / page header ---------- */
.breadcrumbs {
	background: transparent !important;
	border: 0 !important;
	padding: 6px 2px 12px !important;
	min-height: auto !important;
}

.page-header {
	margin: 0 0 12px !important;
	border: 0 !important;
	padding-bottom: 0 !important;
}

/* ---------- Widget cards: spacing + readable blue headers ---------- */
.widget-box,
.widget-color-blue2 {
	border-radius: var(--tw-radius) !important;
	overflow: hidden;
	margin-bottom: 14px !important;
	box-shadow: 0 4px 14px rgba(15, 35, 60, 0.06);
}

.widget-color-blue2 {
	border-color: var(--tw-blue) !important;
}

.widget-color-blue2 > .widget-header {
	background: var(--tw-blue) !important;
	border-color: var(--tw-blue) !important;
	color: #fff !important;
	min-height: 42px;
	padding: 0 10px 0 14px !important;
}

/* Title + icon spacing (fixes clipped icons) */
.widget-color-blue2 > .widget-header .widget-title,
.widget-header .widget-title {
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 42px;
	padding: 0 !important;
	margin: 0 !important;
}

.widget-color-blue2 > .widget-header .widget-title > .ace-icon,
.widget-color-blue2 > .widget-header .widget-title > .fa,
.widget-header .widget-title > .ace-icon,
.widget-header .widget-title > .fa {
	color: #fff !important;
	margin-right: 8px !important;
	width: 1.15em;
	text-align: center;
}

.widget-toolbar {
	line-height: 42px !important;
	padding-right: 2px;
}

.widget-toolbar .badge,
.widget-header .badge {
	margin: 0 6px !important;
	vertical-align: middle;
}

.widget-toolbar .btn,
.widget-header .btn,
.widget-toolbar .btn-white {
	margin-left: 4px !important;
	padding: 2px 8px !important;
	line-height: 1.35 !important;
	font-size: 11px !important;
	border-radius: 4px !important;
	vertical-align: middle;
}

/* Remove teal accent bar we added earlier */
.widget-header:before,
.widget-color-blue2 > .widget-header:before {
	display: none !important;
}

/* Empty boxes should not look huge */
.widget-main {
	padding: 12px 14px !important;
	min-height: 0 !important;
}

.widget-body .table-responsive,
.widget-body .widget-main {
	min-height: 0 !important;
}

/* My View empty panels */
.widget-box .widget-body {
	background: #fff;
}

.widget-box .widget-body .table {
	margin-bottom: 0 !important;
}

/* Timeline header controls spacing */
#timeline .widget-header,
.widget-box#timeline .widget-header,
div[id*="timeline"] .widget-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	padding: 6px 10px 6px 14px !important;
	min-height: 46px;
}

#timeline .widget-header .widget-title,
div[id*="timeline"] .widget-header .widget-title {
	float: none !important;
	line-height: 1.3 !important;
	margin-right: 8px;
}

#timeline .widget-toolbar,
div[id*="timeline"] .widget-toolbar {
	float: none !important;
	line-height: 1.3 !important;
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* Fallback if timeline has no id — general toolbar alignment in blue headers */
.widget-color-blue2 > .widget-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.widget-color-blue2 > .widget-header .widget-title {
	float: none !important;
	flex: 1 1 auto;
	min-width: 140px;
}

.widget-color-blue2 > .widget-header .widget-toolbar {
	float: none !important;
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	line-height: 1.2 !important;
}

.widget-color-blue2 > .widget-header .widget-toolbar > a[data-action] {
	color: rgba(255, 255, 255, 0.9) !important;
	padding: 0 4px;
}

/* ---------- Login layout spacing ---------- */
body.login-layout.light-login {
	min-height: 100vh;
	background:
		radial-gradient(1100px 480px at 12% -8%, rgba(13, 110, 253, 0.18), transparent 55%),
		linear-gradient(155deg, #071626 0%, #0f2740 45%, #163850 100%) !important;
	position: relative;
}

body.login-layout.light-login:before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 56px 56px;
	opacity: 0.45;
}

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

.login-layout .login-container {
	max-width: 420px;
	margin: 0 auto;
	padding-top: 5vh;
	padding-bottom: 5vh;
}

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

.login-layout .login-logo img {
	max-width: 180px;
	width: auto;
	height: auto;
	background: #fff;
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.login-layout .login-brand {
	margin-top: 14px;
	color: #f4f8fc;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.login-layout .login-brand-sub {
	margin-top: 6px;
	margin-bottom: 4px;
	color: rgba(232, 242, 248, 0.72);
	font-size: 13px;
}

.login-layout #login-box.widget-box,
.login-layout .signup-box.widget-box,
.login-layout .widget-box {
	border-radius: 12px !important;
	border: 0 !important;
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3) !important;
	background: #fff !important;
	overflow: hidden;
}

.login-layout .widget-header,
.login-layout .widget-color-blue2 > .widget-header {
	background: #fff !important;
	border-bottom: 1px solid #e6edf4 !important;
	color: var(--tw-ink) !important;
	display: block !important;
	padding: 14px 20px !important;
	min-height: auto;
}

.login-layout .widget-header .widget-title {
	float: none !important;
	display: block;
	width: 100%;
	color: var(--tw-ink) !important;
	font-size: 16px;
	line-height: 1.3 !important;
	font-weight: 700;
}

.login-layout .widget-header .widget-title > .ace-icon,
.login-layout .widget-header .widget-title > .fa {
	color: var(--tw-muted) !important;
	margin-right: 8px !important;
}

.login-layout .widget-main {
	padding: 20px 22px 8px !important;
}

.login-layout .widget-main p {
	margin: 0 0 12px;
	color: var(--tw-muted);
}

.login-layout input[type="text"],
.login-layout input[type="password"],
.login-layout .form-control {
	min-height: 42px !important;
	margin-bottom: 4px;
}

.login-layout .form-actions {
	background: transparent !important;
	border: 0 !important;
	padding: 12px 0 8px !important;
	margin: 0 !important;
}

.login-layout .btn.btn-primary,
.login-layout .btn.btn-success,
.login-layout .width-35.pull-right.btn {
	float: none !important;
	width: 100% !important;
	display: block;
	min-height: 42px;
	margin-top: 4px;
	border-radius: 8px !important;
	background: var(--tw-blue) !important;
	border-color: var(--tw-blue) !important;
}

.login-layout .btn.btn-primary:hover,
.login-layout .btn.btn-success:hover {
	background: var(--tw-blue-dark) !important;
	border-color: var(--tw-blue-dark) !important;
}

/* Signup / lost password footer spacing */
.login-layout .toolbar {
	background: #f5f8fb !important;
	border-top: 1px solid #e6edf4 !important;
	padding: 14px 20px !important;
	min-height: auto !important;
}

.login-layout .toolbar > div,
.login-layout .toolbar .forgot-password-link,
.login-layout .toolbar a {
	display: inline-block;
	padding: 2px 0;
	line-height: 1.4;
}

.login-layout .toolbar a {
	color: var(--tw-blue) !important;
	font-weight: 600;
}

.login-layout .alert {
	margin: 14px 0 6px;
	padding: 10px 12px;
}

.login-layout .block {
	margin-bottom: 12px;
}

.login-layout .space-6,
.login-layout .space-12,
.login-layout .space-24 {
	height: 8px !important;
	min-height: 8px !important;
	margin: 0 !important;
}

/* Buttons keep blue primary feel on app pages */
.btn-primary,
.btn-primary:focus {
	background-color: var(--tw-blue) !important;
	border-color: var(--tw-blue) !important;
}

.btn-primary:hover,
.btn-primary:active {
	background-color: var(--tw-blue-dark) !important;
	border-color: var(--tw-blue-dark) !important;
}

@media (max-width: 767px) {
	.page-content {
		padding: 10px 8px 20px !important;
	}

	.login-layout .login-logo img {
		max-width: 150px;
	}

	.login-layout .widget-main {
		padding: 16px 16px 6px !important;
	}

	.login-layout .toolbar {
		padding: 12px 16px !important;
	}

	.widget-color-blue2 > .widget-header {
		padding: 8px 10px !important;
	}
}