/* =============================================
   Base layout
   ============================================= */

html {
	font-size: 14px;
	position: relative;
	min-height: 100%;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

body {
	margin-bottom: 60px;
}

/* Focus ring */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ec-primary);
}

/* Floating label placeholder */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
	text-align: start;
}


/* =============================================
   Default palette — overridden per tenant
   via _Layout.cshtml <style> block
   ============================================= */

:root {
	/* Brand palette */
	--ec-beige: #F5F5DC;
	--ec-beige-light: #E9E9D2;
	--ec-maroon-dark: #800000;
	--ec-maroon-mid: #9E4338;
	--ec-maroon-light: #B97267;
	--ec-gray-dark: #30303B;
	--ec-gray-mid: #808080;
	--ec-gray-light: #989898;
	--ec-gray-lighter: #B1B1B1;
	/* Semantic aliases — these are what components use.
	   Tenant theme overrides these three. */
	--ec-primary: var(--ec-maroon-dark);
	--ec-primary-mid: var(--ec-maroon-mid);
	--ec-primary-light: var(--ec-maroon-light);
	--ec-secondary: var(--ec-maroon-dark);
	--ec-font: var(--ec-gray-dark);
	--ec-bg: var(--ec-beige);
	--ec-bg-light: var(--ec-beige-light);
	/* Bootstrap variable mapping */
	--bs-primary: var(--ec-primary);
	--bs-primary-rgb: 128, 0, 0;
	--bs-body-color: var(--ec-gray-dark) !important;
	--bs-link-color: var(--ec-primary);
	--bs-link-hover-color: var(--ec-primary-mid);
}




/* =============================================
   Tab colors
   ============================================= */
.nav-tabs {
	--bs-nav-tabs-link-active-color: var(--ec-font);
	--bs-nav-tabs-link-active-bg: var(--ec-primary);
	--bs-nav-tabs-border-color: #000000;
	
}

.nav-tabs .nav-link {
	color: #000;
}

.nav-tabs .nav-link:hover {
	color: #808080;
	border-color: #808080;
}

.nav-tabs .nav-link.active {
	color: #FFF;
}

/* =============================================
   Notification dropdowns (NavBarNotifications)
   ============================================= */

.sb-topnav .dropdown-menu {
	background-color: var(--ec-bg);
	border: 1px solid var(--ec-primary-light);
}

.sb-topnav .dropdown-item {
	color: var(--ec-secondary);
}

.sb-topnav .dropdown-item:hover,
.sb-topnav .dropdown-item:focus {
	background-color: var(--ec-bg-light);
	color: var(--ec-primary);
}

.dropdown-list {
	background-color: var(--ec-bg);
	border: 1px solid var(--ec-primary-light);
}

.dropdown-list .dropdown-header {
	background: linear-gradient( 180deg, var(--ec-primary) 10%, var(--ec-primary-mid) 100% );
	color: var(--ec-bg);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.dropdown-list .dropdown-item {
	background-color: var(--ec-bg);
	color: var(--ec-secondary);
	border-bottom: 1px solid var(--ec-bg-light);
}

.dropdown-list .dropdown-item:hover,
.dropdown-list .dropdown-item:focus {
	background-color: var(--ec-bg-light);
	color: var(--ec-primary);
}

.dropdown-list .dropdown-item .small,
.dropdown-list .small.text-gray-500 {
	color: var(--ec-gray-light);
}

.dropdown-list a.dropdown-item.text-center {
	background-color: var(--ec-bg-light);
	color: var(--ec-primary-mid);
	font-weight: 600;
	border-top: 1px solid var(--ec-primary-light);
	border-bottom: none;
}

.dropdown-list a.dropdown-item.text-center:hover {
	background-color: var(--ec-primary);
	color: var(--ec-bg);
}

.icon-circle.bg-primary {
	background-color: var(--ec-primary) !important;
}

.icon-circle.bg-success {
	background-color: var(--ec-secondary) !important;
}

.icon-circle.bg-warning {
	background-color: var(--ec-primary-mid) !important;
}

.status-indicator.bg-success {
	background-color: var(--ec-secondary) !important;
}

.status-indicator.bg-warning {
	background-color: var(--ec-primary-mid) !important;
}

/* =============================================
   Sidebar
   ============================================= */

.sb-sidenav.sb-sidenav-dark {
	background-color: var(--ec-secondary) !important;
	background-image: linear-gradient( 180deg, var(--ec-secondary) 10%, var(--ec-secondary-mid) 100% ) !important;
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
	color: rgba(245, 245, 220, 0.8);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link {
	color: rgba(245, 245, 220, 0.8);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon,
.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon i,
.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon svg {
	color: var(--ec-bg) !important;
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover,
.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link:focus {
	color: var(--ec-bg);
	background-color: rgba(245, 245, 220, 0.08);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover .sb-nav-link-icon,
.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link:focus .sb-nav-link-icon {
	color: var(--ec-bg);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-menu .nav-link[aria-current="page"] {
	color: var(--ec-bg);
	font-weight: 700;
	background-color: rgba(245, 245, 220, 0.12);
}

.sb-sidenav.sb-sidenav-dark .sb-sidenav-footer {
	background-color: var(--ec-secondary-mid) !important;
	color: var(--ec-bg-light);
}


/* =============================================
   Nav pills (Identity / Manage Account pages)
   ============================================= */

.nav-pills .nav-link {
	color: var(--ec-primary);
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
	color: var(--ec-bg-light);
	background-color: var(--ec-gray-light);
	border: 1px solid var(--ec-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--ec-primary);
	color: var(--ec-bg-light);
	border: 1px solid var(--ec-gray-light);
}



/* =============================================
   Buttons
   ============================================= */

.btn-primary {
	background-color: var(--ec-primary);
	border-color: var(--ec-primary-mid);
	color: var(--ec-bg);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus-visible,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
	background-color: var(--ec-primary-mid) !important;
	border-color: var(--ec-primary-light);
	color: var(--ec-bg);
}

.btn-outline-primary {
	color: var(--ec-primary);
	border-color: var(--ec-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	background-color: var(--ec-primary);
	border-color: var(--ec-primary);
	color: var(--ec-bg);
}

.btn-outline-danger {
	color: var(--ec-primary);
	border-color: var(--ec-primary);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
	background-color: var(--ec-primary);
	border-color: var(--ec-primary);
	color: var(--ec-bg);
}

.btn-outline-warning {
	color: var(--ec-primary-mid);
	border-color: var(--ec-primary-mid);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
	background-color: var(--ec-primary-mid);
	border-color: var(--ec-primary-mid);
	color: var(--ec-bg);
}

.btn-outline-info {
	color: var(--ec-secondary);
	border-color: var(--ec-secondary);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
	background-color: var(--ec-secondary);
	border-color: var(--ec-secondary);
	color: var(--ec-bg);
}


.btn-outline-details {
	background-color: var(--ec-secondary);
	color: #FFFFFF;
	border-color: #000000;
}

.btn-outline-details:hover,
.btn-outline-details:focus,
.btn-outline-details:active {
	background-color: var(--ec-primary);
	border-color: #000000;
	color: var(--ec-bg);
}


/* KLC ovr */
h1, h2, h3, h4, h5 {
	color: var(--ec-font);
}

/* Fonts */
.form-text {
	color: var(--ec-font) !important;
}
.text-primary {
	color: var(--ec-font) !important;
}
.text-danger {
	color: var(--ec-font) !important;
}
.text-dark {
	color: var(--ec-font) !important;
}




/* =============================================
   Tables
   ============================================= */
.table thead th,
.table thead tr,
thead.table-dark th {
	background-color: var(--ec-primary-light) !important;
	color: var(--ec-bg) !important;
	border-color: #808080 !important;
}
.table, .datatable-table {
	color: #000000 !important;
	--bs-table-color: #000000 !important;
}
.table-hover > tbody > tr:hover > * {
	background-color: var(--ec-bg-light);
	color: #000000;
}



/* =============================================
   Topbar
   ============================================= */

.sb-topnav {
	background-color: var(--ec-secondary) !important;
}

.sb-topnav .navbar-brand {
	color: var(--ec-bg);
}

.sb-topnav .navbar-brand:hover {
	color: var(--ec-bg-light);
}

.sb-topnav .nav-item .nav-link {
	color: var(--ec-bg-light);
}

.sb-topnav .nav-item .nav-link:hover,
.sb-topnav .nav-item .nav-link:focus {
	color: var(--ec-bg);
}

.sb-topnav .navbar-text {
	margin-left: 0 !important;
	margin-right: auto !important;
	color: var(--ec-bg-light);
}

.sb-topnav .navbar-nav {
	margin-left: auto !important;
}

.navbar {
	min-height: 80px; /* KLC desired height */
}


/* =============================================
   Cards
   ============================================= */

.card {
	border-color: var(--ec-gray-mid);
}

.card-header {
	background-color: var(--ec-primary);
	color: var(--ec-beige-light);
	border-bottom-color: var(--ec-primary-light);
}

.card-header.bg-dark {
	background-color: var(--ec-secondary) !important;
	color: var(--ec-beige-light) !important;
}


/* ------ TOPBAR FLEX LAYOUT FIX ------ */
.sb-topnav {
	flex-wrap: nowrap !important;
}

.sb-topnav .navbar-brand {
	flex-shrink: 0;
}

.sb-topnav #sidebarToggle {
	flex-shrink: 0;
	order: 0 !important;
}

.sb-topnav .navbar-nav {
	flex-shrink: 1;
	min-width: 0;
	order: 1 !important;
}
/* */
.sb-topnav .navbar-brand {
	padding-left: 0.75rem !important;
	padding-right: 0.25rem !important;
}

.sb-topnav #sidebarToggle {
	padding-left: 0.25rem !important;
	padding-right: 0.25rem !important;
}
/* */
.sb-topnav .navbar-text {
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	order: 0 !important;
}

.sb-topnav .navbar-brand {
	padding-left: 0.75rem !important;
	padding-right: 0 !important;
	width: auto !important;
	display: flex !important;
	align-items: center !important;
}

.sb-topnav .navbar-brand img {
	display: block;
	width: auto;
	max-height: 40px;
}

/* ------ LOGIN PARTIAL DROPDOWN ------ */
.sb-topnav .dropdown-menu {
	background-color: var(--ec-beige) !important;
	border: 1px solid var(--ec-maroon-light) !important;
	min-width: 200px;
}

.sb-topnav .dropdown-item {
	color: var(--ec-gray-dark) !important;
}

.sb-topnav .dropdown-item:hover,
.sb-topnav .dropdown-item:focus {
	background-color: var(--ec-beige-light) !important;
	color: var(--ec-maroon-dark) !important;
}

.sb-topnav .dropdown-item.text-danger {
	color: var(--ec-maroon-dark) !important;
}

.sb-topnav .dropdown-item.text-danger:hover {
	background-color: var(--ec-maroon-dark) !important;
	color: var(--ec-beige) !important;
}

.sb-topnav .dropdown-divider {
	border-color: var(--ec-maroon-light) !important;
}

.sb-topnav .dropdown-item-text {
	color: var(--ec-gray-mid) !important;
}


/* =============================================
   ADA: Skip navigation
   ============================================= */

.skip-to-main {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 9999;
	padding: .75rem 1.25rem;
	background: var(--ec-bg);
	color: var(--ec-primary);
	font-weight: 700;
	border: 2px solid var(--ec-primary);
	text-decoration: none;
	border-radius: 0 0 4px 0;
	transition: top 0.1s;
}

	.skip-to-main:focus {
		top: 0;
	}