:root {
    --pl-sidebar-width: 240px;
}

html, body { height: 100%; }

.app-layout {
    display: grid;
    grid-template-columns: var(--pl-sidebar-width) 1fr;
    min-height: 100vh;
}

.app-sidebar {
    min-height: 100vh;
    position: sticky;
    top: 0;
}

.app-sidebar .nav-link { border-radius: 0.375rem; }
.app-sidebar .nav-link.active { background-color: rgba(255,255,255,0.15); }
.app-sidebar .nav-link:hover { background-color: rgba(255,255,255,0.08); color: #fff; }
.app-sidebar .nav-link i { margin-right: 0.5rem; width: 1rem; text-align: center; }

.app-main {
    background-color: #f8f9fa;
    min-height: 100vh;
}

.app-header { background: #fff; }

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08);
}

.stat-card { border-left: 4px solid var(--bs-primary); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 600; }
.stat-card .stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em; }

.table-card { background: #fff; border-radius: 0.5rem; }
.table-card table { margin-bottom: 0; }
.table-card thead th { background: #f1f3f5; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: #6c757d; }

@media (max-width: 768px) {
    .app-layout { grid-template-columns: 1fr; }
    .app-sidebar { position: relative; min-height: auto; }
}