/* Language Page Dark Mode Styles */

/* Main Container and Sections */
body.dark .container,
body.dark .tab-content,
body.dark .tab-pane,
body.dark #numbers,
body.dark #greetings,
body.dark #colors,
body.dark #family,
body.dark #phrases,
body.dark #time {
    background-color: var(--dark-primary) !important;
}

/* Common Card Styles */
body.dark .time-card,
body.dark .greeting-card,
body.dark .color-card,
body.dark .family-card,
body.dark .number-card,
body.dark .phrase-card {
    background: var(--dark-card) !important;
    border: 1px solid var(--dark-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

/* Card Hover Effects */
body.dark .time-card:hover,
body.dark .greeting-card:hover,
body.dark .color-card:hover,
body.dark .family-card:hover,
body.dark .number-card:hover,
body.dark .phrase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Card Titles */
body.dark .time-title,
body.dark .greeting-title,
body.dark .color-title,
body.dark .family-title,
body.dark .number-title,
body.dark .phrase-title {
    color: #3498db !important;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* Amazigh Words */
body.dark .amazigh-word,
body.dark .time-card .amazigh-word,
body.dark .greeting-card .amazigh-word,
body.dark .color-card .amazigh-word,
body.dark .family-card .amazigh-word,
body.dark .number-card .amazigh-word,
body.dark .phrase-card .amazigh-word {
    color: #2ecc71 !important;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 10px 0;
}

/* Arabic Script */
body.dark .arabic-script,
body.dark .time-card .arabic-script,
body.dark .greeting-card .arabic-script,
body.dark .color-card .arabic-script,
body.dark .family-card .arabic-script,
body.dark .number-card .arabic-script,
body.dark .phrase-card .arabic-script {
    color: var(--dark-text) !important;
    font-size: 1.5rem;
    margin: 10px 0;
    direction: rtl;
}

/* Pronunciation */
body.dark .pronunciation,
body.dark .time-card .pronunciation,
body.dark .greeting-card .pronunciation,
body.dark .color-card .pronunciation,
body.dark .family-card .pronunciation,
body.dark .number-card .pronunciation,
body.dark .phrase-card .pronunciation {
    color: var(--dark-muted) !important;
    font-style: italic;
    font-size: 1rem;
}

/* Navigation Pills */
body.dark .nav-pills .nav-link {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border);
}

body.dark .nav-pills .nav-link:hover {
    background: var(--dark-hover) !important;
}

body.dark .nav-pills .nav-link.active {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Grid Layouts */
body.dark .time-grid,
body.dark .greetings-grid,
body.dark .colors-grid,
body.dark .family-grid,
body.dark .numbers-grid,
body.dark .phrases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
    background: transparent !important;
}

/* Section Headers */
body.dark .section-title,
body.dark h1,
body.dark h2,
body.dark h3 {
    color: var(--dark-text) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Ensure all transitions are smooth */
.time-card,
.greeting-card,
.color-card,
.family-card,
.number-card,
.phrase-card {
    transition: all 0.3s ease;
}

/* Dark mode color variables */
:root {
    --dark-primary: #1a1a1a;
    --dark-secondary: #2d2d2d;
    --dark-card: #333333;
    --dark-hover: #3d3d3d;
    --dark-text: #f1f1f1;
    --dark-muted: #a0a0a0;
    --dark-border: #404040;
    --primary-color: #4CAF50;
}

/* Base dark mode styles */
body.dark {
    background-color: var(--dark-primary) !important;
    color: var(--dark-text) !important;
}

/* Force dark backgrounds */
body.dark [class*="-container"],
body.dark [class*="-section"],
body.dark [class*="-content"],
body.dark [class*="-pane"] {
    background-color: var(--dark-primary) !important;
}

/* Force dark cards */
body.dark [class*="-card"],
body.dark [class*="-item"] {
    background: var(--dark-card) !important;
    border: 1px solid var(--dark-border) !important;
}