:root { --sidebar-width: 250px; }

#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    transition: width .2s ease;
    flex-shrink: 0;
}
#app-wrapper.collapsed #sidebar { width: 64px; }
#app-wrapper.collapsed .brand-text,
#app-wrapper.collapsed .nav-section { display: none; }
#sidebar .nav-link { border-radius: .375rem; margin-bottom: 2px; white-space: nowrap; }
#sidebar .nav-link:hover { background: rgba(255,255,255,.08); }
#main-content { min-height: 100vh; min-width: 0; }

.kpi-card .kpi-icon {
    width: 54px; height: 54px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

.auth-body { min-height: 100vh; background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); }
.auth-card { width: 100%; max-width: 420px; border-radius: 1rem; }

.badge-status { font-weight: 500; }

/* Timeline workflow */
.wf-timeline { list-style: none; padding-left: 0; }
.wf-timeline li { position: relative; padding-left: 28px; padding-bottom: 18px; border-left: 2px solid var(--bs-border-color); margin-left: 8px; }
.wf-timeline li:last-child { border-left-color: transparent; }
.wf-timeline li .wf-dot { position: absolute; left: -9px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bs-secondary); }
.wf-timeline li.done .wf-dot { background: var(--bs-success); }
.wf-timeline li.current .wf-dot { background: var(--bs-primary); box-shadow: 0 0 0 4px rgba(13,110,253,.25); }

@media (max-width: 768px) {
    #sidebar { position: fixed; z-index: 1040; height: 100%; }
    #app-wrapper.collapsed #sidebar { width: var(--sidebar-width); transform: translateX(-100%); }
}