#clientDossierEditor {max-height:50vh; overflow-y: auto;}

/* ********************************************************* */
/* general ************************************************* */
/* ********************************************************* */

:root {
	--primary-brand-color:#3c6ea1;
	--primary-brand-color-dark:#224072;
	--accent-color-orange: #f4a261;
	--accent-color-orange-dark: #e09455;
	--accent-color-green: #8ac926; /* Primaire accentkleur: Levendig groen */
    --accent-color-green-dark: #73ad21; /* Donkerdere groene variant voor hover */

	--background-light: #f3f7fa; /* Zeer licht, kalm blauw-grijs voor algemene achtergrond */
	--card-background: #ffffff; /* Wit voor sectie/kaart achtergronden */
    --text-dark: #333d45; /* Donkergrijs-blauw voor koppen en sterke tekst */
    --text-medium: #6a7a8f; /* Middelgrijs-blauw voor lichaamstekst */
    --border-color: #e0e6f0; /* Lichte randkleur */
	--primary-bg-30: rgba(60, 110, 161, 0.3);
}

*:focus {
	box-shadow: none !important;
}

html {
	height:100%;
	width:100%;
	overflow: hidden;
}

body {
	display:flex;
	flex-direction: column;
	height: -webkit-fill-available;
	width: -webkit-fill-available;
	overflow: hidden;
}

.main-container {
	flex-grow: 1;
	overflow-y:auto;
	scrollbar-gutter: stable both-edges;
}

.main-container {
	padding: 20px 10px 40px 10px;
}

::placeholder {
	color:#aaa !important;
}

.btn-primary {
    --bs-btn-bg: var(--primary-brand-color);
    --bs-btn-border-color: var(--primary-brand-color);
    --bs-btn-hover-bg: var(--primary-brand-color-dark);
    --bs-btn-hover-border-color: var(--primary-brand-color-dark);
    
    --bs-btn-active-bg: var(--primary-brand-color-dark);
    --bs-btn-active-border-color: var(--primary-brand-color-dark);
    
    --bs-btn-disabled-bg: var(--primary-brand-color);
    --bs-btn-disabled-border-color: var(--primary-brand-color);
}

a {
	color:var(--primary-brand-color);
}

.text-danger a {
	color:inherit;
}

a:hover {
	color:var(--primary-brand-color-dark);
	color:var(--accent-color-orange);
}

body {
    font-family: 'Inter', Arial, sans-serif;
	background-color:var(--background-light);
	color: var(--text-medium);
}

.bi-star-fill {
	color:gainsboro;
}
.bi-star-fill.gold{
	color:gold;
}

[data-bs-toggle="collapse"] * {
	caret-color: transparent !important;
}

table {
	caret-color: transparent !important;
}

/* ********************************************************* */
/* Bootstrap overrides / extensions ************************ */
/* ********************************************************* */

.fs-7 {font-size:0.8rem !important;}
.table-group-divider {
	border-top: calc(var(--bs-border-width)*2) solid var(--primary-brand-color);
}
.table>:not(caption)>*>* {
	color:inherit;
}


.navbar-toggler:focus {
    box-shadow: 0 0 0;
}

.navbar-toggler:hover {
	color: var(--accent-color-orange) !important;
	border-color: var(--accent-color-orange);
}

.form-check-input:checked {
    background-color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
}

.btn.disabled {pointer-events: auto;}

.text-bg-inactive {
	color: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
}
.badge {
	font-size: 0.8rem;
	line-height: 1rem;
}

/* ********************************************************* */
/* utilities *********************************************** */
/* ********************************************************* */

.align-center {
	text-align:center;
}

.auto-width {
	width:auto !important;
}

#loader-icon {
	position:absolute;
	left: calc(50% - 32px);
	top:30%;
	z-index:10;
	display:inline-block;
	display:none;
}

.no-decoration {
	text-decoration:none !important;
	color:inherit !important;
}

.link:hover {
	cursor: pointer;
}

.btn.disabled {
	pointer-events: none;
}

.no-margin {
	margin:0;
}

.full-width {
	width:100%;
}

th.fit-width, td.fit-width {
	width: 1px;
	white-space: nowrap;
}

.text-announcement {
	font-weight:bold;
	color:var(--accent-color-orange);
}

.text-accent-green {
	color:var(--accent-color-green);
}
.text-accent-orange {
	color:var(--accent-color-orange);
}

.tooltip {
	--bs-tooltip-bg:var(--accent-color-orange-dark);
	--bs-tooltip-color: #fff;
	--bs-tooltip-opacity: 1;
	font-size:0.7rem;
}
.flip {
	transform:rotate(180deg)
}

/* ********************************************************* */
/* wrappers ************************************************ */
/* ********************************************************* */

.container-fluid {padding:0px !important;}

.login-wrapper {
	width:calc(100% - 50px);
	max-width:400px;
	padding:0px !important;
	display:flex !important;
	flex-direction:column !important;
	justify-content:center !important;
	margin:25px auto;
	border-radius:6px;
	align-items: center;
}
body:has(.notLoggedIn) {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(156, 194, 223, 0.3) 25%, rgba(156, 194, 223, 0.5) 100%),
                url('../images/hero_image_v2.jpg') no-repeat left center;
    background-size: cover;
}

/* ********************************************************* */
/* message ************************************************* */
/* ********************************************************* */

.message {
	padding:1rem;
	border-radius:6px;
}

.message.success {
	background-color:var(--bs-success-bg-subtle);
}

.message.warning {
	background-color:var(--bs-danger-bg-subtle);
}

.message-indicator {
	display: block;
	font-size:0.7rem;
	line-height: 0.7rem;
	color:#fff;
	text-align: center;
	padding:3px 4px 3px 3px;
}

/* ********************************************************* */
/* cards - general ***************************************** */
/* ********************************************************* */

.card {
	box-shadow: 0 4px 8px rgba(34, 64, 114, 0.2);
	color:#555;
	--bs-card-border-color: rgba(0, 0, 0, 0.1);
}

.card.full-height {
	height:100%;
}

.card-header {
	background-color: #fff;
}

.card-header {
	color: var(--primary-brand-color);
	border:0px;
}

.card-header h5 {
	font-size: 1.2rem;
	font-weight: bold;
	margin:5px 0px 0px 0px;
	padding:0px 0px 5px 0px;
	border-bottom:1px solid;
}

.card-body {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	color: var(--text-medium);
	font-size: 0.9rem;
}

.card-body h6 {
	font-size:1.1rem;
	color: var(--text-dark);
}

.card-footer {
	border: 0px;
	background:transparent;
	font-size: 0.9rem;
}

.card-text {
	margin-bottom:0.5rem;
}

.card.disabled .card-body {
	color: #aaa;
	border-radius:inherit;
}

.card.disabled .card-header, .card.disabled .card-header h5 {
	color: #ccc;
	font-weight:bold;
}

/* ********************************************************* */
/* cards - detailed **************************************** */
/* ********************************************************* */

/* progress */
.progress {
	margin-bottom:0.5rem;
}

.progress-bar {
	--bs-progress-bar-bg:var(--accent-color-green);
	
}

/* next session */
.coach-session {
    background: #fdf7ee;
    border-radius: 6px;
    padding: 14px 0;
    text-align: center;
    margin-bottom: 10px;
    color: #224072;
    font-weight: 600;
    font-size: 1.08rem;
}

.session-date {
    font-weight: 700;
    color: #224072;
}

.session-time {
    color: #4a5677;
    font-weight: 400;
    font-size: 0.98rem;
}

.reschedule-link {
    display: block;
    text-align: center;
    margin-top: 4px;
}


.card.journal-entry {
	border:0px;
	border-radius:0;
	box-shadow:none;
	border-left:3px solid var(--accent-color-green);
	background-color: rgba(0,0,0,0.02)
	
}

.card.journal-entry.coachView.unread {
	border-left:3px solid #F00;
}

.card.journal-entry .btn {
	background-color: var(--primary-bg-30);
	color: var(--primary-brand-color);
	font-weight:600;
}

.card.journal-entry .card-header {
	background-color: transparent;
}

.card.journal-entry:hover {
	border-color: var(--primary-brand-color);
	cursor: pointer;
}

.card.journal-entry:hover .btn {
	background-color: var(--primary-brand-color);
	color: #fff;
}

.card.journal-entry:hover  .badge {
	background-color:#fff;
}

.card.journal-entry-detail {
	border:0px;
	border-radius:0;
	box-shadow:none;
}

/* ********************************************************* */
/* login / password reset ********************************** */
/* ********************************************************* */

.card.login {
	flex-grow: 0;
	width:100%;
}

.login,
.passwordReset {
	margin: 50px auto;
	padding:32px;
	background-color:#f7f8fa;
}

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

.login .logo-image {
	display:block;
	width:80%;
	margin: 0px auto 15px auto;
}

.login .logo-text {
	font-size: 1.1rem;
	line-height:1.3rem;
	letter-spacing:1px;
	color:var(--primary-brand-color);
}

/* ********************************************************* */
/* sidebar ************************************************* */
/* ********************************************************* */

.sidebar {
	flex-grow:0 !important;
	flex-shrink:0 !important;
	display:flex !important;
	flex-direction:column !important;
	width:250px;
	min-height:100%;
	background-color:#fff;
	border-radius: 6px 0 0 6px;
	border: 1px solid #d5dae6;
}

.sidebar .logo {
	flex-grow:0 !important;
	padding:20px;
	text-align:center;
}

.sidebar .logo-image {
	display:block;
	margin:10px auto;
	width:70%;
}

.sidebar .logo-text {
	font-size: 1.3rem;
	line-height:1.1rem;
	letter-spacing:1px;
	color:var(--primary-brand-color);
}

/* ********************************************************* */
/* topbar ************************************************* */
/* ********************************************************* */

ol.breadcrumb {
	margin-top: 1rem;
	font-size: 0.8rem;
}


/* ********************************************************* */
/* nav ***************************************************** */
/* ********************************************************* */

.navbar {
    background-color: var(--card-background);
    box-shadow: 0 4px 12px rgba(34, 64, 114, 0.25);
	min-height:70px;
	padding:0px;
	z-index:100;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
	background-color: inherit;
	margin-top:15px;
	margin-bottom:15px;
}

.navbar .logo {
	flex-grow:1;
}

.navbar .logo img {
    height: 40px;
}

.navbar-collapse {
	justify-content: flex-end;
}

.navbar-collapse ul.main-menu {
    list-style: none;
    margin: 0px 2.5em 0px 0px;
    padding: 0;
    display: flex;
    align-items: flex-end;
	flex-grow:0;
}

@media (max-width:991px) {
	.navbar-collapse.show ul.main-menu,
	.navbar-collapse.collapsing ul.main-menu {
		margin: 0px;
	}
}

.navbar-collapse ul.main-menu li {
    margin: 10px 0px 10px 30px;
}

.navbar ul li a {
    color: var(--text-dark); /* Nav links donkerdere tekstkleur */
    text-decoration: none;
    padding: 5px 0;
    position: relative;
}

.navbar ul li.active a {
	font-weight: 600;
	cursor: default;
}

/* Subtiele underline animatie */
.navbar ul li a:not(.btn-cta)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--accent-color-orange); /* *** AANGEPASTD: Oranje accent voor onderstreping bij hover *** */
    transition: width 0.3s ease-out;
}

.navbar ul li a:hover::after {
    width: 100%;
}

.navbar ul li:not(.active) a:not(.btn-cta):hover {
    color: var(--accent-color-orange); /* Oranje accent bij hover voor nav links */
}


/* ********************************************************* */
/* user profile ******************************************** */
/* ********************************************************* */

.user-profile {
	flex-grow:0 !important;
	display: flex;
	flex-direction:row !important;
    align-items: center;
    padding: 6px 0px;
	margin-top: 0;
}

.sidebar .user-profile {
	padding: 12px 24px;
	border-top: 1px solid #e5e7eb;
}

.sidebar .user-info,
.topbar .user-info {
	font-size: 0.9rem;
}

.user-info .name {
    flex-grow:1 !important;
	font-weight: 600;
    color: var(--primary-brand-color);
}

.logout {
    display: block;
    margin-top: 2px;
}


.avatar-container {
    position: relative;
	display:flex;
	justify-content: flex-end;
    cursor: pointer;
    user-select: none;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--accent-color-green);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 6px 15px rgba(138, 201, 38, 0.4); /* Gekleurde schaduw met groen accentkleur */
	transition: all 0.3s ease;
}

.avatar.toggle:hover {
	background-color: var(--accent-color-green-dark);
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(138, 201, 38, 0.5); /* Grotere schaduw bij hover */
}

.avatar-menu {
    display: none;
    position: absolute;
    top: calc(0% + 48px);
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 1000;
    border-radius: 6px;
    padding: 8px 0;
}

.avatar-menu ul {
    list-style: none;
    padding: 10px;
    margin: 0;
}

.avatar-menu ul li {
	padding: 10px 0px;
}

.avatar-menu ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
    transition: background-color 0.15s ease; /* Smooth hover effect */
	padding:0px;
}

.avatar-menu li a i { /* Style for icons within menu items */
    font-size: 1.1rem; /* Adjust icon size */
}

.avatar-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}



/* ********************************************************* */
/* main content ******************************************** */
/* ********************************************************* */

.page-title {
	font-size: 2rem;
	margin-top:1rem;
	margin-bottom: 1rem;
	padding-bottom:15px;
    color: var(--text-dark);
	font-weight:bold;
	text-align: center;
}

.page-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--accent-color-green); /* Groen accent voor de lijn */
    margin: 10px auto 0 auto;
    border-radius: 2px;
}

#emotionsChartCanvas {
	max-height: 400px !important;
}

/* ********************************************************* */
/* pager *************************************************** */
/* ********************************************************* */

.pager {display:flex;list-style:none; margin-bottom:0px;padding-left:0px;}

.pager li {
	margin-right:10px;
	border:1px solid;
	border-color:var(--primary-brand-color);
	border-radius:6px;
	text-align:center;
	background-color:#fff;
}

.pager li.active {
	background-color:var(--primary-brand-color);
}

.pager a,
.pager li>span {
	text-decoration:none;
	display:inline-block;
	width:2rem;
}

.pager li>span {
	color:#dee2e6;
}

.pager li a {
	font-weight: normal;
}

.pager li.active a {
	font-weight: bold;
	color:#fff;
}

select.form-select-sm.itemsPerPage {
	padding-top:0;
	padding-bottom:0;
	font-size:.8rem;
	width:65px;
}

/* ********************************************************* */
/* tables ************************************************** */
/* ********************************************************* */

th {
	color:var(--primary-brand-color) !important;
}

/* Footer */
.footer {
	width: 100%;
	height: 40px;
	line-height: 40px;
    background-color: var(--primary-brand-color-dark);
    color: #fff;
    text-align: center;
    margin-top: 0px;
    font-size: 0.7rem;
	box-shadow: 0 -2px 6px rgba(34, 64, 114, 0.25);
	z-index:100;
}

footer .container {
	padding:0px;
}

footer a {
    color: #fff; /* Standaard wit voor footer links */
    text-decoration: none;
    margin: 0 15px;
    font-weight: 600;
}

footer a:hover {
    text-decoration: underline;
    color: var(--accent-color-orange); /* Oranje accent bij hover voor footer links */
}


/* Pagination */
.pagination {
	padding:10px;
	border:1px solid var(--border-color);
	border-radius:6px;
}

/* themes */
.theme-tag {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin: 0 8px 8px 0;
}

/* emotion bars */
.emotion-bar {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.bar {
    background: #eee;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background: #3498db;
    border-radius: 6px;
}

/* attention points */
ul.attention-points,
ul.reflection-questions {
	margin-left:15px;
	padding:0px;
	list-style-position: outside;
}

@media (max-width: 765px) {
	.navbar {
		min-height:50px;
	}
	.navbar .container {
		margin-top:5px;
		margin-bottom:5px;
	}
	.navbar .logo img {
		height: 40px;
	}
}