/* Bootstrap 5 CSS custom properties — override AdminLTE 4's defaults with NYEIA brand colors.
   These propagate to ALL components: pagination hover/focus, form focus rings, badges, etc. */
:root {
	--bs-primary:           #074892;
	--bs-primary-rgb:       7, 72, 146;
	/* Info: replace Bootstrap 5's bright cyan with a blue that fits the NYEIA navy theme */
	--bs-info:              #3d97c9;
	--bs-info-rgb:          61, 151, 201;
	--bs-link-color:        #0387c9;
	--bs-link-color-rgb:    3, 135, 201;
	--bs-link-hover-color:  #049fec;
	--bs-border-color-translucent: rgba(0, 0, 0, 0.13);
}

/* Table row hover — overrides AdminLTE which flattens Bootstrap's table-hover */
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
	background-color: #f0f8ff !important;
}

/* Form: micro-labels — small, uppercase above every field */
.form-group .control-label,
.mb-3 .form-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #495057;
	margin-bottom: 2px;
}

/* Form: section dividers (used in split-card forms) */
.form-section-label {
	font-size: 0.70rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #074892;
	border-bottom: 1px solid #dee2e6;
	padding-bottom: 4px;
	margin-bottom: 12px;
	margin-top: 4px;
}

/* Form: tighter vertical spacing between fields */
.form-group {
	margin-bottom: 0.6rem;
}

/* Form: branded focus ring 
.form-control:focus {
	border-color: #074892;
	box-shadow: 0 0 0 0.15rem rgba(7, 72, 146, 0.15);
}*/

a{
	color: #0387c9;
}
a:hover{
	color: #049fec;
}

.login-page{
	background: #063c79 linear-gradient(330deg, #031830 0%, #063c79) repeat-x !important;
}

.fakehide::before {
	content: '••••';
	padding-right:1px;
}

/*.btn:not(.btn-navbar):not(.btn-clear-white):not(.btn-clear-white-outline):not(.btn-tool){
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}*/

/*.elevation-1 {
	box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%) !important;
}*/

/*.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
	vertical-align: 0;
}*/

/*.subNavBar {
	background: #d6dce2;
}
.subNavBar .navbar-nav .show > .nav-link,
.subNavBar .navbar-nav .active > .nav-link,
.subNavBar .navbar-nav .nav-link.show,
.subNavBar .navbar-nav .nav-link.active {
	color: #FFF;
	background: #5b6a77;
}*/

/* AdminLTE 4: sidebar background — NYEIA deep navy gradient */
.app-sidebar {
	background: #063c79 linear-gradient(330deg, #031830 0%, #063c79) repeat-x !important;
}
/* Logo sizing — override AdminLTE 4 height/max-height constraints */
.app-sidebar .sidebar-brand {
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	padding: 14px 10px 10px !important;
	text-align: center;
	border-bottom: none;
}
.app-sidebar .brand-image {
	display: block !important;
	width: 65% !important;
	/* max-width: 170px !important; */
	max-height: none !important;
	height: auto !important;
	margin: 0 auto !important;
}
.app-sidebar .brand-link {
	border-bottom: none;
}
/* Search Bar */
.app-sidebar .form-control-sidebar {
	background-color: #FFF;
	border-color: rgba(255,255,255,0.65);
	color: #333;
}
/* Search Bar Button — Bootstrap 5 no longer has input-group-append */
.app-sidebar .btn-sidebar {
	background-color: #074892;
	border-color: rgba(255,255,255,0.15);
	color: #fff;
	border-radius: 0 0.25rem 0.25rem 0;
}
/* Menu Item Hover */
.app-sidebar .sidebar-menu>.nav-item.menu-open>.nav-link,
.app-sidebar .sidebar-menu>.nav-item:hover>.nav-link,
.app-sidebar .sidebar-menu>.nav-item>.nav-link:focus {
	background-color: rgba(255,255,255,.05);
}
/* Sidebar nav link text color (AdminLTE 4 dark theme override) */
.app-sidebar .sidebar-menu .nav-link {
	color: rgba(255,255,255,0.8);
}
.app-sidebar .sidebar-menu .nav-link:hover,
.app-sidebar .sidebar-menu .nav-link:focus {
	color: #fff;
}
/* Sidebar nav header text */
.app-sidebar .nav-header {
	color: rgba(255,255,255,0.4);
}

/* Top navbar form control */
.app-header .form-control-navbar,
.app-header .form-control-navbar+.input-group-append>.btn-navbar {
	background-color: #FFF;
	border-color: rgba(0,0,0,0.15);
}

blockquote{
	border-left-width: .2rem;
	margin: 1.2em 0.3rem;
    padding: 0.3em 0.9rem;
}
.callout{
	border-left-width: 4px;
	padding: 0.7rem 1rem;
}

.navbar-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 4px;
    position: absolute;
    right: 10px;
    top: 4px;
}

.clientInfoCard>.card-header{
	background: #343a40 linear-gradient(155deg, #535d67 20%, #1f2225 ) repeat-x !important;
}

.clientPricingCard>.card-header{
	background: #3d9970 linear-gradient(155deg, #3d9970 20%, #296148) repeat-x !important
}

.clientBankingCard>.card-header{
	background: #8396a7 linear-gradient(155deg, #8396a7 20%, #535d67) repeat-x !important
}

/*.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]){
	background-color: ;
}
.layout-navbar-fixed .wrapper .sidebar-dark-navy {
	background-color: #001f3f;
}
.layout-navbar-fixed .wrapper .sidebar-dark-navy .brand-link:not([class*="navbar"]) {
	background-color: #000;
}*/

/* ------------------------------ */

.card-gray-light:not(.card-outline) > .card-header {
  background-color: #8396a7;
}

.card-gray-light:not(.card-outline) > .card-header,
.card-gray-light:not(.card-outline) > .card-header a {
  color: #fff;
}

.card-gray-light:not(.card-outline) > .card-header a.active {
  color: #1f2d3d;
}

.card-gray-light.card-outline {
  border-top: 3px solid #8396a7;
}

.card-gray-light.card-outline-tabs > .card-header a:hover {
  border-top: 3px solid #dee2e6;
}

.card-gray-light.card-outline-tabs > .card-header a.active {
  border-top: 3px solid #8396a7;
}

.card-gray-light:not(.card-outline) .btn-tool {
  color: rgba(255, 255, 255, 0.8);
}

.card-gray-light:not(.card-outline) .btn-tool:hover {
  color: #fff;
}
/* ------------------------------ */

.btn-gray-light {
  color: #fff;
  background-color: #8396a7;
  border-color: #8396a7;
  box-shadow: none;
}

.btn-gray-light:hover {
  color: #fff;
  background-color: #6e7c89;
  border-color: #6e7c89;
}

.btn-gray-light:focus, .btn-gray-light.focus {
  color: #fff;
  background-color: #6e7c89;
  border-color: #6e7c89;
  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
}

.btn-gray-light.disabled, .btn-gray-light:disabled {
  color: #fff;
  background-color: #8396a7;
  border-color: #8396a7;
}

.btn-gray-light:not(:disabled):not(.disabled):active, .btn-gray-light:not(:disabled):not(.disabled).active,
.show > .btn-gray-light.dropdown-toggle {
  color: #fff;
  background-color: #6e7c89;
  border-color: #6e7c89;
}

.btn-gray-light:not(:disabled):not(.disabled):active:focus, .btn-gray-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
}

[class*="accent-"] a.btn-gray-light {
  color: #fff;
}
/* ------------------------------ */

.btn-primary, .blueBtn {
	color: #fff;
	background-color: #074892;
	border-color: #074892;
	box-shadow: none;
	text-decoration: none;
}

.btn-primary:hover, .blueBtn:hover {
	color: #fff;
	background-color: #0854aa;
	border-color: #0854aa;
	cursor: pointer;
}

.btn-primary:focus, .btn-primary.focus, .blueBtn:focus, .blueBtn.focus {
	color: #fff;
	background-color: #0376b0;
	border-color: #0376b0;
	box-shadow: 0 0 0 0 rgba(38, 143, 255, 0.5);
}

/* AdminLTE 4: active sidebar nav link */
.app-sidebar .sidebar-menu > .nav-item > .nav-link.active {
  background-color: #074892;
  color: #fff;
}

.app-sidebar .sidebar-menu.nav-legacy > .nav-item > .nav-link.active {
  border-color: #074892;
}
.page-item.active .page-link {
  background-color: #074892;
  border-color: #074892;
}

/* Projects table: tighter font to keep rows compact */
#tableProjects td,
#tableProjects th {
	font-size: 0.8rem;
}

/* DataTables 2.x: prevent auto right-alignment of numeric/date columns */
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date,
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date {
	text-align: left !important;
}

/* DataTables: sticky header via CSS — works with AdminLTE 4's inner scroll container.
   (The FixedHeader extension uses position:fixed + window scroll, which doesn't fire
   when the scroll is on .app-main rather than the window.) */
table.dataTable thead tr th,
table.dataTable thead tr td {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #fff;
}

/* Pagination: remove AdminLTE 4 gap + border-radius overrides so buttons
   connect like standard Bootstrap 5 pagination */
.pagination {
	gap: 0 !important;
}
.pagination .page-item:not(:first-child) .page-link {
	margin-left: -1px;
}
.pagination .page-item .page-link {
	border-radius: 0 !important;
}
.pagination .page-item:first-child .page-link {
	border-radius: var(--bs-pagination-border-radius) 0 0 var(--bs-pagination-border-radius) !important;
}
.pagination .page-item:last-child .page-link {
	border-radius: 0 var(--bs-pagination-border-radius) var(--bs-pagination-border-radius) 0 !important;
}

.card-primary.card-outline {
    border-top: 3px solid #074892;
}

.card-primary:not(.card-outline)>.card-header{
	background-color: #074892 !important;
}

.bg-primary {
  background-color: #074892 !important; 
}
.badge-primary {
  background-color: #074892 !important; 
}

#rolePermissionsAccordion label,
#userPermissionsAccordion label { display: block; }

.text-muted{
	color: #8f99a3 !important;
}


.stepper-wrapper {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.stepper-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;

	@media (max-width: 768px) {
		font-size: 12px;
	}
}

.stepper-item::before {
	position: absolute;
	content: "";
	border-bottom: 4px solid #ccc;
	width: 100%;
	top: 18px;
	left: -50%;
	z-index: 2;
}

.stepper-item::after {
	position: absolute;
	content: "";
	border-bottom: 4px solid #ccc;
	width: 100%;
	top: 18px;
	left: 50%;
	z-index: 2;
}

.stepper-item .step-counter {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ccc;
	margin-bottom: 6px;
}

.stepper-item.active {
	font-weight: bold;
}

.stepper-item .step-name a {
	color:#333;
}
.stepper-item .step-name a:hover{
	color:#666;
	text-decoration: underline;
}

.stepper-item.active .step-counter {
	background-color: #074892;
}

.stepper-item.completed .step-counter {
	background-color: #074892;
}

.stepper-item.completed::after {
	position: absolute;
	content: "";
	border-bottom: 4px solid #074892;
	width: 100%;
	top: 18px;
	left: 50%;
	z-index: 3;
}

.stepper-item:first-child::before {
	content: none;
}
.stepper-item:last-child::after {
	content: none;
}

/* Project inspection blocks */
.insp-header {
	gap: 0.5rem 1.25rem;
	background-color: #f8f9fa;
	border-radius: 0.25rem 0.25rem 0 0;
}

.insp-meta-item {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 80px;
}

.insp-meta-item .badge {
	white-space: normal;
	word-break: break-word;
}


.insp-meta-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8f99a3;
	margin-bottom: 1px;
}

/* Project info definition grid */
.pi-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1.5rem;
	padding: 0.25rem 0;
}

.pi-item {
	min-width: 0;
}

.pi-item.pi-full {
	grid-column: 1 / -1;
}

.pi-label {
	display: block;
	font-size: 0.70rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8f99a3;
	margin-bottom: 2px;
}

.pi-value {
	display: block;
	color: #1f2d3d;
	word-break: break-word;
}
/* AdminLTE 4 skip-links div causes a gap at the top — hide it */
.skip-links {
	display: none !important;
}
/* ---- AdminLTE 4 layout + spacing corrections ---- */

/* Kill the top gap and bottom padding */
.app-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Lighten card shadows */
.card {
	box-shadow: none !important;
}

/* Page content header — white background, generous padding */
.app-content-header {
	background-color: #fff !important;
	border-bottom: 1px solid #dee2e6 !important;
	padding: 1.5rem 2rem 0 2rem !important;
}

/* Main content area — light gray bg, restore BS4-era padding */
.app-content {
	background-color: #f4f6f9 !important;
	padding: 1.5rem !important;
}

/* Restore Bootstrap 4 card padding (BS5 reduced 1.25rem -> 1rem) */
.card {
	--bs-card-spacer-y: 1.25rem;
	--bs-card-spacer-x: 1.25rem;
	--bs-card-cap-padding-y: 0.75rem;
	--bs-card-cap-padding-x: 1.25rem;
}
.card-body {
	padding: 1.25rem;
}
.card-header,
.card-footer {
	padding: 0.75rem 1.25rem;
}

/* Sidebar nav link vertical padding */
.app-sidebar .sidebar-menu > .nav-item > .nav-link {
	padding: 0.5rem 0.9rem !important;
}

/* Prevent nav label text from wrapping at narrow sidebar widths */
.app-sidebar .sidebar-wrapper .nav-link p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Main content row spacing */
#mainContentRow {
	margin-top: 1rem;
}

/* Bootstrap 5 compatibility shims */
.btn-block { display: block; width: 100%; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }

/* Footer: remove excess space below */
.app-footer {
	margin-bottom: 0 !important;
}

/* Prevent scrolling past the footer: give the grid a definite height so
   the 1fr main row is bounded, then scroll within .app-main only. */
body {
	height: 100dvh;
	overflow-y: hidden;
}
.bg-body-tertiary{
	background:#f4f6f9 !important;
}
.app-wrapper {
	height: 100dvh !important;
	min-height: 0 !important;
}
.app-main {
	min-height: 0 !important;
	overflow-y: auto !important;
}

/* ── Permission toggle switches ─────────────────────────────────────────── */
.perm-toggle-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	border-radius: 0.4rem;
	transition: background-color 0.12s;
}
/* Larger switch pill */
.perm-toggle-item .form-check-input[type="checkbox"] {
	flex-shrink: 0;
	width: 2.8em;
	height: 1.45em;
	margin-top: 0;
	cursor: pointer;
	margin-left: 1vw;
}
.perm-toggle-item .form-check-label {
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	line-height: 1.3;
	margin-bottom: 0;
}
/* Green switch when enabled */
.perm-toggle-item .form-check-input[type="checkbox"]:checked {
	background-color: #198754;
	border-color: #198754;
}
/* Red switch when disabled — override thumb to white so it's visible on red */
.perm-toggle-item .form-check-input[type="checkbox"]:not(:checked) {
	background-color: #dc3545;
	border-color: #dc3545;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
/* Subtle row tints still help with scanning across a row */
.perm-toggle-item:has(.form-check-input:checked) {
	background-color: rgba(25, 135, 84, 0.06);
}
.perm-toggle-item:has(.form-check-input:not(:checked)) {
	background-color: rgba(220, 53, 69, 0.05);
}
/* Accordion header */
.perm-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.85rem 1rem;
	color: #212529;
	font-weight: 600;
	font-size: 1.2rem;
	text-decoration: none;
}
.perm-accordion-header:hover { color: #074892; }
/* White background when the section is expanded */
.perm-accordion-header[aria-expanded="true"] {
	background-color: #fff;
	border-radius: 0.4rem 0.4rem 0 0;
}

/* Chevron rotates when section is expanded */
.perm-chevron {
	font-size: 0.75rem;
	transition: transform 0.2s ease;
	color: #6c757d;
}
.collapse.show ~ * .perm-chevron,
[aria-expanded="true"] .perm-chevron,
.perm-accordion-header[aria-expanded="true"] .perm-chevron {
	transform: rotate(180deg);
}

/* Fix native <select> dropdown options being clipped inside modal.
   AdminLTE sets overflow:hidden on .modal; overriding it on .modal-content
   lets the browser-rendered options list extend outside the white box.
   The outer #dialog keeps overflow-y:auto so the modal itself can still scroll. */
#dialog {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
#dialog .modal-content,
#dialog .modal-body {
    overflow: visible !important;
}

/* ── Scrollable card body (e.g. Overdue Projects dashboard card) ────── */
.card-body.card-body-scroll {
	max-height: 400px !important;
	overflow-x: auto !important;
	overflow-y: auto !important;
}

/* ── Global sidebar search results dropdown ─────────────────────────── */
.global-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background: #fff;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 0 0 .375rem .375rem;
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
	max-height: 380px;
	overflow-y: auto;
}
.gsr-group-label {
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #adb5bd;
	padding: .5rem .75rem .15rem;
	border-top: 1px solid #f0f0f0;
}
.gsr-group-label:first-child { border-top: none; }
.gsr-item {
	display: block;
	padding: .4rem .75rem;
	color: #212529 !important;
	text-decoration: none !important;
	line-height: 1.4;
	border-left: 3px solid transparent;
	transition: border-color .1s, background .1s;
}
.gsr-item:hover {
	background: #f0f6ff;
	color: #0387c9 !important;
	border-left-color: #0387c9;
}
.gsr-label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: inherit;
}
.gsr-sub {
	display: block;
	font-size: .75rem;
	color: #6c757d;
	margin-top: .1rem;
}
.gsr-item:hover .gsr-sub { color: #5a9fd4; }
.gsr-empty { padding: .5rem .75rem; font-size: .85rem; color: #6c757d; }
.gsr-error { padding: .5rem .75rem; font-size: .85rem; color: #842029; background: #f8d7da; border-radius: 0 0 .375rem .375rem; }

/* Inspection detail rows — show edit button only on hover */
.detail-row .detail-edit-btn { visibility: hidden; }
.detail-row:hover .detail-edit-btn { visibility: visible; }

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
[data-bs-theme="dark"] .app-content-header {
    background-color: var(--bs-secondary-bg) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] {
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .app-content {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .bg-body-tertiary {
    background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] table.dataTable thead tr th,
[data-bs-theme="dark"] table.dataTable thead tr td {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .insp-header {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .app-sidebar .form-control-sidebar {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

[data-bs-theme="dark"] .btn-white {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .btn-white:hover,
[data-bs-theme="dark"] .btn-white:focus,
[data-bs-theme="dark"] .btn-white:active {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .subNavBar .navbar-nav .nav-link {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .subNavBar .navbar-nav .show > .nav-link,
[data-bs-theme="dark"] .subNavBar .navbar-nav .active > .nav-link,
[data-bs-theme="dark"] .subNavBar .navbar-nav .nav-link.show,
[data-bs-theme="dark"] .subNavBar .navbar-nav .nav-link.active {
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
    border-bottom-color: #0387c9;
}
[data-bs-theme="dark"] .subNavBar .navbar-nav .nav-link:hover {
    color: var(--bs-body-color) !important;
    background: rgba(255, 255, 255, 0.08);
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover > td,
[data-bs-theme="dark"] .table-hover tbody tr:hover > th {
    background-color: rgba(255, 255, 255, 0.075) !important;
}

[data-bs-theme="dark"] .form-group .control-label,
[data-bs-theme="dark"] .mb-3 .form-label {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--bs-secondary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-color: var(--bs-body-color);
}

/* ── Settings vertical sidebar nav ──────────────────────────────────────── */
.settings-nav-wrapper {
    /* background: var(--bs-body-bg); */
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.settings-vertical-nav {
    padding: 0.25rem 0.5rem 0.5rem;
}
.settings-vertical-nav .nav-link {
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    transition: background-color 0.12s, color 0.12s;
}
.settings-vertical-nav .nav-link:hover:not(.active) {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.settings-vertical-nav .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 500;
}
.nav-settings-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color) !important;
    padding: 0.9rem 0.9rem 0.25rem;
    list-style: none;
}

/* Settings page: allow long names to wrap inside info-box cards */
.info-box-text { white-space: normal; }

/* -----------------------------------------------
   Extended Bootstrap contextual colors
   purple, orange, pink, indigo
----------------------------------------------- */

/* text-bg-* (badge/chip background + contrasting text) */
.text-bg-purple { color: #fff !important; background-color: var(--bs-purple) !important; }
.text-bg-orange { color: #fff !important; background-color: var(--bs-orange) !important; }
.text-bg-pink   { color: #fff !important; background-color: var(--bs-pink)   !important; }
.text-bg-indigo { color: #fff !important; background-color: var(--bs-indigo) !important; }

/* bg-* (background only) */
.bg-purple { background-color: var(--bs-purple) !important; }
.bg-orange { background-color: var(--bs-orange) !important; }
.bg-pink   { background-color: var(--bs-pink)   !important; }
.bg-indigo { background-color: var(--bs-indigo) !important; }

/* text-* (text color only) */
.text-purple { color: var(--bs-purple) !important; }
.text-orange { color: var(--bs-orange) !important; }
.text-pink   { color: var(--bs-pink)   !important; }
.text-indigo { color: var(--bs-indigo) !important; }

/* btn-* (filled buttons) */
.btn-purple {
    --bs-btn-color: #fff; --bs-btn-bg: #6f42c1; --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5e38a3; --bs-btn-hover-border-color: #5935a0;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #5935a0; --bs-btn-active-border-color: #54319b;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6f42c1; --bs-btn-disabled-border-color: #6f42c1;
}
.btn-orange {
    --bs-btn-color: #fff; --bs-btn-bg: #fd7e14; --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d66b11; --bs-btn-hover-border-color: #cb6610;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #cb6610; --bs-btn-active-border-color: #c0600f;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #fd7e14; --bs-btn-disabled-border-color: #fd7e14;
}
.btn-pink {
    --bs-btn-color: #fff; --bs-btn-bg: #d63384; --bs-btn-border-color: #d63384;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b52b70; --bs-btn-hover-border-color: #ab296a;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #ab296a; --bs-btn-active-border-color: #a12764;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d63384; --bs-btn-disabled-border-color: #d63384;
}
.btn-indigo {
    --bs-btn-color: #fff; --bs-btn-bg: #6610f2; --bs-btn-border-color: #6610f2;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #570ecd; --bs-btn-hover-border-color: #520dc4;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #520dc4; --bs-btn-active-border-color: #4d0cba;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6610f2; --bs-btn-disabled-border-color: #6610f2;
}

/* btn-outline-* (outline buttons) */
.btn-outline-purple {
    --bs-btn-color: #6f42c1; --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6f42c1; --bs-btn-hover-border-color: #6f42c1;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #6f42c1; --bs-btn-active-border-color: #6f42c1;
    --bs-btn-disabled-color: #6f42c1; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #6f42c1;
}
.btn-outline-orange {
    --bs-btn-color: #fd7e14; --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #fd7e14; --bs-btn-hover-border-color: #fd7e14;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #fd7e14; --bs-btn-active-border-color: #fd7e14;
    --bs-btn-disabled-color: #fd7e14; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #fd7e14;
}
.btn-outline-pink {
    --bs-btn-color: #d63384; --bs-btn-border-color: #d63384;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d63384; --bs-btn-hover-border-color: #d63384;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #d63384; --bs-btn-active-border-color: #d63384;
    --bs-btn-disabled-color: #d63384; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #d63384;
}
.btn-outline-indigo {
    --bs-btn-color: #6610f2; --bs-btn-border-color: #6610f2;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6610f2; --bs-btn-hover-border-color: #6610f2;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #6610f2; --bs-btn-active-border-color: #6610f2;
    --bs-btn-disabled-color: #6610f2; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #6610f2;
}