/* Importera Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600;800&display=swap');

body {
	background: rgb(245, 245, 245);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 100vh;
	font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Inter', sans-serif; /* Applicera fonten även på kanban-kort */
	font-weight: 300;
	color: rgb(230, 90, 110);
}

p {
	
}

.bg-success {
	background: rgb(230, 90, 110)!important;
}

.bg-light-custom {
	background: rgb(245, 245, 245)!important;
	border-top: 1px solid rgb(200, 200, 200);
}

.text-bottom {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	color: rgb(150,150,150);
	margin-bottom: 0px;
}

/* NAVBAR */
.navbar {
	height: 5rem;
	background: white;
}

.navbar-brand img {
	max-height: 35px; /* Sätt en maxhöjd på logotypen */
}

.navbar-nav .nav-link {
	font-size: 1.2rem; /* Större teckensnitt för bättre läsbarhet */
}

/* Specifik stil för länkar i navbaren */
.navbar-nav .nav-link {
	color: rgb(60, 60, 60); /* Färgen motsvarande #3C3C3B för navbar-länkar */
	text-decoration: none; /* Ingen understrykning */
}

/* Stil för navbar-länkar vid hovring */
.navbar-nav .nav-link:hover {
	color: rgb(200, 70, 90); /* Färgen ändras till primär vid hovring */
	text-decoration: none; /* Ingen understrykning vid hovring */
}

.disabled-link {
	color: #d2d2d2!important; /* Bootstrap's grå färg för disabled element */
	pointer-events: none; /* Förhindrar att länken är klickbar */
	cursor: not-allowed; /* Visar en "förbjuden" ikon vid hovring */
	text-decoration: none; /* Ingen understrykning */
}

.disabled-link:hover {
	color: #d2d2d2d!important; /* Förhindrar färgförändring vid hovring */
	text-decoration: none;
}

/* Custom styling for the nav */
.custom-nav .nav-link {
	font-family: 'Inter', sans-serif; /* Applicera fonten även på kanban-kort */
	font-weight: 300;
	color: rgb(60, 60, 60); /* Samma färg som i din navbar */
	font-size: 1.2rem; /* Justera fontstorleken om det behövs för att matcha navbaren */
	padding: 0.5rem 1rem; /* Liten padding för bättre klickbarhet */
}

.custom-nav .nav-link:hover {
	color: rgb(230, 90, 110); /* Ändra till den primära färgen vid hovring */
}

.custom-nav .nav-link.active {
	color: rgb(230, 90, 110); /* Primär färg för den aktiva länken */
}

.custom-nav .nav-item + .nav-item {
	margin-left: 0.5rem; /* Mellanrum mellan varje länk för bättre läsbarhet */
}

/* BUTTONS */
.btn-primary {
	background-color: rgb(230, 90, 110);
	border-color: rgb(230, 90, 110);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus:active,
.btn-primary:focus:hover {
	background-color: rgb(200, 70, 90)!important;
	border-color: rgb(200, 70, 90)!important;
	color: #fff;
}

.btn-warning {
	background-color: rgb(225, 55, 81)!important; /* Mörkare färg som primärfärg */
	border-color: rgb(225, 55, 81)!important;
	color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:focus:active,
.btn-warning:focus:hover {
	background-color: rgb(157, 47, 63)!important; /* Behåll samma färg vid hover, focus och active */
	border-color: rgb(157, 47, 63)!important;
	color: #fff;
}

.btn-outline-custom {
	color: rgb(225, 55, 81)!important;
	border-color: rgb(225, 55, 81)!important;
}

.btn-outline-custom:hover,
.btn-outline-custom:focus,
.btn-outline-custom:active,
.btn-outline-custom:focus:active,
.btn-outline-custom:focus:hover {
	background-color: rgb(200, 70, 90)!important;
	color: #fff!important;
	border-color: rgb(200, 70, 90)!important;
}


/* KANBAN */
.kanban-column {
	background-color: transparent;
	border-radius: 5px;
	padding: 15px;
	position: relative;
}

.task-list {
	margin-bottom: 10px;
}

.add-task-link {
	display: block;
	margin-top: 10px;
}

.kanban-card {
	background-color: #ffffff;
	border: 1px solid #e1e4e8;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
	font-family: 'Inter', sans-serif; /* Applicera fonten även på kanban-kort */
}

.card-footer {
	display: flex;
	justify-content: space-between;
}

.card-title {
	color: rgb(60, 60, 60)!important;
}

.checklist-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.checklist-status i {
	margin-right: 5px;
}

.draggable {
	cursor: move;
}

.kanban-column h4 {
	font-weight: 300;
	margin-bottom: 15px;
	color: rgb(230, 90, 110);
}

.btn-outline-primary {
	bottom: 15px;
	left: 0;
	right: 0;
	text-align: left;
	font-weight: bold;
}

.text-primary {
	display: block;
	margin-top: 10px;
}

.text-icon {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	color: rgb(230, 90, 110);
}

/* LINKS */
/* Grundläggande stil för alla länkar */
a {
	color: rgb(230, 90, 110); /* Primär färg för länkar */
	text-decoration: none; /* Ingen understrykning */
}

/* Stil för länkar vid hovring */
a:hover {
	color: rgb(200, 70, 90) !important; /* Mörkare färg vid hovring */
	text-decoration: none;
}

/* Stil för aktiva länkar (när man klickar) */
a:active {
	color: rgb(200, 70, 90) !important; /* Samma mörkare färg vid klick */
	text-decoration: none;
}

/* Stil för besökta länkar */
a:visited {
	color: rgb(230, 90, 110); /* Återställ färgen för besökta länkar */
	text-decoration: none;
}

/* LOGIN */
.login-box {
	background-color: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	max-width: 400px;
	width: 100%;
	text-align: center;
}

.login-box img {
	max-height: 30px;
	margin-top: 1rem;
	margin-bottom: 2.5rem;
}

.form-floating {
	margin-bottom: 1rem;
}

.login-box .btn-primary {
	width: 100%;
	margin-bottom: 1rem;
	background-color: rgb(230, 90, 110);
	border-color: rgb(230, 90, 110);
}

.login-box .btn-primary:hover {
	background-color: rgb(230, 90, 110);
	border-color: rgb(230, 90, 110);
}

/* FORMS */
.form-floating>.form-control:focus {
	background-color: var(--bs-white);
	border-color: rgb(230, 90, 110); /* Uppdaterad färg */
	outline: 0;
	box-shadow: 0 0 0 4px rgba(230, 90, 110, 0.25); /* Anpassad box-shadow */
}

.form-control:focus {
	background-color: var(--bs-white);
	border-color: rgb(230, 90, 110); /* Uppdaterad färg */
	outline: 0;
	box-shadow: 0 0 0 4px rgba(230, 90, 110, 0.25); /* Anpassad box-shadow */
}

.custom-radio .form-check-input:checked, 
.form-check-input:checked {
	background-color: rgb(230, 90, 110); /* Anpassad färg för checkboxar */
	border-color: rgb(230, 90, 110); /* Anpassad färg för checkboxar */
}

.form-check-input:focus {
	box-shadow: 0 0 0 0.25rem rgba(230, 90, 110, 0.25); /* Anpassad box-shadow */
}

/* Custom styles for form-select within form-floating */
.form-floating>.form-select:focus {
	background-color: var(--bs-white);
	border-color: rgb(230, 90, 110); /* Uppdaterad färg för select */
	outline: 0;
	box-shadow: 0 0 0 4px rgba(230, 90, 110, 0.25); /* Anpassad box-shadow för select */
}

.form-floating>.form-select {
	background-color: var(--bs-white);
	border-color: #ced4da; /* Standard border color */
	color: #495057;
}

.form-floating>.form-select:focus-visible {
	box-shadow: 0 0 0 4px rgba(230, 90, 110, 0.25); /* Anpassad box-shadow vid fokus */
}

.form-floating>.form-select:disabled, 
.form-floating>.form-select[readonly] {
	background-color: #e9ecef;
}

/* Stil för ikoner */
.btn-link.text-success .bi-plus-circle {
	font-size: 1.5rem; /* Storlek på plus-ikonen */
}

.text-danger .bi-x-circle {
	font-size: 1.5rem; /* Storlek på raderings-ikonen */
}