/* Theme-specific styles for dark and light modes */

/* Dark theme configuration */
[data-bs-theme=dark], body[data-bs-theme=dark] [data-bs-theme=dark] {
    /*BG*/
    --tblr-body-bg: #000000;
    --tblr-bg-forms: #000000;
    --tblr-bg-surface: #000000;
    --tblr-navbar-bg: #000000;
    --tblr-bg-surface-secondary: #000000;
    --tblr-bg-surface-tertiary: #000000;
    /*BORDER*/
    --tblr-btn-border-color: #2E2E2E;
    --tblr-navbar-border-color: #2E2E2E;
    --tblr-card-border-color: #2E2E2E;
    --tblr-dark-mode-border-color-translucent: #2E2E2E;
    --tblr-navbar-border-width: 0;
    --tblr-border-color: #2E2E2E;
    /*TEXT*/
    --tblr-heading-color: #EDEDED;
    --tblr-body-color: #EDEDED;
    --tblr-primary: #EDEDED;
    --tblr-primary-rgb: 237, 237, 237;
    --tblr-secondary: #7D7D7D;
    --tblr-secondary-rgb: hsla(0,0%,100%,0.47);
    /*TESTING*/
    --tblr-card-border-width: 0px;
    --tblr-pagination-color: #7D7D7D;
    /*BUTTONS*/
    --tblr-btn-bg: none;
    --tblr-btn-hover-bg: #7D7D7D;
    --tblr-btn-hover-color: #7D7D7D;
    --tblr-btn-hover-border-color: #7D7D7D !important;
    --tblr-border-active-color: #7D7D7D !important;
}

/* Light theme configuration */
[data-bs-theme=light], body[data-bs-theme=light] [data-bs-theme=light] {
    /*BG*/
    --tblr-body-bg: #FFFFFF;
    --tblr-bg-forms: #FFFFFF;
    --tblr-bg-surface: #FFFFFF;
    --tblr-navbar-bg: #000000;
    --tblr-bg-surface-secondary: #FFFFFF;
    --tblr-bg-surface-tertiary: #FFFFFF;
    /*BORDER*/
    --tblr-btn-border-color: #EAEAEA;
    --tblr-navbar-border-color: #EAEAEA;
    --tblr-card-border-color: #EAEAEA;
    --tblr-dark-mode-border-color-translucent: #EAEAEA;
    --tblr-navbar-border-width: 0;
    --tblr-border-color: rgba(4, 32, 69, 0.1);
    --tblr-box-shadow-card: none;
    /*TEXT*/
    --tblr-heading-color: #171717;
    --tblr-body-color: #171717;
    --tblr-primary: #171717;
    --tblr-primary-rgb: 23, 23, 23;
    --tblr-secondary: #7D7D7D;
    --tblr-secondary-rgb: hsla(0,0%,100%,0.47);
    /*TESTING*/
    --tblr-card-border-width: 0px;
    --tblr-pagination-color: #7D7D7D;
    /*BUTTONS*/
    --tblr-btn-bg: none;
    --tblr-btn-hover-bg: #171717;
    --tblr-btn-hover-color: #171717;
    --tblr-btn-hover-border-color: #7D7D7D !important;
    --tblr-border-active-color: #7D7D7D !important;
}

/* Prevent theme flashing by ensuring elements inherit properly */
.page, .page-center, .page-wrapper {
    background-color: var(--tblr-body-bg);
    color: var(--tblr-body-color);
}

/* Theme transition for smooth switching */
body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Ensure immediate theme application */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .page,
html[data-bs-theme="dark"] .page-center {
    background-color: #000000;
    color: #EDEDED;
}

html[data-bs-theme="light"] body,
html[data-bs-theme="light"] .page,
html[data-bs-theme="light"] .page-center {
    background-color: #FFFFFF;
    color: #171717;
}

/* Theme toggle button styling */
.theme-toggle {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .theme-toggle:hover {
        transform: scale(1.1);
    }

.hide-theme-light {
    display: none;
}

.hide-theme-dark {
    display: block;
}

/* Show/hide theme toggles based on current theme */
[data-bs-theme="dark"] .hide-theme-dark {
    display: none;
}

[data-bs-theme="dark"] .hide-theme-light {
    display: block;
}

[data-bs-theme="light"] .hide-theme-light {
    display: none;
}

[data-bs-theme="light"] .hide-theme-dark {
    display: block;
}

/* Fix checkbox visibility in light mode */
[data-bs-theme="light"] .form-check-input {
    background-color: #FFFFFF !important;
}

    [data-bs-theme="light"] .form-check-input:checked {
        background-color: #171717 !important;
    }

    [data-bs-theme="light"] .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(23, 23, 23, 0.25) !important;
    }

/* Ensure checkboxes are visible in dark mode too */
[data-bs-theme="dark"] .form-check-input {
    background-color: transparent !important;
}

    [data-bs-theme="dark"] .form-check-input:checked {
        background-color: transparent !important;
    }

    [data-bs-theme="dark"] .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(237, 237, 237, 0.25) !important;
    }


[data-bs-theme="light"] .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check {
    background-color: black !important;
}


[data-bs-theme="dark"] .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check {
    background-color: transparent !important;
}