/* ===== APP LAYOUT ===== */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ===== NAVBAR ===== */
.navbar {
    height: var(--navbar-h); display: flex; align-items: center;
    padding: 0 var(--space-5); gap: var(--space-4);
    position: sticky; top: 0; z-index: 500;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-outline-subtle);
    backdrop-filter: blur(16px);
}
[data-theme="dark"] .navbar { background-color: rgba(15,21,16,0.85); }

.navbar-brand {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
    color: var(--color-on-surface); text-decoration: none; letter-spacing: -0.01em;
}
.navbar-brand svg { width: 32px; height: 32px; fill: var(--color-primary); animation: breathe 4s ease-in-out infinite; }
.navbar-spacer { flex: 1; }
.navbar-actions { display: flex; align-items: center; gap: 2px; }
.navbar-user {
    font-size: 0.8125rem; color: var(--color-on-surface-muted); margin-right: var(--space-3);
    font-weight: 500;
}
.hamburger { display: none; }

/* ===== MAIN CONTENT ===== */
.main-content { flex: 1; display: flex; }
.page-content { flex: 1; padding: var(--space-6); max-width: var(--max-content); margin: 0 auto; width: 100%; }
.page-header { margin-bottom: var(--space-6); }
.page-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.page-subtitle { color: var(--color-on-surface-muted); font-size: 0.9375rem; margin-top: var(--space-1); }

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-w); background-color: var(--color-surface-container);
    border-right: 1px solid var(--color-outline-subtle); padding: var(--space-4) 0;
    flex-shrink: 0; overflow-y: auto;
    height: calc(100vh - var(--navbar-h)); position: sticky; top: var(--navbar-h);
}
.sidebar-nav { list-style: none; }
.sidebar-item {
    display: flex; align-items: center; gap: var(--space-3); padding: 11px var(--space-5);
    color: var(--color-on-surface-muted); cursor: pointer; transition: all var(--duration-fast);
    font-size: 0.875rem; font-weight: 500; text-decoration: none;
    border-radius: 0 var(--radius-full) var(--radius-full) 0; margin-right: var(--space-3);
}
.sidebar-item:hover { background-color: var(--color-surface-container-high); color: var(--color-on-surface); text-decoration: none; }
.sidebar-item.active { background-color: var(--color-primary-surface); color: var(--color-on-primary-surface); font-weight: 600; }
.sidebar-item svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
.sidebar-section {
    padding: var(--space-2) var(--space-5); font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-on-surface-faint);
    margin-top: var(--space-4);
}

/* ===== GRID ===== */
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ===== BOTTOM NAV ===== */
.bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h); background-color: var(--color-surface-container);
    border-top: 1px solid var(--color-outline-subtle);
    z-index: 500; justify-content: space-around; align-items: center;
    backdrop-filter: blur(16px);
}
[data-theme="dark"] .bottom-nav { background-color: rgba(15,21,16,0.9); }

.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0; color: var(--color-on-surface-muted); text-decoration: none;
    font-size: 0.6875rem; font-weight: 600; cursor: pointer; min-width: 56px;
    transition: all var(--duration-fast); background: none; border: none; font-family: var(--font-body);
    letter-spacing: 0.02em;
}
.bottom-nav-item svg { width: 24px; height: 24px; fill: currentColor; transition: transform var(--duration-fast) var(--ease-spring); }
.bottom-nav-item.active { color: var(--color-primary); }
.bottom-nav-item.active svg { transform: scale(1.15); }

/* ===== ADMIN LAYOUT ===== */
.admin-layout { display: flex; width: 100%; }
.admin-content { flex: 1; padding: var(--space-6); overflow-y: auto; max-width: 900px; }
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .sidebar {
        position: fixed; top: var(--navbar-h); left: 0; bottom: 0; z-index: 400;
        transform: translateX(-100%); transition: transform var(--duration-normal) var(--ease-smooth);
        width: var(--sidebar-w);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop { display: none; position: fixed; inset: 0; top: var(--navbar-h); background: rgba(0,0,0,0.4); z-index: 399; backdrop-filter: blur(2px); }
    .sidebar-backdrop.active { display: block; }
    .bottom-nav { display: flex; }
    .page-content { padding: var(--space-4); padding-bottom: calc(var(--bottom-nav-h) + var(--space-4)); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .grid-auto { grid-template-columns: 1fr; }
    .navbar-user { display: none; }
    .page-title { font-size: 1.5rem; }
    .admin-content { padding: var(--space-4); }
}
@media (max-width: 480px) {
    .page-content { padding: var(--space-3); padding-bottom: calc(var(--bottom-nav-h) + var(--space-3)); }
}