html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Default light mode */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

/* Dark mode */
.dark-mode {
    --bg-color: #1e1e1e;
    --text-color: #ffffff;
}

/* Prevent the Dark Mode toggle label from changing color */
.navbar .dark-mode-toggle-text {
    color: #000000 !important; /* Ensures the text remains black */
}


/* Apply the variables */
body, h1, h2, h3, h4, h5, p {
    background-color: var(--bg-color);
    color: var(--text-color);
}


/* Toggle switch styling */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-left: 10px; /* Adjust as needed to position it nicely in the navbar */
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

    input:checked + .slider:before {
        transform: translateX(26px);
    }

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* Dark Mode placeholder and input field styles */
input, textarea {
    background-color: var(--bg-color); /* Ensures input fields match the body background */
    color: var(--text-color); /* Ensures the input text color matches the theme */
}

    /* Style placeholders specifically for dark mode */
    input::placeholder,
    textarea::placeholder {
        color: #757575; /* A light grey color, adjust as needed */
    }

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #b0b0b0; /* A slightly darker grey for dark mode, adjust if needed */
}

/* Ensure input fields are readable in dark mode */
.dark-mode input,
.dark-mode textarea {
    background-color: #333; /* Set a darker background for inputs in dark mode */
    color: #ffffff; /* Ensure input text remains readable */
    border: 1px solid #555; /* Optional: subtle border to enhance field visibility */
}

/* Card background and text colors */
.card {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid #ccc;
}

.dark-mode .card {
    background-color: #2e2e2e;
    color: #ffffff;
    border: 1px solid #444;
}

/* Button styles */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.dark-mode .btn-primary {
    background-color: #375a7f;
    border-color: #375a7f;
}

.btn-secondary.disabled, .btn-secondary:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.65;
}

.dark-mode .btn-secondary.disabled, .dark-mode .btn-secondary:disabled {
    background-color: #555;
    border-color: #555;
    opacity: 0.65;
}

.fade {
    transition: opacity 0.3s ease;
    opacity: 0;
    display: none;
}

    .fade.show {
        opacity: 1;
        display: block;
    }