/* Layout: html, body */
html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

/* Layout: app-container */
#app-container {
            border-radius: 0 !important;
            display: flex;
            flex-direction: column;
            height: 100vh;
            max-height: 100vh;
        }

/* Layout: header */
.header {
            flex-shrink: 0;
            z-index: 30;
        }

/* Layout: main-container */
.main-container {
            flex: 1;
            overflow: hidden; /* Prevent main container scroll */
            scroll-behavior: smooth;
            min-height: 0;
            padding-bottom: 0;
            height: 100%;
        }

/* Layout: footer */
.footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 448px;
            margin: 0 auto;
            background-color: #ffffff;
            z-index: 1000;
            border-top: 1px solid #e5e7eb;
            min-height: 64px;
        }

/* Layout: section */
.section {
            display: none;
            height: 100%;
        }
.section.active {
            display: flex;
            height: 100%;
        }
.section {
            display: none;
            padding-bottom: 0;
        }
.section.active {
            display: block;
        }
.section.active {
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - 200px);
        }

/* Layout: nav-item */
.nav-item {
            color: #6b7280;
            transition: all 0.2s ease;
        }
.nav-item.active {
            background-color: var(--primary-color);
            color: white;
            border-radius: 8px;
        }
.nav-item:hover:not(.active) {
            background-color: #f9fafb;
            color: #374151;
        }
.nav-item.active:hover {
            background-color: var(--primary-color-dark);
        }