/* CSS Variables for Theming & Dark/Light Modes (Light mode default) */
:root {
    --main-bg: rgb(255, 255, 255);
    --sidebar-bg: rgb(249, 249, 249);
    --card-bg: rgba(243, 243, 243, 0.9);
    --text-primary: rgb(13, 13, 13);
    --border-light: rgba(0, 0, 0, 0.1);
    --accent-gradient: linear-gradient(90deg, rgb(99,168,248), rgb(222,237,253));
    --description-color: #666;
    --checkmark-bg: #4CAF50;
    --checkmark-color: white;
    --selector-idle-bg: rgb(255,255,255);
    --selector-hover-bg: rgb(249,249,249);
    --icon-bg: rgb(249,249,249);
    --icon-color: rgb(93,93,93);
    --home-icon-border: rgb(229,229,229);
    --button-text: rgb(93,93,93);
    --hover-bg: rgb(236,236,236);
    --active-bg: rgb(227,227,227);
    --active-text: rgb(13,13,13);
}

body.dark-mode {
    --main-bg: rgb(33, 33, 33);
    --sidebar-bg: rgb(23, 23, 23);
    --card-bg: rgba(48, 48, 48, 0.75);
    --text-primary: rgb(236, 236, 236);
    --accent-gradient: linear-gradient(90deg, rgb(99,168,248), rgb(49,73,106));
    --description-color: #aaa;
    --checkmark-bg: #66BB6A;
    --checkmark-color: #121212;
    --selector-idle-bg: rgb(33, 33, 33);
    --selector-hover-bg: rgb(47,47,47);
    --icon-bg: rgb(33,33,33);
    --icon-color: rgb(236,236,236);
    --home-icon-border: rgb(77,77,77);
    --sidebar-button-color: rgb(180, 180, 180);
    --button-text: rgb(180,180,180);
    --hover-bg: rgb(33,33,33);
    --active-bg: rgb(47,47,47);
    --active-text: rgb(236,236,236);
}

/* Global Body Styles */
body {
    background-color: var(--main-bg);
    color: var(--text-primary);
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: normal;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fixed Header */
.header {
    background: var(--main-bg);
    transition: left 0.3s ease;
}

/* Fixed Sidebar */
.sidebar {
    background: var(--sidebar-bg);
    transition: transform 0.3s ease;
}

/* Ensure all sidebar text uses --text-primary */
.sidebar,
.sidebar a,
.sidebar span,
.sidebar h3,
.sidebar p {
    color: var(--text-primary);
}

/* Sidebar buttons and icons in dark mode */
body.dark-mode .sidebar button,
body.dark-mode .sidebar svg {
    color: var(--sidebar-button-color);
}

/* Progress Bar */
.progress-container {
    background: #cbd5e0;
}

.progress-bar {
    background: var(--accent-gradient);
    transition: width 0.3s ease;
}

/* Question Cards */
.question {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: transform 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    margin-bottom: 1rem;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.question:hover {
    transform: translateY(-5px);
}

.question p {
    font-weight: 600;
    margin-bottom: 10px;
}

/* Custom Radio Buttons */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid var(--accent-gradient);
    border-radius: 50%;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

input[type="radio"]:checked {
    border: none;
    background: var(--accent-gradient);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Labels */
label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Buttons */
#increaseText,
#decreaseText,
#darkModeToggle {
    border: none;
    color: var(--button-text);
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    cursor: pointer;
    box-shadow: none;
    background-color: var(--main-bg);
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

#increaseText:hover,
#decreaseText:hover,
#darkModeToggle:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    background-color: var(--selector-hover-bg);
}

/* Submit Button */
input[type="submit"] {
    background: var(--accent-gradient);
    border: none;
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

input[type="submit"]:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Result Display */
#result {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
}

/* Loading Bar */
.loading-container {
    width: 100%;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.loading-bar {
    height: 20px;
    background: var(--accent-gradient);
    border-radius: 10px;
}

body.dark-mode .loading-container {
    background: #4a5568;
}

/* Utility Overrides */
a {
    color: var(--text-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.news-preview {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
    transition: transform 0.2s ease;
}

.news-preview:hover {
    transform: translateY(-5px);
}

/* Model Selector */
#modelSelector {
    color: var(--button-text);
}

/* Sidebar Menu Hover - Consolidated Rule */
.sidebar a:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
    text-decoration: none;
}

/* Sidebar Close Button */
.sidebar-close-button {
    color: rgb(93,93,93) !important;
}

body.dark-mode .sidebar-close-button {
    color: rgb(180,180,180) !important;
}

/* Sidebar Toggle Button */
.sidebar-toggle-button {
    color: rgb(93,93,93) !important;
}

body.dark-mode .sidebar-toggle-button {
    color: rgb(180,180,180) !important;
}

/* Hover Effects for Sidebar Buttons */
#sidebarToggle:hover,
#closeSidebar:hover {
    background-color: var(--hover-bg);
}

/* Added rule to fix hover effect on dark mode sidebar buttons */
body.dark-mode #sidebarToggle:hover,
body.dark-mode #closeSidebar:hover {
    background-color: rgb(47,47,47);
}

/* Upgrade Plan Title */
.upgrade-plan-title {
    color: rgb(0,0,0) !important;
}

body.dark-mode .upgrade-plan-title {
    color: rgb(255,255,255) !important;
}

/* Upgrade Plan Description */
.upgrade-plan-desc {
    color: rgb(180,180,180) !important;
}

body.dark-mode .upgrade-plan-desc {
    color: rgb(155,155,155) !important;
}

#timer, #progressText {
    color: rgb(93,93,93);
}

body.dark-mode #timer, body.dark-mode #progressText {
    color: rgb(180,180,180);
}

/* Sidebar Icon Containers */
.sidebar-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--icon-bg);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

/* Home Icon Container with Border */
.home-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--icon-bg);
    border: 1px solid var(--home-icon-border);
    border-radius: 50%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Explore Models icon (inside sidebar-icon-container) */
.sidebar-icon-container svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--icon-color);
    transition: color 0.3s ease;
}

/* Home icon (inside home-icon-container) */
.home-icon-container svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--icon-color);
    transition: color 0.3s ease;
}

.home-icon-container svg {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

/* Style for the active sidebar link */
.sidebar a.active {
    background-color: var(--active-bg);
    color: var(--active-text);
}

/* Specific hover style for the active link */
.sidebar a.active:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
    text-decoration: none;
}

/* Upgrade Plan Container Modifications */
.sidebar a[href="#"] {
    border: none;
}

.sidebar a[href="#"] .flex.h-6.w-6 {
    background-color: rgb(224,224,224);
}

.sidebar a[href="#"] svg {
    color: rgb(0,0,0);
}

body.dark-mode .sidebar a[href="#"] .flex.h-6.w-6 {
    background-color: rgb(47,47,47);
}

body.dark-mode .sidebar a[href="#"] svg {
    color: rgb(255,255,255);
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }