/* ========================================
   PROJECTS - SOLID THEME & BLUE BUTTONS
   Enforces Solid White/Black Theme & Apple Blue Buttons
   ======================================== */

#projects {
    background: #fff !important;
    padding: 4rem 0 !important;
}

html.dark #projects {
    background: #000 !important;

    /* Solid Black */
}

/* Section Title */
#projects h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    background: linear-gradient(135deg, #0071e3, #2997ff) !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.dark #projects h2 {
    background: linear-gradient(135deg, #58a6ff, #79c0ff) !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========================================
   STATS DASHBOARD
   ======================================== */

#projects-stats {
    margin-bottom: 3rem !important;
}

#projects-stats .grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.stat-card {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
    text-align: center !important;
    border: 1px solid rgb(0 0 0 / 10%) !important;
}

html.dark .stat-card {
    background: #000 !important;

    /* Solid Black */
    border-color: rgb(255 255 255 / 15%) !important;
}

.stat-value {
    font-size: 2rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #0071e3, #2997ff) !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.dark .stat-value {
    background: linear-gradient(135deg, #58a6ff, #79c0ff) !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========================================
   SEARCH & FILTER SECTION (REDESIGNED)
   ======================================== */

.proj-search-container {
    max-width: 1400px !important;
    margin: 0 auto 1.5rem !important;
    padding: 0 2rem !important;
    display: flex !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
}

/* Search Bar Wrapper */
.proj-search-bar {
    flex: 1 1 300px !important;
    max-width: 600px !important;
}

/* Input Group - The container looks like the input */

/* Input Group - Apple Style */
.proj-input-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;

    /* Apple standard height */
    background: #F2F2F7 !important;

    /* Apple System Gray 6 */

    /* Apple System Gray 6 */
    backdrop-filter: blur(20px) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
}

.proj-input-group:focus-within {
    background: #E5E5EA !important;

    /* Apple System Gray 5 */
    box-shadow: none !important;
}

/* Icon Wrapper */
.proj-search-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;

    /* Fixed width for icon area */
    height: 100% !important;
    color: #57606a !important;
    font-size: 1rem !important;
    pointer-events: none !important;

    /* Clicks pass through */
}

.proj-input-group:focus-within .proj-search-icon-wrapper {
    color: #0071e3 !important;
}

/* The Actual Input */
.proj-search-input {
    flex: 1 !important;

    /* Takes remaining space */
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 1rem 0 0 !important;

    /* Right padding only */
    font-size: 1rem !important;
    color: #1d1d1f !important;
    outline: none !important;
    box-shadow: none !important;

    /* Remove any default shadow */
    margin: 0 !important;
    appearance: none !important;
}

.proj-search-input::placeholder {
    color: #86868b !important;
}

/* Filter Group */
.proj-filter-group {
    display: flex !important;
    gap: 0.75rem !important;
    flex: 0 0 auto !important;
}

/* Filter Buttons */
.proj-filter-select,
.proj-sort-btn {
    appearance: none !important;
    background: linear-gradient(135deg, #0071e3 0%, #0a84ff 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0 1.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgb(0 113 227 / 30%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 140px !important;
    height: 48px !important;
    white-space: nowrap !important;
    gap: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif !important;
    text-align: center !important;
    text-align-last: center !important;
}

.proj-filter-select:hover,
.proj-sort-btn:hover {
    background: linear-gradient(135deg, #0077ed 0%, #2997ff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgb(0 113 227 / 40%) !important;
}

.proj-filter-select:active,
.proj-sort-btn:active {
    transform: translateY(0) !important;
}

/* Custom Arrow for Select */
.proj-filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(135deg, #0071e3 0%, #0a84ff 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 1rem center, center !important;
    background-size: 12px, cover !important;
    padding-right: 2.5rem !important;
}

/* Dark Mode */
html.dark .proj-input-group {
    background: #1C1C1E !important;

    /* Apple Dark Gray */
    border: none !important;
}

html.dark .proj-input-group:focus-within {
    background: #2C2C2E !important;

    /* Apple Dark Gray (Lighter) */
    border: none !important;
    box-shadow: none !important;
}

html.dark .proj-search-input {
    color: #fff !important;
}

html.dark .proj-search-input::placeholder {
    color: #6e6e73 !important;
}

html.dark .proj-search-icon-wrapper {
    color: #8b949e !important;
}

html.dark .proj-input-group:focus-within .proj-search-icon-wrapper {
    color: #2997ff !important;
}

html.dark .proj-filter-select option {
    background: #1d1d1f !important;
    color: #f5f5f7 !important;
}

/* Mobile Responsive */
@media (width <=768px) {
    .proj-search-container {
        flex-direction: column !important;
        gap: 0.5rem !important;

        /* Minimal gap */
        align-items: stretch !important;
        padding: 0 1rem !important;
    }

    .proj-search-bar {
        flex: 0 0 auto !important;

        /* Reset flex to prevent 300px height */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;

        /* Ensure no margins */
    }

    .proj-filter-group {
        flex-direction: column !important;
        gap: 0.4rem !important;

        /* Minimal gap */
        width: 100% !important;
    }

    .proj-filter-select,
    .proj-sort-btn {
        width: 100% !important;
        height: 44px !important;

        /* Compact height */
        padding: 0 1.25rem !important;
        font-size: 0.9375rem !important;
        border-radius: 10px !important;
    }

    .proj-input-group {
        height: 44px !important;

        /* Compact height */
        border-radius: 10px !important;
    }
}

/* ========================================
   PROJECT CARDS
   ======================================== */

#github-projects-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.project-card {
    background: #fff !important;

    /* Solid White */
    border-radius: 24px !important;
    border: 1px solid rgb(0 0 0 / 10%) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    position: relative !important;
    min-height: 280px !important;
}

html.dark .project-card {
    background: #000 !important;

    /* Solid Black */
    border-color: rgb(255 255 255 / 15%) !important;
    box-shadow: 0 4px 16px rgb(0 0 0 / 40%) !important;
}

.project-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 32px rgb(0 0 0 / 10%) !important;
    border-color: #0969da !important;
}

html.dark .project-card:hover {
    box-shadow: 0 16px 40px rgb(0 0 0 / 60%) !important;
    border-color: #58a6ff !important;
}

/* Header */
.project-header {
    padding: 1.25rem 1.25rem 0.5rem !important;
    margin-bottom: 0 !important;
}

.project-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0969da !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

html.dark .project-title {
    color: #58a6ff !important;
}

.project-icon {
    color: #57606a !important;
}

html.dark .project-icon {
    color: #8b949e;
}

.project-description {
    font-size: 0.95rem !important;
    color: #1d1d1f !important;

    /* Dark Gray */
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

html.dark .project-description {
    color: #f5f5f7 !important;

    /* Light Gray */
}

/* Body */
.project-body {
    padding: 0 1.25rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.project-stats {
    display: flex !important;
    gap: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.project-stat {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.9rem !important;
    color: #57606a !important;
}

html.dark .project-stat {
    color: #8b949e !important;
}

/* STAR COLOR - YELLOW */
.project-stat .fa-star {
    color: #e3b341 !important;
}

/* FORK COLOR - GRAY */
.project-stat .fa-code-branch {
    color: #57606a !important;
}

html.dark .project-stat .fa-code-branch {
    color: #8b949e !important;
}

/* Tags */
.project-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    margin-top: auto !important;
    margin-bottom: 1.25rem !important;
}

.project-tag {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 100px !important;
    background: #ddf4ff !important;
    color: #0969da !important;
    font-weight: 600 !important;
    border: none !important;
}

html.dark .project-tag {
    background: rgb(56 139 253 / 15%) !important;
    color: #58a6ff !important;
}

.project-tag:hover {
    background: #0969da !important;
    color: #fff !important;
}

html.dark .project-tag:hover {
    background: #1f6feb !important;
    color: #fff !important;
}

.language-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 0.25rem !important;
    border: 1px solid rgb(0 0 0 / 10%) !important;
}

/* Footer (Buttons) */
.project-footer {
    padding: 1rem 1.25rem !important;
    border-top: 1px solid rgb(0 0 0 / 10%) !important;
    display: flex !important;
    gap: 1rem !important;
    margin-top: auto !important;
    background: #f6f8fa !important;

    /* Keep light gray footer for contrast in light mode */
}

html.dark .project-footer {
    border-top-color: rgb(255 255 255 / 15%) !important;
    background: #000 !important;

    /* Solid Black */
}

/* BUTTONS: CODE & DEMO - BLUE GRADIENT & WHITE TEXT */
.project-action-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    gap: 0.5rem !important;

    /* FORCE BLUE GRADIENT */
    background: linear-gradient(135deg, #0071e3 0%, #0a84ff 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgb(0 113 227 / 30%) !important;
}

.project-action-btn:hover {
    background: linear-gradient(135deg, #0077ed 0%, #2997ff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgb(0 113 227 / 40%) !important;
    color: #fff !important;
}

/* Override specific classes to ensure uniformity */
.project-action-btn.btn-demo,
.project-action-btn.btn-github {
    background: linear-gradient(135deg, #0071e3 0%, #0a84ff 100%) !important;
    color: #fff !important;
    border: none !important;
}

/* BUTTON: VIEW ALL - BLUE GRADIENT & WHITE TEXT */
.projects-view-all-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0071e3 0%, #0a84ff 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 1.25rem 3.5rem !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgb(0 113 227 / 30%) !important;
    cursor: pointer !important;
    gap: 0.75rem !important;
    margin-top: 2rem !important;
}

.projects-view-all-btn:hover {
    background: linear-gradient(135deg, #0077ed 0%, #2997ff 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgb(0 113 227 / 40%) !important;
    color: #fff !important;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Tablet */
@media (width <=1024px) {
    #github-projects-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

/* Mobile - Comprehensive Optimization */
@media (width <=768px) {
    /* Section Padding */
    #projects {
        padding: 1.5rem 1rem !important;
    }

    /* Stats Grid - 2 Columns */
    #projects-stats .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Stat Cards - Compact */
    .stat-card {
        padding: 0.75rem !important;
        border-radius: 14px !important;
    }

    .stat-icon {
        font-size: 1.25rem !important;
        width: 36px !important;
        height: 36px !important;
    }

    .stat-value {
        font-size: 1.5rem !important;
        margin: 0.25rem 0 0.15rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }

    /* Search and Filters Container */

    /* Search and Filters Container */

    /* Search and Filters Container */
    .proj-search-container {
        flex-direction: column !important;

        /* Restore column layout */
        align-items: stretch !important;

        /* Stretch items */
        padding: 0 1rem !important;
        margin-bottom: 2rem !important;

        /* Increased space before cards */
        gap: 1.5rem !important;

        /* Significantly increased gap between search and buttons */
        height: auto !important;
    }

    /* Projects Grid - Single Column */
    #github-projects-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;

        /* Balanced spacing */
        padding: 0 !important;
    }

    /* Project Cards - Compact */
    .project-card {
        padding: 0 !important;

        /* Remove padding from card container */
        border-radius: 16px !important;
        min-height: auto !important;

        /* Allow shrinking */
    }

    .project-header {
        padding: 1rem 1rem 0.5rem !important;

        /* Compact header padding */
        margin-bottom: 0 !important;
    }

    .project-name {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.25rem !important;
    }

    .project-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
        padding: 0 1rem !important;

        /* Add horizontal padding */
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }

    .project-body {
        padding: 0 1rem !important;
    }

    /* Project Footer */

    /* Project Footer */
    .project-footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
        padding: 0.75rem 1rem !important;
    }

    .project-action-btn {
        width: auto !important;

        /* Allow flex stretch to control width */
        box-sizing: border-box !important;

        /* Fix overflow issue */
        padding: 0.5rem !important;

        /* Very compact */
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        min-height: 32px !important;
    }

    /* Project Stats */
    .project-stats {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        margin-bottom: 0.75rem !important;
    }

    .project-stat {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.65rem !important;
    }

    .project-stat i {
        font-size: 0.75rem !important;
    }

    /* Language Tags */
    .project-language {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.75rem !important;
    }

    /* Project Links */
    .project-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .project-link {
        width: 100% !important;
        padding: 0.65rem 1rem !important;
        font-size: 0.875rem !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    /* No Projects Message */
    .no-projects {
        padding: 2rem 1rem !important;
        font-size: 0.95rem !important;
    }

    /* Loading State */
    .loading-skeleton {
        height: 200px !important;
    }
}

/* Extra Small Mobile */
@media (width <=480px) {
    #projects {
        padding: 2rem 0.75rem !important;
    }

    #projects-stats .grid {
        gap: 0.5rem !important;
    }

    .stat-card {
        padding: 0.85rem !important;
    }

    .stat-value {
        font-size: 1.5rem !important;
    }

    .project-card {
        padding: 1rem !important;
    }

    .project-name {
        font-size: 1.05rem !important;
    }

    .project-description {
        font-size: 0.85rem !important;
    }
}