/* Custom CSS for a more polished look and theme management */

/* * 1. Define CSS Variables for Theming
 * These variables map directly to the colors defined in tailwind.config.js
 * and will be swapped by the JavaScript based on the body's data-theme attribute.
 */
:root {
    /* Default Dark Mode - High Contrast */
    --bg-primary: #0f172a;         /* Deep navy blue (darker) */
    --bg-secondary: #1e293b;       /* Slightly lighter for panels/cards */
    --text-light: #ffffff;         /* Pure white for best contrast */
    --text-subtle: #cbd5e1;        /* Light gray-blue for muted text */
    --border-color: #475569;       /* Medium slate for clear separation */
    --shadow-card: 0 6px 10px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 25px 35px -10px rgba(0, 0, 0, 0.8), 0 10px 15px -10px rgba(0, 0, 0, 0.6);
}

body[data-theme="light"] {
    --bg-primary: #ffffff;         /* True white for body background */
    --bg-secondary: #f1f5f9;       /* Soft light slate for panels/cards */
    --text-light: #0f172a;         /* Deep navy (dark) text for readability */
    --text-subtle: #475569;        /* Medium slate for secondary content */
    --border-color: #94a3b8;       /* Muted border for good contrast */
    --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 30px rgba(0, 0, 0, 0.15), 0 10px 15px rgba(0, 0, 0, 0.1);
}


/* * 2. Apply Theme Variables to Base Elements and Custom Classes
 */
body {
    background-color: var(--bg-primary);
    color: var(--text-light);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for theme change */
}



/* Sidebar Styles */
.sidebar-styles {
    background-color: var(--bg-secondary);
    border-right-color: var(--border-color);
    padding: 1.5rem;
    flex-shrink: 0;
    position: fixed;
    z-index: 40;
    height: 100vh;
    width: 280px; /* fixed width for desktop */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Transition for theme and mobile slide */
}
@media (min-width: 1024px) { /* lg */
    .sidebar-styles {
        position: static;
        display: flex !important; /* Force display flex on desktop */
        flex-direction: column;
    }
}

/* Card Styles (used for quiz posts and creation box) */
.card-styles {
    background-color: var(--bg-secondary);
    max-width: 20in;
    padding: 1.5rem;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Input Field Styles */
.input-field {
    width: 100%;
    padding: 1rem;
    background-color: var(--bg-primary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    color: var(--text-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.input-field:focus {
    outline: none;
    border-color: #3b82f6; /* accent-blue */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* ring-accent-blue/50 */
}
.input-field::placeholder {
    color: var(--text-subtle);
}

/* Button Styles */
.button-primary {
    background-color: #3b82f6; /* accent-blue */
    color: white;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease;
}
.button-primary:hover {
    background-color: #2563eb; /* blue-600 */
}

.button-secondary {
    background-color: var(--border-color); /* Uses border color for a subtle button */
    color: var(--text-light);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.button-secondary:hover {
    background-color: #475569; /* slate-600 */
}

/* Sidebar Navigation Link Active State (Managed by JS) */
.view-link {
    background-color: transparent;
    color: var(--text-subtle);
}
.view-link:hover {
    background-color: var(--bg-primary); /* Use primary for hover */
    opacity: 0.7;
}
.view-link.active-link {
    background-color: #3b82f6; /* accent-blue */
    color: white;
    font-weight: 600;
}
.view-link.active-link .w-5 {
    color: white;
}

/* Theme Toggle Ring Color (needs to change with the theme) */
#profile-menu + .profile-box .flex-shrink-0 .ring-2 {
    /* Ensures the notification ring changes color with the theme */
    --tw-ring-color: var(--bg-secondary);
}

/* Quiz Generation Tab Styles */
#quiz-tabs {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}
.tab-button.tab-inactive {
    color: var(--text-subtle);
}
.tab-button.tab-inactive:hover {
    background-color: var(--border-color);
    color: var(--text-light);
}

/* Custom Scrollbar for Main Content */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-600 */
}

.hide-scrollbar-mobile {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.hide-scrollbar-mobile::-webkit-scrollbar {
    /* Completely hide the scrollbar */
    display: none;
    width: 0;
    height: 0;

}