/*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;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
*/






/* Define CSS variables for colors */
:root {
    --primary-bg: #ffffff;
    --primary-text: #1f2937; /* Tailwind gray-800 */
    --secondary-bg: #f3f4f6; /* Tailwind gray-100 */
    --border-color: #e5e7eb; /* Tailwind gray-200 */
    --card-bg: #ffffff;
    --card-text: #1f2937;
    --accent-color: #2563eb; /* Tailwind blue-700 */
    --accent-hover: #1d4ed8; /* Tailwind blue-800 */
}

/* Dark mode overrides for system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-bg: #1a202c; /* Darker background */
        --primary-text: #e2e8f0; /* Lighter text */
        --secondary-bg: #2d3748; /* Slightly lighter dark background */
        --border-color: #4a5568; /* Darker border */
        --card-bg: #2d3748;
        --card-text: #e2e8f0;
        --accent-color: #63b3ed; /* Lighter blue for dark mode */
        --accent-hover: #4299e1; /* Even lighter blue */
    }
}

/* Dark mode overrides for explicit user choice (applies to html.dark-mode) */
html.dark-mode {
    --primary-bg: #1a202c;
    --primary-text: #e2e8f0;
    --secondary-bg: #2d3748;
    --border-color: #4a5568;
    --card-bg: #2d3748;
    --card-text: #e2e8f0;
    --accent-color: #63b3ed;
    --accent-hover: #4299e1;
}

/* Light mode overrides for explicit user choice (applies to html.light-mode) */
html.light-mode {
    --primary-bg: #ffffff;
    --primary-text: #1f2937;
    --secondary-bg: #f3f4f6;
    --border-color: #e5e7eb;
    --card-bg: #ffffff;
    --card-text: #1f2937;
    --accent-color: #2563eb;
    --accent-hover: #1d4ed8;
}

/* Apply variables to Tailwind's default classes or custom elements */
body {
    background-color: var(--primary-bg);
    color: var(--primary-text);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.text-primary {
    color: var(--primary-text);
}

.bg-primary {
    background-color: var(--primary-bg);
}

.bg-secondary {
    background-color: var(--secondary-bg);
}

.border-primary {
    border-color: var(--border-color);
}

.card {
    background-color: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-accent {
    background-color: var(--accent-color);
    color: white;
    transition: background-color 0.3s ease;
}

    .btn-accent:hover {
        background-color: var(--accent-hover);
    }

/* Hide/show icons based on theme */
.light-icon {
    display: inline-block;
}

.dark-icon {
    display: none;
}

html.dark-mode .light-icon {
    display: none;
}

html.dark-mode .dark-icon {
    display: inline-block;
}

html.light-mode .light-icon {
    display: inline-block;
}

html.light-mode .dark-icon {
    display: none;
}

/* Loading spinner styles */
.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid var(--accent-color); /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}