/* Dark Mode Styles for Premium Users */

/* Dark mode variables */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3d3d3d;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #404040;
    --dark-accent: #667eea;
    --dark-accent-hover: #5a6fd8;
}

/* Apply dark mode to both html and body to prevent flash */
html.dark-mode,
body.dark-mode {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Dark mode navigation */
body.dark-mode .navbar {
    background-color: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border);
}

body.dark-mode .brand-name {
    color: var(--dark-text-primary);
}

body.dark-mode .search input {
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .search input::placeholder {
    color: var(--dark-text-secondary);
}

body.dark-mode .user-greeting {
    color: var(--dark-text-primary);
}

/* Dark mode buttons */
body.dark-mode .btn-login {
    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
    color: var(--dark-text-primary);
}

body.dark-mode .btn-login:hover {
    background-color: var(--dark-accent-hover);
    border-color: var(--dark-accent-hover);
}

body.dark-mode .btn-register {
    background-color: transparent;
    border-color: var(--dark-accent);
    color: var(--dark-accent);
}

body.dark-mode .btn-register:hover {
    background-color: var(--dark-accent);
    color: var(--dark-text-primary);
}

/* Dark mode toggle button */
.btn-dark-mode {
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-dark-mode:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

body.dark-mode .btn-dark-mode {
    background-color: #ffd700;
    border-color: #ffd700;
    color: #1a1a1a;
}

body.dark-mode .btn-dark-mode:hover {
    background-color: #ffed4e;
    border-color: #ffed4e;
}

/* Dark mode footer */
body.dark-mode footer {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border-top: 1px solid var(--dark-border);
}

body.dark-mode .footer-brand {
    color: #ffffff;
}

body.dark-mode .footer-links a {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .footer-links a:hover {
    color: #ffffff;
}

/* Dark mode for main content areas */
body.dark-mode .dashboard {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .deck-card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .card-header {
    background-color: var(--dark-bg-tertiary);
    border-bottom: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .card-body {
    color: var(--dark-text-primary);
}

body.dark-mode .card-body a {
    color: var(--dark-accent);
}

body.dark-mode .card-body a:hover {
    color: var(--dark-accent-hover);
}

/* Dark mode for forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea {
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode textarea:focus {
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Dark mode for cards grid */
body.dark-mode .cards-section {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .cards-card {
    background-color: var(--dark-bg-secondary);
}

body.dark-mode .cards-card-header {
    background-color: var(--dark-accent);
}

body.dark-mode .card-item {
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .card-item .card-body p {
    color: var(--dark-text-primary);
}

/* Dark mode for study page */
body.dark-mode .study-section {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .flashcard {
    background-color: var(--dark-bg-secondary);
    border: 2px solid var(--dark-border);
}

body.dark-mode .flashcard .front,
body.dark-mode .flashcard .back {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .flashcard .front p,
body.dark-mode .flashcard .back p {
    color: var(--dark-text-primary);
}

/* Dark mode for deck page */
body.dark-mode .deck-section {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .deck-card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .deck-card-header {
    background-color: var(--dark-accent);
    color: white;
}

body.dark-mode .deck-card-body {
    color: var(--dark-text-primary);
}

body.dark-mode .deck-card-body .last-reviewed {
    color: var(--dark-text-secondary);
}

/* Dark mode for share section */
body.dark-mode .share-section {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .share-section p {
    color: var(--dark-text-primary);
}

body.dark-mode .share-section .copy-message {
    color: var(--dark-text-primary);
}

/* Dark mode for dashboard/index page */
body.dark-mode .dashboard {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .deck-card,
body.dark-mode .form-card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .deck-card .card-header {
    background-color: var(--dark-accent);
    color: white;
}

body.dark-mode .deck-card .card-body {
    color: var(--dark-text-primary);
}

body.dark-mode .deck-card li {
    color: var(--dark-text-primary);
    border-bottom-color: var(--dark-border);
}

body.dark-mode .deck-card a {
    color: var(--dark-accent);
}

body.dark-mode .deck-card a:hover {
    color: var(--dark-accent-hover);
}

body.dark-mode .btn-add {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

body.dark-mode .btn-add:hover {
    background-color: var(--dark-accent);
    color: white;
}

body.dark-mode .form-card h3 {
    color: var(--dark-text-primary);
}

body.dark-mode .form-card input[type="text"],
body.dark-mode .form-card textarea {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .form-card input[type="text"]::placeholder,
body.dark-mode .form-card textarea::placeholder {
    color: var(--dark-text-secondary);
}

/* Dark mode for streak display */
body.dark-mode .streak-display {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

/* Dark mode for static pages (footer pages) */
body.dark-mode .static-section {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .page-container {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .page-container h2 {
    color: var(--dark-accent);
}

body.dark-mode .page-container h3 {
    color: var(--dark-text-primary);
}

body.dark-mode .page-container p {
    color: var(--dark-text-primary);
}

body.dark-mode .form-input,
body.dark-mode .form-textarea {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .form-input:focus,
body.dark-mode .form-textarea:focus {
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

/* Dark mode for streak calendar */
body.dark-mode .streak-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

body.dark-mode .streak-container {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .streak-header h1 {
    color: var(--dark-text-primary);
}

body.dark-mode .stat-card {
    background: linear-gradient(135deg, var(--dark-accent) 0%, var(--dark-accent-hover) 100%);
}

body.dark-mode .calendar-header h2 {
    color: var(--dark-text-primary);
}

body.dark-mode .calendar-header p {
    color: var(--dark-text-secondary);
}

/* Dark mode for achievement cards */
body.dark-mode .achievement-card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .achievement-card.achieved {
    background: linear-gradient(135deg, var(--dark-accent) 0%, var(--dark-accent-hover) 100%);
    border: 1px solid var(--dark-accent);
    color: white;
}

body.dark-mode .achievement-card .achievement-title {
    color: inherit;
    font-weight: bold;
}

body.dark-mode .achievement-card .achievement-desc {
    color: inherit;
    opacity: 0.8;
}

body.dark-mode .achievement-card .achievement-date {
    color: inherit;
    font-weight: 500;
    opacity: 0.7;
}

body.dark-mode .achievement-card .achievement-icon {
    color: inherit;
    font-size: 1.5rem;
}

/* Dark mode for auth sections (login, register, feedback, etc.) */
body.dark-mode .auth-section {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .auth-card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .auth-card h2 {
    color: var(--dark-text-primary);
}

body.dark-mode .auth-card label {
    color: var(--dark-text-primary);
}

body.dark-mode .auth-card .form-error {
    color: #ff6b6b;
}

body.dark-mode .auth-card .bottom-area {
    border-top-color: var(--dark-border);
}

body.dark-mode .auth-card .bottom-area a {
    color: var(--dark-accent);
}

body.dark-mode .auth-card .bottom-area a:hover {
    color: var(--dark-accent-hover);
}

/* Dark mode for image status display */
body.dark-mode .image-status-display {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-mode .image-status-display h4 {
    color: var(--dark-text-primary);
}

body.dark-mode .image-status-display p {
    color: var(--dark-text-secondary);
}

/* Dark mode for premium upgrade page */
body.dark-mode .premium-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

body.dark-mode .premium-container {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .premium-header h1 {
    color: var(--dark-text-primary);
}

body.dark-mode .premium-features li {
    color: var(--dark-text-primary);
}

/* Dark mode for login/register pages */
body.dark-mode .login-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

body.dark-mode .login-card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .login-card h2 {
    color: var(--dark-text-primary);
}

/* Dark mode for messages */
body.dark-mode .alert {
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

/* Dark mode for text-muted */
body.dark-mode .text-muted {
    color: var(--dark-text-secondary) !important;
}

/* Dark mode for small text */
body.dark-mode small {
    color: var(--dark-text-secondary);
}

/* Dark mode for all text elements */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dark-text-primary);
}

body.dark-mode p {
    color: var(--dark-text-primary);
}

body.dark-mode span {
    color: var(--dark-text-primary);
}

body.dark-mode div {
    color: var(--dark-text-primary);
}

body.dark-mode label {
    color: var(--dark-text-primary);
}

body.dark-mode li {
    color: var(--dark-text-primary);
}

body.dark-mode ul {
    color: var(--dark-text-primary);
}

body.dark-mode ol {
    color: var(--dark-text-primary);
}

/* Dark mode for shared deck view */
body.dark-mode .container h2 {
    color: var(--dark-text-primary);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .container p {
    color: var(--dark-text-secondary);
}

body.dark-mode .card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .card-body {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    padding: 1.5rem;
}

body.dark-mode .card-body p {
    color: var(--dark-text-primary);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

body.dark-mode .card-body strong {
    color: var(--dark-accent);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card-body hr {
    border-color: var(--dark-border);
    opacity: 0.5;
    margin: 1rem 0;
}

/* Dark mode for shared deck alerts */
body.dark-mode .alert-info {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: var(--dark-accent);
    color: var(--dark-text-primary);
}

body.dark-mode .alert-info strong {
    color: var(--dark-accent);
}

/* Dark mode for specific elements that might be missing */
body.dark-mode .deck-title {
    color: var(--dark-text-primary);
}

body.dark-mode .card-title {
    color: var(--dark-text-primary);
}

body.dark-mode .section-title {
    color: var(--dark-text-primary);
}

body.dark-mode .description {
    color: var(--dark-text-secondary);
}

body.dark-mode .subtitle {
    color: var(--dark-text-secondary);
}

body.dark-mode .caption {
    color: var(--dark-text-secondary);
}

/* Dark mode for form labels and text */
body.dark-mode input::placeholder {
    color: var(--dark-text-secondary);
}

body.dark-mode textarea::placeholder {
    color: var(--dark-text-secondary);
}

/* Dark mode for links */
body.dark-mode a {
    color: var(--dark-accent);
}

body.dark-mode a:hover {
    color: var(--dark-accent-hover);
}

/* Dark mode for buttons text */
body.dark-mode button {
    color: var(--dark-text-primary);
}

body.dark-mode .btn {
    color: var(--dark-text-primary);
}

/* Dark mode transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}