/* ==========================================================================
   0. CORE VARIABLES & GLOBAL RESET
   (Styles that affect all pages and base setup)
   ========================================================================== */

:root {
    --bg: #1b1d21;
    --surface: #24262b;
    --surface-soft: #2e3036;
    --outline: rgba(255, 255, 255, 0.08);
    --accent: #01ff80;
    --accent-glow: rgb(0, 209, 87);
    --radius: 10px;
    --shadow: 0 10px 28px #008e4c;
    --text: #bdc2d5;
    --text-soft: #a6a7ab;
    --text-faint: #7f8187;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* Base reset and global styles */
html,
body {
    margin: 0;
    height: 100%;
}

body {
    transition: none;
    background: radial-gradient(circle at 50% 0%, #1d1e1e 0%, #3a3d42 70%);
    background-attachment: fixed;
    /* keeps background fixed on scroll */
    color: var(--text);
    font-size: 15px;
    padding-top: 80px;
    /* space for top bar */
}

/* ==========================================================================
   1. TOP BAR & NAVIGATION
   (Shared elements across all pages)
   ========================================================================== */

/* --- TOP BAR CONTAINER --- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 1000;
    background: linear-gradient(#252525, #2c352c);
    padding: 8px 16px;
    border-bottom: 1px solid rgb(1 215 135 / 22%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#content-container {
    padding-top: 48px;
}

.brand {
    width: 40px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #e0e2e7;
    padding: none;
    border-radius: 8px;
    white-space: nowrap;
    background: transparent;
    border: none;
    border-radius: 10px;
    box-shadow: -4px 4px 20px 1px #008e59;
    text-decoration: none;
    transition: transform 300ms;
}

.brand:hover {
    transform: translateY(-2px);
    box-shadow:
        -4px 4px 20px 1px #003722;
    transition: transform 0.2s ease !important;
}

/* --- NAVIGATION LIST --- */
.nav-list {
    display: flex;
    gap: 10px;
    list-style: none;
    margin-right: 20px;
}

.nav-list a {
    color: var(--text-soft);
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    background: linear-gradient(#2d2f34, #232529);
    border: 1px solid rgb(1 222 140 / 23%);
    box-shadow: inset 0 1px 0 rgba(0, 142, 89, 1);
    transition: 0.15s ease;
}

.nav-list a:hover {
    color: var(--accent);
    border-color: rgba(120, 180, 255, 0.25);
    box-shadow: 0 0 12px var(--accent-glow);
}

.nav-list a.active {
    background: linear-gradient(#01ffa1, #028152);
    color: #0f141a;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* --- UTILITY IDs (non-standard elements) --- */
#logo {
    cursor: pointer;
    z-index: 1002;
    transition: none;
}

#logo-copy {
    cursor: pointer;
    z-index: 1002;
    transition: none;
}


/* ==========================================================================
   2. LOGIN PAGE (login.html)
   ========================================================================== */

/* Login page layout reset */
body.login-page main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    padding: 20px;
}

body.login-page .form-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 360px;
    width: 100%;
}

#loginForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.login-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 100%;
    gap: 5px;
}

.input-field {
    margin-top: 5px;
    background-color: rgb(18 19 22);
    color: #e0e0e0;
    padding: 10px 12px;
    border: 2px solid #a8d2fe;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.input-field:focus {
    outline: none;
    border-color: #01ffa1;
    box-shadow: 0 0 0 3px rgba(0, 142, 89, 1);
}

.input-field:hover {
    border-color: #01ffa1;
}

.input-field::placeholder {
    color: #949494;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* ==========================================================================
   3. DASHBOARD PAGES (maindash.html, sedash.html)
   ========================================================================== */

/* --- LAYOUT GRID --- */
#container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
    margin-top: 20px;
    padding: 0 20px;
}

#header {
    display: flex;
    justify-content: space-between;
    /* pushes connection to the right */
    align-items: center;
    margin-bottom: 20px;
}

/* --- SIDEBAR --- */
#sidebar {
    background: linear-gradient(#2c2f35, #26282d);
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(0, 142, 89, 1),
        0 4px 12px rgba(0, 142, 89, 1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#sidebar button {
    background: linear-gradient(#34363c, #25272b);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-soft);
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: 0.15s ease;
}

#sidebar button:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: #2f3238;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Active sidebar button */
#sidebar button.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* --- DASHBOARD PANELS (Main Content) --- */
.panel {
    /* Base panel style */
    background: rgba(45, 47, 53, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) brightness(1.08);
    border-radius: 14px;
    padding: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 28px rgba(0, 0, 0, 0.55);
}

/* Hide all panels by default */
.panel {
    display: none;
}

/* Show the active panel */
.panel.active {
    display: block;
}

/* --- CONNECTION STATUS --- */
#connection {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- LIBRARY/COMMAND PANEL (Expanded) --- */
#library {
    grid-column: 1 / -1 !important;
    /* if grid */
    flex-basis: 100% !important;
    /* if flex */
    width: 100% !important;
    max-width: none !important;
    background: rgba(45, 47, 53, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) brightness(1.08);
    border-radius: 14px;
    padding: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 28px rgba(0, 0, 0, 0.55);
}


/* ==========================================================================
   4. PROJECT DETAIL PAGES (speceye.html, cmr1.html)
   ========================================================================== */

/* --- PAGE CONTAINER --- */
.project-body {
    background: linear-gradient(180deg, #1a1a1c, #0f0f10);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #e6e6e6;
    padding: 40px 20px;
}

.project-layout {
    display: flex;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.project-main {
    flex: 1;
    max-width: 900px;
}


.small-project-page-content {
    justify-content: space-between;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Title grows, Home stays right */
    align-items: center;
    gap: 4px 12px;
}


/* --- HEADER/TITLE SECTION --- */
.project-header {
    text-align: center;
    float: center;
    margin-bottom: 40px;
    
}

.project-header h1 {
    font-size: 2.6rem;
    font-weight: 600;
    color: #f5f5f7;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    grid-column: 1;
}

.project-header .nav-list {
    grid-column: 2;
}

.project-header .project-subtitle {
    opacity: 0.75;
    max-width: 600px;
    margin: 10px auto 0;
    grid-column: 1 / span 2;
}

/* --- META INFO GRID --- */
.project-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-meta h3 {
    margin-bottom: 6px;
    color: #fff;
    font-weight: 600;
}

/* --- CONTENT BLOCK --- */
.project-content {
    max-width: 900px;
    margin: 0 auto 50px;
}

.project-content h2 {
    margin-bottom: 10px;
    color: #f5f5f7;
}

/* --- SCREENSHOTS --- */
.project-images {
    max-width: 1000px;
    margin: 0 auto 50px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.image-grid img {
    width: 300px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #000;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.image-grid img:hover {
    transform: scale(2.5);
}

/* =========================================================================
   1. GITHUB ACTIVITY SIDEBAR AND CONTAINER
   ========================================================================= */
.github-activity {
    max-width: 900px;
    margin: 0 auto 50px;
}

.commit-sidebar {
    width: 300px;
    flex-shrink: 0;
    height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 20px;
    background: rgb(208 21 21 / 5%);
    border-radius: 12px;
    border: 1px solid rgb(213 7 7 / 10%);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 20px;
}

.commit-sidebar h2 {
    margin-bottom: 16px;
    font-size: 1.2rem;
    color: #f2f2f4;
}

/* =========================================================================
   2. COMMIT LIST (PARENT UL/OL)
   ========================================================================= */
.commit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Removed justify-content: flex-start; from here as it's not a flex container */
}

/* =========================================================================
   3. COMMIT LIST ITEM (LI) - THE FLEX CONTAINER
   ========================================================================= */
.commit-list li {
    /* Base Li container styles */
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* --- FLEXBOX FOR EQUAL HEIGHT COLUMNS --- */
    display: flex;
    /* 1. Make <li> the Flex Container */
    align-items: stretch;
    /* 2. Key: Children stretch to match height of tallest sibling */
    flex-direction: row;
    /* Ensure horizontal arrangement */
    gap: 10px;
    /* Space between the two columns */
    padding: 0;
    /* Resetting li padding to 0, applied to children instead */
}

.commit-list li:hover {
    box-shadow: 0 2px 12px rgb(103 180 151);
    transform: scale(97%);
    transition-property: transform, box-shadow;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0, 1.07, 0.19, 1);
}

/* =========================================================================
   4. COMMIT MESSAGE (P) - THE LEFT COLUMN
   ========================================================================= */
/* The element that contains lots of text and should take up most of the width */
.commit-message {
    /* Flex sizing */
    flex-grow: 1;
    /* Takes up all remaining width */
    flex-shrink: 1;
    flex-basis: auto;
    /* Allows content to dictate width before growing */

    /* Visual styles for the column's background */
    padding: 10px;
    /* Inner padding for the content */
    background: rgba(255, 255, 255, 0.05);
    /* Match the li's background for continuous look */
    border-radius: 8px;
    /* Match li border-radius */

    /* Text styles */
    font-weight: 500;

    /* Box Model cleanup */
    box-sizing: border-box;
    margin: 0;
    /* Remove outer margin */
}

/* =========================================================================
   5. COMMIT DETAILS (SPAN) - THE RIGHT COLUMN
   ========================================================================= */
.commit-details {
    /* ADD THIS LINE: Crucial fix for fixed-width containers with padding */
    box-sizing: border-box;

    /* Flex sizing */
    flex-shrink: 0;
    min-width: 140px;
    /* Now this 140px INCLUDES the 10px padding */
    max-width: 140px;
    /* Now this 140px INCLUDES the 10px padding */

    /* Visual styles for the column's background */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    /* This padding is now calculated *inside* 140px */

    /* ... (rest of the styles) ... */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Text styles */
    font-size: 0.8rem;
    opacity: 0.7;
    color: white;
    text-align: center;
    overflow-wrap: break-word;
    /* Ensure text breaking is respected */
}

/* =========================================================================
   6. LINK STYLES (A) - Inside .commit-details
   ========================================================================= */
.commit-details a {
    /* ADD THIS LINE: Crucial fix for padding/width on the link */
    box-sizing: border-box;

    /* Base link styles */
    background-color: rgb(0 0 0 / 40%);
    border-radius: 3px;
    text-decoration: none;
    padding: 3px 8px;
    /* This padding is now calculated *inside* 100% width */
    margin: 3px 0;
    color: white;
    text-align: center;

    /* --- CRITICAL FIXES FOR OVERFLOW --- */
    display: block;
    width: 100%;
    /* This now means the link element will be exactly the width of the parent's content box, including its own padding. */

    white-space: normal;
    overflow-wrap: break-word;
}

.commit-details a:hover {
    background-color: rgb(44 44 44 / 40%);
}

.commit-details a:visited {
    background-color: rgba(1, 255, 161, 0.4);
}


/* =========================================================================
   7. MISC/ERROR STYLES
   ========================================================================= */

.commit-error {
    color: #ff7777;
    font-size: 0.9rem;
}

/* Removed old unnecessary/conflicting styles:
.commit-list p: float:left;, margin: 10px;, padding: 20px;, border-radius: 5px;, background-color: rgba(255,255,255, 0.1);
.commit-details: background-color: rgba(255,255,255,0.1); border-radius: 5px; padding: 8px;
.commit-details a: flex-basis: 30%; flex-shrink: 0; margin: 5px; 
*/


/* ==========================================================================
   5. HOME PAGE (index.html)
   ========================================================================== */

.home-layout {
    display: flex;
    justify-content: center;
    /* centers main card horizontally */
    position: relative;
    padding: 40px 20px;
}

#content-container {
    margin-top: auto;
}

.card.tab-panel {
    max-width: none;
    /*width: 100%;*/
    margin: 10px;
    background: rgba(42, 45, 49, 0.7);
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgb(1 192 121);
    color: #eee;
    box-shadow: 0 0px 12px rgba(0, 0, 0, 0.3);

}

#home {
    width: 100%;
}

/* Commit sidebar floating outside the card (Home page specific) */
.home-commits {
    width: 280px;
    background: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 16px;
    color: #eee;
    position: sticky;
    /* floats with scrolling */
    top: 40px;
    margin-left: 24px;
    /* gap between card and sidebar */
    align-self: flex-start;
    /* keeps it at top of layout */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 1);
}

/* NOTE: .commit-list, .commit-message, .commit-meta are styled in section 4 */
/* Overrides for home page commit list to match home-commits background */
.home-commits .commit-list li {
    padding: 8px;
    margin-bottom: 12px;
    background: rgba(50, 50, 50, 0.8);
    border-radius: 8px;
    border: none;
    /* remove border from section 4 style */
}

.home-commits .commit-message {
    font-weight: 600;
}

.home-commits .commit-meta {
    font-size: 0.8em;
    opacity: 0.7;
    display: flex;
    justify-content: space-between;
}

/* ==========================================================================
   6. COMMON COMPONENTS (Shared across multiple page types)
   ========================================================================== */

/* --- CARDS --- */
.card {
    background: linear-gradient(#2b2d32, #24262b);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 10px 24px rgba(0, 0, 0, 0.5);
}

/* --- BUTTONS --- */
.btn {
    background: linear-gradient(#01ffa1, #006b44);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 6px 16px rgba(20, 60, 120, 0.25);
    color: #0f141a;
    margin: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.12s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 8px 20px var(--accent-glow);
}

.btn.secondary {
    background: linear-gradient(#2d2f34, #212429);
    color: var(--text-soft);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn.secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- OVERLAY/MODAL BACKGROUND --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.overlay.is-active {
    opacity: 1;
    visibility: visible;
}

#countdown {
    position: fixed;
    z-index: 1003;
}

/* --- CONTACT LINKS --- */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.contact-links .contact-icon {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    background-color: transparent;

}

.contact-links .contact-icon:hover {
    transform: translate3d(0px, 60%, 3em) scale(1.5);
    filter: drop-shadow(-2px -15px 3px rgb(10 10 10 / 80%));
}


/* ==========================================================================
   7. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 800px) {

    /* Dashboard and Project Layout stacking */
    #container {
        grid-template-columns: 1fr;
    }

    /* Dashboard Sidebar (Horizontal scrollable) */
    #sidebar {
        flex-direction: row;
        overflow-x: auto;
    }
}

/* PROJECT CARD */
.project-container .project-card {
    border-radius: 10px;
    text-decoration: none;
    color: #a6a7ab;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    margin: 10px;
    float: left;
    width: 180px;
    height: 140px;
    align-content: center;
    text-align: center;
    transition: 0.3s ease;
}

.project-container .project-card:hover {
    transform: translate3d(0px, 30%, 0.1em) scale(1.3);

}

.project-container {
    align-content: center;
    margin-left: 60px;
}

.random_object {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-align: center;
    align-content: center;
}

.small-card {
    background: green;
    float: center;
}

#matrixCanvas {
    display: block;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}