/*
 * TranCE theme — Phase 2: application shell.
 * Top app bar, navigation drawer (sidebar), header menus, footer, loading overlay.
 * Visual only: no element ids / js hooks are changed, heights are kept so page layouts don't shift.
 */

/* ================= Top app bar ================= */
.topbar.bg-linerCustom,
nav.topbar {
	background: var(--tce-primary) !important;
	box-shadow: var(--tce-elev-2) !important;
}

/* Hamburger: white circle -> Material icon button */
.topbar #sidebarToggleTop,
.topbar #sidebarToggleTop.bg-white {
	background: transparent !important;
	color: var(--tce-on-primary) !important;
	border: 0;
	box-shadow: none;
	transition: background-color var(--tce-dur) var(--tce-ease);
}
.topbar #sidebarToggleTop { padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.topbar #sidebarToggleTop i { color: var(--tce-on-primary); font-size: 1.15rem; }
.topbar #sidebarToggleTop:hover { background: rgba(255, 255, 255, 0.12) !important; }
.topbar #sidebarToggleTop:active { background: rgba(255, 255, 255, 0.20) !important; }

/* Search field */
.topbar .navbar-search .input-group {
	border-radius: var(--tce-radius-md);
	overflow: hidden;
	box-shadow: var(--tce-elev-1);
}
.topbar .navbar-search input.form-control {
	background: var(--tce-surface) !important;
	border: 0 !important;
	border-radius: 0 !important;
	height: 2.5rem;
	padding-left: 1rem;
	font-size: var(--tce-fs-md);
	color: var(--tce-text) !important;
}
.topbar .navbar-search input.form-control::placeholder { color: var(--tce-text-muted); }
.topbar .navbar-search input.form-control:focus { box-shadow: none !important; }
.topbar .navbar-search .input-group:focus-within { box-shadow: var(--tce-elev-1), 0 0 0 3px rgba(255, 255, 255, 0.35); }
.topbar .navbar-search .btn {
	background: var(--tce-secondary) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
	width: 2.75rem;
	height: 2.5rem;
	padding: 0;
}
.topbar .navbar-search .btn:hover { background: #0F63D6 !important; }

/* Header balance box (inline-styled in header.html) */
.topbar #closingBalanceDisplay.balance-box {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	color: var(--tce-on-primary) !important;
	border-radius: var(--tce-radius-md);
	font-family: var(--tce-font) !important;
	font-weight: var(--tce-fw-medium);
	padding: 0.4rem 0.85rem !important;
}
.topbar #balanceLabel { color: rgba(255, 255, 255, 0.85) !important; }

/* Icons, counters, user — same link geometry whether the page loads BS4 or BS5 */
.topbar .navbar-nav .nav-item .nav-link {
	position: relative;
	height: 4.375rem;
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
}
.topbar .nav-item .nav-link { transition: background-color var(--tce-dur) var(--tce-ease); }
.topbar .nav-item .nav-link:hover { background: rgba(255, 255, 255, 0.08); }
.topbar .navbarIcon { color: var(--tce-on-primary) !important; font-size: 1.15rem; }
.topbar .badge-counter,
.topbar .messageBadge {
	background: var(--tce-error) !important;
	color: #fff !important;
	border: 2px solid var(--tce-primary);
	border-radius: var(--tce-radius-pill);
	font-weight: var(--tce-fw-medium);
}
/* Same badge geometry on BS4 and BS5 pages */
.topbar .nav-item .nav-link .badge-counter,
.topbar .nav-item .nav-link .messageBadge {
	position: absolute;
	top: 1.15rem;
	right: 0.3rem !important;   /* sb-admin-2.css forces right/margin-top with !important */
	margin: 0 !important;
	transform: none;
	min-width: 1.15rem;
	padding: 0.15rem 0.3rem !important;
	font-size: 0.625rem !important;
	line-height: 1;
}
.topbar .dropdown-menu > .dropdown-divider:first-child { display: none; }
.topbar .topbar-divider { border-right-color: rgba(255, 255, 255, 0.28) !important; }
.topbar #userDropdown span { font-weight: var(--tce-fw-medium) !important; font-size: var(--tce-fs-md) !important; }
.topbar .img-profile { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); background: #fff; }

/* Header menus (alerts / messages / user) */
.topbar .dropdown-menu {
	border: 0;
	border-radius: var(--tce-radius-lg);
	box-shadow: var(--tce-elev-3) !important;
	overflow: hidden;
	padding: 0.25rem 0;
}
.topbar .dropdown-list .dropdown-header,
.topbar #alertsDropdownMenu .dropdown-header {
	background: var(--tce-primary) !important;
	border: 0 !important;
	color: #fff !important;
	font-size: var(--tce-fs-xs) !important;
	font-weight: var(--tce-fw-medium) !important;
	letter-spacing: 0.08em;
	padding: 0.85rem 1rem !important;
	margin-top: -0.25rem;
}
.topbar .dropdown-item {
	font-size: var(--tce-fs-md);
	padding: 0.6rem 1rem;
	color: var(--tce-text);
}
.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus { background: var(--tce-surface-hover); color: var(--tce-text); }
.topbar .dropdown-item i { color: var(--tce-text-muted) !important; }

/* ================= Navigation drawer ================= */
.sidebar.bg-gradient-primary,
.sidebar.sidebar-dark {
	background: linear-gradient(180deg, var(--tce-nav-bg) 0%, #0B2A86 100%) !important;
	box-shadow: var(--tce-elev-3);
}

.sidebar .sidebar-brand { height: 4.375rem; }

.sidebar-dark hr.sidebar-divider { border-top-color: rgba(255, 255, 255, 0.12) !important; }

.sidebar .sidebar-heading {
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 0.6875rem;
	font-weight: var(--tce-fw-medium);
	letter-spacing: 0.08em;
}

.sidebar-dark .nav-item .nav-link,
.sidebar-dark .nav-item .nav-link i { color: var(--tce-nav-text) !important; }

.sidebar-dark .nav-item .nav-link {
	border-radius: var(--tce-radius-md);
	transition: background-color var(--tce-dur) var(--tce-ease), color var(--tce-dur) var(--tce-ease);
}
.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:focus {
	background: var(--tce-nav-item-hover);
}
.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:hover i,
.sidebar-dark .nav-item .nav-link:not(.collapsed)[data-toggle="collapse"],
.sidebar-dark .nav-item .nav-link:not(.collapsed)[data-toggle="collapse"] i,
.sidebar-dark .nav-item.active .nav-link,
.sidebar-dark .nav-item.active .nav-link i { color: var(--tce-nav-text-active) !important; }

.sidebar-dark .nav-item.active .nav-link {
	background: var(--tce-nav-item-active);
	font-weight: var(--tce-fw-medium);
}

.sidebar-dark #sidebarToggle { background: rgba(255, 255, 255, 0.12); }
.sidebar-dark #sidebarToggle:hover { background: rgba(255, 255, 255, 0.22); }

/* Expanded drawer (desktop): rounded "pill" items and inline, dark sub-menus */
@media (min-width: 768px) {
	.sidebar:not(.toggled) .nav-item .nav-link {
		width: auto;
		margin: 2px 0.75rem;
		padding: 0.7rem 0.85rem;
	}
	.sidebar:not(.toggled) .nav-item .nav-link span { font-size: var(--tce-fs-md); }

	.sidebar:not(.toggled) .nav-item .collapse,
	.sidebar:not(.toggled) .nav-item .collapsing { margin: 0 0.75rem 0.25rem; }

	.sidebar:not(.toggled) .nav-item .collapse .collapse-inner,
	.sidebar:not(.toggled) .nav-item .collapsing .collapse-inner {
		background: rgba(255, 255, 255, 0.06) !important;
		box-shadow: none;
		border-radius: var(--tce-radius-md) !important;
		margin: 0 !important;
		padding: 0.35rem 0;
	}
	.sidebar:not(.toggled) .collapse-inner .collapse-header {
		color: rgba(255, 255, 255, 0.45) !important;
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}
	.sidebar:not(.toggled) .collapse-inner .collapse-item {
		color: var(--tce-nav-text) !important;
		font-size: var(--tce-fs-md);
		border-radius: var(--tce-radius-sm);
		white-space: normal;
		margin: 0 0.4rem;
		padding: 0.5rem 0.85rem;
	}
	.sidebar:not(.toggled) .collapse-inner .collapse-item:hover {
		background: var(--tce-nav-item-hover) !important;
		color: #fff !important;
	}
	.sidebar:not(.toggled) .collapse-inner .collapse-item.active {
		background: var(--tce-nav-item-active) !important;
		color: #fff !important;
		font-weight: var(--tce-fw-medium);
	}
}

/* Pop-out sub-menus (mobile / collapsed drawer): white Material menu */
.sidebar .collapse-inner {
	border-radius: var(--tce-radius-md) !important;
}
.sidebar .collapse-inner .collapse-item {
	font-size: var(--tce-fs-md);
	color: var(--tce-text);
	border-radius: var(--tce-radius-sm);
}
.sidebar .collapse-inner .collapse-item:hover { background: var(--tce-surface-hover); }
.sidebar .collapse-inner .collapse-item.active { color: var(--tce-primary); font-weight: var(--tce-fw-medium); }
.sidebar .collapse-inner .collapse-header { font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--tce-text-muted); }

/* ================= Footer ================= */
footer.sticky-footer,
footer.sticky-footer.bg-linerCustom {
	background: var(--tce-surface) !important;
	border-top: 1px solid var(--tce-divider);
}
footer.sticky-footer .copyright,
footer.sticky-footer .copyright span {
	color: var(--tce-text-muted) !important;
	font-size: var(--tce-fs-sm) !important;
}

/* ================= Loading overlay ================= */
#loadingOverlay {
	background: rgba(10, 31, 92, 0.45);
	backdrop-filter: blur(2px);
}
#loadingOverlay .spinner {
	width: 120px;
	height: 120px;
	box-shadow: var(--tce-elev-4);
}
#loadingOverlay .spinner .band {
	width: 60px;
	height: 60px;
	background: var(--tce-secondary);
}
#loadingOverlay .spinner img {
	inset: 6px;
	width: calc(100% - 12px);
	padding: 14px;
}

/* Narrow drawer (mobile / collapsed): inset the item highlight */
@media (max-width: 767.98px) {
	.sidebar .nav-item .nav-link { width: calc(100% - 0.75rem); margin: 2px auto; }
}
.sidebar.toggled .nav-item .nav-link { width: calc(100% - 0.75rem); margin: 2px auto; }