/* Layout Grid */

.app-layout {

    display: grid;

    grid-template-areas:

        "sidebar header"

        "sidebar content";

    grid-template-columns: var(--sidebar-width) 1fr;

    grid-template-rows: var(--header-height) 1fr;

    min-height: 100vh;

    transition: grid-template-columns 0.3s ease;

}



/* Sidebar */

.sidebar {

    grid-area: sidebar;

    background-color: var(--color-bg-sidebar);

    border-right: 1px solid #213743;

    position: sticky;

    top: 0;

    height: 100vh;

    overflow-y: auto;

    padding: 16px;

    z-index: 100;

}



.sidebar-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 24px;

    color: var(--color-text-primary);

}



.nav-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    color: var(--color-text-secondary);

    border-radius: 4px;

    cursor: pointer;

    margin-bottom: 4px;

}



.nav-item:hover,

.nav-item.active {

    background-color: var(--color-bg-card-hover);

    color: var(--color-text-primary);

}



.nav-section-title {

    font-size: 11px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    font-weight: 700;

    margin: 24px 0 8px 12px;

}



/* Header */

.header {

    grid-area: header;

    background-color: var(--color-bg-main);

    /* Often indistinguishable from main bg in Stake */

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 24px;

    position: sticky;

    top: 0;

    z-index: 90;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

}



.search-bar {

    background-color: var(--color-bg-input);

    border: 1px solid #2f4553;

    border-radius: 20px;

    padding: 8px 16px;

    color: var(--color-text-secondary);

    font-size: 14px;

    display: flex;

    align-items: center;

    width: 300px;

}



.search-bar input {

    background: transparent;

    border: none;

    color: white;

    outline: none;

    width: 100%;

    margin-left: 8px;

}



/* Main Content */

.main-content {

    grid-area: content;

    padding: 24px;

    background-color: var(--color-bg-main);

}



/* Responsive */

@media (max-width: 1024px) {

    .app-layout {

        grid-template-columns: var(--sidebar-width-collapsed) 1fr;

    }



    .sidebar {

        width: var(--sidebar-width-collapsed);

        padding: 16px 8px;

    }



    .label {

        display: none;

    }



    /* Hide text in sidebar */

    .sidebar-logo span {

        display: none;

    }



    .nav-section-title {

        display: none;

    }



    .nav-item {

        justify-content: center;

    }

}



@media (max-width: 768px) {

    .app-layout {

        grid-template-areas:

            "header"

            "content";

        grid-template-columns: 1fr;

        grid-template-rows: 60px 1fr;

    }



    .sidebar {

        display: none;

    }



    .header {

        padding: 0 16px;

    }



    .search-bar {}

}



/* Footer Styles */

.site-footer {

    background-color: #1a2c38;

    /* Darker background similar to card */

    padding: 40px 24px;

    margin-top: 64px;

    border-radius: 8px;

    color: var(--color-text-secondary);

    font-size: 13px;

}



.footer-lang-selector {

    display: flex;

    justify-content: center;

    margin-bottom: 40px;

}



.lang-btn {

    background-color: transparent;

    border: 1px solid #2f4553;

    padding: 10px 20px;

    color: white;

    border-radius: 20px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

}



.footer-links {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

    margin-bottom: 40px;

}



.footer-col h4 {

    color: white;

    margin-bottom: 16px;

    font-size: 14px;

}



.footer-col ul li {

    margin-bottom: 8px;

}



.footer-col ul li a:hover {

    color: var(--color-accent);

}



.footer-license {

    text-align: center;

    margin-bottom: 32px;

    line-height: 1.6;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

}



.footer-license p {

    margin-bottom: 16px;

}



.footer-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 24px;

}



@media (max-width: 768px) {

    .footer-links {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 480px) {

    .footer-links {

        grid-template-columns: 1fr;

    }

}