/* Custom styles */
body { }

.min-width-0 {
	min-width: 0 !important;
}

.goal-linked-records .mb-3 {
	margin-bottom: 0 !important;
}

.goal-linked-records select {
	max-width: 100%;
}

.nav-link.disabled, .dropdown-item.disabled {
	color: #6c757d !important;
	pointer-events: none;
	opacity: 0.65;
}

.nav-link .lock-icon, .dropdown-item .lock-icon {
	margin-right: 4px;
	font-size: 0.9em;
}

.avatar-sm {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

/* ===============================
   Assured-style Sidebar (Gradient)
   =============================== */

/*
	Design tokens + Bootstrap overrides.
	Bootstrap 5.3 reads these CSS variables at runtime, so overriding them here
	updates buttons/alerts/utilities without editing Bootstrap files.
*/
:root,
[data-bs-theme="light"]{
	/* Assured brand */
	--assured-navy:#07162d;
	--assured-blue-800:#0b2b55;
	--assured-blue:#0f3c68;
	--assured-teal:#14735a;
	--assured-green:#2cc46a;
	--assured-info:#1e63ff;
	--assured-warning:#facc15;
	--assured-danger:#dc2626;

	/* Convenience rgb components (space-separated for rgb(var() / a)) */
	--assured-navy-rgb: 7 22 45;
	--assured-blue-rgb: 15 60 104;
	--assured-teal-rgb: 20 115 90;

	/* Sidebar / topbar text */
	--assured-text:#eaf2ff;
	--assured-muted:rgba(234,242,255,.70);
	--assured-divider:rgba(255,255,255,.12);

	/* Bootstrap semantic overrides */
	--bs-primary: var(--assured-info);
	--bs-secondary: var(--assured-blue);
	--bs-success: var(--assured-green);
	--bs-info: var(--assured-info);
	--bs-warning: var(--assured-warning);
	--bs-danger: var(--assured-danger);
	--bs-light: #f4f7fb;
	--bs-dark: var(--assured-navy);

	/* Many Bootstrap utilities/components use *-rgb vars */
	--bs-primary-rgb: 30, 99, 255;
	--bs-secondary-rgb: 15, 60, 104;
	--bs-success-rgb: 44, 196, 106;
	--bs-info-rgb: 30, 99, 255;
	--bs-warning-rgb: 250, 204, 21;
	--bs-danger-rgb: 220, 38, 38;
	--bs-light-rgb: 244, 247, 251;
	--bs-dark-rgb: 7, 22, 45;

	/* Body / borders / shape */
	--bs-body-bg: #f4f7fb;
	--bs-body-color: rgba(15, 23, 42, 0.95);
	--bs-secondary-color: rgba(15, 23, 42, 0.70);
	--bs-border-color: rgba(15,23,42,.08);
	--bs-border-radius: 0.75rem;
}

.sidebar-nav{
	/* full height under navbar */
	min-height: calc(100vh - 56px);
	position: sticky;
	top: 56px;

	/* vertical blend + match top-left blue tone with the topbar */
	background:
		radial-gradient(900px 320px at 10% 10%, rgba(30,99,255,.32), transparent 60%),
		linear-gradient(
			180deg,
			rgb(var(--assured-navy-rgb) / .98) 0%,
			rgb(var(--assured-blue-rgb) / .92) 38%,
			rgb(var(--assured-teal-rgb) / .88) 72%,
			rgba(124,193,116,.62) 100%
		) !important;
	background-repeat: no-repeat;
	border-right: 1px solid rgba(255,255,255,.08) !important;

	padding: 18px 14px !important;
	overflow-y: auto;
}

/* Mobile: when the sidebar menu is rendered inside the top navbar collapse */
.sidebar-nav.sidebar-nav--mobile{
	min-height: auto;
	position: static;
	top: auto;
	border-right: 0 !important;
	padding: 10px 0 0 !important;
	overflow: visible;
	background: transparent !important;
}

.sidebar-nav.sidebar-nav--mobile h6{
	margin-left: 0;
	margin-right: 0;
}

/* section labels */
.sidebar-nav h6{
	margin: 18px 10px 8px;
	font-size: .72rem;
	letter-spacing: .12em;
	font-weight: 800;
	color: rgba(234,242,255,.45) !important;
	text-transform: uppercase;
}

/* list group spacing */
.sidebar-nav .list-group{
	gap: 6px;
}

/* base item */
.sidebar-nav .list-group-item{
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 10px 12px;
	color: var(--assured-muted);
	font-weight: 650;
	display:flex;
	align-items:center;
	gap: 10px;
	transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

/* hover */
.sidebar-nav .list-group-item-action:hover{
	background: rgba(255,255,255,.07);
	border-color: rgba(255,255,255,.10);
	color: var(--assured-text);
}

/* active pill highlight (green edge like screenshot) */
.sidebar-nav .list-group-item.active,
.sidebar-nav .list-group-item[aria-current="page"]{
	background: rgba(44,196,106,.16);
	border-color: rgba(44,196,106,.28);
	color: #ffffff;
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.sidebar-nav .list-group-item.active::before,
.sidebar-nav .list-group-item[aria-current="page"]::before{
	content:"";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--assured-green);
	box-shadow: 0 0 0 4px rgba(44,196,106,.18);
	margin-right: 2px;
}

/* icon slot (works with <i class="bi ..."> or svg) */
.sidebar-nav .nav-ico{
	width: 22px;
	height: 22px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color: rgba(234,242,255,.78);
	flex: 0 0 auto;
}
.sidebar-nav .list-group-item.active .nav-ico{
	color: #fff;
}

/* disabled spans */
.sidebar-nav .list-group-item.text-muted,
.sidebar-nav .list-group-item.disabled{
	opacity: .45;
	cursor: not-allowed;
}

/* subtle scrollbar */
.sidebar-nav::-webkit-scrollbar{ width: 10px; }
.sidebar-nav::-webkit-scrollbar-thumb{
	background: rgba(255,255,255,.14);
	border-radius: 999px;
}
.sidebar-nav::-webkit-scrollbar-track{ background: transparent; }

/* ===============================
   Assured-style Topbar (Gradient)
   =============================== */

.assured-topbar{
	background:
		radial-gradient(900px 320px at 10% 10%, rgba(30,99,255,.32), transparent 60%),
		radial-gradient(900px 320px at 90% 0%, rgba(44,196,106,.26), transparent 62%),
		linear-gradient(90deg,
			rgb(var(--assured-navy-rgb) / .98) 0%,
			rgb(var(--assured-blue-rgb) / .92) 40%,
			rgb(var(--assured-teal-rgb) / .86) 78%,
			rgba(214,210,74,.55) 100%
		);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 0 0;
	border-bottom: 1px solid rgba(255,255,255,.10);
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Make Bootstrap navbar text readable on dark gradient */
.assured-topbar .navbar-brand,
.assured-topbar .nav-link,
.assured-topbar .navbar-text{
	color: rgba(255,255,255,.92);
}

.assured-topbar .nav-link:hover,
.assured-topbar .nav-link:focus{
	color: #fff;
}

.assured-topbar .navbar-toggler{
	border-color: rgba(255,255,255,.22);
}

.assured-topbar .navbar-toggler-icon{
	filter: invert(1);
}

.brand-logo{
	height: 30px;
	width: auto;
	border-radius: 6px;
}

.brand-text{
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
}
.brand-accent{
	color: rgba(44,196,106,.95);
}

/* ===============================
   Bootstrap component refinements
   =============================== */

.btn{
	font-weight: 700;
	border-radius: 999px;
	padding: .55rem 1.1rem;
}

/* Assured primary button: blue→green gradient used site-wide */
.btn-primary{
	--bs-btn-color: #fff;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: transparent;

	background-color: var(--assured-blue);
	background-image: linear-gradient(90deg, rgba(30,99,255,.98), rgba(44,196,106,.92));
	border: none;
	box-shadow: 0 14px 30px rgba(2,6,23,.16);
}

.btn-primary:hover{
	filter: brightness(1.02);
}

.btn-primary:active{
	filter: brightness(.98);
}

.btn-primary:focus-visible{
	box-shadow: 0 0 0 .25rem rgba(30,99,255,.22), 0 14px 30px rgba(2,6,23,.16);
}

.btn-primary:disabled,
.btn-primary.disabled{
	opacity: .65;
}

/* Outline primary stays blue (used for social buttons etc.) */
.btn-outline-primary{
	--bs-btn-color: var(--assured-blue);
	--bs-btn-border-color: rgba(30,99,255,.55);
	--bs-btn-hover-bg: rgba(30,99,255,.10);
	--bs-btn-hover-border-color: rgba(30,99,255,.65);
	--bs-btn-hover-color: var(--assured-blue);
	--bs-btn-active-bg: rgba(30,99,255,.14);
	--bs-btn-active-border-color: rgba(30,99,255,.75);
	--bs-btn-active-color: var(--assured-blue);
}

/* centred search like screenshot */
.topbar-search{
	flex: 1 1 auto;
	max-width: 520px;
	margin: 0 auto;
	position: relative;
}

.topbar-search i{
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(15,23,42,.55);
}

.topbar-search .form-control{
	border-radius: 999px;
	padding-left: 42px;
	background: rgba(255,255,255,.88);
	border: 1px solid rgba(255,255,255,.40);
	box-shadow: 0 10px 25px rgba(2,6,23,.18);
}

.topbar-search .form-control:focus{
	background: rgba(255,255,255,.96);
	border-color: rgba(44,196,106,.55);
	box-shadow: 0 12px 30px rgba(2,6,23,.22);
}

/* right-side icon buttons */
.icon-btn{
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: rgba(255,255,255,.92);
	text-decoration: none;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.08);
	margin-left: 8px;
}

.icon-btn:hover{
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.20);
	color: #fff;
}

/* avatar in navbar already present, just make it match */
.avatar-sm{
	width: 32px;
	height: 32px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,.30);
}

/* ===============================
   Main page background + cards
   =============================== */

/* main content background like screenshot */
main.col{
	background:
		radial-gradient(900px 380px at 30% 0%, rgba(30,99,255,.10), transparent 60%),
		radial-gradient(900px 380px at 80% 10%, rgba(44,196,106,.08), transparent 60%),
		#f4f7fb;
	min-height: calc(100vh - 56px);
}

/* soften Bootstrap cards globally (optional) */
.card{
	border: 1px solid rgba(15,23,42,.08);
	border-radius: 14px;
	box-shadow: 0 14px 35px rgba(2,6,23,.08);
}

/* ===============================
   Auth pages (login / register)
   =============================== */

.auth-body{
	min-height: 100vh;
	background:
		radial-gradient(1000px 420px at 18% 10%, rgba(30,99,255,.16), transparent 60%),
		radial-gradient(900px 380px at 85% 0%, rgba(44,196,106,.14), transparent 60%),
		linear-gradient(180deg, #f6f9ff 0%, #ffffff 60%, #f4f7fb 100%);
	padding: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-shell{
	width: 100%;
	max-width: 440px;
}

.auth-card{
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(15,23,42,.10);
	border-radius: 22px;
	box-shadow: 0 26px 80px rgba(2,6,23,.16);
	padding: 26px 26px 22px;
}

.auth-brand{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
}

.auth-logo{
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.auth-brand-text{
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--assured-blue);
	font-size: 1.35rem;
}

.auth-brand-accent{
	color: var(--assured-green);
}

.auth-footer{
	margin-top: 14px;
	text-align: center;
	color: rgba(15,23,42,.55);
	font-size: .9rem;
}

.auth-footer-links{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.auth-footer-links a{
	color: rgba(15,23,42,.60);
	text-decoration: none;
}

.auth-footer-links a:hover{
	color: rgba(15,23,42,.82);
	text-decoration: underline;
}

.auth-footer-sep{
	opacity: .65;
}

.auth-footer-social{
	margin-top: 10px;
	display: flex;
	justify-content: center;
	gap: 14px;
}

.auth-social-link{
	color: rgba(15,23,42,.55);
	text-decoration: none;
	font-size: 1.05rem;
	line-height: 1;
}

.auth-social-link:hover{
	color: rgba(15,23,42,.82);
}

.auth-title{
	text-align: center;
	font-weight: 850;
	letter-spacing: -0.02em;
	margin: 8px 0 0;
	font-size: 1.25rem;
	color: var(--assured-blue);
}

.auth-subtitle{
	text-align: center;
	margin: 6px 0 0;
	color: rgba(15,23,42,.65);
}

/* Inputs (crispy bootstrap5) */
.auth-card .form-label{
	font-weight: 700;
	color: rgba(15,23,42,.70);
	font-size: .9rem;
}

.auth-card .form-control{
	background-color: rgba(241,245,249,.95);
	border: 1px solid rgba(15,23,42,.10);
	border-radius: 12px;
	min-height: 46px;
	padding-left: .95rem;
}

.auth-card .form-control:focus{
	background-color: #fff;
	border-color: rgba(44,196,106,.55);
	box-shadow: 0 0 0 .25rem rgba(44,196,106,.18);
}

/* Input group icons (Bootstrap Icons) */
.auth-input-group{
	border-radius: 12px;
}

.auth-card .input-group-text{
	background: rgba(241,245,249,.95);
	border: 1px solid rgba(15,23,42,.10);
	color: rgba(15,23,42,.55);
	border-radius: 12px;
	min-width: 46px;
	justify-content: center;
}

.auth-card .auth-input-group .form-control{
	border-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.auth-card .auth-input-group .input-group-text{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.auth-card .auth-input-group:focus-within .input-group-text,
.auth-card .auth-input-group:focus-within .form-control{
	border-color: rgba(44,196,106,.55);
	box-shadow: 0 0 0 .25rem rgba(44,196,106,.18);
}

/* Checkbox row */
.auth-card .form-check{
	margin-top: 10px;
}

.auth-card .form-check-label{
	color: rgba(15,23,42,.70);
}

/* Social buttons */
.auth-social .btn{
	border-radius: 12px;
	padding: .6rem 1rem;
	font-weight: 750;
}

/* Primary submit button gradient */
.auth-btn{
	border-radius: 14px;
	padding: .7rem 1rem;
	font-weight: 850;
	letter-spacing: -0.01em;
	border: none;
	background: linear-gradient(90deg, rgb(var(--assured-teal-rgb) / .95), rgba(44,196,106,.95));
	box-shadow: 0 14px 30px rgba(2,6,23,.14);
}

.auth-btn:hover{
	filter: brightness(1.02);
}

.auth-link{
	color: rgba(30,99,255,.95);
	text-decoration: none;
}

.auth-link:hover{
	text-decoration: underline;
}

.auth-small{
	color: rgba(15,23,42,.60);
}

/* Sign out page actions */
.auth-card .auth-actions .btn{
	border-radius: 999px;
	padding: .7rem 1.35rem;
	font-weight: 850;
	min-width: 140px;
}

.auth-card .auth-actions .btn-danger{
	box-shadow: 0 16px 34px rgba(239,68,68,.22);
}

.auth-card .auth-actions .btn-outline-secondary{
	background: rgba(255,255,255,.70);
	border-color: rgba(15,23,42,.28);
	color: rgba(15,23,42,.65);
}

.auth-card .auth-actions .btn-outline-secondary:hover{
	background: rgba(255,255,255,.92);
	color: rgba(15,23,42,.85);
}