/**
 * Theme styles for the application
 * Dark Mode and Dark Sky Mode theme definitions
 */

/* Theme classes */
.theme-dark-sky-mode {
    --bs-body-bg: rgba(33, 37, 41, 0.9);
    --bs-body-color: #e9ecef;
    --border-color: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(33, 37, 41, 0.6);
    --modal-bg: #212529;
    --input-bg: #2c3034;
    --input-color: #e9ecef;
    --bg-image: linear-gradient(rgba(33, 37, 41, 0.4), rgba(33, 37, 41, 0.4)), url('/static/background1.jpg');
    --bg-color: transparent;
}

.theme-dark-mode {
    --bs-body-bg: #151413;
    --bs-body-color: #e9ecef;
    --border-color: #2c3034;
    --card-bg: rgba(33, 37, 41, 0.6);
    --modal-bg: #1a1918;
    --input-bg: #2c3034;
    --input-color: #e9ecef;
    --bg-image: none;
    --bg-color: #151413;
}

/* Apply theme variables to body */
body {
    background: var(--bg-image, linear-gradient(rgba(33, 37, 41, 0.4), rgba(33, 37, 41, 0.4)), url('/static/background1.jpg'));
    background-color: var(--bg-color, transparent);
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    transition: background 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

/* Higher specificity rules for background that will override any other styles */
html.theme-dark-mode body.theme-dark-mode-body {
    background: #151413 !important;
    background-image: none !important;
    background-color: #151413 !important;
    /* Keep background-size, position, attachment consistent with dark-sky mode */
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

html.theme-dark-sky-mode body.theme-dark-sky-mode-body {
    background: inherit !important;
}

/* Set only CSS variables for theme-dark-mode, not background properties directly */
html.theme-dark-mode {
    --bg-image: none;
    --bg-color: #151413;
}

html.theme-dark-sky-mode {
    --bg-image: linear-gradient(rgba(33, 37, 41, 0.4), rgba(33, 37, 41, 0.4)), url('/static/background1.jpg');
    --bg-color: transparent;
}

/* Remove the overly aggressive selectors that affect all elements */
/* REMOVING:
html[class*="theme-dark-mode"], 
html[class*="theme-dark-mode"] body,
html.theme-dark-mode:not(.theme-dark-sky-mode),
html.theme-dark-mode:not(.theme-dark-sky-mode) body,
.theme-dark-mode:not(.theme-dark-sky-mode),
.theme-dark-mode:not(.theme-dark-sky-mode) * {
    background: #121212 !important;
    background-image: none !important;
    background-color: #121212 !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    --bg-image: none !important;
    --bg-color: #121212 !important;
}

html.theme-dark-mode * {
    --bg-image: none !important;
    --bg-color: #121212 !important;
}
*/

/* Only target the specific elements that need dark background in dark mode */
html.theme-dark-mode .loading-container {
    background-color: rgba(18, 18, 18, 0.4) !important;
}

html.theme-dark-mode .status-text,
html.theme-dark-mode .progress,
html.theme-dark-mode .logo {
    background-color: transparent !important;
}

/* Background transition overlay */
#background-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 9990;
    transition: opacity 0.3s ease-in-out;
}

/* Theme toggle styling */
.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    transition: background-position .25s ease-in-out, background-color .25s ease;
    /* Custom styling for the toggle thumb */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236f42c1'/%3e%3c/svg%3e") !important;
    /* Add more visible border */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Remove the previous overrides that were affecting the entire toggle */
.form-switch .form-check-input:not(:checked) {
    background-color: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Ensure the thumb color stays purple in checked state too */
.form-switch .form-check-input:checked {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236f42c1'/%3e%3c/svg%3e") !important;
}

/* Theme toggle text style */
.theme-toggle-container small {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.theme-toggle-container small.active {
    opacity: 1;
    font-weight: 500;
}

/* Ensure login-container styling is consistent in both modes */
.login-container {
    background-color: rgba(33, 37, 41, 0.4);
    border: 2px solid var(--bs-primary);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.theme-dark-mode body.content-loaded {
    background: var(--bg-color) !important;
    background-image: var(--bg-image) !important;
}

.theme-dark-sky-mode body.content-loaded {
    background: var(--bg-color) !important;
    background-image: var(--bg-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* Logo styling for the original header layout */
header h1 span {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.95) 0%,
        var(--bs-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

header h1 span:hover {
/*    transform: scale(1.02);  */
}

/* Apply gradient text effect to all logo sizes */
.header-desktop-text span,
.header-medium-text span,
.header-mobile-text span {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.95) 0%,
        var(--bs-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Slight shadow enhancement for improved visibility in Dark Sky Mode */
.theme-dark-sky-mode header h1 span {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Ensure header consistency in both themes */
.theme-dark-mode header,
.theme-dark-sky-mode header {
    background-color: transparent !important;
}

/* Learner edition label styling */
.learner-edition {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.35em;
    margin-top: 1px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--bs-secondary);
    text-align: center;
}

/* Note: Theme toggle visibility is controlled per-page. No global hide rule here. */

/* Logo styling for the original header layout */
header h1 span {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.95) 0%,
        var(--bs-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

header h1 span:hover {
/*    transform: scale(1.02); */
}

/* Apply gradient text effect to all logo sizes */
.header-desktop-text span,
.header-medium-text span,
.header-mobile-text span {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.95) 0%,
        var(--bs-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Slight shadow enhancement for improved visibility in Dark Sky Mode */
.theme-dark-sky-mode header h1 span {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Ensure header consistency in both themes */
.theme-dark-mode header,
.theme-dark-sky-mode header {
    background-color: transparent !important;
}

/* Learner edition label styling */
.learner-edition {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.35em;
    margin-top: 1px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--bs-secondary);
    text-align: center;
} 