/* =========================================================
   Dark Theme — Professional Pass + Radial Reveal
   ========================================================= */

/* -------------------------
   Core surfaces & ambient
   ------------------------- */
html[data-theme="dark"] body {
    background-color: #0e1216 !important;
    background-image:
            radial-gradient(circle, rgba(255,255,255,0.05) 2px, transparent 1px),
            linear-gradient(-45deg,
            rgba(30, 41, 59, 0.8),
            rgba(17, 24, 39, 0.85),
            rgba(15, 23, 42, 0.9),
            rgba(2, 6, 23, 0.9)
            ) !important;
    background-size: 20px 20px, 400% 400% !important;
    color: #e5e7eb !important;
}

/* Ambient glow */
html[data-theme="dark"] body::before {
    background: radial-gradient(circle at 45% 55%, rgba(56, 189, 248, 0.08), transparent 70%) !important;
}

/* Dots */
html[data-theme="dark"] body::after {
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 2px, transparent 1px) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html[data-theme="dark"] body { animation: none !important; background-size: 20px 20px, 100% 100% !important; }
}

/* -------------------------
   Typography
   ------------------------- */
html[data-theme="dark"] h1 { color: #8ec7ff !important; text-shadow: none !important; }

html[data-theme="dark"] p,
html[data-theme="dark"] .intro-section p,
html[data-theme="dark"] .fun-personal p,
html[data-theme="dark"] .model p { color: #e5e7eb !important; text-shadow: none !important; }

html[data-theme="dark"] .featured-card h2,
html[data-theme="dark"] .skills-section h2,
html[data-theme="dark"] .model h2,
html[data-theme="dark"] .model h3,
html[data-theme="dark"] .card-content h2 { color: #a7d0ff !important; }

/* Links */
html[data-theme="dark"] a,
html[data-theme="dark"] .featured-card a { color: #93c5fd !important; }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] .featured-card a:hover { color: #c3ddff !important; }

/* Selection */
html[data-theme="dark"] ::selection { background: rgba(59, 130, 246, 0.35); color: #fff; }

/* -------------------------
   Navbar & dropdown
   ------------------------- */
html[data-theme="dark"] .navbar-container {
    background: linear-gradient(to bottom, rgba(10, 15, 25, 0.9), rgba(8, 12, 22, 0.9)) !important;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: saturate(120%) blur(6px);
}
html[data-theme="dark"] .navbar ul li a { color: #e5e7eb !important; }
html[data-theme="dark"] .navbar ul li a:hover { background-color: rgba(59, 130, 246, 0.18) !important; }

html[data-theme="dark"] .navbar .dropdown-menu {
    background: #0f172a !important;
    border: 1px solid #223049 !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .dropdown-menu a { color: #e5e7eb !important; }
html[data-theme="dark"] .dropdown-menu a:hover { background-color: rgba(59, 130, 246, 0.15) !important; }

/* -------------------------
   Cards & content blocks
   ------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .model,
html[data-theme="dark"] .featured-card,
html[data-theme="dark"] .comparison-table {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
    border: 1px solid #223049 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .card:hover { background-color: #0f1a2a !important; }
html[data-theme="dark"] .short-desc { color: #a3a3a3 !important; }

html[data-theme="dark"] figure {
    background-color: #0f172a !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
    border: 1px solid #223049 !important;
}
html[data-theme="dark"] figcaption { color: #a1a1aa !important; }

html[data-theme="dark"] .overlay { background-color: rgba(29, 78, 216, 0.92) !important; color: #fff !important; }

/* -------------------------
   Skills chips
   ------------------------- */
html[data-theme="dark"] .skill {
    background-color: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}
html[data-theme="dark"] .skill:hover {
    background-color: #1d4ed8 !important;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.5) !important;
}

/* -------------------------
   “Fun personal” block
   ------------------------- */
html[data-theme="dark"] .fun-personal {
    background-color: #0f172a !important;
    color: #e5e7eb !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
    border: 1px solid #223049 !important;
}
html[data-theme="dark"] .fun-personal h2 { color: #a7d0ff !important; }

/* -------------------------
   Tables
   ------------------------- */
html[data-theme="dark"] .comparison-table thead { background-color: #1e3a8a !important; color: #ffffff !important; }
html[data-theme="dark"] .comparison-table tbody tr:nth-child(even) { background-color: #0f1a2a !important; }
html[data-theme="dark"] .comparison-table tbody tr:nth-child(odd) { background-color: #0b1220 !important; }
html[data-theme="dark"] .comparison-table th,
html[data-theme="dark"] .comparison-table td { border-color: #223049 !important; color: #e5e7eb !important; }
html[data-theme="dark"] .comparison-table caption { color: #93c5fd !important; }

/* -------------------------
   Chatbot (intro + bubbles)
   ------------------------- */
html[data-theme="dark"] .intro-bubble {
    background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .chat-bubble.user {
    background-color: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .chat-bubble.assistant {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .chat-container {
    background: rgba(12, 18, 28, 0.7);
    backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid #223049;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

/* -------------------------
   Controls & focus states
   ------------------------- */
/* Modern round toggle (works in both themes) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--muted, #ccc);
    background: linear-gradient(180deg, #ffffff, #f1f5f9);
    color: #333;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: background .3s, transform .2s, box-shadow .3s, border-color .3s;
}
.theme-toggle:hover { background: linear-gradient(180deg, #f0f9ff, #e0f2fe); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.2); }
.theme-toggle:active { transform: scale(0.95); }

/* Icon swap inside the button (optional spans) */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity .2s ease, transform .2s ease;
}
.theme-toggle .icon-sun { opacity: 0; transform: scale(0.85); }
.theme-toggle .icon-moon { opacity: 1; transform: scale(1); }
html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: scale(1); }
html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0.85); }

/* Dark-mode button variant */
html[data-theme="dark"] .theme-toggle {
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border-color: #334155 !important;
    color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .theme-toggle:hover {
    background: linear-gradient(180deg, #1e3a8a, #1e293b);
    box-shadow: 0 6px 16px rgba(0,0,0,0.7);
}

/* Focus rings */
html[data-theme="dark"] :where(a, button, .theme-toggle, .skill, .card, .featured-card):focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 6px;
}

/* -------------------------
   Light-mode clarifications
   ------------------------- */
html[data-theme="light"] .card-container h2,
html[data-theme="light"] .featured-card h2,
html[data-theme="light"] .skills-section h2 { color: #0077cc !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
html[data-theme="light"] .card h2 { color: #0077cc !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }

/* -------------------------
   Nice touches
   ------------------------- */
/* Scrollbars */
html[data-theme="dark"] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] *::-webkit-scrollbar-track { background: #0b1220; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #223049; border-radius: 10px; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #2b3f5b; }
@-moz-document url-prefix() { html[data-theme="dark"] { scrollbar-color: #223049 #0b1220; } }

/* Smooth theme swap — only when .theme-transition is present */
html.theme-transition body,
html.theme-transition .navbar-container,
html.theme-transition .navbar .dropdown-menu,
html.theme-transition .card,
html.theme-transition .model,
html.theme-transition .featured-card,
html.theme-transition figure,
html.theme-transition .comparison-table,
html.theme-transition .skill,
html.theme-transition .fun-personal,
html.theme-transition .intro-bubble,
html.theme-transition .chat-bubble.user,
html.theme-transition .chat-bubble.assistant {
    transition: background-color .32s ease, color .32s ease, border-color .32s ease, box-shadow .32s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html.theme-transition body,
    html.theme-transition .navbar-container,
    html.theme-transition .navbar .dropdown-menu,
    html.theme-transition .card,
    html.theme-transition .model,
    html.theme-transition .featured-card,
    html.theme-transition figure,
    html.theme-transition .comparison-table,
    html.theme-transition .skill,
    html.theme-transition .fun-personal,
    html.theme-transition .intro-bubble,
    html.theme-transition .chat-bubble.user,
    html.theme-transition .chat-bubble.assistant {
        transition: none;
    }
}