/*
 * Dark Mode Styles for Team Atlas Page
 */

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    border: 3px solid white;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(30, 58, 138, 0.5);
}

.dark-mode-toggle i {
    position: absolute;
    font-size: 1.4rem;
    color: white;
    transition: all 0.3s ease;
}

.dark-mode-toggle .fa-moon {
    opacity: 1;
}

.dark-mode-toggle .fa-sun {
    opacity: 0;
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */
html.dark-mode {
    --primary-blue: #60a5fa;
    --light-blue: #93c5fd;
    --accent-yellow: #fbbf24;
    --light-yellow: rgba(251, 191, 36, 0.15);
    --dark-blue: #3b82f6;
    --text-dark: #f3f4f6;
    --text-light: #d1d5db;
    --white: #1f2937;
    --light-gray: #111827;
    --border-gray: #4b5563;
    --gradient-blue: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
}

/* Base Dark Mode */
html.dark-mode body {
    background: #0f172a !important;
    color: #d1d5db !important;
}

/* ============================================
   HEADER
   ============================================ */
html.dark-mode .header {
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border-bottom: 1px solid #374151 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .logo span {
    color: #ffffff !important;
}

html.dark-mode .nav-link {
    color: #ffffff !important;
}

html.dark-mode .nav-link:hover {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: #fbbf24 !important;
}

/* ============================================
   HERO SECTION
   ============================================ */
html.dark-mode .hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
}

html.dark-mode .hero::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(96,165,250,0.15)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') !important;
    opacity: 0.5 !important;
}

html.dark-mode .hero h1 {
    color: #fcd34d !important;
}

html.dark-mode .hero p {
    color: #e0e7ff !important;
}

html.dark-mode .hero strong {
    color: #fbbf24 !important;
}

html.dark-mode .hero-logo {
    filter: brightness(1.2) !important;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3) !important;
}

/* ============================================
   TEAM SECTION
   ============================================ */
html.dark-mode .team-section {
    background: #0f172a !important;
}

html.dark-mode .section-title {
    color: #60a5fa !important;
}

html.dark-mode .section-title::after {
    background: #fbbf24 !important;
}

html.dark-mode .team-card {
    background: #1f2937 !important;
    border-top-color: #fbbf24 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .team-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .team-name {
    color: #60a5fa !important;
}

html.dark-mode .team-role {
    color: #93c5fd !important;
}

html.dark-mode .skill-tag {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
}

/* ============================================
   CTA SECTION
   ============================================ */
html.dark-mode .cta-section {
    background: #111827 !important;
}

html.dark-mode .cta-section h2 {
    color: #60a5fa !important;
}

html.dark-mode .cta-section p {
    color: #d1d5db !important;
}

/* ============================================
   FOOTER
   ============================================ */
html.dark-mode .footer {
    background: #0f172a !important;
    color: #d1d5db !important;
}

html.dark-mode .footer p {
    color: #9ca3af !important;
}

html.dark-mode .footer p:last-child {
    color: #fbbf24 !important;
}

/* ============================================
   DARK MODE TOGGLE
   ============================================ */
html.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border-color: #fbbf24 !important;
}

html.dark-mode .dark-mode-toggle i {
    color: #111827 !important;
}

html.dark-mode .dark-mode-toggle .fa-moon {
    opacity: 0;
}

html.dark-mode .dark-mode-toggle .fa-sun {
    opacity: 1;
}

/* ============================================
   SCROLLBAR
   ============================================ */
html.dark-mode ::-webkit-scrollbar {
    width: 12px;
    background: #111827;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 6px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .dark-mode-toggle {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
    }
    
    .dark-mode-toggle i {
        font-size: 1.2rem;
    }
}