/* theme.css: Light/Dark theme support for i3i */
:root {
    /* Light theme (default) */
    --bg-color: #fff;
    --bg-secondary-color: #f9f9f9;
    --text-color: #222;
}

[data-theme="dark"] {
    --bg-color: #111;
    --bg-secondary-color: #333;
    --text-color: #aaa;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.navbar{
    background: var(--bg-secondary-color) !important;
    color: var(--text-color) !important;
}

.dropdown-menu, .card, .modal-content {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

a, .nav-link, .dropdown-item {
    color: var(--text-color) !important;
}

.navbar-toggler i {
  color: var(--text-color) !important;
}

[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus {
    background-color: #222 !important;
    color: #fff !important;
}

[data-theme="dark"] .form-select {
    color: #e9ecef;
    background-color: #1f2228;
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] select.form-control {
    color: #e9ecef;
    background-color: #1f2228;
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] select.form-control:not([multiple]):not([size]) {
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2rem;
    appearance: none;
}

/* Add more overrides as needed for dark mode */