/* General styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Dark mode */
.dark {
    color-scheme: dark;
}

/* Typography */
h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid;
}

/* Section styles */
section {
    scroll-margin-top: 5rem;
}

/* Tech Stack Icons */
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tech-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background-color: #e2e8f0;
    color: #334155;
    transition: all 300ms;
    position: relative;
    cursor: pointer;
}

.dark .tech-icon {
    background-color: rgba(51, 65, 85, 0.5);
    color: #cbd5e1;
}

.tech-icon:hover {
    transform: scale(1.1);
}

/* Tech Icon hover states */
.tech-icon[title="Python"]:hover { background-color: #3b82f6; color: #fde047; }
.tech-icon[title="Django"]:hover { background-color: #16a34a; color: #ffffff; }
.tech-icon[title="React"]:hover { background-color: #111827; color: #22d3ee; }
.tech-icon[title="Node.js"]:hover { background-color: #16a34a; color: #ffffff; }
.tech-icon[title="MongoDB"]:hover { background-color: #22c55e; color: #ffffff; }
.tech-icon[title="JavaScript"]:hover { background-color: #facc15; color: #000000; }
.tech-icon[title="HTML"]:hover { background-color: #ea580c; color: #ffffff; }
.tech-icon[title="CSS"]:hover { background-color: #2563eb; color: #ffffff; }
.tech-icon[title="Java"]:hover { background-color: #dc2626; color: #ffffff; }
.tech-icon[title="MySQL"]:hover { background-color: #1d4ed8; color: #fb923c; }
.tech-icon[title="Machine Learning"]:hover { background-color: #9333ea; color: #ffffff; }
.tech-icon[title="Flask"]:hover { background-color: #1f2937; color: #ffffff; }
.tech-icon[title="IoT"]:hover { background-color: #60a5fa; color: #ffffff; }
.tech-icon[title="Google Sheets"]:hover { background-color: #22c55e; color: #ffffff; }
.tech-icon[title="Encryption"]:hover { background-color: #4f46e5; color: #ffffff; }

/* Tech icon tooltips */
.tech-icon::after {
    content: attr(title);
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: #111827;
    color: #ffffff;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
}

.tech-icon:hover::after {
    opacity: 1;
}

/* Social Icons */
.social-icons-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.social-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: all 300ms;
    border: 2px solid transparent;
}

.social-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.social-icon.linkedin:hover {
    color: #0077B5;
    border-color: #0077B5;
    transform: scale(1.1);
}

.social-icon.github:hover {
    color: #24292e;
    border-color: #24292e;
    transform: scale(1.1);
}

.dark .social-icon.github:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.social-icon.kaggle:hover {
    color: #20BEFF;
    border-color: #20BEFF;
    transform: scale(1.1);
}

.social-icon.cv:hover {
    color: #22C55E;
    border-color: #22C55E;
    transform: scale(1.1);
}

.social-icon.email:hover {
    color: #DC2626;
    border-color: #DC2626;
    transform: scale(1.1);
}

/* Highlight styles */
.highlight-result {
    background-color: #dcfce7;
    color: #166534;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.dark .highlight-result {
    background-color: #065f46;
    color: #a7f3d0;
}

.highlight-link {
    font-weight: 500;
    text-decoration: underline;
    color: #2563eb;
    text-decoration-color: #93c5fd;
}

.dark .highlight-link {
    color: #60a5fa;
    text-decoration-color: #3b82f6;
}

/* Skill bars */
.skill-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
}

.dark .skill-bar { background: #334155; }

.skill-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#3b82f6,#06b6d4);
    border-radius: 9999px;
}

/* Timeline */
.timeline-item { position: relative; padding-left: 2rem; }
.timeline-item::before { content: ""; position: absolute; left: 0.5rem; top: 0; bottom: -1rem; width: 2px; background: #e5e7eb; }
.dark .timeline-item::before { background: #334155; }
.timeline-dot { position: absolute; left: 0; top: 0.25rem; width: 0.75rem; height: 0.75rem; background: #3b82f6; border-radius: 9999px; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.dark .timeline-dot { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.15); }
.timeline-content { padding-bottom: 1rem; }

/* Contact cards */
.contact-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); }
.dark .contact-card { background: rgba(51,65,85,.4); border-color: #334155; }
.contact-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.5rem; background: #e0e7ff; color: #1e3a8a; font-weight: 700; }
.dark .contact-icon { background: rgba(30,58,138,.3); color: #bfdbfe; }
.contact-title { font-size: .875rem; color: #475569; }
.dark .contact-title { color: #cbd5e1; }
.contact-value { font-weight: 600; color: #0f172a; }
.dark .contact-value { color: #e2e8f0; }

/* Sidebar Styles */
#sidebar {
    border-right: 1px solid #e2e8f0;
    z-index: 40;
}

/* Mobile sidebar styles */
@media (max-width: 767px) {
    #sidebar {
        z-index: 50;
        width: 280px;
        max-width: 85vw;
    }
    
    /* Ensure mobile menu button is clickable */
    #mobile-menu-toggle {
        z-index: 60;
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }
    
    .dark #mobile-menu-toggle {
        background: rgba(0, 0, 0, 0.1);
    }
    
    /* Close button styling */
    #sidebar-close {
        z-index: 60;
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 0.5rem;
        transition: all 0.2s ease;
    }
    
    .dark #sidebar-close {
        background: rgba(0, 0, 0, 0.1);
    }
    
    #sidebar-close:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }
    
    .dark #sidebar-close:hover {
        background: rgba(0, 0, 0, 0.2);
    }
}

.dark #sidebar {
    border-right-color: #475569;
}

/* Sidebar navigation scrollable */
#sidebar nav {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom scrollbar for sidebar */
#sidebar nav::-webkit-scrollbar {
    width: 4px;
}

#sidebar nav::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar nav::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.dark #sidebar nav::-webkit-scrollbar-thumb {
    background: #475569;
}

.sidebar-link {
    position: relative;
    overflow: hidden;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    background: rgba(248, 250, 252, 0.5);
    border-radius: 0.5rem;
}

.dark .sidebar-link {
    background: rgba(51, 65, 85, 0.3);
}

.sidebar-link:hover {
    background: rgba(226, 232, 240, 0.8);
}

.dark .sidebar-link:hover {
    background: rgba(71, 85, 105, 0.5);
}

.sidebar-link span {
    font-size: 0.875rem;
    font-weight: 500;
}

.sidebar-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #3b82f6;
    transform: scaleY(0);
    transition: transform 0.2s ease-in-out;
}

.sidebar-link:hover::before,
.sidebar-link.active::before {
    transform: scaleY(1);
}

.sidebar-link.active {
    background-color: #eff6ff;
    color: #1d4ed8;
}

.dark .sidebar-link.active {
    background-color: #1e3a8a;
    color: #60a5fa;
}

/* Mobile sidebar overlay */
#sidebar-overlay {
    backdrop-filter: blur(2px);
}

/* Responsive Container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: margin-left 0.3s ease-in-out;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1440px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1600px;
    }
}