/* --- BASE & LANDING PAGE STYLES --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f4f8;
}
.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.btn-primary {
    background-color: #ff7e5f;
    color: white;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #feb47b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-secondary {
    background-color: transparent;
    border: 2px solid #fff;
    color: white;
     transition: all 0.3s ease;
}
 .btn-secondary:hover {
    background-color: white;
    color: #667eea;
}
.card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.dashboard-card {
    transition: all 0.3s ease;
}
.dashboard-card:hover {
     transform: scale(1.03);
     box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* --- NEW DASHBOARD STYLES --- */
#sidebar {
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    margin: 0.25rem 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-link:hover { background-color: #4a5568; }
.nav-link.active { background-color: #4c51bf; color: white; font-weight: 600; }
#dashboard-content { 
    background-color: #f0f4f8; 
    min-height: 100vh;
}

#dashboard-content .page {
    padding-top: 2rem; /* This is equivalent to pt-20 */
}

body.sidebar-open #sidebar { transform: translateX(0); }
@media (min-width: 1024px) { #hamburger-btn { display: none; } }
@media (max-width: 1023px) { #dashboard-content { margin-left: 0; } }

/* Project Grid */
.project-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    cursor: pointer;
    transition: all 0.3s ease;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.project-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.project-card-title {
    padding: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* Voice Search Button */
#mic-btn.listening {
    animation: pulse 1.5s infinite;
    background-color: #ef4444; /* red-500 */
    color: white;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* For embedded videos */
.aspect-w-16 { position: relative; padding-bottom: 56.25%; }
.aspect-h-9 { height: 0; }
.aspect-w-16 > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Certificate */
.font-cursive {
    font-family: 'Cedarville Cursive', cursive;
}


/* --- Custom Scrollbar for Sidebar --- */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1f2937; /* A dark color to match the sidebar background */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* A slightly lighter gray for the handle */
  border-radius: 4px;      /* Rounded corners for the handle */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* An even lighter gray for when you hover over it */
}

/* Styles for Firefox browser */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #1f2937;
}

.project-card.gemini-idea {
    position: relative;
    border: 2px solid #4285F4; /* Google blue */
}

.gemini-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #4285F4;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.project-card {
    position: relative;
    overflow: hidden; /* Ensures the badge corners look nice */
}

.project-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 9999px; /* pill shape */
    color: white;
    font-size: 0.75rem; /* 12px */
    font-weight: bold;
    z-index: 10;
}

/* Styles for Collapsible Sidebar */
body.sidebar-collapsed #sidebar {
    width: 80px;
}

body.sidebar-collapsed #sidebar .sidebar-text,
body.sidebar-collapsed #sidebar .text-xs,
body.sidebar-collapsed #sidebar .nav-link span:last-child {
    display: none;
}

body.sidebar-collapsed #dashboard-content {
    margin-left: 80px;
}

/* Smooth transitions */
#sidebar, #dashboard-content {
    transition: all 0.3s ease-in-out;
}