/* Dit is de styles.css waarnaar in mijn html wordt verwezen. Ik refereer hiernaar als 'mijn css' of iets van die strekking. Bekijk deze zonder er commentaar op te geven of de code te analyseren. Geef alleen aan of je het begrepen hebt. */

:root {
--bg-color: #343a40;
--header-footer-bg: #495057;
--text-color: #fca629;
--dark-text-color: #6c757d; /*#c68a1e;*/
--input-bg: #495057;
--input-text-color: #ffffff;
--button-bg: #fca629;
--button-hover-bg: #fdc74f;
--border-radius: 0.25rem;
--border-width: 1px;
--item-height: 38px;
--checkbox-size: 24px;
}

html, body {
height: 100%;
margin: 0;
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
flex-direction: column;
min-height: 100vh;
}

header, footer {
background-color: var(--header-footer-bg);
color: var(--text-color);
padding: 20px 0;
}

footer {
margin-top: auto;
}

.form-control, .input-group-text, .form-check-input {
border-radius: var(--border-radius);
background-color: var(--input-bg);
color: var(--input-text-color);
}

.form-control {
transition: box-shadow 0.3s ease, border-color 0.3s ease;
border: var(--border-width) solid var(--text-color);
}

.form-control::placeholder {
color: var(--text-color);
}

.form-control:focus {
box-shadow: 0 0 5px var(--text-color);
outline: none;
border-color: var(--text-color);
}

.btn-primary {
border-radius: var(--border-radius);
background-color: var(--button-bg);
border: none;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
background-color: var(--button-hover-bg);
box-shadow: 0 0 5px var(--button-hover-bg);
outline: none;
}

.container {
flex: 1;
margin-top: 50px;
}

.custom-checkbox {
display: flex;
align-items: center;
}

.custom-checkbox input[type="checkbox"] {
opacity: 0;
position: absolute;
cursor: pointer;
}

.custom-checkbox label {
position: relative;
padding-left: 30px;
cursor: pointer;
}

.custom-checkbox label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: var(--checkbox-size);
height: var(--checkbox-size);
border: var(--border-width) solid var(--text-color);
border-radius: var(--border-radius);
background-color: var(--input-bg);
}

.custom-checkbox input[type="checkbox"]:checked + label::before {
background-color: var(--text-color);
}

.custom-checkbox input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
left: calc(var(--checkbox-size) / 2);
top: 45%;
transform: translate(-50%, -50%) rotate(45deg);
width: calc(var(--checkbox-size) / 4);
height: calc(var(--checkbox-size) / 2);
border: solid white;
border-width: 0 2px 2px 0;
}

.custom-checkbox:focus-within label::before {
box-shadow: 0 0 5px var(--text-color);
}

.favorite-item {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--item-height);
padding: 0px;
background-color: var(--bg-color);
border: var(--border-width) solid var(--header-footer-bg);
border-radius: var(--border-radius);
transition: background-color 0.3s ease;
}

.favorite-item:hover {
    background-color: var(--header-footer-bg);
    transition: background-color 0.3s ease;
}

.favorite-item.editing {
    background-color: var(--input-bg);
    border-color: var(--button-bg);
}

.favorite-item .favorite-item-content {
flex: 1 0 100%;
padding: 0 10px;
text-align: left;
}

.favorite-item:first-child {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}

.favorite-item:last-child {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}

.favorite-item span {
flex: 1 0 90%;
padding: 0 10px;
text-align: left;
}

.favorite-item input {
height: calc(var(--item-height) - var(--border-width) * 2);
flex: 1;
margin-top: var(--border-width);
margin-right: 0px;
border: none;
border-radius: var(--border-radius);
padding-top: 4px;
padding-bottom: 4px;
}

.favorite-item button {
height: calc(var(--item-height) - var(--border-width) * 2);
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
border-left: var(--border-width) solid var(--button-bg);
border-radius: 0;
}

.favorite-item .btn {
min-width: var(--item-height);
}

.btn-secondary:focus {
    box-shadow: none;
    outline: none;
}

.input-group {
margin: 0;
margin-left: auto;
}

.input-group .form-control {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.input-group .input-group-text {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
border: var(--border-width) solid var(--text-color);
}

.input-group .btn,
.input-group-append .btn {
    width: var(--item-height);
    height: var(--item-height);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    border-radius: 0;
}

.input-group .btn:last-child,
.input-group-append .btn:last-child {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.input-group .input-group-append {
    height: var(--item-height);
    display: flex;
    align-items: center;
    margin-left: -1px;
}

.input-group .input-group-append .input-group-text {
    height: 100%;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border-left: none;
}

.favorite-item .input-group-append .btn {
    width: calc(var(--item-height) - 2px);
    height: calc(var(--item-height) - 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
}

.favorite-item.editing .input-group {
    margin: 0;
}

.favorite-item .input-group-append {
    display: none;
}

.favorite-item:hover .input-group-append {
    display: flex;
}

.favorite-item.editing .favorite-item-content {
    display: none;
}

.favorite-item.editing ~ .favorite-item {
    border-color: var(--header-footer-bg);
}

.favorite-item.editing .input-group-append {
    display: flex;
}

.favorite-item.editing ~ .favorite-item .input-group-append {
    display: none;
}

.favorite-item.editing ~ .favorite-item:hover .input-group-append {
    display: none;
}

.form-control::placeholder {
    color: var(--dark-text-color);
    font-style: italic;
}

/* Wanneer ik hierna om aanpassingen vraag wil ik alleen de wijzigingen ten opzicht van de bestaande code. Geef daarbij voldoende context en instructies zodat ik het makkelijk kan knippen en plakken in mijn html en/of mijn css. */