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

body {
  background-color: #f5f7fb;
}

.app-sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: #0f172a;
}

.app-sidebar .nav-link {
  color: #cbd5f5;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.app-content {
  margin-left: var(--sidebar-width);
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: static;
    width: 100%;
    min-height: auto;
  }
  .app-content {
    margin-left: 0;
  }
}

.card-soft {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.text-muted-soft {
  color: #64748b;
}