:root{ --sidebar-w: 280px; }
html, body { height: 100%; }
.app-shell { min-height: 100vh; }

.layout { display: flex; min-height: 100vh; }

.sidebar { width: var(--sidebar-w); background: #0f172a; color: #e2e8f0; }
.sidebar .brand { font-weight: 700; letter-spacing: .2px; }
.sidebar a { color: #cbd5e1; text-decoration: none; }
.sidebar a.active, .sidebar a:hover { color: #fff; background: rgba(255,255,255,.08); }

.content { flex: 1; background: #f5f7fb; }
.topbar { background: #fff; border-bottom: 1px solid rgba(15, 23, 42, .08); }

.card-soft { border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.table thead th { white-space: nowrap; }
.form-required::after{ content:" *"; color:#dc3545; }

.skeleton { background: linear-gradient(90deg, #eee, #f7f7f7, #eee); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 10px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }